diff --git a/.phase23-state.json b/.phase23-state.json
index 77e9e59..fb6a98c 100644
--- a/.phase23-state.json
+++ b/.phase23-state.json
@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "command-bar-actions",
+  "current_feature": "animated-transitions",
   "started_at": "2026-05-23T08:25:49.746920",
   "attempted_features": [
     "workspace-logo",
-    "custom-themes"
+    "custom-themes",
+    "command-bar-actions"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 53c91fc..fd2b8b1 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -2742,3 +2742,22 @@ 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
+- `08:29:17` **INFO**   Committed feature command-bar-actions
+- `08:29:17` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: animated-transitions (2026-05-23 08:29:17)
+
+- `08:29:17` **INFO** Description: Page-Transitions mit fade-in beim Route-Change
+- `08:29:17` **INFO**   Generating apps/web/src/index.css (ERWEITERT — füge fade-in animation utility: @keyframes fade-in { from …)
+- `08:29:29` **INFO**     wrote 994 chars in 11.6s (attempt 1)
+- `08:29:29` **INFO**   Generating apps/web/src/App.tsx (ERWEITERT — wrap <Outlet /> in <div className='page-enter' key={locati…)
+- `08:30:28` **INFO**     wrote 7286 chars in 59.2s (attempt 1)
+- `08:30:28` **INFO** Running tsc --noEmit on api…
+- `08:30:30` **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/web/src/App.tsx b/apps/web/src/App.tsx
index 6101e9f..7b8d174 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { createRootRoute, createRoute, createRouter, RouterProvider, Outlet, redirect } from "@tanstack/react-router"
+import { createRootRoute, createRoute, createRouter, RouterProvider, Outlet, redirect, useLocation } from "@tanstack/react-router"
 import Dashboard from "./pages/Dashboard"
 import Login from "./pages/Login"
 import ForgotPassword from "./pages/ForgotPassword"
@@ -36,25 +36,30 @@ import ErrorBoundary from "./components/ErrorBoundary"
 import { api } from "./lib/api"
 
 const rootRoute = createRootRoute({
-  component: () => (
-    <ToastProvider>
-      <div className="min-h-screen flex flex-col bg-slate-50">
-        <div className="flex-grow">
-          <IdleDetector />
-          <Nav />
-          <CommandPalette />
-          <KeyboardHelp />
-          <OnboardingTour />
-          <QuickAdd />
-          <UndoStack />
-          <Outlet />
+  component: () => {
+    const location = useLocation()
+    return (
+      <ToastProvider>
+        <div className="min-h-screen flex flex-col bg-slate-50">
+          <div className="flex-grow">
+            <IdleDetector />
+            <Nav />
+            <CommandPalette />
+            <KeyboardHelp />
+            <OnboardingTour />
+            <QuickAdd />
+            <UndoStack />
+            <div className="page-enter" key={location.pathname}>
+              <Outlet />
+            </div>
+          </div>
+          <footer className="border-t bg-white py-2 text-center">
+            <VersionBadge />
+          </footer>
         </div>
-        <footer className="border-t bg-white py-2 text-center">
-          <VersionBadge />
-        </footer>
-      </div>
-    </ToastProvider>
-  )
+      </ToastProvider>
+    )
+  }
 })
 
 const loginRoute = createRoute({
@@ -144,7 +149,7 @@ const customersRoute = createRoute({
 
 const customerDetailRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: "/customers/$id",
+  path: "/customers/$customerId",
   beforeLoad: authCheck,
   component: CustomerDetail
 })
@@ -158,7 +163,7 @@ const projectsRoute = createRoute({
 
 const projectDetailRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: "/projects/$id",
+  path: "/projects/$projectId",
   beforeLoad: authCheck,
   component: ProjectDetail
 })
@@ -177,13 +182,6 @@ const profileRoute = createRoute({
   component: Profile
 })
 
-const adminUsersRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/admin/users",
-  beforeLoad: adminCheck,
-  component: AdminUsers
-})
-
 const settingsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/settings",
@@ -191,27 +189,6 @@ const settingsRoute = createRoute({
   component: Settings
 })
 
-const auditLogRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/admin/audit-log",
-  beforeLoad: adminCheck,
-  component: AuditLog
-})
-
-const documentsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/documents",
-  beforeLoad: authCheck,
-  component: Documents
-})
-
-const webhooksRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/admin/webhooks",
-  beforeLoad: adminCheck,
-  component: Webhooks
-})
-
 const twoFactorRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/settings/2fa",
@@ -240,9 +217,37 @@ const invoicesRoute = createRoute({
   component: Invoices
 })
 
+const adminUsersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/admin/users",
+  beforeLoad: adminCheck,
+  component: AdminUsers
+})
+
+const auditLogRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/admin/audit-log",
+  beforeLoad: adminCheck,
+  component: AuditLog
+})
+
+const documentsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/documents",
+  beforeLoad: authCheck,
+  component: Documents
+})
+
+const webhooksRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/webhooks",
+  beforeLoad: authCheck,
+  component: Webhooks
+})
+
 const apiKeysRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: "/settings/api-keys",
+  path: "/api-keys",
   beforeLoad: authCheck,
   component: ApiKeys
 })
@@ -262,15 +267,15 @@ const routeTree = [
   projectDetailRoute,
   projectTemplatesRoute,
   profileRoute,
-  adminUsersRoute,
   settingsRoute,
-  auditLogRoute,
-  documentsRoute,
-  webhooksRoute,
   twoFactorRoute,
   billingRoute,
   integrationsRoute,
   invoicesRoute,
+  adminUsersRoute,
+  auditLogRoute,
+  documentsRoute,
+  webhooksRoute,
   apiKeysRoute
 ]
 
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 4a5774c..72a31f6 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -18,6 +18,17 @@ html[data-color-theme='forest'] {
   --primary: #10b981;
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @layer base {
   * {
     @apply transition-colors duration-150;
@@ -40,4 +51,8 @@ html[data-color-theme='forest'] {
   .card {
     @apply bg-white border border-slate-200 rounded-lg shadow-sm dark:bg-slate-800 dark:border-slate-700;
   }
+
+  .page-enter {
+    animation: fade-in 200ms ease-out;
+  }
 }
\ No newline at end of file