diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
index 9da5aaed..6a8f7790 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 b67a1324..c5084262 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 ad4cfcef..0ba43b24 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 914967c4..62ee1682 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 578957dd..746428fa 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 db8b7db8..05c520ad 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 5c45aa4d..120a69b6 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 f13286a3..8732f998 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>
   );