diff --git a/packages/component/src/components/page-list/all-page.tsx b/packages/component/src/components/page-list/all-page.tsx
index c7903ca52..024ba6b8c 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 494bb88b3..ee98535a5 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 31b768141..58ed823e3 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 c6694abca..cbf80b533 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 e8dc277d4..e06918dcc 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 173fda602..62473ba9a 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'),