diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index da9c073858..53575a23f8 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -44,7 +44,11 @@ const FavoriteTag = ({
           toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
         }}
       >
-        {favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+        {favorite ? (
+          <FavouritedIcon data-testid="favourited-icon" />
+        ) : (
+          <FavouritesIcon />
+        )}
       </IconButton>
     </Tooltip>
   );
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index 2d11c87fc9..35cfc62e27 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -43,6 +43,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
         const active = router.query.pageId === pageMeta.id;
         return (
           <StyledSubListItem
+            data-testid={`favorite-list-item-${pageMeta.id}`}
             active={active}
             key={`${pageMeta}-${index}`}
             onClick={() => {
diff --git a/tests/local-first-favorite-page.spec.ts b/tests/local-first-favorite-page.spec.ts
index 17732f7626..2441c669b3 100644
--- a/tests/local-first-favorite-page.spec.ts
+++ b/tests/local-first-favorite-page.spec.ts
@@ -4,7 +4,7 @@ import { loadPage } from './libs/load-page';
 loadPage();
 
 test.describe('Local first favorite page', () => {
-  test('New a page ,then open it and show favorite', async ({ page }) => {
+  test('New a page and open it ,then favorite ot', async ({ page }) => {
     await page.getByText('New Page').click();
     await page.getByPlaceholder('Title').click();
     await page.getByPlaceholder('Title').fill('this is a new page to favorite');
@@ -29,4 +29,116 @@ test.describe('Local first favorite page', () => {
 
     await favoriteBtn.click();
   });
+
+  test('Show favorite items in sidebar', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+    const newPageId = page.url().split('/').reverse()[0];
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const cell = await page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+
+    await favoriteBtn.click();
+
+    const favoriteListItemInSidebar = await page.getByTestId(
+      'favorite-list-item-' + newPageId
+    );
+
+    expect(await favoriteListItemInSidebar.textContent()).toBe(
+      'this is a new page to favorite'
+    );
+  });
+
+  test('Show favorite items in favorite list', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const cell = await page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+
+    await favoriteBtn.click();
+
+    await page.getByRole('link', { name: 'Favourites' }).click();
+
+    expect(
+      await page.getByRole('cell', { name: 'this is a new page to favorite' })
+    ).not.toBeUndefined();
+  });
+
+  test('Cancel favorite', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const cell = await page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+
+    await favoriteBtn.click();
+
+    // expect it in favorite list
+    await page.getByRole('link', { name: 'Favourites' }).click();
+    expect(
+      await page.getByRole('cell', { name: 'this is a new page to favorite' })
+    ).not.toBeUndefined();
+
+    // cancel favorite
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    await page.getByTestId('favourited-icon').click();
+
+    //expect it not in favorite list
+    await page.getByRole('link', { name: 'Favourites' }).click();
+    expect(
+      await page.getByText(
+        'Tips: Click Add to Favourites/Trash and the page will appear here.'
+      )
+    ).not.toBeUndefined();
+  });
 });