diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
index 4331cf4a7..49bfa41f0 100644
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
@@ -32,10 +32,14 @@ import {
   StyledTitleLink,
   StyledTitleWrapper,
 } from './styles';
-const FavoriteTag = ({
-  pageMeta: { favorite, id },
-}: {
+
+export type FavoriteTagProps = {
   pageMeta: PageMeta;
+  onClick: () => void;
+};
+const FavoriteTag: React.FC<FavoriteTagProps> = ({
+  pageMeta: { favorite },
+  onClick,
 }) => {
   const { theme } = useTheme();
   const { t } = useTranslation();
@@ -49,7 +53,7 @@ const FavoriteTag = ({
         iconSize={[20, 20]}
         onClick={e => {
           e.stopPropagation();
-          // toggleFavoritePage(id);
+          onClick();
           toast(
             favorite ? t('Removed from Favorites') : t('Added to Favorites')
           );
@@ -142,7 +146,16 @@ export const PageList: React.FC<PageListProps> = ({
                         {pageMeta.title || t('Untitled')}
                       </Content>
                     </StyledTitleLink>
-                    {!isTrash && <FavoriteTag pageMeta={pageMeta} />}
+                    {!isTrash && (
+                      <FavoriteTag
+                        onClick={() => {
+                          helper.setPageMeta(pageMeta.id, {
+                            favorite: !pageMeta.favorite,
+                          });
+                        }}
+                        pageMeta={pageMeta}
+                      />
+                    )}
                   </StyledTitleWrapper>
                 </TableCell>
                 {matches && (
diff --git a/tests/local-first-favorites-items.spec.ts b/tests/local-first-favorites-items.spec.ts
index 24261af98..54cbdc7ad 100644
--- a/tests/local-first-favorites-items.spec.ts
+++ b/tests/local-first-favorites-items.spec.ts
@@ -48,5 +48,12 @@ test.describe('Local first favorite items ui', () => {
     expect(
       page.getByRole('cell', { name: 'this is a new page to favorite' })
     ).not.toBeUndefined();
+
+    await page.getByRole('cell').getByRole('button').nth(0).click();
+    expect(
+      await page
+        .getByText('Click Add to Favorites and the page will appear here.')
+        .isVisible()
+    ).toBe(true);
   });
 });