diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml
index a333a969..fbcdcb7c 100644
--- a/.github/workflows/dev-build.yaml
+++ b/.github/workflows/dev-build.yaml
@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['4582-epub2-static-build'] # put your current branch to create a build. Core team only.
+    branches: ['4686-feat-migrate-react-router-to-use-createbrowserrouter'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 24e4becb..1ae785cc 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,16 +1,9 @@
-import React, { lazy, Suspense } from "react";
-import { Routes, Route } from "react-router-dom";
+import React, { Suspense } from "react";
+import { Outlet } from "react-router-dom";
 import { I18nextProvider } from "react-i18next";
 import { AuthProvider } from "@/AuthContext";
-import PrivateRoute, {
-  AdminRoute,
-  ManagerRoute,
-} from "@/components/PrivateRoute";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import Login from "@/pages/Login";
-import SimpleSSOPassthrough from "@/pages/Login/SSO/simple";
-import OnboardingFlow from "@/pages/OnboardingFlow";
 import i18n from "./i18n";
 
 import { PfpProvider } from "./PfpContext";
@@ -20,83 +13,6 @@ import { ThemeProvider } from "./ThemeContext";
 import { PWAModeProvider } from "./PWAContext";
 import KeyboardShortcutsHelp from "@/components/KeyboardShortcutsHelp";
 
-const Main = lazy(() => import("@/pages/Main"));
-const InvitePage = lazy(() => import("@/pages/Invite"));
-const WorkspaceChat = lazy(() => import("@/pages/WorkspaceChat"));
-const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
-const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
-const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
-const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
-const AdminAgents = lazy(() => import("@/pages/Admin/Agents"));
-const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
-const InterfaceSettings = lazy(
-  () => import("@/pages/GeneralSettings/Settings/Interface")
-);
-const BrandingSettings = lazy(
-  () => import("@/pages/GeneralSettings/Settings/Branding")
-);
-
-const ChatSettings = lazy(
-  () => import("@/pages/GeneralSettings/Settings/Chat")
-);
-
-const GeneralApiKeys = lazy(() => import("@/pages/GeneralSettings/ApiKeys"));
-const GeneralLLMPreference = lazy(
-  () => import("@/pages/GeneralSettings/LLMPreference")
-);
-const GeneralTranscriptionPreference = lazy(
-  () => import("@/pages/GeneralSettings/TranscriptionPreference")
-);
-const GeneralAudioPreference = lazy(
-  () => import("@/pages/GeneralSettings/AudioPreference")
-);
-const GeneralEmbeddingPreference = lazy(
-  () => import("@/pages/GeneralSettings/EmbeddingPreference")
-);
-const EmbeddingTextSplitterPreference = lazy(
-  () => import("@/pages/GeneralSettings/EmbeddingTextSplitterPreference")
-);
-const GeneralVectorDatabase = lazy(
-  () => import("@/pages/GeneralSettings/VectorDatabase")
-);
-const GeneralSecurity = lazy(() => import("@/pages/GeneralSettings/Security"));
-const GeneralBrowserExtension = lazy(
-  () => import("@/pages/GeneralSettings/BrowserExtensionApiKey")
-);
-const WorkspaceSettings = lazy(() => import("@/pages/WorkspaceSettings"));
-
-const ChatEmbedWidgets = lazy(
-  () => import("@/pages/GeneralSettings/ChatEmbedWidgets")
-);
-const PrivacyAndData = lazy(
-  () => import("@/pages/GeneralSettings/PrivacyAndData")
-);
-const ExperimentalFeatures = lazy(
-  () => import("@/pages/Admin/ExperimentalFeatures")
-);
-const LiveDocumentSyncManage = lazy(
-  () => import("@/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage")
-);
-const AgentBuilder = lazy(() => import("@/pages/Admin/AgentBuilder"));
-const CommunityHubTrending = lazy(
-  () => import("@/pages/GeneralSettings/CommunityHub/Trending")
-);
-const CommunityHubAuthentication = lazy(
-  () => import("@/pages/GeneralSettings/CommunityHub/Authentication")
-);
-const CommunityHubImportItem = lazy(
-  () => import("@/pages/GeneralSettings/CommunityHub/ImportItem")
-);
-const SystemPromptVariables = lazy(
-  () => import("@/pages/Admin/SystemPromptVariables")
-);
-const MobileConnections = lazy(
-  () => import("@/pages/GeneralSettings/MobileConnections")
-);
-const DefaultSystemPrompt = lazy(
-  () => import("@/pages/Admin/DefaultSystemPrompt")
-);
-
 export default function App() {
   return (
     <ThemeProvider>
@@ -106,198 +22,7 @@ export default function App() {
             <LogoProvider>
               <PfpProvider>
                 <I18nextProvider i18n={i18n}>
-                  <Routes>
-                    <Route
-                      path="/"
-                      element={<PrivateRoute Component={Main} />}
-                    />
-                    <Route path="/login" element={<Login />} />
-                    <Route
-                      path="/sso/simple"
-                      element={<SimpleSSOPassthrough />}
-                    />
-
-                    <Route
-                      path="/workspace/:slug/settings/:tab"
-                      element={<ManagerRoute Component={WorkspaceSettings} />}
-                    />
-                    <Route
-                      path="/workspace/:slug"
-                      element={<PrivateRoute Component={WorkspaceChat} />}
-                    />
-                    <Route
-                      path="/workspace/:slug/t/:threadSlug"
-                      element={<PrivateRoute Component={WorkspaceChat} />}
-                    />
-                    <Route
-                      path="/accept-invite/:code"
-                      element={<InvitePage />}
-                    />
-
-                    {/* Admin */}
-                    <Route
-                      path="/settings/llm-preference"
-                      element={<AdminRoute Component={GeneralLLMPreference} />}
-                    />
-                    <Route
-                      path="/settings/transcription-preference"
-                      element={
-                        <AdminRoute
-                          Component={GeneralTranscriptionPreference}
-                        />
-                      }
-                    />
-                    <Route
-                      path="/settings/audio-preference"
-                      element={
-                        <AdminRoute Component={GeneralAudioPreference} />
-                      }
-                    />
-                    <Route
-                      path="/settings/embedding-preference"
-                      element={
-                        <AdminRoute Component={GeneralEmbeddingPreference} />
-                      }
-                    />
-                    <Route
-                      path="/settings/text-splitter-preference"
-                      element={
-                        <AdminRoute
-                          Component={EmbeddingTextSplitterPreference}
-                        />
-                      }
-                    />
-                    <Route
-                      path="/settings/vector-database"
-                      element={<AdminRoute Component={GeneralVectorDatabase} />}
-                    />
-                    <Route
-                      path="/settings/agents"
-                      element={<AdminRoute Component={AdminAgents} />}
-                    />
-                    <Route
-                      path="/settings/agents/builder"
-                      element={
-                        <AdminRoute
-                          Component={AgentBuilder}
-                          hideUserMenu={true}
-                        />
-                      }
-                    />
-                    <Route
-                      path="/settings/agents/builder/:flowId"
-                      element={
-                        <AdminRoute
-                          Component={AgentBuilder}
-                          hideUserMenu={true}
-                        />
-                      }
-                    />
-                    <Route
-                      path="/settings/event-logs"
-                      element={<AdminRoute Component={AdminLogs} />}
-                    />
-                    <Route
-                      path="/settings/embed-chat-widgets"
-                      element={<AdminRoute Component={ChatEmbedWidgets} />}
-                    />
-                    {/* Manager */}
-                    <Route
-                      path="/settings/security"
-                      element={<ManagerRoute Component={GeneralSecurity} />}
-                    />
-                    <Route
-                      path="/settings/privacy"
-                      element={<AdminRoute Component={PrivacyAndData} />}
-                    />
-                    <Route
-                      path="/settings/interface"
-                      element={<ManagerRoute Component={InterfaceSettings} />}
-                    />
-                    <Route
-                      path="/settings/branding"
-                      element={<ManagerRoute Component={BrandingSettings} />}
-                    />
-                    <Route
-                      path="/settings/default-system-prompt"
-                      element={<AdminRoute Component={DefaultSystemPrompt} />}
-                    />
-                    <Route
-                      path="/settings/chat"
-                      element={<ManagerRoute Component={ChatSettings} />}
-                    />
-                    <Route
-                      path="/settings/beta-features"
-                      element={<AdminRoute Component={ExperimentalFeatures} />}
-                    />
-                    <Route
-                      path="/settings/api-keys"
-                      element={<AdminRoute Component={GeneralApiKeys} />}
-                    />
-                    <Route
-                      path="/settings/system-prompt-variables"
-                      element={<AdminRoute Component={SystemPromptVariables} />}
-                    />
-                    <Route
-                      path="/settings/browser-extension"
-                      element={
-                        <ManagerRoute Component={GeneralBrowserExtension} />
-                      }
-                    />
-                    <Route
-                      path="/settings/workspace-chats"
-                      element={<ManagerRoute Component={GeneralChats} />}
-                    />
-                    <Route
-                      path="/settings/invites"
-                      element={<ManagerRoute Component={AdminInvites} />}
-                    />
-                    <Route
-                      path="/settings/users"
-                      element={<ManagerRoute Component={AdminUsers} />}
-                    />
-                    <Route
-                      path="/settings/workspaces"
-                      element={<ManagerRoute Component={AdminWorkspaces} />}
-                    />
-                    {/* Onboarding Flow */}
-                    <Route path="/onboarding" element={<OnboardingFlow />} />
-                    <Route
-                      path="/onboarding/:step"
-                      element={<OnboardingFlow />}
-                    />
-
-                    {/* Experimental feature pages  */}
-                    {/* Live Document Sync feature */}
-                    <Route
-                      path="/settings/beta-features/live-document-sync/manage"
-                      element={
-                        <AdminRoute Component={LiveDocumentSyncManage} />
-                      }
-                    />
-
-                    <Route
-                      path="/settings/community-hub/trending"
-                      element={<AdminRoute Component={CommunityHubTrending} />}
-                    />
-                    <Route
-                      path="/settings/community-hub/authentication"
-                      element={
-                        <AdminRoute Component={CommunityHubAuthentication} />
-                      }
-                    />
-                    <Route
-                      path="/settings/community-hub/import-item"
-                      element={
-                        <AdminRoute Component={CommunityHubImportItem} />
-                      }
-                    />
-
-                    <Route
-                      path="/settings/mobile-connections"
-                      element={<ManagerRoute Component={MobileConnections} />}
-                    />
-                  </Routes>
+                  <Outlet />
                   <ToastContainer />
                   <KeyboardShortcutsHelp />
                 </I18nextProvider>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index bb415f3a..58e496cc 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,15 +1,383 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter as Router } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "@/App.jsx";
+import PrivateRoute, {
+  AdminRoute,
+  ManagerRoute,
+} from "@/components/PrivateRoute";
+import Login from "@/pages/Login";
+import SimpleSSOPassthrough from "@/pages/Login/SSO/simple";
+import OnboardingFlow from "@/pages/OnboardingFlow";
 import "@/index.css";
+
 const isDev = process.env.NODE_ENV !== "production";
 const REACTWRAP = isDev ? React.Fragment : React.StrictMode;
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      {
+        path: "/",
+        lazy: async () => {
+          const { default: Main } = await import("@/pages/Main");
+          return { element: <PrivateRoute Component={Main} /> };
+        },
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+      {
+        path: "/sso/simple",
+        element: <SimpleSSOPassthrough />,
+      },
+      {
+        path: "/workspace/:slug/settings/:tab",
+        lazy: async () => {
+          const { default: WorkspaceSettings } = await import(
+            "@/pages/WorkspaceSettings"
+          );
+          return { element: <ManagerRoute Component={WorkspaceSettings} /> };
+        },
+      },
+      {
+        path: "/workspace/:slug",
+        lazy: async () => {
+          const { default: WorkspaceChat } = await import(
+            "@/pages/WorkspaceChat"
+          );
+          return { element: <PrivateRoute Component={WorkspaceChat} /> };
+        },
+      },
+      {
+        path: "/workspace/:slug/t/:threadSlug",
+        lazy: async () => {
+          const { default: WorkspaceChat } = await import(
+            "@/pages/WorkspaceChat"
+          );
+          return { element: <PrivateRoute Component={WorkspaceChat} /> };
+        },
+      },
+      {
+        path: "/accept-invite/:code",
+        lazy: async () => {
+          const { default: InvitePage } = await import("@/pages/Invite");
+          return { element: <InvitePage /> };
+        },
+      },
+      // Admin routes
+      {
+        path: "/settings/llm-preference",
+        lazy: async () => {
+          const { default: GeneralLLMPreference } = await import(
+            "@/pages/GeneralSettings/LLMPreference"
+          );
+          return { element: <AdminRoute Component={GeneralLLMPreference} /> };
+        },
+      },
+      {
+        path: "/settings/transcription-preference",
+        lazy: async () => {
+          const { default: GeneralTranscriptionPreference } = await import(
+            "@/pages/GeneralSettings/TranscriptionPreference"
+          );
+          return {
+            element: <AdminRoute Component={GeneralTranscriptionPreference} />,
+          };
+        },
+      },
+      {
+        path: "/settings/audio-preference",
+        lazy: async () => {
+          const { default: GeneralAudioPreference } = await import(
+            "@/pages/GeneralSettings/AudioPreference"
+          );
+          return {
+            element: <AdminRoute Component={GeneralAudioPreference} />,
+          };
+        },
+      },
+      {
+        path: "/settings/embedding-preference",
+        lazy: async () => {
+          const { default: GeneralEmbeddingPreference } = await import(
+            "@/pages/GeneralSettings/EmbeddingPreference"
+          );
+          return {
+            element: <AdminRoute Component={GeneralEmbeddingPreference} />,
+          };
+        },
+      },
+      {
+        path: "/settings/text-splitter-preference",
+        lazy: async () => {
+          const { default: EmbeddingTextSplitterPreference } = await import(
+            "@/pages/GeneralSettings/EmbeddingTextSplitterPreference"
+          );
+          return {
+            element: <AdminRoute Component={EmbeddingTextSplitterPreference} />,
+          };
+        },
+      },
+      {
+        path: "/settings/vector-database",
+        lazy: async () => {
+          const { default: GeneralVectorDatabase } = await import(
+            "@/pages/GeneralSettings/VectorDatabase"
+          );
+          return {
+            element: <AdminRoute Component={GeneralVectorDatabase} />,
+          };
+        },
+      },
+      {
+        path: "/settings/agents",
+        lazy: async () => {
+          const { default: AdminAgents } = await import("@/pages/Admin/Agents");
+          return { element: <AdminRoute Component={AdminAgents} /> };
+        },
+      },
+      {
+        path: "/settings/agents/builder",
+        lazy: async () => {
+          const { default: AgentBuilder } = await import(
+            "@/pages/Admin/AgentBuilder"
+          );
+          return {
+            element: (
+              <AdminRoute Component={AgentBuilder} hideUserMenu={true} />
+            ),
+          };
+        },
+      },
+      {
+        path: "/settings/agents/builder/:flowId",
+        lazy: async () => {
+          const { default: AgentBuilder } = await import(
+            "@/pages/Admin/AgentBuilder"
+          );
+          return {
+            element: (
+              <AdminRoute Component={AgentBuilder} hideUserMenu={true} />
+            ),
+          };
+        },
+      },
+      {
+        path: "/settings/event-logs",
+        lazy: async () => {
+          const { default: AdminLogs } = await import("@/pages/Admin/Logging");
+          return { element: <AdminRoute Component={AdminLogs} /> };
+        },
+      },
+      {
+        path: "/settings/embed-chat-widgets",
+        lazy: async () => {
+          const { default: ChatEmbedWidgets } = await import(
+            "@/pages/GeneralSettings/ChatEmbedWidgets"
+          );
+          return { element: <AdminRoute Component={ChatEmbedWidgets} /> };
+        },
+      },
+      // Manager routes
+      {
+        path: "/settings/security",
+        lazy: async () => {
+          const { default: GeneralSecurity } = await import(
+            "@/pages/GeneralSettings/Security"
+          );
+          return { element: <ManagerRoute Component={GeneralSecurity} /> };
+        },
+      },
+      {
+        path: "/settings/privacy",
+        lazy: async () => {
+          const { default: PrivacyAndData } = await import(
+            "@/pages/GeneralSettings/PrivacyAndData"
+          );
+          return { element: <AdminRoute Component={PrivacyAndData} /> };
+        },
+      },
+      {
+        path: "/settings/interface",
+        lazy: async () => {
+          const { default: InterfaceSettings } = await import(
+            "@/pages/GeneralSettings/Settings/Interface"
+          );
+          return { element: <ManagerRoute Component={InterfaceSettings} /> };
+        },
+      },
+      {
+        path: "/settings/branding",
+        lazy: async () => {
+          const { default: BrandingSettings } = await import(
+            "@/pages/GeneralSettings/Settings/Branding"
+          );
+          return { element: <ManagerRoute Component={BrandingSettings} /> };
+        },
+      },
+      {
+        path: "/settings/default-system-prompt",
+        lazy: async () => {
+          const { default: DefaultSystemPrompt } = await import(
+            "@/pages/Admin/DefaultSystemPrompt"
+          );
+          return { element: <AdminRoute Component={DefaultSystemPrompt} /> };
+        },
+      },
+      {
+        path: "/settings/chat",
+        lazy: async () => {
+          const { default: ChatSettings } = await import(
+            "@/pages/GeneralSettings/Settings/Chat"
+          );
+          return { element: <ManagerRoute Component={ChatSettings} /> };
+        },
+      },
+      {
+        path: "/settings/beta-features",
+        lazy: async () => {
+          const { default: ExperimentalFeatures } = await import(
+            "@/pages/Admin/ExperimentalFeatures"
+          );
+          return { element: <AdminRoute Component={ExperimentalFeatures} /> };
+        },
+      },
+      {
+        path: "/settings/api-keys",
+        lazy: async () => {
+          const { default: GeneralApiKeys } = await import(
+            "@/pages/GeneralSettings/ApiKeys"
+          );
+          return { element: <AdminRoute Component={GeneralApiKeys} /> };
+        },
+      },
+      {
+        path: "/settings/system-prompt-variables",
+        lazy: async () => {
+          const { default: SystemPromptVariables } = await import(
+            "@/pages/Admin/SystemPromptVariables"
+          );
+          return {
+            element: <AdminRoute Component={SystemPromptVariables} />,
+          };
+        },
+      },
+      {
+        path: "/settings/browser-extension",
+        lazy: async () => {
+          const { default: GeneralBrowserExtension } = await import(
+            "@/pages/GeneralSettings/BrowserExtensionApiKey"
+          );
+          return {
+            element: <ManagerRoute Component={GeneralBrowserExtension} />,
+          };
+        },
+      },
+      {
+        path: "/settings/workspace-chats",
+        lazy: async () => {
+          const { default: GeneralChats } = await import(
+            "@/pages/GeneralSettings/Chats"
+          );
+          return { element: <ManagerRoute Component={GeneralChats} /> };
+        },
+      },
+      {
+        path: "/settings/invites",
+        lazy: async () => {
+          const { default: AdminInvites } = await import(
+            "@/pages/Admin/Invitations"
+          );
+          return { element: <ManagerRoute Component={AdminInvites} /> };
+        },
+      },
+      {
+        path: "/settings/users",
+        lazy: async () => {
+          const { default: AdminUsers } = await import("@/pages/Admin/Users");
+          return { element: <ManagerRoute Component={AdminUsers} /> };
+        },
+      },
+      {
+        path: "/settings/workspaces",
+        lazy: async () => {
+          const { default: AdminWorkspaces } = await import(
+            "@/pages/Admin/Workspaces"
+          );
+          return { element: <ManagerRoute Component={AdminWorkspaces} /> };
+        },
+      },
+      // Onboarding Flow
+      {
+        path: "/onboarding",
+        element: <OnboardingFlow />,
+      },
+      {
+        path: "/onboarding/:step",
+        element: <OnboardingFlow />,
+      },
+      // Experimental feature pages
+      {
+        path: "/settings/beta-features/live-document-sync/manage",
+        lazy: async () => {
+          const { default: LiveDocumentSyncManage } = await import(
+            "@/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage"
+          );
+          return {
+            element: <AdminRoute Component={LiveDocumentSyncManage} />,
+          };
+        },
+      },
+      {
+        path: "/settings/community-hub/trending",
+        lazy: async () => {
+          const { default: CommunityHubTrending } = await import(
+            "@/pages/GeneralSettings/CommunityHub/Trending"
+          );
+          return { element: <AdminRoute Component={CommunityHubTrending} /> };
+        },
+      },
+      {
+        path: "/settings/community-hub/authentication",
+        lazy: async () => {
+          const { default: CommunityHubAuthentication } = await import(
+            "@/pages/GeneralSettings/CommunityHub/Authentication"
+          );
+          return {
+            element: <AdminRoute Component={CommunityHubAuthentication} />,
+          };
+        },
+      },
+      {
+        path: "/settings/community-hub/import-item",
+        lazy: async () => {
+          const { default: CommunityHubImportItem } = await import(
+            "@/pages/GeneralSettings/CommunityHub/ImportItem"
+          );
+          return {
+            element: <AdminRoute Component={CommunityHubImportItem} />,
+          };
+        },
+      },
+      {
+        path: "/settings/mobile-connections",
+        lazy: async () => {
+          const { default: MobileConnections } = await import(
+            "@/pages/GeneralSettings/MobileConnections"
+          );
+          return { element: <ManagerRoute Component={MobileConnections} /> };
+        },
+      },
+    ],
+  },
+]);
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <REACTWRAP>
-    <Router>
-      <App />
-    </Router>
+    <RouterProvider router={router} />
   </REACTWRAP>
 );