diff --git a/src/App.jsx b/src/App.jsx
index 65aebc60..2661392d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,58 +1,15 @@
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { useLocation, Outlet } from "react-router-dom";
 import { useLayoutEffect } from "react";
-import Editor from "./pages/Editor";
-import Survey from "./pages/Survey";
-import BugReport from "./pages/BugReport";
-import Shortcuts from "./pages/Shortcuts";
-import Templates from "./pages/Templates";
-import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
 import { useSettings } from "./hooks";
-import NotFound from "./pages/NotFound";
 
 export default function App() {
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
-        <RestoreScroll />
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route
-            path="/editor"
-            element={
-              <ThemedPage>
-                <Editor />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/survey"
-            element={
-              <ThemedPage>
-                <Survey />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/shortcuts"
-            element={
-              <ThemedPage>
-                <Shortcuts />
-              </ThemedPage>
-            }
-          />
-          <Route
-            path="/bug-report"
-            element={
-              <ThemedPage>
-                <BugReport />
-              </ThemedPage>
-            }
-          />
-          <Route path="/templates" element={<Templates />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
+      <RestoreScroll />
+      <ThemedPage>
+        <Outlet />
+      </ThemedPage>
     </SettingsContextProvider>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index 1e8888d9..99be27d4 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,15 +1,15 @@
 import ReactDOM from "react-dom/client";
 import { LocaleProvider } from "@douyinfe/semi-ui";
 import { Analytics } from "@vercel/analytics/react";
-import App from "./App.jsx";
 import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
 import "./index.css";
 import "./i18n/i18n.js";
-
+import { RouterProvider } from "react-router-dom";
+import router from "./routes";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <LocaleProvider locale={en_US}>
-    <App />
+    <RouterProvider router={router} />
     <Analytics />
   </LocaleProvider>,
 );
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
new file mode 100644
index 00000000..25a02418
--- /dev/null
+++ b/src/routes/index.jsx
@@ -0,0 +1,29 @@
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+} from "react-router-dom";
+import LandingPage from "../pages/LandingPage";
+import Editor from "../pages/Editor";
+import Survey from "../pages/Survey";
+import Shortcuts from "../pages/Shortcuts";
+import BugReport from "../pages/BugReport";
+import Templates from "../pages/Templates";
+import NotFound from "../pages/NotFound";
+import App from "../App";
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<App />}>
+      <Route path="/" index={true} element={<LandingPage />} />
+      <Route path="/editor" element={<Editor />} />
+      <Route path="/survey" element={<Survey />} />
+      <Route path="/shortcuts" element={<Shortcuts />} />
+      <Route path="/bug-report" element={<BugReport />} />
+      <Route path="/templates" element={<Templates />} />
+      <Route path="*" element={<NotFound />} />
+    </Route>
+  )
+);
+
+export default router;
\ No newline at end of file