diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index ef7560ca4..80537bc40 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -67,6 +67,11 @@ const config = {
           alt: '',
         },
       },
+      global: {
+        hover: {
+          'greyscale-100': '#055fd214',
+        },
+      },
       components: {
         datagrid: {
           header: {
diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index d3593a663..83514bef6 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -15,7 +15,7 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
@@ -38,7 +38,6 @@ export interface BoxProps {
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
-  $styledCss?: RuleSet<object>;
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -46,7 +45,7 @@ export type BoxType = ComponentPropsWithRef<typeof Box>;
 export const Box = styled('div')<BoxProps>`
   display: flex;
   flex-direction: column;
-  ${({ $styledCss }) => $styledCss && $styledCss}
+
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
@@ -75,7 +74,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
index e295c72d1..409206fd7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
@@ -46,16 +46,11 @@ export const SimpleDocItem = ({ doc, isPinned = false, subText }: Props) => {
         {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
       </Box>
       <div>
-        <Text
-          $weight={500}
-          $variation="1000"
-          $size="sm"
-          $styledCss={ItemTextCss}
-        >
+        <Text $weight={500} $variation="1000" $size="sm" $css={ItemTextCss}>
           {doc.title}
         </Text>
 
-        <Text $variation="500" $size="xs" $styledCss={ItemTextCss}>
+        <Text $variation="500" $size="xs" $css={ItemTextCss}>
           {subText ??
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
         </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
index b7db04aca..a501a4da0 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -47,14 +48,14 @@ export const DocsGridList = () => {
       <section>
         <Box
           as="header"
-          $css={`
+          $css={css`
             display: flex;
             flex-direction: row;
             margin-bottom: ${spacings['100W']};
             font-size: ${themeTokens().font?.sizes.xs};
             color: ${colors['greyscale-500']};
             padding-bottom: ${spacings['150V']} ${spacings['100W']};
-        `}
+          `}
         >
           <Box $flex={7}>{t('Name')}</Box>