diff --git a/.phase5-state.json b/.phase5-state.json
index 0f56e26..e1fa6cc 100644
--- a/.phase5-state.json
+++ b/.phase5-state.json
@@ -4,9 +4,10 @@
     "customer-detail-page",
     "project-detail-page"
   ],
-  "current_feature": "api-client-phase5",
+  "current_feature": "router-phase5",
   "started_at": "2026-05-23T05:20:11.407108",
   "attempted_features": [
-    "settings-page"
+    "settings-page",
+    "api-client-phase5"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index a700c80..ef0dfd9 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -603,3 +603,21 @@ src/routes/settings.ts(3,10): error TS2305: Module '"../db/schema"' has no expor
 undefined
 /home/dark/Developer/EmberClone/apps/api:
  ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command failed with exit code 2: tsc --noEmit -p tsconfig.json
+- `05:24:51` **INFO**   Committed feature api-client-phase5
+- `05:24:52` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: router-phase5 (2026-05-23 05:24:52)
+
+- `05:24:52` **INFO** Description: App.tsx + Nav um neue Routen erweitern + db-migrate nicht vergessen
+- `05:24:52` **INFO**   Generating apps/api/src/routes/index.ts (ERWEITERT — behalte alle bestehenden registrations. Füge `settingsRout…)
+- `05:24:57` **INFO**     wrote 703 chars in 5.6s (attempt 1)
+- `05:24:57` **INFO**   Generating apps/web/src/App.tsx (ERWEITERT — füge Routes /customers/$id (CustomerDetail), /projects/$id…)
+- `05:25:26` **INFO**     wrote 3410 chars in 29.0s (attempt 1)
+- `05:25:26` **INFO**   Generating apps/web/src/components/Nav.tsx (ERWEITERT — füge Settings-Link bei admin-role + Theme-Toggle. Behalte …)
+- `05:26:12` **INFO**     wrote 5232 chars in 46.3s (attempt 1)
+- `05:26:12` **INFO** Running tsc --noEmit on api…
+- `05:26:14` **WARN**   tsc errors:
+src/routes/settings.ts(3,10): error TS2305: Module '"../db/schema"' has no exported member 'settings'.
+undefined
+/home/dark/Developer/EmberClone/apps/api:
+ ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command failed with exit code 2: tsc --noEmit -p tsconfig.json
diff --git a/apps/api/src/routes/index.ts b/apps/api/src/routes/index.ts
index ac21070..c6b68f8 100644
--- a/apps/api/src/routes/index.ts
+++ b/apps/api/src/routes/index.ts
@@ -4,6 +4,7 @@ import customerRoutes from "./customers"
 import projectRoutes from "./projects"
 import timeEntryRoutes from "./time-entries"
 import userRoutes from "./users"
+import settingsRoutes from "./settings"
 
 export async function setupRoutes(server: FastifyInstance) {
   server.register(authRoutes, { prefix: "/api/auth" })
@@ -11,4 +12,5 @@ export async function setupRoutes(server: FastifyInstance) {
   server.register(customerRoutes, { prefix: "/api/customers" })
   server.register(projectRoutes, { prefix: "/api/projects" })
   server.register(userRoutes, { prefix: "/api/users" })
-}
+  server.register(settingsRoutes, { prefix: "/api/settings" })
+}
\ No newline at end of file
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 47b0b51..5291cf4 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -3,9 +3,12 @@ import Dashboard from "./pages/Dashboard"
 import Login from "./pages/Login"
 import TimeEntries from "./pages/TimeEntries"
 import Customers from "./pages/Customers"
+import CustomerDetail from "./pages/CustomerDetail"
 import Projects from "./pages/Projects"
+import ProjectDetail from "./pages/ProjectDetail"
 import Profile from "./pages/Profile"
 import AdminUsers from "./pages/AdminUsers"
+import Settings from "./pages/Settings"
 import Nav from "./components/Nav"
 import { ToastProvider } from "./components/Toast"
 import ErrorBoundary from "./components/ErrorBoundary"
@@ -73,6 +76,13 @@ const customersRoute = createRoute({
   component: Customers
 })
 
+const customerDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/customers/$id",
+  beforeLoad: authCheck,
+  component: CustomerDetail
+})
+
 const projectsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/projects",
@@ -80,6 +90,13 @@ const projectsRoute = createRoute({
   component: Projects
 })
 
+const projectDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/projects/$id",
+  beforeLoad: authCheck,
+  component: ProjectDetail
+})
+
 const profileRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/profile",
@@ -94,14 +111,24 @@ const adminRoute = createRoute({
   component: AdminUsers
 })
 
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/settings",
+  beforeLoad: adminCheck,
+  component: Settings
+})
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   loginRoute,
   timeEntriesRoute,
   customersRoute,
+  customerDetailRoute,
   projectsRoute,
+  projectDetailRoute,
   profileRoute,
-  adminRoute
+  adminRoute,
+  settingsRoute
 ])
 
 const router = createRouter({
diff --git a/apps/web/src/components/Nav.tsx b/apps/web/src/components/Nav.tsx
index eb44e70..3135bfc 100644
--- a/apps/web/src/components/Nav.tsx
+++ b/apps/web/src/components/Nav.tsx
@@ -9,7 +9,8 @@ import {
   LogOut,
   ShieldCheck,
   Sun,
-  Moon
+  Moon,
+  Settings
 } from "lucide-react"
 import { useQuery } from "@tanstack/react-query"
 import { api } from "../lib/api"
@@ -73,17 +74,30 @@ export default function Nav() {
               })}
 
               {user?.role === 'admin' && (
-                <Link
-                  to="/admin"
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                    location.pathname === "/admin"
-                      ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                      : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-                  }`}
-                >
-                  <ShieldCheck className="w-4 h-4" />
-                  Admin
-                </Link>
+                <>
+                  <Link
+                    to="/admin"
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      location.pathname === "/admin"
+                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                    }`}
+                  >
+                    <ShieldCheck className="w-4 h-4" />
+                    Admin
+                  </Link>
+                  <Link
+                    to="/settings"
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      location.pathname === "/settings"
+                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                    }`}
+                  >
+                    <Settings className="w-4 h-4" />
+                    Settings
+                  </Link>
+                </>
               )}
             </div>
           </div>
@@ -108,10 +122,10 @@ export default function Nav() {
               <User className="w-4 h-4" />
               Profile
             </Link>
-            
+
             <button
               onClick={handleLogout}
-              className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-red-600 dark:text-slate-400 dark:hover:text-red-400 transition-colors px-3 py-2"
+              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-red-600 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-red-400 transition-colors"
             >
               <LogOut className="w-4 h-4" />
               Logout