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
new file mode 100644
index 0000000000..cbaa56dcd5
--- /dev/null
+++ b/packages/component/src/components/page-list/view/view-list.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterButton = style({
+  borderRadius: '8px',
+  padding: '2px 8px 2px 4px',
+  margin: '20px',
+});
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 9445a0bf00..3a9853cab2 100644
--- a/packages/component/src/components/page-list/view/view-list.tsx
+++ b/packages/component/src/components/page-list/view/view-list.tsx
@@ -1,12 +1,10 @@
-import { MenuItem, styled } from '@affine/component';
+import { Button, MenuItem } from '@affine/component';
+import { FilteredIcon } from '@blocksuite/icons';
 
 import Menu from '../../../ui/menu/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useAllPageSetting } from '../use-all-page-setting';
-
-const NoDragDiv = styled('div')`
-  -webkit-app-region: no-drag;
-`;
+import { filterButton } from './view-list.css';
 
 export const ViewList = ({
   setting,
@@ -33,9 +31,9 @@ export const ViewList = ({
             </div>
           }
         >
-          <NoDragDiv style={{ marginRight: 12, cursor: 'pointer' }}>
+          <Button style={{ marginRight: 12, cursor: 'pointer' }}>
             {setting.currentView.name}
-          </NoDragDiv>
+          </Button>
         </Menu>
       )}
       <Menu
@@ -52,7 +50,9 @@ export const ViewList = ({
           />
         }
       >
-        <NoDragDiv style={{ cursor: 'pointer' }}>Filter</NoDragDiv>
+        <Button icon={<FilteredIcon />} className={filterButton}>
+          Filter
+        </Button>
       </Menu>
     </div>
   );