diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
index 9da5aaede..6a8f77900 100644
--- a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
+++ b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
@@ -19,7 +19,8 @@ export const SeparatedSection = ({
   return (
     <Box
       $css={css`
-        padding: ${spacings['base']} 0;
+        width: 100%;
+        padding: ${spacings['sm']} 0;
         ${showSeparator &&
         css`
           border-bottom: 1px solid ${colors?.['greyscale-200']};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg
index b67a1324c..c5084262d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg
@@ -1,7 +1,7 @@
-<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
-<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
-<path d="M6.5 8.55556H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
+<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#E3E3FD" stroke-width="0.472222"/>
+<path d="M6.5 8.55554H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
 <path d="M6.5 11.3889H23.5M6.5 14.2222H23.5M6.5 17.0556H23.5M6.5 19.8889H23.5M6.5 22.7222H20.6667" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
 <rect x="7" y="10" width="16" height="16" rx="8" fill="#6A6AF4"/>
 <rect x="7" y="10" width="16" height="16" rx="8" stroke="white" stroke-width="1.5"/>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
index ad4cfcef1..0ba43b243 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
@@ -1,6 +1,6 @@
-<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
-<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
-<path d="M5.5 7.55554H14" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
-<path d="M5.5 10.3889H22.5M5.5 13.2222H22.5M5.5 16.0556H22.5M5.5 18.8889H22.5M5.5 21.7222H22.5M5.5 24.5556H22.5M5.5 27.3889H22.5M5.5 30.2222H22.5M5.5 33.0556H22.5" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
+<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#E3E3FD" stroke-width="0.472222"/>
+<path d="M6.5 8.55554H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
+<path d="M6.5 11.3889H23.5M6.5 14.2222H23.5M6.5 17.0556H23.5M6.5 19.8889H23.5M6.5 22.7222H20.6667" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
 </svg>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx
index 914967c45..62ee16824 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx
@@ -29,15 +29,16 @@ const getColorFromName = (name: string) => {
 
 type Props = {
   user: User;
+  background?: string;
 };
 
-export const UserAvatar = ({ user }: Props) => {
+export const UserAvatar = ({ user, background }: Props) => {
   const name = user.full_name || user.email || '?';
   const splitName = name?.split(' ');
 
   return (
     <Box
-      $background={getColorFromName(name)}
+      $background={background || getColorFromName(name)}
       $width="24px"
       $height="24px"
       $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 578957ddf..746428fad 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -53,37 +53,44 @@ export const DocsGrid = ({
   return (
     <Box $position="relative" $width="100%" $maxWidth="960px">
       <DocsGridLoader isLoading={isRefetching} />
-      <Card data-testid="docs-grid" $padding="md">
+      <Card
+        data-testid="docs-grid"
+        $padding={{
+          top: 'base',
+          horizontal: isDesktop ? 'md' : 'xs',
+          bottom: 'md',
+        }}
+      >
         <Text
           as="h4"
           $size="h4"
-          $weight="700"
-          $margin={{ top: '0px', bottom: 'xs' }}
+          $variation="1000"
+          $margin={{ top: '0px', bottom: '10px' }}
         >
           {title}
         </Text>
 
-        <Box>
+        <Box $gap="6px">
           <Box
             $direction="row"
-            $padding="xs"
+            $padding={{ horizontal: 'xs' }}
             $gap="20px"
             data-testid="docs-grid-header"
           >
             <Box $flex={6} $padding="3xs">
-              <Text $size="xs" $variation="600">
+              <Text $size="xs" $variation="600" $weight="500">
                 {t('Name')}
               </Text>
             </Box>
             {isDesktop && (
-              <Box $flex={1.3} $padding="3xs">
-                <Text $size="xs" $variation="600">
+              <Box $flex={2} $padding="3xs">
+                <Text $size="xs" $weight="500" $variation="600">
                   {t('Updated at')}
                 </Text>
               </Box>
             )}
 
-            <Box $flex={1} $align="flex-end" $padding="3xs" />
+            <Box $flex={1.15} $align="flex-end" $padding="3xs" />
           </Box>
 
           {/* Body */}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
index db8b7db87..05c520adb 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -13,11 +13,16 @@ import { useDeleteFavoriteDoc } from '../../doc-management/api/useDeleteFavorite
 
 interface DocsGridActionsProps {
   doc: Doc;
+  openShareModal?: () => void;
 }
 
-export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
+export const DocsGridActions = ({
+  doc,
+  openShareModal,
+}: DocsGridActionsProps) => {
   const { t } = useTranslation();
   const deleteModal = useModal();
+
   const removeFavoriteDoc = useDeleteFavoriteDoc({
     listInvalideQueries: [KEY_LIST_DOC],
   });
@@ -38,6 +43,13 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
       },
       testId: `docs-grid-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
     },
+    {
+      label: t('Share'),
+      icon: 'group',
+      callback: () => openShareModal?.(),
+      testId: `docs-grid-actions-share-${doc.id}`,
+    },
+
     {
       label: t('Remove'),
       icon: 'delete',
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index 5c45aa4d3..120a69b6c 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -36,7 +36,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
         $align="center"
         $gap="20px"
         role="row"
-        $padding={{ vertical: 'xs', horizontal: 'sm' }}
+        $padding={{ vertical: '2xs', horizontal: isDesktop ? 'base' : 'xs' }}
         $css={css`
           cursor: pointer;
           border-radius: 4px;
@@ -46,7 +46,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
         `}
       >
         <StyledLink
-          $css="flex: 7; align-items: center;"
+          $css="flex: 8; align-items: center;"
           href={`/docs/${doc.id}`}
         >
           <Box
@@ -57,19 +57,19 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             <SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
           </Box>
           {isDesktop && (
-            <Box $flex={1.3}>
-              <Text $variation="500" $size="xs">
+            <Box $flex={2}>
+              <Text $variation="600" $size="xs">
                 {DateTime.fromISO(doc.updated_at).toRelative()}
               </Text>
             </Box>
           )}
         </StyledLink>
         <Box
-          $flex={1}
+          $flex={1.15}
           $direction="row"
           $align="center"
           $justify="flex-end"
-          $gap="10px"
+          $gap="32px"
         >
           {isDesktop && isPublic && (
             <Button
@@ -79,6 +79,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
                 handleShareClick();
               }}
               size="nano"
+              fullWidth
               icon={<Icon $variation="000" iconName="public" />}
             >
               {isShared ? sharedCount : undefined}
@@ -91,6 +92,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
                 event.stopPropagation();
                 handleShareClick();
               }}
+              fullWidth
               color="tertiary"
               size="nano"
               icon={<Icon $variation="800" $theme="primary" iconName="group" />}
@@ -105,13 +107,14 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
                 event.stopPropagation();
                 handleShareClick();
               }}
+              fullWidth
               size="nano"
               icon={<Icon $variation="000" iconName="corporate_fare" />}
             >
               {sharedCount}
             </Button>
           )}
-          <DocsGridActions doc={doc} />
+          <DocsGridActions doc={doc} openShareModal={handleShareClick} />
         </Box>
       </Box>
       {shareModal.isOpen && (
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
index f13286a39..8732f9988 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import { css } from 'styled-components';
 
 import { Box, Icon, Text } from '@/components';
@@ -20,14 +21,12 @@ const ItemTextCss = css`
 type SimpleDocItemProps = {
   doc: Doc;
   isPinned?: boolean;
-  subText?: string;
   showAccesses?: boolean;
 };
 
 export const SimpleDocItem = ({
   doc,
   isPinned = false,
-  subText,
   showAccesses = false,
 }: SimpleDocItemProps) => {
   const { spacingsTokens } = useCunninghamTheme();
@@ -51,7 +50,7 @@ export const SimpleDocItem = ({
       >
         {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
       </Box>
-      <Box>
+      <Box $justify="center">
         <Text
           aria-describedby="doc-title"
           aria-label={doc.title}
@@ -62,23 +61,34 @@ export const SimpleDocItem = ({
         >
           {doc.title}
         </Text>
-        <Box $direction="row" $align="center" $gap={spacings['3xs']}>
-          {(!isDesktop || showAccesses) && (
-            <>
-              {isPublic && <Icon iconName="public" $size="16px" />}
-              {isShared && <Icon iconName="group" $size="16px" />}
-              {isSharedOrPublic && accessCount > 0 && (
-                <Text $size="12px">{accessCount}</Text>
-              )}
-              {isSharedOrPublic && <Text $size="12px">·</Text>}
-            </>
-          )}
-
-          <Text $size="xs" $variation="500" $weight="500" $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>
-        </Box>
+        {(!isDesktop || showAccesses) && (
+          <Box
+            $direction="row"
+            $align="center"
+            $gap={spacings['3xs']}
+            $margin={{ top: '-2px' }}
+          >
+            {isPublic && (
+              <Icon iconName="public" $size="16px" $variation="600" />
+            )}
+            {isShared && (
+              <Icon iconName="group" $size="16px" $variation="600" />
+            )}
+            {isSharedOrPublic && accessCount > 0 && (
+              <Text $size="12px" $weight="bold" $variation="600">
+                {accessCount}
+              </Text>
+            )}
+            {isSharedOrPublic && (
+              <Text $size="12px" $variation="600">
+                ·
+              </Text>
+            )}
+            <Text $variation="600" $size="xs">
+              {DateTime.fromISO(doc.updated_at).toRelative()}
+            </Text>
+          </Box>
+        )}
       </Box>
     </Box>
   );