diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx
index 1e03d1ad4f..89c6b2c20f 100644
--- a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx
@@ -110,7 +110,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
             return true;
           }
           return filterByFilterList(view.filterList, {
-            Favorite: !!pageMeta.favorite,
+            'Is Favourited': !!pageMeta.favorite,
             Created: pageMeta.createDate,
             Updated: pageMeta.updatedDate ?? pageMeta.createDate,
           });
diff --git a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
index a9425a7687..fb394c7497 100644
--- a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
+++ b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
@@ -149,7 +149,24 @@ export const pageListTitleWrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
-
+export const allPageListTitleWrapper = style({
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});
 export const pageListTitleIcon = style({
   fontSize: '20px',
   height: '1em',
diff --git a/apps/web/src/components/filter-container.css.ts b/apps/web/src/components/filter-container.css.ts
new file mode 100644
index 0000000000..9ea7b2a745
--- /dev/null
+++ b/apps/web/src/components/filter-container.css.ts
@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  padding: '12px',
+  display: 'flex',
+  position: 'relative',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});
diff --git a/apps/web/src/components/pure/workspace-title/index.tsx b/apps/web/src/components/pure/workspace-title/index.tsx
index 7a75d9f28a..337f1742eb 100644
--- a/apps/web/src/components/pure/workspace-title/index.tsx
+++ b/apps/web/src/components/pure/workspace-title/index.tsx
@@ -1,11 +1,11 @@
 import { RadioButton, RadioButtonGroup } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import type React from 'react';
 
-import { openQuickSearchModalAtom, pageModeSelectAtom } from "../../../atoms";
+import { openQuickSearchModalAtom, pageModeSelectAtom } from '../../../atoms';
 import type { HeaderProps } from '../../blocksuite/workspace-header/header';
 import { Header } from '../../blocksuite/workspace-header/header';
 import * as styles from '../../blocksuite/workspace-header/styles.css';
@@ -49,7 +49,7 @@ export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
   };
   return (
     <Header {...props}>
-      <div className={styles.pageListTitleWrapper}>
+      <div className={styles.allPageListTitleWrapper}>
         <RadioButtonGroup
           defaultValue={value}
           onValueChange={handleValueChange}
diff --git a/apps/web/src/components/workspace-header.tsx b/apps/web/src/components/workspace-header.tsx
index 90fef3cfed..e624e74702 100644
--- a/apps/web/src/components/workspace-header.tsx
+++ b/apps/web/src/components/workspace-header.tsx
@@ -15,6 +15,7 @@ import type { ReactElement } from 'react';
 import { NIL } from 'uuid';
 
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
+import { filterContainerStyle } from './filter-container.css';
 import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
 
 export function WorkspaceHeader({
@@ -25,23 +26,21 @@ export function WorkspaceHeader({
   const t = useAFFiNEI18N();
   if ('subPath' in currentEntry) {
     if (currentEntry.subPath === WorkspaceSubPath.ALL) {
-      const leftSlot = config.enableAllPageFilter && (
-        <ViewList setting={setting}></ViewList>
-      );
-      const filterContainer = config.enableAllPageFilter &&
-        setting.currentView.filterList.length > 0 && (
-          <div style={{ padding: 12, display: 'flex' }}>
-            <div style={{ flex: 1 }}>
-              <FilterList
-                value={setting.currentView.filterList}
-                onChange={filterList => {
-                  setting.setCurrentView(view => ({
-                    ...view,
-                    filterList,
-                  }));
-                }}
-              />
-            </div>
+      const leftSlot = <ViewList setting={setting}></ViewList>;
+      const filterContainer = setting.currentView.filterList.length > 0 && (
+        <div className={filterContainerStyle}>
+          <div style={{ flex: 1 }}>
+            <FilterList
+              value={setting.currentView.filterList}
+              onChange={filterList => {
+                setting.setCurrentView(view => ({
+                  ...view,
+                  filterList,
+                }));
+              }}
+            />
+          </div>
+          {config.enableAllPageFilter && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&
@@ -56,8 +55,9 @@ export function WorkspaceHeader({
                 </Button>
               )}
             </div>
-          </div>
-        );
+          )}
+        </div>
+      );
       return (
         <>
           <WorkspaceModeFilterTab
diff --git a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
index 28fa672f39..32eb50b3da 100644
--- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
@@ -1,8 +1,8 @@
-import { IconButton, Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SidebarIcon } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
 
+import { IconButton, Tooltip } from '../../../';
 import { sidebarButtonStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 
diff --git a/packages/component/src/components/page-list/filter/filter-list.tsx b/packages/component/src/components/page-list/filter/filter-list.tsx
index 2bb88cdf4c..8a06944d32 100644
--- a/packages/component/src/components/page-list/filter/filter-list.tsx
+++ b/packages/component/src/components/page-list/filter/filter-list.tsx
@@ -1,8 +1,8 @@
 import { Menu } from '../../..';
 import { Condition } from './condition';
+import * as styles from './index.css';
 import type { Filter } from './vars';
 import { CreateFilterMenu } from './vars';
-
 export const FilterList = ({
   value,
   onChange,
@@ -14,17 +14,7 @@ export const FilterList = ({
     <div style={{ display: 'flex', flexWrap: 'wrap' }}>
       {value.map((filter, i) => {
         return (
-          <div
-            style={{
-              display: 'flex',
-              border: '1px solid gray',
-              borderRadius: 4,
-              padding: '2px 6px',
-              margin: 4,
-              backgroundColor: 'white',
-            }}
-            key={i}
-          >
+          <div className={styles.filterItemStyle} key={i}>
             <Condition
               value={filter}
               onChange={filter => {
diff --git a/packages/component/src/components/page-list/filter/index.css.ts b/packages/component/src/components/page-list/filter/index.css.ts
new file mode 100644
index 0000000000..2e01df8624
--- /dev/null
+++ b/packages/component/src/components/page-list/filter/index.css.ts
@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+export const menuItemStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '0px 24px 0px 8px',
+});
+export const variableSelectTitleStyle = style({
+  marginLeft: '12px',
+  marginTop: '10px',
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+});
+export const variableSelectDividerStyle = style({
+  marginTop: '2px',
+  marginBottom: '2px',
+  marginLeft: '12px',
+  marginRight: '8px',
+  height: '1px',
+  background: 'var(--affine-border-color)',
+});
+export const menuItemTextStyle = style({
+  fontSize: 'var(--affine-font-sm)',
+});
+export const filterItemStyle = style({
+  display: 'flex',
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '8px',
+  padding: '2px 6px',
+  margin: 4,
+  background: 'var(--affine-white)',
+});
diff --git a/packages/component/src/components/page-list/filter/vars.tsx b/packages/component/src/components/page-list/filter/vars.tsx
index 78ef49d05b..2b2b7348d9 100644
--- a/packages/component/src/components/page-list/filter/vars.tsx
+++ b/packages/component/src/components/page-list/filter/vars.tsx
@@ -1,7 +1,9 @@
+import { DateTimeIcon, FavoritedIcon } from '@blocksuite/icons';
 import dayjs from 'dayjs';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { MenuItem } from '../../../ui/menu';
+import * as styles from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
 import type { TFunction, TType } from './logical/typesystem';
@@ -36,16 +38,20 @@ export type Literal = {
 export type FilterVariable = {
   name: keyof VariableMap;
   type: TType;
+  icon: ReactElement;
 };
 export const variableDefineMap = {
   Created: {
     type: tDate.create(),
+    icon: <DateTimeIcon />,
   },
   Updated: {
     type: tDate.create(),
+    icon: <DateTimeIcon />,
   },
-  Favorite: {
+  'Is Favourited': {
     type: tBoolean.create(),
+    icon: <FavoritedIcon />,
   },
   // Imported: {
   //   type: tBoolean.create(),
@@ -61,6 +67,7 @@ export const vars: FilterVariable[] = Object.entries(variableDefineMap).map(
   ([key, value]) => ({
     name: key as keyof VariableMap,
     type: value.type,
+    icon: value.icon,
   })
 );
 
@@ -102,16 +109,20 @@ export const VariableSelect = ({
 }) => {
   return (
     <div>
+      <div className={styles.variableSelectTitleStyle}>Filter</div>
+      <div className={styles.variableSelectDividerStyle}></div>
       {vars
         // .filter(v => !selected.find(filter => filter.left.name === v.name))
         .map(v => (
           <MenuItem
+            icon={v.icon}
             key={v.name}
             onClick={() => {
               onSelect(createDefaultFilter(v));
             }}
+            className={styles.menuItemStyle}
           >
-            {v.name}
+            <div className={styles.menuItemTextStyle}>{v.name}</div>
           </MenuItem>
         ))}
     </div>
diff --git a/packages/component/src/components/page-list/styles.ts b/packages/component/src/components/page-list/styles.ts
index a88f498856..763dc8cdf6 100644
--- a/packages/component/src/components/page-list/styles.ts
+++ b/packages/component/src/components/page-list/styles.ts
@@ -4,7 +4,7 @@ import { Content, displayFlex, styled } from '../../';
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
     height: 'calc(100vh - 52px)',
-    padding: '52px 32px',
+    padding: '18px 32px 52px 32px',
     maxWidth: '100%',
     overflowY: 'auto',
     [theme.breakpoints.down('sm')]: {
diff --git a/packages/component/src/components/page-list/view/view-list.css.ts b/packages/component/src/components/page-list/view/view-list.css.ts
index cbaa56dcd5..969ad0db4b 100644
--- a/packages/component/src/components/page-list/view/view-list.css.ts
+++ b/packages/component/src/components/page-list/view/view-list.css.ts
@@ -2,6 +2,30 @@ import { style } from '@vanilla-extract/css';
 
 export const filterButton = style({
   borderRadius: '8px',
-  padding: '2px 8px 2px 4px',
-  margin: '20px',
+  height: '100%',
+  padding: '4px 8px',
+  fontSize: 'var(--affine-font-xs)',
+  background: 'var(--affine-hover-color)',
+  color: 'var(--affine-text-secondary-color)',
+  border: '1px solid var(--affine-border-color)',
+  transition: 'margin-left 0.2s ease-in-out',
+  ':hover': {
+    borderColor: 'var(--affine-border-color)',
+  },
+});
+export const filterButtonCollapse = style({
+  marginLeft: '20px',
+});
+export const viewDivider = style({
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
 });
diff --git a/packages/component/src/components/page-list/view/view-list.tsx b/packages/component/src/components/page-list/view/view-list.tsx
index c5da3f6727..563c57ab93 100644
--- a/packages/component/src/components/page-list/view/view-list.tsx
+++ b/packages/component/src/components/page-list/view/view-list.tsx
@@ -1,16 +1,19 @@
 import { FilteredIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+import { useAtom } from 'jotai';
 
 import { Button, MenuItem } from '../../..';
 import Menu from '../../../ui/menu/menu';
+import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useAllPageSetting } from '../use-all-page-setting';
-import { filterButton } from './view-list.css';
-
+import * as styles from './view-list.css';
 export const ViewList = ({
   setting,
 }: {
   setting: ReturnType<typeof useAllPageSetting>;
 }) => {
+  const [open] = useAtom(appSidebarOpenAtom);
   return (
     <div style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       {setting.savedViews.length > 0 && (
@@ -38,6 +41,7 @@ export const ViewList = ({
       )}
       <Menu
         trigger="click"
+        placement="bottom-start"
         content={
           <CreateFilterMenu
             value={setting.currentView.filterList}
@@ -50,7 +54,14 @@ export const ViewList = ({
           />
         }
       >
-        <Button icon={<FilteredIcon />} className={filterButton}>
+        <Button
+          icon={<FilteredIcon />}
+          className={clsx(styles.filterButton, {
+            [styles.filterButtonCollapse]: !open,
+          })}
+          size="small"
+          hoverColor="var(--affine-icon-color)"
+        >
           Filter
         </Button>
       </Menu>
diff --git a/packages/component/src/ui/shared/container.tsx b/packages/component/src/ui/shared/container.tsx
index 3262474f8b..c110c847d5 100644
--- a/packages/component/src/ui/shared/container.tsx
+++ b/packages/component/src/ui/shared/container.tsx
@@ -31,7 +31,7 @@ export const placementToContainerDirection: Record<
   'right-start': 'left-top',
   'right-end': 'left-bottom',
   bottom: 'none',
-  'bottom-start': 'left-top',
+  'bottom-start': 'none',
   'bottom-end': 'none',
   left: 'none',
   'left-start': 'right-top',