diff --git a/.phase9-state.json b/.phase9-state.json
index f53de82..2047fbd 100644
--- a/.phase9-state.json
+++ b/.phase9-state.json
@@ -1,11 +1,12 @@
 {
   "completed_features": [],
-  "current_feature": "api-client-phase9",
+  "current_feature": "router-phase9",
   "started_at": "2026-05-23T06:02:21.166704",
   "attempted_features": [
     "webhooks-config",
     "two-factor-auth-stub",
     "billing-stub",
-    "integrations-page"
+    "integrations-page",
+    "api-client-phase9"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 91b0396..3832ed4 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -1107,3 +1107,24 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `06:06:54` **INFO**   Committed feature api-client-phase9
+- `06:06:54` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: router-phase9 (2026-05-23 06:06:54)
+
+- `06:06:54` **INFO** Description: App + routes/index für phase9 Routes
+- `06:06:54` **INFO**   Generating apps/api/src/routes/index.ts (ERWEITERT — füge webhookRoutes ('/api/webhooks'). Behalte alle bestehe…)
+- `06:07:03` **INFO**     wrote 1111 chars in 8.9s (attempt 1)
+- `06:07:03` **INFO**   Generating apps/web/src/App.tsx (ERWEITERT — füge /webhooks (admin), /2fa, /billing, /integrations Rout…)
+- `06:07:45` **INFO**     wrote 4931 chars in 41.6s (attempt 1)
+- `06:07:45` **INFO**   Generating apps/web/src/components/Nav.tsx (ERWEITERT — füge Integrations-Link (alle Users) + Webhooks-Link (admin…)
+- `06:08:27` **INFO**     wrote 4417 chars in 42.2s (attempt 1)
+- `06:08:27` **INFO** Running tsc --noEmit on api…
+- `06:08:29` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
diff --git a/apps/api/src/routes/index.ts b/apps/api/src/routes/index.ts
index 63b5b22..c45b048 100644
--- a/apps/api/src/routes/index.ts
+++ b/apps/api/src/routes/index.ts
@@ -8,6 +8,7 @@ import settingsRoutes from "./settings"
 import auditLogRoutes from "./audit-log"
 import documentsRoutes from "./documents"
 import searchRoutes from "./search"
+import webhookRoutes from "./webhooks"
 
 export async function setupRoutes(server: FastifyInstance) {
   server.register(authRoutes, { prefix: "/api/auth" })
@@ -19,4 +20,5 @@ export async function setupRoutes(server: FastifyInstance) {
   server.register(auditLogRoutes, { prefix: "/api/audit-log" })
   server.register(documentsRoutes, { prefix: "/api/documents" })
   server.register(searchRoutes, { prefix: "/api/search" })
+  server.register(webhookRoutes, { prefix: "/api/webhooks" })
 }
\ No newline at end of file
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index b28cbe7..bdf7e50 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -12,6 +12,10 @@ import Settings from "./pages/Settings"
 import Calendar from "./pages/Calendar"
 import AuditLog from "./pages/AuditLog"
 import Documents from "./pages/Documents"
+import Webhooks from "./pages/Webhooks"
+import TwoFactorAuth from "./pages/TwoFactorAuth"
+import Billing from "./pages/Billing"
+import Integrations from "./pages/Integrations"
 import Nav from "./components/Nav"
 import CommandPalette from "./components/CommandPalette"
 import { ToastProvider } from "./components/Toast"
@@ -123,6 +127,27 @@ const profileRoute = createRoute({
   component: Profile
 })
 
+const twoFactorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/2fa",
+  beforeLoad: authCheck,
+  component: TwoFactorAuth
+})
+
+const billingRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/billing",
+  beforeLoad: authCheck,
+  component: Billing
+})
+
+const integrationsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/integrations",
+  beforeLoad: authCheck,
+  component: Integrations
+})
+
 const adminRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/admin",
@@ -144,6 +169,13 @@ const settingsRoute = createRoute({
   component: Settings
 })
 
+const webhooksRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/webhooks",
+  beforeLoad: adminCheck,
+  component: Webhooks
+})
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   loginRoute,
@@ -155,9 +187,13 @@ const routeTree = rootRoute.addChildren([
   projectDetailRoute,
   documentsRoute,
   profileRoute,
+  twoFactorRoute,
+  billingRoute,
+  integrationsRoute,
   adminRoute,
   auditLogRoute,
-  settingsRoute
+  settingsRoute,
+  webhooksRoute
 ])
 
 const router = createRouter({
diff --git a/apps/web/src/components/Nav.tsx b/apps/web/src/components/Nav.tsx
index cc5146a..ca6fbb6 100644
--- a/apps/web/src/components/Nav.tsx
+++ b/apps/web/src/components/Nav.tsx
@@ -12,7 +12,9 @@ import {
   Settings,
   ListTree,
   Menu,
-  X
+  X,
+  Zap,
+  CreditCard
 } from "lucide-react"
 import { useQuery } from "@tanstack/react-query"
 import { api } from "../lib/api"
@@ -34,18 +36,21 @@ export default function Nav() {
     { label: "Calendar", to: "/calendar", icon: Calendar },
     { label: "Customers", to: "/customers", icon: Users },
     { label: "Projects", to: "/projects", icon: FolderKanban },
+    { label: "Integrations", to: "/integrations", icon: Zap },
+    { label: "Billing", to: "/billing", icon: CreditCard },
   ]
 
   const adminItems = [
     { label: "Admin", to: "/admin", icon: ShieldCheck },
     { label: "Audit Log", to: "/admin/audit-log", icon: ListTree },
+    { label: "Webhooks", to: "/admin/webhooks", icon: Zap },
   ]
 
   const allItems = user?.role === 'admin' 
     ? [...navItems, ...adminItems] 
     : navItems
 
-  const NavLink = ({ item, mobile = false }: { item: typeof navItems[0], mobile?: boolean }) => {
+  const NavLink = ({ item }: { item: typeof navItems[0] }) => {
     const isActive = location.pathname === item.to
     const Icon = item.icon
     
@@ -109,21 +114,10 @@ export default function Nav() {
 
       {/* Mobile Menu Overlay */}
       {isMobileMenuOpen && (
-        <div className="md:hidden absolute top-16 left-0 w-full bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-xl animate-in slide-in-from-top-2 duration-200">
-          <div className="px-4 pt-2 pb-6 space-y-1">
-            {allItems.map((item) => (
-              <NavLink key={item.to} item={item} mobile />
-            ))}
-            <div className="pt-4 mt-4 border-t border-gray-100 dark:border-slate-800">
-              <Link
-                to="/settings"
-                className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 dark:text-slate-400 hover:bg-gray-50 dark:hover:bg-slate-800"
-              >
-                <Settings className="w-4 h-4" />
-                Settings
-              </Link>
-            </div>
-          </div>
+        <div className="md:hidden absolute top-16 left-0 w-full bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 px-4 py-4 space-y-1 shadow-lg">
+          {allItems.map((item) => (
+            <NavLink key={item.to} item={item} />
+          ))}
         </div>
       )}
     </nav>