diff --git a/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts b/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts
index 6e70bc27e95f..d0cb77bf9ee3 100644
--- a/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts
+++ b/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts
@@ -16,7 +16,6 @@ export const headerCell = style({
       borderRight: `1px solid ${cssVar('hoverColorFilled')}`,
     },
   },
-  display: 'flex',
   alignItems: 'center',
   columnGap: '4px',
   position: 'relative',
diff --git a/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx b/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx
index 1fbde3409f4d..5edde593ecdd 100644
--- a/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx
+++ b/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx
@@ -22,6 +22,7 @@ export const ListHeaderCell = ({
   alignment,
   flex,
   style,
+  hidden,
   hideInSmallContainer,
   children,
 }: HeaderCellProps) => {
@@ -39,6 +40,7 @@ export const ListHeaderCell = ({
       className={styles.headerCell}
       data-sortable={sortable ? true : undefined}
       data-sorting={sorting ? true : undefined}
+      hidden={hidden}
       style={style}
       role="columnheader"
       hideInSmallContainer={hideInSmallContainer}
diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
index a366630d8185..7e106142fcb4 100644
--- a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -6,6 +6,7 @@ import { type PropsWithChildren, useCallback, useMemo } from 'react';
 
 import { WorkbenchLink } from '../../../modules/workbench/view/workbench-link';
 import type { DraggableTitleCellData, PageListItemProps } from '../types';
+import { usePageDisplayProperties } from '../use-page-display-properties';
 import { ColWrapper, formatDate, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
 import { PageTags } from './page-tags';
@@ -14,6 +15,7 @@ const ListTitleCell = ({
   title,
   preview,
 }: Pick<PageListItemProps, 'title' | 'preview'>) => {
+  const [displayProperties] = usePageDisplayProperties();
   return (
     <div data-testid="page-list-item-title" className={styles.titleCell}>
       <div
@@ -22,7 +24,7 @@ const ListTitleCell = ({
       >
         {title}
       </div>
-      {preview ? (
+      {preview && displayProperties['bodyNotes'] ? (
         <div
           data-testid="page-list-item-preview-text"
           className={styles.titleCellPreview}
@@ -123,6 +125,7 @@ const PageListOperationsCell = ({
 };
 
 export const PageListItem = (props: PageListItemProps) => {
+  const [displayProperties] = usePageDisplayProperties();
   const pageTitleElement = useMemo(() => {
     return (
       <div className={styles.dragPageItemOverlay}>
@@ -182,14 +185,29 @@ export const PageListItem = (props: PageListItemProps) => {
           </div>
           <ListTitleCell title={props.title} preview={props.preview} />
         </ColWrapper>
-        <ColWrapper flex={4} alignment="end" style={{ overflow: 'visible' }}>
+        <ColWrapper
+          flex={4}
+          alignment="end"
+          style={{ overflow: 'visible' }}
+          hidden={!displayProperties['tags']}
+        >
           <PageTagsCell pageId={props.pageId} />
         </ColWrapper>
       </ColWrapper>
-      <ColWrapper flex={1} alignment="end" hideInSmallContainer>
+      <ColWrapper
+        flex={1}
+        alignment="end"
+        hideInSmallContainer
+        hidden={!displayProperties['createDate']}
+      >
         <PageCreateDateCell createDate={props.createDate} />
       </ColWrapper>
-      <ColWrapper flex={1} alignment="end" hideInSmallContainer>
+      <ColWrapper
+        flex={1}
+        alignment="end"
+        hideInSmallContainer
+        hidden={!displayProperties['updatedDate']}
+      >
         <PageUpdatedDateCell updatedDate={props.updatedDate} />
       </ColWrapper>
       {props.operations ? (
diff --git a/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx b/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
index 685ac32bde0e..7b25559dd5e1 100644
--- a/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
@@ -15,7 +15,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
 import { ListFloatingToolbar } from '../components/list-floating-toolbar';
 import { usePageItemGroupDefinitions } from '../group-definitions';
-import { pageHeaderColsDef } from '../header-col-def';
+import { usePageHeaderColsDef } from '../header-col-def';
 import { PageOperationCell } from '../operation-cell';
 import { PageListItemRenderer } from '../page-group';
 import { ListTableHeader } from '../page-header';
@@ -110,6 +110,7 @@ export const VirtualizedPageList = ({
   const pageMetas = useBlockSuiteDocMeta(currentWorkspace.docCollection);
   const pageOperations = usePageOperationsRenderer();
   const { isPreferredEdgeless } = usePageHelper(currentWorkspace.docCollection);
+  const pageHeaderColsDef = usePageHeaderColsDef();
 
   const filteredPageMetas = useFilteredPageMetas(currentWorkspace, pageMetas, {
     filters,
@@ -141,7 +142,7 @@ export const VirtualizedPageList = ({
 
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
 
   const pageItemRenderer = useCallback((item: ListItem) => {
     return <PageListItemRenderer {...item} />;
diff --git a/packages/frontend/core/src/components/page-list/header-col-def.tsx b/packages/frontend/core/src/components/page-list/header-col-def.tsx
index 60268b834ff3..bf9abe11461c 100644
--- a/packages/frontend/core/src/components/page-list/header-col-def.tsx
+++ b/packages/frontend/core/src/components/page-list/header-col-def.tsx
@@ -1,45 +1,55 @@
 import { Trans } from '@affine/i18n';
+import { useMemo } from 'react';
 
 import { ListHeaderTitleCell } from './page-header';
 import type { HeaderColDef } from './types';
-
-export const pageHeaderColsDef: HeaderColDef[] = [
-  {
-    key: 'title',
-    content: <ListHeaderTitleCell />,
-    flex: 6,
-    alignment: 'start',
-    sortable: true,
-  },
-  {
-    key: 'tags',
-    content: <Trans i18nKey="Tags" />,
-    flex: 3,
-    alignment: 'end',
-  },
-  {
-    key: 'createDate',
-    content: <Trans i18nKey="Created" />,
-    flex: 1,
-    sortable: true,
-    alignment: 'end',
-    hideInSmallContainer: true,
-  },
-  {
-    key: 'updatedDate',
-    content: <Trans i18nKey="Updated" />,
-    flex: 1,
-    sortable: true,
-    alignment: 'end',
-    hideInSmallContainer: true,
-  },
-  {
-    key: 'actions',
-    content: '',
-    flex: 1,
-    alignment: 'end',
-  },
-];
+import { usePageDisplayProperties } from './use-page-display-properties';
+export const usePageHeaderColsDef = (): HeaderColDef[] => {
+  const [displayProperties] = usePageDisplayProperties();
+  return useMemo(
+    () => [
+      {
+        key: 'title',
+        content: <ListHeaderTitleCell />,
+        flex: 6,
+        alignment: 'start',
+        sortable: true,
+      },
+      {
+        key: 'tags',
+        content: <Trans i18nKey="Tags" />,
+        flex: 3,
+        alignment: 'end',
+        hidden: !displayProperties['tags'],
+      },
+      {
+        key: 'createDate',
+        content: <Trans i18nKey="Created" />,
+        flex: 1,
+        sortable: true,
+        alignment: 'end',
+        hideInSmallContainer: true,
+        hidden: !displayProperties['createDate'],
+      },
+      {
+        key: 'updatedDate',
+        content: <Trans i18nKey="Updated" />,
+        flex: 1,
+        sortable: true,
+        alignment: 'end',
+        hideInSmallContainer: true,
+        hidden: !displayProperties['updatedDate'],
+      },
+      {
+        key: 'actions',
+        content: '',
+        flex: 1,
+        alignment: 'end',
+      },
+    ],
+    [displayProperties]
+  );
+};
 
 export const collectionHeaderColsDef: HeaderColDef[] = [
   {
diff --git a/packages/frontend/core/src/components/page-list/index.tsx b/packages/frontend/core/src/components/page-list/index.tsx
index bd88f0f301f4..d9b83f3615ab 100644
--- a/packages/frontend/core/src/components/page-list/index.tsx
+++ b/packages/frontend/core/src/components/page-list/index.tsx
@@ -17,6 +17,7 @@ export * from './tags';
 export * from './types';
 export * from './use-collection-manager';
 export * from './use-filtered-page-metas';
+export * from './use-page-display-properties';
 export * from './utils';
 export * from './view';
 export * from './virtualized-list';
diff --git a/packages/frontend/core/src/components/page-list/list.css.ts b/packages/frontend/core/src/components/page-list/list.css.ts
index 776bb23220f9..6b0af3dc6265 100644
--- a/packages/frontend/core/src/components/page-list/list.css.ts
+++ b/packages/frontend/core/src/components/page-list/list.css.ts
@@ -37,6 +37,10 @@ export const hideInSmallContainer = style({
     },
   },
 });
+
+export const hidden = style({
+  display: 'none',
+});
 export const favoriteCell = style({
   display: 'flex',
   alignItems: 'center',
diff --git a/packages/frontend/core/src/components/page-list/list.tsx b/packages/frontend/core/src/components/page-list/list.tsx
index 059f8bfe4af0..7fa7d24c94bd 100644
--- a/packages/frontend/core/src/components/page-list/list.tsx
+++ b/packages/frontend/core/src/components/page-list/list.tsx
@@ -11,7 +11,7 @@ import {
   useRef,
 } from 'react';
 
-import { pageHeaderColsDef } from './header-col-def';
+import { usePageHeaderColsDef } from './header-col-def';
 import * as styles from './list.css';
 import { ItemGroup } from './page-group';
 import { ListTableHeader } from './page-header';
@@ -135,7 +135,7 @@ ListInnerWrapper.displayName = 'ListInnerWrapper';
 
 const ListInner = (props: ListProps<ListItem>) => {
   const groups = useAtomValue(groupsAtom);
-
+  const pageHeaderColsDef = usePageHeaderColsDef();
   const hideHeader = props.hideHeader;
   return (
     <div className={clsx(props.className, styles.root)}>
diff --git a/packages/frontend/core/src/components/page-list/page-header.tsx b/packages/frontend/core/src/components/page-list/page-header.tsx
index 7822500d58fb..eb207839b45b 100644
--- a/packages/frontend/core/src/components/page-list/page-header.tsx
+++ b/packages/frontend/core/src/components/page-list/page-header.tsx
@@ -112,6 +112,7 @@ export const ListTableHeader = ({
       data-selection-active={selectionState.selectionActive}
     >
       {headerCols.map(col => {
+        const isTagHidden = col.key === 'tags' && col.hidden;
         return (
           <ListHeaderCell
             flex={col.flex}
@@ -121,8 +122,12 @@ export const ListTableHeader = ({
             sortable={col.sortable}
             sorting={sorter.key === col.key}
             order={sorter.order}
+            hidden={isTagHidden ? false : col.hidden}
             onSort={onSort}
-            style={{ overflow: 'visible' }}
+            style={{
+              overflow: 'visible',
+              visibility: isTagHidden ? 'hidden' : 'visible',
+            }}
             hideInSmallContainer={col.hideInSmallContainer}
           >
             {col.content}
diff --git a/packages/frontend/core/src/components/page-list/types.ts b/packages/frontend/core/src/components/page-list/types.ts
index a3fa82120215..bfd3964f1ba2 100644
--- a/packages/frontend/core/src/components/page-list/types.ts
+++ b/packages/frontend/core/src/components/page-list/types.ts
@@ -152,6 +152,7 @@ export type HeaderColDef = {
   alignment?: ColWrapperProps['alignment'];
   sortable?: boolean;
   hideInSmallContainer?: boolean;
+  hidden?: boolean;
 };
 
 export type ColWrapperProps = PropsWithChildren<{
@@ -161,3 +162,10 @@ export type ColWrapperProps = PropsWithChildren<{
   hideInSmallContainer?: boolean;
 }> &
   React.HTMLAttributes<Element>;
+
+export type PageDisplayProperties = {
+  bodyNotes: boolean;
+  tags: boolean;
+  createDate: boolean;
+  updatedDate: boolean;
+};
diff --git a/packages/frontend/core/src/components/page-list/use-page-display-properties.ts b/packages/frontend/core/src/components/page-list/use-page-display-properties.ts
new file mode 100644
index 000000000000..56bf606537de
--- /dev/null
+++ b/packages/frontend/core/src/components/page-list/use-page-display-properties.ts
@@ -0,0 +1,29 @@
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+
+import type { PageDisplayProperties } from './types';
+
+export const pageDisplayPropertiesAtom = atomWithStorage<PageDisplayProperties>(
+  'pageDisplayProperties',
+  {
+    bodyNotes: true,
+    tags: true,
+    createDate: true,
+    updatedDate: true,
+  }
+);
+
+export const usePageDisplayProperties = (): [
+  PageDisplayProperties,
+  (key: keyof PageDisplayProperties, value: boolean) => void,
+] => {
+  const [properties, setProperties] = useAtom(pageDisplayPropertiesAtom);
+  const onChange = useCallback(
+    (key: keyof PageDisplayProperties, value: boolean) => {
+      setProperties(prev => ({ ...prev, [key]: value }));
+    },
+    [setProperties]
+  );
+  return [properties, onChange];
+};
diff --git a/packages/frontend/core/src/components/page-list/utils.tsx b/packages/frontend/core/src/components/page-list/utils.tsx
index a2dd53dc4fa1..2b5d8c33adc8 100644
--- a/packages/frontend/core/src/components/page-list/utils.tsx
+++ b/packages/frontend/core/src/components/page-list/utils.tsx
@@ -74,6 +74,7 @@ export const ColWrapper = forwardRef<HTMLDivElement, ColWrapperProps>(
       flex,
       alignment,
       hideInSmallContainer,
+      hidden,
       className,
       style,
       children,
@@ -94,6 +95,7 @@ export const ColWrapper = forwardRef<HTMLDivElement, ColWrapperProps>(
         }}
         data-hide-item={hideInSmallContainer ? true : undefined}
         className={clsx(className, styles.colWrapper, {
+          [styles.hidden]: hidden,
           [styles.hideInSmallContainer]: hideInSmallContainer,
         })}
       >
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
index 5a328f7bba12..541a99d71763 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
@@ -8,7 +8,7 @@ import { type ReactNode, useCallback } from 'react';
 
 import { FilterList } from '../../filter/filter-list';
 import { VariableSelect } from '../../filter/vars';
-import { pageHeaderColsDef } from '../../header-col-def';
+import { usePageHeaderColsDef } from '../../header-col-def';
 import { PageListItemRenderer } from '../../page-group';
 import { ListTableHeader } from '../../page-header';
 import type { ListItem } from '../../types';
@@ -46,6 +46,7 @@ export const PagesMode = ({
       publicMode: allPageListConfig.getPublicMode(meta.id),
     }))
   );
+  const pageHeaderColsDef = usePageHeaderColsDef();
   const { searchText, updateSearchText, searchedList } =
     useSearch(filteredList);
   const clearSelected = useCallback(() => {
@@ -67,7 +68,7 @@ export const PagesMode = ({
   }, []);
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
   return (
     <>
       <input
diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
index 8e3d692372bf..e76ff23e9039 100644
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
@@ -7,9 +7,11 @@ import {
 } from '@affine/component';
 import {
   AllPageListOperationsMenu,
+  type PageDisplayProperties,
   type PageGroupByType,
   pageGroupByTypeAtom,
   PageListNewPageButton,
+  usePageDisplayProperties,
 } from '@affine/core/components/page-list';
 import { Header } from '@affine/core/components/pure/header';
 import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
@@ -40,6 +42,7 @@ export const AllPageHeader = ({
 }) => {
   const workspace = useService(Workspace);
   const [group, setGroup] = useAtom(pageGroupByTypeAtom);
+  const [properties, setProperties] = usePageDisplayProperties();
   const t = useAFFiNEI18N();
   const handleSelect = useCallback(
     (value: PageGroupByType) => {
@@ -47,6 +50,34 @@ export const AllPageHeader = ({
     },
     [setGroup]
   );
+  const propertyOptions: Array<{
+    key: keyof PageDisplayProperties;
+    onClick: () => void;
+    label: string;
+  }> = useMemo(() => {
+    return [
+      {
+        key: 'bodyNotes',
+        onClick: () => setProperties('bodyNotes', !properties['bodyNotes']),
+        label: t['com.affine.page.display.display-properties.body-notes'](),
+      },
+      {
+        key: 'tags',
+        onClick: () => setProperties('tags', !properties['tags']),
+        label: t['Tags'](),
+      },
+      {
+        key: 'createDate',
+        onClick: () => setProperties('createDate', !properties['createDate']),
+        label: t['Created'](),
+      },
+      {
+        key: 'updatedDate',
+        onClick: () => setProperties('updatedDate', !properties['updatedDate']),
+        label: t['Updated'](),
+      },
+    ];
+  }, [properties, setProperties, t]);
 
   const items = useMemo(() => {
     const groupOptions: GroupOption[] = [
@@ -111,16 +142,20 @@ export const AllPageHeader = ({
           {t['com.affine.page.display.display-properties']()}
         </div>
         <div className={styles.propertiesWrapper}>
-          <Button>
-            {t['com.affine.page.display.display-properties.body-notes']()}
-          </Button>
-          <Button>{t['Tags']()}</Button>
-          <Button>{t['Created']()}</Button>
-          <Button>{t['Updated']()}</Button>
+          {propertyOptions.map(option => (
+            <Button
+              key={option.label}
+              className={styles.propertyButton}
+              onClick={option.onClick}
+              data-active={properties[option.key]}
+            >
+              {option.label}
+            </Button>
+          ))}
         </div>
       </>
     );
-  }, [group, handleSelect, t]);
+  }, [group, handleSelect, properties, propertyOptions, t]);
 
   return (
     <Header
diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts b/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts
index 93e1f615a906..b859bccb55d1 100644
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts
@@ -89,3 +89,12 @@ export const body = style({
   height: '100%',
   width: '100%',
 });
+
+export const propertyButton = style({
+  color: cssVar('textDisableColor'),
+  selectors: {
+    '&[data-active="true"]': {
+      color: cssVar('textPrimaryColor'),
+    },
+  },
+});
diff --git a/packages/frontend/core/src/pages/workspace/trash-page.tsx b/packages/frontend/core/src/pages/workspace/trash-page.tsx
index 651ad24d729e..474861795a63 100644
--- a/packages/frontend/core/src/pages/workspace/trash-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/trash-page.tsx
@@ -8,7 +8,7 @@ import {
   useFilteredPageMetas,
   VirtualizedList,
 } from '@affine/core/components/page-list';
-import { pageHeaderColsDef } from '@affine/core/components/page-list/header-col-def';
+import { usePageHeaderColsDef } from '@affine/core/components/page-list/header-col-def';
 import { Header } from '@affine/core/components/pure/header';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
@@ -61,6 +61,7 @@ export const TrashPage = () => {
     useBlockSuiteMetaHelper(docCollection);
   const { isPreferredEdgeless } = usePageHelper(docCollection);
   const t = useAFFiNEI18N();
+  const pageHeaderColsDef = usePageHeaderColsDef();
 
   const pageOperationsRenderer = useCallback(
     (item: ListItem) => {
@@ -93,7 +94,7 @@ export const TrashPage = () => {
   }, []);
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
   return (
     <>
       <ViewHeaderIsland>
diff --git a/tests/storybook/src/stories/page-list.stories.tsx b/tests/storybook/src/stories/page-list.stories.tsx
index 61259f6e6431..2e60ccb2b15b 100644
--- a/tests/storybook/src/stories/page-list.stories.tsx
+++ b/tests/storybook/src/stories/page-list.stories.tsx
@@ -224,7 +224,7 @@ export const PageListStory: StoryFn<ListProps<ListItem>> = (
 };
 
 PageListStory.args = {
-  groupBy: 'createDate',
+  groupBy: false,
 };
 
 PageListStory.argTypes = {