diff --git a/apps/pyconkr-2025/src/App.tsx b/apps/pyconkr-2025/src/App.tsx
index 81bdf8f..bf17c63 100644
--- a/apps/pyconkr-2025/src/App.tsx
+++ b/apps/pyconkr-2025/src/App.tsx
@@ -2,16 +2,8 @@ import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@fron
 import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { buildNestedSiteMap } from "@frontend/common/utils";
 import { FC, useEffect } from "react";
-import { Route, Routes, useLocation } from "react-router-dom";
+import { Outlet, ScrollRestoration, useLocation } from "react-router-dom";
 import { isEmpty, isNullish } from "remeda";
-
-import MainLayout from "./components/layout/index.tsx";
-import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
-import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
-import { ShopSignInPage } from "./components/pages/sign_in.tsx";
-import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
-import { Test } from "./components/pages/test.tsx";
-import { IS_DEBUG_ENV } from "./consts";
 import { useAppContext } from "./contexts/app_context";
 
 export const App: FC = () => {
@@ -45,15 +37,9 @@ export const App: FC = () => {
   }, [location, language, flatSiteMap, sponsorTiers]);
 
   return (
-    <Routes>
-      <Route element={<MainLayout />}>
-        {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
-        <Route path="/account/sign-in" element={<ShopSignInPage />} />
-        <Route path="/sponsors/:id" element={<SponsorDetailPage />} />
-        <Route path="/presentations/:id" element={<PresentationDetailPage />} />
-        <Route path="/pages/:id" element={<PageIdParamRenderer />} />
-        <Route path="*" element={<RouteRenderer />} />
-      </Route>
-    </Routes>
+    <>
+      <ScrollRestoration />
+      <Outlet />
+    </>
   );
 };
diff --git a/apps/pyconkr-2025/src/main.tsx b/apps/pyconkr-2025/src/main.tsx
index 3a008c4..769a981 100644
--- a/apps/pyconkr-2025/src/main.tsx
+++ b/apps/pyconkr-2025/src/main.tsx
@@ -11,9 +11,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
 import { FC, StrictMode, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 
-import { App } from "./App.tsx";
+import { router } from "./router.tsx";
 import { IS_DEBUG_ENV } from "./consts";
 import { LOCAL_STORAGE_LANGUAGE_KEY } from "./consts/local_stroage.ts";
 import { PyConKRMDXComponents } from "./consts/mdx_components.ts";
@@ -84,23 +84,21 @@ export const MainApp: FC = () => {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
-          <BrowserRouter>
-            <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
-                <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
-                  <ErrorBoundary fallback={ErrorFallback}>
-                    <Suspense fallback={SuspenseFallback}>
-                      <ThemeProvider theme={muiTheme}>
-                        <CssBaseline />
-                        <Global styles={globalStyles} />
-                        <App />
-                      </ThemeProvider>
-                    </Suspense>
-                  </ErrorBoundary>
-                </ShopContextProvider>
-              </CommonContextProvider>
-            </AppContext.Provider>
-          </BrowserRouter>
+          <AppContext.Provider value={{ ...appState, setAppContext }}>
+            <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+              <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
+                <ErrorBoundary fallback={ErrorFallback}>
+                  <Suspense fallback={SuspenseFallback}>
+                    <ThemeProvider theme={muiTheme}>
+                      <CssBaseline />
+                      <Global styles={globalStyles} />
+                      <RouterProvider router={router} />
+                    </ThemeProvider>
+                  </Suspense>
+                </ErrorBoundary>
+              </ShopContextProvider>
+            </CommonContextProvider>
+          </AppContext.Provider>
         </SnackbarProvider>
       </QueryClientProvider>
     </StrictMode>
diff --git a/apps/pyconkr-2025/src/router.tsx b/apps/pyconkr-2025/src/router.tsx
new file mode 100644
index 0000000..3cd7990
--- /dev/null
+++ b/apps/pyconkr-2025/src/router.tsx
@@ -0,0 +1,29 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import { App } from "./App.tsx";
+import MainLayout from "./components/layout/index.tsx";
+import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
+import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
+import { ShopSignInPage } from "./components/pages/sign_in.tsx";
+import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
+import { Test } from "./components/pages/test.tsx";
+import { IS_DEBUG_ENV } from "./consts";
+
+export const router = createBrowserRouter([
+  {
+    element: <App />,
+    children: [
+      {
+        element: <MainLayout />,
+        children: [
+          ...(IS_DEBUG_ENV ? [{ path: "/debug", element: <Test /> }] : []),
+          { path: "/account/sign-in", element: <ShopSignInPage /> },
+          { path: "/sponsors/:id", element: <SponsorDetailPage /> },
+          { path: "/presentations/:id", element: <PresentationDetailPage /> },
+          { path: "/pages/:id", element: <PageIdParamRenderer /> },
+          { path: "*", element: <RouteRenderer /> },
+        ],
+      },
+    ],
+  },
+]);
diff --git a/apps/pyconkr-2026/src/App.tsx b/apps/pyconkr-2026/src/App.tsx
index ad96358..ca0cb5c 100644
--- a/apps/pyconkr-2026/src/App.tsx
+++ b/apps/pyconkr-2026/src/App.tsx
@@ -2,14 +2,9 @@ import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@fron
 import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { buildNestedSiteMap } from "@frontend/common/utils";
 import { FC, useEffect } from "react";
-import { Route, Routes, useLocation } from "react-router-dom";
+import { Outlet, ScrollRestoration, useLocation } from "react-router-dom";
 import { isEmpty, isNullish } from "remeda";
 
-import MainLayout from "./components/layout/index.tsx";
-import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
-import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
-import { ShopSignInPage } from "./components/pages/sign_in.tsx";
-import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
 import { useAppContext } from "./contexts/app_context";
 
 export const App: FC = () => {
@@ -43,14 +38,9 @@ export const App: FC = () => {
   }, [location, language, flatSiteMap, sponsorTiers]);
 
   return (
-    <Routes>
-      <Route element={<MainLayout />}>
-        <Route path="/account/sign-in" element={<ShopSignInPage />} />
-        <Route path="/sponsors/:id" element={<SponsorDetailPage />} />
-        <Route path="/presentations/:id" element={<PresentationDetailPage />} />
-        <Route path="/pages/:id" element={<PageIdParamRenderer />} />
-        <Route path="*" element={<RouteRenderer />} />
-      </Route>
-    </Routes>
+    <>
+      <ScrollRestoration />
+      <Outlet />
+    </>
   );
 };
diff --git a/apps/pyconkr-2026/src/main.tsx b/apps/pyconkr-2026/src/main.tsx
index 1169837..93692a4 100644
--- a/apps/pyconkr-2026/src/main.tsx
+++ b/apps/pyconkr-2026/src/main.tsx
@@ -11,13 +11,13 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
 import { FC, StrictMode, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 
-import { App } from "./App.tsx";
 import { IS_DEBUG_ENV } from "./consts";
 import { LOCAL_STORAGE_LANGUAGE_KEY } from "./consts/local_stroage.ts";
 import { PyConKRMDXComponents } from "./consts/mdx_components.ts";
 import { AppContext, AppContextType } from "./contexts/app_context.tsx";
+import { router } from "./router.tsx";
 import { globalStyles, muiTheme } from "./styles/globalStyles.ts";
 
 const queryClient = new QueryClient({
@@ -84,23 +84,21 @@ export const MainApp: FC = () => {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
-          <BrowserRouter>
-            <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
-                <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
-                  <ErrorBoundary fallback={ErrorFallback}>
-                    <Suspense fallback={SuspenseFallback}>
-                      <ThemeProvider theme={muiTheme}>
-                        <CssBaseline />
-                        <Global styles={globalStyles} />
-                        <App />
-                      </ThemeProvider>
-                    </Suspense>
-                  </ErrorBoundary>
-                </ShopContextProvider>
-              </CommonContextProvider>
-            </AppContext.Provider>
-          </BrowserRouter>
+          <AppContext.Provider value={{ ...appState, setAppContext }}>
+            <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+              <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
+                <ErrorBoundary fallback={ErrorFallback}>
+                  <Suspense fallback={SuspenseFallback}>
+                    <ThemeProvider theme={muiTheme}>
+                      <CssBaseline />
+                      <Global styles={globalStyles} />
+                      <RouterProvider router={router} />
+                    </ThemeProvider>
+                  </Suspense>
+                </ErrorBoundary>
+              </ShopContextProvider>
+            </CommonContextProvider>
+          </AppContext.Provider>
         </SnackbarProvider>
       </QueryClientProvider>
     </StrictMode>
diff --git a/apps/pyconkr-2026/src/router.tsx b/apps/pyconkr-2026/src/router.tsx
new file mode 100644
index 0000000..4fd035a
--- /dev/null
+++ b/apps/pyconkr-2026/src/router.tsx
@@ -0,0 +1,26 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import { App } from "./App.tsx";
+import MainLayout from "./components/layout/index.tsx";
+import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
+import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
+import { ShopSignInPage } from "./components/pages/sign_in.tsx";
+import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
+
+export const router = createBrowserRouter([
+  {
+    element: <App />,
+    children: [
+      {
+        element: <MainLayout />,
+        children: [
+          { path: "/account/sign-in", element: <ShopSignInPage /> },
+          { path: "/sponsors/:id", element: <SponsorDetailPage /> },
+          { path: "/presentations/:id", element: <PresentationDetailPage /> },
+          { path: "/pages/:id", element: <PageIdParamRenderer /> },
+          { path: "*", element: <RouteRenderer /> },
+        ],
+      },
+    ],
+  },
+]);