diff --git a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
index 4f558b0617..65306fa68d 100644
--- a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -39,12 +39,12 @@ const WorkspaceDetail: React.FC = () => {
     return <PageLoading />;
   }
   if (currentWorkspace.flavour === RemWorkspaceFlavour.AFFINE) {
-    const PageDetail = WorkspacePlugins[currentWorkspace.flavour].PageDetail;
+    const PageDetail = WorkspacePlugins[currentWorkspace.flavour].UI.PageDetail;
     return (
       <PageDetail currentWorkspace={currentWorkspace} currentPageId={pageId} />
     );
   } else if (currentWorkspace.flavour === RemWorkspaceFlavour.LOCAL) {
-    const PageDetail = WorkspacePlugins[currentWorkspace.flavour].PageDetail;
+    const PageDetail = WorkspacePlugins[currentWorkspace.flavour].UI.PageDetail;
     return (
       <PageDetail currentWorkspace={currentWorkspace} currentPageId={pageId} />
     );
diff --git a/apps/web/src/pages/workspace/[workspaceId]/all.tsx b/apps/web/src/pages/workspace/[workspaceId]/all.tsx
index f90e2401f2..1cd28523e4 100644
--- a/apps/web/src/pages/workspace/[workspaceId]/all.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/all.tsx
@@ -47,7 +47,7 @@ const AllPage: NextPageWithLayout = () => {
     return <PageLoading />;
   }
   if (currentWorkspace.flavour === RemWorkspaceFlavour.AFFINE) {
-    const PageList = WorkspacePlugins[currentWorkspace.flavour].PageList;
+    const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList;
     return (
       <>
         <WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle>
@@ -58,7 +58,7 @@ const AllPage: NextPageWithLayout = () => {
       </>
     );
   } else if (currentWorkspace.flavour === RemWorkspaceFlavour.LOCAL) {
-    const PageList = WorkspacePlugins[currentWorkspace.flavour].PageList;
+    const PageList = WorkspacePlugins[currentWorkspace.flavour].UI.PageList;
     return (
       <>
         <WorkspaceTitle icon={<FolderIcon />}>{t('All pages')}</WorkspaceTitle>
diff --git a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
index 15a8b636d4..6bf64ad03d 100644
--- a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
@@ -120,7 +120,8 @@ const SettingPage: NextPageWithLayout = () => {
   } else if (settingPanelValues.indexOf(currentTab as SettingPanel) === -1) {
     return <PageLoading />;
   } else if (currentWorkspace.flavour === RemWorkspaceFlavour.AFFINE) {
-    const Setting = WorkspacePlugins[currentWorkspace.flavour].SettingsDetail;
+    const Setting =
+      WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail;
     return (
       <>
         <Helmet>
@@ -139,7 +140,8 @@ const SettingPage: NextPageWithLayout = () => {
       </>
     );
   } else if (currentWorkspace.flavour === RemWorkspaceFlavour.LOCAL) {
-    const Setting = WorkspacePlugins[currentWorkspace.flavour].SettingsDetail;
+    const Setting =
+      WorkspacePlugins[currentWorkspace.flavour].UI.SettingsDetail;
     return (
       <>
         <WorkspaceTitle icon={<SettingsIcon />}>
diff --git a/apps/web/src/plugins/affine/index.tsx b/apps/web/src/plugins/affine/index.tsx
index fe5254a5a4..edf1960a32 100644
--- a/apps/web/src/plugins/affine/index.tsx
+++ b/apps/web/src/plugins/affine/index.tsx
@@ -178,46 +178,48 @@ export const AffinePlugin: WorkspacePlugin<RemWorkspaceFlavour.AFFINE> = {
       return [...allWorkspaces];
     },
   },
-  PageDetail: ({ currentWorkspace, currentPageId }) => {
-    const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
-    if (!page) {
-      throw new PageNotFoundError(
-        currentWorkspace.blockSuiteWorkspace,
-        currentPageId
+  UI: {
+    PageDetail: ({ currentWorkspace, currentPageId }) => {
+      const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+      if (!page) {
+        throw new PageNotFoundError(
+          currentWorkspace.blockSuiteWorkspace,
+          currentPageId
+        );
+      }
+      return (
+        <>
+          <PageDetailEditor
+            pageId={currentPageId}
+            blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+          />
+        </>
       );
-    }
-    return (
-      <>
-        <PageDetailEditor
-          pageId={currentPageId}
-          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+    },
+    PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
+      return (
+        <BlockSuitePageList
+          onOpenPage={onOpenPage}
+          blockSuiteWorkspace={blockSuiteWorkspace}
         />
-      </>
-    );
-  },
-  PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
-    return (
-      <BlockSuitePageList
-        onOpenPage={onOpenPage}
-        blockSuiteWorkspace={blockSuiteWorkspace}
-      />
-    );
-  },
-  SettingsDetail: ({
-    currentWorkspace,
-    onChangeTab,
-    currentTab,
-    onDeleteWorkspace,
-    onTransformWorkspace,
-  }) => {
-    return (
-      <WorkspaceSettingDetail
-        onDeleteWorkspace={onDeleteWorkspace}
-        onChangeTab={onChangeTab}
-        currentTab={currentTab}
-        workspace={currentWorkspace}
-        onTransferWorkspace={onTransformWorkspace}
-      />
-    );
+      );
+    },
+    SettingsDetail: ({
+      currentWorkspace,
+      onChangeTab,
+      currentTab,
+      onDeleteWorkspace,
+      onTransformWorkspace,
+    }) => {
+      return (
+        <WorkspaceSettingDetail
+          onDeleteWorkspace={onDeleteWorkspace}
+          onChangeTab={onChangeTab}
+          currentTab={currentTab}
+          workspace={currentWorkspace}
+          onTransferWorkspace={onTransformWorkspace}
+        />
+      );
+    },
   },
 };
diff --git a/apps/web/src/plugins/index.tsx b/apps/web/src/plugins/index.tsx
index dc1f409ec3..af8b20cd70 100644
--- a/apps/web/src/plugins/index.tsx
+++ b/apps/web/src/plugins/index.tsx
@@ -51,12 +51,11 @@ export interface WorkspacePlugin<Flavour extends RemWorkspaceFlavour> {
     // update: (workspace: FlavourToWorkspace[Flavour]) => Promise<void>;
     list: () => Promise<FlavourToWorkspace[Flavour][]>;
   };
-
-  //#region UI
-  PageDetail: React.FC<PageDetailProps<Flavour>>;
-  PageList: React.FC<PageListProps<Flavour>>;
-  SettingsDetail: React.FC<SettingProps<Flavour>>;
-  //#endregion
+  UI: {
+    PageDetail: React.FC<PageDetailProps<Flavour>>;
+    PageList: React.FC<PageListProps<Flavour>>;
+    SettingsDetail: React.FC<SettingProps<Flavour>>;
+  };
 }
 
 export const WorkspacePlugins = {
diff --git a/apps/web/src/plugins/local/index.tsx b/apps/web/src/plugins/local/index.tsx
index f11f0ef36a..c75dd36045 100644
--- a/apps/web/src/plugins/local/index.tsx
+++ b/apps/web/src/plugins/local/index.tsx
@@ -104,46 +104,48 @@ export const LocalPlugin: WorkspacePlugin<RemWorkspaceFlavour.LOCAL> = {
       return data;
     },
   },
-  PageDetail: ({ currentWorkspace, currentPageId }) => {
-    const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
-    if (!page) {
-      throw new PageNotFoundError(
-        currentWorkspace.blockSuiteWorkspace,
-        currentPageId
+  UI: {
+    PageDetail: ({ currentWorkspace, currentPageId }) => {
+      const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+      if (!page) {
+        throw new PageNotFoundError(
+          currentWorkspace.blockSuiteWorkspace,
+          currentPageId
+        );
+      }
+      return (
+        <>
+          <PageDetailEditor
+            pageId={currentPageId}
+            blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+          />
+        </>
       );
-    }
-    return (
-      <>
-        <PageDetailEditor
-          pageId={currentPageId}
-          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+    },
+    PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
+      return (
+        <BlockSuitePageList
+          onOpenPage={onOpenPage}
+          blockSuiteWorkspace={blockSuiteWorkspace}
         />
-      </>
-    );
-  },
-  PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
-    return (
-      <BlockSuitePageList
-        onOpenPage={onOpenPage}
-        blockSuiteWorkspace={blockSuiteWorkspace}
-      />
-    );
-  },
-  SettingsDetail: ({
-    currentWorkspace,
-    onChangeTab,
-    currentTab,
-    onDeleteWorkspace,
-    onTransformWorkspace,
-  }) => {
-    return (
-      <WorkspaceSettingDetail
-        onDeleteWorkspace={onDeleteWorkspace}
-        onChangeTab={onChangeTab}
-        currentTab={currentTab}
-        workspace={currentWorkspace}
-        onTransferWorkspace={onTransformWorkspace}
-      />
-    );
+      );
+    },
+    SettingsDetail: ({
+      currentWorkspace,
+      onChangeTab,
+      currentTab,
+      onDeleteWorkspace,
+      onTransformWorkspace,
+    }) => {
+      return (
+        <WorkspaceSettingDetail
+          onDeleteWorkspace={onDeleteWorkspace}
+          onChangeTab={onChangeTab}
+          currentTab={currentTab}
+          workspace={currentWorkspace}
+          onTransferWorkspace={onTransformWorkspace}
+        />
+      );
+    },
   },
 };