diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 7b3f07fcfe..83de303300 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -2,21 +2,19 @@ import React from 'react';
 import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/global-modal-provider';
-import { useAppState } from '@/providers/app-state-provider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
 
 export const Footer = (props: { query: string }) => {
-  const { createPage } = useAppState();
   const { triggerQuickSearchModal } = useModal();
-  const { openPage } = usePageHelper();
+  const { openPage, createPage } = usePageHelper();
   const query = props.query;
 
   return (
     <Command.Item
       data-testid="quickSearch-addNewPage"
       onSelect={async () => {
-        const pageId = await createPage?.();
+        const pageId = await createPage();
         if (pageId) {
           openPage(pageId);
         }
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index 1045586547..02f7c093f7 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -67,8 +67,8 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const { createPage, currentWorkspaceId } = useAppState();
-  const { openPage } = usePageHelper();
+  const { currentWorkspaceId } = useAppState();
+  const { openPage, createPage } = usePageHelper();
   const router = useRouter();
 
   const [showTip, setShowTip] = useState(false);
@@ -164,7 +164,7 @@ export const WorkSpaceSliderBar = () => {
           </Link>
           <StyledNewPageButton
             onClick={async () => {
-              const pageId = await createPage?.();
+              const pageId = await createPage();
               if (pageId) {
                 openPage(pageId);
               }
diff --git a/packages/app/src/hooks/use-page-helper.ts b/packages/app/src/hooks/use-page-helper.ts
index 58c2c5497c..ff7556c76c 100644
--- a/packages/app/src/hooks/use-page-helper.ts
+++ b/packages/app/src/hooks/use-page-helper.ts
@@ -1,4 +1,4 @@
-import { Workspace } from '@blocksuite/store';
+import { Workspace, uuidv4 } from '@blocksuite/store';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
 import { PageMeta, useAppState } from '@/providers/app-state-provider';
 import { EditorContainer } from '@blocksuite/editor';
@@ -6,7 +6,10 @@ import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useRouter } from 'next/router';
 
 export type EditorHandlers = {
-  // createPage: (params?: { pageId?: string; title?: string }) => Promise<Page>;
+  createPage: (params?: {
+    pageId?: string;
+    title?: string;
+  }) => Promise<string | null>;
   openPage: (
     pageId: string,
     query?: { [key: string]: string },
@@ -33,6 +36,20 @@ export const usePageHelper = (): EditorHandlers => {
   const { currentWorkspace, editor, currentWorkspaceId } = useAppState();
 
   return {
+    createPage: ({
+      pageId = uuidv4().replaceAll('-', ''),
+      title = '',
+    } = {}) => {
+      return new Promise(resolve => {
+        if (!currentWorkspace) {
+          return resolve(null);
+        }
+        currentWorkspace.createPage(pageId);
+        currentWorkspace.signals.pageAdded.once(addedPageId => {
+          resolve(addedPageId);
+        });
+      });
+    },
     toggleFavoritePage: async pageId => {
       const pageMeta = getPageMeta(currentWorkspace, pageId);
       if (!pageMeta) {
diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
index 6b1dfe1586..b04dfe7b53 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -15,7 +15,7 @@ import exampleMarkdown from '@/templates/Welcome-to-the-AFFiNE-Alpha.md';
 import type { NextPageWithLayout } from '../..//_app';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useRouter } from 'next/router';
-
+import { usePageHelper } from '@/hooks/use-page-helper';
 const StyledEditorContainer = styled('div')(() => {
   return {
     height: 'calc(100vh - 60px)',
@@ -76,7 +76,9 @@ const Page: NextPageWithLayout = () => {
 const PageDefender = ({ children }: PropsWithChildren) => {
   const router = useRouter();
   const [pageLoaded, setPageLoaded] = useState(false);
-  const { currentWorkspace, createPage, loadPage } = useAppState();
+  const { currentWorkspace, loadPage } = useAppState();
+  const { createPage } = usePageHelper();
+
   useEffect(() => {
     const initPage = async () => {
       const pageId = router.query.pageId as string;
@@ -84,7 +86,7 @@ const PageDefender = ({ children }: PropsWithChildren) => {
         p => p.id === pageId
       );
       if (!isPageExist) {
-        await createPage(pageId);
+        await createPage({ pageId });
       }
       await loadPage(pageId);
       setPageLoaded(true);
diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
index b3bf95f8c5..39a1ad121b 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
@@ -3,10 +3,12 @@ import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import { PageLoading } from '@/components/loading';
+import usePageHelper from '@/hooks/use-page-helper';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
-  const { createPage, currentWorkspaceId, currentWorkspace } = useAppState();
+  const { currentWorkspaceId, currentWorkspace } = useAppState();
+  const { createPage } = usePageHelper();
   const { workspaceLoaded } = useEnsureWorkspace();
 
   useEffect(() => {
diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts
index 054472d1a1..5dda7ddbd6 100644
--- a/packages/app/src/providers/app-state-provider/context.ts
+++ b/packages/app/src/providers/app-state-provider/context.ts
@@ -37,7 +37,6 @@ export interface AppStateContext extends AppStateValue {
   setEditor?: MutableRefObject<((page: EditorContainer) => void) | undefined>;
   loadWorkspace: (workspaceId: string) => Promise<StoreWorkspace | null>;
   loadPage: (pageId: string) => Promise<StorePage | null>;
-  createPage: (pageId?: string) => Promise<string | null>;
 }
 
 export const AppState = createContext<AppStateContext>({
@@ -57,7 +56,6 @@ export const AppState = createContext<AppStateContext>({
   setEditor: undefined,
   loadWorkspace: () => Promise.resolve(null),
   loadPage: () => Promise.resolve(null),
-  createPage: () => Promise.resolve(null),
   synced: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   refreshWorkspacesMeta: () => {},
diff --git a/packages/app/src/providers/app-state-provider/hooks.ts b/packages/app/src/providers/app-state-provider/hooks.ts
index 59d1ac318b..6996bd03ef 100644
--- a/packages/app/src/providers/app-state-provider/hooks.ts
+++ b/packages/app/src/providers/app-state-provider/hooks.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAppState } from './context';
-
+import { usePageHelper } from '@/hooks/use-page-helper';
 export const useLoadWorkspace = () => {
   const router = useRouter();
   const { loadWorkspace, currentWorkspace, currentWorkspaceId } = useAppState();
@@ -17,8 +17,8 @@ export const useLoadWorkspace = () => {
 
 export const useLoadPage = () => {
   const router = useRouter();
-  const { loadPage, currentPage, createPage, currentWorkspaceId } =
-    useAppState();
+  const { loadPage, currentPage, currentWorkspaceId } = useAppState();
+  const { createPage } = usePageHelper();
   const workspace = useLoadWorkspace();
 
   const pageId = router.query.pageId as string;
@@ -39,7 +39,7 @@ export const useLoadPage = () => {
       return;
     }
 
-    createPage?.()?.then(async pageId => {
+    createPage().then(async pageId => {
       if (!pageId) {
         return;
       }
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index 386f7becb7..cd67d11365 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/packages/app/src/providers/app-state-provider/provider.tsx
@@ -14,7 +14,6 @@ import type {
 } from './context';
 import { Page, Workspace as StoreWorkspace } from '@blocksuite/store';
 import { EditorContainer } from '@blocksuite/editor';
-import { uuidv4 as uuidv4IdGenerator } from '@blocksuite/store';
 const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
   ssr: false,
 });
@@ -151,25 +150,6 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     setState(state => ({ ...state, editor }));
   };
 
-  const createPage = useRef<AppStateContext['createPage']>(() =>
-    Promise.resolve(null)
-  );
-
-  createPage.current = (
-    pageId: string = uuidv4IdGenerator().replaceAll('-', '')
-  ) =>
-    new Promise<string | null>(resolve => {
-      const { currentWorkspace } = state;
-      if (!currentWorkspace) {
-        resolve(null);
-        return;
-      }
-      currentWorkspace.createPage(pageId);
-      currentWorkspace.signals.pageAdded.once(addedPageId => {
-        resolve(addedPageId);
-      });
-    });
-
   useEffect(() => {
     if (!loadWorkspaceHandler) {
       return;
@@ -211,7 +191,6 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
       setEditor,
       loadWorkspace: loadWorkspace.current,
       loadPage: loadPage.current,
-      createPage: createPage.current,
     }),
     [state, setState, loadPage, loadWorkspace]
   );