diff --git a/bun.lockb b/bun.lockb
index 2122bf0..dff4b44 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8e23e87..2ee55d2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-router": "^1.18.3",
+    "@tanstack/router-vite-plugin": "^1.18.1",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
@@ -17,6 +19,7 @@
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
+    "@types/node": "^20.11.24",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 178f88d..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function App() {
-  return <div className="mx-auto text-red-400">hi</div>;
-}
diff --git a/src/app/App.tsx b/src/app/App.tsx
new file mode 100644
index 0000000..a2d41b4
--- /dev/null
+++ b/src/app/App.tsx
@@ -0,0 +1,14 @@
+import { routeTree } from "@/routeTree.gen";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+const router = createRouter({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}
diff --git a/src/main.tsx b/src/main.tsx
index f043eb2..b8255e2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,5 @@
 import "./index.css";
-import App from "./App.tsx";
+import App from "./app/App.tsx";
 
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -7,5 +7,5 @@ import ReactDOM from "react-dom/client";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
new file mode 100644
index 0000000..6b2afc9
--- /dev/null
+++ b/src/routeTree.gen.ts
@@ -0,0 +1,38 @@
+/* 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'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexRoute])
+
+/* prettier-ignore-end */
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
new file mode 100644
index 0000000..43adf88
--- /dev/null
+++ b/src/routes/__root.tsx
@@ -0,0 +1,9 @@
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+    </>
+  ),
+});
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..add34f8
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+function IndexPage() {
+  return <div>hi</div>;
+}
+
+export const Route = createFileRoute("/")({
+  component: IndexPage,
+});
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..439469d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/vite.config.ts b/vite.config.ts
index 861b04b..43e0cb1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,14 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), TanStackRouterVite()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});