diff --git a/web/src/App.tsx b/web/src/App.tsx
index 06273634..995c9106 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -8,6 +8,7 @@ import { Helmet } from 'react-helmet';
 import { useRecordMeasure } from './utils/measure-helper';
 import { getPopupContainer, preventDefault } from './utils/dom-helper';
 import { LoadingSpinner } from './components/LoadingSpinner';
+import { pluginRootRouter } from './plugin/common';
 
 const MainRoute = Loadable(() => import('./routes/Main'));
 
@@ -76,6 +77,9 @@ export const App: React.FC = React.memo(() => {
           <Route path="/main" component={MainRoute} />
           <Route path="/panel" component={PanelRoute} />
           <Route path="/invite/:inviteCode" component={InviteRoute} />
+          {pluginRootRouter.map((r) => (
+            <Route key={r.name} path={r.path} component={r.component} />
+          ))}
           <Redirect to="/entry" />
         </Switch>
       </AppContainer>
diff --git a/web/src/hooks/useSearchParam.ts b/web/src/hooks/useSearchParam.ts
index 6328a7a9..b376721f 100644
--- a/web/src/hooks/useSearchParam.ts
+++ b/web/src/hooks/useSearchParam.ts
@@ -1,19 +1,16 @@
+import { getSearchParam } from '@/utils/location-helper';
 import { useEffect, useState } from 'react';
 
-const getValue = (search: string, param: string) =>
-  new URLSearchParams(search).get(param);
-
 export type UseQueryParam = (param: string) => string | null;
 
 export const useSearchParam: UseQueryParam = (param) => {
-  const location = window.location;
   const [value, setValue] = useState<string | null>(() =>
-    getValue(location.search, param)
+    getSearchParam(param)
   );
 
   useEffect(() => {
     const onChange = () => {
-      setValue(getValue(location.search, param));
+      setValue(getSearchParam(param));
     };
 
     window.addEventListener('popstate', onChange);
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index 4166e646..a0954e2f 100644
--- a/web/src/plugin/common/reg.ts
+++ b/web/src/plugin/common/reg.ts
@@ -144,3 +144,12 @@ export const [pluginMessageExtraParsers, regMessageExtraParser] = buildRegList<{
   name: string;
   render: (payload: ChatMessage) => React.ReactNode;
 }>();
+
+/**
+ * 注册根路由
+ */
+export const [pluginRootRouter, regRootRouter] = buildRegList<{
+  name: string;
+  path: string;
+  component: React.ComponentType;
+}>();
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index 9107dc8e..e317f750 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -1,5 +1,5 @@
 #tailchat-app {
-  @apply text-typography-light;
+  @apply text-typography-light bg-content-light;
 
   --tc-background-image: url(../../assets/images/bg.jpg);
   --tc-content-background-image: '';
@@ -50,7 +50,7 @@
 
   // 深色模式覆盖
   &.dark {
-    @apply text-typography-dark;
+    @apply text-typography-dark bg-content-dark;
 
     ::-webkit-scrollbar-corner {
       background-color: transparent;
diff --git a/web/src/utils/location-helper.ts b/web/src/utils/location-helper.ts
new file mode 100644
index 00000000..dd5aa5dc
--- /dev/null
+++ b/web/src/utils/location-helper.ts
@@ -0,0 +1,6 @@
+/**
+ * 获取当前页面的search参数
+ */
+export function getSearchParam(param: string): string | null {
+  return new URLSearchParams(window.location.search).get(param);
+}