diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index 81b5fca67d..9f8a92618f 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -30,8 +30,14 @@ import { SyncIcon } from './sync-icon';
 import { toast } from '@/components/toast';
 
 const PopoverContent = () => {
-  const { getPageMeta, editor, currentPage } = useAppState();
-  const { mode, setMode, toggleFavoritePage, toggleDeletePage } = useEditor();
+  const {
+    getPageMeta,
+    editor,
+    currentPage,
+    toggleFavoritePage,
+    toggleDeletePage,
+  } = useAppState();
+  const { mode, setMode } = useEditor();
   const { confirm } = useConfirm();
 
   const { id, favorite, title } = (currentPage?.id
@@ -47,6 +53,7 @@ const PopoverContent = () => {
       <MenuItem
         onClick={() => {
           toggleFavoritePage(id);
+          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
@@ -125,7 +132,8 @@ const BrowserWarning = ({
 };
 
 const HeaderRight = () => {
-  const { pageList, toggleDeletePage, permanentlyDeletePage } = useEditor();
+  const { pageList, permanentlyDeletePage } = useEditor();
+  const { currentWorkspaceId, toggleDeletePage } = useAppState();
   const { confirm } = useConfirm();
   const router = useRouter();
   const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
@@ -158,7 +166,7 @@ const HeaderRight = () => {
               confirmType: 'danger',
             }).then(confirm => {
               if (confirm) {
-                router.push({ pathname: '/page-list/all' });
+                router.push(`/workspace/${currentWorkspaceId}/all`);
                 permanentlyDeletePage(id);
               }
             });
diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index 08d8987bc3..1d99e13806 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -19,13 +19,16 @@ import React from 'react';
 import DateCell from '@/components/page-list/date-cell';
 import { IconButton } from '@/ui/button';
 import { Tooltip } from '@/ui/tooltip';
-import { router } from 'next/client';
+import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider/context';
+import { toast } from '@/components/toast';
+
 const FavoriteTag = ({
   pageMeta: { favorite, id },
 }: {
   pageMeta: PageMeta;
 }) => {
-  const { toggleFavoritePage } = useEditor();
+  const { toggleFavoritePage } = useAppState();
   return (
     <Tooltip
       content={favorite ? 'Favourited' : 'Favourite'}
@@ -37,6 +40,7 @@ const FavoriteTag = ({
         onClick={e => {
           e.stopPropagation();
           toggleFavoritePage(id);
+          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
         }}
       >
         {favorite ? <FavouritedIcon /> : <FavouritesIcon />}
@@ -54,6 +58,8 @@ export const PageList = ({
   showFavoriteTag?: boolean;
   isTrash?: boolean;
 }) => {
+  const router = useRouter();
+  const { currentWorkspaceId } = useAppState();
   if (pageList.length === 0) {
     return <Empty />;
   }
@@ -77,10 +83,9 @@ export const PageList = ({
               <StyledTableRow
                 key={`${pageMeta.id}-${index}`}
                 onClick={() => {
-                  router.push({
-                    pathname: '/',
-                    query: { pageId: pageMeta.id },
-                  });
+                  router.push(
+                    `/workspace/${currentWorkspaceId}/${pageMeta.id}`
+                  );
                 }}
               >
                 <TableCell>
diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx
index e49f8aa619..17ad955517 100644
--- a/packages/app/src/components/page-list/operation-cell.tsx
+++ b/packages/app/src/components/page-list/operation-cell.tsx
@@ -20,7 +20,7 @@ import { toast } from '@/components/toast';
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
   const goToPage = useGoToPage();
-  const { toggleFavoritePage, toggleDeletePage } = useEditor();
+  const { toggleFavoritePage, toggleDeletePage } = useAppState();
   const { confirm } = useConfirm();
 
   const OperationMenu = (
@@ -28,6 +28,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
       <MenuItem
         onClick={() => {
           toggleFavoritePage(id);
+          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
@@ -73,8 +74,8 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
 export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id } = pageMeta;
   const goToPage = useGoToPage();
-  const { getPageMeta } = useAppState();
-  const { permanentlyDeletePage, toggleDeletePage } = useEditor();
+  const { getPageMeta, toggleDeletePage } = useAppState();
+  const { permanentlyDeletePage } = useEditor();
   const { confirm } = useConfirm();
 
   return (
diff --git a/packages/app/src/components/quick-search/config.ts b/packages/app/src/components/quick-search/config.ts
index 4ff45b3de7..24ce847bc1 100644
--- a/packages/app/src/components/quick-search/config.ts
+++ b/packages/app/src/components/quick-search/config.ts
@@ -1,4 +1,6 @@
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+
+// FIXME: href changed
 export const List = [
   {
     title: 'All pages',
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index f35a4aaefe..7f521556df 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -26,6 +26,7 @@ import { Tooltip } from '@/ui/tooltip';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
 import { useGoToPage } from '@/providers/app-state-provider/hooks';
+import { useAppState } from '@/providers/app-state-provider/context';
 
 import { IconButton } from '@/ui/button';
 import { WorkspaceSelector } from './WorkspaceSelector';
@@ -62,9 +63,9 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   );
 };
 export const WorkSpaceSliderBar = () => {
-  const { triggerQuickSearchModal, triggerImportModal } = useModal();
+  const { triggerQuickSearchModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const { createPage } = useEditor();
+  const { createPage, currentWorkspaceId } = useAppState();
   const goToPage = useGoToPage();
   const router = useRouter();
 
@@ -85,13 +86,21 @@ export const WorkSpaceSliderBar = () => {
         >
           <SearchIcon /> Quick search
         </StyledListItem>
-        <Link href={{ pathname: '/page-list/all' }}>
-          <StyledListItem active={router.pathname === '/page-list/all'}>
+        <Link href={{ pathname: `/workspace/${currentWorkspaceId}/all` }}>
+          <StyledListItem
+            active={router.pathname === `/workspace/${currentWorkspaceId}/all`}
+          >
             <AllPagesIcon /> <span>All pages</span>
           </StyledListItem>
         </Link>
-        <StyledListItem active={router.pathname === '/page-list/favorite'}>
-          <StyledLink href={{ pathname: '/page-list/favorite' }}>
+        <StyledListItem
+          active={
+            router.pathname === `/workspace/${currentWorkspaceId}/favorite`
+          }
+        >
+          <StyledLink
+            href={{ pathname: `/workspace/${currentWorkspaceId}/favorite` }}
+          >
             <FavouritesIcon />
             Favourites
           </StyledLink>
@@ -121,15 +130,22 @@ export const WorkSpaceSliderBar = () => {
           </StyledListItem>
         </Tooltip>
 
-        <Link href={{ pathname: '/page-list/trash' }}>
-          <StyledListItem active={router.pathname === '/page-list/trash'}>
+        <Link href={{ pathname: `/workspace/${currentWorkspaceId}/trash` }}>
+          <StyledListItem
+            active={
+              router.pathname === `/workspace/${currentWorkspaceId}/trash`
+            }
+          >
             <TrashIcon /> Trash
           </StyledListItem>
         </Link>
         <StyledNewPageButton
           onClick={async () => {
-            const page = await createPage();
-            goToPage(page.pageId);
+            const pageId = await createPage();
+            console.log('pageID', pageId);
+            if (pageId) {
+              goToPage(pageId);
+            }
           }}
         >
           <AddIcon /> New Page
diff --git a/packages/app/src/pages/page-list/all.tsx b/packages/app/src/pages/workspace/[workspaceId]/all.tsx
similarity index 56%
rename from packages/app/src/pages/page-list/all.tsx
rename to packages/app/src/pages/workspace/[workspaceId]/all.tsx
index 21c040a687..878e6d4eac 100644
--- a/packages/app/src/pages/page-list/all.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/all.tsx
@@ -1,12 +1,14 @@
-import { useEditor } from '@/providers/editor-provider';
+import { usePageList } from '@/providers/app-state-provider/usePageList';
+import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
 import { PageList } from '@/components/page-list';
 import { AllPagesIcon } from '@blocksuite/icons';
 
 import { PageListHeader } from '@/components/header';
 
-export const All = () => {
-  const { pageList: allPageList } = useEditor();
-  return (
+const All = () => {
+  const workspace = useLoadWorkspace();
+  const allPageList = usePageList(workspace);
+  return workspace ? (
     <>
       <PageListHeader icon={<AllPagesIcon />}>All Page</PageListHeader>
       <PageList
@@ -14,7 +16,7 @@ export const All = () => {
         showFavoriteTag={true}
       />
     </>
-  );
+  ) : null;
 };
 
 export default All;
diff --git a/packages/app/src/pages/page-list/favorite.tsx b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
similarity index 59%
rename from packages/app/src/pages/page-list/favorite.tsx
rename to packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
index c29687e3b8..51b3ea03bc 100644
--- a/packages/app/src/pages/page-list/favorite.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
@@ -1,16 +1,18 @@
+import { usePageList } from '@/providers/app-state-provider/usePageList';
+import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
 import { PageListHeader } from '@/components/header';
-import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
 import { FavouritesIcon } from '@blocksuite/icons';
 
 export const Favorite = () => {
-  const { pageList: allPageList } = useEditor();
-  return (
+  const workspace = useLoadWorkspace();
+  const allPageList = usePageList(workspace);
+  return workspace ? (
     <>
       <PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
       <PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
     </>
-  );
+  ) : null;
 };
 
 export default Favorite;
diff --git a/packages/app/src/pages/page-list/trash.tsx b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
similarity index 57%
rename from packages/app/src/pages/page-list/trash.tsx
rename to packages/app/src/pages/workspace/[workspaceId]/trash.tsx
index be71dc9ecd..54a45a92ba 100644
--- a/packages/app/src/pages/page-list/trash.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
@@ -1,15 +1,17 @@
+import { usePageList } from '@/providers/app-state-provider/usePageList';
+import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
 import { PageListHeader } from '@/components/header';
-import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
 import { TrashIcon } from '@blocksuite/icons';
 export const Trash = () => {
-  const { pageList: allPageList } = useEditor();
-  return (
+  const workspace = useLoadWorkspace();
+  const allPageList = usePageList(workspace);
+  return workspace ? (
     <>
       <PageListHeader icon={<TrashIcon />}>Trash</PageListHeader>
       <PageList pageList={allPageList.filter(p => p.trash)} isTrash={true} />
     </>
-  );
+  ) : null;
 };
 
 export default Trash;
diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts
index 57ff892fcf..c29d3678fb 100644
--- a/packages/app/src/providers/app-state-provider/context.ts
+++ b/packages/app/src/providers/app-state-provider/context.ts
@@ -30,6 +30,8 @@ export interface AppStateContext extends AppStateValue {
   loadPage: (pageId: string) => Promise<StorePage | null> | null;
   createPage: (pageId?: string) => Promise<string | null> | null;
   getPageMeta: (pageId: string) => PageMeta | null;
+  toggleFavoritePage: (pageId: string) => void;
+  toggleDeletePage: (pageId: string) => void;
 }
 
 export const AppState = createContext<AppStateContext>({
@@ -50,6 +52,8 @@ export const AppState = createContext<AppStateContext>({
   loadPage: () => null,
   createPage: () => null,
   getPageMeta: () => null,
+  toggleFavoritePage: () => {},
+  toggleDeletePage: () => {},
 });
 
 export const useAppState = () => {
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index fb1593c49a..de68d1fb9f 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/packages/app/src/providers/app-state-provider/provider.tsx
@@ -124,6 +124,32 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
           null
         );
       },
+      toggleFavoritePage: (pageId: string) => {
+        const { currentWorkspace } = state;
+        if (!currentWorkspace) {
+          return;
+        }
+        const pageMeta = currentWorkspace.meta.pageMetas.find(
+          p => p.id === pageId
+        );
+        if (pageMeta) {
+          currentWorkspace.setPageMeta(pageId, {
+            favorite: !pageMeta.favorite,
+          });
+        }
+      },
+      toggleDeletePage: (pageId: string) => {
+        const { currentWorkspace } = state;
+        const pageMeta = currentWorkspace?.meta.pageMetas.find(
+          p => p.id === pageId
+        );
+        if (pageMeta) {
+          currentWorkspace!.setPageMeta(pageId, {
+            trash: !pageMeta.trash,
+            trashDate: +new Date(),
+          });
+        }
+      },
     }),
     [state, setState, loadWorkspaceHandler, createEditorHandler]
   );
diff --git a/packages/app/src/providers/app-state-provider/usePageList.ts b/packages/app/src/providers/app-state-provider/usePageList.ts
new file mode 100644
index 0000000000..6d2515200f
--- /dev/null
+++ b/packages/app/src/providers/app-state-provider/usePageList.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import type { Workspace } from '@blocksuite/store';
+import type { PageMeta as OriginalPageMeta } from '@blocksuite/store';
+import type { EditorContainer } from '@blocksuite/editor';
+
+export type PageMeta = {
+  favorite: boolean;
+  trash: boolean;
+  trashDate: number | void;
+  updatedDate: number | void;
+  mode: EditorContainer['mode'];
+} & OriginalPageMeta;
+
+export const usePageList = (workspace: Workspace | null) => {
+  const [pageList, setPageList] = useState<PageMeta[]>([]);
+
+  useEffect(() => {
+    if (!workspace) {
+      return;
+    }
+    setPageList(workspace.meta.pageMetas as PageMeta[]);
+    const dispose = workspace.meta.pagesUpdated.on(res => {
+      setPageList(workspace.meta.pageMetas as PageMeta[]);
+    }).dispose;
+    return () => {
+      dispose();
+    };
+  }, [workspace]);
+
+  return pageList;
+};