diff --git a/apps/backoffice/src/app/(public)/layout.tsx b/apps/backoffice/src/app/(public)/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/backoffice/src/app/(public)/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/backoffice/src/app/404.tsx b/apps/backoffice/src/app/404.tsx
deleted file mode 100644
index 5eda28b..0000000
--- a/apps/backoffice/src/app/404.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/hackathon-dashboard"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/backoffice/src/app/error.tsx b/apps/backoffice/src/app/error.tsx
deleted file mode 100644
index 3859b00..0000000
--- a/apps/backoffice/src/app/error.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/backoffice/src/main.tsx b/apps/backoffice/src/main.tsx
index 4f9c907..cf947ab 100644
--- a/apps/backoffice/src/main.tsx
+++ b/apps/backoffice/src/main.tsx
@@ -1,42 +1,28 @@
-import { createRoot } from 'react-dom/client';
-import { middleware } from './middleware';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
-import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
-  QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryProvider } from '@imphnen-frontend-service/utils'
+import { Toaster } from 'sonner'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+const router = createRouter({ routeTree })
 
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
-const router = createBrowserRouter([
-  {
-    ...routes,
-    loader: middleware,
-    shouldRevalidate: () => true,
-  },
-]);
+const rootElement = document.getElementById('root')
 
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster position="top-right" />
       <RouterProvider router={router} />
+      <Toaster position="top-right" />
     </QueryProvider>
   </StrictMode>
-);
+)
diff --git a/apps/backoffice/src/middleware.ts b/apps/backoffice/src/middleware.ts
deleted file mode 100644
index bac524f..0000000
--- a/apps/backoffice/src/middleware.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  PERMISSIONS,
-  SessionToken,
-  SessionUser,
-} from '@imphnen-frontend-service/service';
-import { LoaderFunctionArgs, redirect } from 'react-router';
-
-const mappingPublicRoutes = [
-  '/auth/login',
-  '/auth/forgot',
-  '/auth/new-password',
-];
-
-const mappingRoutePermissions = [
-  {
-    path: '/dashboard',
-    permissions: [],
-  },
-  {
-    path: '/users',
-    permissions: [PERMISSIONS.USERS.READ_LIST],
-  },
-  {
-    path: '/users/create',
-    permissions: [PERMISSIONS.USERS.CREATE],
-  },
-  {
-    path: '/users/update',
-    permissions: [PERMISSIONS.USERS.UPDATE],
-  },
-  {
-    path: '/users/detail',
-    permissions: [PERMISSIONS.USERS.READ_DETAIL],
-  },
-  {
-    path: '/roles',
-    permissions: [PERMISSIONS.ROLES.READ_LIST],
-  },
-  {
-    path: '/roles/create',
-    permissions: [PERMISSIONS.ROLES.CREATE],
-  },
-  {
-    path: '/roles/update',
-    permissions: [PERMISSIONS.ROLES.UPDATE],
-  },
-  {
-    path: '/roles/detail',
-    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
-  },
-  {
-    path: '/permissions',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
-  },
-  {
-    path: '/permissions/create',
-    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
-  },
-  {
-    path: '/permissions/update',
-    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
-  },
-  {
-    path: '/permissions/detail',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
-  },
-];
-
-export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-  const session = SessionUser.get();
-  const session_token = SessionToken.get();
-  const token = session_token?.token?.access_token;
-  const userPermissions =
-    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  if (mappingPublicRoutes.includes(pathname)) {
-    if (token) return redirect('/hackathon-dashboard');
-    return null;
-  }
-
-  if (!session) return redirect('/auth/login');
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return '/hackathon-dashboard';
-    }
-  }
-
-  return null;
-};
diff --git a/apps/backoffice/src/routeTree.gen.ts b/apps/backoffice/src/routeTree.gen.ts
new file mode 100644
index 0000000..786525b
--- /dev/null
+++ b/apps/backoffice/src/routeTree.gen.ts
@@ -0,0 +1,2 @@
+// This file is auto-generated by TanStack Router
+export const routeTree = {} as any
diff --git a/apps/backoffice/src/routes/__root.tsx b/apps/backoffice/src/routes/__root.tsx
new file mode 100644
index 0000000..f463b79
--- /dev/null
+++ b/apps/backoffice/src/routes/__root.tsx
@@ -0,0 +1,5 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})
diff --git a/apps/backoffice/src/app/(protected)/layout.tsx b/apps/backoffice/src/routes/_authenticated.tsx
similarity index 76%
rename from apps/backoffice/src/app/(protected)/layout.tsx
rename to apps/backoffice/src/routes/_authenticated.tsx
index 810b1d9..0c23d34 100644
--- a/apps/backoffice/src/app/(protected)/layout.tsx
+++ b/apps/backoffice/src/routes/_authenticated.tsx
@@ -1,9 +1,20 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+import { useState } from 'react'
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms'
 
-export const AppLayout: FC = (): ReactElement => {
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (!session?.token?.access_token) {
+      throw redirect({ to: '/auth/login' })
+    }
+  },
+  component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
@@ -13,14 +24,12 @@ export const AppLayout: FC = (): ReactElement => {
           onClose={() => setMobileSidebarOpen(false)}
         />
         <div className="flex-1 overflow-auto">
-
           <header
             className={
               'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
               (mobileSidebarOpen ? 'z-0' : 'z-30')
             }
           >
-
             <button
               type="button"
               className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700 cursor-pointer"
@@ -50,7 +59,5 @@ export const AppLayout: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default AppLayout;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/accounts/_components/modal-edit-account.tsx b/apps/backoffice/src/routes/_authenticated/_components/accounts/modal-edit-account.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/accounts/_components/modal-edit-account.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/accounts/modal-edit-account.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-events/_components/modal-add-event.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-add-event.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-events/_components/modal-add-event.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-add-event.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-events/_components/modal-delete-event.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-delete-event.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-events/_components/modal-delete-event.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-delete-event.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-events/_components/modal-update-event.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-update-event.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-events/_components/modal-update-event.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-events/modal-update-event.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-add-testimonial.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-add-testimonial.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-add-testimonial.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-add-testimonial.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-delete-testimonial.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-delete-testimonial.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-delete-testimonial.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-delete-testimonial.tsx
diff --git a/apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-update-testimonial.tsx b/apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-update-testimonial.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-testimonials/_components/modal-update-testimonial.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/cms-testimonials/modal-update-testimonial.tsx
diff --git a/apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/session-status.tsx b/apps/backoffice/src/routes/_authenticated/_components/dashboard-dimentorin/chart/session-status.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/session-status.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/dashboard-dimentorin/chart/session-status.tsx
diff --git a/apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/user-growth.tsx b/apps/backoffice/src/routes/_authenticated/_components/dashboard-dimentorin/chart/user-growth.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard-dimentorin/_components/chart/user-growth.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/dashboard-dimentorin/chart/user-growth.tsx
diff --git a/apps/backoffice/src/app/(protected)/dashboard/_components/modal-add-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-add-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard/_components/modal-add-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-add-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/dashboard/_components/modal-delete-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-delete-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard/_components/modal-delete-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-delete-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/dashboard/_components/modal-edit-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-edit-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard/_components/modal-edit-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/dashboard/modal-edit-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-add-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-add-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-add-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-add-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-delete-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-delete-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-delete-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-delete-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-update-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-update-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/gacha-roll/_components/modal-update-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/gacha-roll/modal-update-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx b/apps/backoffice/src/routes/_authenticated/_components/hackathon-submissions/submission-modal.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/hackathon-submissions/submission-modal.tsx
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx b/apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/modal-team-detail-new.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/modal-team-detail-new.tsx
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/team-banner-placeholder.tsx b/apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/team-banner-placeholder.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/hackathon-teams/_components/team-banner-placeholder.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/hackathon-teams/team-banner-placeholder.tsx
diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx b/apps/backoffice/src/routes/_authenticated/_components/hackathon-users/modal-user-detail.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/hackathon-users/modal-user-detail.tsx
diff --git a/apps/backoffice/src/app/(protected)/permissions/_components/modal-add-permission.tsx b/apps/backoffice/src/routes/_authenticated/_components/permissions/modal-add-permission.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/permissions/_components/modal-add-permission.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/permissions/modal-add-permission.tsx
diff --git a/apps/backoffice/src/app/(protected)/permissions/_components/modal-delete-permission.tsx b/apps/backoffice/src/routes/_authenticated/_components/permissions/modal-delete-permission.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/permissions/_components/modal-delete-permission.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/permissions/modal-delete-permission.tsx
diff --git a/apps/backoffice/src/app/(protected)/permissions/_components/modal-update-permission.tsx b/apps/backoffice/src/routes/_authenticated/_components/permissions/modal-update-permission.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/permissions/_components/modal-update-permission.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/permissions/modal-update-permission.tsx
diff --git a/apps/backoffice/src/app/(protected)/prizes/_components/modal-process-item.tsx b/apps/backoffice/src/routes/_authenticated/_components/prizes/modal-process-item.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/prizes/_components/modal-process-item.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/prizes/modal-process-item.tsx
diff --git a/apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx b/apps/backoffice/src/routes/_authenticated/_components/roadmap-dimentorin/modal/create-roadmap/index.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/roadmap-dimentorin/modal/create-roadmap/index.tsx
diff --git a/apps/backoffice/src/app/(protected)/roles/_components/modal-add-role.tsx b/apps/backoffice/src/routes/_authenticated/_components/roles/modal-add-role.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/roles/_components/modal-add-role.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/roles/modal-add-role.tsx
diff --git a/apps/backoffice/src/app/(protected)/roles/_components/modal-delete-role.tsx b/apps/backoffice/src/routes/_authenticated/_components/roles/modal-delete-role.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/roles/_components/modal-delete-role.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/roles/modal-delete-role.tsx
diff --git a/apps/backoffice/src/app/(protected)/roles/_components/modal-update-role.tsx b/apps/backoffice/src/routes/_authenticated/_components/roles/modal-update-role.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/roles/_components/modal-update-role.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/roles/modal-update-role.tsx
diff --git a/apps/backoffice/src/app/(protected)/session-dimentorin/_components/modal/detail/index.tsx b/apps/backoffice/src/routes/_authenticated/_components/session-dimentorin/modal/detail/index.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/session-dimentorin/_components/modal/detail/index.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/session-dimentorin/modal/detail/index.tsx
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/_components/general.tsx b/apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/general.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/_components/general.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/general.tsx
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/_components/notification.tsx b/apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/notification.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/_components/notification.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/notification.tsx
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/_components/payment.tsx b/apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/payment.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/_components/payment.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/payment.tsx
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/_components/security.tsx b/apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/security.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/_components/security.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/security.tsx
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/_components/user-roles-permission.tsx b/apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/user-roles-permission.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/_components/user-roles-permission.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/settings-dimentorin/user-roles-permission.tsx
diff --git a/apps/backoffice/src/app/(protected)/transactions/_components/modal-validate.tsx b/apps/backoffice/src/routes/_authenticated/_components/transactions/modal-validate.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/transactions/_components/modal-validate.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/transactions/modal-validate.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/delete/index.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/delete/index.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/delete/index.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/delete/index.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/account-profile.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/account-profile.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/account-profile.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/account-profile.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/activity-log.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/activity-log.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/activity-log.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/activity-log.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/detail-profile.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/detail-profile.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/detail-profile.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/detail-profile.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/index.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/index.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/index.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/index.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/type.d.ts b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/type.d.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/detail/type.d.ts
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/detail/type.d.ts
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/suspend-or-ban/index.tsx b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/suspend-or-ban/index.tsx
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/suspend-or-ban/index.tsx
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/suspend-or-ban/index.tsx
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/type.d.ts b/apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/type.d.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/_components/modal/type.d.ts
rename to apps/backoffice/src/routes/_authenticated/_components/users-dimentorin/modal/type.d.ts
diff --git a/apps/backoffice/src/app/(protected)/cms-events/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/cms-events/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-events/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/cms-events/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/cms-testimonials/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/cms-testimonials/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/cms-testimonials/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/cms-testimonials/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/dashboard/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/dashboard/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/dashboard/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/dashboard/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/gacha-roll/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/gacha-roll/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/gacha-roll/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/gacha-roll/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/permissions/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/permissions/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/permissions/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/permissions/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/roles/_hook/use-item.ts b/apps/backoffice/src/routes/_authenticated/_hooks/roles/use-item.ts
similarity index 100%
rename from apps/backoffice/src/app/(protected)/roles/_hook/use-item.ts
rename to apps/backoffice/src/routes/_authenticated/_hooks/roles/use-item.ts
diff --git a/apps/backoffice/src/app/(protected)/accounts/page.tsx b/apps/backoffice/src/routes/_authenticated/accounts.tsx
similarity index 83%
rename from apps/backoffice/src/app/(protected)/accounts/page.tsx
rename to apps/backoffice/src/routes/_authenticated/accounts.tsx
index 888d148..9ceba49 100644
--- a/apps/backoffice/src/app/(protected)/accounts/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/accounts.tsx
@@ -1,14 +1,13 @@
-import * as React from 'react';
-
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   FilterOutlined,
   SearchOutlined,
   EditOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
-
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -16,20 +15,24 @@ import {
   PaginationState,
   useReactTable,
   RowSelectionState,
-} from '@tanstack/react-table';
-import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalEditAccount from './_components/accounts/modal-edit-account'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useUserList,
   useUpdateUserById,
   TUsersListItem,
-} from '@imphnen-frontend-service/service';
+} from '@imphnen-frontend-service/service'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalEditAccount, setShowModalEditAccount] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<TUsersListItem | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/accounts')({
+  component: AccountsPage,
+})
+
+function AccountsPage() {
+  const [showModalEditAccount, setShowModalEditAccount] = useState(false)
+  const [selectedUser, setSelectedUser] = useState<TUsersListItem | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -40,31 +43,31 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [showFilter, setShowFilter] = useState(false);
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const [showFilter, setShowFilter] = useState(false)
 
   const { data: usersData, isLoading } = useUserList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const updateUser = useUpdateUserById();
+  })
+  const updateUser = useUpdateUserById()
 
-  const users: TUsersListItem[] = usersData?.data ?? [];
-  const totalItems = usersData?.meta?.total ?? users.length;
+  const users: TUsersListItem[] = usersData?.data ?? []
+  const totalItems = usersData?.meta?.total ?? users.length
 
   const handleEditAccount = async () => {
     if (selectedUser && pendingFormData.current) {
-      await updateUser.mutateAsync({ id: selectedUser.id, data: pendingFormData.current });
+      await updateUser.mutateAsync({ id: selectedUser.id, data: pendingFormData.current })
     }
-  };
+  }
 
   const columns: ColumnDef<TUsersListItem>[] = [
     {
@@ -118,9 +121,9 @@ export const Components: FC = (): ReactElement => {
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setSelectedUser(row.original);
-            setShowModalEditAccount(true);
+            e.stopPropagation()
+            setSelectedUser(row.original)
+            setShowModalEditAccount(true)
           }}
           className="flex items-center gap-2"
         >
@@ -128,7 +131,7 @@ export const Components: FC = (): ReactElement => {
         </Button>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: users,
@@ -144,7 +147,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -200,10 +203,8 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         initialValues={selectedUser ? { fullname: selectedUser.fullname, email: selectedUser.email } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/cms-events/page.tsx b/apps/backoffice/src/routes/_authenticated/cms-events.tsx
similarity index 82%
rename from apps/backoffice/src/app/(protected)/cms-events/page.tsx
rename to apps/backoffice/src/routes/_authenticated/cms-events.tsx
index 0e778f3..6f30977 100644
--- a/apps/backoffice/src/app/(protected)/cms-events/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/cms-events.tsx
@@ -1,12 +1,13 @@
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   SearchOutlined,
   EditOutlined,
   DeleteOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -14,27 +15,31 @@ import {
   PaginationState,
   RowSelectionState,
   useReactTable,
-} from '@tanstack/react-table';
-import ModalAddEvent from './_components/modal-add-event';
-import ModalUpdateEvent from './_components/modal-update-event';
-import ModalDeleteEvent from './_components/modal-delete-event';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalAddEvent from './_components/cms-events/modal-add-event'
+import ModalUpdateEvent from './_components/cms-events/modal-update-event'
+import ModalDeleteEvent from './_components/cms-events/modal-delete-event'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useEventList,
   useCreateEvent,
   useUpdateEvent,
   useDeleteEvent,
   TEventsListItem,
-} from '@imphnen-frontend-service/service';
-import React from 'react';
+} from '@imphnen-frontend-service/service'
+import React from 'react'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedEvent, setSelectedEvent] = useState<TEventsListItem | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/cms-events')({
+  component: CmsEventsPage,
+})
+
+function CmsEventsPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedEvent, setSelectedEvent] = useState<TEventsListItem | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -45,47 +50,47 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   const { data: eventsData, isLoading } = useEventList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const createEvent = useCreateEvent();
-  const updateEvent = useUpdateEvent();
-  const deleteEvent = useDeleteEvent();
+  })
+  const createEvent = useCreateEvent()
+  const updateEvent = useUpdateEvent()
+  const deleteEvent = useDeleteEvent()
 
-  const events: TEventsListItem[] = eventsData?.data ?? [];
-  const totalItems = eventsData?.meta?.total ?? events.length;
+  const events: TEventsListItem[] = eventsData?.data ?? []
+  const totalItems = eventsData?.meta?.total ?? events.length
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      await createEvent.mutateAsync(pendingFormData.current);
+      await createEvent.mutateAsync(pendingFormData.current)
     }
-    return true;
-  };
+    return true
+  }
 
   const handleUpdate = async (): Promise<boolean> => {
     if (selectedEvent && pendingFormData.current) {
-      await updateEvent.mutateAsync({ id: selectedEvent.id, data: pendingFormData.current });
+      await updateEvent.mutateAsync({ id: selectedEvent.id, data: pendingFormData.current })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async (): Promise<boolean> => {
     if (selectedEvent) {
-      await deleteEvent.mutateAsync(selectedEvent.id);
+      await deleteEvent.mutateAsync(selectedEvent.id)
     }
-    return true;
-  };
+    return true
+  }
 
   const columns: ColumnDef<TEventsListItem>[] = [
     {
@@ -157,9 +162,9 @@ export const Components: FC = (): ReactElement => {
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedEvent(row.original);
-              setShowModalUpdateItem(true);
+              e.stopPropagation()
+              setSelectedEvent(row.original)
+              setShowModalUpdateItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -169,9 +174,9 @@ export const Components: FC = (): ReactElement => {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedEvent(row.original);
-              setShowModalDeleteItem(true);
+              e.stopPropagation()
+              setSelectedEvent(row.original)
+              setShowModalDeleteItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -180,7 +185,7 @@ export const Components: FC = (): ReactElement => {
         </div>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: events,
@@ -196,7 +201,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -252,7 +257,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAdd={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalUpdateEvent
         isOpen={showModalUpdateItem}
@@ -271,7 +276,7 @@ export const Components: FC = (): ReactElement => {
           end_date: selectedEvent.end_date,
           is_online: selectedEvent.is_online,
         } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalDeleteEvent
         isOpen={showModalDeleteItem}
@@ -282,7 +287,5 @@ export const Components: FC = (): ReactElement => {
         handleDelete={handleDelete}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/cms-testimonials/page.tsx b/apps/backoffice/src/routes/_authenticated/cms-testimonials.tsx
similarity index 81%
rename from apps/backoffice/src/app/(protected)/cms-testimonials/page.tsx
rename to apps/backoffice/src/routes/_authenticated/cms-testimonials.tsx
index 4523f94..7122624 100644
--- a/apps/backoffice/src/app/(protected)/cms-testimonials/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/cms-testimonials.tsx
@@ -1,12 +1,13 @@
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   SearchOutlined,
   EditOutlined,
   DeleteOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -14,27 +15,31 @@ import {
   PaginationState,
   RowSelectionState,
   useReactTable,
-} from '@tanstack/react-table';
-import ModalAddTestimonial from './_components/modal-add-testimonial';
-import ModalUpdateTestimonial from './_components/modal-update-testimonial';
-import ModalDeleteTestimonial from './_components/modal-delete-testimonial';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalAddTestimonial from './_components/cms-testimonials/modal-add-testimonial'
+import ModalUpdateTestimonial from './_components/cms-testimonials/modal-update-testimonial'
+import ModalDeleteTestimonial from './_components/cms-testimonials/modal-delete-testimonial'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useTestimonialList,
   useCreateTestimonial,
   useUpdateTestimonial,
   useDeleteTestimonial,
   TTestimonialsListItem,
-} from '@imphnen-frontend-service/service';
-import React from 'react';
+} from '@imphnen-frontend-service/service'
+import React from 'react'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedTestimonial, setSelectedTestimonial] = useState<TTestimonialsListItem | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/cms-testimonials')({
+  component: CmsTestimonialsPage,
+})
+
+function CmsTestimonialsPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedTestimonial, setSelectedTestimonial] = useState<TTestimonialsListItem | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -45,47 +50,47 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   const { data: testimonialsData, isLoading } = useTestimonialList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const createTestimonial = useCreateTestimonial();
-  const updateTestimonial = useUpdateTestimonial();
-  const deleteTestimonial = useDeleteTestimonial();
+  })
+  const createTestimonial = useCreateTestimonial()
+  const updateTestimonial = useUpdateTestimonial()
+  const deleteTestimonial = useDeleteTestimonial()
 
-  const testimonials: TTestimonialsListItem[] = testimonialsData?.data ?? [];
-  const totalItems = testimonialsData?.meta?.total ?? testimonials.length;
+  const testimonials: TTestimonialsListItem[] = testimonialsData?.data ?? []
+  const totalItems = testimonialsData?.meta?.total ?? testimonials.length
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      await createTestimonial.mutateAsync(pendingFormData.current);
+      await createTestimonial.mutateAsync(pendingFormData.current)
     }
-    return true;
-  };
+    return true
+  }
 
   const handleUpdate = async (): Promise<boolean> => {
     if (selectedTestimonial && pendingFormData.current) {
-      await updateTestimonial.mutateAsync({ id: selectedTestimonial.id, data: pendingFormData.current });
+      await updateTestimonial.mutateAsync({ id: selectedTestimonial.id, data: pendingFormData.current })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async (): Promise<boolean> => {
     if (selectedTestimonial) {
-      await deleteTestimonial.mutateAsync(selectedTestimonial.id);
+      await deleteTestimonial.mutateAsync(selectedTestimonial.id)
     }
-    return true;
-  };
+    return true
+  }
 
   const columns: ColumnDef<TTestimonialsListItem>[] = [
     {
@@ -119,8 +124,8 @@ export const Components: FC = (): ReactElement => {
       header: 'Content',
       accessorKey: 'content',
       cell: ({ row }) => {
-        const content = row.original.content;
-        return content.length > 80 ? `${content.substring(0, 80)}...` : content;
+        const content = row.original.content
+        return content.length > 80 ? `${content.substring(0, 80)}...` : content
       },
     },
     {
@@ -141,9 +146,9 @@ export const Components: FC = (): ReactElement => {
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedTestimonial(row.original);
-              setShowModalUpdateItem(true);
+              e.stopPropagation()
+              setSelectedTestimonial(row.original)
+              setShowModalUpdateItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -153,9 +158,9 @@ export const Components: FC = (): ReactElement => {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedTestimonial(row.original);
-              setShowModalDeleteItem(true);
+              e.stopPropagation()
+              setSelectedTestimonial(row.original)
+              setShowModalDeleteItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -164,7 +169,7 @@ export const Components: FC = (): ReactElement => {
         </div>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: testimonials,
@@ -180,7 +185,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -236,7 +241,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAdd={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalUpdateTestimonial
         isOpen={showModalUpdateItem}
@@ -249,7 +254,7 @@ export const Components: FC = (): ReactElement => {
           role: selectedTestimonial.role,
           content: selectedTestimonial.content,
         } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalDeleteTestimonial
         isOpen={showModalDeleteItem}
@@ -260,7 +265,5 @@ export const Components: FC = (): ReactElement => {
         handleDelete={handleDelete}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/dashboard-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/dashboard-dimentorin.tsx
similarity index 82%
rename from apps/backoffice/src/app/(protected)/dashboard-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/dashboard-dimentorin.tsx
index 63b3716..0d00b8d 100644
--- a/apps/backoffice/src/app/(protected)/dashboard-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/dashboard-dimentorin.tsx
@@ -1,20 +1,25 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms";
-import { For } from "@imphnen-frontend-service/utils";
-import { ReactElement } from "react";
-import { UserGrowthChart } from "./_components/chart/user-growth";
-import { SessionStatusChart } from "./_components/chart/session-status";
-import { useMentorList, useUserList, useMySessions } from "@imphnen-frontend-service/service";
+import { createFileRoute } from '@tanstack/react-router'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms'
+import { For } from '@imphnen-frontend-service/utils'
+import { ReactElement } from 'react'
+import { UserGrowthChart } from './_components/dashboard-dimentorin/chart/user-growth'
+import { SessionStatusChart } from './_components/dashboard-dimentorin/chart/session-status'
+import { useMentorList, useUserList, useMySessions } from '@imphnen-frontend-service/service'
 
-export default function Components(): ReactElement {
-  const { data: mentorData } = useMentorList({ per_page: 5, sort_by: 'rating', order: 'desc' });
-  const { data: userData } = useUserList({ per_page: 1 });
-  const { data: sessionsData } = useMySessions();
+export const Route = createFileRoute('/_authenticated/dashboard-dimentorin')({
+  component: DashboardDimentorinPage,
+})
 
-  const totalMentors = mentorData?.meta?.total ?? 0;
-  const totalUsers = userData?.meta?.total ?? 0;
-  const totalSessions = sessionsData?.total ?? 0;
-  const topMentors = mentorData?.data ?? [];
+function DashboardDimentorinPage(): ReactElement {
+  const { data: mentorData } = useMentorList({ per_page: 5, sort_by: 'rating', order: 'desc' })
+  const { data: userData } = useUserList({ per_page: 1 })
+  const { data: sessionsData } = useMySessions()
+
+  const totalMentors = mentorData?.meta?.total ?? 0
+  const totalUsers = userData?.meta?.total ?? 0
+  const totalSessions = sessionsData?.total ?? 0
+  const topMentors = mentorData?.data ?? []
 
   const overviewStats = [
     { label: 'Total Users', value: totalUsers },
@@ -22,7 +27,7 @@ export default function Components(): ReactElement {
     { label: 'Total Sessions', value: totalSessions },
     { label: 'Active Mentors', value: topMentors.filter((m) => m.status === 'active').length },
     { label: 'Completed Sessions', value: sessionsData?.sessions?.filter((s) => s.status === 'completed').length ?? 0 },
-  ];
+  ]
 
   return (
     <BackofficeWrapper title="Dimentorin.dev">
@@ -113,20 +118,20 @@ export default function Components(): ReactElement {
 
                 <tbody>
                   {(() => {
-                    const sessions = sessionsData?.sessions ?? [];
-                    const topicCount: Record<string, number> = {};
+                    const sessions = sessionsData?.sessions ?? []
+                    const topicCount: Record<string, number> = {}
                     sessions.forEach((s) => {
-                      topicCount[s.topic] = (topicCount[s.topic] ?? 0) + 1;
-                    });
+                      topicCount[s.topic] = (topicCount[s.topic] ?? 0) + 1
+                    })
                     const topTopics = Object.entries(topicCount)
                       .sort(([, a], [, b]) => b - a)
-                      .slice(0, 5);
+                      .slice(0, 5)
                     if (topTopics.length === 0) {
                       return (
                         <tr>
                           <td colSpan={3} className="py-4 px-5 text-center text-neutral-400">Belum ada data</td>
                         </tr>
-                      );
+                      )
                     }
                     return topTopics.map(([topic, count], index) => (
                       <tr key={topic} className="shadow rounded-lg">
@@ -134,7 +139,7 @@ export default function Components(): ReactElement {
                         <td className="py-4 px-5">{topic}</td>
                         <td className="py-4 px-5">{count}</td>
                       </tr>
-                    ));
+                    ))
                   })()}
                 </tbody>
               </table>
diff --git a/apps/backoffice/src/app/(protected)/dashboard/page.tsx b/apps/backoffice/src/routes/_authenticated/dashboard.tsx
similarity index 85%
rename from apps/backoffice/src/app/(protected)/dashboard/page.tsx
rename to apps/backoffice/src/routes/_authenticated/dashboard.tsx
index f5d3e08..c830069 100644
--- a/apps/backoffice/src/app/(protected)/dashboard/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/dashboard.tsx
@@ -1,16 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
 import {
   PlusOutlined,
   ReloadOutlined,
   UsergroupAddOutlined,
   UsergroupDeleteOutlined,
   UserSwitchOutlined,
-} from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
-import ModalAddItem from './_components/modal-add-item';
-import ModalEditItem from './_components/modal-edit-item';
-import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@ant-design/icons'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
+import ModalAddItem from './_components/dashboard/modal-add-item'
+import ModalEditItem from './_components/dashboard/modal-edit-item'
+import ModalDeleteItem from './_components/dashboard/modal-delete-item'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useUserList,
   useGachaItemList,
@@ -18,14 +19,18 @@ import {
   useUpdateGachaItem,
   useDeleteGachaItem,
   TGachaItemDto,
-} from '@imphnen-frontend-service/service';
+} from '@imphnen-frontend-service/service'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalEditItem, setShowModalEditItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<TGachaItemDto | null>(null);
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalEditItem, setShowModalEditItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<TGachaItemDto | null>(null)
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -36,20 +41,20 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
-  const { data: usersData } = useUserList({ per_page: 1 });
-  const { data: gachaItemsData } = useGachaItemList({ per_page: 9 });
-  const createItem = useCreateGachaItem();
-  const updateItem = useUpdateGachaItem();
-  const deleteItem = useDeleteGachaItem();
+  const { data: usersData } = useUserList({ per_page: 1 })
+  const { data: gachaItemsData } = useGachaItemList({ per_page: 9 })
+  const createItem = useCreateGachaItem()
+  const updateItem = useUpdateGachaItem()
+  const deleteItem = useDeleteGachaItem()
 
-  const totalUsers = usersData?.meta?.total ?? 0;
-  const gachaItems: TGachaItemDto[] = gachaItemsData?.data ?? [];
+  const totalUsers = usersData?.meta?.total ?? 0
+  const gachaItems: TGachaItemDto[] = gachaItemsData?.data ?? []
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      const { itemName, quantity } = pendingFormData.current;
+      const { itemName, quantity } = pendingFormData.current
       await createItem.mutateAsync({
         item_code: (itemName as string).toLowerCase().replace(/\s+/g, '-'),
         name: itemName,
@@ -61,28 +66,28 @@ export const Components: FC = (): ReactElement => {
         weight: 1,
         stock: quantity ?? 1,
         is_limited: false,
-      });
+      })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleEdit = async (): Promise<boolean> => {
     if (selectedItem && pendingFormData.current) {
-      const { itemName, quantity } = pendingFormData.current;
+      const { itemName, quantity } = pendingFormData.current
       await updateItem.mutateAsync({
         id: selectedItem.id,
         data: { name: itemName, stock: quantity },
-      });
+      })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async (): Promise<boolean> => {
     if (selectedItem) {
-      await deleteItem.mutateAsync(selectedItem.id);
+      await deleteItem.mutateAsync(selectedItem.id)
     }
-    return true;
-  };
+    return true
+  }
 
   return (
     <Fragment>
@@ -181,8 +186,8 @@ export const Components: FC = (): ReactElement => {
                           size="sm"
                           className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
                           onClick={() => {
-                            setSelectedItem(item);
-                            setShowModalEditItem(true);
+                            setSelectedItem(item)
+                            setShowModalEditItem(true)
                           }}
                         >
                           Edit
@@ -192,8 +197,8 @@ export const Components: FC = (): ReactElement => {
                           size="sm"
                           className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
                           onClick={() => {
-                            setSelectedItem(item);
-                            setShowModalDeleteItem(true);
+                            setSelectedItem(item)
+                            setShowModalDeleteItem(true)
                           }}
                         >
                           Delete
@@ -224,7 +229,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAddItem={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
 
       <ModalEditItem
@@ -236,16 +241,14 @@ export const Components: FC = (): ReactElement => {
         resetStep={resetStep}
         handleEditItem={handleEdit}
         initialValues={selectedItem ? { itemName: selectedItem.name } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
 
       <ModalDeleteItem
         isOpen={showModalDeleteItem}
         onClose={() => setShowModalDeleteItem(false)}
-        handleDeleteItem={async () => { await handleDelete(); return true; }}
+        handleDeleteItem={async () => { await handleDelete(); return true }}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/feedback-review-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/feedback-review-dimentorin.tsx
similarity index 82%
rename from apps/backoffice/src/app/(protected)/feedback-review-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/feedback-review-dimentorin.tsx
index d901b86..2814065 100644
--- a/apps/backoffice/src/app/(protected)/feedback-review-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/feedback-review-dimentorin.tsx
@@ -1,10 +1,11 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react"
-import { useMySessions, TSessionListItem } from "@imphnen-frontend-service/service";
+import { createFileRoute } from '@tanstack/react-router'
+import { SearchOutlined } from '@ant-design/icons'
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms'
+import { BackofficeWrapper, DataTable } from '@imphnen-frontend-service/ui/organisms'
+import { cn, For } from '@imphnen-frontend-service/utils'
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from '@tanstack/react-table'
+import { ReactElement, useState } from 'react'
+import { useMySessions, TSessionListItem } from '@imphnen-frontend-service/service'
 
 const TABS = {
   MENTORING: 'Mentoring',
@@ -12,30 +13,34 @@ const TABS = {
 } as const
 type Tabs = typeof TABS[keyof typeof TABS]
 
-export default function Components(): ReactElement {
+export const Route = createFileRoute('/_authenticated/feedback-review-dimentorin')({
+  component: FeedbackReviewDimentorinPage,
+})
+
+function FeedbackReviewDimentorinPage(): ReactElement {
   const [activeTab, setActiveTab] = useState<Tabs>(TABS.MENTORING)
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
   const { data: sessionsData, isLoading } = useMySessions(
     activeTab === TABS.MENTORING ? { status: 'completed' } : undefined
-  );
+  )
 
   const sessions: TSessionListItem[] = activeTab === TABS.MENTORING
     ? (sessionsData?.sessions ?? [])
-    : [];
+    : []
   const totalItems = activeTab === TABS.MENTORING
     ? (sessionsData?.total ?? sessions.length)
-    : 0;
+    : 0
 
   const columns: ColumnDef<TSessionListItem>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn("w-20") },
+      meta: { cellClassName: cn('w-20') },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -76,17 +81,17 @@ export default function Components(): ReactElement {
       header: 'Status',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const hasRating = !!row.original.rating;
+        const hasRating = !!row.original.rating
         return (
           <div className={`py-2 px-4 rounded-md text-center ${hasRating ? 'bg-success-200 text-success-500' : 'bg-primary-200 text-primary-500'}`}>
             {hasRating ? 'Done' : 'To Do'}
           </div>
-        );
+        )
       },
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn("w-72") },
+      meta: { cellClassName: cn('w-72') },
       cell: () => (
         <Button
           variant="primary"
@@ -116,7 +121,7 @@ export default function Components(): ReactElement {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <BackofficeWrapper title="Dimentorin.dev">
@@ -128,10 +133,10 @@ export default function Components(): ReactElement {
               <Button
                 key={tab}
                 variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                className={cn('px-3 py-2 capitalize', activeTab === tab && 'bg-white')}
                 onClick={() => {
-                  setActiveTab(tab);
-                  setPagination((p) => ({ ...p, pageIndex: 0 }));
+                  setActiveTab(tab)
+                  setPagination((p) => ({ ...p, pageIndex: 0 }))
                 }}
               >
                 {tab}
@@ -175,5 +180,5 @@ export default function Components(): ReactElement {
         )}
       </section>
     </BackofficeWrapper>
-  );
+  )
 }
diff --git a/apps/backoffice/src/app/(protected)/gacha-roll/page.tsx b/apps/backoffice/src/routes/_authenticated/gacha-roll.tsx
similarity index 81%
rename from apps/backoffice/src/app/(protected)/gacha-roll/page.tsx
rename to apps/backoffice/src/routes/_authenticated/gacha-roll.tsx
index e3455fc..f281214 100644
--- a/apps/backoffice/src/app/(protected)/gacha-roll/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/gacha-roll.tsx
@@ -1,15 +1,14 @@
-import * as React from 'react';
-
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   SearchOutlined,
   EditOutlined,
   DeleteOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
-
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -17,26 +16,30 @@ import {
   PaginationState,
   useReactTable,
   RowSelectionState,
-} from '@tanstack/react-table';
-import ModalAddItem from './_components/modal-add-item';
-import ModalUpdateItem from './_components/modal-update-item';
-import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalAddItem from './_components/gacha-roll/modal-add-item'
+import ModalUpdateItem from './_components/gacha-roll/modal-update-item'
+import ModalDeleteItem from './_components/gacha-roll/modal-delete-item'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useGachaItemList,
   useCreateGachaItem,
   useUpdateGachaItem,
   useDeleteGachaItem,
   TGachaItemDto,
-} from '@imphnen-frontend-service/service';
+} from '@imphnen-frontend-service/service'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<TGachaItemDto | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/gacha-roll')({
+  component: GachaRollPage,
+})
+
+function GachaRollPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<TGachaItemDto | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -47,30 +50,30 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   const { data: itemsData, isLoading } = useGachaItemList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const createItem = useCreateGachaItem();
-  const updateItem = useUpdateGachaItem();
-  const deleteItem = useDeleteGachaItem();
+  })
+  const createItem = useCreateGachaItem()
+  const updateItem = useUpdateGachaItem()
+  const deleteItem = useDeleteGachaItem()
 
-  const items: TGachaItemDto[] = itemsData?.data ?? [];
-  const totalItems = itemsData?.meta?.total ?? items.length;
+  const items: TGachaItemDto[] = itemsData?.data ?? []
+  const totalItems = itemsData?.meta?.total ?? items.length
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      const { itemName, quantity, chanceRate } = pendingFormData.current;
+      const { itemName, quantity, chanceRate } = pendingFormData.current
       await createItem.mutateAsync({
         item_code: (itemName as string).toLowerCase().replace(/\s+/g, '-'),
         name: itemName,
@@ -82,14 +85,14 @@ export const Components: FC = (): ReactElement => {
         weight: chanceRate ?? 1,
         stock: quantity ?? 1,
         is_limited: false,
-      });
+      })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleUpdate = async (): Promise<boolean> => {
     if (selectedItem && pendingFormData.current) {
-      const { itemName, quantity, chanceRate } = pendingFormData.current;
+      const { itemName, quantity, chanceRate } = pendingFormData.current
       await updateItem.mutateAsync({
         id: selectedItem.id,
         data: {
@@ -97,17 +100,17 @@ export const Components: FC = (): ReactElement => {
           weight: chanceRate,
           stock: quantity,
         },
-      });
+      })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async () => {
     if (selectedItem) {
-      await deleteItem.mutateAsync(selectedItem.id);
+      await deleteItem.mutateAsync(selectedItem.id)
     }
-    setShowModalDeleteItem(false);
-  };
+    setShowModalDeleteItem(false)
+  }
 
   const columns: ColumnDef<TGachaItemDto>[] = [
     {
@@ -145,9 +148,9 @@ export const Components: FC = (): ReactElement => {
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedItem(row.original);
-              setShowModalUpdateItem(true);
+              e.stopPropagation()
+              setSelectedItem(row.original)
+              setShowModalUpdateItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -157,9 +160,9 @@ export const Components: FC = (): ReactElement => {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedItem(row.original);
-              setShowModalDeleteItem(true);
+              e.stopPropagation()
+              setSelectedItem(row.original)
+              setShowModalDeleteItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -168,7 +171,7 @@ export const Components: FC = (): ReactElement => {
         </div>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: items,
@@ -184,7 +187,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -235,7 +238,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAddItem={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalUpdateItem
         currentStep={currentStep}
@@ -246,7 +249,7 @@ export const Components: FC = (): ReactElement => {
         resetStep={resetStep}
         handleUpdateItem={handleUpdate}
         initialValues={selectedItem ? { itemName: selectedItem.name } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalDeleteItem
         isOpen={showModalDeleteItem}
@@ -254,7 +257,5 @@ export const Components: FC = (): ReactElement => {
         handleDeleteItem={handleDelete}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx b/apps/backoffice/src/routes/_authenticated/hackathon-dashboard.tsx
similarity index 77%
rename from apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
rename to apps/backoffice/src/routes/_authenticated/hackathon-dashboard.tsx
index 36567ae..e3893dd 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/hackathon-dashboard.tsx
@@ -1,31 +1,36 @@
-import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
-import { FC, ReactElement } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router'
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms'
+import { FC, ReactElement } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import {
   getAdminUsers,
   getAdminTeams,
   getAdminSubmissions,
-} from '@imphnen-frontend-service/service';
+} from '@imphnen-frontend-service/service'
 
-export const HackathonDashboardPage: FC = (): ReactElement => {
+export const Route = createFileRoute('/_authenticated/hackathon-dashboard')({
+  component: HackathonDashboardPage,
+})
+
+function HackathonDashboardPage() {
   const { data: usersData } = useQuery({
     queryKey: ['admin-users-count'],
     queryFn: () => getAdminUsers({ page: 1, per_page: 1 }),
-  });
+  })
 
   const { data: teamsData } = useQuery({
     queryKey: ['admin-teams-count'],
     queryFn: () => getAdminTeams({ page: 1, per_page: 1 }),
-  });
+  })
 
   const { data: submissionsData } = useQuery({
     queryKey: ['admin-submissions-count'],
     queryFn: () => getAdminSubmissions({ page: 1, per_page: 1 }),
-  });
+  })
 
-  const totalParticipants = usersData?.meta?.total_data ?? '??';
-  const totalTeams = teamsData?.meta?.total_data ?? '??';
-  const totalSubmissions = submissionsData?.meta?.total_data ?? '??';
+  const totalParticipants = usersData?.meta?.total_data ?? '??'
+  const totalTeams = teamsData?.meta?.total_data ?? '??'
+  const totalSubmissions = submissionsData?.meta?.total_data ?? '??'
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -52,7 +57,5 @@ export const HackathonDashboardPage: FC = (): ReactElement => {
         </div>
       </section>
     </BackofficeWrapper>
-  );
-};
-
-export default HackathonDashboardPage;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx b/apps/backoffice/src/routes/_authenticated/hackathon-submissions.tsx
similarity index 70%
rename from apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
rename to apps/backoffice/src/routes/_authenticated/hackathon-submissions.tsx
index df611be..c06cd8a 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/hackathon-submissions.tsx
@@ -1,3 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
 import {
   FC,
   ReactElement,
@@ -5,44 +6,52 @@ import {
   useEffect,
   useMemo,
   useCallback,
-} from 'react';
-import SubmissionModal from './_components/submission-modal';
+} from 'react'
+import SubmissionModal from './_components/hackathon-submissions/submission-modal'
 import {
   BackofficeWrapper,
   DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
+} from '@imphnen-frontend-service/ui/organisms'
+import { ColumnDef } from '@tanstack/react-table'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { cn } from '@imphnen-frontend-service/utils'
 import {
   SearchOutlined,
   FilterOutlined,
   LoadingOutlined,
   EyeOutlined,
-} from '@ant-design/icons';
-import { useQuery } from '@tanstack/react-query';
+} from '@ant-design/icons'
+import { useQuery } from '@tanstack/react-query'
 import {
   getAdminSubmissions,
   TAdminSubmissionItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
+} from '@imphnen-frontend-service/service'
+import { useNavigate } from '@tanstack/react-router'
 
-type SubmissionType = TAdminSubmissionItem;
+type SubmissionType = TAdminSubmissionItem
 
-export const HackathonSubmissionsPage: FC = (): ReactElement => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = Math.max(
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
-  const statusFilter = searchParams.get('status') || 'all';
+export const Route = createFileRoute('/_authenticated/hackathon-submissions')({
+  component: HackathonSubmissionsPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    page: Number(search.page) || 1,
+    search: (search.search as string) || '',
+    per_page: Number(search.per_page) || 10,
+    status: (search.status as string) || 'all',
+  }),
+})
 
-  const [showSubmissionModal, setShowSubmissionModal] = useState(false);
+function HackathonSubmissionsPage() {
+  const searchParams = Route.useSearch()
+  const navigate = useNavigate()
+  const currentPage = Math.max(1, searchParams.page)
+  const searchQuery = searchParams.search || ''
+  const perPage = searchParams.per_page || 10
+  const statusFilter = searchParams.status || 'all'
+
+  const [showSubmissionModal, setShowSubmissionModal] = useState(false)
   const [selectedSubmission, setSelectedSubmission] =
-    useState<SubmissionType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
+    useState<SubmissionType | null>(null)
+  const [globalFilter, setGlobalFilter] = useState(searchQuery)
 
   const {
     data: submissionsResponse,
@@ -65,82 +74,86 @@ export const HackathonSubmissionsPage: FC = (): ReactElement => {
       }),
     staleTime: 30000,
     gcTime: 5 * 60 * 1000,
-  });
+  })
 
-  const totalData = submissionsResponse?.meta?.total_data || 0;
-  const totalPages = submissionsResponse?.meta?.total_page || 1;
+  const totalData = submissionsResponse?.meta?.total_data || 0
+  const totalPages = submissionsResponse?.meta?.total_page || 1
 
   const handlePageChange = useCallback(
     (newPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', newPage.toString());
-      if (perPage !== 10) params.set('per_page', perPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      setSearchParams(params);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      navigate({
+        search: {
+          page: newPage,
+          per_page: perPage !== 10 ? perPage : undefined,
+          search: searchQuery || undefined,
+          status: statusFilter !== 'all' ? statusFilter : undefined,
+        } as any,
+      })
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     },
-    [setSearchParams, perPage, searchQuery, statusFilter]
-  );
+    [navigate, perPage, searchQuery, statusFilter]
+  )
 
   useEffect(() => {
     if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-      setSearchParams({ page: totalPages.toString() });
+      navigate({ search: { page: totalPages } as any })
     }
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
+  }, [currentPage, totalPages, navigate, isLoading])
 
   useEffect(() => {
-    setGlobalFilter(searchQuery);
-  }, [searchQuery]);
+    setGlobalFilter(searchQuery)
+  }, [searchQuery])
 
   const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    if (statusFilter !== 'all') params.set('status', statusFilter);
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage, statusFilter]);
+    navigate({
+      search: {
+        page: 1,
+        per_page: perPage !== 10 ? perPage : undefined,
+        search: globalFilter.trim() || undefined,
+        status: statusFilter !== 'all' ? statusFilter : undefined,
+      } as any,
+    })
+  }, [globalFilter, navigate, perPage, statusFilter])
 
   const handleSearchKeyPress = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
-        handleSearch();
+        handleSearch()
       }
     },
     [handleSearch]
-  );
+  )
 
   const handlePerPageChange = useCallback(
     (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      setSearchParams(params);
+      navigate({
+        search: {
+          page: 1,
+          per_page: newPerPage,
+          search: searchQuery || undefined,
+          status: statusFilter !== 'all' ? statusFilter : undefined,
+        } as any,
+      })
     },
-    [setSearchParams, searchQuery, statusFilter]
-  );
+    [navigate, searchQuery, statusFilter]
+  )
 
   const handleShowSubmissionModal = useCallback(
     (submission: SubmissionType) => {
-      setSelectedSubmission(submission);
-      setShowSubmissionModal(true);
+      setSelectedSubmission(submission)
+      setShowSubmissionModal(true)
     },
     []
-  );
+  )
 
   const handleCloseSubmissionModal = useCallback(() => {
-    setShowSubmissionModal(false);
-    setSelectedSubmission(null);
-  }, []);
+    setShowSubmissionModal(false)
+    setSelectedSubmission(null)
+  }, [])
 
   const filteredData = useMemo(() => {
-    return submissionsResponse?.data || [];
-  }, [submissionsResponse]);
+    return submissionsResponse?.data || []
+  }, [submissionsResponse])
 
   const columns: ColumnDef<SubmissionType>[] = useMemo(
     () => [
@@ -168,7 +181,7 @@ export const HackathonSubmissionsPage: FC = (): ReactElement => {
         accessorKey: 'status',
         header: 'Status',
         cell: ({ row }) => {
-          const status = row.original.status;
+          const status = row.original.status
           return (
             <span
               className={cn(
@@ -182,7 +195,7 @@ export const HackathonSubmissionsPage: FC = (): ReactElement => {
             >
               {status.charAt(0).toUpperCase() + status.slice(1)}
             </span>
-          );
+          )
         },
         enableSorting: true,
       },
@@ -220,7 +233,7 @@ export const HackathonSubmissionsPage: FC = (): ReactElement => {
       },
     ],
     [handleShowSubmissionModal]
-  );
+  )
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -308,7 +321,5 @@ export const HackathonSubmissionsPage: FC = (): ReactElement => {
         />
       )}
     </BackofficeWrapper>
-  );
-};
-
-export default HackathonSubmissionsPage;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx b/apps/backoffice/src/routes/_authenticated/hackathon-teams.tsx
similarity index 76%
rename from apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
rename to apps/backoffice/src/routes/_authenticated/hackathon-teams.tsx
index 4a115b4..177e129 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/hackathon-teams.tsx
@@ -1,3 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
 import {
   FC,
   ReactElement,
@@ -5,16 +6,16 @@ import {
   useEffect,
   useMemo,
   useCallback,
-} from 'react';
-import ModalTeamDetail from './_components/modal-team-detail-new';
-import { CityFilterSelect } from '../../../components/city-filter-select';
+} from 'react'
+import ModalTeamDetail from './_components/hackathon-teams/modal-team-detail-new'
+import { CityFilterSelect } from '../../components/city-filter-select'
 import {
   BackofficeWrapper,
   DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
+} from '@imphnen-frontend-service/ui/organisms'
+import { ColumnDef } from '@tanstack/react-table'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { cn } from '@imphnen-frontend-service/utils'
 import {
   EditOutlined,
   TeamOutlined,
@@ -22,32 +23,39 @@ import {
   FilterOutlined,
   PlusOutlined,
   LoadingOutlined,
-} from '@ant-design/icons';
-import { useQuery } from '@tanstack/react-query';
+} from '@ant-design/icons'
+import { useQuery } from '@tanstack/react-query'
 import {
   getAdminTeams,
   TAdminTeamItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
+} from '@imphnen-frontend-service/service'
+import { useNavigate } from '@tanstack/react-router'
 
-type TeamType = TAdminTeamItem;
+type TeamType = TAdminTeamItem
 
-export const HackathonTeamsPage: FC = (): ReactElement => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = Math.max(
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
-  const [showDetailModal, setShowDetailModal] = useState(false);
-  const [showNewTeamModal, setShowNewTeamModal] = useState(false);
-  const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
-  useState<TeamType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
+export const Route = createFileRoute('/_authenticated/hackathon-teams')({
+  component: HackathonTeamsPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    page: Number(search.page) || 1,
+    search: (search.search as string) || '',
+    per_page: Number(search.per_page) || 10,
+  }),
+})
 
-  const [visibilityFilter, setVisibilityFilter] = useState('all');
-  const [cityFilter, setCityFilter] = useState('all');
+function HackathonTeamsPage() {
+  const searchParams = Route.useSearch()
+  const navigate = useNavigate()
+  const currentPage = Math.max(1, searchParams.page)
+  const searchQuery = searchParams.search || ''
+  const perPage = searchParams.per_page || 10
+  const [showDetailModal, setShowDetailModal] = useState(false)
+  const [showNewTeamModal, setShowNewTeamModal] = useState(false)
+  const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null)
+  useState<TeamType | null>(null)
+  const [globalFilter, setGlobalFilter] = useState(searchQuery)
+
+  const [visibilityFilter, setVisibilityFilter] = useState('all')
+  const [cityFilter, setCityFilter] = useState('all')
 
   const {
     data: teamsResponse,
@@ -70,84 +78,88 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
       }),
     staleTime: 30000,
     gcTime: 5 * 60 * 1000,
-  });
+  })
 
-  const totalData = teamsResponse?.meta?.total_data || 0;
-  const totalPages = teamsResponse?.meta?.total_page || 1;
+  const totalData = teamsResponse?.meta?.total_data || 0
+  const totalPages = teamsResponse?.meta?.total_page || 1
 
   const handlePageChange = useCallback(
     (newPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', newPage.toString());
-      if (perPage !== 10) params.set('per_page', perPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      navigate({
+        search: {
+          page: newPage,
+          per_page: perPage !== 10 ? perPage : undefined,
+          search: searchQuery || undefined,
+        } as any,
+      })
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     },
-    [setSearchParams, perPage, searchQuery]
-  );
+    [navigate, perPage, searchQuery]
+  )
 
   useEffect(() => {
     if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-      setSearchParams({ page: totalPages.toString() });
+      navigate({ search: { page: totalPages } as any })
     }
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
+  }, [currentPage, totalPages, navigate, isLoading])
 
   useEffect(() => {
-    setGlobalFilter(searchQuery);
-  }, [searchQuery]);
+    setGlobalFilter(searchQuery)
+  }, [searchQuery])
 
   const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage]);
+    navigate({
+      search: {
+        page: 1,
+        per_page: perPage !== 10 ? perPage : undefined,
+        search: globalFilter.trim() || undefined,
+      } as any,
+    })
+  }, [globalFilter, navigate, perPage])
 
   const handleSearchKeyPress = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
-        handleSearch();
+        handleSearch()
       }
     },
     [handleSearch]
-  );
+  )
 
   const handlePerPageChange = useCallback(
     (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
+      navigate({
+        search: {
+          page: 1,
+          per_page: newPerPage,
+          search: searchQuery || undefined,
+        } as any,
+      })
     },
-    [setSearchParams, searchQuery]
-  );
+    [navigate, searchQuery]
+  )
 
   const handleShowDetailModal = useCallback((team: TeamType) => {
-    setSelectedTeam(team);
-    setShowDetailModal(true);
-  }, []);
+    setSelectedTeam(team)
+    setShowDetailModal(true)
+  }, [])
 
   const handleCloseDetailModal = useCallback(() => {
-    setShowDetailModal(false);
-    setSelectedTeam(null);
-  }, []);
+    setShowDetailModal(false)
+    setSelectedTeam(null)
+  }, [])
 
   const handleShowNewTeamModal = useCallback(() => {
-    setShowNewTeamModal(true);
-  }, []);
+    setShowNewTeamModal(true)
+  }, [])
 
   const handleCloseNewTeamModal = useCallback(() => {
-    setShowNewTeamModal(false);
-  }, []);
+    setShowNewTeamModal(false)
+  }, [])
 
   const filteredData = useMemo(() => {
-    return teamsResponse?.data || [];
-  }, [teamsResponse]);
+    return teamsResponse?.data || []
+  }, [teamsResponse])
 
   const columns: ColumnDef<TeamType>[] = useMemo(
     () => [
@@ -155,7 +167,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
         accessorKey: 'name',
         header: 'Team',
         cell: ({ row }) => {
-          const team = row.original;
+          const team = row.original
           return (
             <div className="flex items-center gap-3">
               <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center shrink-0 overflow-hidden">
@@ -178,7 +190,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
                 </p>
               </div>
             </div>
-          );
+          )
         },
         enableSorting: true,
       },
@@ -194,7 +206,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
         accessorKey: 'visibility',
         header: 'Visibility',
         cell: ({ row }) => {
-          const isPublic = row.original.visibility === 'public';
+          const isPublic = row.original.visibility === 'public'
           return (
             <span
               className={cn(
@@ -206,7 +218,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
             >
               {isPublic ? 'Public' : 'Private'}
             </span>
-          );
+          )
         },
         enableSorting: true,
       },
@@ -256,7 +268,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
       },
     ],
     [handleShowDetailModal]
-  );
+  )
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -347,9 +359,9 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
               variant="secondary"
               size="sm"
               onClick={() => {
-                setVisibilityFilter('all');
-                setCityFilter('all');
-                setGlobalFilter('');
+                setVisibilityFilter('all')
+                setCityFilter('all')
+                setGlobalFilter('')
               }}
               className="text-sm text-neutral-600"
             >
@@ -401,7 +413,5 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
         team={null}
       />
     </BackofficeWrapper>
-  );
-};
-
-export default HackathonTeamsPage;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx b/apps/backoffice/src/routes/_authenticated/hackathon-users.tsx
similarity index 77%
rename from apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
rename to apps/backoffice/src/routes/_authenticated/hackathon-users.tsx
index 551ade0..84b69ef 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/hackathon-users.tsx
@@ -1,3 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
 import {
   FC,
   ReactElement,
@@ -5,15 +6,15 @@ import {
   useEffect,
   useMemo,
   useCallback,
-} from 'react';
-import ModalUserDetail from './_components/modal-user-detail';
+} from 'react'
+import ModalUserDetail from './_components/hackathon-users/modal-user-detail'
 import {
   BackofficeWrapper,
   DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
+} from '@imphnen-frontend-service/ui/organisms'
+import { ColumnDef } from '@tanstack/react-table'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { cn } from '@imphnen-frontend-service/utils'
 import {
   EditOutlined,
   UserOutlined,
@@ -21,16 +22,16 @@ import {
   FilterOutlined,
   PlusOutlined,
   LoadingOutlined,
-} from '@ant-design/icons';
-import { CityFilterSelect } from '../../../components/city-filter-select';
-import { useQuery } from '@tanstack/react-query';
+} from '@ant-design/icons'
+import { CityFilterSelect } from '../../components/city-filter-select'
+import { useQuery } from '@tanstack/react-query'
 import {
   getAdminUsers,
   TAdminUserItem,
-} from '@imphnen-frontend-service/service';
-import { useSearchParams } from 'react-router-dom';
+} from '@imphnen-frontend-service/service'
+import { useSearch, useNavigate } from '@tanstack/react-router'
 
-type UserType = TAdminUserItem;
+type UserType = TAdminUserItem
 
 const skillsOptions = [
   'Frontend Developer',
@@ -41,24 +42,31 @@ const skillsOptions = [
   'Product Manager',
   'Data Scientist',
   'Mobile Developer',
-];
+]
 
-export const HackathonUsersPage: FC = (): ReactElement => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const currentPage = Math.max(
-    1,
-    parseInt(searchParams.get('page') || '1', 10)
-  );
-  const searchQuery = searchParams.get('search') || '';
-  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
-  const [showDetailModal, setShowDetailModal] = useState(false);
-  const [showNewUserModal, setShowNewUserModal] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState(searchQuery);
+export const Route = createFileRoute('/_authenticated/hackathon-users')({
+  component: HackathonUsersPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    page: Number(search.page) || 1,
+    search: (search.search as string) || '',
+    per_page: Number(search.per_page) || 10,
+  }),
+})
 
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [cityFilter, setCityFilter] = useState('all');
-  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
+function HackathonUsersPage() {
+  const searchParams = Route.useSearch()
+  const navigate = useNavigate()
+  const currentPage = Math.max(1, searchParams.page)
+  const searchQuery = searchParams.search || ''
+  const perPage = searchParams.per_page || 10
+  const [showDetailModal, setShowDetailModal] = useState(false)
+  const [showNewUserModal, setShowNewUserModal] = useState(false)
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null)
+  const [globalFilter, setGlobalFilter] = useState(searchQuery)
+
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [cityFilter, setCityFilter] = useState('all')
+  const [skillsFilter, setSkillsFilter] = useState<string[]>([])
 
   const {
     data: usersResponse,
@@ -81,100 +89,104 @@ export const HackathonUsersPage: FC = (): ReactElement => {
       }),
     staleTime: 30000,
     gcTime: 5 * 60 * 1000,
-  });
+  })
 
-  const totalData = usersResponse?.meta?.total_data || 0;
-  const totalPages = usersResponse?.meta?.total_page || 1;
+  const totalData = usersResponse?.meta?.total_data || 0
+  const totalPages = usersResponse?.meta?.total_page || 1
 
   const handlePageChange = useCallback(
     (newPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', newPage.toString());
-      if (perPage !== 10) params.set('per_page', perPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      navigate({
+        search: {
+          page: newPage,
+          per_page: perPage !== 10 ? perPage : undefined,
+          search: searchQuery || undefined,
+        } as any,
+      })
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     },
-    [setSearchParams, perPage, searchQuery]
-  );
+    [navigate, perPage, searchQuery]
+  )
 
   useEffect(() => {
     if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-      setSearchParams({ page: totalPages.toString() });
+      navigate({ search: { page: totalPages } as any })
     }
-  }, [currentPage, totalPages, setSearchParams, isLoading]);
+  }, [currentPage, totalPages, navigate, isLoading])
 
   useEffect(() => {
-    setGlobalFilter(searchQuery);
-  }, [searchQuery]);
+    setGlobalFilter(searchQuery)
+  }, [searchQuery])
 
   const handleSearch = useCallback(() => {
-    const params = new URLSearchParams();
-    params.set('page', '1');
-    if (perPage !== 10) params.set('per_page', perPage.toString());
-    if (globalFilter.trim()) {
-      params.set('search', globalFilter.trim());
-    }
-    setSearchParams(params);
-  }, [globalFilter, setSearchParams, perPage]);
+    navigate({
+      search: {
+        page: 1,
+        per_page: perPage !== 10 ? perPage : undefined,
+        search: globalFilter.trim() || undefined,
+      } as any,
+    })
+  }, [globalFilter, navigate, perPage])
 
   const handleSearchKeyPress = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
-        handleSearch();
+        handleSearch()
       }
     },
     [handleSearch]
-  );
+  )
 
   const handlePerPageChange = useCallback(
     (newPerPage: number) => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('per_page', newPerPage.toString());
-      if (searchQuery) params.set('search', searchQuery);
-      setSearchParams(params);
+      navigate({
+        search: {
+          page: 1,
+          per_page: newPerPage,
+          search: searchQuery || undefined,
+        } as any,
+      })
     },
-    [setSearchParams, searchQuery]
-  );
+    [navigate, searchQuery]
+  )
 
   const handleShowDetailModal = useCallback((user: UserType) => {
-    setSelectedUser(user);
-    setShowDetailModal(true);
-  }, []);
+    setSelectedUser(user)
+    setShowDetailModal(true)
+  }, [])
 
   const handleCloseDetailModal = useCallback(() => {
-    setShowDetailModal(false);
-    setSelectedUser(null);
-  }, []);
+    setShowDetailModal(false)
+    setSelectedUser(null)
+  }, [])
 
   const handleShowNewUserModal = useCallback(() => {
-    setShowNewUserModal(true);
-  }, []);
+    setShowNewUserModal(true)
+  }, [])
 
   const handleCloseNewUserModal = useCallback(() => {
-    setShowNewUserModal(false);
-  }, []);
+    setShowNewUserModal(false)
+  }, [])
 
   const filteredData = useMemo(() => {
-    const usersData = usersResponse?.data || [];
+    const usersData = usersResponse?.data || []
     return usersData.filter((user: UserType) => {
       if (statusFilter !== 'all') {
-        const isActive = statusFilter === 'active';
-        if (user.is_active !== isActive) return false;
+        const isActive = statusFilter === 'active'
+        if (user.is_active !== isActive) return false
       }
 
       if (skillsFilter.length > 0) {
-        const userSkills = user.skills || [];
+        const userSkills = user.skills || []
         const hasMatchingSkill = skillsFilter.some((skill) =>
           userSkills.includes(skill)
-        );
-        if (!hasMatchingSkill) return false;
+        )
+        if (!hasMatchingSkill) return false
       }
 
-      return true;
-    });
-  }, [usersResponse, statusFilter, skillsFilter]);
+      return true
+    })
+  }, [usersResponse, statusFilter, skillsFilter])
 
   const columns: ColumnDef<UserType>[] = useMemo(
     () => [
@@ -207,7 +219,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
         accessorKey: 'skills',
         header: 'Skills',
         cell: ({ row }) => {
-          const skills = row.original.skills || [];
+          const skills = row.original.skills || []
           return (
             <div className="flex flex-wrap gap-1 max-w-xs">
               {skills.length > 0 ? (
@@ -230,7 +242,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
                 <span className="text-neutral-400">-</span>
               )}
             </div>
-          );
+          )
         },
         enableSorting: false,
       },
@@ -265,11 +277,11 @@ export const HackathonUsersPage: FC = (): ReactElement => {
         ),
         enableSorting: true,
         sortingFn: (rowA, rowB) => {
-          const aActive = rowA.original.is_active;
-          const bActive = rowB.original.is_active;
-          if (aActive && !bActive) return -1;
-          if (!aActive && bActive) return 1;
-          return 0;
+          const aActive = rowA.original.is_active
+          const bActive = rowB.original.is_active
+          if (aActive && !bActive) return -1
+          if (!aActive && bActive) return 1
+          return 0
         },
       },
       {
@@ -310,7 +322,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
       },
     ],
     [handleShowDetailModal]
-  );
+  )
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -424,10 +436,10 @@ export const HackathonUsersPage: FC = (): ReactElement => {
               variant="secondary"
               size="sm"
               onClick={() => {
-                setStatusFilter('all');
-                setCityFilter('all');
-                setSkillsFilter([]);
-                setGlobalFilter('');
+                setStatusFilter('all')
+                setCityFilter('all')
+                setSkillsFilter([])
+                setGlobalFilter('')
               }}
               className="text-sm text-neutral-600"
             >
@@ -479,7 +491,5 @@ export const HackathonUsersPage: FC = (): ReactElement => {
         user={null}
       />
     </BackofficeWrapper>
-  );
-};
-
-export default HackathonUsersPage;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/permissions/page.tsx b/apps/backoffice/src/routes/_authenticated/permissions.tsx
similarity index 81%
rename from apps/backoffice/src/app/(protected)/permissions/page.tsx
rename to apps/backoffice/src/routes/_authenticated/permissions.tsx
index d1d6e00..309eeea 100644
--- a/apps/backoffice/src/app/(protected)/permissions/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/permissions.tsx
@@ -1,12 +1,13 @@
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   SearchOutlined,
   EditOutlined,
   DeleteOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -14,27 +15,31 @@ import {
   PaginationState,
   RowSelectionState,
   useReactTable,
-} from '@tanstack/react-table';
-import ModalAddPermission from './_components/modal-add-permission';
-import ModalUpdatePermission from './_components/modal-update-permission';
-import ModalDeletePermission from './_components/modal-delete-permission';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalAddPermission from './_components/permissions/modal-add-permission'
+import ModalUpdatePermission from './_components/permissions/modal-update-permission'
+import ModalDeletePermission from './_components/permissions/modal-delete-permission'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   usePermissionList,
   useCreatePermission,
   useUpdatePermission,
   useDeletePermission,
   TPermissionItem,
-} from '@imphnen-frontend-service/service';
-import React from 'react';
+} from '@imphnen-frontend-service/service'
+import React from 'react'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<TPermissionItem | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/permissions')({
+  component: PermissionsPage,
+})
+
+function PermissionsPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<TPermissionItem | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -45,47 +50,47 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   const { data: permissionsData, isLoading } = usePermissionList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const createPermission = useCreatePermission();
-  const updatePermission = useUpdatePermission();
-  const deletePermission = useDeletePermission();
+  })
+  const createPermission = useCreatePermission()
+  const updatePermission = useUpdatePermission()
+  const deletePermission = useDeletePermission()
 
-  const permissions: TPermissionItem[] = permissionsData?.data ?? [];
-  const totalItems = permissionsData?.meta?.total ?? permissions.length;
+  const permissions: TPermissionItem[] = permissionsData?.data ?? []
+  const totalItems = permissionsData?.meta?.total ?? permissions.length
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      await createPermission.mutateAsync(pendingFormData.current);
+      await createPermission.mutateAsync(pendingFormData.current)
     }
-    return true;
-  };
+    return true
+  }
 
   const handleUpdate = async (): Promise<boolean> => {
     if (selectedItem && pendingFormData.current) {
-      await updatePermission.mutateAsync({ id: selectedItem.id, data: pendingFormData.current });
+      await updatePermission.mutateAsync({ id: selectedItem.id, data: pendingFormData.current })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async (): Promise<boolean> => {
     if (selectedItem) {
-      await deletePermission.mutateAsync(selectedItem.id);
+      await deletePermission.mutateAsync(selectedItem.id)
     }
-    return true;
-  };
+    return true
+  }
 
   const columns: ColumnDef<TPermissionItem>[] = [
     {
@@ -123,9 +128,9 @@ export const Components: FC = (): ReactElement => {
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedItem(row.original);
-              setShowModalUpdateItem(true);
+              e.stopPropagation()
+              setSelectedItem(row.original)
+              setShowModalUpdateItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -135,9 +140,9 @@ export const Components: FC = (): ReactElement => {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedItem(row.original);
-              setShowModalDeleteItem(true);
+              e.stopPropagation()
+              setSelectedItem(row.original)
+              setShowModalDeleteItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -146,7 +151,7 @@ export const Components: FC = (): ReactElement => {
         </div>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: permissions,
@@ -162,7 +167,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -218,7 +223,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAddItem={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalUpdatePermission
         isOpen={showModalUpdateItem}
@@ -228,7 +233,7 @@ export const Components: FC = (): ReactElement => {
         resetStep={resetStep}
         handleUpdate={handleUpdate}
         initialValues={selectedItem ? { name: selectedItem.name } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalDeletePermission
         isOpen={showModalDeleteItem}
@@ -239,7 +244,5 @@ export const Components: FC = (): ReactElement => {
         handleDelete={handleDelete}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/prizes/page.tsx b/apps/backoffice/src/routes/_authenticated/prizes.tsx
similarity index 85%
rename from apps/backoffice/src/app/(protected)/prizes/page.tsx
rename to apps/backoffice/src/routes/_authenticated/prizes.tsx
index 7c3ebbb..9f18bd5 100644
--- a/apps/backoffice/src/app/(protected)/prizes/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/prizes.tsx
@@ -1,14 +1,13 @@
-import * as React from 'react';
-
-import { FC, Fragment, ReactElement, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+import { FC, Fragment, ReactElement, useState } from 'react'
 import {
   FilterOutlined,
   SearchOutlined,
   AuditOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
-
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -16,19 +15,19 @@ import {
   PaginationState,
   useReactTable,
   RowSelectionState,
-} from '@tanstack/react-table';
-import ModalProcessDelivery from './_components/modal-process-item';
+} from '@tanstack/react-table'
+import ModalProcessDelivery from './_components/prizes/modal-process-item'
 
-type OrderValid = 'valid' | 'invalid' | 'unchecked';
-type Status = 'undelivered' | 'delivered';
+type OrderValid = 'valid' | 'invalid' | 'unchecked'
+type Status = 'undelivered' | 'delivered'
 
 interface Prize {
-  id: number;
-  name: string;
-  orderValid: OrderValid;
-  items: string;
-  address: string;
-  status: Status;
+  id: number
+  name: string
+  orderValid: OrderValid
+  items: string
+  address: string
+  status: Status
 }
 
 const items = [
@@ -38,7 +37,7 @@ const items = [
   'Sticker Isi 3',
   'Sticker Isi 5',
   'Gelang Karet',
-];
+]
 
 const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
   id: i + 1,
@@ -51,24 +50,28 @@ const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
   items: items[i % items.length],
   address: 'Jl. Pantai Cibaduyut Indah',
   status: (i % 3 === 0 ? 'undelivered' : 'delivered') as Status,
-}));
+}))
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_authenticated/prizes')({
+  component: PrizesPage,
+})
+
+function PrizesPage() {
   const [showModalProcessDelivery, setShowModalProcessDelivery] =
-    useState(false);
+    useState(false)
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [showFilter, setShowFilter] = useState(false);
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const [showFilter, setShowFilter] = useState(false)
 
   const deliveryOptions = [
     { id: 'option1', value: 'undelivered', label: 'Undelivered' },
     { id: 'option1', value: 'delivered', label: 'Delivered' },
-  ];
+  ]
 
   const columns: ColumnDef<Prize>[] = [
     {
@@ -102,24 +105,24 @@ export const Components: FC = (): ReactElement => {
       header: 'Order Valid?',
       accessorKey: 'orderValid',
       cell: ({ row }) => {
-        const status = row.original.orderValid;
+        const status = row.original.orderValid
         const statusColors: Record<OrderValid, string> = {
           valid: 'bg-success-200 text-success-500',
           invalid: 'bg-danger-200 text-danger-500',
           unchecked: 'bg-warning-200 text-warning-900',
-        };
+        }
         const statusText: Record<OrderValid, string> = {
           valid: 'Valid',
           invalid: 'Invalid',
           unchecked: 'Unchecked',
-        };
+        }
         return (
           <div
             className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
           >
             {statusText[status]}
           </div>
-        );
+        )
       },
     },
     {
@@ -134,22 +137,22 @@ export const Components: FC = (): ReactElement => {
       header: 'Status',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const status = row.original.status;
+        const status = row.original.status
         const statusColors: Record<Status, string> = {
           delivered: 'bg-success-200 text-success-500',
           undelivered: 'bg-danger-200 text-danger-500',
-        };
+        }
         const statusText: Record<Status, string> = {
           delivered: 'Delivered',
           undelivered: 'Undelivered',
-        };
+        }
         return (
           <div
             className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
           >
             {statusText[status]}
           </div>
-        );
+        )
       },
     },
     {
@@ -159,8 +162,8 @@ export const Components: FC = (): ReactElement => {
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setShowModalProcessDelivery(true);
+            e.stopPropagation()
+            setShowModalProcessDelivery(true)
           }}
           className="flex items-center gap-2 w-full"
         >
@@ -168,7 +171,7 @@ export const Components: FC = (): ReactElement => {
         </Button>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: mockData,
@@ -184,7 +187,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(mockData.length / pagination.pageSize),
     manualPagination: false,
-  });
+  })
 
   return (
     <Fragment>
@@ -219,7 +222,7 @@ export const Components: FC = (): ReactElement => {
                     options={deliveryOptions}
                     onClose={() => setShowFilter(false)}
                     onFilterChange={(value) => {
-                      console.log('Selected filter:', value);
+                      console.log('Selected filter:', value)
                     }}
                   />
                 </div>
@@ -234,11 +237,9 @@ export const Components: FC = (): ReactElement => {
         isOpen={showModalProcessDelivery}
         onClose={() => setShowModalProcessDelivery(false)}
         handleProcessDelivery={() => {
-          console.log('Action ketika user menekan tombol Proses Pengiriman');
+          console.log('Action ketika user menekan tombol Proses Pengiriman')
         }}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/roadmap-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/roadmap-dimentorin.tsx
similarity index 83%
rename from apps/backoffice/src/app/(protected)/roadmap-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/roadmap-dimentorin.tsx
index d2a0410..ab0b966 100644
--- a/apps/backoffice/src/app/(protected)/roadmap-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/roadmap-dimentorin.tsx
@@ -1,10 +1,11 @@
-import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { useState } from "react";
-import { ModalCreateRoadmap } from "./_components/modal/create-roadmap";
+import { createFileRoute } from '@tanstack/react-router'
+import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons'
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms'
+import { BackofficeWrapper, DataTable } from '@imphnen-frontend-service/ui/organisms'
+import { cn } from '@imphnen-frontend-service/utils'
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from '@tanstack/react-table'
+import { useState } from 'react'
+import { ModalCreateRoadmap } from './_components/roadmap-dimentorin/modal/create-roadmap'
 
 type LearningStatus = 'active' | 'inactive'
 
@@ -22,19 +23,23 @@ const mockData: RoadmapType[] = Array.from({ length: 90 }, (_, i) => ({
   status: i % 2 === 0 ? 'active' : 'inactive',
 }))
 
-export default function Components(): React.ReactElement {
+export const Route = createFileRoute('/_authenticated/roadmap-dimentorin')({
+  component: RoadmapDimentorinPage,
+})
+
+function RoadmapDimentorinPage(): React.ReactElement {
   const [openCreateModal, setOpenCreateModal] = useState(false)
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
   const columns: ColumnDef<RoadmapType>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn("w-20") },
+      meta: { cellClassName: cn('w-20') },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -72,34 +77,34 @@ export default function Components(): React.ReactElement {
       header: 'Status',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const status = row.original.status;
+        const status = row.original.status
         const statusColors: Record<LearningStatus, string> = {
           inactive: 'bg-danger-200 text-danger-700',
           active: 'bg-success-200 text-success-500',
-        };
+        }
         const statusText: Record<LearningStatus, string> = {
           inactive: 'Inactive',
           active: 'Active',
-        };
+        }
         return (
           <div
             className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
           >
             {statusText[status]}
           </div>
-        );
+        )
       },
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn("w-72") },
+      meta: { cellClassName: cn('w-72') },
       cell: ({ row }) => (
         <div className="flex gap-[8px]">
           <Button
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
+              e.stopPropagation()
             }}
             className="flex items-center gap-2"
           >
@@ -109,7 +114,7 @@ export default function Components(): React.ReactElement {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
+              e.stopPropagation()
             }}
             className="flex items-center gap-2"
           >
@@ -134,7 +139,7 @@ export default function Components(): React.ReactElement {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(mockData.length / pagination.pageSize),
     manualPagination: false,
-  });
+  })
 
   return (
     <BackofficeWrapper title="Dimentorin.dev">
diff --git a/apps/backoffice/src/app/(protected)/roles/page.tsx b/apps/backoffice/src/routes/_authenticated/roles.tsx
similarity index 80%
rename from apps/backoffice/src/app/(protected)/roles/page.tsx
rename to apps/backoffice/src/routes/_authenticated/roles.tsx
index 058f238..c4efd63 100644
--- a/apps/backoffice/src/app/(protected)/roles/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/roles.tsx
@@ -1,12 +1,13 @@
-import { FC, Fragment, ReactElement, useRef, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, Fragment, ReactElement, useRef, useState } from 'react'
 import {
   SearchOutlined,
   EditOutlined,
   DeleteOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -14,27 +15,31 @@ import {
   PaginationState,
   RowSelectionState,
   useReactTable,
-} from '@tanstack/react-table';
-import ModalAddRole from './_components/modal-add-role';
-import ModalUpdateRole from './_components/modal-update-role';
-import ModalDeleteRole from './_components/modal-delete-role';
-import { useQueryState } from '@imphnen-frontend-service/utils';
+} from '@tanstack/react-table'
+import ModalAddRole from './_components/roles/modal-add-role'
+import ModalUpdateRole from './_components/roles/modal-update-role'
+import ModalDeleteRole from './_components/roles/modal-delete-role'
+import { useQueryState } from '@imphnen-frontend-service/utils'
 import {
   useRoleList,
   useCreateRole,
   useUpdateRole,
   useDeleteRole,
   TRolesListItem,
-} from '@imphnen-frontend-service/service';
-import React from 'react';
+} from '@imphnen-frontend-service/service'
+import React from 'react'
 
-export const Components: FC = (): ReactElement => {
-  const [showModalAddItem, setShowModalAddItem] = useState(false);
-  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false);
-  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
-  const [selectedRole, setSelectedRole] = useState<TRolesListItem | null>(null);
-  const [search, setSearch] = useState('');
-  const pendingFormData = useRef<any>(null);
+export const Route = createFileRoute('/_authenticated/roles')({
+  component: RolesPage,
+})
+
+function RolesPage() {
+  const [showModalAddItem, setShowModalAddItem] = useState(false)
+  const [showModalUpdateItem, setShowModalUpdateItem] = useState(false)
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false)
+  const [selectedRole, setSelectedRole] = useState<TRolesListItem | null>(null)
+  const [search, setSearch] = useState('')
+  const pendingFormData = useRef<any>(null)
 
   const {
     step: currentStep,
@@ -45,47 +50,47 @@ export const Components: FC = (): ReactElement => {
     defaultValue: 1,
     maxValue: 2,
     minValue: 1,
-  });
+  })
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   const { data: rolesData, isLoading } = useRoleList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
-  const createRole = useCreateRole();
-  const updateRole = useUpdateRole();
-  const deleteRole = useDeleteRole();
+  })
+  const createRole = useCreateRole()
+  const updateRole = useUpdateRole()
+  const deleteRole = useDeleteRole()
 
-  const roles: TRolesListItem[] = rolesData?.data ?? [];
-  const totalItems = rolesData?.meta?.total ?? roles.length;
+  const roles: TRolesListItem[] = rolesData?.data ?? []
+  const totalItems = rolesData?.meta?.total ?? roles.length
 
   const handleAdd = async (): Promise<boolean> => {
     if (pendingFormData.current) {
-      await createRole.mutateAsync(pendingFormData.current);
+      await createRole.mutateAsync(pendingFormData.current)
     }
-    return true;
-  };
+    return true
+  }
 
   const handleUpdate = async (): Promise<boolean> => {
     if (selectedRole && pendingFormData.current) {
-      await updateRole.mutateAsync({ id: selectedRole.id, data: pendingFormData.current });
+      await updateRole.mutateAsync({ id: selectedRole.id, data: pendingFormData.current })
     }
-    return true;
-  };
+    return true
+  }
 
   const handleDelete = async (): Promise<boolean> => {
     if (selectedRole) {
-      await deleteRole.mutateAsync(selectedRole.id);
+      await deleteRole.mutateAsync(selectedRole.id)
     }
-    return true;
-  };
+    return true
+  }
 
   const columns: ColumnDef<TRolesListItem>[] = [
     {
@@ -123,9 +128,9 @@ export const Components: FC = (): ReactElement => {
             variant="primary"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedRole(row.original);
-              setShowModalUpdateItem(true);
+              e.stopPropagation()
+              setSelectedRole(row.original)
+              setShowModalUpdateItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -135,9 +140,9 @@ export const Components: FC = (): ReactElement => {
             variant="danger"
             size="sm"
             onClick={(e) => {
-              e.stopPropagation();
-              setSelectedRole(row.original);
-              setShowModalDeleteItem(true);
+              e.stopPropagation()
+              setSelectedRole(row.original)
+              setShowModalDeleteItem(true)
             }}
             className="flex items-center gap-2"
           >
@@ -146,7 +151,7 @@ export const Components: FC = (): ReactElement => {
         </div>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: roles,
@@ -162,7 +167,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <Fragment>
@@ -218,7 +223,7 @@ export const Components: FC = (): ReactElement => {
         prevStep={prevStep}
         resetStep={resetStep}
         handleAdd={handleAdd}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalUpdateRole
         isOpen={showModalUpdateItem}
@@ -228,7 +233,7 @@ export const Components: FC = (): ReactElement => {
         resetStep={resetStep}
         handleUpdate={handleUpdate}
         initialValues={selectedRole ? { name: selectedRole.name } : undefined}
-        onDataCapture={(data) => { pendingFormData.current = data; }}
+        onDataCapture={(data) => { pendingFormData.current = data }}
       />
       <ModalDeleteRole
         isOpen={showModalDeleteItem}
@@ -239,7 +244,5 @@ export const Components: FC = (): ReactElement => {
         handleDelete={handleDelete}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/session-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/session-dimentorin.tsx
similarity index 78%
rename from apps/backoffice/src/app/(protected)/session-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/session-dimentorin.tsx
index 5db060f..5679668 100644
--- a/apps/backoffice/src/app/(protected)/session-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/session-dimentorin.tsx
@@ -1,33 +1,38 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react";
-import { ModalDetailSession } from "./_components/modal/detail";
-import { useMySessions, TSessionListItem } from "@imphnen-frontend-service/service";
+import { createFileRoute } from '@tanstack/react-router'
+import { SearchOutlined } from '@ant-design/icons'
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms'
+import { BackofficeWrapper, DataTable } from '@imphnen-frontend-service/ui/organisms'
+import { cn } from '@imphnen-frontend-service/utils'
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from '@tanstack/react-table'
+import { ReactElement, useState } from 'react'
+import { ModalDetailSession } from './_components/session-dimentorin/modal/detail'
+import { useMySessions, TSessionListItem } from '@imphnen-frontend-service/service'
 
-export default function Components(): ReactElement {
-  const [openDetail, setOpenDetail] = useState(false);
-  const [statusFilter, setStatusFilter] = useState('');
+export const Route = createFileRoute('/_authenticated/session-dimentorin')({
+  component: SessionDimentorinPage,
+})
+
+function SessionDimentorinPage(): ReactElement {
+  const [openDetail, setOpenDetail] = useState(false)
+  const [statusFilter, setStatusFilter] = useState('')
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
   const { data: sessionsData, isLoading } = useMySessions(
     statusFilter ? { status: statusFilter } : undefined
-  );
+  )
 
-  const sessions: TSessionListItem[] = sessionsData?.sessions ?? [];
-  const totalItems = sessionsData?.total ?? sessions.length;
+  const sessions: TSessionListItem[] = sessionsData?.sessions ?? []
+  const totalItems = sessionsData?.total ?? sessions.length
 
   const columns: ColumnDef<TSessionListItem>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn("w-20") },
+      meta: { cellClassName: cn('w-20') },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -73,31 +78,31 @@ export default function Components(): ReactElement {
       header: 'Status',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const status = row.original.status;
+        const status = row.original.status
         const statusColors: Record<string, string> = {
           pending: 'bg-warning-200 text-warning-700',
           confirmed: 'bg-primary-200 text-primary-700',
           ongoing: 'bg-warning-200 text-warning-700',
           completed: 'bg-success-200 text-success-500',
           cancelled: 'bg-danger-200 text-danger-500',
-        };
+        }
         return (
           <div className={`py-2 px-4 rounded-md text-center capitalize ${statusColors[status] ?? 'bg-neutral-200 text-neutral-700'}`}>
             {status}
           </div>
-        );
+        )
       },
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn("w-52") },
+      meta: { cellClassName: cn('w-52') },
       cell: () => (
         <Button
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setOpenDetail(true);
+            e.stopPropagation()
+            setOpenDetail(true)
           }}
           className="flex items-center gap-2 w-max"
         >
@@ -121,7 +126,7 @@ export default function Components(): ReactElement {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(totalItems / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <BackofficeWrapper title="Dimentorin.dev">
diff --git a/apps/backoffice/src/app/(protected)/settings-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/settings-dimentorin.tsx
similarity index 52%
rename from apps/backoffice/src/app/(protected)/settings-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/settings-dimentorin.tsx
index 7699fe9..af027c3 100644
--- a/apps/backoffice/src/app/(protected)/settings-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/settings-dimentorin.tsx
@@ -1,22 +1,27 @@
-import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms"
-import { cn, For } from "@imphnen-frontend-service/utils"
-import { useState } from "react"
-import { GeneralSettings } from "./_components/general"
-import { UserRolesPermission } from "./_components/user-roles-permission"
-import { NotificationSettings } from "./_components/notification"
-import { SecuritySettings } from "./_components/security"
-import { PaymentSettings } from "./_components/payment"
+import { createFileRoute } from '@tanstack/react-router'
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms'
+import { cn, For } from '@imphnen-frontend-service/utils'
+import { useState } from 'react'
+import { GeneralSettings } from './_components/settings-dimentorin/general'
+import { UserRolesPermission } from './_components/settings-dimentorin/user-roles-permission'
+import { NotificationSettings } from './_components/settings-dimentorin/notification'
+import { SecuritySettings } from './_components/settings-dimentorin/security'
+import { PaymentSettings } from './_components/settings-dimentorin/payment'
 
 const TABS = {
-  general: "General Settings",
-  userRolePermissions: "User Roles & Permissions",
-  notification: "Notification Settings",
-  security: "Security",
-  payment: "Payment",
+  general: 'General Settings',
+  userRolePermissions: 'User Roles & Permissions',
+  notification: 'Notification Settings',
+  security: 'Security',
+  payment: 'Payment',
 } as const
 type Tabs = typeof TABS[keyof typeof TABS]
 
-export default function Components(): React.ReactElement {
+export const Route = createFileRoute('/_authenticated/settings-dimentorin')({
+  component: SettingsDimentorinPage,
+})
+
+function SettingsDimentorinPage(): React.ReactElement {
   const [activeTab, setActiveTab] = useState<Tabs>(TABS.general)
 
   return (
@@ -30,8 +35,8 @@ export default function Components(): React.ReactElement {
               <button
                 key={tab}
                 className={cn(
-                  "px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100",
-                  activeTab === tab && "bg-primary-500 text-white hover:bg-primary-600"
+                  'px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100',
+                  activeTab === tab && 'bg-primary-500 text-white hover:bg-primary-600'
                 )}
                 onClick={() => setActiveTab(tab)}
               >
diff --git a/apps/backoffice/src/app/(protected)/transactions/page.tsx b/apps/backoffice/src/routes/_authenticated/transactions.tsx
similarity index 83%
rename from apps/backoffice/src/app/(protected)/transactions/page.tsx
rename to apps/backoffice/src/routes/_authenticated/transactions.tsx
index 6ea9aa0..d943aee 100644
--- a/apps/backoffice/src/app/(protected)/transactions/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/transactions.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { FC, Fragment, ReactElement, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+import { FC, Fragment, ReactElement, useState } from 'react'
 import {
   FilterOutlined,
   SearchOutlined,
   AuditOutlined,
-} from '@ant-design/icons';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
-
+} from '@ant-design/icons'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -15,16 +15,16 @@ import {
   PaginationState,
   useReactTable,
   RowSelectionState,
-} from '@tanstack/react-table';
-import ModalValidate from './_components/modal-validate';
+} from '@tanstack/react-table'
+import ModalValidate from './_components/transactions/modal-validate'
 
-type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
+type TransactionStatus = 'valid' | 'invalid' | 'unchecked'
 
 interface Transaction {
-  id: number;
-  name: string;
-  transactionNumber: string;
-  status: TransactionStatus;
+  id: number
+  name: string
+  transactionNumber: string
+  status: TransactionStatus
 }
 
 const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
@@ -36,24 +36,28 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
     : i % 5 === 0
     ? 'unchecked'
     : 'valid') as TransactionStatus,
-}));
+}))
 
-export const Components: FC = (): ReactElement => {
-  const [showModalValidate, setShowModalValidate] = useState(false);
+export const Route = createFileRoute('/_authenticated/transactions')({
+  component: TransactionsPage,
+})
+
+function TransactionsPage() {
+  const [showModalValidate, setShowModalValidate] = useState(false)
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [showFilter, setShowFilter] = useState(false);
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const [showFilter, setShowFilter] = useState(false)
 
   const validationOptions = [
     { id: 'option1', value: 'unchecked', label: 'Unchecked' },
     { id: 'option2', value: 'valid', label: 'Valid' },
     { id: 'option3', value: 'invalid', label: 'Invalid' },
-  ];
+  ]
 
   const columns: ColumnDef<Transaction>[] = [
     {
@@ -91,24 +95,24 @@ export const Components: FC = (): ReactElement => {
       header: 'Order Valid?',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const status = row.original.status;
+        const status = row.original.status
         const statusColors: Record<TransactionStatus, string> = {
           valid: 'bg-success-200 text-success-500',
           invalid: 'bg-danger-200 text-danger-500',
           unchecked: 'bg-warning-200 text-warning-900',
-        };
+        }
         const statusText: Record<TransactionStatus, string> = {
           valid: 'Valid',
           invalid: 'Invalid',
           unchecked: 'Unchecked',
-        };
+        }
         return (
           <div
             className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
           >
             {statusText[status]}
           </div>
-        );
+        )
       },
     },
     {
@@ -118,8 +122,8 @@ export const Components: FC = (): ReactElement => {
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setShowModalValidate(true);
+            e.stopPropagation()
+            setShowModalValidate(true)
           }}
           className="flex items-center gap-2 w-full"
         >
@@ -127,7 +131,7 @@ export const Components: FC = (): ReactElement => {
         </Button>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: mockTransactions,
@@ -143,7 +147,7 @@ export const Components: FC = (): ReactElement => {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(mockTransactions.length / pagination.pageSize),
     manualPagination: false,
-  });
+  })
 
   return (
     <Fragment>
@@ -180,7 +184,7 @@ export const Components: FC = (): ReactElement => {
                     options={validationOptions}
                     onClose={() => setShowFilter(false)}
                     onFilterChange={(value) => {
-                      console.log('Selected filter:', value);
+                      console.log('Selected filter:', value)
                     }}
                   />
                 </div>
@@ -195,14 +199,12 @@ export const Components: FC = (): ReactElement => {
         isOpen={showModalValidate}
         onClose={() => setShowModalValidate(false)}
         handleValid={() => {
-          console.log('Action ketika user klik Valid');
+          console.log('Action ketika user klik Valid')
         }}
         handleInvalid={() => {
-          console.log('Action ketika user klik Tidak Valid');
+          console.log('Action ketika user klik Tidak Valid')
         }}
       />
     </Fragment>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx b/apps/backoffice/src/routes/_authenticated/users-dimentorin.tsx
similarity index 84%
rename from apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx
rename to apps/backoffice/src/routes/_authenticated/users-dimentorin.tsx
index d307e77..b1c7268 100644
--- a/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx
+++ b/apps/backoffice/src/routes/_authenticated/users-dimentorin.tsx
@@ -1,10 +1,11 @@
-import { SearchOutlined } from '@ant-design/icons';
-import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
+import { createFileRoute } from '@tanstack/react-router'
+import { SearchOutlined } from '@ant-design/icons'
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms'
 import {
   BackofficeWrapper,
   DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import { cn, For } from '@imphnen-frontend-service/utils';
+} from '@imphnen-frontend-service/ui/organisms'
+import { cn, For } from '@imphnen-frontend-service/utils'
 import {
   ColumnDef,
   getCoreRowModel,
@@ -12,48 +13,52 @@ import {
   PaginationState,
   RowSelectionState,
   useReactTable,
-} from '@tanstack/react-table';
-import { ReactElement, useState } from 'react';
-import { ModalDetailUser } from './_components/modal/detail';
+} from '@tanstack/react-table'
+import { ReactElement, useState } from 'react'
+import { ModalDetailUser } from './_components/users-dimentorin/modal/detail'
 import {
   useMentorList,
   useUserList,
   MentorDetailResponseDto,
   TUsersListItem,
-} from '@imphnen-frontend-service/service';
+} from '@imphnen-frontend-service/service'
 
-export default function Components(): ReactElement {
-  const TABS = ['mentor', 'mentee'] as const;
-  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
-  const [showDetail, setShowDetail] = useState(false);
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-  const [search, setSearch] = useState('');
+export const Route = createFileRoute('/_authenticated/users-dimentorin')({
+  component: UsersDimentorinPage,
+})
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+function UsersDimentorinPage(): ReactElement {
+  const TABS = ['mentor', 'mentee'] as const
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
+  const [showDetail, setShowDetail] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
-  });
+  })
 
   const { data: mentorData, isLoading: mentorLoading } = useMentorList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
+  })
 
   const { data: menteeData, isLoading: menteeLoading } = useUserList({
     search,
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
-  });
+  })
 
-  const mentors: MentorDetailResponseDto[] = mentorData?.data ?? [];
-  const mentees: TUsersListItem[] = menteeData?.data ?? [];
-  const mentorTotal = mentorData?.meta?.total ?? mentors.length;
-  const menteeTotal = menteeData?.meta?.total ?? mentees.length;
+  const mentors: MentorDetailResponseDto[] = mentorData?.data ?? []
+  const mentees: TUsersListItem[] = menteeData?.data ?? []
+  const mentorTotal = mentorData?.meta?.total ?? mentors.length
+  const menteeTotal = menteeData?.meta?.total ?? mentees.length
 
-  const isLoading = activeTab === 'mentor' ? mentorLoading : menteeLoading;
-  const totalItems = activeTab === 'mentor' ? mentorTotal : menteeTotal;
+  const isLoading = activeTab === 'mentor' ? mentorLoading : menteeLoading
+  const totalItems = activeTab === 'mentor' ? mentorTotal : menteeTotal
 
   const mentorColumns: ColumnDef<MentorDetailResponseDto>[] = [
     {
@@ -97,17 +102,17 @@ export default function Components(): ReactElement {
       header: 'Status',
       accessorKey: 'status',
       cell: ({ row }) => {
-        const status = row.original.status;
+        const status = row.original.status
         const statusColors: Record<string, string> = {
           active: 'bg-success-200 text-success-500',
           pending: 'bg-warning-200 text-warning-700',
           inactive: 'bg-danger-200 text-danger-500',
-        };
+        }
         return (
           <div className={`py-2 px-4 rounded-md text-center capitalize ${statusColors[status] ?? 'bg-neutral-200 text-neutral-700'}`}>
             {status}
           </div>
-        );
+        )
       },
     },
     {
@@ -118,9 +123,9 @@ export default function Components(): ReactElement {
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setSelectedUserId(row.original.id);
-            setShowDetail(true);
+            e.stopPropagation()
+            setSelectedUserId(row.original.id)
+            setShowDetail(true)
           }}
           className="flex items-center gap-2 w-max"
         >
@@ -128,7 +133,7 @@ export default function Components(): ReactElement {
         </Button>
       ),
     },
-  ];
+  ]
 
   const menteeColumns: ColumnDef<TUsersListItem>[] = [
     {
@@ -179,9 +184,9 @@ export default function Components(): ReactElement {
           variant="primary"
           size="sm"
           onClick={(e) => {
-            e.stopPropagation();
-            setSelectedUserId(row.original.id);
-            setShowDetail(true);
+            e.stopPropagation()
+            setSelectedUserId(row.original.id)
+            setShowDetail(true)
           }}
           className="flex items-center gap-2 w-max"
         >
@@ -189,7 +194,7 @@ export default function Components(): ReactElement {
         </Button>
       ),
     },
-  ];
+  ]
 
   const mentorTable = useReactTable({
     data: mentors,
@@ -202,7 +207,7 @@ export default function Components(): ReactElement {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(mentorTotal / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   const menteeTable = useReactTable({
     data: mentees,
@@ -215,7 +220,7 @@ export default function Components(): ReactElement {
     onPaginationChange: setPagination,
     pageCount: Math.ceil(menteeTotal / pagination.pageSize),
     manualPagination: true,
-  });
+  })
 
   return (
     <BackofficeWrapper title="Dimentorin.dev">
@@ -234,8 +239,8 @@ export default function Components(): ReactElement {
                   activeTab === tab && 'bg-white'
                 )}
                 onClick={() => {
-                  setActiveTab(tab);
-                  setPagination((p) => ({ ...p, pageIndex: 0 }));
+                  setActiveTab(tab)
+                  setPagination((p) => ({ ...p, pageIndex: 0 }))
                 }}
               >
                 {tab}
@@ -275,5 +280,5 @@ export default function Components(): ReactElement {
         userId={selectedUserId}
       />
     </BackofficeWrapper>
-  );
+  )
 }
diff --git a/apps/backoffice/src/routes/_public.tsx b/apps/backoffice/src/routes/_public.tsx
new file mode 100644
index 0000000..877372e
--- /dev/null
+++ b/apps/backoffice/src/routes/_public.tsx
@@ -0,0 +1,20 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+
+export const Route = createFileRoute('/_public')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/hackathon-dashboard' })
+    }
+  },
+  component: PublicLayout,
+})
+
+function PublicLayout() {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  )
+}
diff --git a/apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts b/apps/backoffice/src/routes/_public/auth/_hooks/use-login.ts
similarity index 89%
rename from apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts
rename to apps/backoffice/src/routes/_public/auth/_hooks/use-login.ts
index e5a4a01..930e038 100644
--- a/apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts
+++ b/apps/backoffice/src/routes/_public/auth/_hooks/use-login.ts
@@ -5,7 +5,7 @@ import {
   useBackofficeLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useNavigate } from 'react-router';
+import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 
 export const useLogin = () => {
@@ -25,7 +25,7 @@ export const useLogin = () => {
     try {
       await loginMutation.mutateAsync(data);
       toast.success('Login berhasil!');
-      navigate('/hackathon-dashboard');
+      navigate({ to: '/hackathon-dashboard' });
     } catch (error) {
       console.error('[Backoffice Login] Error:', error);
       toast.error((error as Error).message || 'Login gagal');
diff --git a/apps/backoffice/src/app/(public)/auth/login/page.tsx b/apps/backoffice/src/routes/_public/auth/login.tsx
similarity index 81%
rename from apps/backoffice/src/app/(public)/auth/login/page.tsx
rename to apps/backoffice/src/routes/_public/auth/login.tsx
index 0c3b03a..bf23176 100644
--- a/apps/backoffice/src/app/(public)/auth/login/page.tsx
+++ b/apps/backoffice/src/routes/_public/auth/login.tsx
@@ -1,33 +1,38 @@
-import { useState } from 'react';
-import { useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service'
+import { useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
 
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const loginMutation = useLogin();
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+export const Route = createFileRoute('/_public/auth/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const navigate = useNavigate()
+  const loginMutation = useLogin()
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'onChange',
     defaultValues: { email: '', password: '' },
-  });
+  })
 
   const onSubmit = handleSubmit(async (data) => {
-    setError(null);
+    setError(null)
     try {
-      await loginMutation.mutateAsync(data);
-      toast.success('Login successful!');
-      navigate('/');
+      await loginMutation.mutateAsync(data)
+      toast.success('Login successful!')
+      navigate({ to: '/' })
     } catch (err) {
-      setError((err as Error).message || 'Login failed');
+      setError((err as Error).message || 'Login failed')
     }
-  });
+  })
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
@@ -89,5 +94,5 @@ export default function LoginPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/backoffice/src/routes/index.tsx b/apps/backoffice/src/routes/index.tsx
new file mode 100644
index 0000000..20cb2a2
--- /dev/null
+++ b/apps/backoffice/src/routes/index.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/hackathon-dashboard' })
+    }
+    throw redirect({ to: '/auth/login' })
+  },
+})
diff --git a/apps/backoffice/vite.config.ts b/apps/backoffice/vite.config.ts
index e54704f..ad58ed3 100644
--- a/apps/backoffice/vite.config.ts
+++ b/apps/backoffice/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3001,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/backoffice',
     emptyOutDir: true,
diff --git a/apps/dimentorin/src/app/(public)/(home)/page.tsx b/apps/dimentorin/src/app/(public)/(home)/page.tsx
deleted file mode 100644
index 87b0dee..0000000
--- a/apps/dimentorin/src/app/(public)/(home)/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { HeroSection } from './_components/hero-section';
-import { WhatWeOfferSection } from './_components/what-we-offer-section';
-import { TestimonialSection } from './_components/testimonial-section';
-import { FAQSection } from './_components/faq-section';
-import { CTASection } from './_components/cta-section';
-
-export const Components: FC = (): ReactElement => {
-  return (
-    <>
-      <HeroSection />
-      <WhatWeOfferSection />
-      <TestimonialSection />
-      <FAQSection />
-      <CTASection />
-    </>
-  );
-};
-
-export default Components;
diff --git a/apps/dimentorin/src/app/(public)/layout.tsx b/apps/dimentorin/src/app/(public)/layout.tsx
deleted file mode 100644
index 5e12f2a..0000000
--- a/apps/dimentorin/src/app/(public)/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { Header } from "./_components/header";
-import { Footer } from "./_components/footer";
-
-export default function Layout() {
-  return (
-    <div className="flex min-h-screen flex-col bg-primary-50">
-      <Header />
-      <main className="flex-1">
-        <Outlet />
-      </main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/apps/dimentorin/src/app/(public)/resources/page.tsx b/apps/dimentorin/src/app/(public)/resources/page.tsx
deleted file mode 100644
index 52c95a9..0000000
--- a/apps/dimentorin/src/app/(public)/resources/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactElement } from "react";
-import { Contribute } from "./_components/contribute";
-import { WorkWithUs } from "./_components/work-with-us";
-import { Collaborate } from "./_components/collaborate";
-
-export default function Components(): ReactElement {
-  return (
-    <main>
-      <Contribute />
-      <WorkWithUs />
-      <Collaborate />
-    </main>
-  )
-}
diff --git a/apps/dimentorin/src/app/auth/forgot/layout.tsx b/apps/dimentorin/src/app/auth/forgot/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/forgot/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/forgot/otp/layout.tsx b/apps/dimentorin/src/app/auth/forgot/otp/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/forgot/otp/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/forgot/summon/layout.tsx b/apps/dimentorin/src/app/auth/forgot/summon/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/forgot/summon/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/google-callback/page.tsx b/apps/dimentorin/src/app/auth/google-callback/page.tsx
deleted file mode 100644
index 12c4c16..0000000
--- a/apps/dimentorin/src/app/auth/google-callback/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { FC, ReactElement, useEffect } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useGoogleCallback, useAuthStore } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-export const GoogleCallbackPage: FC = (): ReactElement => {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const { setSession, clearSession } = useAuthStore();
-  const { mutate: googleCallback } = useGoogleCallback();
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      const code = searchParams.get('code');
-      const state = searchParams.get('state');
-      const error = searchParams.get('error');
-
-      if (error) {
-        toast.error('Google login dibatalkan atau terjadi kesalahan');
-        navigate('/auth/login');
-        return;
-      }
-
-      if (!code || !state) {
-        toast.error('Parameter login Google tidak valid');
-        navigate('/auth/login');
-        return;
-      }
-
-      try {
-        googleCallback(
-          { code, state },
-          {
-            onSuccess: (response) => {
-              if (response.token && response.user) {
-                setSession({
-                  token: response.token,
-                  user: response.user,
-                });
-                toast.success('Login Google berhasil!');
-                navigate('/dashboard');
-              } else {
-                throw new Error('Response data tidak valid');
-              }
-            },
-            onError: (error) => {
-              console.error('Google OAuth callback error:', error);
-              toast.error('Login Google gagal');
-              clearSession();
-              navigate('/auth/login');
-            },
-          }
-        );
-      } catch (error) {
-        console.error('Google OAuth callback error:', error);
-        toast.error('Login Google gagal');
-        clearSession();
-        navigate('/auth/login');
-      }
-    };
-
-    handleCallback();
-  }, [searchParams, navigate, setSession, clearSession, googleCallback]);
-
-  return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-500 mx-auto mb-4"></div>
-        <h2 className="text-2xl font-semibold text-primary-500 mb-2">
-          Menyelesaikan Login Google...
-        </h2>
-        <p className="text-gray-600">
-          Mohon tunggu sebentar, kami sedang memproses login Anda.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default GoogleCallbackPage;
diff --git a/apps/dimentorin/src/app/auth/login/layout.tsx b/apps/dimentorin/src/app/auth/login/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/login/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register-mentor/layout.tsx b/apps/dimentorin/src/app/auth/register-mentor/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register-mentor/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register-mentor/pending/layout.tsx b/apps/dimentorin/src/app/auth/register-mentor/pending/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register-mentor/pending/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register-mentor/success/layout.tsx b/apps/dimentorin/src/app/auth/register-mentor/success/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register-mentor/success/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register/layout.tsx b/apps/dimentorin/src/app/auth/register/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register/otp/layout.tsx b/apps/dimentorin/src/app/auth/register/otp/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register/otp/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/auth/register/success/layout.tsx b/apps/dimentorin/src/app/auth/register/success/layout.tsx
deleted file mode 100644
index 2d8a74d..0000000
--- a/apps/dimentorin/src/app/auth/register/success/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <main className="bg-primary-50 min-h-screen">
-      <Outlet />
-    </main>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/dimentorin/src/app/layout.tsx b/apps/dimentorin/src/app/layout.tsx
deleted file mode 100644
index bc85aa9..0000000
--- a/apps/dimentorin/src/app/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Outlet, ScrollRestoration } from "react-router-dom";
-
-export default function RootLayout() {
-  return (
-    <>
-      <Outlet />
-      <ScrollRestoration />
-    </>
-  )
-}
\ No newline at end of file
diff --git a/apps/dimentorin/src/main.tsx b/apps/dimentorin/src/main.tsx
index 5120810..39288b5 100644
--- a/apps/dimentorin/src/main.tsx
+++ b/apps/dimentorin/src/main.tsx
@@ -1,37 +1,22 @@
-import { createRoot } from 'react-dom/client';
-import { middleware } from './middleware';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
-import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
-  ModalLoginProvider,
-  QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { ModalLoginProvider, QueryProvider } from '@imphnen-frontend-service/utils'
+import { Toaster } from 'sonner'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+const router = createRouter({ routeTree })
 
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
-const router = createBrowserRouter([
-  {
-    ...routes,
-    loader: middleware,
-    shouldRevalidate: () => true,
-  },
-]);
+const rootElement = document.getElementById('root')
 
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
@@ -42,5 +27,4 @@ createRoot(rootElement).render(
       </ModalLoginProvider>
     </QueryProvider>
   </StrictMode>
-);
-// force deploy
+)
diff --git a/apps/dimentorin/src/middleware.ts b/apps/dimentorin/src/middleware.ts
deleted file mode 100644
index 0d99b36..0000000
--- a/apps/dimentorin/src/middleware.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
-  PERMISSIONS,
-  SessionToken,
-  SessionUser,
-} from '@imphnen-frontend-service/service';
-import { LoaderFunctionArgs, redirect } from 'react-router';
-
-const mappingPublicRoutes = [
-  '/',
-  '/auth/login',
-  '/auth/forgot',
-  '/auth/forgot/otp',
-  '/auth/register',
-  '/auth/register/otp',
-  '/auth/register/success',
-  '/auth/new-password',
-  '/auth/register-mentor',
-  '/auth/register-mentor/pending',
-  '/auth/register-mentor/success',
-  '/auth/google-callback',
-  '/auth/google-oauth-popup',
-  '/resources',
-];const mappingRoutePermissions = [
-  {
-    path: '/dashboard',
-    permissions: [],
-  },
-  {
-    path: '/users',
-    permissions: [PERMISSIONS.USERS.READ_LIST],
-  },
-  {
-    path: '/users/create',
-    permissions: [PERMISSIONS.USERS.CREATE],
-  },
-  {
-    path: '/users/update',
-    permissions: [PERMISSIONS.USERS.UPDATE],
-  },
-  {
-    path: '/users/detail',
-    permissions: [PERMISSIONS.USERS.READ_DETAIL],
-  },
-  {
-    path: '/roles',
-    permissions: [PERMISSIONS.ROLES.READ_LIST],
-  },
-  {
-    path: '/roles/create',
-    permissions: [PERMISSIONS.ROLES.CREATE],
-  },
-  {
-    path: '/roles/update',
-    permissions: [PERMISSIONS.ROLES.UPDATE],
-  },
-  {
-    path: '/roles/detail',
-    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
-  },
-  {
-    path: '/permissions',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
-  },
-  {
-    path: '/permissions/create',
-    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
-  },
-  {
-    path: '/permissions/update',
-    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
-  },
-  {
-    path: '/permissions/detail',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
-  },
-];
-
-const mappingPublicPrefixRoutes = [
-  '/mentoring',
-  '/articles',
-]
-
-export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-  const session = SessionUser.get();
-  const session_token = SessionToken.get();
-  const token = session_token?.token?.access_token;
-  const userPermissions =
-    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
-    return null;
-  }
-
-  if (mappingPublicRoutes.includes(pathname)) {
-    if (token) return redirect('/dashboard');
-    return null;
-  }
-
-  if (!session) return redirect('/auth/login');
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return '/dashboard';
-    }
-  }
-
-  return null;
-};
diff --git a/apps/dimentorin/src/routeTree.gen.ts b/apps/dimentorin/src/routeTree.gen.ts
new file mode 100644
index 0000000..00d81b9
--- /dev/null
+++ b/apps/dimentorin/src/routeTree.gen.ts
@@ -0,0 +1,25 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+
+// Create/Update Routes
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {}
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute
diff --git a/apps/dimentorin/src/routes/__root.tsx b/apps/dimentorin/src/routes/__root.tsx
new file mode 100644
index 0000000..b0209d6
--- /dev/null
+++ b/apps/dimentorin/src/routes/__root.tsx
@@ -0,0 +1,10 @@
+import { createRootRoute, Outlet, ScrollRestoration } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <ScrollRestoration />
+    </>
+  ),
+})
diff --git a/apps/dimentorin/src/routes/_authenticated.tsx b/apps/dimentorin/src/routes/_authenticated.tsx
new file mode 100644
index 0000000..ccce983
--- /dev/null
+++ b/apps/dimentorin/src/routes/_authenticated.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (!session?.token?.access_token) {
+      throw redirect({ to: '/auth/login' })
+    }
+  },
+  component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+  return <Outlet />
+}
diff --git a/apps/dimentorin/src/app/dashboard/layout.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard.tsx
similarity index 81%
rename from apps/dimentorin/src/app/dashboard/layout.tsx
rename to apps/dimentorin/src/routes/_authenticated/dashboard.tsx
index ca6234b..88ef5e9 100644
--- a/apps/dimentorin/src/app/dashboard/layout.tsx
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard.tsx
@@ -1,21 +1,20 @@
-import { Outlet, Link, useLocation, useNavigate } from 'react-router';
-import { useAuthStore } from '@imphnen-frontend-service/service';
-import { Icon } from '@iconify/react';
-import { useEffect } from 'react';
+import { createFileRoute, Outlet, Link, useLocation, useNavigate } from '@tanstack/react-router'
+import { useAuthStore } from '@imphnen-frontend-service/service'
+import { Icon } from '@iconify/react'
 
 const navItems = [
   { path: '/dashboard', label: 'Dashboard', icon: 'mdi:view-dashboard' },
   { path: '/dashboard/settings', label: 'Settings', icon: 'mdi:cog' },
-];
+]
 
-export default function DashboardLayout() {
-  const { session, clearSession } = useAuthStore();
-  const location = useLocation();
-  const navigate = useNavigate();
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardLayout,
+})
 
-  useEffect(() => {
-    if (!session?.token) navigate('/auth/login');
-  }, [session, navigate]);
+function DashboardLayout() {
+  const { session, clearSession } = useAuthStore()
+  const location = useLocation()
+  const navigate = useNavigate()
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
@@ -48,7 +47,7 @@ export default function DashboardLayout() {
                 {session?.user?.fullname || session?.user?.email}
               </span>
               <button
-                onClick={() => { clearSession(); navigate('/auth/login'); }}
+                onClick={() => { clearSession(); navigate({ to: '/auth/login' }) }}
                 className="text-sm text-red-500 hover:text-red-600 cursor-pointer flex items-center gap-1"
               >
                 <Icon icon="mdi:logout" width="18" />
@@ -62,5 +61,5 @@ export default function DashboardLayout() {
         <Outlet />
       </main>
     </div>
-  );
+  )
 }
diff --git a/apps/dimentorin/src/app/dashboard/page.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard_/index.tsx
similarity index 93%
rename from apps/dimentorin/src/app/dashboard/page.tsx
rename to apps/dimentorin/src/routes/_authenticated/dashboard_/index.tsx
index a47db30..69baf64 100644
--- a/apps/dimentorin/src/app/dashboard/page.tsx
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard_/index.tsx
@@ -1,28 +1,32 @@
-import { Link } from 'react-router';
+import { createFileRoute, Link } from '@tanstack/react-router'
 import {
   useAuthStore,
   useSessionQuery,
   useMySessions,
   useMentorMe,
-} from '@imphnen-frontend-service/service';
-import { Icon } from '@iconify/react';
+} from '@imphnen-frontend-service/service'
+import { Icon } from '@iconify/react'
 
-export default function DashboardPage() {
-  const { session } = useAuthStore();
-  const { data: meData } = useSessionQuery(['mentor', 'sessions']);
-  const { data: sessionsData } = useMySessions();
-  const { data: mentorData } = useMentorMe();
+export const Route = createFileRoute('/_authenticated/dashboard/')({
+  component: DashboardIndexPage,
+})
 
-  const user = session?.user;
-  const mentor = meData?.user?.mentor;
-  const sessions = sessionsData?.data || [];
+function DashboardIndexPage() {
+  const { session } = useAuthStore()
+  const { data: meData } = useSessionQuery(['mentor', 'sessions'])
+  const { data: sessionsData } = useMySessions()
+  const { data: mentorData } = useMentorMe()
+
+  const user = session?.user
+  const mentor = meData?.user?.mentor
+  const sessions = sessionsData?.data || []
 
   const upcomingSessions = sessions.filter(
     (s: { status: string }) => s.status === 'confirmed' || s.status === 'pending'
-  );
+  )
   const completedSessions = sessions.filter(
     (s: { status: string }) => s.status === 'completed'
-  );
+  )
 
   return (
     <div>
@@ -169,5 +173,5 @@ export default function DashboardPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/dimentorin/src/app/dashboard/settings/page.tsx b/apps/dimentorin/src/routes/_authenticated/dashboard_/settings.tsx
similarity index 95%
rename from apps/dimentorin/src/app/dashboard/settings/page.tsx
rename to apps/dimentorin/src/routes/_authenticated/dashboard_/settings.tsx
index 7974260..a55d81b 100644
--- a/apps/dimentorin/src/app/dashboard/settings/page.tsx
+++ b/apps/dimentorin/src/routes/_authenticated/dashboard_/settings.tsx
@@ -1,12 +1,13 @@
-import { useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
 import {
   useAuthStore,
   useSessionQuery,
-} from '@imphnen-frontend-service/service';
-import { Icon } from '@iconify/react';
-import { toast } from 'sonner';
+} from '@imphnen-frontend-service/service'
+import { Icon } from '@iconify/react'
+import { toast } from 'sonner'
 
-type SettingsSection = 'account' | 'privacy' | 'preferences' | 'faq';
+type SettingsSection = 'account' | 'privacy' | 'preferences' | 'faq'
 
 const faqItems = [
   { q: 'How do I book a mentoring session?', a: 'Browse available mentors, select one, and click "Book Session" to schedule a meeting.' },
@@ -14,22 +15,26 @@ const faqItems = [
   { q: 'Can I cancel a session?', a: 'Yes, you can cancel a pending or confirmed session from your dashboard before the scheduled time.' },
   { q: 'How do I update my profile?', a: 'Go to Settings > Account Details to update your personal information.' },
   { q: 'Is my data secure?', a: 'Yes, we use encryption and secure protocols to protect your data. See our Privacy Policy for details.' },
-];
+]
 
-export default function SettingsPage() {
-  const { session } = useAuthStore();
-  const { data: meData } = useSessionQuery();
-  const [activeSection, setActiveSection] = useState<SettingsSection>('account');
-  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);
+export const Route = createFileRoute('/_authenticated/dashboard/settings')({
+  component: SettingsPage,
+})
 
-  const user = session?.user;
+function SettingsPage() {
+  const { session } = useAuthStore()
+  const { data: meData } = useSessionQuery()
+  const [activeSection, setActiveSection] = useState<SettingsSection>('account')
+  const [expandedFaq, setExpandedFaq] = useState<number | null>(null)
+
+  const user = session?.user
 
   const sections = [
     { id: 'account' as const, label: 'Account Details', icon: 'mdi:account-circle' },
     { id: 'privacy' as const, label: 'Privacy & Security', icon: 'mdi:shield-lock' },
     { id: 'preferences' as const, label: 'Preferences', icon: 'mdi:tune' },
     { id: 'faq' as const, label: 'FAQ & Support', icon: 'mdi:help-circle' },
-  ];
+  ]
 
   return (
     <div>
@@ -181,5 +186,5 @@ export default function SettingsPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/dimentorin/src/app/_components/icons/index.ts b/apps/dimentorin/src/routes/_components/icons/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/_components/icons/index.ts
rename to apps/dimentorin/src/routes/_components/icons/index.ts
diff --git a/apps/dimentorin/src/app/_components/icons/steam.tsx b/apps/dimentorin/src/routes/_components/icons/steam.tsx
similarity index 100%
rename from apps/dimentorin/src/app/_components/icons/steam.tsx
rename to apps/dimentorin/src/routes/_components/icons/steam.tsx
diff --git a/apps/dimentorin/src/app/_hooks/use-google-login.ts b/apps/dimentorin/src/routes/_hooks/use-google-login.ts
similarity index 96%
rename from apps/dimentorin/src/app/_hooks/use-google-login.ts
rename to apps/dimentorin/src/routes/_hooks/use-google-login.ts
index 446e6a8..a187976 100644
--- a/apps/dimentorin/src/app/_hooks/use-google-login.ts
+++ b/apps/dimentorin/src/routes/_hooks/use-google-login.ts
@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '@imphnen-frontend-service/service';
 
 export interface GoogleLoginResponse {
@@ -38,7 +37,6 @@ export interface GoogleLoginResponse {
 }
 
 export const useGoogleLogin = () => {
-  const navigate = useNavigate();
   const { setSession } = useAuthStore();
 
   const handleGoogleLogin = useCallback(async () => {
@@ -105,7 +103,7 @@ export const useGoogleLogin = () => {
             });
 
             toast.success('Login berhasil!');
-            navigate(0);
+            window.location.reload();
           } else {
             toast.error('Data login tidak lengkap');
           }
@@ -129,7 +127,7 @@ export const useGoogleLogin = () => {
       console.error('Google login error:', error);
       toast.error('Terjadi kesalahan saat login dengan Google');
     }
-  }, [navigate, setSession]);
+  }, [setSession]);
 
   return {
     handleGoogleLogin,
diff --git a/apps/dimentorin/src/app/_hooks/use-login.ts b/apps/dimentorin/src/routes/_hooks/use-login.ts
similarity index 100%
rename from apps/dimentorin/src/app/_hooks/use-login.ts
rename to apps/dimentorin/src/routes/_hooks/use-login.ts
diff --git a/apps/dimentorin/src/app/_hooks/use-otp.ts b/apps/dimentorin/src/routes/_hooks/use-otp.ts
similarity index 100%
rename from apps/dimentorin/src/app/_hooks/use-otp.ts
rename to apps/dimentorin/src/routes/_hooks/use-otp.ts
diff --git a/apps/dimentorin/src/app/_hooks/use-register.ts b/apps/dimentorin/src/routes/_hooks/use-register.ts
similarity index 100%
rename from apps/dimentorin/src/app/_hooks/use-register.ts
rename to apps/dimentorin/src/routes/_hooks/use-register.ts
diff --git a/apps/dimentorin/src/app/_hooks/use-resend-otp.ts b/apps/dimentorin/src/routes/_hooks/use-resend-otp.ts
similarity index 100%
rename from apps/dimentorin/src/app/_hooks/use-resend-otp.ts
rename to apps/dimentorin/src/routes/_hooks/use-resend-otp.ts
diff --git a/apps/dimentorin/src/routes/_public.tsx b/apps/dimentorin/src/routes/_public.tsx
new file mode 100644
index 0000000..6e2e1e9
--- /dev/null
+++ b/apps/dimentorin/src/routes/_public.tsx
@@ -0,0 +1,20 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+
+export const Route = createFileRoute('/_public')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/dashboard' })
+    }
+  },
+  component: PublicLayout,
+})
+
+function PublicLayout() {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/forgot/page.tsx b/apps/dimentorin/src/routes/_public/auth/forgot.tsx
similarity index 71%
rename from apps/dimentorin/src/app/auth/forgot/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/forgot.tsx
index 31e9668..6fa127c 100644
--- a/apps/dimentorin/src/app/auth/forgot/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/forgot.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
-import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { ForgotStep } from '@imphnen-frontend-service/ui/molecules'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/forgot')({
+  component: ForgotPasswordPage,
+})
+
+function ForgotPasswordPage(): ReactElement {
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
       <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
@@ -18,7 +23,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
\ No newline at end of file
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/forgot/otp/page.tsx b/apps/dimentorin/src/routes/_public/auth/forgot_/otp.tsx
similarity index 61%
rename from apps/dimentorin/src/app/auth/forgot/otp/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/forgot_/otp.tsx
index 99d2daf..5998f87 100644
--- a/apps/dimentorin/src/app/auth/forgot/otp/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/forgot_/otp.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
-import { ForgotStep, OtpForm } from "@imphnen-frontend-service/ui/molecules";
-import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { ForgotStep, OtpForm } from '@imphnen-frontend-service/ui/molecules'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/forgot/otp')({
+  component: ForgotOtpPage,
+})
+
+function ForgotOtpPage(): ReactElement {
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
       <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
@@ -17,7 +22,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
\ No newline at end of file
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx b/apps/dimentorin/src/routes/_public/auth/forgot_/summon.tsx
similarity index 78%
rename from apps/dimentorin/src/app/auth/forgot/summon/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/forgot_/summon.tsx
index 913a04f..9b815ea 100644
--- a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/forgot_/summon.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement } from 'react';
-import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
-import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { ForgotStep } from '@imphnen-frontend-service/ui/molecules'
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/forgot/summon')({
+  component: ForgotSummonPage,
+})
+
+function ForgotSummonPage(): ReactElement {
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
       <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
@@ -20,15 +25,13 @@ export const Components: FC = (): ReactElement => {
           </div>
           <div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
             <h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
-            <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>  
-            <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>  
+            <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>
+            <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>
             <h6>Masukkan password baru dan bersiaplah untuk kembali bertualang!</h6>
           </div>
           <Button className='mt-5'>Summon Password Baru!</Button>
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
\ No newline at end of file
+  )
+}
diff --git a/apps/dimentorin/src/routes/_public/auth/google-callback.tsx b/apps/dimentorin/src/routes/_public/auth/google-callback.tsx
new file mode 100644
index 0000000..6c8f31f
--- /dev/null
+++ b/apps/dimentorin/src/routes/_public/auth/google-callback.tsx
@@ -0,0 +1,83 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect } from 'react'
+import { useGoogleCallback, useAuthStore } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/_public/auth/google-callback')({
+  validateSearch: (search: Record<string, unknown>) => ({
+    code: (search.code as string) || '',
+    state: (search.state as string) || '',
+    error: (search.error as string) || '',
+  }),
+  component: GoogleCallbackPage,
+})
+
+function GoogleCallbackPage(): ReactElement {
+  const { code, state, error: errorParam } = Route.useSearch()
+  const navigate = useNavigate()
+  const { setSession, clearSession } = useAuthStore()
+  const { mutate: googleCallback } = useGoogleCallback()
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      if (errorParam) {
+        toast.error('Google login dibatalkan atau terjadi kesalahan')
+        navigate({ to: '/auth/login' })
+        return
+      }
+
+      if (!code || !state) {
+        toast.error('Parameter login Google tidak valid')
+        navigate({ to: '/auth/login' })
+        return
+      }
+
+      try {
+        googleCallback(
+          { code, state },
+          {
+            onSuccess: (response) => {
+              if (response.token && response.user) {
+                setSession({
+                  token: response.token,
+                  user: response.user,
+                })
+                toast.success('Login Google berhasil!')
+                navigate({ to: '/dashboard' })
+              } else {
+                throw new Error('Response data tidak valid')
+              }
+            },
+            onError: (error) => {
+              console.error('Google OAuth callback error:', error)
+              toast.error('Login Google gagal')
+              clearSession()
+              navigate({ to: '/auth/login' })
+            },
+          }
+        )
+      } catch (error) {
+        console.error('Google OAuth callback error:', error)
+        toast.error('Login Google gagal')
+        clearSession()
+        navigate({ to: '/auth/login' })
+      }
+    }
+
+    handleCallback()
+  }, [code, state, errorParam, navigate, setSession, clearSession, googleCallback])
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-500 mx-auto mb-4"></div>
+        <h2 className="text-2xl font-semibold text-primary-500 mb-2">
+          Menyelesaikan Login Google...
+        </h2>
+        <p className="text-gray-600">
+          Mohon tunggu sebentar, kami sedang memproses login Anda.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/google-oauth-popup/page.tsx b/apps/dimentorin/src/routes/_public/auth/google-oauth-popup.tsx
similarity index 62%
rename from apps/dimentorin/src/app/auth/google-oauth-popup/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/google-oauth-popup.tsx
index a3f76fa..615a709 100644
--- a/apps/dimentorin/src/app/auth/google-oauth-popup/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/google-oauth-popup.tsx
@@ -1,35 +1,40 @@
-import { FC, ReactElement, useEffect } from 'react';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect } from 'react'
 
-let globalIsProcessed = false;
+let globalIsProcessed = false
 
-export const GoogleOAuthPopupPage: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/google-oauth-popup')({
+  component: GoogleOAuthPopupPage,
+})
+
+function GoogleOAuthPopupPage(): ReactElement {
 
   useEffect(() => {
     if (globalIsProcessed) {
-      return;
+      return
     }
 
     const callBackend = async (code: string, state: string) => {
       if (globalIsProcessed) {
-        return;
+        return
       }
 
-      globalIsProcessed = true;
+      globalIsProcessed = true
 
       try {
-        const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:4099';
-        let callbackUrl;
+        const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:4099'
+        let callbackUrl
 
         if (baseUrl.endsWith('/v1')) {
-          callbackUrl = `${baseUrl}/auth/google/callback`;
+          callbackUrl = `${baseUrl}/auth/google/callback`
         } else {
-          callbackUrl = `${baseUrl}/v1/auth/google/callback`;
+          callbackUrl = `${baseUrl}/v1/auth/google/callback`
         }
 
-        const url = new URL(callbackUrl);
-        url.searchParams.append('code', code);
-        url.searchParams.append('state', state);
-        url.searchParams.append('redirect_uri', `${window.location.origin}/auth/google-oauth-popup`);
+        const url = new URL(callbackUrl)
+        url.searchParams.append('code', code)
+        url.searchParams.append('state', state)
+        url.searchParams.append('redirect_uri', `${window.location.origin}/auth/google-oauth-popup`)
 
         const response = await fetch(url.toString(), {
           method: 'GET',
@@ -39,14 +44,14 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
           },
           mode: 'cors',
           credentials: 'omit',
-        });
+        })
 
         if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(`HTTP ${response.status}: ${response.statusText} - ${errorText}`);
+          const errorText = await response.text()
+          throw new Error(`HTTP ${response.status}: ${response.statusText} - ${errorText}`)
         }
 
-        const data = await response.json();
+        const data = await response.json()
 
         window.opener?.postMessage(
           {
@@ -54,11 +59,11 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
             payload: data,
           },
           window.location.origin
-        );
-        window.close();
+        )
+        window.close()
 
       } catch (error) {
-        globalIsProcessed = false;
+        globalIsProcessed = false
 
         window.opener?.postMessage(
           {
@@ -66,41 +71,41 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
             error: `Failed to process OAuth callback: ${error instanceof Error ? error.message : String(error)}`,
           },
           window.location.origin
-        );
-        window.close();
+        )
+        window.close()
       }
-    };
+    }
 
     const handleOAuthResponse = () => {
-      const isPopup = window.opener && window.opener !== window;
+      const isPopup = window.opener && window.opener !== window
 
       const detectJsonResponse = () => {
         try {
-          const bodyText = document.body.innerText || document.body.textContent || '';
-          const trimmedText = bodyText.trim();
+          const bodyText = document.body.innerText || document.body.textContent || ''
+          const trimmedText = bodyText.trim()
 
           if (trimmedText.startsWith('{') && trimmedText.endsWith('}')) {
-            const parsedJson = JSON.parse(trimmedText);
+            const parsedJson = JSON.parse(trimmedText)
 
             if (parsedJson && typeof parsedJson === 'object') {
-              const hasAccessToken = parsedJson.access_token || parsedJson.token || parsedJson.accessToken;
+              const hasAccessToken = parsedJson.access_token || parsedJson.token || parsedJson.accessToken
 
               if (hasAccessToken) {
-                return parsedJson;
+                return parsedJson
               }
             }
           }
         } catch {
-          return null;
+          return null
         }
-        return null;
-      };
+        return null
+      }
 
       const checkOAuthParams = () => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const code = urlParams.get('code');
-        const state = urlParams.get('state');
-        const error = urlParams.get('error');
+        const urlParams = new URLSearchParams(window.location.search)
+        const code = urlParams.get('code')
+        const state = urlParams.get('state')
+        const error = urlParams.get('error')
 
         if (error) {
           if (isPopup) {
@@ -110,23 +115,23 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
                 error: error,
               },
               window.location.origin
-            );
-            window.close();
+            )
+            window.close()
           }
-          return true;
+          return true
         }
 
         if (code && state) {
           if (isPopup) {
-            callBackend(code, state);
+            callBackend(code, state)
           }
-          return true;
+          return true
         }
 
-        return false;
-      };
+        return false
+      }
 
-      const immediateJson = detectJsonResponse();
+      const immediateJson = detectJsonResponse()
       if (immediateJson && isPopup) {
         window.opener?.postMessage(
           {
@@ -134,21 +139,21 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
             payload: immediateJson,
           },
           window.location.origin
-        );
-        window.close();
-        return;
+        )
+        window.close()
+        return
       }
 
       if (checkOAuthParams()) {
-        return;
+        return
       }
 
-      let attempts = 0;
-      const maxAttempts = 50;
+      let attempts = 0
+      const maxAttempts = 50
 
       const checkForJson = () => {
-        attempts++;
-        const jsonResponse = detectJsonResponse();
+        attempts++
+        const jsonResponse = detectJsonResponse()
 
         if (jsonResponse && isPopup) {
           window.opener?.postMessage(
@@ -157,13 +162,13 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
               payload: jsonResponse,
             },
             window.location.origin
-          );
-          window.close();
-          return;
+          )
+          window.close()
+          return
         }
 
         if (attempts < maxAttempts) {
-          setTimeout(checkForJson, 500);
+          setTimeout(checkForJson, 500)
         } else if (isPopup) {
           window.opener?.postMessage(
             {
@@ -171,16 +176,16 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
               error: 'Timeout waiting for response',
             },
             window.location.origin
-          );
-          window.close();
+          )
+          window.close()
         }
-      };
+      }
 
-      setTimeout(checkForJson, 1000);
-    };
+      setTimeout(checkForJson, 1000)
+    }
 
-    setTimeout(handleOAuthResponse, 100);
-  }, []);
+    setTimeout(handleOAuthResponse, 100)
+  }, [])
 
   return (
     <div className="flex items-center justify-center min-h-screen">
@@ -194,7 +199,5 @@ export const GoogleOAuthPopupPage: FC = (): ReactElement => {
         </p>
       </div>
     </div>
-  );
-};
-
-export default GoogleOAuthPopupPage;
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/login/page.tsx b/apps/dimentorin/src/routes/_public/auth/login.tsx
similarity index 74%
rename from apps/dimentorin/src/app/auth/login/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/login.tsx
index fe78e61..23f660a 100644
--- a/apps/dimentorin/src/app/auth/login/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/login.tsx
@@ -1,68 +1,72 @@
-import { useState, useEffect } from 'react';
-import { useGitHubAuth, useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { useGitHubAuth, useLogin, authLoginSchema, TLoginRequest } from '@imphnen-frontend-service/service'
+import { GithubOutlined } from '@ant-design/icons'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
 
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const loginMutation = useLogin();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
+export const Route = createFileRoute('/_public/auth/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const navigate = useNavigate()
+  const { signInWithGitHub } = useGitHubAuth()
+  const loginMutation = useLogin()
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
 
   const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'onChange',
     defaultValues: { email: '', password: '' },
-  });
+  })
 
   useEffect(() => {
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const urlParams = new URLSearchParams(globalThis.location.search);
-    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-    const type = hashParams.get('type') || urlParams.get('type');
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1))
+    const urlParams = new URLSearchParams(globalThis.location.search)
+    const accessToken = hashParams.get('access_token') || urlParams.get('access_token')
+    const type = hashParams.get('type') || urlParams.get('type')
     if (accessToken && (type === 'recovery' || type === 'magiclink' || !type)) {
-      toast.info('Redirecting to password reset...');
-      navigate('/auth/reset-password?access_token=' + accessToken);
+      toast.info('Redirecting to password reset...')
+      navigate({ to: '/auth/login', search: { access_token: accessToken } })
     }
-  }, [navigate]);
+  }, [navigate])
 
   const onSubmit = handleSubmit(async (data) => {
-    setError(null);
+    setError(null)
     try {
-      await loginMutation.mutateAsync(data);
-      toast.success('Login successful!');
-      navigate('/dashboard');
+      await loginMutation.mutateAsync(data)
+      toast.success('Login successful!')
+      navigate({ to: '/dashboard' })
     } catch (err) {
-      setError((err as Error).message || 'Login failed');
+      setError((err as Error).message || 'Login failed')
     }
-  });
+  })
 
   const handleGithubLogin = async () => {
     try {
-      setIsGithubLoading(true);
-      const result = await signInWithGitHub();
-      if (result?.url) globalThis.location.href = result.url;
-      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL'); }
+      setIsGithubLoading(true)
+      const result = await signInWithGitHub()
+      if (result?.url) globalThis.location.href = result.url
+      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL') }
     } catch (err) {
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
+      setError((err as Error).message || 'GitHub login failed')
+      setIsGithubLoading(false)
     }
-  };
+  }
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
-          <button onClick={() => navigate('/')} className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
+          <Link to="/" className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
             Back to Homepage
-          </button>
+          </Link>
         </div>
 
         <div className="text-center mb-8">
@@ -87,7 +91,7 @@ export default function LoginPage() {
           <div>
             <div className="flex items-center justify-between mb-1">
               <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">Forgot password?</Link>
+              <Link to="/auth/forgot" className="text-sm text-primary-600 hover:text-primary-700">Forgot password?</Link>
             </div>
             <div className="relative">
               <input id="password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={loginMutation.isPending}
@@ -122,12 +126,12 @@ export default function LoginPage() {
         </p>
 
         <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">Don't have an account? <Link to="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">Sign up</Link></p>
+          <p className="text-gray-600 text-sm">Don't have an account? <Link to="/auth/register" className="text-primary-600 hover:text-primary-700 font-semibold">Sign up</Link></p>
         </div>
         <div className="mt-6 text-center">
           <p className="text-gray-500 text-xs">By signing in, you agree to our Terms of Service and Privacy Policy</p>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/dimentorin/src/app/auth/register-mentor/page.tsx b/apps/dimentorin/src/routes/_public/auth/register-mentor.tsx
similarity index 94%
rename from apps/dimentorin/src/app/auth/register-mentor/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register-mentor.tsx
index 88b6305..d1966cd 100644
--- a/apps/dimentorin/src/app/auth/register-mentor/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register-mentor.tsx
@@ -1,10 +1,15 @@
-import { FC, ReactElement, useState } from 'react';
-import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useState } from 'react'
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { Button, Select } from '@imphnen-frontend-service/ui/atoms'
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'
+import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/register-mentor')({
+  component: RegisterMentorPage,
+})
+
+function RegisterMentorPage(): ReactElement {
   const [ step, setStep ] = useState(1)
 
   return (
@@ -118,7 +123,7 @@ export const Components: FC = (): ReactElement => {
                     <option value="Other">Other</option>
                   </SelectField>
                   <InputField
-                    label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
+                    label={`Jika Mengisi \u201COther\u201D, Tulis Topik yang Kamu Kuasai`}
                     size="lg"
                     className="w-full"
                     placeholder="Tolong isi jika tidak ada di pilihan senpai"
@@ -169,7 +174,7 @@ export const Components: FC = (): ReactElement => {
                   />
                   <InputField
                     type='number'
-                    label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
+                    label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5\u20133 jam"
                     size="lg"
                     className="w-full"
                     placeholder="Isi Nominalnya dong senpaiii!!!"
@@ -236,7 +241,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx b/apps/dimentorin/src/routes/_public/auth/register-mentor_/pending.tsx
similarity index 82%
rename from apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register-mentor_/pending.tsx
index d25e357..c664df8 100644
--- a/apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register-mentor_/pending.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement, useEffect } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowRightOutlined } from '@ant-design/icons';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { ArrowRightOutlined } from '@ant-design/icons'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/register-mentor/pending')({
+  component: RegisterMentorPendingPage,
+})
+
+function RegisterMentorPendingPage(): ReactElement {
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
       <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
@@ -19,7 +24,7 @@ export const Components: FC = (): ReactElement => {
             <svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
               <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
-              <circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
+              <circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" strokeWidth="1.1825"/>
               <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
             </svg>
             <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
@@ -35,7 +40,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx b/apps/dimentorin/src/routes/_public/auth/register-mentor_/success.tsx
similarity index 84%
rename from apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register-mentor_/success.tsx
index c318b6b..376e4a8 100644
--- a/apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register-mentor_/success.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement, useEffect } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowRightOutlined } from '@ant-design/icons';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { ArrowRightOutlined } from '@ant-design/icons'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/register-mentor/success')({
+  component: RegisterMentorSuccessPage,
+})
+
+function RegisterMentorSuccessPage(): ReactElement {
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
       <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
@@ -51,7 +56,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/register/page.tsx b/apps/dimentorin/src/routes/_public/auth/register.tsx
similarity index 87%
rename from apps/dimentorin/src/app/auth/register/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register.tsx
index bdf60a6..5ee855e 100644
--- a/apps/dimentorin/src/app/auth/register/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register.tsx
@@ -1,11 +1,16 @@
-import { FC, ReactElement } from 'react';
-import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { useRegisterHook } from '../../_hooks/use-register';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement } from 'react'
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { useRegisterHook } from '../../_hooks/use-register'
 
-export const Components: FC = (): ReactElement => {
-  const { form, onSubmit, isLoading } = useRegisterHook();
+export const Route = createFileRoute('/_public/auth/register')({
+  component: RegisterPage,
+})
+
+function RegisterPage(): ReactElement {
+  const { form, onSubmit, isLoading } = useRegisterHook()
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -54,7 +59,7 @@ export const Components: FC = (): ReactElement => {
                   placeholder="Contoh : 088877665544"
                   control={form.control}
                   name={'phone_number'}
-                />  
+                />
               </div>
               <ControlledInputField
                 label="Password"
@@ -63,7 +68,7 @@ export const Components: FC = (): ReactElement => {
                 type="password"
                 placeholder="Buat password sekeren jurus ultimate-mu!"
                 control={form.control}
-                name={'password'}             
+                name={'password'}
               />
               <h6 className="text-sm text-gray-500 mt-1">
                 "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
@@ -107,7 +112,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/register/otp/page.tsx b/apps/dimentorin/src/routes/_public/auth/register_/otp.tsx
similarity index 58%
rename from apps/dimentorin/src/app/auth/register/otp/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register_/otp.tsx
index 9026713..ab41bea 100644
--- a/apps/dimentorin/src/app/auth/register/otp/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register_/otp.tsx
@@ -1,15 +1,22 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
-import { useOtpHook } from '../../../_hooks/use-otp';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useSearchParams } from 'react-router-dom';
-import { useResendOtpHook } from '../../../_hooks/use-resend-otp';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect, useState } from 'react'
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { useOtpHook } from '../../../_hooks/use-otp'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { useResendOtpHook } from '../../../_hooks/use-resend-otp'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/register/otp')({
+  validateSearch: (search: Record<string, unknown>) => ({
+    email: (search.email as string) || '',
+  }),
+  component: RegisterOtpPage,
+})
+
+function RegisterOtpPage(): ReactElement {
   const { form, onSubmit, isLoading } = useOtpHook()
-  const [ searchParams ] = useSearchParams()
-  const [ disabled, setDisabled]  = useState(true);
-  const [ timeLeft, setTimeLeft ] = useState(5 * 60);
+  const { email } = Route.useSearch()
+  const [disabled, setDisabled] = useState(true)
+  const [timeLeft, setTimeLeft] = useState(5 * 60)
   const { resendOTP } = useResendOtpHook()
 
   useEffect(() => {
@@ -17,22 +24,22 @@ export const Components: FC = (): ReactElement => {
       const interval = setInterval(() => {
         setTimeLeft(prev => {
           if (prev <= 1) {
-            clearInterval(interval);
-            setDisabled(false);
-            return 0;
+            clearInterval(interval)
+            setDisabled(false)
+            return 0
           }
-          return prev - 1;
-        });
-      }, 1000);
-      return () => clearInterval(interval);
+          return prev - 1
+        })
+      }, 1000)
+      return () => clearInterval(interval)
     }
-  }, [disabled]);
+  }, [disabled])
 
   const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, '0')}`;
-  }; 
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }
 
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
@@ -40,7 +47,7 @@ export const Components: FC = (): ReactElement => {
         <RegisterResetBanner />
         <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
           <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Verifikasi Email</h3>
-          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {searchParams.get("email")}</h5>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {email}</h5>
           <form onSubmit={onSubmit} className='mt-7'>
             <ControlledInputField
               label="OTP"
@@ -51,10 +58,10 @@ export const Components: FC = (): ReactElement => {
               name={'otp'}
               maxLength={6}
               control={form.control}
-            /> 
+            />
             <Button type="button" className="mt-2" disabled={disabled} onClick={
               () => {
-                resendOTP({email: searchParams.get("email") || ""})
+                resendOTP({email: email || ""})
                 setDisabled(true)
                 setTimeLeft(5 * 60)
               }
@@ -64,7 +71,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
\ No newline at end of file
+  )
+}
diff --git a/apps/dimentorin/src/app/auth/register/success/page.tsx b/apps/dimentorin/src/routes/_public/auth/register_/success.tsx
similarity index 85%
rename from apps/dimentorin/src/app/auth/register/success/page.tsx
rename to apps/dimentorin/src/routes/_public/auth/register_/success.tsx
index 7c6ed5b..55e7c15 100644
--- a/apps/dimentorin/src/app/auth/register/success/page.tsx
+++ b/apps/dimentorin/src/routes/_public/auth/register_/success.tsx
@@ -1,9 +1,14 @@
-import { FC, ReactElement, useEffect } from 'react';
-import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowRightOutlined } from '@ant-design/icons';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect } from 'react'
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { ArrowRightOutlined } from '@ant-design/icons'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/_public/auth/register/success')({
+  component: RegisterSuccessPage,
+})
+
+function RegisterSuccessPage(): ReactElement {
   useEffect(() => {
     setTimeout(() => {
       document.location.href = "/auth/login"
@@ -57,7 +62,5 @@ export const Components: FC = (): ReactElement => {
         </div>
       </div>
     </div>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/routes/_site.tsx b/apps/dimentorin/src/routes/_site.tsx
new file mode 100644
index 0000000..ac6fe45
--- /dev/null
+++ b/apps/dimentorin/src/routes/_site.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { Header } from './_site/_components/header'
+import { Footer } from './_site/_components/footer'
+
+export const Route = createFileRoute('/_site')({
+  component: SiteLayout,
+})
+
+function SiteLayout() {
+  return (
+    <div className="flex min-h-screen flex-col bg-primary-50">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/dimentorin/src/app/(public)/_components/footer.tsx b/apps/dimentorin/src/routes/_site/_components/footer.tsx
similarity index 99%
rename from apps/dimentorin/src/app/(public)/_components/footer.tsx
rename to apps/dimentorin/src/routes/_site/_components/footer.tsx
index 8fa3a0e..7c69841 100644
--- a/apps/dimentorin/src/app/(public)/_components/footer.tsx
+++ b/apps/dimentorin/src/routes/_site/_components/footer.tsx
@@ -1,7 +1,7 @@
 import { DiscordOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons';
 import { cn, For } from '@imphnen-frontend-service/utils';
 import React, { FC, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 import { motion, useInView, Variants } from 'framer-motion';
 import { SteamIcon } from '../../_components/icons';
 
diff --git a/apps/dimentorin/src/app/(public)/_components/header.tsx b/apps/dimentorin/src/routes/_site/_components/header.tsx
similarity index 96%
rename from apps/dimentorin/src/app/(public)/_components/header.tsx
rename to apps/dimentorin/src/routes/_site/_components/header.tsx
index 5d78641..7faae0b 100644
--- a/apps/dimentorin/src/app/(public)/_components/header.tsx
+++ b/apps/dimentorin/src/routes/_site/_components/header.tsx
@@ -3,7 +3,7 @@ import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
 import { FC, useMemo, useState } from "react";
-import { Link, NavLink, useLocation } from "react-router-dom";
+import { Link, useLocation } from "@tanstack/react-router";
 
 const MENUS: { label: string; href: string }[] = [
   { label: "Home", href: "/" },
@@ -73,7 +73,7 @@ export const Header: FC = () => {
                   isActive(menu.href) && "text-primary-500 hover:text-primary-500"
                 )}
               >
-                <NavLink to={menu.href}>{menu.label}</NavLink>
+                <Link to={menu.href}>{menu.label}</Link>
               </Button>
               )}
             </For>
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/cta-section.tsx b/apps/dimentorin/src/routes/_site/_components/home/cta-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/(home)/_components/cta-section.tsx
rename to apps/dimentorin/src/routes/_site/_components/home/cta-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/faq-section.tsx b/apps/dimentorin/src/routes/_site/_components/home/faq-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/(home)/_components/faq-section.tsx
rename to apps/dimentorin/src/routes/_site/_components/home/faq-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx b/apps/dimentorin/src/routes/_site/_components/home/hero-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
rename to apps/dimentorin/src/routes/_site/_components/home/hero-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/testimonial-section.tsx b/apps/dimentorin/src/routes/_site/_components/home/testimonial-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/(home)/_components/testimonial-section.tsx
rename to apps/dimentorin/src/routes/_site/_components/home/testimonial-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx b/apps/dimentorin/src/routes/_site/_components/home/what-we-offer-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
rename to apps/dimentorin/src/routes/_site/_components/home/what-we-offer-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/articles/page.tsx b/apps/dimentorin/src/routes/_site/articles.tsx
similarity index 88%
rename from apps/dimentorin/src/app/(public)/articles/page.tsx
rename to apps/dimentorin/src/routes/_site/articles.tsx
index 51c09ec..aff3d63 100644
--- a/apps/dimentorin/src/app/(public)/articles/page.tsx
+++ b/apps/dimentorin/src/routes/_site/articles.tsx
@@ -1,13 +1,18 @@
-import { ReactElement, useRef, useState } from "react";
-import { ArticleCard } from "./_components/card/article";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { motion, useInView, Variants } from "framer-motion";
+import { createFileRoute } from '@tanstack/react-router'
+import { ReactElement, useRef, useState } from 'react'
+import { ArticleCard } from './articles_/_components/card/article'
+import { cn, For } from '@imphnen-frontend-service/utils'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { motion, useInView, Variants } from 'framer-motion'
 
 const CATEGORIES = ['UI/UX Design', 'Software/Web Dev', 'Data & AI', 'Cloud & DevOps', 'Cybersecurity', 'IT & Network', 'Project Management', 'QA & Testing'] as const
 type Category = typeof CATEGORIES[number]
 
-export default function Components(): ReactElement {
+export const Route = createFileRoute('/_site/articles')({
+  component: ArticlesPage,
+})
+
+function ArticlesPage(): ReactElement {
   const [activeTab, setActiveTab] = useState<Category>('UI/UX Design')
 
   const ref = useRef(null)
diff --git a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx b/apps/dimentorin/src/routes/_site/articles_/$slug.tsx
similarity index 92%
rename from apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
rename to apps/dimentorin/src/routes/_site/articles_/$slug.tsx
index 6dda909..abbaa4d 100644
--- a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
+++ b/apps/dimentorin/src/routes/_site/articles_/$slug.tsx
@@ -1,9 +1,14 @@
-import { Icon } from "@iconify/react";
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { motion } from "framer-motion";
+import { createFileRoute } from '@tanstack/react-router'
+import { Icon } from '@iconify/react'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { cn } from '@imphnen-frontend-service/utils'
+import { motion } from 'framer-motion'
 
-export default function DetailArticle() {
+export const Route = createFileRoute('/_site/articles/$slug')({
+  component: DetailArticlePage,
+})
+
+function DetailArticlePage() {
   return (
     <main>
       <motion.section
diff --git a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx b/apps/dimentorin/src/routes/_site/articles_/_components/card/article.tsx
similarity index 98%
rename from apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
rename to apps/dimentorin/src/routes/_site/articles_/_components/card/article.tsx
index 6df135e..aa80daf 100644
--- a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
+++ b/apps/dimentorin/src/routes/_site/articles_/_components/card/article.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { cn, Show } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
-import { Link } from "react-router-dom"
+import { Link } from "@tanstack/react-router"
 
 export type ArticleCardProps = {
   variant?: "default" | "recent" | "featured"
diff --git a/apps/dimentorin/src/app/(public)/mentoring/page.tsx b/apps/dimentorin/src/routes/_site/mentoring.tsx
similarity index 79%
rename from apps/dimentorin/src/app/(public)/mentoring/page.tsx
rename to apps/dimentorin/src/routes/_site/mentoring.tsx
index 9d55346..011c135 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/page.tsx
+++ b/apps/dimentorin/src/routes/_site/mentoring.tsx
@@ -1,30 +1,35 @@
-import { FC, ReactElement, useRef, useState } from 'react';
-import { BannerSection } from './_components/banner-section';
-import { Topics } from './_components/topics';
-import { Input } from '@imphnen-frontend-service/ui/atoms';
-import { SearchOutlined } from '@ant-design/icons';
-import { For } from '@imphnen-frontend-service/utils';
-import { MentorCard } from './_components/mentor-card';
-import { Pagination } from '@imphnen-frontend-service/ui/molecules';
-import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table';
-import { motion, useInView, Variants } from 'framer-motion';
-import { useMentorList } from '@imphnen-frontend-service/service';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useRef, useState } from 'react'
+import { BannerSection } from './mentoring_/_components/banner-section'
+import { Topics } from './mentoring_/_components/topics'
+import { Input } from '@imphnen-frontend-service/ui/atoms'
+import { SearchOutlined } from '@ant-design/icons'
+import { For } from '@imphnen-frontend-service/utils'
+import { MentorCard } from './mentoring_/_components/mentor-card'
+import { Pagination } from '@imphnen-frontend-service/ui/molecules'
+import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table'
+import { motion, useInView, Variants } from 'framer-motion'
+import { useMentorList } from '@imphnen-frontend-service/service'
 
-export const Components: FC = (): ReactElement => {
-  const [search, setSearch] = useState('');
+export const Route = createFileRoute('/_site/mentoring')({
+  component: MentoringPage,
+})
+
+function MentoringPage(): ReactElement {
+  const [search, setSearch] = useState('')
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 8,
-  });
+  })
 
   const { data: mentorData, isLoading } = useMentorList({
     page: pagination.pageIndex + 1,
     per_page: pagination.pageSize,
     search: search || undefined,
-  });
+  })
 
-  const mentors = mentorData?.data ?? [];
-  const totalItems = mentorData?.meta?.total ?? 0;
+  const mentors = mentorData?.data ?? []
+  const totalItems = mentorData?.meta?.total ?? 0
 
   const table = useReactTable({
     data: mentors,
@@ -33,11 +38,11 @@ export const Components: FC = (): ReactElement => {
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: (updater) => {
-      setPagination(updater);
+      setPagination(updater)
     },
     pageCount: Math.ceil(totalItems / pagination.pageSize) || 1,
     manualPagination: true,
-  });
+  })
 
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, amount: 0.2 })
@@ -101,8 +106,8 @@ export const Components: FC = (): ReactElement => {
                 className="relative min-w-full w-full"
                 value={search}
                 onChange={(e) => {
-                  setSearch(e.target.value);
-                  setPagination((p) => ({ ...p, pageIndex: 0 }));
+                  setSearch(e.target.value)
+                  setPagination((p) => ({ ...p, pageIndex: 0 }))
                 }}
               />
               <SearchOutlined className="absolute right-2.5 top-1/2 -translate-y-1/2 text-primary-500 size-2.5 cursor-text md:me-12 lg:me-0" />
@@ -134,5 +139,3 @@ export const Components: FC = (): ReactElement => {
     </main>
   )
 }
-
-export default Components
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id.tsx
similarity index 72%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id.tsx
index b3cc2ea..0e40111 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx
+++ b/apps/dimentorin/src/routes/_site/mentoring_/$id.tsx
@@ -1,19 +1,23 @@
+import { createFileRoute } from '@tanstack/react-router'
 import { FC, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import { ProfileSection } from './_components/sections/profile'
-import { StatisticsSection } from './_components/sections/senpai-statistics'
-import { TopicsSection } from './_components/sections/topics'
-import { ExperienceSection } from './_components/sections/experience'
-import { EducationSection } from './_components/sections/education'
-import { SenpaiScheduleSection } from './_components/sections/senpai-schedule'
+import { ProfileSection } from './$id/_components/sections/profile'
+import { StatisticsSection } from './$id/_components/sections/senpai-statistics'
+import { TopicsSection } from './$id/_components/sections/topics'
+import { ExperienceSection } from './$id/_components/sections/experience'
+import { EducationSection } from './$id/_components/sections/education'
+import { SenpaiScheduleSection } from './$id/_components/sections/senpai-schedule'
 import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { AppointmentModal } from './_components/modals/appointment'
+import { AppointmentModal } from './$id/_components/modals/appointment'
 import { useMentorById } from '@imphnen-frontend-service/service'
 
-export const Components: FC = () => {
+export const Route = createFileRoute('/_site/mentoring/$id')({
+  component: MentorDetailPage,
+})
+
+function MentorDetailPage() {
   const [open, setOpen] = useState(false)
-  const params = useParams()
-  const mentorId = params?.id ?? ''
+  const { id } = Route.useParams()
+  const mentorId = id ?? ''
   const { data: mentor, isLoading } = useMentorById(mentorId)
 
   if (isLoading) {
@@ -63,5 +67,3 @@ export const Components: FC = () => {
     </main>
   )
 }
-
-export default Components
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/index.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/index.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/payment.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/payment.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/payment.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/payment.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/profile.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/profile.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/profile.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/profile.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/qris-payement.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/qris-payement.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/qris-payement.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/qris-payement.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/schedule.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/schedule.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/schedule.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/schedule.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/success.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/success.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/topic.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/topic.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/topic.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/topic.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/va-payment.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/va-payment.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/va-payment.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/modals/appointment/steps/va-payment.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/education.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/education.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/education.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/education.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/experience.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/experience.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/experience.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/experience.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/profile.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/profile.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/profile.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/profile.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/senpai-schedule.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/senpai-schedule.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-statistics.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/senpai-statistics.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-statistics.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/senpai-statistics.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/topics.tsx b/apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/topics.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/topics.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/$id/_components/sections/topics.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/_components/banner-section.tsx b/apps/dimentorin/src/routes/_site/mentoring_/_components/banner-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/_components/banner-section.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/_components/banner-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/mentoring/_components/mentor-card.tsx b/apps/dimentorin/src/routes/_site/mentoring_/_components/mentor-card.tsx
similarity index 98%
rename from apps/dimentorin/src/app/(public)/mentoring/_components/mentor-card.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/_components/mentor-card.tsx
index b3905e0..5e9e322 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/_components/mentor-card.tsx
+++ b/apps/dimentorin/src/routes/_site/mentoring_/_components/mentor-card.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 import type { MentorDetailResponseDto } from '@imphnen-frontend-service/service';
 
 interface MentorCardProps {
diff --git a/apps/dimentorin/src/app/(public)/mentoring/_components/topics.tsx b/apps/dimentorin/src/routes/_site/mentoring_/_components/topics.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/mentoring/_components/topics.tsx
rename to apps/dimentorin/src/routes/_site/mentoring_/_components/topics.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/page.tsx b/apps/dimentorin/src/routes/_site/profile.tsx
similarity index 73%
rename from apps/dimentorin/src/app/(public)/profile/page.tsx
rename to apps/dimentorin/src/routes/_site/profile.tsx
index 5ee9f77..7515556 100644
--- a/apps/dimentorin/src/app/(public)/profile/page.tsx
+++ b/apps/dimentorin/src/routes/_site/profile.tsx
@@ -1,37 +1,40 @@
-'use client';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useState } from 'react'
+import { ProfileForm, ProfileSidebar, ProfileHeader } from './profile_/_components'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { NotificationModal, NotificationType } from './profile_/_components/modals/notification-modal'
+import { ProfileProvider, useProfile } from './profile_/_components/contexts/profile-context'
+import { EditProfileModal } from './profile_/_components/modals/edit-profile-modal'
 
-import { FC, ReactElement, useState } from 'react';
-import { ProfileForm, ProfileSidebar, ProfileHeader } from './_components';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { NotificationModal, NotificationType } from './_components/modals/notification-modal';
-import { ProfileProvider, useProfile } from './_components/contexts/profile-context';
-import { EditProfileModal } from './_components/modals/edit-profile-modal';
+export const Route = createFileRoute('/_site/profile')({
+  component: ProfilePage,
+})
 
-export const Components: FC = (): ReactElement => {
+function ProfilePage(): ReactElement {
   return (
     <ProfileProvider profileType="user">
       <ProfileContent />
     </ProfileProvider>
-  );
-};
+  )
+}
 
 const ProfileContent: FC = (): ReactElement => {
-  const { isLoading, error } = useProfile();
+  const { isLoading, error } = useProfile()
 
   const [notification, setNotification] = useState<{
-    isOpen: boolean;
-    type: 'success' | 'error';
-    title: string;
-    message?: string;
+    isOpen: boolean
+    type: 'success' | 'error'
+    title: string
+    message?: string
   }>({
     isOpen: false,
     type: 'success',
     title: '',
     message: ''
-  });
+  })
 
-  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false);
+  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false)
 
   const showNotification = (type: NotificationType['type'], title: string, message?: string) => {
     setNotification({
@@ -39,20 +42,20 @@ const ProfileContent: FC = (): ReactElement => {
       type,
       title,
       message
-    });
-  };
+    })
+  }
 
   const hideNotification = () => {
-    setNotification(prev => ({ ...prev, isOpen: false }));
-  };
+    setNotification(prev => ({ ...prev, isOpen: false }))
+  }
 
   const openEditProfileModal = () => {
-    setIsEditProfileModalOpen(true);
-  };
+    setIsEditProfileModalOpen(true)
+  }
 
   const closeEditProfileModal = () => {
-    setIsEditProfileModalOpen(false);
-  };
+    setIsEditProfileModalOpen(false)
+  }
 
   if (isLoading) {
     return (
@@ -62,7 +65,7 @@ const ProfileContent: FC = (): ReactElement => {
           <p className="mt-4 text-gray-600">Loading profile...</p>
         </div>
       </main>
-    );
+    )
   }
 
   if (error) {
@@ -73,7 +76,7 @@ const ProfileContent: FC = (): ReactElement => {
           <p className="text-gray-600 mt-2">Please try again later.</p>
         </div>
       </main>
-    );
+    )
   }
 
   return (
@@ -126,7 +129,5 @@ const ProfileContent: FC = (): ReactElement => {
         showNotification={showNotification}
       />
     </main>
-  );
-};
-
-export default Components;
+  )
+}
diff --git a/apps/dimentorin/src/app/(public)/profile/[id]/page.tsx b/apps/dimentorin/src/routes/_site/profile_/$id.tsx
similarity index 76%
rename from apps/dimentorin/src/app/(public)/profile/[id]/page.tsx
rename to apps/dimentorin/src/routes/_site/profile_/$id.tsx
index e067535..f7a2c19 100644
--- a/apps/dimentorin/src/app/(public)/profile/[id]/page.tsx
+++ b/apps/dimentorin/src/routes/_site/profile_/$id.tsx
@@ -1,17 +1,18 @@
-'use client';
+import { createFileRoute } from '@tanstack/react-router'
+import { FC, ReactElement, useState } from 'react'
+import { ProfileForm, ProfileSidebar, ProfileHeader } from './_components'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { NotificationModal, NotificationType } from './_components/modals/notification-modal'
+import { ProfileProvider, useProfile } from './_components/contexts/profile-context'
+import { EditProfileModal } from './_components/modals/edit-profile-modal'
 
-import { FC, ReactElement, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { ProfileForm, ProfileSidebar, ProfileHeader } from '../_components';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { NotificationModal, NotificationType } from '../_components/modals/notification-modal';
-import { ProfileProvider, useProfile } from '../_components/contexts/profile-context';
-import { EditProfileModal } from '../_components/modals/edit-profile-modal';
+export const Route = createFileRoute('/_site/profile/$id')({
+  component: ProfileByIdPage,
+})
 
-const ProfileByIdPage: FC = (): ReactElement => {
-  const params = useParams();
-  const id = (params && params.id) ? params.id as string : undefined;
+function ProfileByIdPage(): ReactElement {
+  const { id } = Route.useParams()
 
   if (!id) {
     return (
@@ -20,39 +21,39 @@ const ProfileByIdPage: FC = (): ReactElement => {
           <p className="text-red-600 text-lg">Profile ID not found.</p>
         </div>
       </main>
-    );
+    )
   }
 
   return (
     <ProfileProvider profileId={id} profileType="user">
       <ProfileByIdContent />
     </ProfileProvider>
-  );
-};
+  )
+}
 
 const ProfileByIdContent: FC = (): ReactElement => {
-  const { profileData, isLoading, error, profileType } = useProfile();
+  const { profileData, isLoading, error, profileType } = useProfile()
 
   const [notification, setNotification] = useState<{
-    isOpen: boolean;
-    type: 'success' | 'error';
-    title: string;
-    message?: string;
+    isOpen: boolean
+    type: 'success' | 'error'
+    title: string
+    message?: string
   }>({
     isOpen: false,
     type: 'success',
     title: '',
     message: ''
-  });
+  })
 
-  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false);
+  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false)
 
   const getProfileTitle = () => {
     if (profileData?.fullname) {
-      return `${profileData.fullname}'s Profile`;
+      return `${profileData.fullname}'s Profile`
     }
-    return profileType === 'user' ? 'User Profile' : 'Mentor Profile';
-  };
+    return profileType === 'user' ? 'User Profile' : 'Mentor Profile'
+  }
 
   const showNotification = (type: NotificationType['type'], title: string, message?: string) => {
     setNotification({
@@ -60,22 +61,22 @@ const ProfileByIdContent: FC = (): ReactElement => {
       type,
       title,
       message
-    });
-  };
+    })
+  }
 
   const hideNotification = () => {
-    setNotification(prev => ({ ...prev, isOpen: false }));
-  };
+    setNotification(prev => ({ ...prev, isOpen: false }))
+  }
 
   const openEditProfileModal = () => {
-    setIsEditProfileModalOpen(true);
-  };
+    setIsEditProfileModalOpen(true)
+  }
 
   const closeEditProfileModal = () => {
-    setIsEditProfileModalOpen(false);
-  };
+    setIsEditProfileModalOpen(false)
+  }
 
-  const isViewOnly = true;
+  const isViewOnly = true
 
   if (isLoading) {
     return (
@@ -85,7 +86,7 @@ const ProfileByIdContent: FC = (): ReactElement => {
           <p className="mt-4 text-gray-600">Loading profile...</p>
         </div>
       </main>
-    );
+    )
   }
 
   if (error) {
@@ -96,7 +97,7 @@ const ProfileByIdContent: FC = (): ReactElement => {
           <p className="text-gray-600 mt-2">Profile not found or you don't have permission to view it.</p>
         </div>
       </main>
-    );
+    )
   }
 
   return (
@@ -158,7 +159,5 @@ const ProfileByIdContent: FC = (): ReactElement => {
         />
       )}
     </main>
-  );
-};
-
-export default ProfileByIdPage;
+  )
+}
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/buttons/edit-section-button.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/buttons/edit-section-button.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/buttons/edit-section-button.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/buttons/edit-section-button.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/buttons/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/buttons/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/buttons/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/buttons/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/buttons/modal-button.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/buttons/modal-button.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/buttons/modal-button.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/buttons/modal-button.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/contexts/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/contexts/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/contexts/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/contexts/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/contexts/profile-context.tsx
similarity index 98%
rename from apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/contexts/profile-context.tsx
index 70ef3cc..f9c7cb8 100644
--- a/apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx
+++ b/apps/dimentorin/src/routes/_site/profile_/_components/contexts/profile-context.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useMemo, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from '@tanstack/react-router';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   useAuthStore,
@@ -65,7 +65,7 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
   profileId,
   profileType: forcedProfileType
 }) => {
-  const params = useParams();
+  const params = useParams({ strict: false });
   const { session } = useAuthStore();
   const queryClient = useQueryClient();
 
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/guards/mentor-guard.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/guards/mentor-guard.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/guards/mentor-guard.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/guards/mentor-guard.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/cv-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/cv-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/cv-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/cv-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/description-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/description-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/description-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/description-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/edit-profile-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/edit-profile-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/edit-profile-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/edit-profile-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/education-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/education-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/education-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/education-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/experience-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/experience-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/experience-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/experience-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/modals/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/languages-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/languages-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/languages-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/languages-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/notification-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/notification-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/notification-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/notification-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/personal-info-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/personal-info-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/personal-info-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/personal-info-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/profile-basic-info-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/profile-basic-info-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/profile-basic-info-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/profile-basic-info-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/skills-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/skills-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/skills-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/skills-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/modals/social-media-modal.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/modals/social-media-modal.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/modals/social-media-modal.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/modals/social-media-modal.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/profile/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-handlers.ts b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-handlers.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-handlers.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-handlers.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-hooks.ts b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-hooks.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-hooks.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-hooks.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-types.ts b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-types.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-types.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form-types.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-form.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-header.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-header.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-header.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-header.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info-new.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-info-new.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info-new.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-info-new.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-info.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-info.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-sidebar.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-sidebar.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-sidebar.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-sidebar.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/profile/profile-tabs.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-tabs.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/profile/profile-tabs.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/profile/profile-tabs.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/contact-info-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/contact-info-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/contact-info-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/contact-info-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/cv-resume-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/cv-resume-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/cv-resume-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/cv-resume-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/description-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/description-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/description-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/description-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/education-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/education-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/education-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/education-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/experiences-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/experiences-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/experiences-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/experiences-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/sections/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/languages-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/languages-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/languages-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/languages-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/personal-info-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/personal-info-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/personal-info-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/personal-info-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/skills-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/skills-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/skills-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/skills-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/sections/social-media-section.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/sections/social-media-section.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/sections/social-media-section.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/sections/social-media-section.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/shared/file-uploader.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/shared/file-uploader.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/shared/file-uploader.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/shared/file-uploader.tsx
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/shared/index.ts b/apps/dimentorin/src/routes/_site/profile_/_components/shared/index.ts
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/shared/index.ts
rename to apps/dimentorin/src/routes/_site/profile_/_components/shared/index.ts
diff --git a/apps/dimentorin/src/app/(public)/profile/_components/shared/section-wrapper.tsx b/apps/dimentorin/src/routes/_site/profile_/_components/shared/section-wrapper.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/profile/_components/shared/section-wrapper.tsx
rename to apps/dimentorin/src/routes/_site/profile_/_components/shared/section-wrapper.tsx
diff --git a/apps/dimentorin/src/routes/_site/resources.tsx b/apps/dimentorin/src/routes/_site/resources.tsx
new file mode 100644
index 0000000..70e2f2e
--- /dev/null
+++ b/apps/dimentorin/src/routes/_site/resources.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ReactElement } from 'react'
+import { Contribute } from './resources_/_components/contribute'
+import { WorkWithUs } from './resources_/_components/work-with-us'
+import { Collaborate } from './resources_/_components/collaborate'
+
+export const Route = createFileRoute('/_site/resources')({
+  component: ResourcesPage,
+})
+
+function ResourcesPage(): ReactElement {
+  return (
+    <main>
+      <Contribute />
+      <WorkWithUs />
+      <Collaborate />
+    </main>
+  )
+}
diff --git a/apps/dimentorin/src/app/(public)/resources/_components/collaborate.tsx b/apps/dimentorin/src/routes/_site/resources_/_components/collaborate.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/resources/_components/collaborate.tsx
rename to apps/dimentorin/src/routes/_site/resources_/_components/collaborate.tsx
diff --git a/apps/dimentorin/src/app/(public)/resources/_components/contribute.tsx b/apps/dimentorin/src/routes/_site/resources_/_components/contribute.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/resources/_components/contribute.tsx
rename to apps/dimentorin/src/routes/_site/resources_/_components/contribute.tsx
diff --git a/apps/dimentorin/src/app/(public)/resources/_components/work-with-us.tsx b/apps/dimentorin/src/routes/_site/resources_/_components/work-with-us.tsx
similarity index 100%
rename from apps/dimentorin/src/app/(public)/resources/_components/work-with-us.tsx
rename to apps/dimentorin/src/routes/_site/resources_/_components/work-with-us.tsx
diff --git a/apps/dimentorin/src/routes/index.tsx b/apps/dimentorin/src/routes/index.tsx
new file mode 100644
index 0000000..10505de
--- /dev/null
+++ b/apps/dimentorin/src/routes/index.tsx
@@ -0,0 +1,35 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { SessionToken } from '@imphnen-frontend-service/service'
+import { HeroSection } from './_site/_components/home/hero-section'
+import { WhatWeOfferSection } from './_site/_components/home/what-we-offer-section'
+import { TestimonialSection } from './_site/_components/home/testimonial-section'
+import { FAQSection } from './_site/_components/home/faq-section'
+import { CTASection } from './_site/_components/home/cta-section'
+import { Header } from './_site/_components/header'
+import { Footer } from './_site/_components/footer'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/dashboard' })
+    }
+  },
+  component: HomePage,
+})
+
+function HomePage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-primary-50">
+      <Header />
+      <main className="flex-1">
+        <HeroSection />
+        <WhatWeOfferSection />
+        <TestimonialSection />
+        <FAQSection />
+        <CTASection />
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/dimentorin/vite.config.ts b/apps/dimentorin/vite.config.ts
index 2fd3870..f3b6c1c 100644
--- a/apps/dimentorin/vite.config.ts
+++ b/apps/dimentorin/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3001,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/dimentorin',
     emptyOutDir: true,
diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx
deleted file mode 100644
index 2b27454..0000000
--- a/apps/gacha/src/app/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Navbar } from '@imphnen-frontend-service/ui/organisms';
-import { Outlet } from 'react-router-dom';
-import { FC, ReactElement } from 'react';
-import { ModalLoginProvider } from '@imphnen-frontend-service/utils';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <ModalLoginProvider>
-      <main className="bg-primary-50 min-h-screen">
-        <Navbar />
-        <Outlet />
-      </main>
-    </ModalLoginProvider>
-  );
-};
-export default AppLayout;
diff --git a/apps/gacha/src/main.tsx b/apps/gacha/src/main.tsx
index 185c11d..cf947ab 100644
--- a/apps/gacha/src/main.tsx
+++ b/apps/gacha/src/main.tsx
@@ -1,42 +1,28 @@
-import { createRoot } from 'react-dom/client';
-import { middleware } from './middleware';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
-import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
-  QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryProvider } from '@imphnen-frontend-service/utils'
+import { Toaster } from 'sonner'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+const router = createRouter({ routeTree })
 
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
-const router = createBrowserRouter([
-  {
-    ...routes,
-    loader: middleware,
-    shouldRevalidate: () => true,
-  },
-]);
+const rootElement = document.getElementById('root')
 
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster position="top-right"/>
       <RouterProvider router={router} />
+      <Toaster position="top-right" />
     </QueryProvider>
   </StrictMode>
-);
+)
diff --git a/apps/gacha/src/middleware.ts b/apps/gacha/src/middleware.ts
deleted file mode 100644
index e0e4025..0000000
--- a/apps/gacha/src/middleware.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LoaderFunctionArgs } from 'react-router';
-
-export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  return null;
-};
diff --git a/apps/gacha/src/routeTree.gen.ts b/apps/gacha/src/routeTree.gen.ts
new file mode 100644
index 0000000..786525b
--- /dev/null
+++ b/apps/gacha/src/routeTree.gen.ts
@@ -0,0 +1,2 @@
+// This file is auto-generated by TanStack Router
+export const routeTree = {} as any
diff --git a/apps/gacha/src/routes/__root.tsx b/apps/gacha/src/routes/__root.tsx
new file mode 100644
index 0000000..c7aa04a
--- /dev/null
+++ b/apps/gacha/src/routes/__root.tsx
@@ -0,0 +1,18 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { Navbar } from '@imphnen-frontend-service/ui/organisms'
+import { ModalLoginProvider } from '@imphnen-frontend-service/utils'
+
+export const Route = createRootRoute({
+  component: RootLayout,
+})
+
+function RootLayout() {
+  return (
+    <ModalLoginProvider>
+      <main className="bg-primary-50 min-h-screen">
+        <Navbar />
+        <Outlet />
+      </main>
+    </ModalLoginProvider>
+  )
+}
diff --git a/apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx b/apps/gacha/src/routes/_components/form/modal-form-forgot-password.tsx
similarity index 100%
rename from apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx
rename to apps/gacha/src/routes/_components/form/modal-form-forgot-password.tsx
diff --git a/apps/gacha/src/app/_components/form/modal-form-login.tsx b/apps/gacha/src/routes/_components/form/modal-form-login.tsx
similarity index 100%
rename from apps/gacha/src/app/_components/form/modal-form-login.tsx
rename to apps/gacha/src/routes/_components/form/modal-form-login.tsx
diff --git a/apps/gacha/src/app/_components/form/modal-form-register.tsx b/apps/gacha/src/routes/_components/form/modal-form-register.tsx
similarity index 100%
rename from apps/gacha/src/app/_components/form/modal-form-register.tsx
rename to apps/gacha/src/routes/_components/form/modal-form-register.tsx
diff --git a/apps/gacha/src/app/_components/form/modal-form-verify-email.tsx b/apps/gacha/src/routes/_components/form/modal-form-verify-email.tsx
similarity index 100%
rename from apps/gacha/src/app/_components/form/modal-form-verify-email.tsx
rename to apps/gacha/src/routes/_components/form/modal-form-verify-email.tsx
diff --git a/apps/gacha/src/app/_components/item/gacha-item.tsx b/apps/gacha/src/routes/_components/item/gacha-item.tsx
similarity index 100%
rename from apps/gacha/src/app/_components/item/gacha-item.tsx
rename to apps/gacha/src/routes/_components/item/gacha-item.tsx
diff --git a/apps/gacha/src/app/_hooks/use-login.ts b/apps/gacha/src/routes/_hooks/use-login.ts
similarity index 94%
rename from apps/gacha/src/app/_hooks/use-login.ts
rename to apps/gacha/src/routes/_hooks/use-login.ts
index c0d64dc..05c5f37 100644
--- a/apps/gacha/src/app/_hooks/use-login.ts
+++ b/apps/gacha/src/routes/_hooks/use-login.ts
@@ -7,7 +7,6 @@ import {
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { useNavigate } from 'react-router';
 import { useVerifyEmail } from './use-verify-email';
 
 export const useLogin = () => {
@@ -16,7 +15,6 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const navigate = useNavigate();
   const { mutate, isPending } = usePostLogin();
   const { setLoading, setSession, clearSession } = useAuthStore();
 
@@ -48,7 +46,7 @@ export const useLogin = () => {
           setSession(loginData);
         }
 
-        navigate(0);
+        window.location.reload();
       },
       onError: (error) => {
         const errorMessage = error?.response?.data?.message;
diff --git a/apps/gacha/src/app/_hooks/use-register.ts b/apps/gacha/src/routes/_hooks/use-register.ts
similarity index 100%
rename from apps/gacha/src/app/_hooks/use-register.ts
rename to apps/gacha/src/routes/_hooks/use-register.ts
diff --git a/apps/gacha/src/app/_hooks/use-verify-email.ts b/apps/gacha/src/routes/_hooks/use-verify-email.ts
similarity index 92%
rename from apps/gacha/src/app/_hooks/use-verify-email.ts
rename to apps/gacha/src/routes/_hooks/use-verify-email.ts
index 7591be3..1d40769 100644
--- a/apps/gacha/src/app/_hooks/use-verify-email.ts
+++ b/apps/gacha/src/routes/_hooks/use-verify-email.ts
@@ -5,12 +5,10 @@ import {
 } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 export const useVerifyEmail = () => {
   const [showVerifyModal, setShowVerifyModal] = useState(false);
   const [emailToVerify, setEmailToVerify] = useState('');
-  const navigate = useNavigate();
 
   const postVerifyEmail = usePostVerifyEmail();
 
@@ -33,7 +31,7 @@ export const useVerifyEmail = () => {
       onSuccess: () => {
         toast.success('Verifikasi email sukses');
 
-        navigate(0);
+        window.location.reload();
       },
       onError: (error) =>
         toast.error(error.message || 'Verifikasi email gagal'),
diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/routes/index.tsx
similarity index 94%
rename from apps/gacha/src/app/page.tsx
rename to apps/gacha/src/routes/index.tsx
index 140bf16..c90d90d 100644
--- a/apps/gacha/src/app/page.tsx
+++ b/apps/gacha/src/routes/index.tsx
@@ -1,16 +1,21 @@
-import { ArrowDownOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { FC, Fragment, ReactElement, useState } from 'react';
-import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
-import ModalFormLogin from './_components/form/modal-form-login';
-import ModalFormRegister from './_components/form/modal-form-register';
-import { GachaItem } from './_components/item/gacha-item';
-import { useModalLogin } from '@imphnen-frontend-service/utils';
-import { useGachaItemList, useUserCredits, useExecuteGachaRoll } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-import type { TGachaRollItemDto } from '@imphnen-frontend-service/service';
+import { createFileRoute } from '@tanstack/react-router'
+import { ArrowDownOutlined } from '@ant-design/icons'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { FC, Fragment, ReactElement, useState } from 'react'
+import ModalFormForgotPassword from './_components/form/modal-form-forgot-password'
+import ModalFormLogin from './_components/form/modal-form-login'
+import ModalFormRegister from './_components/form/modal-form-register'
+import { GachaItem } from './_components/item/gacha-item'
+import { useModalLogin } from '@imphnen-frontend-service/utils'
+import { useGachaItemList, useUserCredits, useExecuteGachaRoll } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+import type { TGachaRollItemDto } from '@imphnen-frontend-service/service'
 
-export const Components: FC = (): ReactElement => {
+export const Route = createFileRoute('/')({
+  component: GachaHomePage,
+})
+
+function GachaHomePage(): ReactElement {
   const { showModalLogin, setShowModalLogin } = useModalLogin();
   const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
   const [showModalRegister, setShowModalRegister] = useState(false);
@@ -251,6 +256,4 @@ export const Components: FC = (): ReactElement => {
       />
     </Fragment>
   );
-};
-
-export default Components;
+}
diff --git a/apps/gacha/vite.config.ts b/apps/gacha/vite.config.ts
index a28b76a..8bebc3c 100644
--- a/apps/gacha/vite.config.ts
+++ b/apps/gacha/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3001,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/gacha',
     emptyOutDir: true,
diff --git a/apps/hackathon/src/app/404.tsx b/apps/hackathon/src/app/404.tsx
deleted file mode 100644
index 3a2e703..0000000
--- a/apps/hackathon/src/app/404.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/hackathon/src/app/auth/callback/page.tsx b/apps/hackathon/src/app/auth/callback/page.tsx
deleted file mode 100644
index 86451e4..0000000
--- a/apps/hackathon/src/app/auth/callback/page.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { FC, ReactElement, useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { useGitHubCallback } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const CallbackPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
-  const [isProcessing, setIsProcessing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const hasRunRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      if (hasRunRef.current) {
-        return;
-      }
-      hasRunRef.current = true;
-
-      try {
-        const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-        const urlParams = new URLSearchParams(globalThis.location.search);
-
-        const type = hashParams.get('type') || urlParams.get('type');
-        const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-
-        console.log('[Callback] Params:', { type, accessToken: !!accessToken, hash: globalThis.location.hash, search: globalThis.location.search });
-
-        if (accessToken) {
-          setIsProcessing(false);
-
-          if (type === 'recovery' || type === 'magiclink') {
-            toast.success('Email verified! Please set your new password.');
-            navigate('/auth/reset-password?access_token=' + accessToken);
-            return;
-          }
-
-          if (type === 'signup' || type === 'email_confirmation') {
-            toast.success('Email verified successfully! Please log in to continue.');
-            navigate('/auth/login');
-            return;
-          }
-
-          toast.success('Email verified! Please set your new password.');
-          navigate('/auth/reset-password?access_token=' + accessToken);
-          return;
-        }
-
-        const code = urlParams.get('code');
-
-        if (!code) {
-          throw new Error('No authorization code received');
-        }
-
-        const result = await exchangeGitHubCode({ code });
-
-        toast.success('Login successful!');
-        setIsProcessing(false);
-
-        if (result.user.location) {
-          globalThis.location.replace('/dashboard');
-        } else {
-          globalThis.location.replace('/onboarding/user');
-        }
-      } catch (err) {
-        console.error('[Callback] Error:', err);
-        setError((err as Error).message);
-        setIsProcessing(false);
-        toast.error('An error occurred during login');
-
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 3000);
-      }
-    };
-
-    handleCallback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (error) {
-    const isPrivateEmailError =
-      error.toLowerCase().includes('failed to create user') ||
-      error.toLowerCase().includes('email') ||
-      error.toLowerCase().includes('user record');
-
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
-          <div className="text-center mb-6">
-            <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-              GitHub Login Failed
-            </h2>
-            <p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
-          </div>
-
-          {isPrivateEmailError && (
-            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
-              <h3 className="font-semibold text-amber-800 dark:text-amber-300 mb-2">
-                Is your GitHub email set to private?
-              </h3>
-              <p className="text-amber-700 dark:text-amber-400 text-sm mb-3">
-                GitHub login requires a public email address. Please follow these steps:
-              </p>
-              <ol className="text-amber-700 dark:text-amber-400 text-sm list-decimal list-inside space-y-1 mb-3">
-                <li>
-                  Go to{' '}
-                  <a
-                    href="https://github.com/settings/emails"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
-                  >
-                    GitHub Email Settings
-                  </a>
-                </li>
-                <li>Uncheck "Keep my email addresses private"</li>
-                <li>
-                  Or go to{' '}
-                  <a
-                    href="https://github.com/settings/profile"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
-                  >
-                    Profile Settings
-                  </a>{' '}
-                  and set a public email
-                </li>
-                <li>Try signing in with GitHub again</li>
-              </ol>
-              <p className="text-amber-600 dark:text-amber-500 text-xs">
-                Alternatively, you can sign up using email and password instead.
-              </p>
-            </div>
-          )}
-
-          <p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">
-            Redirecting to login page in 3 seconds...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
-      <div className="text-center">
-        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-          Completing login...
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
-      </div>
-    </div>
-  );
-};
-
-export default CallbackPage;
diff --git a/apps/hackathon/src/app/auth/forgot-password/page.tsx b/apps/hackathon/src/app/auth/forgot-password/page.tsx
deleted file mode 100644
index 5a6c4d3..0000000
--- a/apps/hackathon/src/app/auth/forgot-password/page.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import { useForgotPassword } from '@imphnen-frontend-service/service';
-import { Link, useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import ThemeToggle from '../../../components/theme-toggle';
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [emailSent, setEmailSent] = useState(false);
-  const navigate = useNavigate();
-  const forgotPasswordMutation = useForgotPassword();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!email) {
-      toast.error('Please enter your email');
-      return;
-    }
-
-    try {
-      await forgotPasswordMutation.mutateAsync({ email });
-
-      setEmailSent(true);
-      toast.success('Password reset email sent! Check your inbox.');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to send reset email');
-    }
-  };
-
-  if (emailSent) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
-              <span className="text-3xl">✓</span>
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              We've sent a password reset link to <strong>{email}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Click the link in the email to reset your password. The link will
-              expire in 1 hour.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">
-                Back to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setEmailSent(false)}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              Send another email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/auth/login')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Login
-          </button>
-          <ThemeToggle />
-        </div>
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Forgot Password?
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            No worries, we'll send you reset instructions
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Email Address
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={forgotPasswordMutation.isPending}
-              className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={forgotPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {forgotPasswordMutation.isPending ? 'Sending...' : 'Send Reset Link'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/hackathon/src/app/auth/reset-password/page.tsx b/apps/hackathon/src/app/auth/reset-password/page.tsx
deleted file mode 100644
index ac509d2..0000000
--- a/apps/hackathon/src/app/auth/reset-password/page.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useResetPassword, useAuthStore } from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-
-export default function ResetPasswordPage() {
-  const navigate = useNavigate();
-  const { clearSession } = useAuthStore();
-  const resetPasswordMutation = useResetPassword();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  useEffect(() => {
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const queryParams = new URLSearchParams(globalThis.location.search);
-    const token = hashParams.get('access_token') || queryParams.get('access_token');
-
-    if (token) {
-      setAccessToken(token);
-    } else {
-      toast.error('Invalid or expired reset link');
-      setTimeout(() => navigate('/auth/forgot-password'), 2000);
-    }
-  }, [navigate]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return;
-    }
-
-    if (!accessToken) {
-      toast.error('Invalid reset token');
-      return;
-    }
-
-    try {
-      await resetPasswordMutation.mutateAsync({
-        access_token: accessToken,
-        new_password: password,
-      });
-
-      toast.success('Password updated successfully!');
-
-      clearSession();
-      navigate('/auth/login');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to reset password');
-    }
-  };
-
-  if (!accessToken) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600 dark:text-gray-400">
-            Verifying reset link...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Set New Password
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            Enter your new password below
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              New Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Confirm New Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={resetPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {resetPasswordMutation.isPending ? 'Updating...' : 'Update Password'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/hackathon/src/app/auth/signup/page.tsx b/apps/hackathon/src/app/auth/signup/page.tsx
deleted file mode 100644
index 97eaadd..0000000
--- a/apps/hackathon/src/app/auth/signup/page.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import { useState } from 'react';
-import { useGitHubAuth, useSignup } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../../../components/theme-toggle';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const signupSchema = z
-  .object({
-    fullname: z
-      .string()
-      .min(1, 'Full name is required')
-      .min(2, 'Full name must be at least 2 characters'),
-    email: z
-      .string()
-      .min(1, 'Email is required')
-      .email('Please enter a valid email address'),
-    password: z
-      .string()
-      .min(1, 'Password is required')
-      .min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(1, 'Please confirm your password'),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  });
-
-type SignupFormData = z.infer<typeof signupSchema>;
-
-const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z');
-
-export default function SignupPage() {
-  const navigate = useNavigate();
-
-  const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE;
-  const { signInWithGitHub } = useGitHubAuth();
-  const signupMutation = useSignup();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [registrationSuccess, setRegistrationSuccess] = useState(false);
-  const [registeredEmail, setRegisteredEmail] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = useForm<SignupFormData>({
-    resolver: zodResolver(signupSchema),
-    mode: 'onChange',
-  });
-
-  const onSubmit = async (data: SignupFormData) => {
-    setError(null);
-
-    try {
-      const result = await signupMutation.mutateAsync({
-        email: data.email,
-        password: data.password,
-        fullname: data.fullname,
-      });
-      toast.success(result.message);
-      setRegisteredEmail(data.email);
-      setRegistrationSuccess(true);
-    } catch (err) {
-      console.error('[Signup] Email signup failed:', err);
-      setError((err as Error).message || 'Signup failed');
-    }
-  };
-
-  if (isRegistrationClosed) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
-              <Icon
-                icon="mdi:clock-alert"
-                className="text-3xl text-red-600 dark:text-red-400"
-              />
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Registration Closed
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              The registration period for this hackathon has ended.
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Thank you for your interest! Registration closed on November 30, 2025 at 23:29 WIB.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
-                Go to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => navigate('/')}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
-            >
-              Back to Homepage
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (registrationSuccess) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
-              <Icon
-                icon="mdi:email-check"
-                className="text-3xl text-green-600 dark:text-green-400"
-              />
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              We've sent an activation link to{' '}
-              <strong>{registeredEmail}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Click the link in the email to activate your account. The link
-              will expire in 24 hours.
-            </p>
-
-            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
-              <p className="text-sm text-amber-700 dark:text-amber-300">
-                Don't forget to check your spam folder if you don't see the
-                email.
-              </p>
-            </div>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
-                Go to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setRegistrationSuccess(false)}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
-            >
-              Register with different email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-
-      const result = await signInWithGitHub();
-
-      if (result?.url) {
-        globalThis.location.href = result.url;
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
-    } catch (err) {
-      console.error('[Signup] GitHub login failed:', err);
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
-    }
-  };
-
-  const inputBaseClass =
-    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed';
-  const inputErrorClass = 'border-red-500 dark:border-red-500';
-  const inputNormalClass = 'border-gray-300 dark:border-gray-600';
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Homepage
-          </button>
-          <ThemeToggle />
-        </div>
-
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Create Account
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            Join the hackathon community
-          </p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div>
-            <label
-              htmlFor="fullname"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Full Name
-            </label>
-            <input
-              id="fullname"
-              type="text"
-              {...register('fullname')}
-              placeholder="John Doe"
-              disabled={signupMutation.isPending}
-              className={`${inputBaseClass} ${
-                errors.fullname ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.fullname && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.fullname.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              {...register('email')}
-              placeholder="your@email.com"
-              disabled={signupMutation.isPending}
-              className={`${inputBaseClass} ${
-                errors.email ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.email && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                {...register('password')}
-                placeholder="••••••••"
-                disabled={signupMutation.isPending}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.password ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-            {errors.password && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.password.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Confirm Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                {...register('confirmPassword')}
-                placeholder="••••••••"
-                disabled={signupMutation.isPending}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.confirmPassword ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-            {errors.confirmPassword && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.confirmPassword.message}
-              </p>
-            )}
-          </div>
-
-          <button
-            type="submit"
-            disabled={!isValid || signupMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {signupMutation.isPending
-              ? 'Creating account...'
-              : 'Create Account'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
-            OR
-          </span>
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
-          </span>
-        </button>
-
-        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 dark:text-primary-400 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign up to work.
-        </p>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-gray-400 text-sm">
-            Already have an account?{' '}
-            <Link
-              to="/auth/login"
-              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
-            >
-              Sign in
-            </Link>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 dark:text-gray-500 text-xs">
-            By signing up, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/hackathon/src/app/dashboard/layout.tsx b/apps/hackathon/src/app/dashboard/layout.tsx
deleted file mode 100644
index c83f6a1..0000000
--- a/apps/hackathon/src/app/dashboard/layout.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router';
-import { Sidebar } from '../../components/sidebar';
-
-const DashboardLayout: FC = (): ReactElement => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-
-      <div className="flex-1 flex flex-col">
-
-        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          >
-            <svg
-              className="w-6 h-6 text-gray-600 dark:text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
-            Hackathon
-          </h1>
-        </div>
-
-        <main className="flex-1 overflow-auto">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardLayout;
diff --git a/apps/hackathon/src/app/error.tsx b/apps/hackathon/src/app/error.tsx
deleted file mode 100644
index 3859b00..0000000
--- a/apps/hackathon/src/app/error.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/hackathon/src/app/layout.tsx b/apps/hackathon/src/app/layout.tsx
deleted file mode 100644
index df0c86e..0000000
--- a/apps/hackathon/src/app/layout.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  Outlet,
-  ScrollRestoration,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { useAuthStore, useUserMe } from '@imphnen-frontend-service/service';
-
-const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
-
-export default function RootLayout() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const { data: userData, isLoading: isUserLoading } = useUserMe();
-  const [isChecking, setIsChecking] = useState(true);
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      const pathname = location.pathname;
-
-      if (pathname.startsWith('/hackathons')) {
-        setIsChecking(false);
-        return;
-      }
-
-      if (pathname === '/auth/callback') {
-        setIsChecking(false);
-        return;
-      }
-
-      if (pathname.startsWith('/auth')) {
-        if (session && pathname !== '/auth/reset-password') {
-          navigate('/dashboard', { replace: true });
-          setIsChecking(false);
-          return;
-        }
-        setIsChecking(false);
-        return;
-      }
-
-      if (pathname === '/') {
-        setIsChecking(false);
-        return;
-      }
-
-      if (pathname.startsWith('/certificate/')) {
-        setIsChecking(false);
-        return;
-      }
-
-      if (!session) {
-        navigate('/auth/login', { replace: true });
-        setIsChecking(false);
-        return;
-      }
-
-      if (isUserLoading) {
-        return;
-      }
-
-      if (!ONBOARDING_ROUTES.has(pathname)) {
-        const hasLocation = !!userData?.data?.location || !!session?.user?.location;
-
-        if (!hasLocation) {
-          navigate('/onboarding/user', { replace: true });
-          setIsChecking(false);
-          return;
-        }
-      }
-
-      setIsChecking(false);
-    };
-
-    checkAuth();
-  }, [location.pathname, navigate, session, userData, isUserLoading]);
-
-  if (isChecking) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600 dark:text-neutral-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Outlet />
-      <ScrollRestoration />
-    </>
-  );
-}
diff --git a/apps/hackathon/src/app/profile/page.tsx b/apps/hackathon/src/app/profile/page.tsx
deleted file mode 100644
index b6e4a26..0000000
--- a/apps/hackathon/src/app/profile/page.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { FC, ReactElement, useState, useEffect } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useForm, Controller } from 'react-hook-form';
-import {
-  userEditProfileSchema,
-  TUserEditProfileForm,
-  useUpdateUserMe,
-  useUploadAvatar,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-import { CitySelect } from '../../components/city-select';
-import { Icon } from '@iconify/react';
-
-const ROLE_OPTIONS = [
-  'Frontend Developer',
-  'Backend Developer',
-  'Full Stack Developer',
-  'DevOps Engineer',
-  'UI/UX Designer',
-  'Product Manager',
-  'Data Scientist',
-  'Mobile Developer',
-];
-
-type ProfileModalProps = {
-  open: boolean;
-  onClose: () => void;
-};
-
-const ProfilePage: FC<ProfileModalProps> = ({
-  open,
-  onClose,
-}): ReactElement | null => {
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarPreview, setAvatarPreview] = useState<string>('');
-
-  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } =
-    useUploadAvatar();
-  const { session } = useAuthStore();
-
-  const form = useForm<TUserEditProfileForm>({
-    resolver: zodResolver(userEditProfileSchema),
-    mode: 'all',
-    defaultValues: {
-      fullname: session?.user?.fullname || '',
-      avatar: session?.user?.avatar || null,
-      location: session?.user?.location || '',
-      bio: session?.user?.bio || '',
-      skills: session?.user?.skills || [],
-    },
-  });
-
-  useEffect(() => {
-    if (session?.user?.avatar && !avatarPreview) {
-      setAvatarPreview(session.user.avatar);
-    }
-    if (session?.user?.fullname) {
-      form.setValue('fullname', session.user.fullname);
-    }
-    if (session?.user?.location) {
-      form.setValue('location', session.user.location);
-    }
-    if (session?.user?.bio) {
-      form.setValue('bio', session.user.bio);
-    }
-    if (session?.user?.skills) {
-      form.setValue('skills', session.user.skills);
-    }
-  }, [
-    session?.user?.avatar,
-    session?.user?.fullname,
-    session?.user?.location,
-    session?.user?.bio,
-    session?.user?.skills,
-    avatarPreview,
-    form,
-  ]);
-
-  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      if (file.size > 2 * 1024 * 1024) {
-        toast.error('The file is too large. Maximum size is 2MB.');
-        e.target.value = '';
-        return;
-      }
-
-      if (!file.type.startsWith('image/')) {
-        toast.error('The file must be an image');
-        e.target.value = '';
-        return;
-      }
-
-      setAvatarFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setAvatarPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      let avatarUrl = session?.user?.avatar || null;
-
-      if (avatarFile) {
-        const uploadResult = await uploadAvatar(avatarFile);
-        avatarUrl = uploadResult.data.url;
-      }
-
-      await updateUser({
-        fullname: data.fullname,
-        avatar: avatarUrl,
-        location: data.location,
-        bio: data.bio,
-        skills: data.skills,
-      });
-
-      toast.success('Profile updated successfully!');
-
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      onClose();
-    } catch (error) {
-      console.error('Profile update failed:', error);
-      toast.error(
-        `Failed to update profile: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`
-      );
-    }
-  });
-
-  const isLoading = isUpdating || isUploading;
-
-  return open ? (
-    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
-      <div className="min-h-full flex items-center justify-center">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
-          <div className="mb-6">
-            <div className="flex items-center justify-between mb-2">
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-                Edit Profile
-              </h1>
-              <button
-                type="button"
-                onClick={onClose}
-                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
-                aria-label="Close profile modal"
-              >
-                <svg
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-            <p className="text-gray-600 font-sans dark:text-neutral-400">
-              Update your photo and name
-            </p>
-          </div>
-
-          <form onSubmit={onSubmit} className="space-y-6">
-            <div className="flex flex-col items-center space-y-4">
-              <div className="relative group">
-                {avatarPreview ? (
-                  <img
-                    src={avatarPreview}
-                    alt="Avatar preview"
-                    className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
-                  />
-                ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
-                    <Icon
-                      icon="ic:baseline-person"
-                      width="48"
-                      height="48"
-                      className="text-gray-400 dark:text-neutral-500"
-                    />
-                  </div>
-                )}
-                <label
-                  htmlFor="avatar"
-                  className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
-                >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                  <input
-                    id="avatar"
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={handleAvatarChange}
-                    disabled={isLoading}
-                  />
-                </label>
-              </div>
-              <p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
-                Click the camera icon to change your photo
-                <br />
-                Format: JPG, PNG. Max 2MB
-              </p>
-            </div>
-
-            <ControlledInputField
-              control={form.control}
-              label="Full Name"
-              placeholder="Enter your full name"
-              name="fullname"
-              size="lg"
-            />
-
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
-                City
-              </label>
-              <Controller
-                control={form.control}
-                name="location"
-                render={({ field, fieldState }) => (
-                  <CitySelect
-                    value={field.value ?? ''}
-                    onChange={field.onChange}
-                    error={fieldState.error?.message}
-                    placeholder="Search your city..."
-                  />
-                )}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
-                Role / Skills
-              </label>
-              <Controller
-                control={form.control}
-                name="skills"
-                render={({ field }) => (
-                  <div className="space-y-2">
-                    <div className="grid grid-cols-2 gap-2">
-                      {ROLE_OPTIONS.map((role) => (
-                        <label
-                          key={role}
-                          className="flex items-center space-x-2 cursor-pointer font-sans"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={field.value?.includes(role)}
-                            onChange={(e) => {
-                              const newValue = e.target.checked
-                                ? [...(field.value || []), role]
-                                : (field.value || []).filter((v) => v !== role);
-                              field.onChange(newValue);
-                            }}
-                            className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
-                          />
-                          <span className="text-sm dark:text-neutral-300">
-                            {role}
-                          </span>
-                        </label>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
-                Bio{' '}
-                <span className="text-gray-400 dark:text-neutral-500">
-                  (Optional)
-                </span>
-              </label>
-              <Controller
-                control={form.control}
-                name="bio"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <Textarea
-                      {...field}
-                      placeholder="Tell us about yourself..."
-                      rows={4}
-                      className="w-full font-sans"
-                      size="lg"
-                    />
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">
-                        {fieldState.error.message}
-                      </p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            <div className="flex space-x-3 pt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={onClose}
-                disabled={isLoading}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={isLoading || !form.formState.isValid}
-              >
-                {isLoading ? (
-                  <span className="flex items-center justify-center">
-                    <svg
-                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle
-                        className="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        strokeWidth="4"
-                      />
-                      <path
-                        className="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      />
-                    </svg>
-                    Saving...
-                  </span>
-                ) : (
-                  'Save'
-                )}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  ) : null;
-};
-
-export default ProfilePage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/layout.tsx b/apps/hackathon/src/app/teams/[teamId]/layout.tsx
deleted file mode 100644
index 1ef7f2a..0000000
--- a/apps/hackathon/src/app/teams/[teamId]/layout.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router';
-import { Sidebar } from '../../../components/sidebar';
-
-const TeamDetailLayout: FC = (): ReactElement => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-
-      <div className="flex-1 flex flex-col">
-
-        <div className="lg:hidden sticky top-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          >
-            <svg
-              className="w-6 h-6 text-gray-600 dark:text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
-            Hackathon
-          </h1>
-        </div>
-
-        <main className="flex-1 overflow-auto">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default TeamDetailLayout;
diff --git a/apps/hackathon/src/app/teams/layout.tsx b/apps/hackathon/src/app/teams/layout.tsx
deleted file mode 100644
index 92950bc..0000000
--- a/apps/hackathon/src/app/teams/layout.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router';
-import { Sidebar } from '../../components/sidebar';
-
-const TeamsLayout: FC = (): ReactElement => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-
-      <div className="flex-1 flex flex-col">
-
-        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 z-10">
-          <div className="flex items-center">
-            <button
-              onClick={() => setSidebarOpen(true)}
-              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            >
-              <svg
-                className="w-6 h-6 text-gray-600 dark:text-gray-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
-            <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
-              Hackathon
-            </h1>
-          </div>
-        </div>
-
-        <main className="flex-1">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default TeamsLayout;
diff --git a/apps/hackathon/src/app/users/[userId]/layout.tsx b/apps/hackathon/src/app/users/[userId]/layout.tsx
deleted file mode 100644
index 049b0b2..0000000
--- a/apps/hackathon/src/app/users/[userId]/layout.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router';
-import { Sidebar } from '../../../components/sidebar';
-
-const UserDetailLayout: FC = (): ReactElement => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-
-      <div className="flex-1 flex flex-col overflow-auto">
-
-        <div className="lg:hidden bg-white dark:bg-gray-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          >
-            <svg
-              className="w-6 h-6 text-gray-600 dark:text-neutral-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
-            Hackathon
-          </h1>
-        </div>
-
-        <main className="flex-1 overflow-auto">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default UserDetailLayout;
diff --git a/apps/hackathon/src/main.tsx b/apps/hackathon/src/main.tsx
index e1f1205..352d760 100644
--- a/apps/hackathon/src/main.tsx
+++ b/apps/hackathon/src/main.tsx
@@ -1,35 +1,26 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
   ModalLoginProvider,
   QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import { ThemeProvider } from './components/theme-provider';
-import './index.css';
+} from '@imphnen-frontend-service/utils'
+import { Toaster } from 'sonner'
+import { ThemeProvider } from './components/theme-provider'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+const router = createRouter({ routeTree })
 
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
-const router = createBrowserRouter([
-  {
-    ...routes,
-  },
-]);
+const rootElement = document.getElementById('root')
 
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
@@ -42,4 +33,4 @@ createRoot(rootElement).render(
       </QueryProvider>
     </ThemeProvider>
   </StrictMode>
-);
+)
diff --git a/apps/hackathon/src/middleware.ts b/apps/hackathon/src/middleware.ts
deleted file mode 100644
index b075a92..0000000
--- a/apps/hackathon/src/middleware.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { SessionUser } from '@imphnen-frontend-service/service';
-import { hackathonApi, SessionToken } from '@imphnen-frontend-service/service';
-import { LoaderFunctionArgs, redirect } from 'react-router';
-
-const mappingPublicRoutes = [
-  '/',
-];
-
-const mappingOnboardingRoutes = [
-  '/onboarding/user',
-];
-
-const mappingRoutePermissions = [
-  {
-    path: '/dashboard',
-    permissions: [],
-  },
-  {
-    path: '/teams/browse',
-    permissions: [],
-  },
-  {
-    path: '/teams/create',
-    permissions: [],
-  },
-];
-
-const mappingPublicPrefixRoutes = [
-  '/hackathons',
-];
-
-const onboardingCache = new Map<string, { hasLocation: boolean; timestamp: number }>();
-const CACHE_DURATION = 5000;
-
-export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-
-  const tokenData = SessionToken.get();
-  const user = SessionUser.get();
-  const isAuthenticated = !!tokenData?.token?.access_token;
-
-  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
-    return null;
-  }
-
-  if (mappingPublicRoutes.includes(pathname)) {
-    return null;
-  }
-
-  if (pathname === '/auth/callback') {
-    return null;
-  }
-
-  if (pathname.startsWith('/auth')) {
-    if (isAuthenticated) return redirect('/dashboard');
-    return null;
-  }
-
-  if (!isAuthenticated) {
-    return redirect('/auth/login');
-  }
-
-  if (!mappingOnboardingRoutes.includes(pathname)) {
-    try {
-      const userId = user?.id;
-      if (!userId) {
-        return redirect('/auth/login');
-      }
-
-      const now = Date.now();
-
-      const cached = onboardingCache.get(userId);
-      let hasLocation = false;
-
-      if (cached && (now - cached.timestamp) < CACHE_DURATION) {
-        hasLocation = cached.hasLocation;
-      } else {
-        if (user?.location) {
-          hasLocation = true;
-        } else {
-          try {
-            const response = await hackathonApi.get('/users/me');
-            hasLocation = !!response.data?.data?.location;
-          } catch {
-            hasLocation = !!user?.location;
-          }
-        }
-
-        onboardingCache.set(userId, { hasLocation, timestamp: now });
-      }
-
-      if (!hasLocation) {
-        return redirect('/onboarding/user');
-      }
-    } catch (error) {
-      console.error('[Middleware] Unexpected error checking onboarding:', error);
-      return null;
-    }
-  }
-
-  const userPermissions =
-    user?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return redirect('/dashboard');
-    }
-  }
-
-  return null;
-};
diff --git a/apps/hackathon/src/routeTree.gen.ts b/apps/hackathon/src/routeTree.gen.ts
new file mode 100644
index 0000000..42aaf68
--- /dev/null
+++ b/apps/hackathon/src/routeTree.gen.ts
@@ -0,0 +1,3 @@
+// This file is auto-generated by TanStack Router
+
+export const routeTree = {} as any
diff --git a/apps/hackathon/src/routes/__root.tsx b/apps/hackathon/src/routes/__root.tsx
new file mode 100644
index 0000000..f463b79
--- /dev/null
+++ b/apps/hackathon/src/routes/__root.tsx
@@ -0,0 +1,5 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})
diff --git a/apps/hackathon/src/routes/_authenticated.tsx b/apps/hackathon/src/routes/_authenticated.tsx
new file mode 100644
index 0000000..7e0eaf9
--- /dev/null
+++ b/apps/hackathon/src/routes/_authenticated.tsx
@@ -0,0 +1,92 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { SessionToken, SessionUser, hackathonApi } from '@imphnen-frontend-service/service'
+import { useState } from 'react'
+import { Sidebar } from '../components/sidebar'
+
+const onboardingCache = new Map<string, { hasLocation: boolean; timestamp: number }>()
+const CACHE_DURATION = 5000
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ location }) => {
+    const session = SessionToken.get()
+    if (!session?.token?.access_token) {
+      throw redirect({ to: '/auth/login' })
+    }
+
+    const user = SessionUser.get()
+    const pathname = location.pathname
+
+    if (!pathname.startsWith('/onboarding')) {
+      const userId = user?.id
+      if (!userId) {
+        throw redirect({ to: '/auth/login' })
+      }
+
+      const now = Date.now()
+      const cached = onboardingCache.get(userId)
+      let hasLocation = false
+
+      if (cached && now - cached.timestamp < CACHE_DURATION) {
+        hasLocation = cached.hasLocation
+      } else {
+        if (user?.location) {
+          hasLocation = true
+        } else {
+          try {
+            const response = await hackathonApi.get('/users/me')
+            hasLocation = !!response.data?.data?.location
+          } catch {
+            hasLocation = !!user?.location
+          }
+        }
+
+        onboardingCache.set(userId, { hasLocation, timestamp: now })
+      }
+
+      if (!hasLocation) {
+        throw redirect({ to: '/onboarding/user' })
+      }
+    }
+  },
+  component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col">
+        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center z-30">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <svg
+              className="w-6 h-6 text-gray-600 dark:text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
+            Hackathon
+          </h1>
+        </div>
+
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hackathon/src/routes/_authenticated/_components/profile-modal.tsx b/apps/hackathon/src/routes/_authenticated/_components/profile-modal.tsx
new file mode 100644
index 0000000..e64475d
--- /dev/null
+++ b/apps/hackathon/src/routes/_authenticated/_components/profile-modal.tsx
@@ -0,0 +1,243 @@
+import { FC, ReactElement, useState, useEffect } from 'react';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  userEditProfileSchema,
+  TUserEditProfileForm,
+  useUpdateUserMe,
+  useUploadAvatar,
+  useAuthStore,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';
+
+const ROLE_OPTIONS = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+type ProfileModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const ProfilePage: FC<ProfileModalProps> = ({
+  open,
+  onClose,
+}): ReactElement | null => {
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string>('');
+
+  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
+  const { mutateAsync: uploadAvatar, isPending: isUploading } =
+    useUploadAvatar();
+  const { session } = useAuthStore();
+
+  const form = useForm<TUserEditProfileForm>({
+    resolver: zodResolver(userEditProfileSchema),
+    mode: 'all',
+    defaultValues: {
+      fullname: session?.user?.fullname || '',
+      avatar: session?.user?.avatar || null,
+      location: session?.user?.location || '',
+      bio: session?.user?.bio || '',
+      skills: session?.user?.skills || [],
+    },
+  });
+
+  useEffect(() => {
+    if (session?.user?.avatar && !avatarPreview) {
+      setAvatarPreview(session.user.avatar);
+    }
+    if (session?.user?.fullname) {
+      form.setValue('fullname', session.user.fullname);
+    }
+    if (session?.user?.location) {
+      form.setValue('location', session.user.location);
+    }
+    if (session?.user?.bio) {
+      form.setValue('bio', session.user.bio);
+    }
+    if (session?.user?.skills) {
+      form.setValue('skills', session.user.skills);
+    }
+  }, [
+    session?.user?.avatar,
+    session?.user?.fullname,
+    session?.user?.location,
+    session?.user?.bio,
+    session?.user?.skills,
+    avatarPreview,
+    form,
+  ]);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 2 * 1024 * 1024) {
+        toast.error('The file is too large. Maximum size is 2MB.');
+        e.target.value = '';
+        return;
+      }
+
+      if (!file.type.startsWith('image/')) {
+        toast.error('The file must be an image');
+        e.target.value = '';
+        return;
+      }
+
+      setAvatarFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAvatarPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      let avatarUrl = session?.user?.avatar || null;
+
+      if (avatarFile) {
+        const uploadResult = await uploadAvatar(avatarFile);
+        avatarUrl = uploadResult.data.url;
+      }
+
+      await updateUser({
+        fullname: data.fullname,
+        avatar: avatarUrl,
+        location: data.location,
+        bio: data.bio,
+        skills: data.skills,
+      });
+
+      toast.success('Profile updated successfully!');
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      onClose();
+    } catch (error) {
+      console.error('Profile update failed:', error);
+      toast.error(
+        `Failed to update profile: ${
+          error instanceof Error ? error.message : 'Unknown error'
+        }`
+      );
+    }
+  });
+
+  const isLoading = isUpdating || isUploading;
+
+  return open ? (
+    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
+      <div className="min-h-full flex items-center justify-center">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
+          <div className="mb-6">
+            <div className="flex items-center justify-between mb-2">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Edit Profile
+              </h1>
+              <button
+                type="button"
+                onClick={onClose}
+                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
+                aria-label="Close profile modal"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <p className="text-gray-600 font-sans dark:text-neutral-400">Update your photo and name</p>
+          </div>
+
+          <form onSubmit={onSubmit} className="space-y-6">
+            <div className="flex flex-col items-center space-y-4">
+              <div className="relative group">
+                {avatarPreview ? (
+                  <img src={avatarPreview} alt="Avatar preview" className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors" />
+                ) : (
+                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
+                    <Icon icon="ic:baseline-person" width="48" height="48" className="text-gray-400 dark:text-neutral-500" />
+                  </div>
+                )}
+                <label htmlFor="avatar" className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  <input id="avatar" type="file" accept="image/*" className="hidden" onChange={handleAvatarChange} disabled={isLoading} />
+                </label>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
+                Click the camera icon to change your photo<br />Format: JPG, PNG. Max 2MB
+              </p>
+            </div>
+
+            <ControlledInputField control={form.control} label="Full Name" placeholder="Enter your full name" name="fullname" size="lg" />
+
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">City</label>
+              <Controller control={form.control} name="location" render={({ field, fieldState }) => (
+                <CitySelect value={field.value ?? ''} onChange={field.onChange} error={fieldState.error?.message} placeholder="Search your city..." />
+              )} />
+            </div>
+
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">Role / Skills</label>
+              <Controller control={form.control} name="skills" render={({ field }) => (
+                <div className="space-y-2">
+                  <div className="grid grid-cols-2 gap-2">
+                    {ROLE_OPTIONS.map((role) => (
+                      <label key={role} className="flex items-center space-x-2 cursor-pointer font-sans">
+                        <input type="checkbox" checked={field.value?.includes(role)} onChange={(e) => { const newValue = e.target.checked ? [...(field.value || []), role] : (field.value || []).filter((v) => v !== role); field.onChange(newValue); }} className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800" />
+                        <span className="text-sm dark:text-neutral-300">{role}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              )} />
+            </div>
+
+            <div className="space-y-2">
+              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">Bio <span className="text-gray-400 dark:text-neutral-500">(Optional)</span></label>
+              <Controller control={form.control} name="bio" render={({ field, fieldState }) => (
+                <div>
+                  <Textarea {...field} placeholder="Tell us about yourself..." rows={4} className="w-full font-sans" size="lg" />
+                  {fieldState.error && <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>}
+                </div>
+              )} />
+            </div>
+
+            <div className="flex space-x-3 pt-4">
+              <Button type="button" variant="secondary" className="flex-1" onClick={onClose} disabled={isLoading}>Cancel</Button>
+              <Button type="submit" className="flex-1" disabled={isLoading || !form.formState.isValid}>
+                {isLoading ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    Saving...
+                  </span>
+                ) : 'Save'}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ProfilePage;
diff --git a/apps/hackathon/src/app/dashboard/page.tsx b/apps/hackathon/src/routes/_authenticated/dashboard.tsx
similarity index 98%
rename from apps/hackathon/src/app/dashboard/page.tsx
rename to apps/hackathon/src/routes/_authenticated/dashboard.tsx
index 592809a..b1bdc3e 100644
--- a/apps/hackathon/src/app/dashboard/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/dashboard.tsx
@@ -1,18 +1,21 @@
 import { FC, ReactElement, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate } from 'react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import {
   useMyTeams,
   useMyInvitations,
   useRespondToInvitation,
   useAuthStore,
-  useWinners,
-} from '@imphnen-frontend-service/service';
+  useWinners } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Icon } from '@iconify/react';
-import ProfilePage from '../profile/page';
+import ProfilePage from './_components/profile-modal';
 import { encodeWinnerCertificateId } from '../../utils/certificate';
 
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardPage,
+})
+
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
 
 const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
@@ -159,7 +162,7 @@ const DashboardPage: FC = (): ReactElement => {
                   const team = myTeams[0] as { id?: string } | null | undefined;
                   if (!team?.id) return;
                   const certId = await encodeWinnerCertificateId(team.id);
-                  navigate(`/certificate/winner/${encodeURIComponent(certId)}`);
+                  navigate({ to: `/certificate/winner/${encodeURIComponent(certId)}` });
                 }}
                 className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
               >
@@ -475,4 +478,3 @@ const DashboardPage: FC = (): ReactElement => {
   );
 };
 
-export default DashboardPage;
diff --git a/apps/hackathon/src/app/onboarding/user/page.tsx b/apps/hackathon/src/routes/_authenticated/onboarding/user.tsx
similarity index 97%
rename from apps/hackathon/src/app/onboarding/user/page.tsx
rename to apps/hackathon/src/routes/_authenticated/onboarding/user.tsx
index 79e19cc..50d0bcf 100644
--- a/apps/hackathon/src/app/onboarding/user/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/onboarding/user.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useForm, Controller } from 'react-hook-form';
 import {
   userOnboardingSchema,
@@ -9,14 +9,17 @@ import {
   useUpdateUserMe,
   useUploadAvatar,
   useUserMe,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 
 import { CitySelect } from '../../../components/city-select';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/onboarding/user')({
+  component: UserOnboardingPage,
+})
+
 const ROLE_OPTIONS = [
   'Frontend Developer',
   'Backend Developer',
@@ -267,4 +270,3 @@ const UserOnboardingPage: FC = (): ReactElement => {
   );
 };
 
-export default UserOnboardingPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId.tsx
similarity index 98%
rename from apps/hackathon/src/app/teams/[teamId]/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId.tsx
index 264a1ea..b18b250 100644
--- a/apps/hackathon/src/app/teams/[teamId]/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useParams, useNavigate } from 'react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import {
   useTeamById,
   useTeamMembers,
@@ -10,11 +10,13 @@ import {
   useLeaveTeam,
   useDeleteTeam,
   ETeamMemberRole,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId')({
+  component: TeamDashboardPage })
+
 const MAX_TEAM_MEMBERS = 5;
 
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
@@ -50,7 +52,7 @@ const ImageWithLoader: FC<{
 };
 
 const TeamDashboardPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
 
@@ -153,7 +155,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
     try {
       await leaveTeam(teamId);
       toast.success('You have left the team');
-      navigate('/dashboard');
+      navigate({ to: '/dashboard' });
     } catch (error) {
       console.error('Failed to leave team:', error);
       toast.error('Failed to leave team');
@@ -166,7 +168,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
     try {
       await deleteTeam(teamId);
       toast.success('Team deleted successfully');
-      navigate('/dashboard');
+      navigate({ to: '/dashboard' });
     } catch (error: any) {
       console.error('Failed to delete team:', error);
       toast.error(error?.message || 'Failed to delete team');
@@ -242,7 +244,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
           Team not found
         </h2>
-        <Button onClick={() => navigate('/dashboard')}>
+        <Button onClick={() => navigate({ to: '/dashboard' })}>
           Back to Dashboard
         </Button>
       </div>
@@ -525,7 +527,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
               </h3>
               {team.leader && (
                 <button
-                  onClick={() => navigate(`/users/${team.leader.id}`)}
+                  onClick={() => navigate({ to: `/users/${team.leader.id}` })}
                   className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
                 >
                   {team.leader.avatar ? (
@@ -561,7 +563,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
                 {members.map((member: any) => (
                   <button
                     key={member.id}
-                    onClick={() => navigate(`/users/${member.user.id}`)}
+                    onClick={() => navigate({ to: `/users/${member.user.id}` })}
                     className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
                   >
                     {member.user?.avatar ? (
@@ -876,4 +878,3 @@ const TeamDashboardPage: FC = (): ReactElement => {
   );
 };
 
-export default TeamDashboardPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/chat/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId/chat.tsx
similarity index 97%
rename from apps/hackathon/src/app/teams/[teamId]/chat/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId/chat.tsx
index ffe6b24..76da2e1 100644
--- a/apps/hackathon/src/app/teams/[teamId]/chat/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId/chat.tsx
@@ -1,18 +1,20 @@
 import { FC, ReactElement, useState, useRef, useEffect, useMemo } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import {
   useTeamById,
   useTeamMessages,
   useSendMessage,
   useDeleteMessage,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId/chat')({
+  component: TeamChatPage })
+
 const TeamChatPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [message, setMessage] = useState('');
@@ -117,7 +119,7 @@ const TeamChatPage: FC = (): ReactElement => {
             </div>
             <Button
               variant="secondary"
-              onClick={() => navigate(`/teams/${teamId}`)}
+              onClick={() => navigate({ to: `/teams/${teamId}` })}
             >
               Back to Team
             </Button>
@@ -304,4 +306,3 @@ const TeamChatPage: FC = (): ReactElement => {
   );
 };
 
-export default TeamChatPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/edit/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId/edit.tsx
similarity index 96%
rename from apps/hackathon/src/app/teams/[teamId]/edit/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId/edit.tsx
index ae08037..bd62509 100644
--- a/apps/hackathon/src/app/teams/[teamId]/edit/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId/edit.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useForm, Controller } from 'react-hook-form';
 import {
   teamUpdateSchema,
@@ -10,18 +10,20 @@ import {
   useTeamById,
   ETeamVisibility,
   useUploadFile,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 
 import { CitySelect } from '../../../../components/city-select';
 import { Icon } from '@iconify/react';
 import { toast } from 'sonner';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId/edit')({
+  component: EditTeamPage })
+
 const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
 const EditTeamPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [logoFile, setLogoFile] = useState<File | null>(null);
@@ -43,8 +45,7 @@ const EditTeamPage: FC = (): ReactElement => {
 
   const form = useForm<TTeamUpdateForm>({
     resolver: zodResolver(teamUpdateSchema),
-    mode: 'all',
-  });
+    mode: 'all' });
 
   useEffect(() => {
     if (team) {
@@ -54,8 +55,7 @@ const EditTeamPage: FC = (): ReactElement => {
         city: team.city,
         visibility: team.visibility,
         logo: team.logo,
-        banner: team.banner,
-      });
+        banner: team.banner });
       if (team.logo) setLogoPreview(team.logo);
       if (team.banner) setBannerPreview(team.banner);
     }
@@ -78,7 +78,7 @@ const EditTeamPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-4">
           Only the team leader can edit team information
         </p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+        <Button onClick={() => navigate({ to: `/teams/${teamId}` })}>
           Back to Team
         </Button>
       </div>
@@ -137,10 +137,9 @@ const EditTeamPage: FC = (): ReactElement => {
       await updateTeam({
         ...data,
         logo: logoUrl,
-        banner: bannerUrl,
-      });
+        banner: bannerUrl });
 
-      navigate(`/teams/${teamId}`);
+      navigate({ to: `/teams/${teamId}` });
     } catch (error) {
       console.error('Failed to update team:', error);
     }
@@ -366,7 +365,7 @@ const EditTeamPage: FC = (): ReactElement => {
                 type="button"
                 variant="secondary"
                 className="flex-1"
-                onClick={() => navigate(`/teams/${teamId}`)}
+                onClick={() => navigate({ to: `/teams/${teamId}` })}
               >
                 Cancel
               </Button>
@@ -385,4 +384,3 @@ const EditTeamPage: FC = (): ReactElement => {
   );
 };
 
-export default EditTeamPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/members/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId/members.tsx
similarity index 97%
rename from apps/hackathon/src/app/teams/[teamId]/members/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId/members.tsx
index 301a491..b2b71cb 100644
--- a/apps/hackathon/src/app/teams/[teamId]/members/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId/members.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement, useState } from 'react';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import {
   useTeamById,
   useTeamMembers,
@@ -11,14 +11,16 @@ import {
   ETeamMemberStatus,
   inviteMemberSchema,
   TInviteMemberForm,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId/members')({
+  component: ManageMembersPage })
+
 const ManageMembersPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [showInviteModal, setShowInviteModal] = useState(false);
@@ -51,8 +53,7 @@ const ManageMembersPage: FC = (): ReactElement => {
 
   const form = useForm<TInviteMemberForm>({
     resolver: zodResolver(inviteMemberSchema),
-    mode: 'all',
-  });
+    mode: 'all' });
 
   if (isLoadingTeam) {
     return (
@@ -71,7 +72,7 @@ const ManageMembersPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-4">
           Only the team leader can manage members
         </p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+        <Button onClick={() => navigate({ to: `/teams/${teamId}` })}>
           Back to Team
         </Button>
       </div>
@@ -142,7 +143,7 @@ const ManageMembersPage: FC = (): ReactElement => {
               </Button>
               <Button
                 variant="secondary"
-                onClick={() => navigate(`/teams/${teamId}`)}
+                onClick={() => navigate({ to: `/teams/${teamId}` })}
               >
                 Back to Team
               </Button>
@@ -378,4 +379,3 @@ const ManageMembersPage: FC = (): ReactElement => {
   );
 };
 
-export default ManageMembersPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId/submission.tsx
similarity index 96%
rename from apps/hackathon/src/app/teams/[teamId]/submission/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId/submission.tsx
index f652060..6c38228 100644
--- a/apps/hackathon/src/app/teams/[teamId]/submission/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId/submission.tsx
@@ -1,11 +1,14 @@
 import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useTeamById, useTeamSubmission, useAuthStore } from '@imphnen-frontend-service/service';
 import { encodeCertificateId } from '../../../../utils/certificate';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId/submission')({
+  component: SubmissionViewPage })
+
 const SubmissionViewPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
 
@@ -29,7 +32,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
         <div className="text-6xl mb-4">📄</div>
         <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
         <p className="text-gray-600 dark:text-gray-400 mb-4">Your team hasn't submitted a project</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
+        <Button onClick={() => navigate({ to: `/teams/${teamId}` })}>Back to Team</Button>
       </div>
     );
   }
@@ -40,8 +43,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
         month: 'long',
         year: 'numeric',
         hour: '2-digit',
-        minute: '2-digit',
-      })
+        minute: '2-digit' })
     : 'Not submitted';
 
   return (
@@ -53,7 +55,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
               <p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
             </div>
-            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
+            <Button variant="secondary" onClick={() => navigate({ to: `/teams/${teamId}` })}>
               Back to Team
             </Button>
           </div>
@@ -124,7 +126,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
                     submission.id,
                     session?.user?.id || ''
                   );
-                  navigate(`/certificate/${encodeURIComponent(certId)}`);
+                  navigate({ to: `/certificate/${encodeURIComponent(certId)}` });
                 }}
                 className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
               >
@@ -252,4 +254,3 @@ const SubmissionViewPage: FC = (): ReactElement => {
   );
 };
 
-export default SubmissionViewPage;
diff --git a/apps/hackathon/src/app/teams/[teamId]/submit/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/$teamId/submit.tsx
similarity index 96%
rename from apps/hackathon/src/app/teams/[teamId]/submit/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/$teamId/submit.tsx
index f54ef95..5eb3d2d 100644
--- a/apps/hackathon/src/app/teams/[teamId]/submit/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/$teamId/submit.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useForm, Controller } from 'react-hook-form';
 import {
   projectSubmissionSchema,
@@ -10,19 +10,21 @@ import {
   useTeamById,
   useTeamSubmission,
   useUploadSubmission,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/teams/$teamId/submit')({
+  component: SubmitProjectPage })
+
 const MIN_TEAM_MEMBERS = 2;
 const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
 const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
 
 const SubmitProjectPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
+  const { teamId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [showConfirmModal, setShowConfirmModal] = useState(false);
@@ -78,8 +80,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
 
   const form = useForm<TProjectSubmissionForm>({
     resolver: zodResolver(projectSubmissionSchema),
-    mode: 'all',
-  });
+    mode: 'all' });
 
   if (!isLeader) {
     return (
@@ -90,7 +91,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-4">
           Only the team leader can submit projects
         </p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>
+        <Button onClick={() => navigate({ to: `/teams/${teamId}` })}>
           Back to Team
         </Button>
       </div>
@@ -108,12 +109,12 @@ const SubmitProjectPage: FC = (): ReactElement => {
           Your team has already submitted a project
         </p>
         <div className="flex space-x-3">
-          <Button onClick={() => navigate(`/teams/${teamId}/submission`)}>
+          <Button onClick={() => navigate({ to: `/teams/${teamId}/submission` })}>
             View Submission
           </Button>
           <Button
             variant="secondary"
-            onClick={() => navigate(`/teams/${teamId}`)}
+            onClick={() => navigate({ to: `/teams/${teamId}` })}
           >
             Back to Team
           </Button>
@@ -147,14 +148,14 @@ const SubmitProjectPage: FC = (): ReactElement => {
             </p>
 
             <button
-              onClick={() => navigate(`/teams/${teamId}`)}
+              onClick={() => navigate({ to: `/teams/${teamId}` })}
               className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer"
             >
               Back to Team
             </button>
 
             <button
-              onClick={() => navigate('/dashboard')}
+              onClick={() => navigate({ to: '/dashboard' })}
               className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
             >
               Back to Dashboard
@@ -197,9 +198,8 @@ const SubmitProjectPage: FC = (): ReactElement => {
     try {
       await submitProject({
         ...data,
-        screenshots,
-      });
-      navigate(`/teams/${teamId}/submission`);
+        screenshots });
+      navigate({ to: `/teams/${teamId}/submission` });
     } catch (error) {
       console.error('Failed to submit project:', error);
     }
@@ -416,7 +416,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
                 type="button"
                 variant="secondary"
                 className="flex-1"
-                onClick={() => navigate(`/teams/${teamId}`)}
+                onClick={() => navigate({ to: `/teams/${teamId}` })}
               >
                 Cancel
               </Button>
@@ -500,4 +500,3 @@ const SubmitProjectPage: FC = (): ReactElement => {
   );
 };
 
-export default SubmitProjectPage;
diff --git a/apps/hackathon/src/app/teams/browse/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/browse.tsx
similarity index 96%
rename from apps/hackathon/src/app/teams/browse/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/browse.tsx
index cb19400..db3e2f6 100644
--- a/apps/hackathon/src/app/teams/browse/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/browse.tsx
@@ -1,19 +1,22 @@
 import { FC, ReactElement, useState, useEffect, useCallback } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useNavigate, useSearchParams } from 'react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import {
   useTeams,
   useJoinTeam,
   useMyTeams,
   ETeamVisibility,
   joinTeamSchema,
-  TJoinTeamForm,
-} from '@imphnen-frontend-service/service';
+  TJoinTeamForm } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CitySelect } from '../../../components/city-select';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/teams/browse')({
+  component: BrowseTeamsPage,
+})
+
 const DEFAULT_PER_PAGE = 12;
 const PER_PAGE_OPTIONS = [6, 12, 24, 48];
 
@@ -61,7 +64,16 @@ const TeamCardSkeleton: FC = () => (
 
 const BrowseTeamsPage: FC = (): ReactElement => {
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParams = new URLSearchParams(globalThis.location.search);
+  const setSearchParams = (newParams: URLSearchParams, opts?: { replace?: boolean }) => {
+    const url = new URL(globalThis.location.href);
+    url.search = newParams.toString();
+    if (opts?.replace) {
+      globalThis.history.replaceState(null, '', url.toString());
+    } else {
+      globalThis.history.pushState(null, '', url.toString());
+    }
+  };
 
   const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
 
@@ -435,7 +447,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                         <Button
                           className="w-full"
                           variant="secondary"
-                          onClick={() => navigate(`/teams/${team.id}`)}
+                          onClick={() => navigate({ to: `/teams/${team.id}` })}
                         >
                           Your Team
                         </Button>
@@ -455,7 +467,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
                           <Button
                             className="w-full"
                             variant="secondary"
-                            onClick={() => navigate(`/teams/${team.id}`)}
+                            onClick={() => navigate({ to: `/teams/${team.id}` })}
                           >
                             View Team
                           </Button>
@@ -616,4 +628,3 @@ const BrowseTeamsPage: FC = (): ReactElement => {
   );
 };
 
-export default BrowseTeamsPage;
diff --git a/apps/hackathon/src/app/teams/create/page.tsx b/apps/hackathon/src/routes/_authenticated/teams/create.tsx
similarity index 97%
rename from apps/hackathon/src/app/teams/create/page.tsx
rename to apps/hackathon/src/routes/_authenticated/teams/create.tsx
index bc449e2..aeae340 100644
--- a/apps/hackathon/src/app/teams/create/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/teams/create.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactElement, useState } from 'react';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useForm, Controller } from 'react-hook-form';
 import { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -10,6 +10,10 @@ import { Icon } from '@iconify/react';
 
 import { CitySelect } from '../../../components/city-select';
 
+export const Route = createFileRoute('/_authenticated/teams/create')({
+  component: CreateTeamPage,
+})
+
 const MAX_FILE_SIZE = 2 * 1024 * 1024;
 
 const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
@@ -93,7 +97,7 @@ const CreateTeamPage: FC = (): ReactElement => {
       });
 
       toast.success('Team created successfully!');
-      navigate(`/teams/${result.data.id}`);
+      navigate({ to: `/teams/${result.data.id}` });
     } catch (error: any) {
       console.error('Failed to create team:', error);
 
@@ -133,14 +137,14 @@ const CreateTeamPage: FC = (): ReactElement => {
             </p>
 
             <button
-              onClick={() => navigate('/dashboard')}
+              onClick={() => navigate({ to: '/dashboard' })}
               className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer"
             >
               Back to Dashboard
             </button>
 
             <button
-              onClick={() => navigate('/teams/browse')}
+              onClick={() => navigate({ to: '/teams/browse' })}
               className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
             >
               Browse Teams
@@ -352,7 +356,7 @@ const CreateTeamPage: FC = (): ReactElement => {
                 type="button"
                 variant="secondary"
                 className="flex-1"
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate({ to: '/dashboard' })}
               >
                 Cancel
               </Button>
@@ -371,4 +375,3 @@ const CreateTeamPage: FC = (): ReactElement => {
   );
 };
 
-export default CreateTeamPage;
diff --git a/apps/hackathon/src/app/users/[userId]/page.tsx b/apps/hackathon/src/routes/_authenticated/users/$userId.tsx
similarity index 96%
rename from apps/hackathon/src/app/users/[userId]/page.tsx
rename to apps/hackathon/src/routes/_authenticated/users/$userId.tsx
index 6db6f5b..b41a381 100644
--- a/apps/hackathon/src/app/users/[userId]/page.tsx
+++ b/apps/hackathon/src/routes/_authenticated/users/$userId.tsx
@@ -1,14 +1,16 @@
 import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useParams, useNavigate, Link } from 'react-router';
+import { createFileRoute, useNavigate, Link } from '@tanstack/react-router';
 import {
   useUserDetailsById,
-  useTeamsByUserId,
-} from '@imphnen-frontend-service/service';
+  useTeamsByUserId } from '@imphnen-frontend-service/service';
 import { Icon } from '@iconify/react';
 
+export const Route = createFileRoute('/_authenticated/users/$userId')({
+  component: UserProfilePage })
+
 const UserProfilePage: FC = (): ReactElement => {
-  const { userId } = useParams<{ userId: string }>();
+  const { userId } = Route.useParams();
   const navigate = useNavigate();
   const { data: userData, isLoading, error } = useUserDetailsById(userId || '');
   const { data: teamsData } = useTeamsByUserId(userId || '');
@@ -35,7 +37,7 @@ const UserProfilePage: FC = (): ReactElement => {
         {error && (
           <p className="text-red-600 dark:text-red-400 mb-4">{String(error)}</p>
         )}
-        <Button onClick={() => navigate('/dashboard')}>
+        <Button onClick={() => navigate({ to: '/dashboard' })}>
           Back to Dashboard
         </Button>
       </div>
@@ -234,4 +236,3 @@ const UserProfilePage: FC = (): ReactElement => {
   );
 };
 
-export default UserProfilePage;
diff --git a/apps/hackathon/src/routes/_public.tsx b/apps/hackathon/src/routes/_public.tsx
new file mode 100644
index 0000000..5aaf130
--- /dev/null
+++ b/apps/hackathon/src/routes/_public.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_public')({
+  component: PublicLayout,
+})
+
+function PublicLayout() {
+  return <Outlet />
+}
diff --git a/apps/hackathon/src/routes/_public/auth/callback.tsx b/apps/hackathon/src/routes/_public/auth/callback.tsx
new file mode 100644
index 0000000..e8f1bdc
--- /dev/null
+++ b/apps/hackathon/src/routes/_public/auth/callback.tsx
@@ -0,0 +1,123 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect, useState, useRef } from 'react'
+import { useGitHubCallback } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/_public/auth/callback')({
+  component: CallbackPage,
+})
+
+function CallbackPage(): ReactElement {
+  const navigate = useNavigate()
+  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback()
+  const [isProcessing, setIsProcessing] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const hasRunRef = useRef(false)
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      if (hasRunRef.current) return
+      hasRunRef.current = true
+
+      try {
+        const hashParams = new URLSearchParams(globalThis.location.hash.substring(1))
+        const urlParams = new URLSearchParams(globalThis.location.search)
+
+        const type = hashParams.get('type') || urlParams.get('type')
+        const accessToken = hashParams.get('access_token') || urlParams.get('access_token')
+
+        if (accessToken) {
+          setIsProcessing(false)
+
+          if (type === 'recovery' || type === 'magiclink') {
+            toast.success('Email verified! Please set your new password.')
+            navigate({ to: '/auth/reset-password', search: { access_token: accessToken } })
+            return
+          }
+
+          if (type === 'signup' || type === 'email_confirmation') {
+            toast.success('Email verified successfully! Please log in to continue.')
+            navigate({ to: '/auth/login' })
+            return
+          }
+
+          toast.success('Email verified! Please set your new password.')
+          navigate({ to: '/auth/reset-password', search: { access_token: accessToken } })
+          return
+        }
+
+        const code = urlParams.get('code')
+
+        if (!code) {
+          throw new Error('No authorization code received')
+        }
+
+        const result = await exchangeGitHubCode({ code })
+
+        toast.success('Login successful!')
+        setIsProcessing(false)
+
+        if (result.user.location) {
+          globalThis.location.replace('/dashboard')
+        } else {
+          globalThis.location.replace('/onboarding/user')
+        }
+      } catch (err) {
+        console.error('[Callback] Error:', err)
+        setError((err as Error).message)
+        setIsProcessing(false)
+        toast.error('An error occurred during login')
+
+        setTimeout(() => {
+          navigate({ to: '/auth/login' })
+        }, 3000)
+      }
+    }
+
+    handleCallback()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  if (error) {
+    const isPrivateEmailError =
+      error.toLowerCase().includes('failed to create user') ||
+      error.toLowerCase().includes('email') ||
+      error.toLowerCase().includes('user record')
+
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
+          <div className="text-center mb-6">
+            <div className="text-red-500 text-5xl mb-4">&#x26A0;&#xFE0F;</div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">GitHub Login Failed</h2>
+            <p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
+          </div>
+          {isPrivateEmailError && (
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
+              <h3 className="font-semibold text-amber-800 dark:text-amber-300 mb-2">Is your GitHub email set to private?</h3>
+              <p className="text-amber-700 dark:text-amber-400 text-sm mb-3">GitHub login requires a public email address. Please follow these steps:</p>
+              <ol className="text-amber-700 dark:text-amber-400 text-sm list-decimal list-inside space-y-1 mb-3">
+                <li>Go to <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="underline hover:text-amber-900 dark:hover:text-amber-200">GitHub Email Settings</a></li>
+                <li>Uncheck "Keep my email addresses private"</li>
+                <li>Or go to <a href="https://github.com/settings/profile" target="_blank" rel="noopener noreferrer" className="underline hover:text-amber-900 dark:hover:text-amber-200">Profile Settings</a> and set a public email</li>
+                <li>Try signing in with GitHub again</li>
+              </ol>
+              <p className="text-amber-600 dark:text-amber-500 text-xs">Alternatively, you can sign up using email and password instead.</p>
+            </div>
+          )}
+          <p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">Redirecting to login page in 3 seconds...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="text-center">
+        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Completing login...</h2>
+        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hackathon/src/routes/_public/auth/forgot-password.tsx b/apps/hackathon/src/routes/_public/auth/forgot-password.tsx
new file mode 100644
index 0000000..2e43079
--- /dev/null
+++ b/apps/hackathon/src/routes/_public/auth/forgot-password.tsx
@@ -0,0 +1,74 @@
+import { createFileRoute, useNavigate, Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForgotPassword } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+import ThemeToggle from '../../../components/theme-toggle'
+
+export const Route = createFileRoute('/_public/auth/forgot-password')({
+  component: ForgotPasswordPage,
+})
+
+function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [emailSent, setEmailSent] = useState(false)
+  const navigate = useNavigate()
+  const forgotPasswordMutation = useForgotPassword()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email) { toast.error('Please enter your email'); return }
+    try {
+      await forgotPasswordMutation.mutateAsync({ email })
+      setEmailSent(true)
+      toast.success('Password reset email sent! Check your inbox.')
+    } catch (err) {
+      toast.error((err as Error).message || 'Failed to send reset email')
+    }
+  }
+
+  if (emailSent) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4"><span className="text-3xl">&#x2713;</span></div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Check Your Email</h2>
+            <p className="text-gray-600 dark:text-gray-400">We've sent a password reset link to <strong>{email}</strong></p>
+          </div>
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">Click the link in the email to reset your password. The link will expire in 1 hour.</p>
+            <Link to="/auth/login"><button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">Back to Login</button></Link>
+            <button onClick={() => setEmailSent(false)} className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Send another email</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button onClick={() => navigate({ to: '/auth/login' })} className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center">
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />Back to Login
+          </button>
+          <ThemeToggle />
+        </div>
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Forgot Password?</h2>
+          <p className="text-gray-600 dark:text-gray-400">No worries, we'll send you reset instructions</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
+            <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your@email.com" disabled={forgotPasswordMutation.isPending} className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed" required />
+          </div>
+          <button type="submit" disabled={forgotPasswordMutation.isPending} className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors">
+            {forgotPasswordMutation.isPending ? 'Sending...' : 'Send Reset Link'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hackathon/src/app/auth/login/page.tsx b/apps/hackathon/src/routes/_public/auth/login.tsx
similarity index 74%
rename from apps/hackathon/src/app/auth/login/page.tsx
rename to apps/hackathon/src/routes/_public/auth/login.tsx
index 4b2a6af..e60c991 100644
--- a/apps/hackathon/src/app/auth/login/page.tsx
+++ b/apps/hackathon/src/routes/_public/auth/login.tsx
@@ -1,71 +1,83 @@
-import { useState, useEffect } from 'react';
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
 import {
   useGitHubAuth,
   useLogin,
   authLoginSchema,
   TLoginRequest,
-} from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../../../components/theme-toggle';
+  SessionToken,
+} from '@imphnen-frontend-service/service'
+import { GithubOutlined } from '@ant-design/icons'
+import { useNavigate, Link } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+import { ThemeToggle } from '../../../components/theme-toggle'
 
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const loginMutation = useLogin();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
+export const Route = createFileRoute('/_public/auth/login')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/dashboard' })
+    }
+  },
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const navigate = useNavigate()
+  const { signInWithGitHub } = useGitHubAuth()
+  const loginMutation = useLogin()
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
 
   const { register, handleSubmit, formState: { errors, isValid } } = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'onChange',
     defaultValues: { email: '', password: '' },
-  });
+  })
 
   useEffect(() => {
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const urlParams = new URLSearchParams(globalThis.location.search);
-    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-    const type = hashParams.get('type') || urlParams.get('type');
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1))
+    const urlParams = new URLSearchParams(globalThis.location.search)
+    const accessToken = hashParams.get('access_token') || urlParams.get('access_token')
+    const type = hashParams.get('type') || urlParams.get('type')
     if (accessToken && (type === 'recovery' || type === 'magiclink' || !type)) {
-      toast.info('Redirecting to password reset...');
-      navigate('/auth/reset-password?access_token=' + accessToken);
+      toast.info('Redirecting to password reset...')
+      navigate({ to: '/auth/reset-password', search: { access_token: accessToken } })
     }
-  }, [navigate]);
+  }, [navigate])
 
   const onSubmit = handleSubmit(async (data) => {
-    setError(null);
+    setError(null)
     try {
-      const result = await loginMutation.mutateAsync(data);
-      toast.success('Login successful!');
-      navigate(result.user.location ? '/dashboard' : '/onboarding/user');
+      const result = await loginMutation.mutateAsync(data)
+      toast.success('Login successful!')
+      navigate({ to: result.user.location ? '/dashboard' : '/onboarding/user' })
     } catch (err) {
-      setError((err as Error).message || 'Login failed');
+      setError((err as Error).message || 'Login failed')
     }
-  });
+  })
 
   const handleGithubLogin = async () => {
     try {
-      setIsGithubLoading(true);
-      const result = await signInWithGitHub();
-      if (result?.url) globalThis.location.href = result.url;
-      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL'); }
+      setIsGithubLoading(true)
+      const result = await signInWithGitHub()
+      if (result?.url) globalThis.location.href = result.url
+      else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL') }
     } catch (err) {
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
+      setError((err as Error).message || 'GitHub login failed')
+      setIsGithubLoading(false)
     }
-  };
+  }
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
-          <button onClick={() => navigate('/')} className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
+          <button onClick={() => navigate({ to: '/' })} className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center">
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
             Back to Homepage
           </button>
@@ -136,5 +148,5 @@ export default function LoginPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/hackathon/src/routes/_public/auth/reset-password.tsx b/apps/hackathon/src/routes/_public/auth/reset-password.tsx
new file mode 100644
index 0000000..7da834f
--- /dev/null
+++ b/apps/hackathon/src/routes/_public/auth/reset-password.tsx
@@ -0,0 +1,87 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { useResetPassword, useAuthStore } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+
+export const Route = createFileRoute('/_public/auth/reset-password')({
+  component: ResetPasswordPage,
+})
+
+function ResetPasswordPage() {
+  const navigate = useNavigate()
+  const { clearSession } = useAuthStore()
+  const resetPasswordMutation = useResetPassword()
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  useEffect(() => {
+    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1))
+    const queryParams = new URLSearchParams(globalThis.location.search)
+    const token = hashParams.get('access_token') || queryParams.get('access_token')
+    if (token) { setAccessToken(token) } else { toast.error('Invalid or expired reset link'); setTimeout(() => navigate({ to: '/auth/forgot-password' }), 2000) }
+  }, [navigate])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (password !== confirmPassword) { toast.error('Passwords do not match'); return }
+    if (password.length < 6) { toast.error('Password must be at least 6 characters'); return }
+    if (!accessToken) { toast.error('Invalid reset token'); return }
+    try {
+      await resetPasswordMutation.mutateAsync({ access_token: accessToken, new_password: password })
+      toast.success('Password updated successfully!')
+      clearSession()
+      navigate({ to: '/auth/login' })
+    } catch (err) {
+      toast.error((err as Error).message || 'Failed to reset password')
+    }
+  }
+
+  if (!accessToken) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
+          <p className="text-gray-600 dark:text-gray-400">Verifying reset link...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Set New Password</h2>
+          <p className="text-gray-600 dark:text-gray-400">Enter your new password below</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
+            <div className="relative">
+              <input id="password" type={showPassword ? 'text' : 'password'} value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" disabled={resetPasswordMutation.isPending} className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white" required minLength={6} />
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+          </div>
+          <div>
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm New Password</label>
+            <div className="relative">
+              <input id="confirmPassword" type={showConfirmPassword ? 'text' : 'password'} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="••••••••" disabled={resetPasswordMutation.isPending} className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white" required minLength={6} />
+              <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+          </div>
+          <button type="submit" disabled={resetPasswordMutation.isPending} className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors">
+            {resetPasswordMutation.isPending ? 'Updating...' : 'Update Password'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hackathon/src/routes/_public/auth/signup.tsx b/apps/hackathon/src/routes/_public/auth/signup.tsx
new file mode 100644
index 0000000..16c6855
--- /dev/null
+++ b/apps/hackathon/src/routes/_public/auth/signup.tsx
@@ -0,0 +1,227 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useGitHubAuth, useSignup, SessionToken } from '@imphnen-frontend-service/service'
+import { GithubOutlined } from '@ant-design/icons'
+import { useNavigate, Link } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+import { ThemeToggle } from '../../../components/theme-toggle'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+export const Route = createFileRoute('/_public/auth/signup')({
+  beforeLoad: () => {
+    const session = SessionToken.get()
+    if (session?.token?.access_token) {
+      throw redirect({ to: '/dashboard' })
+    }
+  },
+  component: SignupPage,
+})
+
+const signupSchema = z
+  .object({
+    fullname: z
+      .string()
+      .min(1, 'Full name is required')
+      .min(2, 'Full name must be at least 2 characters'),
+    email: z
+      .string()
+      .min(1, 'Email is required')
+      .email('Please enter a valid email address'),
+    password: z
+      .string()
+      .min(1, 'Password is required')
+      .min(6, 'Password must be at least 6 characters'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  })
+
+type SignupFormData = z.infer<typeof signupSchema>
+
+const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z')
+
+function SignupPage() {
+  const navigate = useNavigate()
+
+  const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE
+  const { signInWithGitHub } = useGitHubAuth()
+  const signupMutation = useSignup()
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [registrationSuccess, setRegistrationSuccess] = useState(false)
+  const [registeredEmail, setRegisteredEmail] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+  })
+
+  const onSubmit = async (data: SignupFormData) => {
+    setError(null)
+    try {
+      const result = await signupMutation.mutateAsync({
+        email: data.email,
+        password: data.password,
+        fullname: data.fullname,
+      })
+      toast.success(result.message)
+      setRegisteredEmail(data.email)
+      setRegistrationSuccess(true)
+    } catch (err) {
+      console.error('[Signup] Email signup failed:', err)
+      setError((err as Error).message || 'Signup failed')
+    }
+  }
+
+  if (isRegistrationClosed) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+              <Icon icon="mdi:clock-alert" className="text-3xl text-red-600 dark:text-red-400" />
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Registration Closed</h2>
+            <p className="text-gray-600 dark:text-gray-400">The registration period for this hackathon has ended.</p>
+          </div>
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">Thank you for your interest! Registration closed on November 30, 2025 at 23:29 WIB.</p>
+            <Link to="/auth/login">
+              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">Go to Login</button>
+            </Link>
+            <button onClick={() => navigate({ to: '/' })} className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer">Back to Homepage</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (registrationSuccess) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
+          <div className="mb-6">
+            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
+              <Icon icon="mdi:email-check" className="text-3xl text-green-600 dark:text-green-400" />
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Check Your Email</h2>
+            <p className="text-gray-600 dark:text-gray-400">We've sent an activation link to <strong>{registeredEmail}</strong></p>
+          </div>
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">Click the link in the email to activate your account. The link will expire in 24 hours.</p>
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
+              <p className="text-sm text-amber-700 dark:text-amber-300">Don't forget to check your spam folder if you don't see the email.</p>
+            </div>
+            <Link to="/auth/login">
+              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">Go to Login</button>
+            </Link>
+            <button onClick={() => setRegistrationSuccess(false)} className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer">Register with different email</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const handleGithubLogin = async () => {
+    try {
+      setIsGithubLoading(true)
+      const result = await signInWithGitHub()
+      if (result?.url) { globalThis.location.href = result.url } else { setIsGithubLoading(false); setError('Failed to get GitHub OAuth URL') }
+    } catch (err) {
+      console.error('[Signup] GitHub login failed:', err)
+      setError((err as Error).message || 'GitHub login failed')
+      setIsGithubLoading(false)
+    }
+  }
+
+  const inputBaseClass = 'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed'
+  const inputErrorClass = 'border-red-500 dark:border-red-500'
+  const inputNormalClass = 'border-gray-300 dark:border-gray-600'
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-6">
+          <button onClick={() => navigate({ to: '/' })} className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center">
+            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
+            Back to Homepage
+          </button>
+          <ThemeToggle />
+        </div>
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Create Account</h2>
+          <p className="text-gray-600 dark:text-gray-400">Join the hackathon community</p>
+        </div>
+        {error && (
+          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
+          </div>
+        )}
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div>
+            <label htmlFor="fullname" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
+            <input id="fullname" type="text" {...register('fullname')} placeholder="John Doe" disabled={signupMutation.isPending} className={`${inputBaseClass} ${errors.fullname ? inputErrorClass : inputNormalClass}`} />
+            {errors.fullname && <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.fullname.message}</p>}
+          </div>
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+            <input id="email" type="email" {...register('email')} placeholder="your@email.com" disabled={signupMutation.isPending} className={`${inputBaseClass} ${errors.email ? inputErrorClass : inputNormalClass}`} />
+            {errors.email && <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.email.message}</p>}
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
+            <div className="relative">
+              <input id="password" type={showPassword ? 'text' : 'password'} {...register('password')} placeholder="••••••••" disabled={signupMutation.isPending} className={`${inputBaseClass} pr-12 ${errors.password ? inputErrorClass : inputNormalClass}`} />
+              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+            {errors.password && <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.password.message}</p>}
+          </div>
+          <div>
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
+            <div className="relative">
+              <input id="confirmPassword" type={showConfirmPassword ? 'text' : 'password'} {...register('confirmPassword')} placeholder="••••••••" disabled={signupMutation.isPending} className={`${inputBaseClass} pr-12 ${errors.confirmPassword ? inputErrorClass : inputNormalClass}`} />
+              <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
+              </button>
+            </div>
+            {errors.confirmPassword && <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.confirmPassword.message}</p>}
+          </div>
+          <button type="submit" disabled={!isValid || signupMutation.isPending} className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer">
+            {signupMutation.isPending ? 'Creating account...' : 'Create Account'}
+          </button>
+        </form>
+        <div className="my-6 flex items-center">
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">OR</span>
+          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
+        </div>
+        <button onClick={handleGithubLogin} disabled={isGithubLoading} type="button" className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer">
+          <GithubOutlined className="text-xl" />
+          <span>{isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}</span>
+        </button>
+        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
+          Make sure your GitHub email is <a href="https://github.com/settings/emails" target="_blank" rel="noopener noreferrer" className="text-primary-600 dark:text-primary-400 hover:underline">set to public</a> for GitHub sign up to work.
+        </p>
+        <div className="mt-6 text-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">Already have an account? <Link to="/auth/login" className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold">Sign in</Link></p>
+        </div>
+        <div className="mt-6 text-center">
+          <p className="text-gray-500 dark:text-gray-500 text-xs">By signing up, you agree to our Terms of Service and Privacy Policy</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hackathon/src/app/certificate/[certId]/page.tsx b/apps/hackathon/src/routes/_public/certificate/$certId.tsx
similarity index 93%
rename from apps/hackathon/src/app/certificate/[certId]/page.tsx
rename to apps/hackathon/src/routes/_public/certificate/$certId.tsx
index 5c87436..f1e973b 100644
--- a/apps/hackathon/src/app/certificate/[certId]/page.tsx
+++ b/apps/hackathon/src/routes/_public/certificate/$certId.tsx
@@ -1,14 +1,16 @@
 import { FC, ReactElement, useState, useEffect, useRef } from 'react';
-import { useParams, useNavigate } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { decodeCertificateId } from '../../../utils/certificate';
 import {
   useCertificatePublicData,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
+  useAuthStore } from '@imphnen-frontend-service/service';
 import QRCode from 'qrcode';
 import html2canvas from 'html2canvas';
 
+export const Route = createFileRoute('/_public/certificate/$certId')({
+  component: CertificatePage })
+
 interface DecodedCert {
   teamId: string;
   submissionId: string;
@@ -16,7 +18,7 @@ interface DecodedCert {
 }
 
 const CertificatePage: FC = (): ReactElement => {
-  const { certId } = useParams<{ certId: string }>();
+  const { certId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
@@ -53,9 +55,7 @@ const CertificatePage: FC = (): ReactElement => {
         margin: 1,
         color: {
           dark: '#000000',
-          light: '#ffffff',
-        },
-      })
+          light: '#ffffff' } })
         .then(setQrCodeUrl)
         .catch((err) => console.error('QR Code generation failed:', err));
     }
@@ -117,8 +117,7 @@ const CertificatePage: FC = (): ReactElement => {
           height: (1000 * 2480) / 3508,
           allowTaint: true,
           imageTimeout: 0,
-          removeContainer: true,
-        });
+          removeContainer: true });
 
         const imageUrl = canvas.toDataURL('image/png', 1.0);
         setCertificateImage(imageUrl);
@@ -183,7 +182,7 @@ const CertificatePage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           {error || 'The certificate ID is invalid or malformed.'}
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -211,7 +210,7 @@ const CertificatePage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           The user associated with this certificate could not be found.
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -277,7 +276,7 @@ const CertificatePage: FC = (): ReactElement => {
             {team && isTeamMember && (
               <Button
                 variant="secondary"
-                onClick={() => navigate(`/teams/${team.id}/submission`)}
+                onClick={() => navigate({ to: `/teams/${team.id}/submission` })}
               >
                 Back to Submission
               </Button>
@@ -303,16 +302,14 @@ const CertificatePage: FC = (): ReactElement => {
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               width: '1000px',
-              height: `${(1000 * 2480) / 3508}px`,
-            }}
+              height: `${(1000 * 2480) / 3508}px` }}
           >
             <div
               style={{
                 position: 'absolute',
                 top: '41%',
                 left: '3.5%',
-                width: '55%',
-              }}
+                width: '55%' }}
             >
               <h3
                 ref={teamNameRef}
@@ -324,8 +321,7 @@ const CertificatePage: FC = (): ReactElement => {
                   fontSize: '32px',
                   lineHeight: '1.2',
                   wordBreak: 'break-word',
-                  margin: 0,
-                }}
+                  margin: 0 }}
               >
                 {team?.name}
               </h3>
@@ -336,8 +332,7 @@ const CertificatePage: FC = (): ReactElement => {
                 position: 'absolute',
                 top: '45%',
                 left: '3.5%',
-                width: '55%',
-              }}
+                width: '55%' }}
             >
               <h3
                 ref={userNameRef}
@@ -349,8 +344,7 @@ const CertificatePage: FC = (): ReactElement => {
                   fontSize: '40px',
                   lineHeight: '1.2',
                   wordBreak: 'break-word',
-                  margin: 0,
-                }}
+                  margin: 0 }}
               >
                 {certificateName || 'N/A'}
               </h3>
@@ -365,8 +359,7 @@ const CertificatePage: FC = (): ReactElement => {
                 height: '190px',
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'center',
-              }}
+                justifyContent: 'center' }}
             >
               {qrCodeUrl && (
                 <img
@@ -420,7 +413,7 @@ const CertificatePage: FC = (): ReactElement => {
               </Button>
               {team && (
                 <Button
-                  onClick={() => navigate(`/teams/${team.id}/submission`)}
+                  onClick={() => navigate({ to: `/teams/${team.id}/submission` })}
                   variant="secondary"
                   className="col-span-2 flex items-center gap-2 xl:col-span-1"
                 >
@@ -446,4 +439,3 @@ const CertificatePage: FC = (): ReactElement => {
   );
 };
 
-export default CertificatePage;
diff --git a/apps/hackathon/src/app/certificate/winner/[certId]/page.tsx b/apps/hackathon/src/routes/_public/certificate/winner/$certId.tsx
similarity index 92%
rename from apps/hackathon/src/app/certificate/winner/[certId]/page.tsx
rename to apps/hackathon/src/routes/_public/certificate/winner/$certId.tsx
index c4e2a2f..bbb395c 100644
--- a/apps/hackathon/src/app/certificate/winner/[certId]/page.tsx
+++ b/apps/hackathon/src/routes/_public/certificate/winner/$certId.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Icon } from '@iconify/react';
 import { decodeWinnerCertificateId } from '../../../../utils/certificate';
@@ -8,11 +8,13 @@ import {
   useMyTeams,
   useTeamById,
   useTeamSubmission,
-  useWinners,
-} from '@imphnen-frontend-service/service';
+  useWinners } from '@imphnen-frontend-service/service';
 import QRCode from 'qrcode';
 import html2canvas from 'html2canvas';
 
+export const Route = createFileRoute('/_public/certificate/winner/$certId')({
+  component: CertificateWinnerPage })
+
 type WinnerEntry = {
   team_id: string;
   rank: number;
@@ -48,15 +50,14 @@ const LAYOUT_SCALE = CERT_WIDTH / LAYOUT_BASE_WIDTH;
 const s = (px: number) => Math.round(px * LAYOUT_SCALE);
 
 const CertificateWinnerPage: FC = (): ReactElement => {
-  const { certId } = useParams<{ certId: string }>();
+  const { certId } = Route.useParams();
   const navigate = useNavigate();
   const { session } = useAuthStore();
   const { data: myTeamsData } = useMyTeams();
   const {
     data: winnersResponse,
     isLoading: isLoadingWinners,
-    isError: isWinnersError,
-  } = useWinners();
+    isError: isWinnersError } = useWinners();
 
   const [decodedTeamId, setDecodedTeamId] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
@@ -127,9 +128,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
       margin: 1,
       color: {
         dark: '#000000',
-        light: '#ffffff',
-      },
-    })
+        light: '#ffffff' } })
       .then(setQrCodeUrl)
       .catch((err) => console.error('QR Code generation failed:', err));
   }, [certId]);
@@ -156,8 +155,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
           height: CERT_HEIGHT,
           allowTaint: true,
           imageTimeout: 0,
-          removeContainer: true,
-        });
+          removeContainer: true });
 
         const imageUrl = canvas.toDataURL('image/png', 1.0);
         setCertificateImage(imageUrl);
@@ -228,7 +226,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           {error || 'The certificate ID is invalid or malformed.'}
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -268,7 +266,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           Please try again later.
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -282,7 +280,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           This team is not listed as a hackathon winner.
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -296,7 +294,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           The team associated with this certificate could not be loaded.
         </p>
-        <Button onClick={() => navigate('/')}>Back to Home</Button>
+        <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
       </div>
     );
   }
@@ -317,7 +315,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
             {isTeamMember && (
               <Button
                 variant="secondary"
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate({ to: '/dashboard' })}
               >
                 Back to Dashboard
               </Button>
@@ -344,8 +342,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
               backgroundRepeat: 'no-repeat',
               backgroundPosition: 'center',
               width: `${CERT_WIDTH}px`,
-              height: `${CERT_HEIGHT}px`,
-            }}
+              height: `${CERT_HEIGHT}px` }}
           >
             <style>{`
               #winner-members li::marker {
@@ -358,8 +355,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 position: 'absolute',
                 top: '35%',
                 left: '3.5%',
-                width: '55%',
-              }}
+                width: '55%' }}
             >
               <h3
                 style={{
@@ -370,8 +366,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   fontSize: `${s(28)}px`,
                   lineHeight: '1.2',
                   wordBreak: 'break-word',
-                  margin: 0,
-                }}
+                  margin: 0 }}
               >
                 {team.name}
               </h3>
@@ -382,8 +377,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 position: 'absolute',
                 top: '40.5%',
                 left: '3.5%',
-                width: '55%',
-              }}
+                width: '55%' }}
             >
               <ul
                 id="winner-members"
@@ -392,8 +386,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   fontFamily: 'Poppins, sans-serif',
                   fontSize: `${s(18)}px`,
                   lineHeight: '1.35',
-                  color: '#59bef5',
-                }}
+                  color: '#59bef5' }}
               >
                 {(memberNames.length
                   ? memberNames
@@ -409,8 +402,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 position: 'absolute',
                 top: '60%',
                 left: '3.5%',
-                width: '60%',
-              }}
+                width: '60%' }}
             >
               <p
                 style={{
@@ -418,8 +410,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   fontFamily: 'Poppins, sans-serif',
                   fontSize: `${s(18)}px`,
                   lineHeight: '1.35',
-                  color: '#6B6B6B',
-                }}
+                  color: '#6B6B6B' }}
               >
                 Diberikan sebagai penghargaan atas pencapaian meraih
                 <br />
@@ -440,8 +431,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   right: '8.5%',
                   width: `${s(190)}px`,
                   display: 'flex',
-                  justifyContent: 'center',
-                }}
+                  justifyContent: 'center' }}
               >
                 <div
                   style={{
@@ -454,8 +444,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                     fontWeight: 700,
                     color: '#78350F',
                     fontSize: `${s(24)}px`,
-                    lineHeight: '1',
-                  }}
+                    lineHeight: '1' }}
                 >
                   {rankLabel}
                 </div>
@@ -471,8 +460,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 height: `${s(190)}px`,
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'center',
-              }}
+                justifyContent: 'center' }}
             >
               {qrCodeUrl && (
                 <img
@@ -481,8 +469,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                   style={{
                     width: `${s(190)}px`,
                     height: `${s(190)}px`,
-                    display: 'block',
-                  }}
+                    display: 'block' }}
                 />
               )}
             </div>
@@ -561,7 +548,7 @@ const CertificateWinnerPage: FC = (): ReactElement => {
                 )}
               </Button>
               <Button
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate({ to: '/dashboard' })}
                 variant="secondary"
                 className="col-span-2 flex items-center gap-2 xl:col-span-1"
               >
@@ -584,4 +571,3 @@ const CertificateWinnerPage: FC = (): ReactElement => {
   );
 };
 
-export default CertificateWinnerPage;
diff --git a/apps/hackathon/src/app/maintenance/page.tsx b/apps/hackathon/src/routes/_public/maintenance.tsx
similarity index 64%
rename from apps/hackathon/src/app/maintenance/page.tsx
rename to apps/hackathon/src/routes/_public/maintenance.tsx
index 5d2beda..1fc3abf 100644
--- a/apps/hackathon/src/app/maintenance/page.tsx
+++ b/apps/hackathon/src/routes/_public/maintenance.tsx
@@ -1,23 +1,24 @@
-import { Link } from 'react-router';
+import { createFileRoute, Link } from '@tanstack/react-router'
 
-export default function MaintenancePage() {
+export const Route = createFileRoute('/_public/maintenance')({
+  component: MaintenancePage,
+})
+
+function MaintenancePage() {
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
       <div className="text-center">
-        <h1 className="text-6xl font-bold text-yellow-600 mb-4">🚧</h1>
+        <h1 className="text-6xl font-bold text-yellow-600 mb-4">&#x1F6A7;</h1>
         <h2 className="text-3xl font-semibold mb-2">We'll be back soon!</h2>
         <p className="text-gray-600">
           Our site is currently undergoing scheduled maintenance.
           <br />
           Thank you for your patience.
         </p>
-        <Link
-          to="/"
-          className="mt-4 inline-block text-primary-600 hover:underline"
-        >
+        <Link to="/" className="mt-4 inline-block text-primary-600 hover:underline">
           Back to Homepage
         </Link>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/hackathon/src/app/winners/page.tsx b/apps/hackathon/src/routes/_public/winners.tsx
similarity index 98%
rename from apps/hackathon/src/app/winners/page.tsx
rename to apps/hackathon/src/routes/_public/winners.tsx
index 4bf3b70..fd8726b 100644
--- a/apps/hackathon/src/app/winners/page.tsx
+++ b/apps/hackathon/src/routes/_public/winners.tsx
@@ -1,7 +1,11 @@
 import { FC, ReactElement } from 'react';
-import { useNavigate } from 'react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useWinners } from '@imphnen-frontend-service/service';
 
+export const Route = createFileRoute('/_public/winners')({
+  component: WinnerPage,
+})
+
 const WinnerPage: FC = (): ReactElement => {
   const navigate = useNavigate();
   const { data, isLoading, error } = useWinners();
@@ -303,4 +307,3 @@ const WinnerPage: FC = (): ReactElement => {
   );
 };
 
-export default WinnerPage;
diff --git a/apps/hackathon/src/app/page.tsx b/apps/hackathon/src/routes/index.tsx
similarity index 76%
rename from apps/hackathon/src/app/page.tsx
rename to apps/hackathon/src/routes/index.tsx
index 941f27d..6dbe106 100644
--- a/apps/hackathon/src/app/page.tsx
+++ b/apps/hackathon/src/routes/index.tsx
@@ -1,16 +1,21 @@
-import { useNavigate, Link } from 'react-router';
-import { useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../components/theme-toggle';
-import { useAuthStore } from '@imphnen-frontend-service/service';
+import { createFileRoute } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { Icon } from '@iconify/react'
+import { ThemeToggle } from '../components/theme-toggle'
+import { useAuthStore } from '@imphnen-frontend-service/service'
 
-export default function HomePage() {
-  const navigate = useNavigate();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [openFaq, setOpenFaq] = useState<number | null>(0);
-  const { session } = useAuthStore();
-  const isAuthenticated = !!session?.token;
+export const Route = createFileRoute('/')({
+  component: HomePage,
+})
+
+function HomePage() {
+  const navigate = useNavigate()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [openFaq, setOpenFaq] = useState<number | null>(0)
+  const { session } = useAuthStore()
+  const isAuthenticated = !!session?.token
 
   const faqs = [
     {
@@ -63,7 +68,7 @@ export default function HomePage() {
       answer:
         'Jika menemukan masalah teknis, silakan hubungi kami melalui grup WA Hackathon.',
     },
-  ];
+  ]
 
   return (
     <main className="min-h-screen bg-white dark:bg-gray-950">
@@ -105,7 +110,7 @@ export default function HomePage() {
             <ThemeToggle />
             {isAuthenticated ? (
               <Button
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate({ to: '/dashboard' })}
                 size="sm"
                 className="rounded-lg text-base"
               >
@@ -114,7 +119,7 @@ export default function HomePage() {
             ) : (
               <>
                 <Button
-                  onClick={() => navigate('/auth/login')}
+                  onClick={() => navigate({ to: '/auth/login' })}
                   size="sm"
                   variant="bordered"
                   className="rounded-lg text-base dark:bg-gray-800"
@@ -122,7 +127,7 @@ export default function HomePage() {
                   Masuk
                 </Button>
                 <Button
-                  onClick={() => navigate('/auth/signup')}
+                  onClick={() => navigate({ to: '/auth/signup' })}
                   size="sm"
                   className="rounded-lg text-base"
                 >
@@ -179,7 +184,7 @@ export default function HomePage() {
             </a>
             {isAuthenticated ? (
               <button
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate({ to: '/dashboard' })}
                 className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
               >
                 Dashboard
@@ -187,13 +192,13 @@ export default function HomePage() {
             ) : (
               <>
                 <button
-                  onClick={() => navigate('/auth/login')}
+                  onClick={() => navigate({ to: '/auth/login' })}
                   className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
                 >
                   Masuk
                 </button>
                 <button
-                  onClick={() => navigate('/auth/login')}
+                  onClick={() => navigate({ to: '/auth/login' })}
                   className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
                 >
                   Daftar Sekarang
@@ -227,7 +232,7 @@ export default function HomePage() {
               />
             </div>
             <span className="text-3xl md:text-5xl font-bold text-gray-400 dark:text-gray-500">
-              ×
+              x
             </span>
             <div className="flex items-center">
               <img
@@ -264,7 +269,7 @@ export default function HomePage() {
 
           <div className="flex flex-col md:flex-row items-center gap-4 px-4">
             <Button
-              onClick={() => navigate('/auth/signup')}
+              onClick={() => navigate({ to: '/auth/signup' })}
               className="rounded-lg text-base max-h-auto"
             >
               Daftar Sekarang
@@ -334,82 +339,47 @@ export default function HomePage() {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-primary-500"
-                  />
+                  <Icon icon="ic:round-star" className="h-8 w-8 text-primary-500" />
                 </div>
               </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 1
-              </h3>
-              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
-                Rp6.000.000
-              </p>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 1</h3>
+              <p className="text-2xl font-bold text-primary-500 text-center font-sans">Rp6.000.000</p>
             </div>
-
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-gray-600 dark:text-gray-200"
-                  />
+                  <Icon icon="ic:round-star" className="h-8 w-8 text-gray-600 dark:text-gray-200" />
                 </div>
               </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 2
-              </h3>
-              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
-                Rp4.000.000
-              </p>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 2</h3>
+              <p className="text-2xl font-bold text-primary-500 text-center font-sans">Rp4.000.000</p>
             </div>
-
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-orange-600 dark:text-orange-500"
-                  />
+                  <Icon icon="ic:round-star" className="h-8 w-8 text-orange-600 dark:text-orange-500" />
                 </div>
               </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 3
-              </h3>
-              <p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-center font-sans">
-                Rp2.500.000
-              </p>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 3</h3>
+              <p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-center font-sans">Rp2.500.000</p>
             </div>
-
             <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500 transition-colors">
               <div className="flex justify-center mb-4">
                 <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-purple-600 dark:text-purple-500"
-                  />
+                  <Icon icon="ic:round-star" className="h-8 w-8 text-purple-600 dark:text-purple-500" />
                 </div>
               </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara Kategori Lainnya
-              </h3>
-              <p className="text-2xl font-bold text-purple-600 dark:text-purple-500 text-center font-sans">
-                Rp2.000.000
-              </p>
+              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara Kategori Lainnya</h3>
+              <p className="text-2xl font-bold text-purple-600 dark:text-purple-500 text-center font-sans">Rp2.000.000</p>
             </div>
           </div>
         </div>
       </section>
 
-      <section
-        id="timeline"
-        className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
-      >
+      <section id="timeline" className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950">
         <div className="max-w-4xl mx-auto font-sans">
           <div className="text-center mb-12 font-bai-jamjuree">
             <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
@@ -421,94 +391,60 @@ export default function HomePage() {
           </div>
 
           <div>
-
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                 <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
               </div>
               <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Penutupan Registrasi
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Batas akhir pendaftaran peserta hackathon.
-                </p>
+                <p className="text-primary-500 font-semibold mb-2">30 November 2025</p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">Penutupan Registrasi</h3>
+                <p className="text-gray-600 dark:text-gray-200">Batas akhir pendaftaran peserta hackathon.</p>
               </div>
             </div>
-
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                 <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
               </div>
               <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Technical Meeting
-                </h3>
+                <p className="text-primary-500 font-semibold mb-2">30 November 2025</p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">Technical Meeting</h3>
                 <p className="text-gray-600 dark:text-gray-200">
-                  Akan diadakan technical meeting terkait lomba melalui Google
-                  Meet. Stay tune di grup WA Hackathon.
+                  Akan diadakan technical meeting terkait lomba melalui Google Meet. Stay tune di grup WA Hackathon.
                 </p>
               </div>
             </div>
-
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                 <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
               </div>
               <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  1 - 7 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Tahap Penyisihan
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Peserta mengerjakan tantangan yang diberikan.
-                </p>
+                <p className="text-primary-500 font-semibold mb-2">1 - 7 Desember 2025</p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">Tahap Penyisihan</h3>
+                <p className="text-gray-600 dark:text-gray-200">Peserta mengerjakan tantangan yang diberikan.</p>
               </div>
             </div>
-
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
                 <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
               </div>
               <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  8 - 14 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Penilaian & Webinar
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Proses penilaian oleh juri dan sesi webinar.
-                </p>
+                <p className="text-primary-500 font-semibold mb-2">8 - 14 Desember 2025</p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">Penilaian & Webinar</h3>
+                <p className="text-gray-600 dark:text-gray-200">Proses penilaian oleh juri dan sesi webinar.</p>
               </div>
             </div>
-
             <div className="flex gap-6">
               <div className="flex flex-col items-center">
                 <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
               </div>
               <div className="flex-1">
-                <p className="text-primary-500 font-semibold mb-2">
-                  15 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Pengumuman & Final
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Presentasi final dan pengumuman pemenang.
-                </p>
+                <p className="text-primary-500 font-semibold mb-2">15 Desember 2025</p>
+                <h3 className="text-xl font-bold mb-2 dark:text-white">Pengumuman & Final</h3>
+                <p className="text-gray-600 dark:text-gray-200">Presentasi final dan pengumuman pemenang.</p>
               </div>
             </div>
           </div>
@@ -527,31 +463,22 @@ export default function HomePage() {
           </div>
 
           <div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Alifais Farrel Ramdhani
-              </h3>
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">Alifais Farrel Ramdhani</h3>
               <div>
                 <p className="text-primary-500 font-semibold mb-1">CTO</p>
                 <p className="text-gray-600 dark:text-gray-200">Kolosal.ai</p>
               </div>
             </div>
-
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Muhammad Alif Ramadhan
-              </h3>
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">Muhammad Alif Ramadhan</h3>
               <div>
                 <p className="text-primary-500 font-semibold mb-1">Admin</p>
                 <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
               </div>
             </div>
-
             <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Hafid Nur
-              </h3>
+              <h3 className="text-p3 font-bold mb-1 dark:text-white">Hafid Nur</h3>
               <div>
                 <p className="text-primary-500 font-semibold mb-1">Moderator</p>
                 <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
@@ -658,7 +585,7 @@ export default function HomePage() {
 
           <div className="flex flex-col md:flex-row gap-4 justify-center">
             <button
-              onClick={() => navigate('/auth/signup')}
+              onClick={() => navigate({ to: '/auth/signup' })}
               className="px-8 py-3 bg-primary-500 text-white text-lg rounded-lg hover:bg-primary-700 transition-colors font-semibold cursor-pointer"
             >
               Daftar Sekarang
@@ -685,13 +612,10 @@ export default function HomePage() {
       <footer className="bg-gray-950 text-white py-12 px-4 md:px-8 font-sans">
         <div className="max-w-6xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-
             <div>
               <div className="flex items-center gap-2 mb-4 font-bai-jamjuree">
                 <span className="text-2xl font-bold">IMPHNEN</span>
-                <span className="text-2xl font-bold text-blue-500">
-                  Hackathon
-                </span>
+                <span className="text-2xl font-bold text-blue-500">Hackathon</span>
               </div>
               <p className="text-gray-400 text-sm">
                 Wujudkan ide brilian mu menjadi solusi nyata. Bergabunglah dalam
@@ -699,137 +623,48 @@ export default function HomePage() {
                 masa depan.
               </p>
               <div className="flex gap-4 mt-4">
-                <div className="flex gap-4">
-                  <a
-                    href="https://fb.com/groups/programmerhandal"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Facebook"
-                  >
-                    <Icon icon="ic:baseline-facebook" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.instagram.com/imphnen.dev"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Instagram"
-                  >
-                    <Icon icon="mdi:instagram" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.linkedin.com/company/imphnen"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="LinkedIn"
-                  >
-                    <Icon icon="mdi:linkedin" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.tiktok.com/@imphnen"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="TikTok"
-                  >
-                    <Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://github.com/IMPHNEN"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="GitHub"
-                  >
-                    <Icon icon="mdi:github" className="w-6 h-6" />
-                  </a>
-                </div>
+                <a href="https://fb.com/groups/programmerhandal" className="text-gray-400 hover:text-accent transition-colors" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+                  <Icon icon="ic:baseline-facebook" className="w-6 h-6" />
+                </a>
+                <a href="https://www.instagram.com/imphnen.dev" className="text-gray-400 hover:text-accent transition-colors" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+                  <Icon icon="mdi:instagram" className="w-6 h-6" />
+                </a>
+                <a href="https://www.linkedin.com/company/imphnen" className="text-gray-400 hover:text-accent transition-colors" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+                  <Icon icon="mdi:linkedin" className="w-6 h-6" />
+                </a>
+                <a href="https://www.tiktok.com/@imphnen" className="text-gray-400 hover:text-accent transition-colors" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
+                  <Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
+                </a>
+                <a href="https://github.com/IMPHNEN" className="text-gray-400 hover:text-accent transition-colors" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+                  <Icon icon="mdi:github" className="w-6 h-6" />
+                </a>
               </div>
             </div>
 
             <div>
-              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
-                Quick Links
-              </h3>
+              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">Quick Links</h3>
               <ul className="space-y-2 text-gray-400">
-                <li>
-                  <a
-                    href="#timeline"
-                    className="hover:text-white transition-colors"
-                  >
-                    Timeline
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#hadiah"
-                    className="hover:text-white transition-colors"
-                  >
-                    Hadiah
-                  </a>
-                </li>
-                <li>
-                  <a href="#faq" className="hover:text-white transition-colors">
-                    FAQ
-                  </a>
-                </li>
-                <li>
-                  <Link
-                    to="/auth/signup"
-                    className="hover:text-white transition-colors"
-                  >
-                    Daftar
-                  </Link>
-                </li>
+                <li><a href="#timeline" className="hover:text-white transition-colors">Timeline</a></li>
+                <li><a href="#hadiah" className="hover:text-white transition-colors">Hadiah</a></li>
+                <li><a href="#faq" className="hover:text-white transition-colors">FAQ</a></li>
+                <li><a href="/auth/signup" className="hover:text-white transition-colors">Daftar</a></li>
               </ul>
             </div>
 
             <div>
-              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
-                Contact
-              </h3>
+              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">Contact</h3>
               <ul className="space-y-2 text-gray-400 text-sm">
                 <li className="flex items-start gap-2">
-                  <Icon
-                    icon="material-symbols:mail-outline-rounded"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="mailto:imphnen@gmail.com"
-                    className="hover:text-white transition-colors"
-                  >
-                    imphnen@gmail.com
-                  </a>
+                  <Icon icon="material-symbols:mail-outline-rounded" className="min-w-5 min-h-5 mt-0.5" />
+                  <a href="mailto:imphnen@gmail.com" className="hover:text-white transition-colors">imphnen@gmail.com</a>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Icon
-                    icon="solar:phone-linear"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
-                    className="hover:text-white transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    WA Group Hackathon
-                  </a>
+                  <Icon icon="solar:phone-linear" className="min-w-5 min-h-5 mt-0.5" />
+                  <a href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL" className="hover:text-white transition-colors" target="_blank" rel="noopener noreferrer">WA Group Hackathon</a>
                 </li>
                 <li className="flex items-start gap-2">
-                  <Icon
-                    icon="streamline-plump:web"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="https://imphnen.dev"
-                    className="hover:text-white transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    IMPHNEN.dev
-                  </a>
+                  <Icon icon="streamline-plump:web" className="min-w-5 min-h-5 mt-0.5" />
+                  <a href="https://imphnen.dev" className="hover:text-white transition-colors" target="_blank" rel="noopener noreferrer">IMPHNEN.dev</a>
                 </li>
               </ul>
             </div>
@@ -837,12 +672,12 @@ export default function HomePage() {
 
           <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
             <p>
-              © 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
+              &copy; 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
               Ngoding. All rights reserved.
             </p>
           </div>
         </div>
       </footer>
     </main>
-  );
+  )
 }
diff --git a/apps/hackathon/vite.config.ts b/apps/hackathon/vite.config.ts
index b326dfc..5ea77fa 100644
--- a/apps/hackathon/vite.config.ts
+++ b/apps/hackathon/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3005,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/hackathon',
     emptyOutDir: true,
diff --git a/apps/infra/src/main.tsx b/apps/infra/src/main.tsx
index 808a90e..4a4687b 100644
--- a/apps/infra/src/main.tsx
+++ b/apps/infra/src/main.tsx
@@ -1,14 +1,23 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import App from './app/App';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const rootElement = document.getElementById('root');
+const router = createRouter({ routeTree })
 
-if (!rootElement) throw new Error('Failed to find the root element');
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
-);
+)
diff --git a/apps/infra/src/routeTree.gen.ts b/apps/infra/src/routeTree.gen.ts
new file mode 100644
index 0000000..786525b
--- /dev/null
+++ b/apps/infra/src/routeTree.gen.ts
@@ -0,0 +1,2 @@
+// This file is auto-generated by TanStack Router
+export const routeTree = {} as any
diff --git a/apps/infra/src/routes/__root.tsx b/apps/infra/src/routes/__root.tsx
new file mode 100644
index 0000000..f463b79
--- /dev/null
+++ b/apps/infra/src/routes/__root.tsx
@@ -0,0 +1,5 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})
diff --git a/apps/infra/src/app/App.tsx b/apps/infra/src/routes/index.tsx
similarity index 98%
rename from apps/infra/src/app/App.tsx
rename to apps/infra/src/routes/index.tsx
index 6dc4acf..99e39b5 100644
--- a/apps/infra/src/app/App.tsx
+++ b/apps/infra/src/routes/index.tsx
@@ -1,3 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
 const apps = [
   { name: 'Landing', domain: 'imphnen.dev', type: 'Next.js', color: 'blue' },
   { name: 'WWW', domain: 'www.imphnen.dev', type: 'Redirect', color: 'purple' },
@@ -8,7 +10,7 @@ const apps = [
   { name: 'QR Campaign', domain: 'qr.imphnen.dev', type: 'Vite', color: 'green' },
   { name: 'Infra', domain: 'infra.imphnen.dev', type: 'Vite', color: 'green' },
   { name: 'API QR', domain: 'api-qr.imphnen.dev', type: 'Backend', color: 'orange' },
-];
+]
 
 const techStack = [
   { category: 'OS', items: ['NixOS 25.05'] },
@@ -19,9 +21,13 @@ const techStack = [
   { category: 'Frontend', items: ['React', 'Next.js', 'Vite', 'TailwindCSS'] },
   { category: 'Backend', items: ['Go', 'Supabase'] },
   { category: 'Secrets', items: ['sops-nix'] },
-];
+]
 
-export default function App() {
+export const Route = createFileRoute('/')({
+  component: InfraPage,
+})
+
+function InfraPage() {
   return (
     <div className="min-h-screen bg-[#0a0a0a]">
 
@@ -234,5 +240,5 @@ export default function App() {
         </div>
       </footer>
     </div>
-  );
+  )
 }
diff --git a/apps/infra/vite.config.ts b/apps/infra/vite.config.ts
index 8062251..2c11b84 100644
--- a/apps/infra/vite.config.ts
+++ b/apps/infra/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3007,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   build: {
     outDir: '../../dist/apps/infra',
     emptyOutDir: true,
diff --git a/apps/qrcampaign/src/app/404.tsx b/apps/qrcampaign/src/app/404.tsx
deleted file mode 100644
index 2db4df6..0000000
--- a/apps/qrcampaign/src/app/404.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/qrcampaign/src/app/admin/layout.tsx b/apps/qrcampaign/src/app/admin/layout.tsx
deleted file mode 100644
index 8adf10d..0000000
--- a/apps/qrcampaign/src/app/admin/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import { RequireAdmin } from '../features/admin/components/RequireAdmin';
-
-export default function AdminLayout() {
-  return (
-    <RequireAdmin>
-      <Outlet />
-    </RequireAdmin>
-  );
-}
diff --git a/apps/qrcampaign/src/app/admin/page.tsx b/apps/qrcampaign/src/app/admin/page.tsx
deleted file mode 100644
index f9413af..0000000
--- a/apps/qrcampaign/src/app/admin/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function AdminPage() {
-  return <div className="p-4">Select a menu item from the sidebar.</div>;
-}
diff --git a/apps/qrcampaign/src/app/error.tsx b/apps/qrcampaign/src/app/error.tsx
deleted file mode 100644
index 3859b00..0000000
--- a/apps/qrcampaign/src/app/error.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/qrcampaign/src/app/features/admin/components/RequireAdmin.tsx b/apps/qrcampaign/src/app/features/admin/components/RequireAdmin.tsx
index e99c566..5b63a8c 100644
--- a/apps/qrcampaign/src/app/features/admin/components/RequireAdmin.tsx
+++ b/apps/qrcampaign/src/app/features/admin/components/RequireAdmin.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '../../auth/store/auth.store';
 
 interface RequireAdminProps {
@@ -9,15 +7,14 @@ interface RequireAdminProps {
 export const RequireAdmin = ({ children }: RequireAdminProps) => {
   const user = useAuthStore((state) => state.user);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const location = useLocation();
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    return null;
   }
 
   const userRole = user?.role?.name;
   if (userRole !== 'Admin' && userRole !== 'Super Admin') {
-    return <Navigate to="/" replace />;
+    return null;
   }
 
   return children;
diff --git a/apps/qrcampaign/src/app/features/admin/pages/AdminDashboard.tsx b/apps/qrcampaign/src/app/features/admin/pages/AdminDashboard.tsx
index 5614385..2dc1e13 100644
--- a/apps/qrcampaign/src/app/features/admin/pages/AdminDashboard.tsx
+++ b/apps/qrcampaign/src/app/features/admin/pages/AdminDashboard.tsx
@@ -1,4 +1,4 @@
-import { Outlet, Link, useLocation } from 'react-router-dom';
+import { Outlet, Link, useLocation } from '@tanstack/react-router';
 import { useAuthStore } from '../../auth/store/auth.store';
 
 export const AdminDashboard = () => {
diff --git a/apps/qrcampaign/src/app/features/auth/components/RequireAuth.tsx b/apps/qrcampaign/src/app/features/auth/components/RequireAuth.tsx
index fd60289..3af851e 100644
--- a/apps/qrcampaign/src/app/features/auth/components/RequireAuth.tsx
+++ b/apps/qrcampaign/src/app/features/auth/components/RequireAuth.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuthStore } from '../../../features/auth/store/auth.store';
+import { useAuthStore } from '../store/auth.store';
 
 interface RequireAuthProps {
   children: JSX.Element;
@@ -8,10 +6,9 @@ interface RequireAuthProps {
 
 export const RequireAuth = ({ children }: RequireAuthProps) => {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const location = useLocation();
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
+    return null;
   }
 
   return children;
diff --git a/apps/qrcampaign/src/app/features/auth/pages/LoginPage.tsx b/apps/qrcampaign/src/app/features/auth/pages/LoginPage.tsx
index ae796a7..e0e19c8 100644
--- a/apps/qrcampaign/src/app/features/auth/pages/LoginPage.tsx
+++ b/apps/qrcampaign/src/app/features/auth/pages/LoginPage.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAuthStore } from '../store/auth.store';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from '@tanstack/react-router';
 
 interface LoginFormInputs {
   email: string;
diff --git a/apps/qrcampaign/src/components/Sidebar.tsx b/apps/qrcampaign/src/components/Sidebar.tsx
index 126c708..ac240cc 100644
--- a/apps/qrcampaign/src/components/Sidebar.tsx
+++ b/apps/qrcampaign/src/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import {
 } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC, ReactElement, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from '@tanstack/react-router';
 import { cn, For } from '@imphnen-frontend-service/utils';
 import { useAuthStore } from '../app/features/auth/store/auth.store';
 
diff --git a/apps/qrcampaign/src/main.tsx b/apps/qrcampaign/src/main.tsx
index 0c9d268..80e1156 100644
--- a/apps/qrcampaign/src/main.tsx
+++ b/apps/qrcampaign/src/main.tsx
@@ -1,42 +1,28 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
-import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
-  ModalLoginProvider,
-  QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import './index.css';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryProvider } from '@imphnen-frontend-service/utils'
+import { Toaster } from 'sonner'
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
+const router = createRouter({ routeTree })
 
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
 
-const router = createBrowserRouter([
-  {
-    ...routes,
-  },
-]);
+const rootElement = document.getElementById('root')
 
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
+if (!rootElement) throw new Error('Failed to find the root element')
 
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <ModalLoginProvider>
-        <Toaster position="top-right" richColors />
-        <RouterProvider router={router} />
-      </ModalLoginProvider>
+      <RouterProvider router={router} />
+      <Toaster position="top-right" richColors />
     </QueryProvider>
   </StrictMode>
-);
+)
diff --git a/apps/qrcampaign/src/routeTree.gen.ts b/apps/qrcampaign/src/routeTree.gen.ts
new file mode 100644
index 0000000..786525b
--- /dev/null
+++ b/apps/qrcampaign/src/routeTree.gen.ts
@@ -0,0 +1,2 @@
+// This file is auto-generated by TanStack Router
+export const routeTree = {} as any
diff --git a/apps/qrcampaign/src/routes/__root.tsx b/apps/qrcampaign/src/routes/__root.tsx
new file mode 100644
index 0000000..f463b79
--- /dev/null
+++ b/apps/qrcampaign/src/routes/__root.tsx
@@ -0,0 +1,5 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})
diff --git a/apps/qrcampaign/src/app/layout.tsx b/apps/qrcampaign/src/routes/_authenticated.tsx
similarity index 50%
rename from apps/qrcampaign/src/app/layout.tsx
rename to apps/qrcampaign/src/routes/_authenticated.tsx
index 1d05575..30d0179 100644
--- a/apps/qrcampaign/src/app/layout.tsx
+++ b/apps/qrcampaign/src/routes/_authenticated.tsx
@@ -1,47 +1,21 @@
-import {
-  Outlet,
-  ScrollRestoration,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { useAuthStore } from './features/auth/store/auth.store';
-import { Sidebar } from '../components/Sidebar';
-import { MenuOutlined } from '@ant-design/icons';
-
-const isPublicRoute = (pathname: string) => {
-  return pathname.startsWith('/auth') || pathname === '/auth/callback';
-};
-
-export default function RootLayout() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { isAuthenticated } = useAuthStore();
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-
-  useEffect(() => {
-    if (isPublicRoute(location.pathname)) {
-      return;
-    }
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { useAuthStore } from '../app/features/auth/store/auth.store'
+import { Sidebar } from '../components/Sidebar'
+import { MenuOutlined } from '@ant-design/icons'
+import { useState } from 'react'
 
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: () => {
+    const { isAuthenticated } = useAuthStore.getState()
     if (!isAuthenticated) {
-      navigate('/auth/login', { replace: true });
-      return;
+      throw redirect({ to: '/auth/login' })
     }
-  }, [location.pathname, navigate, isAuthenticated]);
+  },
+  component: AuthenticatedLayout,
+})
 
-  if (isPublicRoute(location.pathname)) {
-    return (
-      <>
-        <Outlet />
-        <ScrollRestoration />
-      </>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return null;
-  }
+function AuthenticatedLayout() {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
   return (
     <div className="flex min-h-screen bg-gray-50">
@@ -67,8 +41,6 @@ export default function RootLayout() {
           <Outlet />
         </main>
       </div>
-
-      <ScrollRestoration />
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/routes/_authenticated/admin.tsx b/apps/qrcampaign/src/routes/_authenticated/admin.tsx
new file mode 100644
index 0000000..742c85f
--- /dev/null
+++ b/apps/qrcampaign/src/routes/_authenticated/admin.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { useAuthStore } from '../../app/features/auth/store/auth.store'
+
+export const Route = createFileRoute('/_authenticated/admin')({
+  beforeLoad: () => {
+    const { user, isAuthenticated } = useAuthStore.getState()
+    if (!isAuthenticated) {
+      throw redirect({ to: '/auth/login' })
+    }
+    const userRole = user?.role?.name
+    if (userRole !== 'Admin' && userRole !== 'Super Admin') {
+      throw redirect({ to: '/' })
+    }
+  },
+  component: () => <Outlet />,
+})
diff --git a/apps/qrcampaign/src/app/admin/campaigns/page.tsx b/apps/qrcampaign/src/routes/_authenticated/admin/campaigns.tsx
similarity index 80%
rename from apps/qrcampaign/src/app/admin/campaigns/page.tsx
rename to apps/qrcampaign/src/routes/_authenticated/admin/campaigns.tsx
index e84d451..e589b4a 100644
--- a/apps/qrcampaign/src/app/admin/campaigns/page.tsx
+++ b/apps/qrcampaign/src/routes/_authenticated/admin/campaigns.tsx
@@ -1,88 +1,93 @@
-import { useState, useEffect } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import { createFileRoute } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
 import {
   campaignService,
   Campaign,
   CreateCampaignRequest,
-} from '../../features/admin/api/campaign.service';
+} from '../../../app/features/admin/api/campaign.service'
 import {
   DeleteOutlined,
   CheckCircleOutlined,
   PlusOutlined,
   FileOutlined,
-} from '@ant-design/icons';
+} from '@ant-design/icons'
 
-export default function CampaignsPage() {
-  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [createLoading, setCreateLoading] = useState(false);
+export const Route = createFileRoute('/_authenticated/admin/campaigns')({
+  component: CampaignsPage,
+})
+
+function CampaignsPage() {
+  const [campaigns, setCampaigns] = useState<Campaign[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [createLoading, setCreateLoading] = useState(false)
   const [formData, setFormData] = useState<CreateCampaignRequest>({
     name: '',
     url: '',
-  });
+  })
 
   const fetchCampaigns = async () => {
     try {
-      setLoading(true);
-      setError(null);
-      const data = await campaignService.getCampaigns();
-      setCampaigns(data);
+      setLoading(true)
+      setError(null)
+      const data = await campaignService.getCampaigns()
+      setCampaigns(data)
     } catch (err) {
-      setError('Failed to load campaigns');
-      console.error('Error fetching campaigns:', err);
+      setError('Failed to load campaigns')
+      console.error('Error fetching campaigns:', err)
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   useEffect(() => {
-    fetchCampaigns();
-  }, []);
+    fetchCampaigns()
+  }, [])
 
   const handleCreateCampaign = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
     try {
-      setCreateLoading(true);
-      await campaignService.createCampaign(formData);
-      setShowCreateModal(false);
-      setFormData({ name: '', url: '' });
-      await fetchCampaigns();
+      setCreateLoading(true)
+      await campaignService.createCampaign(formData)
+      setShowCreateModal(false)
+      setFormData({ name: '', url: '' })
+      await fetchCampaigns()
     } catch (err) {
-      console.error('Error creating campaign:', err);
-      alert('Failed to create campaign');
+      console.error('Error creating campaign:', err)
+      alert('Failed to create campaign')
     } finally {
-      setCreateLoading(false);
+      setCreateLoading(false)
     }
-  };
+  }
 
   const handleActivateCampaign = async (campaignId: string) => {
     try {
-      await campaignService.activateCampaign(campaignId);
-      await fetchCampaigns();
+      await campaignService.activateCampaign(campaignId)
+      await fetchCampaigns()
     } catch (err) {
-      console.error('Error activating campaign:', err);
-      alert('Failed to activate campaign');
+      console.error('Error activating campaign:', err)
+      alert('Failed to activate campaign')
     }
-  };
+  }
 
   const handleDeleteCampaign = async (
     campaignId: string,
     campaignName: string
   ) => {
     if (!confirm(`Are you sure you want to delete "${campaignName}"?`)) {
-      return;
+      return
     }
     try {
-      await campaignService.deleteCampaign(campaignId);
-      await fetchCampaigns();
+      await campaignService.deleteCampaign(campaignId)
+      await fetchCampaigns()
     } catch (err) {
-      console.error('Error deleting campaign:', err);
-      alert('Failed to delete campaign');
+      console.error('Error deleting campaign:', err)
+      alert('Failed to delete campaign')
     }
-  };
+  }
 
   const columns: ColumnDef<Campaign>[] = [
     {
@@ -156,7 +161,7 @@ export default function CampaignsPage() {
         </div>
       ),
     },
-  ];
+  ]
 
   if (loading) {
     return (
@@ -165,7 +170,7 @@ export default function CampaignsPage() {
           <div className="text-gray-600">Loading campaigns...</div>
         </div>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -175,7 +180,7 @@ export default function CampaignsPage() {
           {error}
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -260,8 +265,8 @@ export default function CampaignsPage() {
                 <button
                   type="button"
                   onClick={() => {
-                    setShowCreateModal(false);
-                    setFormData({ name: '', url: '' });
+                    setShowCreateModal(false)
+                    setFormData({ name: '', url: '' })
                   }}
                   className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
                   disabled={createLoading}
@@ -281,5 +286,5 @@ export default function CampaignsPage() {
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/routes/_authenticated/admin/index.tsx b/apps/qrcampaign/src/routes/_authenticated/admin/index.tsx
new file mode 100644
index 0000000..f38e2e0
--- /dev/null
+++ b/apps/qrcampaign/src/routes/_authenticated/admin/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/admin/')({
+  component: AdminPage,
+})
+
+function AdminPage() {
+  return <div className="p-4">Select a menu item from the sidebar.</div>
+}
diff --git a/apps/qrcampaign/src/app/admin/users/page.tsx b/apps/qrcampaign/src/routes/_authenticated/admin/users.tsx
similarity index 76%
rename from apps/qrcampaign/src/app/admin/users/page.tsx
rename to apps/qrcampaign/src/routes/_authenticated/admin/users.tsx
index 78adb0a..cdba023 100644
--- a/apps/qrcampaign/src/app/admin/users/page.tsx
+++ b/apps/qrcampaign/src/routes/_authenticated/admin/users.tsx
@@ -1,63 +1,68 @@
-import { useState, useEffect } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
-import { userService, User } from '../../features/admin/api/user.service';
-import { DeleteOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
+import { createFileRoute } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@imphnen-frontend-service/ui/organisms'
+import { userService, User } from '../../../app/features/admin/api/user.service'
+import { DeleteOutlined, EditOutlined, UserOutlined } from '@ant-design/icons'
 
-export default function UsersPage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [editingUserId, setEditingUserId] = useState<string | null>(null);
-  const [selectedRole, setSelectedRole] = useState<string>('');
+export const Route = createFileRoute('/_authenticated/admin/users')({
+  component: UsersPage,
+})
+
+function UsersPage() {
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [editingUserId, setEditingUserId] = useState<string | null>(null)
+  const [selectedRole, setSelectedRole] = useState<string>('')
 
   const fetchUsers = async () => {
     try {
-      setLoading(true);
-      setError(null);
-      const data = await userService.getUsers();
-      setUsers(data);
+      setLoading(true)
+      setError(null)
+      const data = await userService.getUsers()
+      setUsers(data)
     } catch (err) {
-      setError('Failed to load users');
-      console.error('Error fetching users:', err);
+      setError('Failed to load users')
+      console.error('Error fetching users:', err)
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   useEffect(() => {
-    fetchUsers();
-  }, []);
+    fetchUsers()
+  }, [])
 
   const handleUpdateRole = async (userId: string, currentRole: string) => {
     if (editingUserId === userId) {
       try {
-        await userService.updateUserRole(userId, selectedRole);
-        setEditingUserId(null);
-        setSelectedRole('');
-        await fetchUsers();
+        await userService.updateUserRole(userId, selectedRole)
+        setEditingUserId(null)
+        setSelectedRole('')
+        await fetchUsers()
       } catch (err) {
-        console.error('Error updating user role:', err);
-        alert('Failed to update user role');
+        console.error('Error updating user role:', err)
+        alert('Failed to update user role')
       }
     } else {
-      setEditingUserId(userId);
-      setSelectedRole(currentRole);
+      setEditingUserId(userId)
+      setSelectedRole(currentRole)
     }
-  };
+  }
 
   const handleDeleteUser = async (userId: string, userName: string) => {
     if (!confirm(`Are you sure you want to delete user "${userName}"?`)) {
-      return;
+      return
     }
     try {
-      await userService.deleteUser(userId);
-      await fetchUsers();
+      await userService.deleteUser(userId)
+      await fetchUsers()
     } catch (err) {
-      console.error('Error deleting user:', err);
-      alert('Failed to delete user');
+      console.error('Error deleting user:', err)
+      alert('Failed to delete user')
     }
-  };
+  }
 
   const columns: ColumnDef<User>[] = [
     {
@@ -78,7 +83,7 @@ export default function UsersPage() {
       accessorKey: 'role',
       header: 'Role',
       cell: ({ row }) => {
-        const isEditing = editingUserId === row.original.id;
+        const isEditing = editingUserId === row.original.id
         return (
           <div className="flex items-center gap-2">
             {isEditing ? (
@@ -103,7 +108,7 @@ export default function UsersPage() {
               </span>
             )}
           </div>
-        );
+        )
       },
     },
     {
@@ -119,7 +124,7 @@ export default function UsersPage() {
       id: 'actions',
       header: 'Actions',
       cell: ({ row }) => {
-        const isEditing = editingUserId === row.original.id;
+        const isEditing = editingUserId === row.original.id
         return (
           <div className="flex gap-2">
             <button
@@ -138,8 +143,8 @@ export default function UsersPage() {
             {isEditing && (
               <button
                 onClick={() => {
-                  setEditingUserId(null);
-                  setSelectedRole('');
+                  setEditingUserId(null)
+                  setSelectedRole('')
                 }}
                 className="p-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors cursor-pointer"
                 title="Cancel"
@@ -159,10 +164,10 @@ export default function UsersPage() {
               </button>
             )}
           </div>
-        );
+        )
       },
     },
-  ];
+  ]
 
   if (loading) {
     return (
@@ -171,7 +176,7 @@ export default function UsersPage() {
           <div className="text-gray-600">Loading users...</div>
         </div>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -181,7 +186,7 @@ export default function UsersPage() {
           {error}
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -209,5 +214,5 @@ export default function UsersPage() {
         <DataTable data={users} columns={columns} pageSize={10} />
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/app/page.tsx b/apps/qrcampaign/src/routes/_authenticated/index.tsx
similarity index 72%
rename from apps/qrcampaign/src/app/page.tsx
rename to apps/qrcampaign/src/routes/_authenticated/index.tsx
index ebb01ab..4cb2864 100644
--- a/apps/qrcampaign/src/app/page.tsx
+++ b/apps/qrcampaign/src/routes/_authenticated/index.tsx
@@ -1,31 +1,36 @@
-import { useState } from 'react';
-import { Dropzone } from './features/watermark/components/Dropzone';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { toast } from 'sonner';
-import { api } from './features/auth/api/auth.service';
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Dropzone } from '../../app/features/watermark/components/Dropzone'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { toast } from 'sonner'
+import { api } from '../../app/features/auth/api/auth.service'
 
-export default function HomePage() {
-  const [imageFile, setImageFile] = useState<File | null>(null);
-  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+export const Route = createFileRoute('/_authenticated/')({
+  component: HomePage,
+})
+
+function HomePage() {
+  const [imageFile, setImageFile] = useState<File | null>(null)
+  const [generatedImage, setGeneratedImage] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleImageDropped = (file: File) => {
-    setImageFile(file);
-    setGeneratedImage(null);
-    toast.success('Image selected ready for generation!');
-  };
+    setImageFile(file)
+    setGeneratedImage(null)
+    toast.success('Image selected ready for generation!')
+  }
 
   const handleReset = () => {
-    setImageFile(null);
-    setGeneratedImage(null);
-  };
+    setImageFile(null)
+    setGeneratedImage(null)
+  }
 
   const handleGenerate = async () => {
-    if (!imageFile) return;
+    if (!imageFile) return
 
-    setIsLoading(true);
-    const formData = new FormData();
-    formData.append('image', imageFile);
+    setIsLoading(true)
+    const formData = new FormData()
+    formData.append('image', imageFile)
 
     try {
       const response = await api.post('/campaigns/process-image', formData, {
@@ -33,30 +38,30 @@ export default function HomePage() {
           'Content-Type': 'multipart/form-data',
         },
         responseType: 'blob',
-      });
+      })
 
-      const imageUrl = URL.createObjectURL(response.data);
-      setGeneratedImage(imageUrl);
-      toast.success('QR Code generated successfully!');
+      const imageUrl = URL.createObjectURL(response.data)
+      setGeneratedImage(imageUrl)
+      toast.success('QR Code generated successfully!')
     } catch (error: any) {
-      console.error(error);
+      console.error(error)
       const message =
-        error.response?.data?.message || 'Failed to generate QR code.';
-      toast.error(message);
+        error.response?.data?.message || 'Failed to generate QR code.'
+      toast.error(message)
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   const handleDownload = () => {
-    if (!generatedImage) return;
-    const link = document.createElement('a');
-    link.href = generatedImage;
-    link.download = `qr-campaign-${Date.now()}.png`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
+    if (!generatedImage) return
+    const link = document.createElement('a')
+    link.href = generatedImage
+    link.download = `qr-campaign-${Date.now()}.png`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 
   return (
     <div className="max-w-4xl mx-auto py-8 px-4 flex flex-col gap-8">
@@ -140,5 +145,5 @@ export default function HomePage() {
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/routes/_public.tsx b/apps/qrcampaign/src/routes/_public.tsx
new file mode 100644
index 0000000..7ca16f3
--- /dev/null
+++ b/apps/qrcampaign/src/routes/_public.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { useAuthStore } from '../app/features/auth/store/auth.store'
+
+export const Route = createFileRoute('/_public')({
+  beforeLoad: () => {
+    const { isAuthenticated } = useAuthStore.getState()
+    if (isAuthenticated) {
+      throw redirect({ to: '/' })
+    }
+  },
+  component: PublicLayout,
+})
+
+function PublicLayout() {
+  return <Outlet />
+}
diff --git a/apps/qrcampaign/src/app/auth/forgot-password/page.tsx b/apps/qrcampaign/src/routes/_public/auth/forgot-password.tsx
similarity index 83%
rename from apps/qrcampaign/src/app/auth/forgot-password/page.tsx
rename to apps/qrcampaign/src/routes/_public/auth/forgot-password.tsx
index 773091f..1c9532e 100644
--- a/apps/qrcampaign/src/app/auth/forgot-password/page.tsx
+++ b/apps/qrcampaign/src/routes/_public/auth/forgot-password.tsx
@@ -1,32 +1,36 @@
-import { useState } from 'react';
-import { useForgotPassword } from '@imphnen-frontend-service/service';
-import { Link, useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForgotPassword } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
 
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [emailSent, setEmailSent] = useState(false);
-  const navigate = useNavigate();
-  const forgotPasswordMutation = useForgotPassword();
+export const Route = createFileRoute('/_public/auth/forgot-password')({
+  component: ForgotPasswordPage,
+})
+
+function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [emailSent, setEmailSent] = useState(false)
+  const navigate = useNavigate()
+  const forgotPasswordMutation = useForgotPassword()
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!email) {
-      toast.error('Please enter your email');
-      return;
+      toast.error('Please enter your email')
+      return
     }
 
     try {
-      await forgotPasswordMutation.mutateAsync({ email });
+      await forgotPasswordMutation.mutateAsync({ email })
 
-      setEmailSent(true);
-      toast.success('Password reset email sent! Check your inbox.');
+      setEmailSent(true)
+      toast.success('Password reset email sent! Check your inbox.')
     } catch (err) {
-      toast.error((err as Error).message || 'Failed to send reset email');
+      toast.error((err as Error).message || 'Failed to send reset email')
     }
-  };
+  }
 
   if (emailSent) {
     return (
@@ -65,7 +69,7 @@ export default function ForgotPasswordPage() {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -73,7 +77,7 @@ export default function ForgotPasswordPage() {
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
           <button
-            onClick={() => navigate('/auth/login')}
+            onClick={() => navigate({ to: '/auth/login' })}
             className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
           >
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
@@ -121,5 +125,5 @@ export default function ForgotPasswordPage() {
         </form>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/app/auth/login/page.tsx b/apps/qrcampaign/src/routes/_public/auth/login.tsx
similarity index 79%
rename from apps/qrcampaign/src/app/auth/login/page.tsx
rename to apps/qrcampaign/src/routes/_public/auth/login.tsx
index 32b237f..51a08e5 100644
--- a/apps/qrcampaign/src/app/auth/login/page.tsx
+++ b/apps/qrcampaign/src/routes/_public/auth/login.tsx
@@ -1,46 +1,50 @@
-import { useState, useEffect } from 'react';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { useAuthStore } from '../../features/auth/store/auth.store';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { GithubOutlined } from '@ant-design/icons'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+import { useAuthStore } from '../../../app/features/auth/store/auth.store'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 const loginSchema = z.object({
   email: z.string().min(1, 'Email is required').email('Please enter a valid email'),
   password: z.string().min(1, 'Password is required'),
-});
-type LoginForm = z.infer<typeof loginSchema>;
+})
+type LoginForm = z.infer<typeof loginSchema>
 
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const login = useAuthStore((state) => state.login);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
+export const Route = createFileRoute('/_public/auth/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const navigate = useNavigate()
+  const login = useAuthStore((state) => state.login)
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const { register, handleSubmit, formState: { errors, isValid } } = useForm<LoginForm>({
     resolver: zodResolver(loginSchema),
     mode: 'onChange',
     defaultValues: { email: '', password: '' },
-  });
+  })
 
-  useEffect(() => { if (isAuthenticated) navigate('/'); }, [isAuthenticated, navigate]);
+  useEffect(() => { if (isAuthenticated) navigate({ to: '/' }) }, [isAuthenticated, navigate])
 
   const onSubmit = handleSubmit(async (data) => {
-    setError(null);
-    setIsSubmitting(true);
+    setError(null)
+    setIsSubmitting(true)
     try {
-      const success = await login(data.email, data.password);
-      if (success) { toast.success('Login successful!'); navigate('/'); }
-      else setError('Login failed. Please check your credentials.');
-    } catch { setError('Login failed. Please try again.'); }
-    finally { setIsSubmitting(false); }
-  });
+      const success = await login(data.email, data.password)
+      if (success) { toast.success('Login successful!'); navigate({ to: '/' }) }
+      else setError('Login failed. Please check your credentials.')
+    } catch { setError('Login failed. Please try again.') }
+    finally { setIsSubmitting(false) }
+  })
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
@@ -105,5 +109,5 @@ export default function LoginPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/app/auth/reset-password/page.tsx b/apps/qrcampaign/src/routes/_public/auth/reset-password.tsx
similarity index 80%
rename from apps/qrcampaign/src/app/auth/reset-password/page.tsx
rename to apps/qrcampaign/src/routes/_public/auth/reset-password.tsx
index b8ebd7c..5fcaab8 100644
--- a/apps/qrcampaign/src/app/auth/reset-password/page.tsx
+++ b/apps/qrcampaign/src/routes/_public/auth/reset-password.tsx
@@ -1,70 +1,74 @@
-import { useState, useEffect } from 'react';
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
 import {
   useResetPassword,
   useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
+} from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
 
-export default function ResetPasswordPage() {
-  const navigate = useNavigate();
-  const { clearSession } = useAuthStore();
-  const resetPasswordMutation = useResetPassword();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+export const Route = createFileRoute('/_public/auth/reset-password')({
+  component: ResetPasswordPage,
+})
+
+function ResetPasswordPage() {
+  const navigate = useNavigate()
+  const { clearSession } = useAuthStore()
+  const resetPasswordMutation = useResetPassword()
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   useEffect(() => {
     const hashParams = new URLSearchParams(
       globalThis.location.hash.substring(1)
-    );
-    const queryParams = new URLSearchParams(globalThis.location.search);
+    )
+    const queryParams = new URLSearchParams(globalThis.location.search)
     const token =
-      hashParams.get('access_token') || queryParams.get('access_token');
+      hashParams.get('access_token') || queryParams.get('access_token')
 
     if (token) {
-      setAccessToken(token);
+      setAccessToken(token)
     } else {
-      toast.error('Invalid or expired reset link');
-      setTimeout(() => navigate('/auth/forgot-password'), 2000);
+      toast.error('Invalid or expired reset link')
+      setTimeout(() => navigate({ to: '/auth/forgot-password' }), 2000)
     }
-  }, [navigate]);
+  }, [navigate])
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
-      return;
+      toast.error('Passwords do not match')
+      return
     }
 
     if (password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return;
+      toast.error('Password must be at least 6 characters')
+      return
     }
 
     if (!accessToken) {
-      toast.error('Invalid reset token');
-      return;
+      toast.error('Invalid reset token')
+      return
     }
 
     try {
       await resetPasswordMutation.mutateAsync({
         access_token: accessToken,
         new_password: password,
-      });
+      })
 
-      toast.success('Password updated successfully!');
+      toast.success('Password updated successfully!')
 
-      clearSession();
-      navigate('/auth/login');
+      clearSession()
+      navigate({ to: '/auth/login' })
     } catch (err) {
-      toast.error((err as Error).message || 'Failed to reset password');
+      toast.error((err as Error).message || 'Failed to reset password')
     }
-  };
+  }
 
   if (!accessToken) {
     return (
@@ -74,7 +78,7 @@ export default function ResetPasswordPage() {
           <p className="text-gray-600">Verifying reset link...</p>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -164,5 +168,5 @@ export default function ResetPasswordPage() {
         </form>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/app/auth/signup/page.tsx b/apps/qrcampaign/src/routes/_public/auth/signup.tsx
similarity index 83%
rename from apps/qrcampaign/src/app/auth/signup/page.tsx
rename to apps/qrcampaign/src/routes/_public/auth/signup.tsx
index 79335f4..68b5d02 100644
--- a/apps/qrcampaign/src/app/auth/signup/page.tsx
+++ b/apps/qrcampaign/src/routes/_public/auth/signup.tsx
@@ -1,13 +1,13 @@
-import { useState } from 'react';
-import { useGitHubAuth } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { useAuthStore } from '../../features/auth/store/auth.store';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useGitHubAuth } from '@imphnen-frontend-service/service'
+import { GithubOutlined } from '@ant-design/icons'
+import { toast } from 'sonner'
+import { Icon } from '@iconify/react'
+import { useAuthStore } from '../../../app/features/auth/store/auth.store'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
 
 const signupSchema = z
   .object({
@@ -28,20 +28,24 @@ const signupSchema = z
   .refine((data) => data.password === data.confirmPassword, {
     message: 'Passwords do not match',
     path: ['confirmPassword'],
-  });
+  })
 
-type SignupFormData = z.infer<typeof signupSchema>;
+type SignupFormData = z.infer<typeof signupSchema>
 
-export default function SignupPage() {
-  const navigate = useNavigate();
-  const registerUser = useAuthStore((state) => state.register);
+export const Route = createFileRoute('/_public/auth/signup')({
+  component: SignupPage,
+})
 
-  const { signInWithGitHub } = useGitHubAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+function SignupPage() {
+  const navigate = useNavigate()
+  const registerUser = useAuthStore((state) => state.register)
+
+  const { signInWithGitHub } = useGitHubAuth()
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   const {
     register,
@@ -50,56 +54,56 @@ export default function SignupPage() {
   } = useForm<SignupFormData>({
     resolver: zodResolver(signupSchema),
     mode: 'onChange',
-  });
+  })
 
   const onSubmit = async (data: SignupFormData) => {
-    setError(null);
-    setIsSubmitting(true);
+    setError(null)
+    setIsSubmitting(true)
 
     try {
-      await registerUser(data.fullname, data.email, data.password);
-      toast.success('Registration successful! Redirecting...');
-      navigate('/');
+      await registerUser(data.fullname, data.email, data.password)
+      toast.success('Registration successful! Redirecting...')
+      navigate({ to: '/' })
     } catch (err: any) {
-      console.error('[Signup] Email signup failed:', err);
+      console.error('[Signup] Email signup failed:', err)
       const errorMessage =
-        err.response?.data?.message || err.message || 'Signup failed';
-      setError(errorMessage);
+        err.response?.data?.message || err.message || 'Signup failed'
+      setError(errorMessage)
     } finally {
-      setIsSubmitting(false);
+      setIsSubmitting(false)
     }
-  };
+  }
 
   const handleGithubLogin = async () => {
     try {
-      setIsGithubLoading(true);
+      setIsGithubLoading(true)
 
-      const result = await signInWithGitHub();
+      const result = await signInWithGitHub()
 
       if (result?.url) {
-        globalThis.location.href = result.url;
+        globalThis.location.href = result.url
       } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
+        setIsGithubLoading(false)
+        setError('Failed to get GitHub OAuth URL')
       }
     } catch (err) {
-      console.error('[Signup] GitHub login failed:', err);
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
+      console.error('[Signup] GitHub login failed:', err)
+      setError((err as Error).message || 'GitHub login failed')
+      setIsGithubLoading(false)
     }
-  };
+  }
 
   const inputBaseClass =
-    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed';
-  const inputErrorClass = 'border-red-500';
-  const inputNormalClass = 'border-gray-300';
+    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-gray-900 placeholder:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed'
+  const inputErrorClass = 'border-red-500'
+  const inputNormalClass = 'border-gray-300'
 
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
       <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
         <div className="flex items-center justify-between mb-6">
           <button
-            onClick={() => navigate('/')}
+            onClick={() => navigate({ to: '/' })}
             className="cursor-pointer text-primary-500 hover:text-primary-600 text-base font-sans flex items-center"
           >
             <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
@@ -300,5 +304,5 @@ export default function SignupPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/qrcampaign/src/app/auth/callback/page.tsx b/apps/qrcampaign/src/routes/auth/callback.tsx
similarity index 74%
rename from apps/qrcampaign/src/app/auth/callback/page.tsx
rename to apps/qrcampaign/src/routes/auth/callback.tsx
index 83e4a83..3717bd5 100644
--- a/apps/qrcampaign/src/app/auth/callback/page.tsx
+++ b/apps/qrcampaign/src/routes/auth/callback.tsx
@@ -1,98 +1,102 @@
-import { FC, ReactElement, useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { useGitHubCallback } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { FC, ReactElement, useEffect, useState, useRef } from 'react'
+import { useGitHubCallback } from '@imphnen-frontend-service/service'
+import { toast } from 'sonner'
 
-const CallbackPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
-  const [isProcessing, setIsProcessing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const hasRunRef = useRef(false);
+export const Route = createFileRoute('/auth/callback')({
+  component: CallbackPage,
+})
+
+function CallbackPage(): ReactElement {
+  const navigate = useNavigate()
+  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback()
+  const [isProcessing, setIsProcessing] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const hasRunRef = useRef(false)
 
   useEffect(() => {
     const handleCallback = async () => {
       if (hasRunRef.current) {
-        return;
+        return
       }
-      hasRunRef.current = true;
+      hasRunRef.current = true
 
       try {
         const hashParams = new URLSearchParams(
           globalThis.location.hash.substring(1)
-        );
-        const urlParams = new URLSearchParams(globalThis.location.search);
+        )
+        const urlParams = new URLSearchParams(globalThis.location.search)
 
-        const type = hashParams.get('type') || urlParams.get('type');
+        const type = hashParams.get('type') || urlParams.get('type')
         const accessToken =
-          hashParams.get('access_token') || urlParams.get('access_token');
+          hashParams.get('access_token') || urlParams.get('access_token')
 
         console.log('[Callback] Params:', {
           type,
           accessToken: !!accessToken,
           hash: globalThis.location.hash,
           search: globalThis.location.search,
-        });
+        })
 
         if (accessToken) {
-          setIsProcessing(false);
+          setIsProcessing(false)
 
           if (type === 'recovery' || type === 'magiclink') {
-            toast.success('Email verified! Please set your new password.');
-            navigate('/auth/reset-password?access_token=' + accessToken);
-            return;
+            toast.success('Email verified! Please set your new password.')
+            navigate({ to: '/auth/reset-password', search: { access_token: accessToken } })
+            return
           }
 
           if (type === 'signup' || type === 'email_confirmation') {
             toast.success(
               'Email verified successfully! Please log in to continue.'
-            );
-            navigate('/auth/login');
-            return;
+            )
+            navigate({ to: '/auth/login' })
+            return
           }
 
-          toast.success('Email verified! Please set your new password.');
-          navigate('/auth/reset-password?access_token=' + accessToken);
-          return;
+          toast.success('Email verified! Please set your new password.')
+          navigate({ to: '/auth/reset-password', search: { access_token: accessToken } })
+          return
         }
 
-        const code = urlParams.get('code');
+        const code = urlParams.get('code')
 
         if (!code) {
-          throw new Error('No authorization code received');
+          throw new Error('No authorization code received')
         }
 
-        const result = await exchangeGitHubCode({ code });
+        const result = await exchangeGitHubCode({ code })
 
-        toast.success('Login successful!');
-        setIsProcessing(false);
+        toast.success('Login successful!')
+        setIsProcessing(false)
 
         if (result.user.location) {
-          globalThis.location.replace('/dashboard');
+          globalThis.location.replace('/dashboard')
         } else {
-          globalThis.location.replace('/onboarding/user');
+          globalThis.location.replace('/onboarding/user')
         }
       } catch (err) {
-        console.error('[Callback] Error:', err);
-        setError((err as Error).message);
-        setIsProcessing(false);
-        toast.error('An error occurred during login');
+        console.error('[Callback] Error:', err)
+        setError((err as Error).message)
+        setIsProcessing(false)
+        toast.error('An error occurred during login')
 
         setTimeout(() => {
-          navigate('/auth/login');
-        }, 3000);
+          navigate({ to: '/auth/login' })
+        }, 3000)
       }
-    };
+    }
 
-    handleCallback();
+    handleCallback()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   if (error) {
     const isPrivateEmailError =
       error.toLowerCase().includes('failed to create user') ||
       error.toLowerCase().includes('email') ||
-      error.toLowerCase().includes('user record');
+      error.toLowerCase().includes('user record')
 
     return (
       <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
@@ -152,7 +156,7 @@ const CallbackPage: FC = (): ReactElement => {
           </p>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -165,7 +169,5 @@ const CallbackPage: FC = (): ReactElement => {
         <p className="text-gray-600">Please wait</p>
       </div>
     </div>
-  );
-};
-
-export default CallbackPage;
+  )
+}
diff --git a/apps/qrcampaign/vite.config.mts b/apps/qrcampaign/vite.config.mts
index 78962ee..d171624 100644
--- a/apps/qrcampaign/vite.config.mts
+++ b/apps/qrcampaign/vite.config.mts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 export default defineConfig(() => ({
   root: import.meta.dirname,
@@ -15,7 +16,14 @@ export default defineConfig(() => ({
     port: 3008,
     host: 'localhost',
   },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  plugins: [
+    TanStackRouterVite({
+      routeFileIgnorePattern: '_components|_hooks|_hook|_data',
+    }),
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+  ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
diff --git a/package-lock.json b/package-lock.json
index 4ac116e..92a2670 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,10 @@
         "@redocly/ajv": "^8.18.1",
         "@tailwindcss/vite": "^4.2.2",
         "@tanstack/react-query": "^5.95.2",
+        "@tanstack/react-router": "^1.168.13",
         "@tanstack/react-store": "^0.9.3",
         "@tanstack/react-table": "^8.21.3",
+        "@tanstack/router-plugin": "^1.167.12",
         "astro": "^6.1.5",
         "axios": "^1.14.0",
         "class-variance-authority": "^0.7.1",
@@ -950,7 +952,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
       "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
@@ -966,7 +967,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
       "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
@@ -9124,6 +9124,19 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tanstack/history": {
+      "version": "1.161.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.161.6.tgz",
+      "integrity": "sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.95.2",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.95.2.tgz",
@@ -9150,6 +9163,29 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-router": {
+      "version": "1.168.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.168.13.tgz",
+      "integrity": "sha512-rvrL1bK/bOjjfDyAKKFvkVXeo8IZZmwfy9DwJaMlj7lCmpWl4Qban2/d+EirlHPcwHDNq5OkS5jhcBiZ+24RJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.161.6",
+        "@tanstack/react-store": "^0.9.3",
+        "@tanstack/router-core": "1.168.9",
+        "isbot": "^5.1.22"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0 || >=19.0.0",
+        "react-dom": ">=18.0.0 || >=19.0.0"
+      }
+    },
     "node_modules/@tanstack/react-store": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.9.3.tgz",
@@ -9188,6 +9224,220 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/@tanstack/router-core": {
+      "version": "1.168.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.168.9.tgz",
+      "integrity": "sha512-18oeEwEDyXOIuO1VBP9ACaK7tYHZUjynGDCoUh/5c/BNhia9vCJCp9O0LfhZXOorDc/PmLSgvmweFhVmIxF10g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.161.6",
+        "cookie-es": "^2.0.0",
+        "seroval": "^1.4.2",
+        "seroval-plugins": "^1.4.2"
+      },
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/router-core/node_modules/cookie-es": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.1.tgz",
+      "integrity": "sha512-aVf4A4hI2w70LnF7GG+7xDQUkliwiXWXFvTjkip4+b64ygDQ2sJPRSKFDHbxn8o0xu9QzPkMuuiWIXyFSE2slA==",
+      "license": "MIT"
+    },
+    "node_modules/@tanstack/router-generator": {
+      "version": "1.166.24",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.166.24.tgz",
+      "integrity": "sha512-vdaGKwuH+r+DPe6R1mjk+TDDmDH6NTG7QqwxHqGEvOH4aGf9sPjhmRKNJZqQr8cPIbfp6u5lXyZ1TeDcSNMVEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/router-core": "1.168.9",
+        "@tanstack/router-utils": "1.161.6",
+        "@tanstack/virtual-file-routes": "1.161.7",
+        "prettier": "^3.5.0",
+        "recast": "^0.23.11",
+        "source-map": "^0.7.4",
+        "tsx": "^4.19.2",
+        "zod": "^3.24.2"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/router-generator/node_modules/prettier": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.2.tgz",
+      "integrity": "sha512-8c3mgTe0ASwWAJK+78dpviD+A8EqhndQPUBpNUIPt6+xWlIigCwfN01lWr9MAede4uqXGTEKeQWTvzb3vjia0Q==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/@tanstack/router-plugin": {
+      "version": "1.167.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-plugin/-/router-plugin-1.167.12.tgz",
+      "integrity": "sha512-StEHcctCuFI5taSjO+lhR/yQ+EK63BdyYa+ne6FoNQPB3MMrOUrz2ZVnbqILRLkh2b+p2EfBKt65sgAKdKygPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@tanstack/router-core": "1.168.9",
+        "@tanstack/router-generator": "1.166.24",
+        "@tanstack/router-utils": "1.161.6",
+        "@tanstack/virtual-file-routes": "1.161.7",
+        "chokidar": "^3.6.0",
+        "unplugin": "^2.1.2",
+        "zod": "^3.24.2"
+      },
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@rsbuild/core": ">=1.0.2",
+        "@tanstack/react-router": "^1.168.10",
+        "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0",
+        "vite-plugin-solid": "^2.11.10",
+        "webpack": ">=5.92.0"
+      },
+      "peerDependenciesMeta": {
+        "@rsbuild/core": {
+          "optional": true
+        },
+        "@tanstack/react-router": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "vite-plugin-solid": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/router-plugin/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@tanstack/router-plugin/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@tanstack/router-plugin/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@tanstack/router-plugin/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/@tanstack/router-utils": {
+      "version": "1.161.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-utils/-/router-utils-1.161.6.tgz",
+      "integrity": "sha512-nRcYw+w2OEgK6VfjirYvGyPLOK+tZQz1jkYcmH5AjMamQ9PycnlxZF2aEZtPpNoUsaceX2bHptn6Ub5hGXqNvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/generator": "^7.28.5",
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "ansis": "^4.1.0",
+        "babel-dead-code-elimination": "^1.0.12",
+        "diff": "^8.0.2",
+        "pathe": "^2.0.3",
+        "tinyglobby": "^0.2.15"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/router-utils/node_modules/diff": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
+      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/@tanstack/store": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.9.3.tgz",
@@ -9211,6 +9461,22 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/virtual-file-routes": {
+      "version": "1.161.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.161.7.tgz",
+      "integrity": "sha512-olW33+Cn+bsCsZKPwEGhlkqS6w3M2slFv11JIobdnCFKMLG97oAI2kWKdx5/zsywTL8flpnoIgaZZPlQTFYhdQ==",
+      "license": "MIT",
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -11027,7 +11293,6 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -11225,6 +11490,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/ansis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.2.0.tgz",
+      "integrity": "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -11493,6 +11767,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -11949,6 +12235,18 @@
         }
       }
     },
+    "node_modules/babel-dead-code-elimination": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/babel-dead-code-elimination/-/babel-dead-code-elimination-1.0.12.tgz",
+      "integrity": "sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.7",
+        "@babel/parser": "^7.23.6",
+        "@babel/traverse": "^7.23.7",
+        "@babel/types": "^7.23.6"
+      }
+    },
     "node_modules/babel-plugin-const-enum": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-const-enum/-/babel-plugin-const-enum-1.2.0.tgz",
@@ -12211,6 +12509,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -12426,7 +12736,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -15051,7 +15360,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
@@ -15603,7 +15911,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -16138,7 +16445,6 @@
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
       "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -17196,6 +17502,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -17320,7 +17638,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -17375,7 +17692,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -17470,7 +17786,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -17744,6 +18059,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/isbot": {
+      "version": "5.1.37",
+      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.37.tgz",
+      "integrity": "sha512-5bcicX81xf6NlTEV8rWdg7Pk01LFizDetuYGHx6d/f6y3lR2/oo8IfxjzJqn1UdDEyCcwT9e7NRloj8DwCYujQ==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -20859,7 +21183,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pend": {
@@ -21834,6 +22157,31 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/recharts": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
@@ -22281,7 +22629,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
@@ -23006,6 +23353,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/seroval": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.5.2.tgz",
+      "integrity": "sha512-xcRN39BdsnO9Tf+VzsE7b3JyTJASItIV1FVFewJKCFcW4s4haIKS3e6vj8PGB9qBwC7tnuOywQMdv5N4qkzi7Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seroval-plugins": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.5.2.tgz",
+      "integrity": "sha512-qpY0Cl+fKYFn4GOf3cMiq6l72CpuVaawb6ILjubOQ+diJ54LfOWaSSPsaswN8DRPIPW4Yq+tE1k5aKd7ILyaFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "seroval": "^1.0"
+      }
+    },
     "node_modules/serve": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.6.tgz",
@@ -23511,7 +23879,6 @@
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
       "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">= 12"
@@ -24198,7 +24565,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -24420,6 +24786,25 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tsx": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.27.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
     "node_modules/tw-animate-css": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
@@ -24914,6 +25299,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -25655,6 +26055,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
diff --git a/package.json b/package.json
index 5ea595a..617b9db 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,10 @@
     "@redocly/ajv": "^8.18.1",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-router": "^1.168.13",
     "@tanstack/react-store": "^0.9.3",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/router-plugin": "^1.167.12",
     "astro": "^6.1.5",
     "axios": "^1.14.0",
     "class-variance-authority": "^0.7.1",