diff --git a/packages/component/src/components/page-list/all-page.tsx b/packages/component/src/components/page-list/all-page.tsx
index c7903ca528..024ba6b8c2 100644
--- a/packages/component/src/components/page-list/all-page.tsx
+++ b/packages/component/src/components/page-list/all-page.tsx
@@ -197,6 +197,7 @@ export const PageListTrashView: React.FC<{
       {
         pageId,
         title,
+        preview,
         icon,
         createDate,
         trashDate,
@@ -214,6 +215,7 @@ export const PageListTrashView: React.FC<{
           <TitleCell
             icon={icon}
             text={title || t['Untitled']()}
+            desc={preview}
             onClick={onClickPage}
           />
           <TableCell onClick={onClickPage}>{formatDate(createDate)}</TableCell>
diff --git a/packages/component/src/components/page-list/all-pages-body.tsx b/packages/component/src/components/page-list/all-pages-body.tsx
index 494bb88b3c..ee98535a55 100644
--- a/packages/component/src/components/page-list/all-pages-body.tsx
+++ b/packages/component/src/components/page-list/all-pages-body.tsx
@@ -49,6 +49,7 @@ export const AllPagesBody = ({
             groupName,
             pageId,
             title,
+            preview,
             icon,
             isPublicPage,
             favorite,
@@ -80,6 +81,7 @@ export const AllPagesBody = ({
                   }}
                   icon={icon}
                   text={displayTitle}
+                  desc={preview}
                   data-testid="title"
                   onClick={onClickPage}
                 />
diff --git a/packages/component/src/components/page-list/components/title-cell.tsx b/packages/component/src/components/page-list/components/title-cell.tsx
index 31b768141e..58ed823e3a 100644
--- a/packages/component/src/components/page-list/components/title-cell.tsx
+++ b/packages/component/src/components/page-list/components/title-cell.tsx
@@ -2,11 +2,16 @@ import type { TableCellProps } from '@affine/component';
 import { Content, TableCell } from '@affine/component';
 import React, { useCallback } from 'react';
 
-import { StyledTitleLink } from '../styles';
+import {
+  StyledTitleContentWrapper,
+  StyledTitleLink,
+  StyledTitlePreview,
+} from '../styles';
 
 type TitleCellProps = {
   icon: JSX.Element;
   text: string;
+  desc?: string;
   suffix?: JSX.Element;
   /**
    * Customize the children of the cell
@@ -17,22 +22,29 @@ type TitleCellProps = {
 } & Omit<TableCellProps, 'children'>;
 
 export const TitleCell = React.forwardRef<HTMLTableCellElement, TitleCellProps>(
-  ({ icon, text, suffix, children: render, ...props }, ref) => {
+  ({ icon, text, desc, suffix, children: render, ...props }, ref) => {
     const renderChildren = useCallback(() => {
       const childElement = (
         <>
           <StyledTitleLink>
             {icon}
-            <Content ellipsis={true} color="inherit">
-              {text}
-            </Content>
+            <StyledTitleContentWrapper>
+              <Content ellipsis={true} maxWidth="100%" color="inherit">
+                {text}
+              </Content>
+              {desc && (
+                <StyledTitlePreview ellipsis={true} color="inherit">
+                  {desc}
+                </StyledTitlePreview>
+              )}
+            </StyledTitleContentWrapper>
           </StyledTitleLink>
           {suffix}
         </>
       );
 
       return render ? render(childElement) : childElement;
-    }, [icon, render, suffix, text]);
+    }, [desc, icon, render, suffix, text]);
 
     return (
       <TableCell ref={ref} {...props}>
diff --git a/packages/component/src/components/page-list/styles.ts b/packages/component/src/components/page-list/styles.ts
index c6694abcac..cbf80b5333 100644
--- a/packages/component/src/components/page-list/styles.ts
+++ b/packages/component/src/components/page-list/styles.ts
@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@affine/component';
+import { Content, displayFlex, styled } from '@affine/component';
 import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
@@ -50,6 +50,24 @@ export const StyledTitleLink = styled('div')(() => {
   };
 });
 
+export const StyledTitleContentWrapper = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    overflow: 'hidden',
+  };
+});
+
+export const StyledTitlePreview = styled(Content)(() => {
+  return {
+    fontWeight: 400,
+    fontSize: 'var(--affine-font-xs)',
+    maxWidth: '100%',
+  };
+});
+
 export const StyledTableRow = styled(TableRow)(() => {
   return {
     cursor: 'pointer',
diff --git a/packages/component/src/components/page-list/type.ts b/packages/component/src/components/page-list/type.ts
index e8dc277d46..e06918dcc1 100644
--- a/packages/component/src/components/page-list/type.ts
+++ b/packages/component/src/components/page-list/type.ts
@@ -11,6 +11,7 @@ export type ListData = {
   pageId: string;
   icon: JSX.Element;
   title: string;
+  preview?: string;
   favorite: boolean;
   createDate: Date;
   updatedDate: Date;
@@ -28,6 +29,7 @@ export type TrashListData = {
   pageId: string;
   icon: JSX.Element;
   title: string;
+  preview?: string;
   createDate: Date;
   // TODO remove optional after assert that trashDate is always set
   trashDate?: Date;
@@ -47,5 +49,6 @@ export type PageListProps = {
 export type DraggableTitleCellData = {
   pageId: string;
   pageTitle: string;
+  pagePreview?: string;
   icon: React.ReactElement;
 };
diff --git a/packages/component/src/stories/page-list.stories.tsx b/packages/component/src/stories/page-list.stories.tsx
index 173fda6022..62473ba9a3 100644
--- a/packages/component/src/stories/page-list.stories.tsx
+++ b/packages/component/src/stories/page-list.stories.tsx
@@ -71,6 +71,7 @@ AffineAllPageList.args = {
       icon: <PageIcon />,
       isPublicPage: true,
       title: 'Today Page',
+      preview: 'this is page preview',
       createDate: new Date(),
       updatedDate: new Date(),
       bookmarkPage: () => toast('Bookmark page'),
@@ -84,7 +85,10 @@ AffineAllPageList.args = {
       favorite: false,
       icon: <PageIcon />,
       isPublicPage: true,
-      title: '1 Example Public Page with long title that will be truncated',
+      title:
+        '1 Example Public Page with long title that will be truncated because it is too too long',
+      preview:
+        'this is page preview and it is very long and will be truncated because it is too long and it is very long and will be truncated because it is too long',
       createDate: new Date('2021-01-01'),
       updatedDate: new Date('2021-01-02'),
       bookmarkPage: () => toast('Bookmark page'),
@@ -139,6 +143,7 @@ AffineTrashPageList.args = {
       pageId: '1',
       icon: <PageIcon />,
       title: 'Example Page',
+      preview: 'this is trash page preview',
       createDate: new Date('2021-01-01'),
       trashDate: new Date('2021-01-01'),
       onClickPage: () => toast('Click page'),