diff --git a/DESIGN_MIGRATION_REPORT.md b/DESIGN_MIGRATION_REPORT.md
new file mode 100644
index 0000000..4b265dd
--- /dev/null
+++ b/DESIGN_MIGRATION_REPORT.md
@@ -0,0 +1,47 @@
+# RentalDriveGo Phase 16 Design Migration
+
+## Outcome
+
+The Phase 16 visual system has been applied at source level to the legacy application front ends in this archive:
+
+- `homepage`: retained as the authoritative Phase 16 marketing implementation already present in the legacy archive.
+- `admin`: migrated to the Phase 16 token palette and component treatment; navigation was rebuilt as a responsive, accessible application shell.
+- `dashboard`: migrated to the same semantic surfaces, typography, borders, shadows, focus treatment, dark theme, and blue/orange action hierarchy.
+- `storefront`: migrated to the same public-site surfaces, conversion treatment, cards, forms, dark theme, and brand naming.
+- `api`: intentionally unchanged. A visual migration should not casually rewrite business logic because that is how weekends disappear.
+
+## Design rules applied
+
+- Blue is the operational primary color.
+- Orange is reserved for conversion emphasis and focus visibility.
+- Green is restored to success/status meaning instead of being used as a disguised primary action.
+- Light and dark themes share semantic tokens rather than unrelated hard-coded palettes.
+- English and French remain LTR; Arabic continues to use document RTL and an Arabic font fallback stack.
+- Interactive controls use a minimum 44px target, visible focus treatment, reduced-motion handling, and high-contrast fallbacks.
+- Cards and panels use the Phase 16 radius, border, surface, and shadow hierarchy.
+- The retired `RentalDriveGo` name was replaced with `RentalDriveGo` throughout all frontend source files.
+
+## Important source finding
+
+The supplied `RentalDriveGo_Phase16_Evidence_Package_v1.0.zip` is an evidence and launch-governance package, not the Phase 16 source repository. It contains 98 files, while its manifest describes a separate 648-file repository that was not included. The legacy archive already contained most of that repository's marketing homepage implementation: 182 files match the Phase 16 manifest checksums exactly. That embedded homepage implementation was therefore used as the reliable visual source of truth rather than fabricating a new design from launch paperwork.
+
+## Files added
+
+- `admin/src/styles/phase16-tokens.css`
+- `dashboard/src/styles/phase16-tokens.css`
+- `storefront/src/styles/phase16-tokens.css`
+- `scripts/validate-phase16-design.mjs`
+- `DESIGN_MIGRATION_REPORT.md`
+- `PHASE16_DESIGN_MIGRATION_MANIFEST.json`
+
+## Validation performed
+
+- Parsed 633 TypeScript and TSX source files with TypeScript 5.8 syntax validation: passed.
+- Checked 53 CSS files for balanced rule blocks: passed.
+- Verified all three migrated apps import the Phase 16 tokens: passed.
+- Verified no retired `RentalDriveGo` branding remains in frontend source: passed.
+- Ran `node scripts/validate-phase16-design.mjs`: passed.
+
+## Validation not claimed
+
+A full dependency-backed build and browser regression suite was not run. The supplied legacy archive omits its root workspace configuration and the local packages referenced as `@rentaldrivego/types` and `@rentaldrivego/database`. The Phase 16 evidence upload also omits the source repository and dependency lockfile it references. Those are packaging defects in the inputs, not facts to conceal with optimistic prose.
diff --git a/NAVBAR_FOOTER_REFACTOR_REPORT.md b/NAVBAR_FOOTER_REFACTOR_REPORT.md
new file mode 100644
index 0000000..7afdc7a
--- /dev/null
+++ b/NAVBAR_FOOTER_REFACTOR_REPORT.md
@@ -0,0 +1,33 @@
+# RentalDriveGo Public Chrome Refactor Report
+
+## Completed
+
+1. Extracted the dashboard public navbar into `components/public/PublicNavbar.tsx`.
+2. Extracted the dashboard public footer into `components/public/PublicFooter.tsx`.
+3. Added `PublicPageLayout` as the reusable composition layer for authentication and onboarding pages.
+4. Updated sign-in, create-account, forgot-password, reset-password, verify-email, onboarding, and invitation pages to use the public component API.
+5. Preserved legacy component paths through compatibility exports.
+6. Moved storefront navbar/footer assembly out of the Next.js route layout and into reusable public components.
+7. Added active-page semantics to dashboard sign-in and create-account navbar actions.
+8. Added focused tests and implementation documentation.
+
+## Deliberately unchanged
+
+- Authentication requests and API endpoints
+- Redirect behavior between storefront, dashboard, and admin applications
+- Language and theme persistence
+- Embedded workspace behavior
+- Authenticated dashboard and admin navigation
+
+## Validation performed
+
+- Parsed all TypeScript and TSX source files successfully.
+- Verified all relative and `@/` local imports resolve.
+- Verified every `use client` directive remains the first statement.
+- Verified sign-in and create-account import and render `PublicPageLayout`.
+- Verified the storefront route layout no longer assembles navbar/footer inline.
+- Verified embedded password-recovery navigation preserves `embedded=1`.
+
+## Validation limitation
+
+A complete Next.js build was not executed because this archive does not include the monorepo root, workspace packages, lockfile, or installed dependencies referenced by the application package files. Static source validation was completed instead; pretending that equals a production build would be charmingly irresponsible.
diff --git a/PHASE16_DESIGN_MIGRATION_MANIFEST.json b/PHASE16_DESIGN_MIGRATION_MANIFEST.json
new file mode 100644
index 0000000..2af58ef
--- /dev/null
+++ b/PHASE16_DESIGN_MIGRATION_MANIFEST.json
@@ -0,0 +1,232 @@
+{
+  "schema_version": "1.0",
+  "project": "RentalDriveGo",
+  "migration": "Apply Phase 16 design system to legacy Archive.zip frontends",
+  "generated_at": "2026-06-26T02:14:35+00:00",
+  "source_archives": {
+    "legacy_archive": "Archive.zip",
+    "phase16_evidence": "RentalDriveGo_Phase16_Evidence_Package_v1.0.zip"
+  },
+  "scope": {
+    "homepage": "retained as embedded Phase 16 source of truth",
+    "admin": "migrated",
+    "dashboard": "migrated",
+    "storefront": "migrated",
+    "api": "unchanged"
+  },
+  "validation": {
+    "typescript_syntax_files": 633,
+    "typescript_syntax": "passed",
+    "css_files_checked": 53,
+    "css_balance": "passed",
+    "design_migration_validator": "passed",
+    "full_build": "not run because root workspace and local packages are absent from supplied archive"
+  },
+  "changed_file_count": 34,
+  "files": [
+    {
+      "path": "DESIGN_MIGRATION_REPORT.md",
+      "status": "added",
+      "bytes": 3260,
+      "sha256": "35c41d70484b917b38991791dfb2feb3e78234e4f30e2c99ba922d3d90ab83a6"
+    },
+    {
+      "path": "scripts/validate-phase16-design.mjs",
+      "status": "added",
+      "bytes": 1891,
+      "sha256": "7a35fad2750bccc09c24f24c1d57594048b040f24d4cde7639fa1a2ce3d63e64"
+    },
+    {
+      "path": "storefront/src/app/layout.tsx",
+      "status": "modified",
+      "bytes": 1833,
+      "sha256": "6fed4ef50a886e1c551b6456b46c5fc785b02a4be988aef06fa95c28443bbd27"
+    },
+    {
+      "path": "storefront/src/app/globals.css",
+      "status": "modified",
+      "bytes": 7525,
+      "sha256": "49e03206558248eb5de2b9a8463be6e0b43e01df518bc0b625fe2953a18185c6"
+    },
+    {
+      "path": "storefront/src/components/MarketplaceFooter.tsx",
+      "status": "modified",
+      "bytes": 4632,
+      "sha256": "169d04dcf0976d2637ef5371ca295e9c362bd089d8d6ec313b4e8b4131d5bdd3"
+    },
+    {
+      "path": "storefront/src/components/MarketplaceHeader.tsx",
+      "status": "modified",
+      "bytes": 10438,
+      "sha256": "25afc57ff9893f255eddf19580e84b510e6032764daaa5727e2e8d669dca4213"
+    },
+    {
+      "path": "storefront/src/styles/phase16-tokens.css",
+      "status": "added",
+      "bytes": 4214,
+      "sha256": "0e7fb35fb2833ff564c1188e39735349a8df901938fa87f2dc1b931dd4f04cd0"
+    },
+    {
+      "path": "storefront/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx",
+      "status": "modified",
+      "bytes": 13979,
+      "sha256": "9edf8da13e50cabcb2a126b300c71cb0b7a096a31d11d364e37dc09eeb625d3b"
+    },
+    {
+      "path": "dashboard/src/app/layout.tsx",
+      "status": "modified",
+      "bytes": 2133,
+      "sha256": "09399551351e3c7015e6700c3892cf81f2b45cf4d1b835e01645580e73608c05"
+    },
+    {
+      "path": "dashboard/src/app/globals.css",
+      "status": "modified",
+      "bytes": 16161,
+      "sha256": "0d01004900a4a6c078e98167c910d02b5fa29b4ebeafe0520a45cb7f9274c8b8"
+    },
+    {
+      "path": "dashboard/src/styles/phase16-tokens.css",
+      "status": "added",
+      "bytes": 4214,
+      "sha256": "0e7fb35fb2833ff564c1188e39735349a8df901938fa87f2dc1b931dd4f04cd0"
+    },
+    {
+      "path": "dashboard/src/components/layout/PublicFooter.tsx",
+      "status": "modified",
+      "bytes": 8348,
+      "sha256": "657f96cc725459f7bf7a668fe616aee4d295625c15366204b5987176fd60c8b8"
+    },
+    {
+      "path": "dashboard/src/components/layout/PublicHeader.tsx",
+      "status": "modified",
+      "bytes": 10250,
+      "sha256": "3e5ace09e73afbb95f09a1acf164011764cc789474430962426793564b8db459"
+    },
+    {
+      "path": "dashboard/src/components/layout/Sidebar.tsx",
+      "status": "modified",
+      "bytes": 18500,
+      "sha256": "d0f7571149a073c39b6a1b4331e6055d8347a8092bd858d7128a37a19847b4d7"
+    },
+    {
+      "path": "dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx",
+      "status": "modified",
+      "bytes": 6888,
+      "sha256": "9b6bbc1479529c51d5dd65ce0dffa4ed6245a1de687c2cc9b2f62d3a396a8f83"
+    },
+    {
+      "path": "dashboard/src/app/onboarding/page.tsx",
+      "status": "modified",
+      "bytes": 10593,
+      "sha256": "a2255be38766258da3495191ce793da21992b6f4c13520d760959b7eff5ccc8e"
+    },
+    {
+      "path": "dashboard/src/app/reset-password/ResetPasswordPageClient.tsx",
+      "status": "modified",
+      "bytes": 11998,
+      "sha256": "3a8f0c268c825097da5a8814c26c2526103536b7b3e6f3f5d04e0311cd3fbe27"
+    },
+    {
+      "path": "dashboard/src/app/verify-email/page.tsx",
+      "status": "modified",
+      "bytes": 5176,
+      "sha256": "e1fc11c7e2af90c4b3614a1a8c6b9babe2ea5e9884eaa4e94fc0994462d554d6"
+    },
+    {
+      "path": "dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx",
+      "status": "modified",
+      "bytes": 14464,
+      "sha256": "976e8f9244a8ca64e092373831970e3c4d7197ead33e3c478f6e8d9d375f9c3e"
+    },
+    {
+      "path": "dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx",
+      "status": "modified",
+      "bytes": 19760,
+      "sha256": "861d033b4b86792644538f69a38634d46d6c58d43e87bbeb67dcef806cf6ab24"
+    },
+    {
+      "path": "dashboard/src/app/(dashboard)/settings/page.tsx",
+      "status": "modified",
+      "bytes": 42414,
+      "sha256": "c46bdfd9c1c14d471b1aa03cca5e6d91f49dd8405aa27502f040bd97c0d5a64d"
+    },
+    {
+      "path": "admin/src/app/layout.tsx",
+      "status": "modified",
+      "bytes": 1210,
+      "sha256": "aaa6c6aedb14972a159a9bcf9f8dc0bdedd2681d8a1c37be989644975c94c243"
+    },
+    {
+      "path": "admin/src/app/globals.css",
+      "status": "modified",
+      "bytes": 8317,
+      "sha256": "4134ea739c645e1550e75d16fdf1b45c13392fd153250840c1272603adbd2832"
+    },
+    {
+      "path": "admin/src/styles/phase16-tokens.css",
+      "status": "added",
+      "bytes": 4214,
+      "sha256": "0e7fb35fb2833ff564c1188e39735349a8df901938fa87f2dc1b931dd4f04cd0"
+    },
+    {
+      "path": "admin/src/app/dashboard/layout.tsx",
+      "status": "modified",
+      "bytes": 10294,
+      "sha256": "8390dba373ae0f8d02e8d872f5b0f1736f60553bf33e90f8c07c02207dedadda"
+    },
+    {
+      "path": "admin/src/app/dashboard/page.tsx",
+      "status": "modified",
+      "bytes": 13442,
+      "sha256": "87995a735f7665723c791a6d528a14ebd78e529105e1bfa14654221248b62ca5"
+    },
+    {
+      "path": "admin/src/app/dashboard/admin-users/page.tsx",
+      "status": "modified",
+      "bytes": 12067,
+      "sha256": "64dfa83abc16aef56347c1d832edb2b30f5f11497a6cb2908c5158d891031983"
+    },
+    {
+      "path": "admin/src/app/dashboard/audit-logs/page.tsx",
+      "status": "modified",
+      "bytes": 4369,
+      "sha256": "0db9f45a4486dd4c3a8c89e82618fe49bf3f555aff9a7e8e16b028d2b53d72ef"
+    },
+    {
+      "path": "admin/src/app/dashboard/billing/page.tsx",
+      "status": "modified",
+      "bytes": 48678,
+      "sha256": "598125e6be30d184c2277269e163bd3f54605a839a63041fa57ba27cb03cdadd"
+    },
+    {
+      "path": "admin/src/app/dashboard/companies/page.tsx",
+      "status": "modified",
+      "bytes": 8622,
+      "sha256": "3513aa5a4ac525c0a6887cb3d77299c595b921e3e7f93001095f81f73f19fe31"
+    },
+    {
+      "path": "admin/src/app/dashboard/containers/page.tsx",
+      "status": "modified",
+      "bytes": 18580,
+      "sha256": "d01c7cddedf9fb222554f8ea48fa44a515baae353b6675496eea7578b1c0a105"
+    },
+    {
+      "path": "admin/src/app/dashboard/renters/page.tsx",
+      "status": "modified",
+      "bytes": 6988,
+      "sha256": "5ae947e70d674b930a5fc39f1c0577c25bb7c2ca484c761129fe091019aa0034"
+    },
+    {
+      "path": "admin/src/app/dashboard/site-config/page.tsx",
+      "status": "modified",
+      "bytes": 41636,
+      "sha256": "800108cec0ea22c84ea8f60452ddb633e472237505a16a8bcc73ad89467b08ea"
+    },
+    {
+      "path": "admin/src/app/dashboard/companies/[id]/page.tsx",
+      "status": "modified",
+      "bytes": 50874,
+      "sha256": "5b763c4280f9d561004dbb08faa945b7b868f48086ca3b0ac62cacb228db02d1"
+    }
+  ]
+}
diff --git a/PHASE16_OPERATIONAL_UI_MANIFEST.json b/PHASE16_OPERATIONAL_UI_MANIFEST.json
new file mode 100644
index 0000000..926b106
--- /dev/null
+++ b/PHASE16_OPERATIONAL_UI_MANIFEST.json
@@ -0,0 +1,43 @@
+{
+  "package": "RentalDriveGo_Phase16_Operational_UI_v1.0",
+  "generatedOn": "2026-06-25",
+  "scope": [
+    "dashboard",
+    "admin"
+  ],
+  "includedApplications": [
+    "homepage",
+    "storefront",
+    "dashboard",
+    "admin",
+    "api"
+  ],
+  "designAuthority": "Phase 16 homepage implementation",
+  "routeCoverage": {
+    "admin": 12,
+    "dashboard": 19
+  },
+  "validation": {
+    "typescriptSourceFilesParsed": 596,
+    "typescriptSyntaxFailures": 0,
+    "localImportsChecked": 190,
+    "unresolvedLocalImports": 0,
+    "designGate": "passed",
+    "productionBuild": "not run: missing monorepo root, workspace package, lockfile, and installed dependencies"
+  },
+  "keyFiles": [
+    "admin/src/styles/phase16-tokens.css",
+    "admin/src/app/globals.css",
+    "admin/src/app/dashboard/layout.tsx",
+    "dashboard/src/styles/phase16-tokens.css",
+    "dashboard/src/app/globals.css",
+    "dashboard/src/app/(dashboard)/layout.tsx",
+    "dashboard/src/components/layout/Sidebar.tsx",
+    "dashboard/src/components/layout/TopBar.tsx",
+    "scripts/validate-phase16-design.mjs"
+  ],
+  "documentation": [
+    "PHASE16_OPERATIONAL_UI_REPORT.md",
+    "docs/PHASE16_OPERATIONAL_UI_GUIDE.md"
+  ]
+}
diff --git a/PHASE16_OPERATIONAL_UI_REPORT.md b/PHASE16_OPERATIONAL_UI_REPORT.md
new file mode 100644
index 0000000..c900cf3
--- /dev/null
+++ b/PHASE16_OPERATIONAL_UI_REPORT.md
@@ -0,0 +1,95 @@
+# RentalDriveGo Phase 16 Operational UI Migration Report
+
+**Date:** 2026-06-25  
+**Scope:** Operator dashboard and platform admin  
+**Design authority:** Existing Phase 16 homepage implementation and its blue/orange semantic design system
+
+## Result
+
+The dashboard and admin applications now use the same visual language as the Phase 16 homepage rather than behaving like separate products. The migration changes shared shells, global tokens, navigation, page hierarchy, cards, forms, tables, status treatments, responsive behavior, dark mode, RTL behavior, and focus states. API business logic and route contracts were deliberately left unchanged.
+
+## Repository recovery
+
+The previous navbar/footer refactor archive omitted the `homepage` and `api` applications. This package was rebuilt from the complete Phase 16 archive, then overlaid with the public navbar/footer refactor before the operational UI migration. The final repository contains:
+
+- `homepage`
+- `storefront`
+- `dashboard`
+- `admin`
+- `api`
+- validation scripts and documentation
+
+## Shared visual system
+
+Both operational applications now consume matching `phase16-tokens.css` files with:
+
+- Homepage blue as the operational action color
+- Orange reserved for conversion, focus, warning, and selected emphasis
+- Shared light and dark surface mappings
+- Shared 10 px, 16 px, 24 px, and 32 px radius scale
+- Shared 44 px minimum interactive target
+- Shared 76 px topbar and 272 px desktop sidebar dimensions
+- Shared card, overlay, and focus shadows
+- Inter for Latin content and Noto Sans Arabic fallbacks for Arabic
+
+## Dashboard changes
+
+- Rebuilt the authenticated shell with the Phase 16 page background, sidebar, sticky topbar, content width, and responsive spacing.
+- Reworked sidebar branding, active navigation, user card, status marker, RTL logical borders, and mobile behavior.
+- Reworked the topbar search, page title, status pill, notifications, account controls, and semantic icon buttons.
+- Migrated all 19 dashboard routes to the shared page-heading or hero pattern.
+- Applied shared styling to overview metrics, quick actions, reservations, contracts, online reservations, fleet, customers, team, reviews, complaints, offers, billing, subscription, reports, notifications, and settings.
+- Preserved printable contract styling as a document surface while aligning its surrounding application controls.
+
+## Admin changes
+
+- Rebuilt the admin shell with the same Phase 16 sidebar, topbar, page background, status treatment, mobile drawer, language controls, theme controls, and user card.
+- Migrated all 12 admin routes to the shared page-heading or hero pattern.
+- Standardized companies, company details, renters, administrators, billing, pricing, containers, audit logs, notifications, menu management, site configuration, and overview pages.
+- Converted operational create/save/preview actions from orange to homepage blue. Orange remains available for promotions, conversion previews, warnings, and focus.
+- Standardized dynamic form controls through the shared `.field` utility.
+
+## Shared component and CSS contract
+
+The main reusable classes are:
+
+- `.rdg-app-shell`
+- `.rdg-workspace`
+- `.rdg-sidebar`
+- `.rdg-nav-item`
+- `.rdg-topbar`
+- `.rdg-app-main`
+- `.rdg-app-content`
+- `.rdg-page-hero`
+- `.rdg-page-heading`
+- `.rdg-page-kicker`
+- `.panel`
+- `.card`
+- `.field`
+- `.btn-primary`
+- `.btn-secondary`
+- `.btn-conversion`
+
+## Behavior preserved
+
+- Existing routes and URL structure
+- Authentication and access guards
+- API calls and data mutations
+- English, French, and Arabic support
+- True RTL layout behavior through logical properties
+- Light, dark, and system theme behavior
+- Embedded authentication behavior through `embedded=1`
+- Print behavior for contracts
+
+## Validation completed
+
+- 596 TypeScript/TSX source files parsed with zero syntax failures.
+- 190 local and alias imports checked in admin/dashboard with zero unresolved paths.
+- 31 operational route pages checked for a Phase 16 page heading or hero.
+- CSS brace balance checked for the migrated stylesheets.
+- Shared shell, token, responsive, forced-color, auth-layout, and retired-brand assertions passed.
+- Final archive integrity is checked after packaging.
+
+## Build limitation
+
+A production Next.js build was not run because the supplied archive does not include the monorepo root, root lockfile, root workspace configuration, installed dependencies, or the referenced `@rentaldrivego/types` workspace. Each application invokes that absent workspace in its `prebuild` script. Claiming a clean production build under those conditions would be fiction with a progress bar.
diff --git a/PHASE16_OPERATIONAL_VALIDATION_REPORT.md b/PHASE16_OPERATIONAL_VALIDATION_REPORT.md
new file mode 100644
index 0000000..796e2ea
--- /dev/null
+++ b/PHASE16_OPERATIONAL_VALIDATION_REPORT.md
@@ -0,0 +1,40 @@
+# Phase 16 Operational UI Validation Report
+
+**Validated:** 2026-06-25  
+**Result:** Static migration gates passed
+
+## Passed checks
+
+| Check | Result |
+|---|---:|
+| Frontend/API source TypeScript and TSX parsed | 596 files, 0 syntax failures |
+| Admin/dashboard local and `@/` imports resolved | 190 imports, 0 unresolved |
+| Dashboard operational routes using Phase 16 heading/hero | 19 of 19 |
+| Admin operational routes using Phase 16 heading/hero | 12 of 12 |
+| Dashboard/admin token files present | Passed |
+| Shared sidebar, topbar, shell, panel, field, and action contracts present | Passed |
+| CSS brace balance | Passed |
+| Light/dark and Arabic RTL token mappings present | Passed |
+| Reduced-motion and forced-colors rules present | Passed |
+| Shared sign-in/create-account public layout retained | Passed |
+| Shared storefront navbar/footer components retained | Passed |
+| Retired `RentalDriveGo` brand in dashboard/admin source | 0 matches |
+| Complete app directories retained | `homepage`, `storefront`, `dashboard`, `admin`, `api` |
+
+## Reproducible design gate
+
+Run this from the extracted repository root:
+
+```bash
+node scripts/validate-phase16-design.mjs
+```
+
+Expected output:
+
+```text
+Phase 16 dashboard/admin design checks passed.
+```
+
+## Not claimed
+
+A production build, type-check against installed dependencies, integration test run, and browser visual regression run are not claimed. The supplied archive lacks the root workspace, root lockfile, `@rentaldrivego/types` package, and installed dependencies required by every application `prebuild` script.
diff --git a/admin/next-env.d.ts b/admin/next-env.d.ts
new file mode 100644
index 0000000..c4b7818
--- /dev/null
+++ b/admin/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/admin/next.config.js b/admin/next.config.js
new file mode 100644
index 0000000..eef4f4a
--- /dev/null
+++ b/admin/next.config.js
@@ -0,0 +1,55 @@
+/** @type {import('next').NextConfig} */
+
+const { buildSecurityHeaders, normalizeAssetPrefix } = require('../../config/nextSecurityHeaders')
+const apiOrigin = (process.env.API_INTERNAL_URL ?? process.env.API_URL ?? 'http://localhost:4000').replace(/\/api\/v1\/?$/, '')
+const apiUrl = new URL(apiOrigin)
+const ADMIN_BASE_PATH = '/admin'
+
+// In Docker dev the admin app runs on port 3002 while the marketplace proxy
+// serves it from port 3000. When ADMIN_ASSET_PREFIX is set, Next emits
+// absolute chunk URLs so /admin pages load their JS/CSS and HMR directly from
+// port 3002, bypassing the proxy (which can't upgrade WebSocket connections).
+const assetPrefix = normalizeAssetPrefix(process.env.ADMIN_ASSET_PREFIX, ADMIN_BASE_PATH)
+const securityHeaders = buildSecurityHeaders({ assetSources: [assetPrefix] })
+
+const nextConfig = {
+  basePath: ADMIN_BASE_PATH,
+  ...(assetPrefix ? { assetPrefix } : {}),
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+      {
+        protocol: apiUrl.protocol.replace(':', ''),
+        hostname: apiUrl.hostname,
+        ...(apiUrl.port ? { port: apiUrl.port } : {}),
+        pathname: '/storage/**',
+      },
+    ],
+  },
+  transpilePackages: ['@rentaldrivego/types'],
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ]
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${apiOrigin}/api/:path*`,
+      },
+      {
+        source: '/storage/:path*',
+        destination: `${apiOrigin}/storage/:path*`,
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig
diff --git a/admin/package.json b/admin/package.json
new file mode 100644
index 0000000..3707ed9
--- /dev/null
+++ b/admin/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@rentaldrivego/admin",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "next dev -H 0.0.0.0 -p 3002",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "next build",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "next start -H 0.0.0.0 -p 3002",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@rentaldrivego/types": "*",
+    "autoprefixer": "^10.4.19",
+    "dayjs": "^1.11.11",
+    "lucide-react": "^0.376.0",
+    "next": "^16.2.7",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.7",
+    "tailwindcss": "^3.4.3",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/apps/homepage/postcss.config.js b/admin/postcss.config.js
similarity index 100%
rename from apps/homepage/postcss.config.js
rename to admin/postcss.config.js
diff --git a/admin/src/app/auth-redirect/page.tsx b/admin/src/app/auth-redirect/page.tsx
new file mode 100644
index 0000000..b929b2c
--- /dev/null
+++ b/admin/src/app/auth-redirect/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useEffect } from 'react'
+
+function resolveAdminNextPath(next: string | null) {
+  const fallback = '/admin/dashboard'
+  if (!next) return fallback
+
+  if (/^https?:\/\//i.test(next)) return next
+  if (next.startsWith('/admin/')) return next
+  if (next === '/admin') return '/admin/dashboard'
+  if (next.startsWith('/')) return `/admin${next}`
+
+  return `/admin/${next.replace(/^\/+/, '')}`
+}
+
+export default function AuthRedirectPage() {
+  useEffect(() => {
+    const hash = window.location.hash
+    const params = new URLSearchParams(hash.replace(/^#/, ''))
+    const next = resolveAdminNextPath(params.get('next'))
+
+    // Clear legacy token fragments from the URL. Admin auth now uses an HttpOnly cookie.
+    window.history.replaceState(null, '', window.location.pathname)
+
+    window.location.replace(next)
+  }, [])
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-950">
+      <p className="text-sm text-zinc-400">Redirecting to admin dashboard…</p>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/AdminSessionContext.test.ts b/admin/src/app/dashboard/AdminSessionContext.test.ts
new file mode 100644
index 0000000..6de0e93
--- /dev/null
+++ b/admin/src/app/dashboard/AdminSessionContext.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { canAccessAdminMetrics } from './AdminSessionContext'
+
+describe('canAccessAdminMetrics', () => {
+  it('allows finance and higher roles after admin 2FA enrollment', () => {
+    expect(canAccessAdminMetrics({ role: 'FINANCE', totpEnabled: true })).toBe(true)
+    expect(canAccessAdminMetrics({ role: 'SUPPORT', totpEnabled: true })).toBe(true)
+    expect(canAccessAdminMetrics({ role: 'ADMIN', totpEnabled: true })).toBe(true)
+    expect(canAccessAdminMetrics({ role: 'SUPER_ADMIN', totpEnabled: true })).toBe(true)
+  })
+
+  it('denies viewer role and admins who still need 2FA enrollment', () => {
+    expect(canAccessAdminMetrics({ role: 'VIEWER', totpEnabled: true })).toBe(false)
+    expect(canAccessAdminMetrics({ role: 'ADMIN', totpEnabled: false })).toBe(false)
+    expect(canAccessAdminMetrics(null)).toBe(false)
+  })
+})
diff --git a/admin/src/app/dashboard/AdminSessionContext.tsx b/admin/src/app/dashboard/AdminSessionContext.tsx
new file mode 100644
index 0000000..31c199b
--- /dev/null
+++ b/admin/src/app/dashboard/AdminSessionContext.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+export type AdminRole = 'SUPER_ADMIN' | 'ADMIN' | 'SUPPORT' | 'FINANCE' | 'VIEWER'
+
+export type AdminSessionUser = {
+  id: string
+  email: string
+  role: AdminRole
+  totpEnabled?: boolean
+}
+
+const METRICS_ALLOWED_ROLES = new Set<AdminRole>(['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE'])
+
+const AdminSessionContext = createContext<AdminSessionUser | null>(null)
+
+export function AdminSessionProvider({
+  admin,
+  children,
+}: {
+  admin: AdminSessionUser
+  children: React.ReactNode
+}) {
+  return <AdminSessionContext.Provider value={admin}>{children}</AdminSessionContext.Provider>
+}
+
+export function useAdminSession() {
+  return useContext(AdminSessionContext)
+}
+
+export function canAccessAdminMetrics(admin: Pick<AdminSessionUser, 'role' | 'totpEnabled'> | null | undefined) {
+  return Boolean(admin && admin.totpEnabled && METRICS_ALLOWED_ROLES.has(admin.role))
+}
diff --git a/admin/src/app/dashboard/admin-users/page.tsx b/admin/src/app/dashboard/admin-users/page.tsx
new file mode 100644
index 0000000..0044129
--- /dev/null
+++ b/admin/src/app/dashboard/admin-users/page.tsx
@@ -0,0 +1,277 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface AdminUser {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  role: string
+  isActive: boolean
+  createdAt: string
+  permissions?: { id: string; resource: string; actions: string[] }[]
+}
+
+const ROLES = ['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE', 'VIEWER']
+const EMPTY_FORM = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+  role: 'SUPPORT',
+  isActive: true,
+}
+
+export default function AdminUsersPage() {
+  const [admins, setAdmins] = useState<AdminUser[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showModal, setShowModal] = useState(false)
+  const [editingAdminId, setEditingAdminId] = useState<string | null>(null)
+  const [form, setForm] = useState(EMPTY_FORM)
+  const [saving, setSaving] = useState(false)
+
+  async function fetchAdmins() {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/admins`, {
+        cache: 'no-store',
+        credentials: 'include',
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Failed')
+      setAdmins(json.data ?? [])
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchAdmins() }, [])
+
+  function openCreateModal() {
+    setEditingAdminId(null)
+    setForm(EMPTY_FORM)
+    setError(null)
+    setShowModal(true)
+  }
+
+  function openEditModal(admin: AdminUser) {
+    setEditingAdminId(admin.id)
+    setForm({
+      firstName: admin.firstName,
+      lastName: admin.lastName,
+      email: admin.email,
+      password: '',
+      role: admin.role,
+      isActive: admin.isActive,
+    })
+    setError(null)
+    setShowModal(true)
+  }
+
+  function closeModal() {
+    setShowModal(false)
+    setEditingAdminId(null)
+    setForm(EMPTY_FORM)
+  }
+
+  async function saveAdmin(e: React.FormEvent) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      const isEditing = Boolean(editingAdminId)
+      const payload = {
+        firstName: form.firstName,
+        lastName: form.lastName,
+        email: form.email,
+        role: form.role,
+        isActive: form.isActive,
+        ...(form.password ? { password: form.password } : {}),
+      }
+
+      const res = await fetch(`${ADMIN_API_BASE}/admin/admins${editingAdminId ? `/${editingAdminId}` : ''}`, {
+        method: isEditing ? 'PATCH' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(payload),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? `Failed to ${isEditing ? 'update' : 'create'} admin`)
+      closeModal()
+      await fetchAdmins()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const ROLE_COLORS: Record<string, string> = {
+    SUPER_ADMIN: 'text-emerald-400 bg-emerald-950/40',
+    ADMIN: 'text-sky-400 bg-sky-950/40',
+    SUPPORT: 'text-orange-400 bg-orange-950/40',
+    FINANCE: 'text-violet-400 bg-violet-950/40',
+    VIEWER: 'text-zinc-400 bg-zinc-800',
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div>
+          <p className="rdg-page-kicker">Platform</p>
+          <h1 className="mt-1 text-3xl font-black">Admin Users</h1>
+        </div>
+        <button
+          onClick={openCreateModal}
+          className="px-4 py-2 rounded-xl bg-emerald-700 hover:bg-blue-700 text-white text-sm font-semibold transition-colors"
+        >
+          + New admin
+        </button>
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+                <tr className="border-b border-zinc-800">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Name</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Email</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Role</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Permissions</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Status</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Joined</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={7} className="px-6 py-12 text-center text-zinc-500">Loading…</td></tr>
+              ) : admins.length === 0 ? (
+                <tr><td colSpan={7} className="px-6 py-12 text-center text-zinc-500">No admin users found</td></tr>
+              ) : admins.map((a) => (
+                <tr key={a.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="px-6 py-4 font-medium text-zinc-100">{a.firstName} {a.lastName}</td>
+                  <td className="px-6 py-4 text-zinc-400">{a.email}</td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${ROLE_COLORS[a.role] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {a.role}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-xs text-zinc-500">
+                    {a.permissions && a.permissions.length > 0
+                      ? a.permissions.map((permission) => permission.resource).join(', ')
+                      : 'Role-based only'}
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${a.isActive ? 'text-emerald-400 bg-emerald-950/40' : 'text-zinc-500 bg-zinc-800'}`}>
+                      {a.isActive ? 'Active' : 'Inactive'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-zinc-500 text-xs">{new Date(a.createdAt).toLocaleDateString()}</td>
+                  <td className="px-6 py-4">
+                    <button
+                      type="button"
+                      onClick={() => openEditModal(a)}
+                      className="rounded-lg border border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-500 hover:text-white"
+                    >
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/60 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-semibold">{editingAdminId ? 'Edit admin user' : 'New admin user'}</h2>
+              <button onClick={closeModal} className="text-zinc-500 hover:text-zinc-200">✕</button>
+            </div>
+            <form onSubmit={saveAdmin} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-zinc-400 mb-1">First name</label>
+                  <input
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    value={form.firstName}
+                    onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-zinc-400 mb-1">Last name</label>
+                  <input
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    value={form.lastName}
+                    onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">Email</label>
+                <input
+                  type="email"
+                  required
+                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                  value={form.email}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">
+                  Password {editingAdminId ? <span className="text-zinc-500">(leave blank to keep current)</span> : null}
+                </label>
+                <input
+                  type="password"
+                  required={!editingAdminId}
+                  minLength={editingAdminId ? undefined : 8}
+                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                  value={form.password}
+                  onChange={(e) => setForm({ ...form, password: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">Role</label>
+                <select
+                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                  value={form.role}
+                  onChange={(e) => setForm({ ...form, role: e.target.value })}
+                >
+                  {ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1">Status</label>
+                <select
+                  className="w-full px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
+                  value={form.isActive ? 'active' : 'inactive'}
+                  onChange={(e) => setForm({ ...form, isActive: e.target.value === 'active' })}
+                >
+                  <option value="active">Active</option>
+                  <option value="inactive">Inactive</option>
+                </select>
+              </div>
+              <div className="flex gap-3 pt-2">
+                <button type="button" onClick={closeModal} className="flex-1 py-2.5 rounded-xl bg-zinc-800 text-zinc-300 text-sm font-medium">Cancel</button>
+                <button type="submit" disabled={saving} className="flex-1 py-2.5 rounded-xl bg-emerald-700 hover:bg-blue-700 text-white text-sm font-semibold disabled:opacity-50">
+                  {saving ? (editingAdminId ? 'Saving…' : 'Creating…') : (editingAdminId ? 'Save changes' : 'Create admin')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/audit-logs/page.tsx b/admin/src/app/dashboard/audit-logs/page.tsx
new file mode 100644
index 0000000..ba8ca6d
--- /dev/null
+++ b/admin/src/app/dashboard/audit-logs/page.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface AuditLog {
+  id: string
+  action: string
+  resource: string
+  resourceId: string | null
+  createdAt: string
+  adminUser: { email: string; firstName: string; lastName: string } | null
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  CREATE: 'text-emerald-400 bg-emerald-950/40',
+  UPDATE: 'text-sky-400 bg-sky-950/40',
+  DELETE: 'text-red-400 bg-red-950/40',
+  SUSPEND: 'text-orange-400 bg-orange-950/40',
+  ACTIVATE: 'text-emerald-400 bg-emerald-950/40',
+  LOGIN: 'text-zinc-400 bg-zinc-800',
+}
+
+export default function AdminAuditLogsPage() {
+  const [logs, setLogs] = useState<AuditLog[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [filter, setFilter] = useState('')
+
+  useEffect(() => {
+    fetch(`${ADMIN_API_BASE}/admin/audit-logs`, {
+      credentials: 'include',
+      cache: 'no-store',
+    })
+      .then((r) => r.json())
+      .then((json) => setLogs(Array.isArray(json.data) ? json.data : (json.data?.data ?? [])))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filtered = filter
+    ? logs.filter((l) => l.action.toLowerCase().includes(filter.toLowerCase()) || l.resource.toLowerCase().includes(filter.toLowerCase()))
+    : logs
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div>
+          <p className="rdg-page-kicker">Platform</p>
+          <h1 className="mt-1 text-3xl font-black">Audit Logs</h1>
+        </div>
+        <input
+          className="w-64 px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          placeholder="Filter by action or entity…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Action</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Entity</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Entity ID</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Admin</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">Time</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={5} className="px-6 py-12 text-center text-zinc-500">Loading…</td></tr>
+              ) : filtered.length === 0 ? (
+                <tr><td colSpan={5} className="px-6 py-12 text-center text-zinc-500">No logs found</td></tr>
+              ) : filtered.map((log) => (
+                <tr key={log.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="px-6 py-3">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${ACTION_COLORS[log.action] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {log.action}
+                    </span>
+                  </td>
+                  <td className="px-6 py-3 text-zinc-300">{log.resource}</td>
+                  <td className="px-6 py-3 text-zinc-500 font-mono text-xs">{log.resourceId ? `${log.resourceId.slice(0, 12)}…` : '—'}</td>
+                  <td className="px-6 py-3 text-zinc-400">{log.adminUser ? `${log.adminUser.firstName} ${log.adminUser.lastName}` : '—'}</td>
+                  <td className="px-6 py-3 text-zinc-500 text-xs">{new Date(log.createdAt).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/billing/page.tsx b/admin/src/app/dashboard/billing/page.tsx
new file mode 100644
index 0000000..511d61f
--- /dev/null
+++ b/admin/src/app/dashboard/billing/page.tsx
@@ -0,0 +1,1149 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useState, useTransition } from 'react'
+import { useAdminI18n } from '@/components/I18nProvider'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface BillingStats {
+  billingAccountCount: number
+  openInvoiceCount: number
+  pastDueInvoiceCount: number
+  paidInvoiceCount: number
+  accountsReceivableTotal: number
+  recognizedRevenueTotal: number
+}
+
+interface SubscriptionSummary {
+  id: string
+  plan: string
+  billingPeriod: string
+  status: string
+  currentPeriodEnd: string | null
+  cancelAtPeriodEnd: boolean
+}
+
+interface CompanySummary {
+  id: string
+  name: string
+  email: string
+  slug: string
+  status: string
+  subscription: SubscriptionSummary | null
+}
+
+interface CreditBalance {
+  id: string
+  currency: string
+  balanceAmount: number
+}
+
+interface InvoiceLineItem {
+  id?: string
+  type?: string
+  description: string
+  quantity: number
+  unitAmount: number
+  amount: number
+  currency: string
+  periodStart?: string | null
+  periodEnd?: string | null
+}
+
+interface PaymentAttempt {
+  id: string
+  status: string
+  amount: number
+  currency: string
+  providerPaymentId?: string | null
+  failureCode?: string | null
+  failureMessage?: string | null
+  attemptedAt: string
+}
+
+interface CreditNote {
+  id: string
+  amount: number
+  currency: string
+  reason: string
+  status: string
+  createdAt: string
+}
+
+interface Refund {
+  id: string
+  amount: number
+  currency: string
+  reason: string
+  status: string
+  createdAt: string
+}
+
+interface TaxRecord {
+  id: string
+  taxAmount: number
+  taxRate?: number | null
+  taxExempt: boolean
+  taxType?: string | null
+}
+
+interface BillingEvent {
+  id: string
+  eventType: string
+  source: string
+  createdAt: string
+}
+
+interface BillingInvoice {
+  id: string
+  invoiceNumber: string | null
+  invoiceType: string
+  status: string
+  currency: string
+  totalAmount: number
+  amountPaid: number
+  amountDue: number
+  invoiceDate: string | null
+  dueAt: string | null
+  paidAt: string | null
+  createdAt: string
+  isSubscriptionBlocking: boolean
+  lineItems: InvoiceLineItem[]
+  paymentAttempts: PaymentAttempt[]
+  creditNotes: CreditNote[]
+  refunds: Refund[]
+  taxRecords: TaxRecord[]
+}
+
+interface BillingAccountSummary {
+  id: string
+  companyId: string
+  legalName: string
+  billingEmail: string
+  invoiceTerms: string
+  netTermsDays: number
+  taxId?: string | null
+  taxExempt: boolean
+  dunningPaused: boolean
+  createdAt: string
+  company: CompanySummary
+  invoices: BillingInvoice[]
+  creditBalances: CreditBalance[]
+  openBalance: number
+  paidBalance: number
+  creditBalance: number
+}
+
+interface BillingAccountDetail extends BillingAccountSummary {
+  billingAddress?: Record<string, unknown> | null
+  paymentMethods: Array<{
+    id: string
+    type: string
+    label?: string | null
+    brand?: string | null
+    last4?: string | null
+    isDefault: boolean
+    isActive: boolean
+  }>
+  creditLedgerEntries: Array<{
+    id: string
+    type: string
+    amount: number
+    currency: string
+    reason: string
+    createdAt: string
+  }>
+  events: BillingEvent[]
+}
+
+interface PaginatedResponse<T> {
+  data: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+  stats?: BillingStats
+}
+
+interface DraftLineItem {
+  type: string
+  description: string
+  quantity: number
+  unitAmount: number
+}
+
+const ACCOUNT_STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'text-emerald-300 bg-emerald-500/15',
+  TRIALING: 'text-sky-300 bg-sky-500/15',
+  PAYMENT_PENDING: 'text-amber-300 bg-amber-500/15',
+  PAST_DUE: 'text-rose-300 bg-rose-500/15',
+  SUSPENDED: 'text-red-300 bg-red-500/15',
+  CANCELLED: 'text-zinc-300 bg-zinc-700/60',
+  UNPAID: 'text-red-300 bg-red-500/15',
+}
+
+const INVOICE_STATUS_COLORS: Record<string, string> = {
+  DRAFT: 'text-zinc-300 bg-zinc-700/60',
+  OPEN: 'text-amber-300 bg-amber-500/15',
+  PAYMENT_PENDING: 'text-amber-300 bg-amber-500/15',
+  PARTIALLY_PAID: 'text-sky-300 bg-sky-500/15',
+  PAID: 'text-emerald-300 bg-emerald-500/15',
+  PAST_DUE: 'text-rose-300 bg-rose-500/15',
+  VOID: 'text-zinc-300 bg-zinc-700/60',
+  UNCOLLECTIBLE: 'text-red-200 bg-red-950/60',
+  REFUNDED: 'text-zinc-300 bg-zinc-700/60',
+  PARTIALLY_REFUNDED: 'text-zinc-300 bg-zinc-700/60',
+}
+
+const FIELD_CLASS =
+  'w-full rounded-xl border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 outline-none transition focus:border-blue-700'
+
+const ACTION_PRIMARY_CLASS =
+  'rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-black hover:bg-emerald-400'
+
+const ACTION_SECONDARY_CLASS =
+  'rounded-xl border border-zinc-700 px-4 py-2 text-sm font-semibold text-zinc-200 hover:border-zinc-500'
+
+const draftLineItem = (): DraftLineItem => ({
+  type: 'PROFESSIONAL_SERVICES',
+  description: '',
+  quantity: 1,
+  unitAmount: 0,
+})
+
+function money(amount: number, currency: string) {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(amount / 100)
+}
+
+function dateLabel(value: string | null | undefined) {
+  if (!value) return '—'
+  return new Date(value).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+function termsLabel(invoiceTerms: string, netTermsDays: number) {
+  if (invoiceTerms === 'DUE_ON_RECEIPT') return 'Due on receipt'
+  return `Net ${netTermsDays || invoiceTerms.replace('NET_', '')}`
+}
+
+export default function AdminBillingPage() {
+  const { language } = useAdminI18n()
+  const [isPending, startTransition] = useTransition()
+
+  const copy = {
+    en: {
+      title: 'Billing Console',
+      eyebrow: 'Platform Finance',
+      searchPlaceholder: 'Search company, billing contact, or slug',
+      all: 'All',
+      active: 'Active',
+      pastDue: 'Past Due',
+      suspended: 'Suspended',
+      cancelled: 'Cancelled',
+      accounts: 'Accounts',
+      receivables: 'Receivables',
+      openInvoices: 'Open invoices',
+      paidInvoices: 'Paid invoices',
+      revenue: 'Revenue',
+      billingAccounts: 'Billing Accounts',
+      selectAccount: 'Select a billing account to manage invoices, credits, dunning, and payment history.',
+      company: 'Company',
+      plan: 'Plan',
+      subscription: 'Subscription',
+      openBalance: 'Open balance',
+      credit: 'Credit',
+      dunning: 'Dunning',
+      accountDetails: 'Billing Account',
+      invoiceFeed: 'Invoices',
+      draftInvoice: 'Create Draft Invoice',
+      saveAccount: 'Save account',
+      pauseDunning: 'Pause dunning',
+      resumeDunning: 'Resume dunning',
+      createDraft: 'Create draft',
+      loading: 'Loading…',
+      noAccounts: 'No billing accounts found',
+      amountDue: 'Amount due',
+      amountPaid: 'Amount paid',
+      dueDate: 'Due date',
+      issueDate: 'Issue date',
+      actions: 'Actions',
+      lineItems: 'Line items',
+      payments: 'Payment attempts',
+      credits: 'Credits',
+      refunds: 'Refunds',
+      timeline: 'Timeline',
+      finalize: 'Finalize',
+      pay: 'Record payment',
+      retry: 'Retry payment',
+      void: 'Void',
+      writeoff: 'Write off',
+      refund: 'Refund',
+      creditNote: 'Credit note',
+      downloadPdf: 'PDF',
+      invoiceType: 'Invoice type',
+      blocking: 'Blocking invoice',
+      reason: 'Reason',
+      billingEmail: 'Billing email',
+      legalName: 'Legal name',
+      taxId: 'Tax ID',
+      taxExempt: 'Tax exempt',
+      invoiceTerms: 'Invoice terms',
+      selectedInvoice: 'Selected invoice',
+      noInvoices: 'No invoices yet',
+    },
+    fr: {
+      title: 'Console de facturation',
+      eyebrow: 'Finance plateforme',
+      searchPlaceholder: 'Rechercher une entreprise, un contact facturation ou un slug',
+      all: 'Tous',
+      active: 'Actifs',
+      pastDue: 'En retard',
+      suspended: 'Suspendus',
+      cancelled: 'Annulés',
+      accounts: 'Comptes',
+      receivables: 'Créances',
+      openInvoices: 'Factures ouvertes',
+      paidInvoices: 'Factures payées',
+      revenue: 'Revenu',
+      billingAccounts: 'Comptes de facturation',
+      selectAccount: 'Sélectionnez un compte de facturation pour gérer factures, crédits, relances et paiements.',
+      company: 'Entreprise',
+      plan: 'Plan',
+      subscription: 'Abonnement',
+      openBalance: 'Solde ouvert',
+      credit: 'Crédit',
+      dunning: 'Relance',
+      accountDetails: 'Compte de facturation',
+      invoiceFeed: 'Factures',
+      draftInvoice: 'Créer un brouillon',
+      saveAccount: 'Enregistrer',
+      pauseDunning: 'Mettre en pause',
+      resumeDunning: 'Reprendre',
+      createDraft: 'Créer le brouillon',
+      loading: 'Chargement…',
+      noAccounts: 'Aucun compte trouvé',
+      amountDue: 'Montant dû',
+      amountPaid: 'Montant payé',
+      dueDate: 'Échéance',
+      issueDate: 'Date émission',
+      actions: 'Actions',
+      lineItems: 'Lignes',
+      payments: 'Tentatives de paiement',
+      credits: 'Crédits',
+      refunds: 'Remboursements',
+      timeline: 'Historique',
+      finalize: 'Finaliser',
+      pay: 'Enregistrer paiement',
+      retry: 'Relancer paiement',
+      void: 'Annuler',
+      writeoff: 'Passer en perte',
+      refund: 'Rembourser',
+      creditNote: 'Avoir',
+      downloadPdf: 'PDF',
+      invoiceType: 'Type de facture',
+      blocking: 'Facture bloquante',
+      reason: 'Raison',
+      billingEmail: 'Email de facturation',
+      legalName: 'Raison sociale',
+      taxId: 'Identifiant fiscal',
+      taxExempt: 'Exonéré de taxe',
+      invoiceTerms: 'Conditions',
+      selectedInvoice: 'Facture sélectionnée',
+      noInvoices: 'Aucune facture',
+    },
+    ar: {
+      title: 'لوحة الفوترة',
+      eyebrow: 'مالية المنصة',
+      searchPlaceholder: 'ابحث عن الشركة أو جهة الفوترة أو الرابط',
+      all: 'الكل',
+      active: 'نشط',
+      pastDue: 'متأخر',
+      suspended: 'معلق',
+      cancelled: 'ملغى',
+      accounts: 'الحسابات',
+      receivables: 'الذمم',
+      openInvoices: 'الفواتير المفتوحة',
+      paidInvoices: 'الفواتير المدفوعة',
+      revenue: 'الإيراد',
+      billingAccounts: 'حسابات الفوترة',
+      selectAccount: 'اختر حساب فوترة لإدارة الفواتير والأرصدة ومحاولات الدفع.',
+      company: 'الشركة',
+      plan: 'الخطة',
+      subscription: 'الاشتراك',
+      openBalance: 'الرصيد المفتوح',
+      credit: 'الرصيد',
+      dunning: 'المتابعة',
+      accountDetails: 'حساب الفوترة',
+      invoiceFeed: 'الفواتير',
+      draftInvoice: 'إنشاء مسودة فاتورة',
+      saveAccount: 'حفظ',
+      pauseDunning: 'إيقاف المتابعة',
+      resumeDunning: 'استئناف المتابعة',
+      createDraft: 'إنشاء المسودة',
+      loading: 'جارٍ التحميل…',
+      noAccounts: 'لا توجد حسابات فوترة',
+      amountDue: 'المبلغ المستحق',
+      amountPaid: 'المبلغ المدفوع',
+      dueDate: 'تاريخ الاستحقاق',
+      issueDate: 'تاريخ الإصدار',
+      actions: 'الإجراءات',
+      lineItems: 'البنود',
+      payments: 'محاولات الدفع',
+      credits: 'الأرصدة',
+      refunds: 'الاستردادات',
+      timeline: 'السجل',
+      finalize: 'اعتماد',
+      pay: 'تسجيل الدفع',
+      retry: 'إعادة المحاولة',
+      void: 'إلغاء',
+      writeoff: 'شطب',
+      refund: 'استرداد',
+      creditNote: 'إشعار دائن',
+      downloadPdf: 'PDF',
+      invoiceType: 'نوع الفاتورة',
+      blocking: 'فاتورة حاجزة',
+      reason: 'السبب',
+      billingEmail: 'بريد الفوترة',
+      legalName: 'الاسم القانوني',
+      taxId: 'الرقم الضريبي',
+      taxExempt: 'معفى من الضريبة',
+      invoiceTerms: 'شروط الفاتورة',
+      selectedInvoice: 'الفاتورة المحددة',
+      noInvoices: 'لا توجد فواتير',
+    },
+  }[language]
+
+  const [accounts, setAccounts] = useState<BillingAccountSummary[]>([])
+  const [stats, setStats] = useState<BillingStats | null>(null)
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState('')
+  const [loadingList, setLoadingList] = useState(true)
+  const [listError, setListError] = useState<string | null>(null)
+
+  const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(null)
+  const [detail, setDetail] = useState<BillingAccountDetail | null>(null)
+  const [loadingDetail, setLoadingDetail] = useState(false)
+  const [detailError, setDetailError] = useState<string | null>(null)
+
+  const [accountForm, setAccountForm] = useState({
+    legalName: '',
+    billingEmail: '',
+    taxId: '',
+    taxExempt: false,
+    invoiceTerms: 'DUE_ON_RECEIPT',
+    netTermsDays: 0,
+  })
+  const [invoiceDraft, setInvoiceDraft] = useState({
+    invoiceType: 'MANUAL',
+    isSubscriptionBlocking: false,
+    adminReason: '',
+    lineItems: [draftLineItem()],
+  })
+  const [selectedInvoiceId, setSelectedInvoiceId] = useState<string | null>(null)
+  const [payAmount, setPayAmount] = useState('')
+  const [creditAmount, setCreditAmount] = useState('')
+  const [creditReason, setCreditReason] = useState('')
+  const [refundAmount, setRefundAmount] = useState('')
+  const [refundReason, setRefundReason] = useState('')
+  const [voidReason, setVoidReason] = useState('')
+  const [writeoffReason, setWriteoffReason] = useState('')
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [actionMessage, setActionMessage] = useState<string | null>(null)
+
+  const filters = [
+    { key: '', label: copy.all },
+    { key: 'ACTIVE', label: copy.active },
+    { key: 'PAST_DUE', label: copy.pastDue },
+    { key: 'SUSPENDED', label: copy.suspended },
+    { key: 'CANCELLED', label: copy.cancelled },
+  ]
+
+  const selectedInvoice = useMemo(
+    () => detail?.invoices.find((invoice) => invoice.id === selectedInvoiceId) ?? detail?.invoices[0] ?? null,
+    [detail, selectedInvoiceId],
+  )
+
+  async function api<T>(path: string, init?: RequestInit): Promise<T> {
+    const res = await fetch(`${ADMIN_API_BASE}${path}`, {
+      ...init,
+      headers: {
+        'Content-Type': 'application/json',
+        ...(init?.headers ?? {}),
+      },
+      credentials: 'include',
+      cache: 'no-store',
+    })
+    if (res.headers.get('content-type')?.includes('application/pdf')) {
+      return await (res.blob() as unknown as Promise<T>)
+    }
+    const json = await res.json()
+    if (!res.ok) throw new Error(json?.message ?? `Request failed (${res.status})`)
+    return json.data as T
+  }
+
+  async function fetchAccounts(q?: string, status?: string) {
+    setLoadingList(true)
+    setListError(null)
+    try {
+      const params = new URLSearchParams({ pageSize: '100' })
+      if (q) params.set('q', q)
+      if (status) params.set('status', status)
+      const data = await api<PaginatedResponse<BillingAccountSummary>>(`/admin/billing?${params.toString()}`)
+      setAccounts(data.data)
+      setStats(data.stats ?? null)
+      setSelectedCompanyId((current) => current ?? data.data[0]?.company.id ?? null)
+    } catch (error: any) {
+      setListError(error.message)
+    } finally {
+      setLoadingList(false)
+    }
+  }
+
+  async function fetchDetail(companyId: string) {
+    setLoadingDetail(true)
+    setDetailError(null)
+    try {
+      const data = await api<BillingAccountDetail>(`/admin/billing/${companyId}`)
+      setDetail(data)
+      setAccountForm({
+        legalName: data.legalName,
+        billingEmail: data.billingEmail,
+        taxId: data.taxId ?? '',
+        taxExempt: data.taxExempt,
+        invoiceTerms: data.invoiceTerms,
+        netTermsDays: data.netTermsDays,
+      })
+      setSelectedInvoiceId(data.invoices[0]?.id ?? null)
+    } catch (error: any) {
+      setDetailError(error.message)
+    } finally {
+      setLoadingDetail(false)
+    }
+  }
+
+  async function refreshSelectedAccount() {
+    await fetchAccounts(search || undefined, statusFilter || undefined)
+    if (selectedCompanyId) await fetchDetail(selectedCompanyId)
+  }
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      fetchAccounts(search || undefined, statusFilter || undefined)
+    }, 200)
+    return () => clearTimeout(id)
+  }, [search, statusFilter])
+
+  useEffect(() => {
+    if (!selectedCompanyId) return
+    fetchDetail(selectedCompanyId)
+  }, [selectedCompanyId])
+
+  function setDraftLine(index: number, key: keyof DraftLineItem, value: string | number) {
+    setInvoiceDraft((current) => ({
+      ...current,
+      lineItems: current.lineItems.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, [key]: value } : item,
+      ),
+    }))
+  }
+
+  async function saveBillingAccount() {
+    if (!detail) return
+    setActionError(null)
+    setActionMessage(null)
+    try {
+      await api(`/admin/billing/accounts/${detail.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          legalName: accountForm.legalName,
+          billingEmail: accountForm.billingEmail,
+          taxId: accountForm.taxId || null,
+          taxExempt: accountForm.taxExempt,
+          invoiceTerms: accountForm.invoiceTerms,
+          netTermsDays: accountForm.netTermsDays,
+        }),
+      })
+      setActionMessage('Billing account updated.')
+      await refreshSelectedAccount()
+    } catch (error: any) {
+      setActionError(error.message)
+    }
+  }
+
+  async function toggleDunning(paused: boolean) {
+    if (!detail) return
+    setActionError(null)
+    setActionMessage(null)
+    try {
+      await api(`/admin/billing/accounts/${detail.id}/${paused ? 'pause-dunning' : 'resume-dunning'}`, {
+        method: 'POST',
+        body: JSON.stringify({}),
+      })
+      setActionMessage(paused ? 'Dunning paused.' : 'Dunning resumed.')
+      await refreshSelectedAccount()
+    } catch (error: any) {
+      setActionError(error.message)
+    }
+  }
+
+  async function createDraftInvoice() {
+    if (!detail) return
+    setActionError(null)
+    setActionMessage(null)
+    try {
+      await api(`/admin/billing/accounts/${detail.id}/invoices`, {
+        method: 'POST',
+        body: JSON.stringify({
+          invoiceType: invoiceDraft.invoiceType,
+          isSubscriptionBlocking: invoiceDraft.isSubscriptionBlocking,
+          adminReason: invoiceDraft.adminReason || null,
+          lineItems: invoiceDraft.lineItems.map((item) => ({
+            ...item,
+            unitAmount: Number(item.unitAmount),
+            quantity: Number(item.quantity),
+          })),
+        }),
+      })
+      setInvoiceDraft({
+        invoiceType: 'MANUAL',
+        isSubscriptionBlocking: false,
+        adminReason: '',
+        lineItems: [draftLineItem()],
+      })
+      setActionMessage('Draft invoice created.')
+      await refreshSelectedAccount()
+    } catch (error: any) {
+      setActionError(error.message)
+    }
+  }
+
+  async function runInvoiceAction(path: string, body?: Record<string, unknown>) {
+    if (!selectedInvoice) return
+    setActionError(null)
+    setActionMessage(null)
+    try {
+      await api(`/admin/billing/invoices/${selectedInvoice.id}/${path}`, {
+        method: 'POST',
+        body: JSON.stringify(body ?? {}),
+      })
+      setActionMessage('Invoice action completed.')
+      await refreshSelectedAccount()
+    } catch (error: any) {
+      setActionError(error.message)
+    }
+  }
+
+  async function downloadPdf() {
+    if (!selectedInvoice) return
+    setActionError(null)
+    try {
+      const blob = await api<Blob>(`/admin/billing/invoices/${selectedInvoice.id}/pdf`)
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${selectedInvoice.invoiceNumber ?? selectedInvoice.id}.pdf`
+      a.click()
+      URL.revokeObjectURL(url)
+    } catch (error: any) {
+      setActionError(error.message)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p className="rdg-page-kicker">{copy.eyebrow}</p>
+          <h1 className="mt-2 text-3xl font-black text-zinc-50">{copy.title}</h1>
+        </div>
+        <div className="w-full max-w-md">
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={copy.searchPlaceholder}
+            className="w-full rounded-2xl border border-zinc-800 bg-zinc-950 px-4 py-3 text-sm text-zinc-100 outline-none transition focus:border-blue-700"
+          />
+        </div>
+      </div>
+
+      {stats && (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
+          <StatCard label={copy.accounts} value={String(stats.billingAccountCount)} tone="text-zinc-50" />
+          <StatCard label={copy.receivables} value={money(stats.accountsReceivableTotal, 'MAD')} tone="text-amber-300" />
+          <StatCard label={copy.openInvoices} value={String(stats.openInvoiceCount)} tone="text-amber-300" />
+          <StatCard label={copy.paidInvoices} value={String(stats.paidInvoiceCount)} tone="text-emerald-300" />
+          <StatCard label={copy.revenue} value={money(stats.recognizedRevenueTotal, 'MAD')} tone="text-sky-300" />
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-2">
+        {filters.map((filter) => (
+          <button
+            key={filter.key}
+            onClick={() => startTransition(() => setStatusFilter(filter.key))}
+            className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+              statusFilter === filter.key
+                ? 'bg-emerald-500 text-black'
+                : 'bg-zinc-900 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'
+            }`}
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[1.15fr,1.85fr]">
+        <section className="panel overflow-hidden">
+          <div className="border-b border-zinc-800 px-5 py-4">
+            <h2 className="text-sm font-semibold text-zinc-100">{copy.billingAccounts}</h2>
+          </div>
+          <div className="max-h-[76vh] overflow-y-auto">
+            {loadingList ? (
+              <div className="px-5 py-10 text-sm text-zinc-500">{copy.loading}</div>
+            ) : listError ? (
+              <div className="px-5 py-10 text-sm text-red-400">{listError}</div>
+            ) : accounts.length === 0 ? (
+              <div className="px-5 py-10 text-sm text-zinc-500">{copy.noAccounts}</div>
+            ) : (
+              <div className="divide-y divide-zinc-800">
+                {accounts.map((account) => {
+                  const isSelected = selectedCompanyId === account.company.id
+                  const subscription = account.company.subscription
+                  return (
+                    <button
+                      key={account.id}
+                      onClick={() => setSelectedCompanyId(account.company.id)}
+                      className={`w-full px-5 py-4 text-left transition ${isSelected ? 'bg-emerald-500/8' : 'hover:bg-zinc-900/80'}`}
+                    >
+                      <div className="flex items-start justify-between gap-4">
+                        <div>
+                          <p className="font-semibold text-zinc-100">{account.company.name}</p>
+                          <p className="mt-1 text-xs text-zinc-500">{account.billingEmail}</p>
+                        </div>
+                        <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${ACCOUNT_STATUS_COLORS[subscription?.status ?? 'CANCELLED'] ?? 'text-zinc-300 bg-zinc-700/60'}`}>
+                          {subscription?.status ?? 'NO_SUBSCRIPTION'}
+                        </span>
+                      </div>
+                      <div className="mt-4 grid grid-cols-3 gap-3 text-xs">
+                        <Metric label={copy.plan} value={subscription?.plan ?? '—'} />
+                        <Metric label={copy.openBalance} value={money(account.openBalance, account.creditBalances[0]?.currency ?? 'MAD')} />
+                        <Metric label={copy.credit} value={money(account.creditBalance, account.creditBalances[0]?.currency ?? 'MAD')} />
+                      </div>
+                      <div className="mt-3 flex items-center justify-between text-[11px] text-zinc-500">
+                        <span>{termsLabel(account.invoiceTerms, account.netTermsDays)}</span>
+                        <span>{account.dunningPaused ? `${copy.dunning}: paused` : `${copy.dunning}: live`}</span>
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </section>
+
+        <section className="space-y-6">
+          {!selectedCompanyId ? (
+            <div className="panel px-6 py-10 text-sm text-zinc-500">{copy.selectAccount}</div>
+          ) : loadingDetail && !detail ? (
+            <div className="panel px-6 py-10 text-sm text-zinc-500">{copy.loading}</div>
+          ) : detailError ? (
+            <div className="panel px-6 py-10 text-sm text-red-400">{detailError}</div>
+          ) : detail ? (
+            <>
+              <section className="panel p-5">
+                <div className="flex flex-col gap-4 border-b border-zinc-800 pb-5 lg:flex-row lg:items-start lg:justify-between">
+                  <div>
+                    <p className="text-xs uppercase tracking-[0.2em] text-zinc-500">{copy.accountDetails}</p>
+                    <h2 className="mt-2 text-2xl font-bold text-zinc-50">{detail.company.name}</h2>
+                    <div className="mt-3 flex flex-wrap gap-2 text-xs">
+                      <span className={`rounded-full px-2 py-1 font-semibold ${ACCOUNT_STATUS_COLORS[detail.company.subscription?.status ?? 'CANCELLED'] ?? 'text-zinc-300 bg-zinc-700/60'}`}>
+                        {detail.company.subscription?.status ?? 'NO_SUBSCRIPTION'}
+                      </span>
+                      <span className="rounded-full bg-zinc-900 px-2 py-1 text-zinc-300">
+                        {detail.company.subscription?.plan ?? 'No plan'} / {detail.company.subscription?.billingPeriod ?? '—'}
+                      </span>
+                      <span className="rounded-full bg-zinc-900 px-2 py-1 text-zinc-300">
+                        {termsLabel(detail.invoiceTerms, detail.netTermsDays)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3 text-right text-sm sm:grid-cols-4">
+                    <Metric label={copy.openBalance} value={money(detail.openBalance, detail.creditBalances[0]?.currency ?? 'MAD')} />
+                    <Metric label={copy.credit} value={money(detail.creditBalance, detail.creditBalances[0]?.currency ?? 'MAD')} />
+                    <Metric label={copy.amountPaid} value={money(detail.paidBalance, detail.creditBalances[0]?.currency ?? 'MAD')} />
+                    <Metric label={copy.dunning} value={detail.dunningPaused ? 'Paused' : 'Live'} />
+                  </div>
+                </div>
+
+                <div className="mt-5 grid gap-4 lg:grid-cols-2">
+                  <Field label={copy.legalName}>
+                    <input
+                      value={accountForm.legalName}
+                      onChange={(event) => setAccountForm((current) => ({ ...current, legalName: event.target.value }))}
+                      className={FIELD_CLASS}
+                    />
+                  </Field>
+                  <Field label={copy.billingEmail}>
+                    <input
+                      value={accountForm.billingEmail}
+                      onChange={(event) => setAccountForm((current) => ({ ...current, billingEmail: event.target.value }))}
+                      className={FIELD_CLASS}
+                    />
+                  </Field>
+                  <Field label={copy.taxId}>
+                    <input
+                      value={accountForm.taxId}
+                      onChange={(event) => setAccountForm((current) => ({ ...current, taxId: event.target.value }))}
+                      className={FIELD_CLASS}
+                    />
+                  </Field>
+                  <Field label={copy.invoiceTerms}>
+                    <select
+                      value={accountForm.invoiceTerms}
+                      onChange={(event) => setAccountForm((current) => ({
+                        ...current,
+                        invoiceTerms: event.target.value,
+                        netTermsDays: event.target.value === 'DUE_ON_RECEIPT' ? 0 : current.netTermsDays || Number(event.target.value.replace('NET_', '')),
+                      }))}
+                      className={FIELD_CLASS}
+                    >
+                      <option value="DUE_ON_RECEIPT">Due on receipt</option>
+                      <option value="NET_7">Net 7</option>
+                      <option value="NET_15">Net 15</option>
+                      <option value="NET_30">Net 30</option>
+                      <option value="NET_45">Net 45</option>
+                      <option value="NET_60">Net 60</option>
+                    </select>
+                  </Field>
+                </div>
+
+                <div className="mt-4 flex flex-wrap items-center gap-3">
+                  <label className="flex items-center gap-2 text-sm text-zinc-300">
+                    <input
+                      type="checkbox"
+                      checked={accountForm.taxExempt}
+                      onChange={(event) => setAccountForm((current) => ({ ...current, taxExempt: event.target.checked }))}
+                      className="rounded border-zinc-700 bg-zinc-950 text-emerald-500"
+                    />
+                    {copy.taxExempt}
+                  </label>
+                  <button onClick={saveBillingAccount} className="rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-black hover:bg-emerald-400">
+                    {copy.saveAccount}
+                  </button>
+                  <button
+                    onClick={() => toggleDunning(!detail.dunningPaused)}
+                    className="rounded-xl border border-zinc-700 px-4 py-2 text-sm font-semibold text-zinc-200 hover:border-zinc-500"
+                  >
+                    {detail.dunningPaused ? copy.resumeDunning : copy.pauseDunning}
+                  </button>
+                </div>
+              </section>
+
+              <section className="panel p-5">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-zinc-100">{copy.invoiceFeed}</h3>
+                  {isPending || loadingDetail ? <span className="text-xs text-zinc-500">{copy.loading}</span> : null}
+                </div>
+
+                {detail.invoices.length === 0 ? (
+                  <div className="mt-4 text-sm text-zinc-500">{copy.noInvoices}</div>
+                ) : (
+                  <div className="mt-4 grid gap-4 xl:grid-cols-[1.2fr,0.8fr]">
+                    <div className="overflow-hidden rounded-2xl border border-zinc-800">
+                      <table className="w-full text-sm">
+                        <thead className="bg-zinc-950/80">
+                          <tr className="text-left text-xs uppercase tracking-[0.16em] text-zinc-500">
+                            <th className="px-4 py-3">Invoice</th>
+                            <th className="px-4 py-3">{copy.amountDue}</th>
+                            <th className="px-4 py-3">{copy.dueDate}</th>
+                            <th className="px-4 py-3">{copy.actions}</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-zinc-800">
+                          {detail.invoices.map((invoice) => (
+                            <tr
+                              key={invoice.id}
+                              className={`cursor-pointer transition hover:bg-zinc-900/80 ${selectedInvoice?.id === invoice.id ? 'bg-emerald-500/8' : ''}`}
+                              onClick={() => setSelectedInvoiceId(invoice.id)}
+                            >
+                              <td className="px-4 py-3">
+                                <div>
+                                  <p className="font-medium text-zinc-100">{invoice.invoiceNumber ?? invoice.invoiceType}</p>
+                                  <p className="mt-1 text-xs text-zinc-500">{dateLabel(invoice.invoiceDate ?? invoice.createdAt)}</p>
+                                </div>
+                              </td>
+                              <td className="px-4 py-3 text-zinc-200">{money(invoice.amountDue, invoice.currency)}</td>
+                              <td className="px-4 py-3 text-zinc-400">{dateLabel(invoice.dueAt)}</td>
+                              <td className="px-4 py-3">
+                                <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${INVOICE_STATUS_COLORS[invoice.status] ?? 'text-zinc-300 bg-zinc-700/60'}`}>
+                                  {invoice.status}
+                                </span>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+
+                    {selectedInvoice && (
+                      <div className="space-y-4 rounded-2xl border border-zinc-800 bg-zinc-950/80 p-4">
+                        <div>
+                          <p className="text-xs uppercase tracking-[0.16em] text-zinc-500">{copy.selectedInvoice}</p>
+                          <div className="mt-2 flex items-center justify-between gap-3">
+                            <div>
+                              <h4 className="text-lg font-semibold text-zinc-50">{selectedInvoice.invoiceNumber ?? selectedInvoice.invoiceType}</h4>
+                              <p className="mt-1 text-sm text-zinc-400">
+                                {copy.issueDate}: {dateLabel(selectedInvoice.invoiceDate ?? selectedInvoice.createdAt)}
+                              </p>
+                            </div>
+                            <span className={`rounded-full px-2 py-1 text-xs font-semibold ${INVOICE_STATUS_COLORS[selectedInvoice.status] ?? 'text-zinc-300 bg-zinc-700/60'}`}>
+                              {selectedInvoice.status}
+                            </span>
+                          </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-3 text-sm">
+                          <Metric label={copy.amountDue} value={money(selectedInvoice.amountDue, selectedInvoice.currency)} />
+                          <Metric label={copy.amountPaid} value={money(selectedInvoice.amountPaid, selectedInvoice.currency)} />
+                        </div>
+
+                        <div>
+                          <p className="mb-2 text-xs uppercase tracking-[0.16em] text-zinc-500">{copy.lineItems}</p>
+                          <div className="space-y-2">
+                            {selectedInvoice.lineItems.map((item, index) => (
+                              <div key={`${selectedInvoice.id}-${index}`} className="rounded-xl border border-zinc-800 px-3 py-2">
+                                <div className="flex items-start justify-between gap-3">
+                                  <div>
+                                    <p className="text-sm text-zinc-100">{item.description}</p>
+                                    <p className="text-xs text-zinc-500">
+                                      {item.quantity} × {money(item.unitAmount, item.currency)}
+                                    </p>
+                                  </div>
+                                  <p className="text-sm font-medium text-zinc-200">{money(item.amount, item.currency)}</p>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
+                        <div className="grid gap-2">
+                          {selectedInvoice.status === 'DRAFT' ? (
+                            <button onClick={() => runInvoiceAction('finalize')} className={ACTION_PRIMARY_CLASS}>{copy.finalize}</button>
+                          ) : null}
+                          {['OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(selectedInvoice.status) ? (
+                            <>
+                              <div className="grid grid-cols-[1fr,auto] gap-2">
+                                <input
+                                  value={payAmount}
+                                  onChange={(event) => setPayAmount(event.target.value)}
+                                  placeholder="Amount in cents"
+                                  className={FIELD_CLASS}
+                                />
+                                <button
+                                  onClick={() => runInvoiceAction('pay', payAmount ? { amount: Number(payAmount) } : {})}
+                                  className={ACTION_PRIMARY_CLASS}
+                                >
+                                  {copy.pay}
+                                </button>
+                              </div>
+                              <button onClick={() => runInvoiceAction('retry-payment')} className={ACTION_SECONDARY_CLASS}>{copy.retry}</button>
+                              <div className="grid gap-2 sm:grid-cols-[1fr,auto]">
+                                <input value={voidReason} onChange={(event) => setVoidReason(event.target.value)} placeholder={copy.reason} className={FIELD_CLASS} />
+                                <button onClick={() => runInvoiceAction('void', { reason: voidReason })} className={ACTION_SECONDARY_CLASS}>{copy.void}</button>
+                              </div>
+                              <div className="grid gap-2 sm:grid-cols-[1fr,auto]">
+                                <input value={writeoffReason} onChange={(event) => setWriteoffReason(event.target.value)} placeholder={copy.reason} className={FIELD_CLASS} />
+                                <button onClick={() => runInvoiceAction('uncollectible', { reason: writeoffReason })} className={ACTION_SECONDARY_CLASS}>{copy.writeoff}</button>
+                              </div>
+                              <div className="grid gap-2 sm:grid-cols-[120px,1fr,auto]">
+                                <input value={creditAmount} onChange={(event) => setCreditAmount(event.target.value)} placeholder="Cents" className={FIELD_CLASS} />
+                                <input value={creditReason} onChange={(event) => setCreditReason(event.target.value)} placeholder={copy.reason} className={FIELD_CLASS} />
+                                <button onClick={() => runInvoiceAction('credit-notes', { amount: Number(creditAmount), reason: creditReason })} className={ACTION_SECONDARY_CLASS}>{copy.creditNote}</button>
+                              </div>
+                            </>
+                          ) : null}
+                          {['PAID', 'PARTIALLY_REFUNDED', 'REFUNDED'].includes(selectedInvoice.status) ? (
+                            <div className="grid gap-2 sm:grid-cols-[120px,1fr,auto]">
+                              <input value={refundAmount} onChange={(event) => setRefundAmount(event.target.value)} placeholder="Cents" className={FIELD_CLASS} />
+                              <input value={refundReason} onChange={(event) => setRefundReason(event.target.value)} placeholder={copy.reason} className={FIELD_CLASS} />
+                              <button onClick={() => runInvoiceAction('refunds', { amount: Number(refundAmount), reason: refundReason })} className={ACTION_SECONDARY_CLASS}>{copy.refund}</button>
+                            </div>
+                          ) : null}
+                          {selectedInvoice.invoiceNumber ? (
+                            <button onClick={downloadPdf} className={ACTION_SECONDARY_CLASS}>{copy.downloadPdf}</button>
+                          ) : null}
+                        </div>
+
+                        <DetailList title={copy.payments} items={selectedInvoice.paymentAttempts.map((attempt) => ({
+                          id: attempt.id,
+                          primary: `${attempt.status} · ${money(attempt.amount, attempt.currency)}`,
+                          secondary: `${dateLabel(attempt.attemptedAt)}${attempt.failureMessage ? ` · ${attempt.failureMessage}` : ''}`,
+                        }))} />
+                        <DetailList title={copy.credits} items={selectedInvoice.creditNotes.map((note) => ({
+                          id: note.id,
+                          primary: `${money(note.amount, note.currency)} · ${note.status}`,
+                          secondary: note.reason,
+                        }))} />
+                        <DetailList title={copy.refunds} items={selectedInvoice.refunds.map((refund) => ({
+                          id: refund.id,
+                          primary: `${money(refund.amount, refund.currency)} · ${refund.status}`,
+                          secondary: refund.reason,
+                        }))} />
+                      </div>
+                    )}
+                  </div>
+                )}
+              </section>
+
+              <section className="panel p-5">
+                <h3 className="text-sm font-semibold text-zinc-100">{copy.draftInvoice}</h3>
+                <div className="mt-4 grid gap-4 lg:grid-cols-[1fr,1fr,auto]">
+                  <Field label={copy.invoiceType}>
+                    <select
+                      value={invoiceDraft.invoiceType}
+                      onChange={(event) => setInvoiceDraft((current) => ({ ...current, invoiceType: event.target.value }))}
+                      className={FIELD_CLASS}
+                    >
+                      <option value="MANUAL">Manual</option>
+                      <option value="ONE_TIME">One time</option>
+                      <option value="SUBSCRIPTION_RENEWAL">Subscription renewal</option>
+                      <option value="SUBSCRIPTION_INITIAL">Subscription initial</option>
+                      <option value="TRIAL_CONVERSION">Trial conversion</option>
+                      <option value="CORRECTION">Correction</option>
+                    </select>
+                  </Field>
+                  <Field label={copy.reason}>
+                    <input
+                      value={invoiceDraft.adminReason}
+                      onChange={(event) => setInvoiceDraft((current) => ({ ...current, adminReason: event.target.value }))}
+                      className={FIELD_CLASS}
+                    />
+                  </Field>
+                  <label className="flex items-end gap-2 text-sm text-zinc-300">
+                    <input
+                      type="checkbox"
+                      checked={invoiceDraft.isSubscriptionBlocking}
+                      onChange={(event) => setInvoiceDraft((current) => ({ ...current, isSubscriptionBlocking: event.target.checked }))}
+                      className="mb-3 rounded border-zinc-700 bg-zinc-950 text-emerald-500"
+                    />
+                    <span className="mb-2">{copy.blocking}</span>
+                  </label>
+                </div>
+
+                <div className="mt-4 space-y-3">
+                  {invoiceDraft.lineItems.map((item, index) => (
+                    <div key={index} className="grid gap-3 rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4 lg:grid-cols-[180px,1fr,100px,140px,auto]">
+                      <select value={item.type} onChange={(event) => setDraftLine(index, 'type', event.target.value)} className={FIELD_CLASS}>
+                        <option value="PROFESSIONAL_SERVICES">Professional services</option>
+                        <option value="SETUP_FEE">Setup fee</option>
+                        <option value="SUBSCRIPTION_FEE">Subscription fee</option>
+                        <option value="MANUAL_ADJUSTMENT">Manual adjustment</option>
+                        <option value="DISCOUNT">Discount</option>
+                      </select>
+                      <input value={item.description} onChange={(event) => setDraftLine(index, 'description', event.target.value)} placeholder="Description" className={FIELD_CLASS} />
+                      <input type="number" min={1} value={item.quantity} onChange={(event) => setDraftLine(index, 'quantity', Number(event.target.value))} className={FIELD_CLASS} />
+                      <input type="number" value={item.unitAmount} onChange={(event) => setDraftLine(index, 'unitAmount', Number(event.target.value))} placeholder="Unit amount (cents)" className={FIELD_CLASS} />
+                      <button
+                        onClick={() => setInvoiceDraft((current) => ({
+                          ...current,
+                          lineItems: current.lineItems.length === 1 ? current.lineItems : current.lineItems.filter((_, lineIndex) => lineIndex !== index),
+                        }))}
+                        className="rounded-xl border border-zinc-700 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <button
+                    onClick={() => setInvoiceDraft((current) => ({ ...current, lineItems: [...current.lineItems, draftLineItem()] }))}
+                    className="rounded-xl border border-zinc-700 px-4 py-2 text-sm font-semibold text-zinc-200 hover:border-zinc-500"
+                  >
+                    Add line
+                  </button>
+                  <button onClick={createDraftInvoice} className={ACTION_PRIMARY_CLASS}>{copy.createDraft}</button>
+                </div>
+              </section>
+
+              <section className="panel p-5">
+                <div className="grid gap-5 xl:grid-cols-2">
+                  <DetailList title={copy.timeline} items={detail.events.map((event) => ({
+                    id: event.id,
+                    primary: event.eventType,
+                    secondary: `${event.source} · ${dateLabel(event.createdAt)}`,
+                  }))} />
+                  <DetailList title={copy.credits} items={detail.creditLedgerEntries.map((entry) => ({
+                    id: entry.id,
+                    primary: `${money(entry.amount, entry.currency)} · ${entry.type}`,
+                    secondary: entry.reason,
+                  }))} />
+                </div>
+              </section>
+            </>
+          ) : null}
+        </section>
+      </div>
+
+      {actionError ? <div className="panel p-4 text-sm text-red-400">{actionError}</div> : null}
+      {actionMessage ? <div className="panel p-4 text-sm text-emerald-300">{actionMessage}</div> : null}
+    </div>
+  )
+}
+
+function StatCard({ label, value, tone }: { label: string; value: string; tone: string }) {
+  return (
+    <div className="panel p-4">
+      <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">{label}</p>
+      <p className={`mt-2 text-2xl font-black ${tone}`}>{value}</p>
+    </div>
+  )
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p className="text-[11px] uppercase tracking-[0.16em] text-zinc-500">{label}</p>
+      <p className="mt-1 text-sm font-semibold text-zinc-100">{value}</p>
+    </div>
+  )
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="mb-2 block text-xs uppercase tracking-[0.16em] text-zinc-500">{label}</span>
+      {children}
+    </label>
+  )
+}
+
+function DetailList({
+  title,
+  items,
+}: {
+  title: string
+  items: Array<{ id: string; primary: string; secondary: string }>
+}) {
+  return (
+    <div>
+      <p className="mb-2 text-xs uppercase tracking-[0.16em] text-zinc-500">{title}</p>
+      {items.length === 0 ? (
+        <div className="rounded-xl border border-zinc-800 px-3 py-3 text-sm text-zinc-500">—</div>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item) => (
+            <div key={item.id} className="rounded-xl border border-zinc-800 px-3 py-3">
+              <p className="text-sm text-zinc-100">{item.primary}</p>
+              <p className="mt-1 text-xs text-zinc-500">{item.secondary}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/companies/[id]/page.tsx b/admin/src/app/dashboard/companies/[id]/page.tsx
new file mode 100644
index 0000000..068b96f
--- /dev/null
+++ b/admin/src/app/dashboard/companies/[id]/page.tsx
@@ -0,0 +1,1031 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface CompanyAddressProfile {
+  streetAddress?: string | null
+  city?: string | null
+  country?: string | null
+  zipCode?: string | null
+  legalName?: string | null
+  legalForm?: string | null
+  companyEmail?: string | null
+  managerName?: string | null
+  iceNumber?: string | null
+  operatingLicenseNumber?: string | null
+  operatingLicenseIssuedAt?: string | null
+  operatingLicenseIssuedBy?: string | null
+  fax?: string | null
+  yearsActive?: string | null
+  representativeName?: string | null
+  representativeTitle?: string | null
+  responsibleName?: string | null
+  responsibleRole?: string | null
+  responsibleIdentityNumber?: string | null
+  responsibleQualification?: string | null
+  responsiblePhone?: string | null
+  responsibleEmail?: string | null
+}
+
+interface CompanyDetail {
+  id: string
+  name: string
+  slug: string
+  email: string
+  phone: string | null
+  address: CompanyAddressProfile | string | null
+  status: string
+  subscriptionPaymentRef: string | null
+  createdAt: string
+  subscription: {
+    id: string
+    plan: string
+    billingPeriod: string
+    status: string
+    currency: string
+    trialStartAt: string | null
+    trialEndAt: string | null
+    currentPeriodStart: string | null
+    currentPeriodEnd: string | null
+    cancelledAt: string | null
+    cancelAtPeriodEnd: boolean
+    paymentPendingSince: string | null
+    pastDueSince: string | null
+    suspendedAt: string | null
+    retryCount: number
+  } | null
+  brand: {
+    displayName: string
+    tagline: string | null
+    subdomain: string
+    customDomain: string | null
+    publicEmail: string | null
+    publicPhone: string | null
+    publicAddress: string | null
+    publicCity: string | null
+    publicCountry: string | null
+    websiteUrl: string | null
+    whatsappNumber: string | null
+    defaultLocale: string
+    defaultCurrency: string
+    isListedOnMarketplace: boolean
+  } | null
+  contractSettings: {
+    legalName: string | null
+    registrationNumber: string | null
+    taxId: string | null
+    terms: string
+    fuelPolicyType: string
+    lateFeePerHour: number | null
+    taxRate: number | null
+    signatureRequired: boolean
+    showTax: boolean
+  } | null
+  accountingSettings: {
+    reportingPeriod: string
+    fiscalYearStart: number
+    currency: string
+    accountantEmail: string | null
+    accountantName: string | null
+    autoSendReport: boolean
+    reportFormat: string
+  } | null
+  employees?: Array<{ id: string }>
+  vehicles?: Array<{ id: string }>
+  customers?: Array<{ id: string }>
+  reservations?: Array<{ id: string }>
+  _count?: { employees?: number; vehicles?: number; customers?: number; reservations?: number }
+}
+
+interface AuditLog {
+  id: string
+  action: string
+  resource: string
+  resourceId: string | null
+  createdAt: string
+  adminUser: { email: string } | null
+}
+
+interface SubEvent {
+  id: string
+  eventType: string
+  source: string
+  payload: Record<string, any>
+  occurredAt: string
+}
+
+interface FormState {
+  company: {
+    name: string
+    slug: string
+    email: string
+    phone: string
+    status: string
+    subscriptionPaymentRef: string
+  }
+  companyProfile: {
+    legalForm: string
+    managerName: string
+    zipCode: string
+    fax: string
+    yearsActive: string
+    iceNumber: string
+    operatingLicenseNumber: string
+    operatingLicenseIssuedAt: string
+    operatingLicenseIssuedBy: string
+    representativeName: string
+    representativeTitle: string
+    responsibleName: string
+    responsibleRole: string
+    responsibleIdentityNumber: string
+    responsibleQualification: string
+    responsiblePhone: string
+    responsibleEmail: string
+  }
+  subscription: {
+    plan: string
+    billingPeriod: string
+    status: string
+    currency: string
+    trialStartAt: string
+    trialEndAt: string
+    currentPeriodStart: string
+    currentPeriodEnd: string
+    cancelledAt: string
+    cancelAtPeriodEnd: boolean
+  }
+  brand: {
+    displayName: string
+    tagline: string
+    subdomain: string
+    customDomain: string
+    publicEmail: string
+    publicPhone: string
+    publicAddress: string
+    publicCity: string
+    publicCountry: string
+    websiteUrl: string
+    whatsappNumber: string
+    defaultLocale: string
+    defaultCurrency: string
+    isListedOnMarketplace: boolean
+  }
+  contractSettings: {
+    legalName: string
+    registrationNumber: string
+    taxId: string
+    terms: string
+    fuelPolicyType: string
+    lateFeePerHour: string
+    taxRate: string
+    signatureRequired: boolean
+    showTax: boolean
+  }
+  accountingSettings: {
+    reportingPeriod: string
+    fiscalYearStart: string
+    currency: string
+    accountantEmail: string
+    accountantName: string
+    autoSendReport: boolean
+    reportFormat: string
+  }
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'text-emerald-400',
+  TRIALING: 'text-sky-400',
+  SUSPENDED: 'text-red-400',
+  PENDING: 'text-orange-400',
+  CANCELLED: 'text-zinc-400',
+  PAST_DUE: 'text-orange-400',
+}
+
+const INPUT_CLASS = 'mt-1 w-full rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-blue-700'
+const LABEL_CLASS = 'text-xs font-medium uppercase tracking-wide text-zinc-500'
+
+function toDateInput(value: string | null | undefined) {
+  return value ? new Date(value).toISOString().slice(0, 10) : ''
+}
+
+function toNullable(value: string) {
+  const trimmed = value.trim()
+  return trimmed ? trimmed : null
+}
+
+function normalizeAddressProfile(value: CompanyDetail['address']): CompanyAddressProfile {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
+  return value
+}
+
+function createFormState(company: CompanyDetail): FormState {
+  const address = normalizeAddressProfile(company.address)
+  return {
+    company: {
+      name: company.name ?? '',
+      slug: company.slug ?? '',
+      email: company.email ?? '',
+      phone: company.phone ?? '',
+      status: company.status ?? 'TRIALING',
+      subscriptionPaymentRef: company.subscriptionPaymentRef ?? '',
+    },
+    companyProfile: {
+      legalForm: address.legalForm ?? '',
+      managerName: address.managerName ?? '',
+      zipCode: address.zipCode ?? '',
+      fax: address.fax ?? '',
+      yearsActive: address.yearsActive ?? '',
+      iceNumber: address.iceNumber ?? '',
+      operatingLicenseNumber: address.operatingLicenseNumber ?? '',
+      operatingLicenseIssuedAt: address.operatingLicenseIssuedAt ?? '',
+      operatingLicenseIssuedBy: address.operatingLicenseIssuedBy ?? '',
+      representativeName: address.representativeName ?? '',
+      representativeTitle: address.representativeTitle ?? '',
+      responsibleName: address.responsibleName ?? '',
+      responsibleRole: address.responsibleRole ?? '',
+      responsibleIdentityNumber: address.responsibleIdentityNumber ?? '',
+      responsibleQualification: address.responsibleQualification ?? '',
+      responsiblePhone: address.responsiblePhone ?? '',
+      responsibleEmail: address.responsibleEmail ?? '',
+    },
+    subscription: {
+      plan: company.subscription?.plan ?? 'STARTER',
+      billingPeriod: company.subscription?.billingPeriod ?? 'MONTHLY',
+      status: company.subscription?.status ?? 'TRIALING',
+      currency: company.subscription?.currency ?? 'MAD',
+      trialStartAt: toDateInput(company.subscription?.trialStartAt),
+      trialEndAt: toDateInput(company.subscription?.trialEndAt),
+      currentPeriodStart: toDateInput(company.subscription?.currentPeriodStart),
+      currentPeriodEnd: toDateInput(company.subscription?.currentPeriodEnd),
+      cancelledAt: toDateInput(company.subscription?.cancelledAt),
+      cancelAtPeriodEnd: company.subscription?.cancelAtPeriodEnd ?? false,
+    },
+    brand: {
+      displayName: company.brand?.displayName ?? company.name ?? '',
+      tagline: company.brand?.tagline ?? '',
+      subdomain: company.brand?.subdomain ?? company.slug ?? '',
+      customDomain: company.brand?.customDomain ?? '',
+      publicEmail: company.brand?.publicEmail ?? '',
+      publicPhone: company.brand?.publicPhone ?? '',
+      publicAddress: company.brand?.publicAddress ?? '',
+      publicCity: company.brand?.publicCity ?? '',
+      publicCountry: company.brand?.publicCountry ?? '',
+      websiteUrl: company.brand?.websiteUrl ?? '',
+      whatsappNumber: company.brand?.whatsappNumber ?? '',
+      defaultLocale: company.brand?.defaultLocale ?? 'en',
+      defaultCurrency: company.brand?.defaultCurrency ?? 'MAD',
+      isListedOnMarketplace: company.brand?.isListedOnMarketplace ?? true,
+    },
+    contractSettings: {
+      legalName: company.contractSettings?.legalName ?? '',
+      registrationNumber: company.contractSettings?.registrationNumber ?? '',
+      taxId: company.contractSettings?.taxId ?? '',
+      terms: company.contractSettings?.terms ?? '',
+      fuelPolicyType: company.contractSettings?.fuelPolicyType ?? 'FULL_TO_FULL',
+      lateFeePerHour: company.contractSettings?.lateFeePerHour?.toString() ?? '',
+      taxRate: company.contractSettings?.taxRate?.toString() ?? '',
+      signatureRequired: company.contractSettings?.signatureRequired ?? true,
+      showTax: company.contractSettings?.showTax ?? false,
+    },
+    accountingSettings: {
+      reportingPeriod: company.accountingSettings?.reportingPeriod ?? 'MONTHLY',
+      fiscalYearStart: company.accountingSettings?.fiscalYearStart?.toString() ?? '1',
+      currency: company.accountingSettings?.currency ?? 'MAD',
+      accountantEmail: company.accountingSettings?.accountantEmail ?? '',
+      accountantName: company.accountingSettings?.accountantName ?? '',
+      autoSendReport: company.accountingSettings?.autoSendReport ?? false,
+      reportFormat: company.accountingSettings?.reportFormat ?? 'PDF',
+    },
+  }
+}
+
+export default function AdminCompanyDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const router = useRouter()
+  const [company, setCompany] = useState<CompanyDetail | null>(null)
+  const [form, setForm] = useState<FormState | null>(null)
+  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
+  const [subEvents, setSubEvents] = useState<SubEvent[]>([])
+  const [subActioning, setSubActioning] = useState<string | null>(null)
+  const [subOverrideReason, setSubOverrideReason] = useState('')
+  const [showSubActions, setShowSubActions] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [actioning, setActioning] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [savedMessage, setSavedMessage] = useState<string | null>(null)
+  const [deleteConfirm, setDeleteConfirm] = useState(false)
+
+  async function fetchData() {
+    try {
+      const [cRes, aRes] = await Promise.all([
+        fetch(`${ADMIN_API_BASE}/admin/companies/${id}`, { cache: 'no-store', credentials: 'include' }),
+        fetch(`${ADMIN_API_BASE}/admin/audit-logs?entityId=${id}&pageSize=10`, { cache: 'no-store', credentials: 'include' }),
+      ])
+      const cJson = await cRes.json()
+      const aJson = await aRes.json()
+      if (!cRes.ok) throw new Error(cJson?.message ?? 'Not found')
+      setCompany(cJson.data)
+      setForm(createFormState(cJson.data))
+      setAuditLogs(aJson.data?.data ?? [])
+
+      const subId = cJson.data?.subscription?.id
+      if (subId) {
+        const eRes = await fetch(`${ADMIN_API_BASE}/admin/subscriptions/${subId}/events`, { cache: 'no-store', credentials: 'include' })
+        const eJson = await eRes.json()
+        setSubEvents(Array.isArray(eJson.data) ? eJson.data : [])
+      }
+      setError(null)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchData() }, [id])
+
+  function updateSection<K extends keyof FormState>(section: K, patch: Partial<FormState[K]>) {
+    setForm((current) => current ? { ...current, [section]: { ...current[section], ...patch } } : current)
+  }
+
+  async function saveChanges() {
+    if (!form) return
+    setSaving(true)
+    setSavedMessage(null)
+    setError(null)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/companies/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          company: {
+            name: form.company.name,
+            slug: form.company.slug,
+            email: form.company.email,
+            phone: toNullable(form.company.phone),
+            subscriptionPaymentRef: toNullable(form.company.subscriptionPaymentRef),
+            address: {
+              streetAddress: toNullable(form.brand.publicAddress),
+              city: toNullable(form.brand.publicCity),
+              country: toNullable(form.brand.publicCountry),
+              zipCode: toNullable(form.companyProfile.zipCode),
+              legalName: toNullable(form.contractSettings.legalName),
+              legalForm: toNullable(form.companyProfile.legalForm),
+              companyEmail: toNullable(form.company.email),
+              managerName: toNullable(form.companyProfile.managerName),
+              iceNumber: toNullable(form.companyProfile.iceNumber),
+              operatingLicenseNumber: toNullable(form.companyProfile.operatingLicenseNumber),
+              operatingLicenseIssuedAt: toNullable(form.companyProfile.operatingLicenseIssuedAt),
+              operatingLicenseIssuedBy: toNullable(form.companyProfile.operatingLicenseIssuedBy),
+              fax: toNullable(form.companyProfile.fax),
+              yearsActive: toNullable(form.companyProfile.yearsActive),
+              representativeName: toNullable(form.companyProfile.representativeName),
+              representativeTitle: toNullable(form.companyProfile.representativeTitle),
+              responsibleName: toNullable(form.companyProfile.responsibleName),
+              responsibleRole: toNullable(form.companyProfile.responsibleRole),
+              responsibleIdentityNumber: toNullable(form.companyProfile.responsibleIdentityNumber),
+              responsibleQualification: toNullable(form.companyProfile.responsibleQualification),
+              responsiblePhone: toNullable(form.companyProfile.responsiblePhone),
+              responsibleEmail: toNullable(form.companyProfile.responsibleEmail),
+            },
+          },
+          subscription: {
+            plan: form.subscription.plan,
+            billingPeriod: form.subscription.billingPeriod,
+            status: form.subscription.status,
+            currency: form.subscription.currency,
+            trialStartAt: toNullable(form.subscription.trialStartAt),
+            trialEndAt: toNullable(form.subscription.trialEndAt),
+            currentPeriodStart: toNullable(form.subscription.currentPeriodStart),
+            currentPeriodEnd: toNullable(form.subscription.currentPeriodEnd),
+            cancelledAt: toNullable(form.subscription.cancelledAt),
+            cancelAtPeriodEnd: form.subscription.cancelAtPeriodEnd,
+          },
+          brand: {
+            displayName: form.brand.displayName,
+            tagline: toNullable(form.brand.tagline),
+            subdomain: form.brand.subdomain,
+            customDomain: toNullable(form.brand.customDomain),
+            publicEmail: toNullable(form.brand.publicEmail),
+            publicPhone: toNullable(form.brand.publicPhone),
+            publicAddress: toNullable(form.brand.publicAddress),
+            publicCity: toNullable(form.brand.publicCity),
+            publicCountry: toNullable(form.brand.publicCountry),
+            websiteUrl: toNullable(form.brand.websiteUrl),
+            whatsappNumber: toNullable(form.brand.whatsappNumber),
+            defaultLocale: form.brand.defaultLocale,
+            defaultCurrency: form.brand.defaultCurrency,
+            isListedOnMarketplace: form.brand.isListedOnMarketplace,
+          },
+          contractSettings: {
+            legalName: toNullable(form.contractSettings.legalName),
+            registrationNumber: toNullable(form.contractSettings.registrationNumber),
+            taxId: toNullable(form.contractSettings.taxId),
+            terms: form.contractSettings.terms,
+            fuelPolicyType: form.contractSettings.fuelPolicyType,
+            lateFeePerHour: form.contractSettings.lateFeePerHour ? Number(form.contractSettings.lateFeePerHour) : null,
+            taxRate: form.contractSettings.taxRate ? Number(form.contractSettings.taxRate) : null,
+            signatureRequired: form.contractSettings.signatureRequired,
+            showTax: form.contractSettings.showTax,
+          },
+          accountingSettings: {
+            reportingPeriod: form.accountingSettings.reportingPeriod,
+            fiscalYearStart: Number(form.accountingSettings.fiscalYearStart || 1),
+            currency: form.accountingSettings.currency,
+            accountantEmail: toNullable(form.accountingSettings.accountantEmail),
+            accountantName: toNullable(form.accountingSettings.accountantName),
+            autoSendReport: form.accountingSettings.autoSendReport,
+            reportFormat: form.accountingSettings.reportFormat,
+          },
+        }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Save failed')
+      setCompany(json.data)
+      setForm(createFormState(json.data))
+      setSavedMessage('Company settings updated.')
+      await fetchData()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function doSubAction(action: string) {
+    if (!company?.subscription?.id) return
+    if (!subOverrideReason.trim()) { setError('A reason is required for subscription overrides'); return }
+    setSubActioning(action)
+    setError(null)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/subscriptions/${company.subscription.id}/${action}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ reason: subOverrideReason }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Action failed')
+      setSubOverrideReason('')
+      setShowSubActions(false)
+      await fetchData()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setSubActioning(null)
+    }
+  }
+
+  async function changeStatus(status: string) {
+    setActioning(true)
+    setError(null)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/companies/${id}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ status }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Action failed')
+      await fetchData()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setActioning(false)
+    }
+  }
+
+  async function deleteCompany() {
+    setActioning(true)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/companies/${id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Delete failed')
+      router.push('/dashboard/companies')
+    } catch (err: any) {
+      setError(err.message)
+      setActioning(false)
+    }
+  }
+
+  if (loading) return <div className="card p-8 text-center text-zinc-500">Loading…</div>
+  if (error && !company) return <div className="card p-8 text-center text-red-400">{error}</div>
+  if (!company || !form) return null
+
+  const counts = {
+    employees: company._count?.employees ?? company.employees?.length ?? 0,
+    vehicles: company._count?.vehicles ?? company.vehicles?.length ?? 0,
+    customers: company._count?.customers ?? company.customers?.length ?? 0,
+    reservations: company._count?.reservations ?? company.reservations?.length ?? 0,
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <Link href="/dashboard/companies" className="text-sm text-zinc-500 hover:text-zinc-300">← Companies</Link>
+        <button
+          onClick={saveChanges}
+          disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save changes'}
+        </button>
+      </div>
+
+      <div className="rdg-page-heading flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-black">{company.name}</h1>
+          <p className="mt-1 font-mono text-sm text-zinc-400">{company.slug}</p>
+        </div>
+        <span className={`text-sm font-semibold ${STATUS_COLORS[company.status] ?? 'text-zinc-400'}`}>{company.status}</span>
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+      {savedMessage && <div className="panel p-4 text-sm text-emerald-400">{savedMessage}</div>}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {[
+          { label: 'Employees', value: counts.employees },
+          { label: 'Vehicles', value: counts.vehicles },
+          { label: 'Customers', value: counts.customers },
+          { label: 'Reservations', value: counts.reservations },
+        ].map((kpi) => (
+          <div key={kpi.label} className="panel p-5">
+            <p className="text-xs text-zinc-500">{kpi.label}</p>
+            <p className="mt-1 text-2xl font-black">{kpi.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <section className="panel p-6">
+          <h2 className="text-base font-semibold">Company</h2>
+          <div className="mt-4 grid gap-4 md:grid-cols-2">
+            <label>
+              <span className={LABEL_CLASS}>Name</span>
+              <input className={INPUT_CLASS} value={form.company.name} onChange={(e) => updateSection('company', { name: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Slug</span>
+              <input className={INPUT_CLASS} value={form.company.slug} onChange={(e) => updateSection('company', { slug: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Email</span>
+              <input className={INPUT_CLASS} type="email" value={form.company.email} onChange={(e) => updateSection('company', { email: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Phone</span>
+              <input className={INPUT_CLASS} value={form.company.phone} onChange={(e) => updateSection('company', { phone: e.target.value })} />
+            </label>
+            <div>
+              <span className={LABEL_CLASS}>Company status</span>
+              <p className={`mt-1 text-sm font-semibold ${STATUS_COLORS[form.company.status] ?? 'text-zinc-400'}`}>{form.company.status}</p>
+            </div>
+            <label>
+              <span className={LABEL_CLASS}>Subscription payment ref</span>
+              <input className={INPUT_CLASS} value={form.company.subscriptionPaymentRef} onChange={(e) => updateSection('company', { subscriptionPaymentRef: e.target.value })} />
+            </label>
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <h2 className="text-base font-semibold">Subscription</h2>
+          <div className="mt-4 grid gap-4 md:grid-cols-2">
+            <label>
+              <span className={LABEL_CLASS}>Plan</span>
+              <select className={INPUT_CLASS} value={form.subscription.plan} onChange={(e) => updateSection('subscription', { plan: e.target.value })}>
+                <option value="STARTER">STARTER</option>
+                <option value="GROWTH">GROWTH</option>
+                <option value="PRO">PRO</option>
+              </select>
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Billing period</span>
+              <select className={INPUT_CLASS} value={form.subscription.billingPeriod} onChange={(e) => updateSection('subscription', { billingPeriod: e.target.value })}>
+                <option value="MONTHLY">MONTHLY</option>
+                <option value="ANNUAL">ANNUAL</option>
+              </select>
+            </label>
+            <div>
+              <span className={LABEL_CLASS}>Status</span>
+              <p className={`mt-1 text-sm font-semibold ${STATUS_COLORS[form.subscription.status] ?? 'text-zinc-400'}`}>{form.subscription.status}</p>
+              {company.subscription?.paymentPendingSince && (
+                <p className="mt-0.5 text-xs text-zinc-500">Pending since {new Date(company.subscription.paymentPendingSince).toLocaleDateString()}</p>
+              )}
+              {company.subscription?.pastDueSince && (
+                <p className="mt-0.5 text-xs text-orange-500">Past due since {new Date(company.subscription.pastDueSince).toLocaleDateString()}</p>
+              )}
+              {company.subscription?.suspendedAt && (
+                <p className="mt-0.5 text-xs text-red-500">Suspended {new Date(company.subscription.suspendedAt).toLocaleDateString()}</p>
+              )}
+            </div>
+            <label>
+              <span className={LABEL_CLASS}>Currency</span>
+              <select className={INPUT_CLASS} value={form.subscription.currency} onChange={(e) => updateSection('subscription', { currency: e.target.value })}>
+                <option value="MAD">MAD</option>
+                <option value="USD">USD</option>
+                <option value="EUR">EUR</option>
+              </select>
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Trial start</span>
+              <input className={INPUT_CLASS} type="date" value={form.subscription.trialStartAt} onChange={(e) => updateSection('subscription', { trialStartAt: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Trial end</span>
+              <input className={INPUT_CLASS} type="date" value={form.subscription.trialEndAt} onChange={(e) => updateSection('subscription', { trialEndAt: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Period start</span>
+              <input className={INPUT_CLASS} type="date" value={form.subscription.currentPeriodStart} onChange={(e) => updateSection('subscription', { currentPeriodStart: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Period end</span>
+              <input className={INPUT_CLASS} type="date" value={form.subscription.currentPeriodEnd} onChange={(e) => updateSection('subscription', { currentPeriodEnd: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Cancelled at</span>
+              <input className={INPUT_CLASS} type="date" value={form.subscription.cancelledAt} onChange={(e) => updateSection('subscription', { cancelledAt: e.target.value })} />
+            </label>
+            <label className="flex items-center gap-3 pt-7 text-sm text-zinc-300">
+              <input type="checkbox" checked={form.subscription.cancelAtPeriodEnd} onChange={(e) => updateSection('subscription', { cancelAtPeriodEnd: e.target.checked })} />
+              Cancel at period end
+            </label>
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <h2 className="text-base font-semibold">Brand and public profile</h2>
+          <div className="mt-4 grid gap-4 md:grid-cols-2">
+            <label>
+              <span className={LABEL_CLASS}>Display name</span>
+              <input className={INPUT_CLASS} value={form.brand.displayName} onChange={(e) => updateSection('brand', { displayName: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Subdomain</span>
+              <input className={INPUT_CLASS} value={form.brand.subdomain} onChange={(e) => updateSection('brand', { subdomain: e.target.value })} />
+            </label>
+            <label className="md:col-span-2">
+              <span className={LABEL_CLASS}>Tagline</span>
+              <input className={INPUT_CLASS} value={form.brand.tagline} onChange={(e) => updateSection('brand', { tagline: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Public email</span>
+              <input className={INPUT_CLASS} type="email" value={form.brand.publicEmail} onChange={(e) => updateSection('brand', { publicEmail: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Public phone</span>
+              <input className={INPUT_CLASS} value={form.brand.publicPhone} onChange={(e) => updateSection('brand', { publicPhone: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Custom domain</span>
+              <input className={INPUT_CLASS} value={form.brand.customDomain} onChange={(e) => updateSection('brand', { customDomain: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Website URL</span>
+              <input className={INPUT_CLASS} type="url" value={form.brand.websiteUrl} onChange={(e) => updateSection('brand', { websiteUrl: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>WhatsApp</span>
+              <input className={INPUT_CLASS} value={form.brand.whatsappNumber} onChange={(e) => updateSection('brand', { whatsappNumber: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Locale</span>
+              <input className={INPUT_CLASS} value={form.brand.defaultLocale} onChange={(e) => updateSection('brand', { defaultLocale: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Brand currency</span>
+              <select className={INPUT_CLASS} value={form.brand.defaultCurrency} onChange={(e) => updateSection('brand', { defaultCurrency: e.target.value })}>
+                <option value="MAD">MAD</option>
+                <option value="USD">USD</option>
+                <option value="EUR">EUR</option>
+              </select>
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>City</span>
+              <input className={INPUT_CLASS} value={form.brand.publicCity} onChange={(e) => updateSection('brand', { publicCity: e.target.value })} />
+            </label>
+            <label>
+              <span className={LABEL_CLASS}>Country</span>
+              <input className={INPUT_CLASS} value={form.brand.publicCountry} onChange={(e) => updateSection('brand', { publicCountry: e.target.value })} />
+            </label>
+            <label className="md:col-span-2">
+              <span className={LABEL_CLASS}>Address</span>
+              <input className={INPUT_CLASS} value={form.brand.publicAddress} onChange={(e) => updateSection('brand', { publicAddress: e.target.value })} />
+            </label>
+            <label className="flex items-center gap-3 pt-7 text-sm text-zinc-300">
+              <input type="checkbox" checked={form.brand.isListedOnMarketplace} onChange={(e) => updateSection('brand', { isListedOnMarketplace: e.target.checked })} />
+              Listed on marketplace
+            </label>
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <h2 className="text-base font-semibold">Company legal profile</h2>
+          <div className="mt-4 grid gap-6">
+            <div className="grid gap-4 md:grid-cols-2">
+              <label>
+                <span className={LABEL_CLASS}>Legal form</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.legalForm} onChange={(e) => updateSection('companyProfile', { legalForm: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Manager / owner name</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.managerName} onChange={(e) => updateSection('companyProfile', { managerName: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>ZIP / postal code</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.zipCode} onChange={(e) => updateSection('companyProfile', { zipCode: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Fax</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.fax} onChange={(e) => updateSection('companyProfile', { fax: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Years active</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.yearsActive} onChange={(e) => updateSection('companyProfile', { yearsActive: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>ICE number</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.iceNumber} onChange={(e) => updateSection('companyProfile', { iceNumber: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Operating license number</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.operatingLicenseNumber} onChange={(e) => updateSection('companyProfile', { operatingLicenseNumber: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Operating license issue date</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.operatingLicenseIssuedAt} onChange={(e) => updateSection('companyProfile', { operatingLicenseIssuedAt: e.target.value })} />
+              </label>
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>Issuing authority</span>
+                <input className={INPUT_CLASS} value={form.companyProfile.operatingLicenseIssuedBy} onChange={(e) => updateSection('companyProfile', { operatingLicenseIssuedBy: e.target.value })} />
+              </label>
+            </div>
+
+            <div className="border-t border-zinc-800 pt-6">
+              <h3 className="text-sm font-semibold text-zinc-200">Legal representative</h3>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <label>
+                  <span className={LABEL_CLASS}>Representative name</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.representativeName} onChange={(e) => updateSection('companyProfile', { representativeName: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Representative title</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.representativeTitle} onChange={(e) => updateSection('companyProfile', { representativeTitle: e.target.value })} />
+                </label>
+              </div>
+            </div>
+
+            <div className="border-t border-zinc-800 pt-6">
+              <h3 className="text-sm font-semibold text-zinc-200">Responsible person</h3>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <label>
+                  <span className={LABEL_CLASS}>Responsible name</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.responsibleName} onChange={(e) => updateSection('companyProfile', { responsibleName: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Responsible role</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.responsibleRole} onChange={(e) => updateSection('companyProfile', { responsibleRole: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Identity document number</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.responsibleIdentityNumber} onChange={(e) => updateSection('companyProfile', { responsibleIdentityNumber: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Qualification / diploma / experience</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.responsibleQualification} onChange={(e) => updateSection('companyProfile', { responsibleQualification: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Responsible phone</span>
+                  <input className={INPUT_CLASS} value={form.companyProfile.responsiblePhone} onChange={(e) => updateSection('companyProfile', { responsiblePhone: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Responsible email</span>
+                  <input className={INPUT_CLASS} type="email" value={form.companyProfile.responsibleEmail} onChange={(e) => updateSection('companyProfile', { responsibleEmail: e.target.value })} />
+                </label>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <h2 className="text-base font-semibold">Operations and finance</h2>
+          <div className="mt-4 grid gap-6">
+            <div className="grid gap-4 md:grid-cols-2">
+              <label>
+                <span className={LABEL_CLASS}>Legal name</span>
+                <input className={INPUT_CLASS} value={form.contractSettings.legalName} onChange={(e) => updateSection('contractSettings', { legalName: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Registration number</span>
+                <input className={INPUT_CLASS} value={form.contractSettings.registrationNumber} onChange={(e) => updateSection('contractSettings', { registrationNumber: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Tax ID</span>
+                <input className={INPUT_CLASS} value={form.contractSettings.taxId} onChange={(e) => updateSection('contractSettings', { taxId: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Fuel policy type</span>
+                <select className={INPUT_CLASS} value={form.contractSettings.fuelPolicyType} onChange={(e) => updateSection('contractSettings', { fuelPolicyType: e.target.value })}>
+                  <option value="FULL_TO_FULL">FULL_TO_FULL</option>
+                  <option value="FULL_TO_EMPTY">FULL_TO_EMPTY</option>
+                  <option value="SAME_TO_SAME">SAME_TO_SAME</option>
+                  <option value="PREPAID">PREPAID</option>
+                  <option value="FREE">FREE</option>
+                </select>
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Late fee per hour</span>
+                <input className={INPUT_CLASS} type="number" value={form.contractSettings.lateFeePerHour} onChange={(e) => updateSection('contractSettings', { lateFeePerHour: e.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Tax rate</span>
+                <input className={INPUT_CLASS} type="number" step="0.01" value={form.contractSettings.taxRate} onChange={(e) => updateSection('contractSettings', { taxRate: e.target.value })} />
+              </label>
+              <label className="flex items-center gap-3 pt-7 text-sm text-zinc-300">
+                <input type="checkbox" checked={form.contractSettings.signatureRequired} onChange={(e) => updateSection('contractSettings', { signatureRequired: e.target.checked })} />
+                Signature required
+              </label>
+              <label className="flex items-center gap-3 pt-7 text-sm text-zinc-300">
+                <input type="checkbox" checked={form.contractSettings.showTax} onChange={(e) => updateSection('contractSettings', { showTax: e.target.checked })} />
+                Show tax on documents
+              </label>
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>Terms</span>
+                <textarea className={`${INPUT_CLASS} min-h-28`} value={form.contractSettings.terms} onChange={(e) => updateSection('contractSettings', { terms: e.target.value })} />
+              </label>
+            </div>
+
+            <div className="border-t border-zinc-800 pt-6">
+              <h3 className="text-sm font-semibold text-zinc-200">Accounting settings</h3>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                <label>
+                  <span className={LABEL_CLASS}>Reporting period</span>
+                  <select className={INPUT_CLASS} value={form.accountingSettings.reportingPeriod} onChange={(e) => updateSection('accountingSettings', { reportingPeriod: e.target.value })}>
+                    <option value="WEEKLY">WEEKLY</option>
+                    <option value="MONTHLY">MONTHLY</option>
+                    <option value="QUARTERLY">QUARTERLY</option>
+                    <option value="ANNUAL">ANNUAL</option>
+                  </select>
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Fiscal year start month</span>
+                  <input className={INPUT_CLASS} type="number" min="1" max="12" value={form.accountingSettings.fiscalYearStart} onChange={(e) => updateSection('accountingSettings', { fiscalYearStart: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Accounting currency</span>
+                  <select className={INPUT_CLASS} value={form.accountingSettings.currency} onChange={(e) => updateSection('accountingSettings', { currency: e.target.value })}>
+                    <option value="MAD">MAD</option>
+                    <option value="USD">USD</option>
+                    <option value="EUR">EUR</option>
+                  </select>
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Report format</span>
+                  <select className={INPUT_CLASS} value={form.accountingSettings.reportFormat} onChange={(e) => updateSection('accountingSettings', { reportFormat: e.target.value })}>
+                    <option value="PDF">PDF</option>
+                    <option value="CSV">CSV</option>
+                    <option value="BOTH">BOTH</option>
+                  </select>
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Accountant name</span>
+                  <input className={INPUT_CLASS} value={form.accountingSettings.accountantName} onChange={(e) => updateSection('accountingSettings', { accountantName: e.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Accountant email</span>
+                  <input className={INPUT_CLASS} type="email" value={form.accountingSettings.accountantEmail} onChange={(e) => updateSection('accountingSettings', { accountantEmail: e.target.value })} />
+                </label>
+                <label className="flex items-center gap-3 pt-7 text-sm text-zinc-300">
+                  <input type="checkbox" checked={form.accountingSettings.autoSendReport} onChange={(e) => updateSection('accountingSettings', { autoSendReport: e.target.checked })} />
+                  Auto-send reports
+                </label>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-4">
+          <div className="panel p-6 space-y-4">
+            <h2 className="text-base font-semibold">Company actions</h2>
+            <div className="space-y-3">
+              {company.status === 'SUSPENDED' ? (
+                <button onClick={() => changeStatus('ACTIVE')} disabled={actioning} className="w-full rounded-xl bg-emerald-900/40 py-2.5 text-sm font-semibold text-emerald-400 transition-colors hover:bg-emerald-900/60 disabled:opacity-50">
+                  Reactivate company
+                </button>
+              ) : (
+                <button onClick={() => changeStatus('SUSPENDED')} disabled={actioning} className="w-full rounded-xl bg-red-950/40 py-2.5 text-sm font-semibold text-red-400 transition-colors hover:bg-red-950/60 disabled:opacity-50">
+                  Suspend company
+                </button>
+              )}
+              {!deleteConfirm ? (
+                <button onClick={() => setDeleteConfirm(true)} className="w-full rounded-xl bg-zinc-800 py-2.5 text-sm font-semibold text-zinc-400 transition-colors hover:bg-zinc-700">
+                  Delete company
+                </button>
+              ) : (
+                <div className="space-y-3 rounded-xl border border-red-900/50 p-4">
+                  <p className="text-sm font-medium text-red-400">This will permanently delete all company data. Are you sure?</p>
+                  <div className="flex gap-2">
+                    <button onClick={() => setDeleteConfirm(false)} className="flex-1 rounded-lg bg-zinc-800 py-2 text-sm text-zinc-300">Cancel</button>
+                    <button onClick={deleteCompany} disabled={actioning} className="flex-1 rounded-lg bg-red-700 py-2 text-sm font-semibold text-white hover:bg-red-600 disabled:opacity-50">Delete</button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {company.subscription && (
+            <div className="panel p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-base font-semibold">Subscription overrides</h2>
+                <button onClick={() => setShowSubActions((v) => !v)} className="text-xs text-zinc-400 hover:text-zinc-200">
+                  {showSubActions ? 'Hide' : 'Show'}
+                </button>
+              </div>
+              {showSubActions && (
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-xs font-medium uppercase tracking-wide text-zinc-500">Reason (required)</label>
+                    <input
+                      className="mt-1 w-full rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-blue-700"
+                      placeholder="e.g. Customer requested extension…"
+                      value={subOverrideReason}
+                      onChange={(e) => setSubOverrideReason(e.target.value)}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <button onClick={() => doSubAction('reactivate')} disabled={!!subActioning} className="rounded-lg bg-emerald-950/50 py-2 text-xs font-semibold text-emerald-400 hover:bg-emerald-900/50 disabled:opacity-50">
+                      {subActioning === 'reactivate' ? '…' : 'Reactivate'}
+                    </button>
+                    <button onClick={() => doSubAction('extend-grace-period')} disabled={!!subActioning} className="rounded-lg bg-sky-950/50 py-2 text-xs font-semibold text-sky-400 hover:bg-sky-900/50 disabled:opacity-50">
+                      {subActioning === 'extend-grace-period' ? '…' : '+7d grace'}
+                    </button>
+                    <button onClick={() => doSubAction('suspend')} disabled={!!subActioning} className="rounded-lg bg-orange-950/50 py-2 text-xs font-semibold text-orange-400 hover:bg-orange-900/50 disabled:opacity-50">
+                      {subActioning === 'suspend' ? '…' : 'Suspend'}
+                    </button>
+                    <button onClick={() => doSubAction('cancel')} disabled={!!subActioning} className="rounded-lg bg-red-950/50 py-2 text-xs font-semibold text-red-400 hover:bg-red-900/50 disabled:opacity-50">
+                      {subActioning === 'cancel' ? '…' : 'Cancel'}
+                    </button>
+                  </div>
+                  <p className="text-xs text-zinc-600">Retry count: {company.subscription.retryCount ?? 0} / 5</p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-4">
+          {subEvents.length > 0 && (
+            <div className="panel overflow-hidden">
+              <div className="border-b border-zinc-800 px-6 py-4">
+                <h2 className="text-sm font-semibold">Subscription timeline</h2>
+              </div>
+              <div className="divide-y divide-zinc-800/60 max-h-72 overflow-y-auto">
+                {subEvents.map((ev) => (
+                  <div key={ev.id} className="px-6 py-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium text-sky-400">{ev.eventType}</span>
+                      <span className="text-xs text-zinc-600">{new Date(ev.occurredAt).toLocaleString()}</span>
+                    </div>
+                    <p className="mt-0.5 text-xs text-zinc-500">source: {ev.source}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {auditLogs.length > 0 && (
+            <div className="panel overflow-hidden">
+              <div className="border-b border-zinc-800 px-6 py-4">
+                <h2 className="text-sm font-semibold">Recent audit events</h2>
+              </div>
+              <div className="divide-y divide-zinc-800/60">
+                {auditLogs.map((log) => (
+                  <div key={log.id} className="flex items-center justify-between px-6 py-3 text-sm">
+                    <div>
+                      <span className="font-medium text-zinc-200">{log.action}</span>
+                      <span className="ml-2 text-zinc-500">{log.resource}</span>
+                      {log.adminUser?.email ? <span className="ml-2 text-zinc-600">{log.adminUser.email}</span> : null}
+                    </div>
+                    <span className="text-xs text-zinc-600">{new Date(log.createdAt).toLocaleString()}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/companies/page.tsx b/admin/src/app/dashboard/companies/page.tsx
new file mode 100644
index 0000000..5b4114f
--- /dev/null
+++ b/admin/src/app/dashboard/companies/page.tsx
@@ -0,0 +1,213 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useAdminI18n } from '@/components/I18nProvider'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface Company {
+  id: string
+  name: string
+  slug: string
+  status: string
+  email: string
+  contractSettings: { legalName: string | null } | null
+  subscription: { plan: string; status: string } | null
+  _count: { employees: number; vehicles: number }
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'text-emerald-400 bg-emerald-900/30',
+  TRIALING: 'text-sky-400 bg-sky-900/30',
+  SUSPENDED: 'text-red-400 bg-red-900/30',
+  PENDING: 'text-orange-400 bg-orange-900/30',
+  CANCELLED: 'text-zinc-400 bg-zinc-800',
+}
+
+export default function AdminCompaniesPage() {
+  const { language, dict } = useAdminI18n()
+  const copy = {
+    en: {
+      title: 'Companies',
+      search: 'Search by name or slug…',
+      loading: 'Loading…',
+      empty: 'No companies found',
+      company: 'Company',
+      legalName: 'Legal name',
+      slug: 'Slug',
+      status: 'Status',
+      plan: 'Plan',
+      fleet: 'Fleet',
+      vehicles: 'vehicles',
+      view: 'View',
+      suspend: 'Suspend',
+      reactivate: 'Reactivate',
+    },
+    fr: {
+      title: 'Entreprises',
+      search: 'Rechercher par nom ou slug…',
+      loading: 'Chargement…',
+      empty: 'Aucune entreprise trouvée',
+      company: 'Entreprise',
+      legalName: 'Raison sociale',
+      slug: 'Slug',
+      status: 'Statut',
+      plan: 'Plan',
+      fleet: 'Flotte',
+      vehicles: 'véhicules',
+      view: 'Voir',
+      suspend: 'Suspendre',
+      reactivate: 'Réactiver',
+    },
+    ar: {
+      title: 'الشركات',
+      search: 'ابحث بالاسم أو بالمُعرّف المختصر…',
+      loading: 'جارٍ التحميل…',
+      empty: 'لم يتم العثور على شركات',
+      company: 'الشركة',
+      legalName: 'الاسم القانوني',
+      slug: 'Slug',
+      status: 'الحالة',
+      plan: 'الخطة',
+      fleet: 'الأسطول',
+      vehicles: 'مركبة',
+      view: 'عرض',
+      suspend: 'تعليق',
+      reactivate: 'إعادة التفعيل',
+    },
+  }[language]
+  const [companies, setCompanies] = useState<Company[]>([])
+  const [filtered, setFiltered] = useState<Company[]>([])
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [actioning, setActioning] = useState<string | null>(null)
+
+  async function fetchCompanies() {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/companies`, {
+        credentials: 'include',
+        cache: 'no-store',
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Failed to fetch')
+      const list = Array.isArray(json.data) ? json.data : (json.data?.data ?? [])
+      setCompanies(list)
+      setFiltered(list)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchCompanies() }, [])
+
+  useEffect(() => {
+    const q = search.toLowerCase()
+    setFiltered(companies.filter((c) => c.name.toLowerCase().includes(q) || c.slug.includes(q) || c.email.toLowerCase().includes(q)))
+  }, [search, companies])
+
+  async function changeStatus(id: string, status: string) {
+    setActioning(id)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/companies/${id}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ status }),
+      })
+      if (!res.ok) throw new Error('Action failed')
+      await fetchCompanies()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setActioning(null)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div>
+          <p className="rdg-page-kicker">{dict.platform}</p>
+          <h1 className="mt-1 text-3xl font-black">{copy.title}</h1>
+        </div>
+        <input
+          className="w-64 px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          placeholder={copy.search}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.company}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.slug}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.status}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.plan}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.fleet}</th>
+                <th className="px-6 py-3" />
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">{copy.loading}</td></tr>
+              ) : filtered.length === 0 ? (
+                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">{copy.empty}</td></tr>
+              ) : filtered.map((c) => (
+                <tr key={c.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="px-6 py-4">
+                    <p className="font-medium text-zinc-100">{c.name}</p>
+                    {c.contractSettings?.legalName && c.contractSettings.legalName !== c.name ? (
+                      <p className="text-xs text-zinc-400">{copy.legalName}: {c.contractSettings.legalName}</p>
+                    ) : null}
+                    <p className="text-xs text-zinc-500">{c.email}</p>
+                  </td>
+                  <td className="px-6 py-4 text-zinc-400 font-mono text-xs">{c.slug}</td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[c.status] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {c.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-zinc-400">{c.subscription?.plan ?? '—'}</td>
+                  <td className="px-6 py-4 text-zinc-400">{c._count?.vehicles ?? 0} {copy.vehicles}</td>
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-2 justify-end">
+                      <Link href={`/dashboard/companies/${c.id}`} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-xs font-medium text-zinc-200 transition-colors">
+                        {copy.view}
+                      </Link>
+                      {c.status === 'ACTIVE' || c.status === 'TRIALING' ? (
+                        <button
+                          onClick={() => changeStatus(c.id, 'SUSPENDED')}
+                          disabled={actioning === c.id}
+                          className="px-3 py-1.5 rounded-lg bg-red-950/50 hover:bg-red-900/50 text-xs font-medium text-red-400 transition-colors disabled:opacity-50"
+                        >
+                          {copy.suspend}
+                        </button>
+                      ) : c.status === 'SUSPENDED' ? (
+                        <button
+                          onClick={() => changeStatus(c.id, 'ACTIVE')}
+                          disabled={actioning === c.id}
+                          className="px-3 py-1.5 rounded-lg bg-emerald-950/50 hover:bg-emerald-900/50 text-xs font-medium text-emerald-400 transition-colors disabled:opacity-50"
+                        >
+                          {copy.reactivate}
+                        </button>
+                      ) : null}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/containers/page.tsx b/admin/src/app/dashboard/containers/page.tsx
new file mode 100644
index 0000000..e9c7a09
--- /dev/null
+++ b/admin/src/app/dashboard/containers/page.tsx
@@ -0,0 +1,435 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+type ContainerStatus = 'PENDING' | 'CREATING' | 'RUNNING' | 'STOPPED' | 'RESTARTING' | 'REMOVING' | 'ERROR'
+
+interface CompanyContainer {
+  id: string
+  companyId: string
+  dockerId: string | null
+  containerName: string
+  status: ContainerStatus
+  port: number
+  image: string
+  errorMessage: string | null
+  createdAt: string
+  updatedAt: string
+  company: {
+    id: string
+    name: string
+    slug: string
+    status: string
+  }
+}
+
+function authHeaders() {
+  return { 'Content-Type': 'application/json' }
+}
+
+function StatusBadge({ status }: { status: ContainerStatus }) {
+  const map: Record<ContainerStatus, { label: string; className: string }> = {
+    PENDING:    { label: 'Pending',    className: 'bg-zinc-700 text-zinc-300' },
+    CREATING:   { label: 'Creating…',  className: 'bg-blue-900 text-blue-300 animate-pulse' },
+    RUNNING:    { label: 'Running',    className: 'bg-emerald-900 text-emerald-300' },
+    STOPPED:    { label: 'Stopped',    className: 'bg-orange-900 text-orange-300' },
+    RESTARTING: { label: 'Restarting…',className: 'bg-orange-900 text-orange-300 animate-pulse' },
+    REMOVING:   { label: 'Removing…',  className: 'bg-red-900 text-red-300 animate-pulse' },
+    ERROR:      { label: 'Error',      className: 'bg-red-950 text-red-400' },
+  }
+  const { label, className } = map[status] ?? map.ERROR
+  return (
+    <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${className}`}>
+      <span className={`h-1.5 w-1.5 rounded-full ${status === 'RUNNING' ? 'bg-emerald-400' : 'bg-current opacity-60'}`} />
+      {label}
+    </span>
+  )
+}
+
+function LogsModal({ companyId, companyName, onClose }: { companyId: string; companyName: string; onClose: () => void }) {
+  const [logs, setLogs] = useState<string>('')
+  const [loading, setLoading] = useState(true)
+  const [tail, setTail] = useState(150)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  const fetchLogs = useCallback(async (lines: number) => {
+    setLoading(true)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/containers/${companyId}/logs?tail=${lines}`, { headers: authHeaders(), credentials: 'include' })
+      const json = await res.json()
+      setLogs(json.data?.logs ?? '')
+    } catch {
+      setLogs('Failed to fetch logs.')
+    } finally {
+      setLoading(false)
+    }
+  }, [companyId])
+
+  useEffect(() => { fetchLogs(tail) }, [fetchLogs, tail])
+  useEffect(() => { bottomRef.current?.scrollIntoView() }, [logs])
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/70 p-4" onClick={onClose}>
+      <div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-2xl border border-zinc-700 bg-zinc-900 shadow-2xl" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between border-b border-zinc-700 px-5 py-4">
+          <div>
+            <p className="text-sm font-semibold text-zinc-100">Container Logs</p>
+            <p className="text-xs text-zinc-400">{companyName}</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <select
+              value={tail}
+              onChange={(e) => setTail(Number(e.target.value))}
+              className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-200 focus:outline-none"
+            >
+              <option value={50}>Last 50 lines</option>
+              <option value={150}>Last 150 lines</option>
+              <option value={500}>Last 500 lines</option>
+              <option value={1000}>Last 1000 lines</option>
+            </select>
+            <button onClick={() => fetchLogs(tail)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-700">
+              Refresh
+            </button>
+            <button onClick={onClose} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-700">
+              Close
+            </button>
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <p className="text-xs text-zinc-500">Loading…</p>
+          ) : (
+            <pre className="whitespace-pre-wrap break-all font-mono text-xs leading-relaxed text-zinc-300">
+              {logs || 'No logs available.'}
+            </pre>
+          )}
+          <div ref={bottomRef} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type ProvisionResult = { companyId: string; name: string; status: 'created' | 'error'; error?: string }
+
+export default function ContainersPage() {
+  const [containers, setContainers] = useState<CompanyContainer[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState<Record<string, boolean>>({})
+  const [logsFor, setLogsFor] = useState<{ companyId: string; companyName: string } | null>(null)
+  const [search, setSearch] = useState('')
+  const [provisioning, setProvisioning] = useState(false)
+  const [provisionResults, setProvisionResults] = useState<ProvisionResult[] | null>(null)
+
+  const fetchContainers = useCallback(async () => {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/containers`, { headers: authHeaders(), credentials: 'include' })
+      const json = await res.json().catch(() => null)
+      if (!res.ok) {
+        throw new Error(json?.message ?? 'Failed to load containers.')
+      }
+      setContainers(json.data ?? [])
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load containers.')
+      /* silent — keep old data */
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchContainers()
+    const id = setInterval(fetchContainers, 8000)
+    return () => clearInterval(id)
+  }, [fetchContainers])
+
+  async function provisionAll() {
+    setProvisioning(true)
+    setProvisionResults(null)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/containers/provision-all`, { method: 'POST', headers: authHeaders(), credentials: 'include' })
+      const json = await res.json().catch(() => null)
+      if (!res.ok) throw new Error(json?.message ?? 'Provisioning failed.')
+      setProvisionResults(json.data?.results ?? [])
+      setError(null)
+      await fetchContainers()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Provisioning failed.')
+    } finally {
+      setProvisioning(false)
+    }
+  }
+
+  async function act(companyId: string, action: 'start' | 'stop' | 'restart' | 'deploy' | 'remove') {
+    setBusy((b) => ({ ...b, [companyId]: true }))
+    try {
+      const method = action === 'remove' ? 'DELETE' : 'POST'
+      const url =
+        action === 'remove'
+          ? `${ADMIN_API_BASE}/admin/containers/${companyId}`
+          : `${ADMIN_API_BASE}/admin/containers/${companyId}/${action}`
+      const res = await fetch(url, { method, headers: authHeaders(), credentials: 'include' })
+      const json = await res.json().catch(() => null)
+      if (!res.ok) {
+        throw new Error(json?.message ?? `Failed to ${action} container.`)
+      }
+      setError(null)
+      await fetchContainers()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to ${action} container.`)
+    } finally {
+      setBusy((b) => ({ ...b, [companyId]: false }))
+    }
+  }
+
+  const filtered = containers.filter(
+    (c) =>
+      c.company.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.containerName.toLowerCase().includes(search.toLowerCase()) ||
+      c.company.slug.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  const stats = {
+    running: containers.filter((c) => c.status === 'RUNNING').length,
+    stopped: containers.filter((c) => c.status === 'STOPPED').length,
+    error: containers.filter((c) => c.status === 'ERROR').length,
+    total: containers.length,
+  }
+
+  return (
+    <div className="space-y-6">
+      {logsFor && (
+        <LogsModal
+          companyId={logsFor.companyId}
+          companyName={logsFor.companyName}
+          onClose={() => setLogsFor(null)}
+        />
+      )}
+
+      <div className="rdg-page-heading mb-8 flex items-start justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-zinc-100">Containers</h1>
+          <p className="mt-1 text-sm text-zinc-400">Manage isolated Docker Compose services for each company workspace.</p>
+        </div>
+        <button
+          onClick={provisionAll}
+          disabled={provisioning}
+          className="flex items-center gap-2 rounded-xl bg-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 transition-colors"
+        >
+          {provisioning ? (
+            <>
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+              Provisioning…
+            </>
+          ) : (
+            <>
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+              </svg>
+              Provision All Accounts
+            </>
+          )}
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-6 rounded-xl border border-red-900 bg-red-950/70 px-4 py-3 text-sm text-red-200">
+          {error}
+        </div>
+      )}
+
+      {provisionResults !== null && (
+        <div className="panel mb-6 p-4">
+          <div className="mb-3 flex items-center justify-between">
+            <p className="text-sm font-medium text-zinc-200">
+              Provisioning complete —{' '}
+              <span className="text-emerald-400">{provisionResults.filter((r) => r.status === 'created').length} created</span>
+              {provisionResults.some((r) => r.status === 'error') && (
+                <>, <span className="text-red-400">{provisionResults.filter((r) => r.status === 'error').length} failed</span></>
+              )}
+            </p>
+            <button onClick={() => setProvisionResults(null)} className="text-xs text-zinc-500 hover:text-zinc-300">Dismiss</button>
+          </div>
+          <div className="space-y-1.5 max-h-48 overflow-y-auto">
+            {provisionResults.map((r) => (
+              <div key={r.companyId} className="flex items-center gap-3 rounded-lg px-3 py-2 bg-zinc-800/60">
+                <span className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${r.status === 'created' ? 'bg-emerald-400' : 'bg-red-400'}`} />
+                <span className="text-sm text-zinc-300 flex-1">{r.name}</span>
+                {r.status === 'error' && <span className="text-xs text-red-400 truncate max-w-xs">{r.error}</span>}
+                {r.status === 'created' && <span className="text-xs text-emerald-500">Service created</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Stats */}
+      <div className="mb-6 grid grid-cols-4 gap-4">
+        {[
+          { label: 'Total', value: stats.total, color: 'text-zinc-100' },
+          { label: 'Running', value: stats.running, color: 'text-emerald-400' },
+          { label: 'Stopped', value: stats.stopped, color: 'text-orange-400' },
+          { label: 'Error', value: stats.error, color: 'text-red-400' },
+        ].map((s) => (
+          <div key={s.label} className="panel p-4">
+            <p className="text-xs text-zinc-500">{s.label}</p>
+            <p className={`mt-1 text-2xl font-bold ${s.color}`}>{s.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Search */}
+      <div className="mb-4">
+        <input
+          type="text"
+          placeholder="Search by company name or container…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full max-w-sm rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
+        />
+      </div>
+
+      {/* Table */}
+      <div className="panel overflow-hidden">
+        {loading ? (
+          <div className="flex items-center justify-center py-16">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-16 text-center text-sm text-zinc-500">
+            {search ? 'No containers match your search.' : 'No containers yet. They are created automatically on company signup.'}
+          </div>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800 text-left text-xs text-zinc-500">
+                <th className="px-5 py-3 font-medium">Company</th>
+                <th className="px-5 py-3 font-medium">Container</th>
+                <th className="px-5 py-3 font-medium">Status</th>
+                <th className="px-5 py-3 font-medium">Port</th>
+                <th className="px-5 py-3 font-medium">Image</th>
+                <th className="px-5 py-3 font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800">
+              {filtered.map((c) => {
+                const isBusy = busy[c.companyId] ?? false
+                const isRunning = c.status === 'RUNNING'
+                const isStopped = c.status === 'STOPPED' || c.status === 'ERROR'
+                const isTransitioning = ['CREATING', 'RESTARTING', 'REMOVING'].includes(c.status)
+
+                return (
+                  <tr key={c.id} className="hover:bg-zinc-800/40">
+                    <td className="px-5 py-4">
+                      <p className="font-medium text-zinc-100">{c.company.name}</p>
+                      <p className="text-xs text-zinc-500">{c.company.slug}</p>
+                      {c.errorMessage && (
+                        <p className="mt-1 text-xs text-red-400" title={c.errorMessage}>
+                          {c.errorMessage.slice(0, 60)}{c.errorMessage.length > 60 ? '…' : ''}
+                        </p>
+                      )}
+                    </td>
+                    <td className="px-5 py-4 font-mono text-xs text-zinc-400">
+                      {c.containerName}
+                      {c.dockerId && (
+                        <p className="mt-0.5 text-zinc-600">{c.dockerId.slice(0, 12)}</p>
+                      )}
+                    </td>
+                    <td className="px-5 py-4">
+                      <StatusBadge status={c.status} />
+                    </td>
+                    <td className="px-5 py-4 font-mono text-xs text-zinc-400">:{c.port}</td>
+                    <td className="px-5 py-4 font-mono text-xs text-zinc-500">{c.image}</td>
+                    <td className="px-5 py-4">
+                      <div className="flex items-center gap-1.5">
+                        {isStopped && (
+                          <ActionButton
+                            label="Start"
+                            color="emerald"
+                            disabled={isBusy || isTransitioning}
+                            onClick={() => act(c.companyId, 'start')}
+                          />
+                        )}
+                        {isRunning && (
+                          <ActionButton
+                            label="Stop"
+                            color="yellow"
+                            disabled={isBusy || isTransitioning}
+                            onClick={() => act(c.companyId, 'stop')}
+                          />
+                        )}
+                        {(isRunning || isStopped) && (
+                          <ActionButton
+                            label="Restart"
+                            color="blue"
+                            disabled={isBusy || isTransitioning}
+                            onClick={() => act(c.companyId, 'restart')}
+                          />
+                        )}
+                        <ActionButton
+                          label="Redeploy"
+                          color="purple"
+                          disabled={isBusy || isTransitioning}
+                          onClick={() => act(c.companyId, 'deploy')}
+                        />
+                        <ActionButton
+                          label="Logs"
+                          color="zinc"
+                          disabled={isBusy || !c.dockerId}
+                          onClick={() => setLogsFor({ companyId: c.companyId, companyName: c.company.name })}
+                        />
+                        <ActionButton
+                          label="Remove"
+                          color="red"
+                          disabled={isBusy || isTransitioning}
+                          onClick={() => {
+                            if (confirm(`Remove container for ${c.company.name}? This cannot be undone.`)) {
+                              act(c.companyId, 'remove')
+                            }
+                          }}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ActionButton({
+  label,
+  color,
+  disabled,
+  onClick,
+}: {
+  label: string
+  color: 'emerald' | 'yellow' | 'blue' | 'purple' | 'zinc' | 'red'
+  disabled: boolean
+  onClick: () => void
+}) {
+  const colorMap: Record<string, string> = {
+    emerald: 'border-emerald-800 text-emerald-400 hover:bg-emerald-900/40',
+    yellow:  'border-orange-800 text-orange-400 hover:bg-orange-900/40',
+    blue:    'border-blue-800 text-blue-400 hover:bg-blue-900/40',
+    purple:  'border-purple-800 text-purple-400 hover:bg-purple-900/40',
+    zinc:    'border-zinc-700 text-zinc-400 hover:bg-zinc-700/40',
+    red:     'border-red-900 text-red-400 hover:bg-red-900/30',
+  }
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${colorMap[color]}`}
+    >
+      {label}
+    </button>
+  )
+}
diff --git a/admin/src/app/dashboard/layout.tsx b/admin/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..123c3ed
--- /dev/null
+++ b/admin/src/app/dashboard/layout.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useMemo, useState } from 'react'
+import {
+  AdminLanguageSwitcher,
+  AdminThemeSwitcher,
+  useAdminI18n,
+} from '@/components/I18nProvider'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+import { ADMIN_API_BASE } from '@/lib/api'
+import { AdminSessionProvider, type AdminSessionUser } from './AdminSessionContext'
+
+function buildUnifiedLoginUrl(nextPath: string) {
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
+  const params = new URLSearchParams({
+    portal: 'admin',
+    next: nextPath || '/dashboard',
+  })
+  return `${dashboardUrl}/sign-in?${params.toString()}`
+}
+
+const navLinks = [
+  { href: '/dashboard', key: 'overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
+  { href: '/dashboard/companies', key: 'companies', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
+  { href: '/dashboard/site-config', key: 'siteConfig', icon: 'M4.5 12a7.5 7.5 0 1015 0 7.5 7.5 0 00-15 0zm7.5-4.5v4.5l3 3' },
+  { href: '/dashboard/renters', key: 'renters', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
+  { href: '/dashboard/audit-logs', key: 'auditLogs', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
+  { href: '/dashboard/notifications', key: 'notifications', icon: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9' },
+  { href: '/dashboard/menu-management', key: 'menuManagement', icon: 'M4 6h16M4 12h16M4 18h10' },
+  { href: '/dashboard/admin-users', key: 'adminUsers', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
+  { href: '/dashboard/billing', key: 'billing', icon: 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z' },
+  { href: '/dashboard/pricing', key: 'pricing', icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
+] as const
+
+function adminInitials(email: string | undefined) {
+  if (!email) return 'A'
+  return email.split('@')[0].split(/[._-]+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join('') || 'A'
+}
+
+export default function AdminDashboardLayout({ children }: { children: React.ReactNode }) {
+  const { dict, language } = useAdminI18n()
+  const pathname = usePathname()
+  const [ready, setReady] = useState(false)
+  const [admin, setAdmin] = useState<AdminSessionUser | null>(null)
+  const [navigationOpen, setNavigationOpen] = useState(false)
+  const isRtl = language === 'ar'
+
+  const activeNavigation = useMemo(
+    () => [...navLinks]
+      .sort((a, b) => b.href.length - a.href.length)
+      .find((link) => pathname === link.href || (link.href !== '/dashboard' && pathname.startsWith(link.href))),
+    [pathname],
+  )
+  const pageTitle = activeNavigation ? dict.nav[activeNavigation.key] : dict.overview
+
+  useEffect(() => {
+    let cancelled = false
+
+    fetch(`${ADMIN_API_BASE}/admin/auth/me`, {
+      credentials: 'include',
+    })
+      .then(async (response) => {
+        if (cancelled) return
+        if (response.ok) {
+          const json = await response.json().catch(() => null)
+          const resolvedAdmin = (json?.data ?? json) as AdminSessionUser | null
+          if (!resolvedAdmin?.id || !resolvedAdmin?.email || !resolvedAdmin?.role) {
+            window.location.replace(buildUnifiedLoginUrl(pathname))
+            return
+          }
+          setAdmin(resolvedAdmin)
+          setReady(true)
+        } else {
+          window.location.replace(buildUnifiedLoginUrl(pathname))
+        }
+      })
+      .catch(() => {
+        if (!cancelled) window.location.replace(buildUnifiedLoginUrl(pathname))
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [pathname])
+
+  useEffect(() => {
+    setNavigationOpen(false)
+  }, [pathname])
+
+  function handleLogout() {
+    void fetch('/admin/api/v1/admin/auth/logout', { method: 'POST', credentials: 'include' })
+    window.location.href = buildUnifiedLoginUrl('/dashboard')
+  }
+
+  if (!ready) {
+    return (
+      <div className="rdg-app-shell flex min-h-screen items-center justify-center">
+        <div
+          className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--rdg-action-primary)] border-t-[var(--rdg-action-conversion)]"
+          aria-label={dict.loading}
+        />
+      </div>
+    )
+  }
+
+  const navigation = (
+    <>
+      <Link
+        href="/dashboard"
+        className="rdg-sidebar-brand flex min-h-[76px] items-center gap-3 border-b border-[var(--rdg-border)] px-5"
+      >
+        <span className="rdg-brand-mark text-xs font-black">RDG</span>
+        <span className="min-w-0">
+          <span className="block text-[0.68rem] font-bold uppercase tracking-[0.2em] text-[var(--rdg-action-conversion)]">
+            {dict.admin}
+          </span>
+          <span className="mt-0.5 block truncate text-sm font-extrabold text-[var(--rdg-text-primary)]">
+            RentalDriveGo
+          </span>
+        </span>
+      </Link>
+
+      <nav className="rdg-sidebar-nav flex-1 space-y-1 overflow-y-auto px-3 py-4" aria-label={dict.admin}>
+        {navLinks.map((link) => {
+          const active = pathname === link.href || (link.href !== '/dashboard' && pathname.startsWith(link.href))
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              aria-current={active ? 'page' : undefined}
+              data-active={active ? 'true' : 'false'}
+              className="rdg-nav-item flex items-center gap-3 px-3 py-2.5 text-sm font-semibold"
+            >
+              <svg
+                className="h-4 w-4 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.7}
+                aria-hidden="true"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d={link.icon} />
+              </svg>
+              <span>{dict.nav[link.key]}</span>
+            </Link>
+          )
+        })}
+      </nav>
+
+      <div className="rdg-sidebar-footer border-t border-[var(--rdg-border)] p-3">
+        <div className="rdg-user-card mb-2 p-3">
+          <div className="flex items-center gap-3">
+            <span className="rdg-avatar text-xs">{adminInitials(admin?.email)}</span>
+            <span className="min-w-0">
+              <span className="block truncate text-sm font-bold text-[var(--rdg-text-primary)]">{admin?.email}</span>
+              <span className="block truncate text-xs text-[var(--rdg-text-secondary)]">{admin?.role.replaceAll('_', ' ')}</span>
+            </span>
+          </div>
+        </div>
+        <button
+          onClick={handleLogout}
+          className="rdg-nav-item flex w-full items-center gap-3 px-3 py-2.5 text-sm font-semibold hover:!border-red-200 hover:!bg-red-50 hover:!text-red-700 dark:hover:!border-red-900 dark:hover:!bg-red-950/30 dark:hover:!text-red-200"
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.7} aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          {dict.logout}
+        </button>
+        <div className="mt-3 flex items-center gap-2 border-t border-[var(--rdg-border)] pt-3">
+          <AdminLanguageSwitcher />
+          <AdminThemeSwitcher />
+        </div>
+      </div>
+    </>
+  )
+
+  return (
+    <AdminSessionProvider admin={admin as AdminSessionUser}>
+      <div className="rdg-app-shell flex min-h-screen text-[var(--rdg-text-primary)]">
+        {navigationOpen ? (
+          <button
+            type="button"
+            className="fixed inset-0 z-40 bg-[var(--rdg-overlay)] backdrop-blur-sm lg:hidden"
+            onClick={() => setNavigationOpen(false)}
+            aria-label="Close navigation"
+          />
+        ) : null}
+
+        <aside
+          className={`rdg-sidebar fixed inset-y-0 z-50 flex w-[var(--rdg-sidebar-size)] flex-col border-e border-[var(--rdg-border)] transition-transform duration-200 lg:static lg:z-auto lg:translate-x-0 [inset-inline-start:0] ${
+            navigationOpen ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full'
+          }`}
+        >
+          <button
+            type="button"
+            className="absolute top-4 inline-flex h-11 w-11 items-center justify-center rounded-[var(--rdg-radius-sm)] border border-[var(--rdg-border)] bg-[var(--rdg-surface-primary)] text-[var(--rdg-text-primary)] lg:hidden [inset-inline-end:1rem]"
+            onClick={() => setNavigationOpen(false)}
+            aria-label="Close navigation"
+          >
+            <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+              <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
+          {navigation}
+        </aside>
+
+        <div className="rdg-workspace flex min-h-screen min-w-0 flex-1 flex-col">
+          <header className="rdg-topbar px-4 sm:px-6">
+            <div className="flex min-w-0 items-center gap-3">
+              <button
+                type="button"
+                className="inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[var(--rdg-radius-sm)] border border-[var(--rdg-border)] bg-[var(--rdg-surface-primary)] text-[var(--rdg-text-primary)] lg:hidden"
+                onClick={() => setNavigationOpen(true)}
+                aria-label="Open navigation"
+                aria-expanded={navigationOpen}
+              >
+                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+                  <path strokeLinecap="round" d="M4 7h16M4 12h16M4 17h16" />
+                </svg>
+              </button>
+              <div className="min-w-0">
+                <p className="rdg-topbar-kicker hidden sm:block">{dict.platform}</p>
+                <h1 className="rdg-topbar-title truncate">{pageTitle}</h1>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="rdg-system-status hidden md:inline-flex">Operational</span>
+              <span className="rdg-avatar text-xs">{adminInitials(admin?.email)}</span>
+            </div>
+          </header>
+
+          <main className="rdg-app-main flex-1 overflow-y-auto">
+            <div className="rdg-app-content">{children}</div>
+          </main>
+        </div>
+      </div>
+    </AdminSessionProvider>
+  )
+}
diff --git a/admin/src/app/dashboard/menu-management/page.tsx b/admin/src/app/dashboard/menu-management/page.tsx
new file mode 100644
index 0000000..9c876f8
--- /dev/null
+++ b/admin/src/app/dashboard/menu-management/page.tsx
@@ -0,0 +1,694 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
+type Plan = 'STARTER' | 'GROWTH' | 'PRO'
+type MenuItemType = 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
+
+type CompanyOption = {
+  id: string
+  name: string
+  subscription?: { plan?: string | null } | null
+  status: string
+}
+
+type MenuItem = {
+  id: string
+  systemKey: string | null
+  label: string
+  itemType: MenuItemType
+  routeOrUrl: string | null
+  icon: string | null
+  parentId: string | null
+  displayOrder: number
+  openInNewTab: boolean
+  isRequired: boolean
+  isActive: boolean
+  parent?: { id: string; label: string } | null
+  roleVisibilities: Array<{ role: EmployeeRole }>
+  subscriptionAssignments: Array<{ plan: Plan; displayOrder: number; isActive: boolean }>
+  companyAssignments: Array<{
+    companyId: string
+    displayOrder: number
+    isActive: boolean
+    company: { id: string; name: string }
+  }>
+}
+
+type AuditLog = {
+  id: string
+  action: string
+  resource: string
+  resourceId: string | null
+  createdAt: string
+  adminUser: { firstName: string; lastName: string; email: string } | null
+}
+
+type PreviewItem = {
+  id: string
+  label: string
+  systemKey: string | null
+  itemType: MenuItemType
+  routeOrUrl: string | null
+  displayOrder: number
+  visible: boolean
+  source: 'subscription' | 'company' | 'none'
+  reasons: string[]
+}
+
+type PreviewResponse = {
+  company: { id: string; name: string; status: string; subscription: { plan: Plan; status: string } | null }
+  role: EmployeeRole
+  subscriptionPlan: Plan | null
+  items: PreviewItem[]
+}
+
+type FormState = {
+  label: string
+  systemKey: string
+  itemType: MenuItemType
+  routeOrUrl: string
+  icon: string
+  parentId: string
+  displayOrder: string
+  openInNewTab: boolean
+  isRequired: boolean
+  isActive: boolean
+  roles: EmployeeRole[]
+  plans: Plan[]
+  companyIds: string[]
+}
+
+const ROLES: EmployeeRole[] = ['OWNER', 'MANAGER', 'AGENT']
+const PLANS: Plan[] = ['STARTER', 'GROWTH', 'PRO']
+const ITEM_TYPES: MenuItemType[] = ['INTERNAL_PAGE', 'EXTERNAL_LINK', 'PARENT_MENU', 'SECTION_LABEL', 'DIVIDER']
+
+const INPUT = 'field mt-1'
+const LABEL = 'text-xs font-medium uppercase tracking-wider text-zinc-500'
+
+async function api<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${ADMIN_API_BASE}${path}`, {
+    ...options,
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options?.headers ?? {}),
+    },
+  })
+
+  const json = await res.json()
+  if (!res.ok) throw new Error(json?.message ?? 'Request failed')
+  return (json?.data ?? json) as T
+}
+
+function emptyForm(): FormState {
+  return {
+    label: '',
+    systemKey: '',
+    itemType: 'INTERNAL_PAGE',
+    routeOrUrl: '',
+    icon: '',
+    parentId: '',
+    displayOrder: '0',
+    openInNewTab: false,
+    isRequired: false,
+    isActive: true,
+    roles: ['OWNER', 'MANAGER', 'AGENT'],
+    plans: ['STARTER', 'GROWTH', 'PRO'],
+    companyIds: [],
+  }
+}
+
+function formFromItem(item: MenuItem): FormState {
+  return {
+    label: item.label,
+    systemKey: item.systemKey ?? '',
+    itemType: item.itemType,
+    routeOrUrl: item.routeOrUrl ?? '',
+    icon: item.icon ?? '',
+    parentId: item.parentId ?? '',
+    displayOrder: String(item.displayOrder),
+    openInNewTab: item.openInNewTab,
+    isRequired: item.isRequired,
+    isActive: item.isActive,
+    roles: item.roleVisibilities.map((entry) => entry.role),
+    plans: item.subscriptionAssignments.map((entry) => entry.plan),
+    companyIds: item.companyAssignments.map((entry) => entry.companyId),
+  }
+}
+
+function chip(text: string, tone = 'default') {
+  const toneClass =
+    tone === 'success'
+      ? 'bg-emerald-950/40 text-emerald-400'
+      : tone === 'warn'
+        ? 'bg-orange-950/40 text-orange-400'
+        : 'bg-zinc-800 text-zinc-300'
+
+  return (
+    <span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-medium ${toneClass}`}>
+      {text}
+    </span>
+  )
+}
+
+export default function MenuManagementPage() {
+  const [items, setItems] = useState<MenuItem[]>([])
+  const [companies, setCompanies] = useState<CompanyOption[]>([])
+  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
+  const [preview, setPreview] = useState<PreviewResponse | null>(null)
+  const [previewCompanyId, setPreviewCompanyId] = useState('')
+  const [previewRole, setPreviewRole] = useState<EmployeeRole>('OWNER')
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [form, setForm] = useState<FormState>(emptyForm())
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [previewing, setPreviewing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const parentOptions = useMemo(
+    () => items.filter((item) => item.itemType === 'PARENT_MENU' && item.id !== editingId),
+    [items, editingId],
+  )
+
+  useEffect(() => {
+    async function load() {
+      try {
+        setLoading(true)
+        setError(null)
+        const [menuItems, companiesPage, auditPage] = await Promise.all([
+          api<MenuItem[]>('/admin/menu-items'),
+          api<{ data: CompanyOption[] }>('/admin/companies?page=1&pageSize=100'),
+          api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
+        ])
+        setItems(menuItems)
+        setCompanies(companiesPage.data)
+        setAuditLogs(auditPage.data)
+        if (!previewCompanyId && companiesPage.data[0]?.id) {
+          setPreviewCompanyId(companiesPage.data[0].id)
+        }
+      } catch (err: any) {
+        setError(err.message ?? 'Failed to load menu management data.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    load()
+  }, [])
+
+  function updateForm<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }))
+  }
+
+  function toggleArrayValue<K extends 'roles' | 'plans' | 'companyIds'>(key: K, value: FormState[K][number]) {
+    setForm((prev) => {
+      const values = prev[key] as string[]
+      return {
+        ...prev,
+        [key]: values.includes(value as string)
+          ? values.filter((entry) => entry !== value)
+          : [...values, value as string],
+      }
+    })
+  }
+
+  async function refreshLists() {
+    const [menuItems, auditPage] = await Promise.all([
+      api<MenuItem[]>('/admin/menu-items'),
+      api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
+    ])
+    setItems(menuItems)
+    setAuditLogs(auditPage.data)
+  }
+
+  async function submitForm(event: React.FormEvent) {
+    event.preventDefault()
+    try {
+      setSaving(true)
+      setError(null)
+      setSuccess(null)
+
+      const payload = {
+        label: form.label,
+        systemKey: form.systemKey || null,
+        itemType: form.itemType,
+        routeOrUrl: form.routeOrUrl || null,
+        icon: form.icon || null,
+        parentId: form.parentId || null,
+        displayOrder: Number(form.displayOrder || 0),
+        openInNewTab: form.openInNewTab,
+        isRequired: form.isRequired,
+        isActive: form.isActive,
+        roles: form.roles,
+        subscriptionPlans: form.plans.map((plan) => ({
+          plan,
+          displayOrder: Number(form.displayOrder || 0),
+          isActive: true,
+        })),
+        companyAssignments: form.companyIds.map((companyId) => ({
+          companyId,
+          displayOrder: Number(form.displayOrder || 0),
+          isActive: true,
+        })),
+      }
+
+      if (editingId) {
+        await api(`/admin/menu-items/${editingId}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        })
+        setSuccess('Menu item updated.')
+      } else {
+        await api('/admin/menu-items', {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        })
+        setSuccess('Menu item created.')
+      }
+
+      setEditingId(null)
+      setForm(emptyForm())
+      await refreshLists()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to save menu item.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function startCreate() {
+    setEditingId(null)
+    setForm(emptyForm())
+    setSuccess(null)
+    setError(null)
+  }
+
+  function startEdit(item: MenuItem) {
+    setEditingId(item.id)
+    setForm(formFromItem(item))
+    setSuccess(null)
+    setError(null)
+  }
+
+  async function toggleStatus(item: MenuItem) {
+    try {
+      setError(null)
+      await api(`/admin/menu-items/${item.id}/status`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isActive: !item.isActive }),
+      })
+      await refreshLists()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to update status.')
+    }
+  }
+
+  async function removeItem(item: MenuItem) {
+    if (!window.confirm(`Delete "${item.label}"?`)) return
+    try {
+      setError(null)
+      await api(`/admin/menu-items/${item.id}`, { method: 'DELETE' })
+      if (editingId === item.id) {
+        setEditingId(null)
+        setForm(emptyForm())
+      }
+      await refreshLists()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to delete menu item.')
+    }
+  }
+
+  async function runPreview() {
+    if (!previewCompanyId) return
+    try {
+      setPreviewing(true)
+      setError(null)
+      const result = await api<PreviewResponse>('/admin/menu-preview', {
+        method: 'POST',
+        body: JSON.stringify({ companyId: previewCompanyId, role: previewRole }),
+      })
+      setPreview(result)
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to load menu preview.')
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="panel p-8 text-sm text-zinc-500">
+          Loading menu management…
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="rdg-page-hero">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <p className="rdg-page-kicker">Platform</p>
+            <h1 className="mt-1 text-3xl font-black">Menu Management</h1>
+            <p className="mt-1 max-w-3xl text-sm text-zinc-400">
+              Control company dashboard navigation by plan, role, and company-specific exceptions from one admin surface.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={startCreate}
+            className="btn-primary"
+          >
+            Create menu item
+          </button>
+        </div>
+      </section>
+
+      {(error || success) && (
+        <section className="space-y-3">
+          {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+          {success && <div className="panel p-4 text-sm text-emerald-400">{success}</div>}
+        </section>
+      )}
+
+      <div className="grid gap-8 xl:grid-cols-[1.4fr,0.95fr]">
+        <section className="panel overflow-hidden">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="px-5 pt-5 text-xl font-semibold text-zinc-100">Menu items</h2>
+              <p className="px-5 pb-1 pt-1 text-sm text-zinc-400">{items.length} configured items</p>
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-zinc-800">
+                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Item</th>
+                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Type</th>
+                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Assignments</th>
+                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Status</th>
+                  <th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-800/60">
+                {items.map((item) => (
+                  <tr key={item.id} className="align-top transition-colors hover:bg-zinc-800/30">
+                    <td className="px-5 py-4">
+                      <div className="space-y-1">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="font-semibold text-zinc-100">{item.label}</span>
+                          {item.isRequired && chip('Required', 'warn')}
+                          {item.systemKey && chip(item.systemKey)}
+                        </div>
+                        <p className="text-xs text-zinc-500">
+                          {item.routeOrUrl || 'No route'} • order {item.displayOrder}
+                          {item.parent ? ` • child of ${item.parent.label}` : ''}
+                        </p>
+                      </div>
+                    </td>
+                    <td className="px-5 py-4 text-xs text-zinc-300">{item.itemType}</td>
+                    <td className="px-5 py-4">
+                      <div className="space-y-2">
+                        <div className="flex flex-wrap gap-2">
+                          {item.subscriptionAssignments.length > 0
+                            ? item.subscriptionAssignments.map((assignment) => (
+                                <span key={`${item.id}-${assignment.plan}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
+                                  {assignment.plan}
+                                </span>
+                              ))
+                            : <span className="text-xs text-zinc-500">No plan assignments</span>}
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {item.companyAssignments.slice(0, 3).map((assignment) => (
+                            <span key={`${item.id}-${assignment.companyId}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
+                              {assignment.company.name}
+                            </span>
+                          ))}
+                          {item.companyAssignments.length > 3 && chip(`+${item.companyAssignments.length - 3} more`)}
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {item.roleVisibilities.map((entry) => (
+                            <span key={`${item.id}-${entry.role}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
+                              {entry.role}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-5 py-4">
+                      {item.isActive ? chip('Active', 'success') : chip('Inactive')}
+                    </td>
+                    <td className="px-5 py-4">
+                      <div className="flex flex-wrap gap-2">
+                        <button type="button" onClick={() => startEdit(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
+                          Edit
+                        </button>
+                        <button type="button" onClick={() => toggleStatus(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
+                          {item.isActive ? 'Disable' : 'Enable'}
+                        </button>
+                        <button type="button" onClick={() => removeItem(item)} className="rounded-lg border border-red-900/60 bg-red-950/20 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-900/30">
+                          Delete
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h2 className="text-xl font-semibold text-zinc-100">{editingId ? 'Edit menu item' : 'New menu item'}</h2>
+              <p className="mt-1 text-sm text-zinc-400">
+                Configure menu metadata, role visibility, plan defaults, and company-specific overrides.
+              </p>
+            </div>
+            {editingId && (
+              <button type="button" onClick={startCreate} className="text-sm font-medium text-orange-400 hover:text-orange-300">
+                Clear
+              </button>
+            )}
+          </div>
+
+          <form className="mt-6 space-y-5" onSubmit={submitForm}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <label>
+                <span className={LABEL}>Label</span>
+                <input className={INPUT} value={form.label} onChange={(e) => updateForm('label', e.target.value)} />
+              </label>
+
+              <label>
+                <span className={LABEL}>System key</span>
+                <input className={INPUT} value={form.systemKey} onChange={(e) => updateForm('systemKey', e.target.value)} placeholder="dashboard" />
+              </label>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <label>
+                <span className={LABEL}>Type</span>
+                <select className={INPUT} value={form.itemType} onChange={(e) => updateForm('itemType', e.target.value as MenuItemType)}>
+                  {ITEM_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
+                </select>
+              </label>
+
+              <label>
+                <span className={LABEL}>Icon</span>
+                <input className={INPUT} value={form.icon} onChange={(e) => updateForm('icon', e.target.value)} placeholder="LayoutDashboard" />
+              </label>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <label>
+                <span className={LABEL}>Route or URL</span>
+                <input className={INPUT} value={form.routeOrUrl} onChange={(e) => updateForm('routeOrUrl', e.target.value)} placeholder="/reports or https://…" />
+              </label>
+
+              <label>
+                <span className={LABEL}>Parent menu</span>
+                <select className={INPUT} value={form.parentId} onChange={(e) => updateForm('parentId', e.target.value)}>
+                  <option value="">No parent</option>
+                  {parentOptions.map((item) => (
+                    <option key={item.id} value={item.id}>{item.label}</option>
+                  ))}
+                </select>
+              </label>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <label>
+                <span className={LABEL}>Display order</span>
+                <input className={INPUT} type="number" min="0" value={form.displayOrder} onChange={(e) => updateForm('displayOrder', e.target.value)} />
+              </label>
+
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
+                  <input type="checkbox" checked={form.isActive} onChange={(e) => updateForm('isActive', e.target.checked)} />
+                  Active
+                </label>
+                <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
+                  <input type="checkbox" checked={form.openInNewTab} onChange={(e) => updateForm('openInNewTab', e.target.checked)} />
+                  New tab
+                </label>
+              </div>
+            </div>
+
+            <label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
+              <input type="checkbox" checked={form.isRequired} onChange={(e) => updateForm('isRequired', e.target.checked)} />
+              Required system item
+            </label>
+
+            <div>
+              <p className={LABEL}>Role visibility</p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {ROLES.map((role) => (
+                  <label key={role} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
+                    <input type="checkbox" checked={form.roles.includes(role)} onChange={() => toggleArrayValue('roles', role)} />
+                    {role}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <p className={LABEL}>Subscription plans</p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {PLANS.map((plan) => (
+                  <label key={plan} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
+                    <input type="checkbox" checked={form.plans.includes(plan)} onChange={() => toggleArrayValue('plans', plan)} />
+                    {plan}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <p className={LABEL}>Company-specific assignments</p>
+              <div className="mt-2 max-h-56 space-y-2 overflow-y-auto rounded-2xl border border-zinc-700 bg-zinc-900/30 p-3">
+                {companies.map((company) => (
+                  <label key={company.id} className="flex items-center justify-between gap-3 rounded-xl px-2 py-2 text-sm text-zinc-200 transition-colors hover:bg-zinc-800/40">
+                    <span className="flex items-center gap-2">
+                      <input type="checkbox" checked={form.companyIds.includes(company.id)} onChange={() => toggleArrayValue('companyIds', company.id)} />
+                      <span>{company.name}</span>
+                    </span>
+                    <span className="text-xs text-zinc-500">
+                      {company.subscription?.plan ?? 'No plan'} • {company.status}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={saving}
+              className="btn-primary w-full"
+            >
+              {saving ? 'Saving…' : editingId ? 'Update menu item' : 'Create menu item'}
+            </button>
+          </form>
+        </section>
+      </div>
+
+      <div className="grid gap-8 xl:grid-cols-[1.1fr,0.9fr]">
+        <section className="panel p-6">
+          <div className="flex flex-wrap items-end gap-4">
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-zinc-100">Preview company menu</h2>
+              <p className="mt-1 text-sm text-zinc-400">
+                Test the generated menu for a company and role before troubleshooting or saving follow-up changes.
+              </p>
+            </div>
+            <div className="min-w-[220px]">
+              <label className={LABEL}>Company</label>
+              <select className={INPUT} value={previewCompanyId} onChange={(e) => setPreviewCompanyId(e.target.value)}>
+                {companies.map((company) => (
+                  <option key={company.id} value={company.id}>{company.name}</option>
+                ))}
+              </select>
+            </div>
+            <div className="min-w-[160px]">
+              <label className={LABEL}>Role</label>
+              <select className={INPUT} value={previewRole} onChange={(e) => setPreviewRole(e.target.value as EmployeeRole)}>
+                {ROLES.map((role) => <option key={role} value={role}>{role}</option>)}
+              </select>
+            </div>
+            <button
+              type="button"
+              onClick={runPreview}
+              disabled={previewing || !previewCompanyId}
+              className="btn-primary"
+            >
+              {previewing ? 'Previewing…' : 'Run preview'}
+            </button>
+          </div>
+
+          {preview && (
+            <div className="mt-6 space-y-4">
+              <div className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
+                <p className="text-sm font-semibold text-zinc-100">{preview.company.name}</p>
+                <p className="mt-1 text-xs text-zinc-500">
+                  Plan: {preview.subscriptionPlan ?? 'None'} • Role: {preview.role} • Company status: {preview.company.status}
+                </p>
+              </div>
+
+              <div className="space-y-3">
+                {preview.items.map((item) => (
+                  <div key={item.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="font-semibold text-zinc-100">{item.label}</span>
+                      {item.visible ? chip('Visible', 'success') : chip('Hidden')}
+                      {chip(item.source === 'none' ? 'unassigned' : item.source)}
+                    </div>
+                    <p className="mt-1 text-xs text-zinc-500">
+                      {item.routeOrUrl || 'No route'} • order {item.displayOrder}
+                    </p>
+                    <ul className="mt-3 space-y-1 text-sm text-zinc-300">
+                      {item.reasons.map((reason, index) => (
+                        <li key={`${item.id}-${index}`}>{reason}</li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
+
+        <section className="panel p-6">
+          <h2 className="text-xl font-semibold text-zinc-100">Recent menu audit activity</h2>
+          <p className="mt-1 text-sm text-zinc-400">
+            Recent platform-side changes to menu items and assignments.
+          </p>
+
+          <div className="mt-6 space-y-3">
+            {auditLogs.map((entry) => (
+              <div key={entry.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm font-semibold text-zinc-100">{entry.action}</p>
+                  <span className="text-xs text-zinc-500">
+                    {new Date(entry.createdAt).toLocaleString()}
+                  </span>
+                </div>
+                <p className="mt-1 text-xs text-zinc-500">
+                  {entry.adminUser
+                    ? `${entry.adminUser.firstName} ${entry.adminUser.lastName} • ${entry.adminUser.email}`
+                    : 'Unknown admin'}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/notifications/page.tsx b/admin/src/app/dashboard/notifications/page.tsx
new file mode 100644
index 0000000..53160ac
--- /dev/null
+++ b/admin/src/app/dashboard/notifications/page.tsx
@@ -0,0 +1,205 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface NotificationItem {
+  id: string
+  type: string
+  title: string
+  body: string
+  channel: string
+  status: string
+  locale: string
+  sentAt: string | null
+  createdAt: string
+  company: { name: string } | null
+  companyId: string | null
+  renterId: string | null
+}
+
+interface Paginated {
+  data: NotificationItem[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+const CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'IN_APP', 'PUSH']
+const STATUSES = ['PENDING', 'SENT', 'DELIVERED', 'FAILED', 'READ']
+
+const CHANNEL_BADGE: Record<string, string> = {
+  EMAIL:    'text-sky-400 bg-sky-950/40',
+  SMS:      'text-emerald-400 bg-emerald-950/40',
+  WHATSAPP: 'text-teal-400 bg-teal-950/40',
+  IN_APP:   'text-violet-400 bg-violet-950/40',
+  PUSH:     'text-orange-400 bg-orange-950/40',
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  PENDING:   'text-yellow-400 bg-yellow-950/40',
+  SENT:      'text-emerald-400 bg-emerald-950/40',
+  DELIVERED: 'text-emerald-400 bg-emerald-950/40',
+  FAILED:    'text-red-400 bg-red-950/40',
+  READ:      'text-zinc-400 bg-zinc-800',
+}
+
+export default function AdminNotificationsPage() {
+  const [result, setResult] = useState<Paginated | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [filterChannel, setFilterChannel] = useState('')
+  const [filterStatus, setFilterStatus] = useState('')
+  const [filterCompany, setFilterCompany] = useState('')
+  const [page, setPage] = useState(1)
+
+  function load(p: number) {
+    setLoading(true)
+    setError(null)
+    const params = new URLSearchParams({ page: String(p), pageSize: '50' })
+    if (filterChannel) params.set('channel', filterChannel)
+    if (filterStatus)  params.set('status',  filterStatus)
+    if (filterCompany) params.set('companyId', filterCompany)
+
+    fetch(`${ADMIN_API_BASE}/admin/notifications?${params.toString()}`, {
+      credentials: 'include',
+      cache: 'no-store',
+    })
+      .then((r) => r.json())
+      .then((json) => setResult(json.data ?? null))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    setPage(1)
+    load(1)
+  }, [filterChannel, filterStatus, filterCompany])
+
+  function goToPage(p: number) {
+    setPage(p)
+    load(p)
+  }
+
+  const totalPages = result ? Math.ceil(result.total / result.pageSize) : 0
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <p className="rdg-page-kicker">Platform</p>
+          <h1 className="mt-1 text-3xl font-black">Notifications</h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            Full audit log of every notification sent across all companies.
+          </p>
+        </div>
+        {result && (
+          <span className="rounded-full bg-zinc-800 px-3 py-1 text-sm text-zinc-300">
+            {result.total.toLocaleString()} total
+          </span>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <select
+          value={filterChannel}
+          onChange={(e) => setFilterChannel(e.target.value)}
+          className="rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        >
+          <option value="">All channels</option>
+          {CHANNELS.map((ch) => <option key={ch} value={ch}>{ch}</option>)}
+        </select>
+        <select
+          value={filterStatus}
+          onChange={(e) => setFilterStatus(e.target.value)}
+          className="rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        >
+          <option value="">All statuses</option>
+          {STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Date</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Company</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Event</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Channel</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Title</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Status</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Sent at</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={7} className="px-5 py-12 text-center text-zinc-500">Loading…</td></tr>
+              ) : !result || result.data.length === 0 ? (
+                <tr><td colSpan={7} className="px-5 py-12 text-center text-zinc-500">No notifications found.</td></tr>
+              ) : result.data.map((item) => (
+                <tr key={item.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-500">
+                    {new Date(item.createdAt).toLocaleString()}
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-300">
+                    {item.company?.name ?? (item.companyId ? item.companyId.slice(0, 10) + '…' : '—')}
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs font-medium text-zinc-300">
+                    {item.type.replaceAll('_', ' ')}
+                  </td>
+                  <td className="px-5 py-3">
+                    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${CHANNEL_BADGE[item.channel] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {item.channel}
+                    </span>
+                  </td>
+                  <td className="px-5 py-3 max-w-[220px]">
+                    <p className="truncate text-sm text-zinc-200">{item.title}</p>
+                    <p className="truncate text-xs text-zinc-500">{item.body}</p>
+                  </td>
+                  <td className="px-5 py-3">
+                    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[item.status] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {item.status}
+                    </span>
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-500">
+                    {item.sentAt ? new Date(item.sentAt).toLocaleString() : '—'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between border-t border-zinc-800 px-5 py-3">
+            <span className="text-xs text-zinc-500">
+              Page {page} of {totalPages} — {result?.total.toLocaleString()} records
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                disabled={page <= 1}
+                onClick={() => goToPage(page - 1)}
+                className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                Previous
+              </button>
+              <button
+                disabled={page >= totalPages}
+                onClick={() => goToPage(page + 1)}
+                className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/page.tsx b/admin/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..9b8a61b
--- /dev/null
+++ b/admin/src/app/dashboard/page.tsx
@@ -0,0 +1,245 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Activity, ArrowRight, Building2, ClipboardList, ShieldCheck, Users, WalletCards } from 'lucide-react'
+import { useAdminI18n } from '@/components/I18nProvider'
+import { ADMIN_API_BASE } from '@/lib/api'
+import { canAccessAdminMetrics, useAdminSession } from './AdminSessionContext'
+
+interface Metrics {
+  totalCompanies: number
+  activeCompanies: number
+  totalRenters: number
+  totalReservations: number
+  mrr?: number
+}
+
+export default function AdminDashboardPage() {
+  const { language } = useAdminI18n()
+  const admin = useAdminSession()
+  const copy = {
+    en: {
+      kpis: ['Total companies', 'Active companies', 'Total renters', 'Total reservations'],
+      brand: 'RentalDriveGo',
+      eyebrow: 'Operations command',
+      platformOverview: 'RentalDriveGo admin dashboard',
+      subtitle: 'Monitor marketplace health, subscription coverage, renter activity, and operator actions from one control surface.',
+      liveSignal: 'Live platform signal',
+      readiness: 'Operational readiness',
+      readinessBody: 'Core admin workflows are connected and ready for platform support.',
+      quickActions: 'Quick actions',
+      mrr: 'Monthly recurring revenue',
+      noMetrics: 'Metrics are limited for this admin role.',
+      cards: [
+        ['Companies', 'Search operators, review subscription state, and manage account status.', 'View all'],
+        ['Renters', 'Support renter trust workflows, blocking, and account recovery.', 'View all'],
+        ['Audit logs', 'Trace every sensitive admin action across RentalDriveGo.', 'View logs'],
+      ],
+      health: ['Tenant accounts', 'Marketplace identity', 'Admin audit trail'],
+    },
+    fr: {
+      kpis: ['Entreprises totales', 'Entreprises actives', 'Locataires totaux', 'Réservations totales'],
+      brand: 'RentalDriveGo',
+      eyebrow: 'Centre des opérations',
+      platformOverview: 'Tableau de bord admin RentalDriveGo',
+      subtitle: 'Suivez la santé de la marketplace, les abonnements, l’activité des locataires et les actions opérateur depuis une même interface.',
+      liveSignal: 'Signal plateforme en direct',
+      readiness: 'Disponibilité opérationnelle',
+      readinessBody: 'Les principaux workflows admin sont connectés et prêts pour le support plateforme.',
+      quickActions: 'Actions rapides',
+      mrr: 'Revenu mensuel récurrent',
+      noMetrics: 'Les métriques sont limitées pour ce rôle admin.',
+      cards: [
+        ['Entreprises', 'Rechercher les opérateurs, vérifier les abonnements et gérer les statuts.', 'Voir tout'],
+        ['Locataires', 'Gérer les workflows de confiance, de blocage et de récupération.', 'Voir tout'],
+        ['Journaux d’audit', 'Tracer chaque action admin sensible dans RentalDriveGo.', 'Voir les journaux'],
+      ],
+      health: ['Comptes locataires', 'Identité marketplace', 'Piste d’audit admin'],
+    },
+    ar: {
+      kpis: ['إجمالي الشركات', 'الشركات النشطة', 'إجمالي المستأجرين', 'إجمالي الحجوزات'],
+      brand: 'RentalDriveGo',
+      eyebrow: 'مركز العمليات',
+      platformOverview: 'لوحة إدارة RentalDriveGo',
+      subtitle: 'راقب صحة السوق وحالة الاشتراكات ونشاط المستأجرين وإجراءات الإدارة من مساحة واحدة.',
+      liveSignal: 'مؤشر المنصة المباشر',
+      readiness: 'جاهزية التشغيل',
+      readinessBody: 'مسارات الإدارة الأساسية متصلة وجاهزة لدعم المنصة.',
+      quickActions: 'إجراءات سريعة',
+      mrr: 'الإيراد الشهري المتكرر',
+      noMetrics: 'المؤشرات محدودة لهذا الدور الإداري.',
+      cards: [
+        ['الشركات', 'ابحث عن المشغلين وراجع الاشتراكات وأدر حالة الحساب.', 'عرض الكل'],
+        ['المستأجرون', 'إدارة الثقة والحظر واستعادة الحسابات للمستأجرين.', 'عرض الكل'],
+        ['سجلات التدقيق', 'تتبع كل إجراء إداري حساس داخل RentalDriveGo.', 'عرض السجلات'],
+      ],
+      health: ['حسابات الشركات', 'هوية السوق', 'سجل تدقيق الإدارة'],
+    },
+  }[language]
+  const [metrics, setMetrics] = useState<Metrics | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!canAccessAdminMetrics(admin)) {
+      setMetrics(null)
+      setLoading(false)
+      return
+    }
+
+    fetch(`${ADMIN_API_BASE}/admin/metrics`, {
+      credentials: 'include',
+      cache: 'no-store',
+    })
+      .then(async (response) => {
+        const json = await response.json().catch(() => null)
+        if (!response.ok) {
+          setMetrics(null)
+          return
+        }
+        setMetrics((json?.data ?? json) as Metrics)
+      })
+      .catch(() => null)
+      .finally(() => setLoading(false))
+  }, [admin])
+
+  const numberFormatter = new Intl.NumberFormat(language === 'ar' ? 'ar-MA' : language === 'fr' ? 'fr-FR' : 'en-US')
+  const currencyFormatter = new Intl.NumberFormat(language === 'ar' ? 'ar-MA' : language === 'fr' ? 'fr-FR' : 'en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  })
+
+  const kpis = metrics
+    ? [
+        { label: copy.kpis[0], value: metrics.totalCompanies, icon: Building2, tone: 'text-blue-600 dark:text-blue-300', bg: 'bg-blue-50 dark:bg-blue-500/10' },
+        { label: copy.kpis[1], value: metrics.activeCompanies, icon: Activity, tone: 'text-emerald-600 dark:text-emerald-300', bg: 'bg-emerald-50 dark:bg-emerald-500/10' },
+        { label: copy.kpis[2], value: metrics.totalRenters, icon: Users, tone: 'text-violet-600 dark:text-violet-300', bg: 'bg-violet-50 dark:bg-violet-500/10' },
+        { label: copy.kpis[3], value: metrics.totalReservations, icon: ClipboardList, tone: 'text-orange-600 dark:text-orange-300', bg: 'bg-orange-50 dark:bg-orange-500/10' },
+      ]
+    : []
+
+  const activeRate = metrics?.totalCompanies
+    ? Math.round((metrics.activeCompanies / metrics.totalCompanies) * 100)
+    : 0
+  const renterRatio = metrics?.totalCompanies
+    ? Math.round(metrics.totalRenters / Math.max(metrics.totalCompanies, 1))
+    : 0
+
+  const actionCards = [
+    { href: '/dashboard/companies', icon: Building2, title: copy.cards[0][0], body: copy.cards[0][1], cta: copy.cards[0][2] },
+    { href: '/dashboard/renters', icon: Users, title: copy.cards[1][0], body: copy.cards[1][1], cta: copy.cards[1][2] },
+    { href: '/dashboard/audit-logs', icon: ShieldCheck, title: copy.cards[2][0], body: copy.cards[2][1], cta: copy.cards[2][2] },
+  ]
+
+  return (
+    <div className="space-y-8">
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,1.45fr)_minmax(320px,0.55fr)]">
+        <section className="rdg-page-hero">
+          
+          <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
+            <div className="max-w-2xl">
+              <p className="rdg-page-kicker">{copy.eyebrow}</p>
+              <h1 className="mt-3 text-4xl font-black tracking-normal text-blue-950 dark:text-white sm:text-5xl">{copy.platformOverview}</h1>
+              <p className="mt-4 max-w-2xl text-sm leading-6 text-stone-600 dark:text-slate-300">{copy.subtitle}</p>
+            </div>
+            <div className="flex w-full max-w-[15rem] items-center gap-3 rounded-2xl border border-stone-200/80 bg-stone-50/90 p-3 dark:border-blue-900/60 dark:bg-[#0d1b38]/85">
+              <div className="grid h-10 w-10 place-items-center rounded-xl bg-blue-950 text-white dark:bg-orange-500">
+                <WalletCards className="h-5 w-5" aria-hidden="true" />
+              </div>
+              <div>
+                <p className="text-xs text-stone-500 dark:text-slate-400">{copy.mrr}</p>
+                <p className="text-lg font-black text-blue-950 dark:text-white">{metrics?.mrr != null ? currencyFormatter.format(metrics.mrr) : '—'}</p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-8 grid gap-3 sm:grid-cols-3">
+            {copy.health.map((item) => (
+              <div key={item} className="rounded-2xl border border-stone-200/70 bg-white/70 px-4 py-3 text-sm font-semibold text-stone-700 dark:border-blue-900/50 dark:bg-[#0d1b38]/70 dark:text-slate-200">
+                {item}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="panel p-6">
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-400">{copy.liveSignal}</p>
+          <div className="mt-5 space-y-5">
+            <div>
+              <div className="flex items-center justify-between text-sm">
+                <span className="font-semibold text-zinc-200">{copy.readiness}</span>
+                <span className="font-black text-orange-600 dark:text-orange-300">{activeRate}%</span>
+              </div>
+              <div className="mt-2 h-2 overflow-hidden rounded-full bg-stone-200 dark:bg-blue-950">
+                <div className="h-full rounded-full bg-[linear-gradient(90deg,#2563eb,#f97316)]" style={{ width: `${Math.min(activeRate, 100)}%` }} />
+              </div>
+              <p className="mt-3 text-sm leading-6 text-zinc-500">{copy.readinessBody}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="rounded-2xl border border-stone-200/80 bg-stone-50/80 p-4 dark:border-blue-900/50 dark:bg-[#07101e]/70">
+                <p className="text-xs text-zinc-500">{copy.kpis[1]}</p>
+                <p className="mt-1 text-2xl font-black text-zinc-200">{metrics ? numberFormatter.format(metrics.activeCompanies) : '—'}</p>
+              </div>
+              <div className="rounded-2xl border border-stone-200/80 bg-stone-50/80 p-4 dark:border-blue-900/50 dark:bg-[#07101e]/70">
+                <p className="text-xs text-zinc-500">{copy.kpis[2]}</p>
+                <p className="mt-1 text-2xl font-black text-zinc-200">{metrics ? numberFormatter.format(renterRatio) : '—'}</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {loading
+          ? Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="panel p-6 animate-pulse">
+                <div className="h-3 w-24 rounded bg-zinc-800" />
+                <div className="mt-3 h-8 w-16 rounded bg-zinc-800" />
+              </div>
+            ))
+          : kpis.length > 0 ? kpis.map((kpi) => {
+              const Icon = kpi.icon
+              return (
+                <div key={kpi.label} className="panel p-5">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-medium text-zinc-500">{kpi.label}</p>
+                      <p className="mt-2 text-3xl font-black text-zinc-200">{numberFormatter.format(kpi.value ?? 0)}</p>
+                    </div>
+                    <div className={`grid h-10 w-10 place-items-center rounded-2xl ${kpi.bg}`}>
+                      <Icon className={`h-5 w-5 ${kpi.tone}`} aria-hidden="true" />
+                    </div>
+                  </div>
+                </div>
+              )
+            }) : (
+              <div className="panel p-6 md:col-span-2 lg:col-span-4">
+                <p className="text-sm text-zinc-500">{copy.noMetrics}</p>
+              </div>
+            )}
+      </div>
+
+      <section>
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-sm font-bold text-blue-950 dark:text-white">{copy.quickActions}</p>
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">{copy.brand}</p>
+        </div>
+        <div className="grid gap-5 md:grid-cols-3">
+          {actionCards.map(({ href, icon: Icon, title, body, cta }) => (
+            <Link key={href} href={href} className="panel group block p-6 hover:border-orange-300 dark:hover:border-orange-500/70">
+              <div className="flex items-start justify-between gap-4">
+                <div className="grid h-11 w-11 place-items-center rounded-2xl bg-blue-950 text-white dark:bg-orange-500">
+                  <Icon className="h-5 w-5" aria-hidden="true" />
+                </div>
+                <ArrowRight className="h-4 w-4 text-zinc-500 transition-transform group-hover:translate-x-1 group-hover:text-orange-500" aria-hidden="true" />
+              </div>
+              <p className="mt-5 text-base font-bold text-zinc-200">{title}</p>
+              <p className="mt-2 min-h-[3rem] text-sm leading-6 text-zinc-500">{body}</p>
+              <p className="mt-5 text-xs font-bold uppercase tracking-[0.16em] text-emerald-400">{cta}</p>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/pricing/page.tsx b/admin/src/app/dashboard/pricing/page.tsx
new file mode 100644
index 0000000..1c60c78
--- /dev/null
+++ b/admin/src/app/dashboard/pricing/page.tsx
@@ -0,0 +1,1110 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+
+interface PricingConfig {
+  id: string
+  plan: string
+  billingPeriod: string
+  amount: number
+  updatedAt: string
+  updatedBy: string | null
+}
+
+interface Promotion {
+  id: string
+  code: string
+  name: string
+  description: string | null
+  discountType: 'PERCENTAGE' | 'FIXED'
+  discountValue: number
+  plans: string[]
+  periods: string[]
+  maxUses: number | null
+  usedCount: number
+  validFrom: string
+  validUntil: string | null
+  isActive: boolean
+  createdAt: string
+}
+
+interface PlanFeature {
+  id: string
+  plan: string
+  label: string
+  sortOrder: number
+  createdAt: string
+  updatedAt: string
+}
+
+type PricingDraft = Record<string, string>
+
+type PromoForm = {
+  code: string
+  name: string
+  description: string
+  discountType: 'PERCENTAGE' | 'FIXED'
+  discountValue: string
+  plans: string[]
+  periods: string[]
+  maxUses: string
+  validFrom: string
+  validUntil: string
+  isActive: boolean
+}
+
+type PlanFeatureForm = {
+  plan: string
+  label: string
+  sortOrder: string
+}
+
+// ─── Constants ─────────────────────────────────────────────────────────────
+
+const PLANS = ['STARTER', 'GROWTH', 'PRO']
+const PERIODS = ['MONTHLY', 'ANNUAL']
+
+const PLAN_COLORS: Record<string, string> = {
+  STARTER: 'text-zinc-400',
+  GROWTH:  'text-sky-400',
+  PRO:     'text-violet-400',
+}
+
+const PLAN_BADGE: Record<string, string> = {
+  STARTER: 'bg-zinc-800 text-zinc-300',
+  GROWTH:  'bg-sky-900/40 text-sky-300',
+  PRO:     'bg-violet-900/40 text-violet-300',
+}
+
+// ─── Helpers ───────────────────────────────────────────────────────────────
+
+function pricingKey(plan: string, period: string) {
+  return `${plan}:${period}`
+}
+
+function fmtCentimes(amount: number) {
+  return (amount / 100).toFixed(2)
+}
+
+function parseCentimes(value: string): number | null {
+  const n = parseFloat(value)
+  if (isNaN(n) || n < 0) return null
+  return Math.round(n * 100)
+}
+
+function fmtDate(iso: string | null) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+function toDateInputValue(iso: string | null) {
+  if (!iso) return ''
+  return iso.slice(0, 10)
+}
+
+function emptyPromoForm(): PromoForm {
+  return {
+    code: '', name: '', description: '',
+    discountType: 'PERCENTAGE', discountValue: '',
+    plans: [], periods: [],
+    maxUses: '', validFrom: toDateInputValue(new Date().toISOString()),
+    validUntil: '', isActive: true,
+  }
+}
+
+function emptyPlanFeatureForm(plan = PLANS[0]): PlanFeatureForm {
+  return {
+    plan,
+    label: '',
+    sortOrder: '0',
+  }
+}
+
+function authHeaders(): Record<string, string> {
+  return {}
+}
+
+function sortFeatures(list: PlanFeature[]) {
+  return [...list].sort((a, b) => {
+    const planDiff = PLANS.indexOf(a.plan) - PLANS.indexOf(b.plan)
+    if (planDiff !== 0) return planDiff
+    if (a.sortOrder !== b.sortOrder) return a.sortOrder - b.sortOrder
+    return a.label.localeCompare(b.label)
+  })
+}
+
+// ─── Pricing table ──────────────────────────────────────────────────────────
+
+function PricingTable({
+  configs, draft, onChange, onSave, saving, error, successMsg,
+}: {
+  configs: PricingConfig[]
+  draft: PricingDraft
+  onChange: (key: string, val: string) => void
+  onSave: () => void
+  saving: boolean
+  error: string
+  successMsg: string
+}) {
+  const lastUpdated = configs
+    .filter((c) => c.updatedAt)
+    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0]
+
+  return (
+    <section className="space-y-4">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h2 className="text-xl font-bold text-blue-950 dark:text-white">Plan prices</h2>
+          <p className="mt-0.5 text-sm text-stone-500 dark:text-slate-400">
+            Enter values in MAD — stored as centimes internally.
+          </p>
+          {lastUpdated && (
+            <p className="mt-0.5 text-xs text-stone-400 dark:text-slate-500">
+              Last updated {new Date(lastUpdated.updatedAt).toLocaleString()}
+              {lastUpdated.updatedBy ? ` by ${lastUpdated.updatedBy}` : ''}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save prices'}
+        </button>
+      </div>
+
+      {error    && <div className="rounded-2xl border border-red-800/40 bg-red-900/20 px-4 py-3 text-sm text-red-400">{error}</div>}
+      {successMsg && <div className="rounded-2xl border border-emerald-800/40 bg-emerald-900/20 px-4 py-3 text-sm text-emerald-400">{successMsg}</div>}
+
+      <div className="rounded-2xl border border-stone-200/80 bg-white shadow-sm dark:border-blue-900 dark:bg-[#0d1b38]">
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="border-b border-stone-200/80 dark:border-blue-900">
+              <th className="px-6 py-4 text-left text-xs font-semibold uppercase tracking-[0.14em] text-stone-500 dark:text-slate-400">Plan</th>
+              {PERIODS.map((p) => (
+                <th key={p} className="px-6 py-4 text-center text-xs font-semibold uppercase tracking-[0.14em] text-stone-500 dark:text-slate-400">{p}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {PLANS.map((plan, i) => (
+              <tr key={plan} className={i < PLANS.length - 1 ? 'border-b border-stone-100 dark:border-blue-900/60' : ''}>
+                <td className="px-6 py-5">
+                  <span className={`text-sm font-bold ${PLAN_COLORS[plan]}`}>{plan}</span>
+                </td>
+                {PERIODS.map((period) => {
+                  const k = pricingKey(plan, period)
+                  const config = configs.find((c) => c.plan === plan && c.billingPeriod === period)
+                  return (
+                    <td key={period} className="px-6 py-5 text-center">
+                      <div className="inline-flex items-center gap-1">
+                        <input
+                          type="number" min="0" step="0.01"
+                          value={draft[k] ?? ''}
+                          onChange={(e) => onChange(k, e.target.value)}
+                          className="w-28 rounded-xl border border-stone-200 bg-white px-3 py-2 text-right text-sm font-medium text-blue-900 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e] dark:text-white"
+                        />
+                        <span className="text-xs font-medium text-stone-400 dark:text-slate-500">MAD</span>
+                      </div>
+                      {config && (
+                        <p className="mt-1 text-xs text-stone-400 dark:text-slate-500">
+                          Current: {fmtCentimes(config.amount)} MAD
+                        </p>
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}
+
+// ─── Plan features ──────────────────────────────────────────────────────────
+
+function PlanFeatureFormPanel({
+  initial, onSave, onCancel, saving, error,
+}: {
+  initial: PlanFeatureForm
+  onSave: (form: PlanFeatureForm) => void
+  onCancel: () => void
+  saving: boolean
+  error: string
+}) {
+  const [form, setForm] = useState<PlanFeatureForm>(initial)
+
+  useEffect(() => {
+    setForm(initial)
+  }, [initial])
+
+  const INPUT = 'w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-blue-900 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e] dark:text-white'
+  const LABEL = 'mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-stone-500 dark:text-slate-400'
+
+  return (
+    <div className="rounded-2xl border border-orange-400/30 bg-orange-50/40 p-6 dark:border-orange-500/20 dark:bg-[#12101e]">
+      {error && <div className="mb-4 rounded-xl border border-red-800/40 bg-red-900/20 px-4 py-3 text-sm text-red-400">{error}</div>}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label>
+          <span className={LABEL}>Plan *</span>
+          <select
+            className={INPUT}
+            value={form.plan}
+            onChange={(e) => setForm((prev) => ({ ...prev, plan: e.target.value }))}
+          >
+            {PLANS.map((plan) => <option key={plan} value={plan}>{plan}</option>)}
+          </select>
+        </label>
+
+        <label>
+          <span className={LABEL}>Display order</span>
+          <input
+            type="number"
+            min="0"
+            step="1"
+            className={INPUT}
+            value={form.sortOrder}
+            onChange={(e) => setForm((prev) => ({ ...prev, sortOrder: e.target.value }))}
+          />
+          <p className="mt-1 text-[11px] text-stone-400 dark:text-slate-500">Lower values appear first.</p>
+        </label>
+
+        <label className="sm:col-span-2">
+          <span className={LABEL}>Feature label *</span>
+          <input
+            className={INPUT}
+            placeholder="Unlimited vehicles"
+            value={form.label}
+            onChange={(e) => setForm((prev) => ({ ...prev, label: e.target.value }))}
+          />
+        </label>
+      </div>
+
+      <div className="mt-6 flex justify-end gap-3">
+        <button type="button" onClick={onCancel}
+          className="rounded-full border border-stone-200 bg-white px-5 py-2 text-sm font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-transparent dark:text-slate-200 dark:hover:bg-[#162038]"
+        >
+          Cancel
+        </button>
+        <button type="button" onClick={() => onSave(form)} disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save feature'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function PlanFeaturesSection() {
+  const [features, setFeatures] = useState<PlanFeature[]>([])
+  const [loading, setLoading] = useState(true)
+  const [formState, setFormState] = useState<'hidden' | 'create' | string>('hidden')
+  const [formInitial, setFormInitial] = useState<PlanFeatureForm>(emptyPlanFeatureForm())
+  const [saving, setSaving] = useState(false)
+  const [formError, setFormError] = useState('')
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${ADMIN_API_BASE}/admin/pricing/features`, { headers: authHeaders(), credentials: 'include' })
+      .then(async (r) => {
+        const json = await r.json()
+        if (!r.ok) throw new Error(json?.message ?? 'Failed to load plan features')
+        setFeatures(sortFeatures(json.data ?? []))
+      })
+      .finally(() => setLoading(false))
+  }, [])
+
+  function openCreate(plan = PLANS[0]) {
+    const nextOrder = Math.max(
+      0,
+      ...features.filter((feature) => feature.plan === plan).map((feature) => feature.sortOrder),
+    ) + 10
+    setFormInitial({ plan, label: '', sortOrder: String(nextOrder) })
+    setFormError('')
+    setFormState('create')
+  }
+
+  function openEdit(feature: PlanFeature) {
+    setFormInitial({
+      plan: feature.plan,
+      label: feature.label,
+      sortOrder: String(feature.sortOrder),
+    })
+    setFormError('')
+    setFormState(feature.id)
+  }
+
+  function buildPayload(form: PlanFeatureForm) {
+    const label = form.label.trim()
+    if (!label) return { error: 'Feature label is required' }
+
+    const sortOrder = form.sortOrder.trim() === '' ? 0 : Number.parseInt(form.sortOrder, 10)
+    if (Number.isNaN(sortOrder) || sortOrder < 0) return { error: 'Display order must be 0 or greater' }
+
+    return {
+      payload: {
+        plan: form.plan,
+        label,
+        sortOrder,
+      },
+    }
+  }
+
+  async function handleSave(form: PlanFeatureForm) {
+    setFormError('')
+    const result = buildPayload(form)
+    if ('error' in result) {
+      setFormError(result.error ?? 'Invalid plan feature')
+      return
+    }
+
+    setSaving(true)
+    try {
+      const isEdit = formState !== 'create'
+      const url = isEdit
+        ? `${ADMIN_API_BASE}/admin/pricing/features/${formState}`
+        : `${ADMIN_API_BASE}/admin/pricing/features`
+      const res = await fetch(url, {
+        method: isEdit ? 'PATCH' : 'POST',
+        headers: { 'Content-Type': 'application/json', ...authHeaders() },
+        credentials: 'include',
+        body: JSON.stringify(result.payload),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Save failed')
+      const saved: PlanFeature = json.data
+      setFeatures((prev) => sortFeatures(
+        isEdit ? prev.map((feature) => (feature.id === saved.id ? saved : feature)) : [...prev, saved],
+      ))
+      setFormState('hidden')
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/pricing/features/${id}`, {
+        method: 'DELETE',
+        headers: authHeaders(),
+      credentials: 'include',
+      })
+      if (!res.ok) throw new Error('Delete failed')
+      setFeatures((prev) => prev.filter((feature) => feature.id !== id))
+    } catch {
+      /* silent */
+    } finally {
+      setDeleteConfirm(null)
+    }
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h2 className="text-xl font-bold text-blue-950 dark:text-white">Plan features</h2>
+          <p className="mt-0.5 text-sm text-stone-500 dark:text-slate-400">
+            Control the feature bullets shown on each public pricing card.
+          </p>
+        </div>
+        {formState === 'hidden' && (
+          <button type="button" onClick={() => openCreate()}
+            className="btn-primary inline-flex items-center gap-1.5"
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+            New feature
+          </button>
+        )}
+      </div>
+
+      {formState !== 'hidden' && (
+        <PlanFeatureFormPanel
+          initial={formInitial}
+          onSave={handleSave}
+          onCancel={() => setFormState('hidden')}
+          saving={saving}
+          error={formError}
+        />
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-10">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" />
+        </div>
+      ) : features.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-stone-300 bg-stone-50 py-10 text-center dark:border-blue-800 dark:bg-[#07101e]">
+          <p className="text-sm text-stone-400 dark:text-slate-500">No plan features yet. Create one above.</p>
+        </div>
+      ) : (
+        <div className="grid gap-4 lg:grid-cols-3">
+          {PLANS.map((plan) => {
+            const planFeatures = features.filter((feature) => feature.plan === plan)
+            return (
+              <div key={plan} className="rounded-2xl border border-stone-200/80 bg-white p-5 shadow-sm dark:border-blue-900 dark:bg-[#0d1b38]">
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <p className={`text-sm font-bold ${PLAN_COLORS[plan]}`}>{plan}</p>
+                    <p className="mt-0.5 text-xs text-stone-400 dark:text-slate-500">{planFeatures.length} feature{planFeatures.length === 1 ? '' : 's'}</p>
+                  </div>
+                  {formState === 'hidden' && (
+                    <button
+                      type="button"
+                      onClick={() => openCreate(plan)}
+                      className="rounded-full border border-stone-200 bg-white px-3 py-1.5 text-xs font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-transparent dark:text-slate-200 dark:hover:bg-[#162038]"
+                    >
+                      Add
+                    </button>
+                  )}
+                </div>
+
+                <div className="mt-4 space-y-2">
+                  {planFeatures.length === 0 ? (
+                    <div className="rounded-xl border border-dashed border-stone-200 px-3 py-4 text-center text-xs text-stone-400 dark:border-blue-900 dark:text-slate-500">
+                      No features for this plan.
+                    </div>
+                  ) : planFeatures.map((feature) => (
+                    <div key={feature.id} className={`rounded-xl border px-3 py-3 ${formState === feature.id ? 'border-orange-400 bg-orange-50/40 dark:border-orange-500/40 dark:bg-[#12101e]' : 'border-stone-100 bg-stone-50/60 dark:border-blue-900 dark:bg-[#07101e]'}`}>
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-stone-800 dark:text-slate-100">{feature.label}</p>
+                          <p className="mt-1 text-[11px] uppercase tracking-[0.14em] text-stone-400 dark:text-slate-500">Order {feature.sortOrder}</p>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <button type="button" onClick={() => openEdit(feature)}
+                            className="rounded-lg p-1.5 text-stone-400 transition hover:bg-stone-100 hover:text-stone-700 dark:hover:bg-[#162038] dark:hover:text-slate-200"
+                            title="Edit"
+                          >
+                            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
+                            </svg>
+                          </button>
+                          {deleteConfirm === feature.id ? (
+                            <>
+                              <button type="button" onClick={() => handleDelete(feature.id)}
+                                className="rounded-lg px-2 py-1 text-[11px] font-semibold text-red-400 transition hover:bg-red-900/20"
+                              >Confirm</button>
+                              <button type="button" onClick={() => setDeleteConfirm(null)}
+                                className="rounded-lg px-2 py-1 text-[11px] font-semibold text-stone-400 transition hover:bg-stone-100 dark:hover:bg-[#162038]"
+                              >Cancel</button>
+                            </>
+                          ) : (
+                            <button type="button" onClick={() => setDeleteConfirm(feature.id)}
+                              className="rounded-lg p-1.5 text-stone-400 transition hover:bg-red-900/20 hover:text-red-400"
+                              title="Delete"
+                            >
+                              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                              </svg>
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ─── Promotion form ─────────────────────────────────────────────────────────
+
+function PromotionFormPanel({
+  initial, onSave, onCancel, saving, error,
+}: {
+  initial: PromoForm
+  onSave: (form: PromoForm) => void
+  onCancel: () => void
+  saving: boolean
+  error: string
+}) {
+  const [form, setForm] = useState<PromoForm>(initial)
+
+  useEffect(() => {
+    setForm(initial)
+  }, [initial])
+
+  function set<K extends keyof PromoForm>(k: K, v: PromoForm[K]) {
+    setForm((f) => ({ ...f, [k]: v }))
+  }
+
+  function toggleArr(field: 'plans' | 'periods', val: string) {
+    setForm((f) => {
+      const arr = f[field]
+      return { ...f, [field]: arr.includes(val) ? arr.filter((x) => x !== val) : [...arr, val] }
+    })
+  }
+
+  const INPUT = 'w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-blue-900 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e] dark:text-white'
+  const LABEL = 'mb-1.5 block text-xs font-semibold uppercase tracking-[0.14em] text-stone-500 dark:text-slate-400'
+
+  return (
+    <div className="rounded-2xl border border-orange-400/30 bg-orange-50/40 p-6 dark:border-orange-500/20 dark:bg-[#12101e]">
+      {error && <div className="mb-4 rounded-xl border border-red-800/40 bg-red-900/20 px-4 py-3 text-sm text-red-400">{error}</div>}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label>
+          <span className={LABEL}>Promo code *</span>
+          <input className={INPUT} placeholder="LAUNCH50" value={form.code}
+            onChange={(e) => set('code', e.target.value.toUpperCase().replace(/[^A-Z0-9_-]/g, ''))}
+          />
+          <p className="mt-1 text-[11px] text-stone-400 dark:text-slate-500">Uppercase letters, numbers, _ and - only</p>
+        </label>
+
+        <label>
+          <span className={LABEL}>Name *</span>
+          <input className={INPUT} placeholder="Launch promotion" value={form.name}
+            onChange={(e) => set('name', e.target.value)}
+          />
+        </label>
+
+        <label className="sm:col-span-2">
+          <span className={LABEL}>Description</span>
+          <input className={INPUT} placeholder="Optional internal note" value={form.description}
+            onChange={(e) => set('description', e.target.value)}
+          />
+        </label>
+
+        <div>
+          <span className={LABEL}>Discount type *</span>
+          <div className="flex gap-2">
+            {(['PERCENTAGE', 'FIXED'] as const).map((t) => (
+              <button key={t} type="button"
+                onClick={() => set('discountType', t)}
+                className={`flex-1 rounded-xl border px-3 py-2 text-xs font-semibold transition ${
+                  form.discountType === t
+                    ? 'border-orange-500 bg-orange-500 text-white'
+                    : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 dark:border-blue-800 dark:bg-[#07101e] dark:text-slate-300'
+                }`}
+              >
+                {t === 'PERCENTAGE' ? '% Percentage' : 'MAD Fixed'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <label>
+          <span className={LABEL}>
+            {form.discountType === 'PERCENTAGE' ? 'Discount % (1–100) *' : 'Discount amount (MAD) *'}
+          </span>
+          <div className="flex items-center gap-1">
+            <input type="number" min="1" step={form.discountType === 'PERCENTAGE' ? '1' : '0.01'}
+              max={form.discountType === 'PERCENTAGE' ? '100' : undefined}
+              className={INPUT} placeholder={form.discountType === 'PERCENTAGE' ? '20' : '50.00'}
+              value={form.discountValue}
+              onChange={(e) => set('discountValue', e.target.value)}
+            />
+            <span className="shrink-0 text-xs font-medium text-stone-400 dark:text-slate-500">
+              {form.discountType === 'PERCENTAGE' ? '%' : 'MAD'}
+            </span>
+          </div>
+        </label>
+
+        <div>
+          <span className={LABEL}>Applicable plans</span>
+          <p className="mb-2 text-[11px] text-stone-400 dark:text-slate-500">Leave empty to apply to all plans</p>
+          <div className="flex flex-wrap gap-2">
+            {PLANS.map((p) => (
+              <button key={p} type="button" onClick={() => toggleArr('plans', p)}
+                className={`rounded-full border px-3 py-1 text-xs font-semibold transition ${
+                  form.plans.includes(p)
+                    ? 'border-orange-500 bg-orange-500 text-white'
+                    : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 dark:border-blue-800 dark:bg-[#07101e] dark:text-slate-300'
+                }`}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <span className={LABEL}>Applicable periods</span>
+          <p className="mb-2 text-[11px] text-stone-400 dark:text-slate-500">Leave empty to apply to all periods</p>
+          <div className="flex flex-wrap gap-2">
+            {PERIODS.map((p) => (
+              <button key={p} type="button" onClick={() => toggleArr('periods', p)}
+                className={`rounded-full border px-3 py-1 text-xs font-semibold transition ${
+                  form.periods.includes(p)
+                    ? 'border-orange-500 bg-orange-500 text-white'
+                    : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 dark:border-blue-800 dark:bg-[#07101e] dark:text-slate-300'
+                }`}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <label>
+          <span className={LABEL}>Valid from *</span>
+          <input type="date" className={INPUT} value={form.validFrom}
+            onChange={(e) => set('validFrom', e.target.value)}
+          />
+        </label>
+
+        <label>
+          <span className={LABEL}>Valid until</span>
+          <input type="date" className={INPUT} value={form.validUntil}
+            onChange={(e) => set('validUntil', e.target.value)}
+          />
+          <p className="mt-1 text-[11px] text-stone-400 dark:text-slate-500">Leave empty for no expiry</p>
+        </label>
+
+        <label>
+          <span className={LABEL}>Max uses</span>
+          <input type="number" min="1" step="1" className={INPUT} placeholder="Unlimited"
+            value={form.maxUses} onChange={(e) => set('maxUses', e.target.value)}
+          />
+        </label>
+
+        <div className="flex items-center gap-3 self-end pb-2">
+          <span className={LABEL + ' mb-0'}>Active</span>
+          <button type="button" onClick={() => set('isActive', !form.isActive)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${form.isActive ? 'bg-orange-500' : 'bg-stone-300 dark:bg-zinc-600'}`}
+          >
+            <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${form.isActive ? 'translate-x-6' : 'translate-x-1'}`} />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-6 flex justify-end gap-3">
+        <button type="button" onClick={onCancel}
+          className="rounded-full border border-stone-200 bg-white px-5 py-2 text-sm font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-transparent dark:text-slate-200 dark:hover:bg-[#162038]"
+        >
+          Cancel
+        </button>
+        <button type="button" onClick={() => onSave(form)} disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? 'Saving…' : 'Save promotion'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ─── Promotions section ─────────────────────────────────────────────────────
+
+function PromotionsSection() {
+  const [promotions, setPromotions] = useState<Promotion[]>([])
+  const [loading, setLoading] = useState(true)
+  const [formState, setFormState] = useState<'hidden' | 'create' | string>('hidden') // string = editing id
+  const [formInitial, setFormInitial] = useState<PromoForm>(emptyPromoForm())
+  const [saving, setSaving] = useState(false)
+  const [formError, setFormError] = useState('')
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${ADMIN_API_BASE}/admin/pricing/promotions`, { headers: authHeaders(), credentials: 'include' })
+      .then(async (r) => {
+        const json = await r.json()
+        if (!r.ok) throw new Error(json?.message ?? 'Failed to load promotions')
+        setPromotions(json.data ?? [])
+      })
+      .finally(() => setLoading(false))
+  }, [])
+
+  function openCreate() {
+    setFormInitial(emptyPromoForm())
+    setFormError('')
+    setFormState('create')
+  }
+
+  function openEdit(promo: Promotion) {
+    setFormInitial({
+      code: promo.code,
+      name: promo.name,
+      description: promo.description ?? '',
+      discountType: promo.discountType,
+      discountValue: promo.discountType === 'FIXED'
+        ? fmtCentimes(promo.discountValue)
+        : String(promo.discountValue),
+      plans: promo.plans,
+      periods: promo.periods,
+      maxUses: promo.maxUses != null ? String(promo.maxUses) : '',
+      validFrom: toDateInputValue(promo.validFrom),
+      validUntil: toDateInputValue(promo.validUntil),
+      isActive: promo.isActive,
+    })
+    setFormError('')
+    setFormState(promo.id)
+  }
+
+  function buildPayload(form: PromoForm) {
+    if (!form.code)  return { error: 'Code is required' }
+    if (!form.name)  return { error: 'Name is required' }
+    if (!form.discountValue) return { error: 'Discount value is required' }
+    if (!form.validFrom) return { error: 'Valid from date is required' }
+
+    const rawVal = parseFloat(form.discountValue)
+    if (isNaN(rawVal) || rawVal <= 0) return { error: 'Discount value must be a positive number' }
+    if (form.discountType === 'PERCENTAGE' && rawVal > 100) return { error: 'Percentage cannot exceed 100' }
+
+    const discountValue = form.discountType === 'FIXED'
+      ? Math.round(rawVal * 100)
+      : Math.round(rawVal)
+
+    return {
+      payload: {
+        code: form.code,
+        name: form.name,
+        description: form.description || undefined,
+        discountType: form.discountType,
+        discountValue,
+        plans: form.plans,
+        periods: form.periods,
+        maxUses: form.maxUses ? parseInt(form.maxUses, 10) : null,
+        validFrom: new Date(form.validFrom).toISOString(),
+        validUntil: form.validUntil ? new Date(form.validUntil).toISOString() : null,
+        isActive: form.isActive,
+      },
+    }
+  }
+
+  async function handleSave(form: PromoForm) {
+    setFormError('')
+    const result = buildPayload(form)
+    if ('error' in result) {
+      setFormError(result.error ?? 'Invalid promotion form')
+      return
+    }
+
+    setSaving(true)
+    try {
+      const isEdit = formState !== 'create'
+      const url = isEdit
+        ? `${ADMIN_API_BASE}/admin/pricing/promotions/${formState}`
+        : `${ADMIN_API_BASE}/admin/pricing/promotions`
+      const res = await fetch(url, {
+        method: isEdit ? 'PATCH' : 'POST',
+        headers: { 'Content-Type': 'application/json', ...authHeaders() },
+        credentials: 'include',
+        body: JSON.stringify(result.payload),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Save failed')
+      const saved: Promotion = json.data
+      setPromotions((prev) =>
+        isEdit ? prev.map((p) => (p.id === saved.id ? saved : p)) : [saved, ...prev],
+      )
+      setFormState('hidden')
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleToggleActive(promo: Promotion) {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/pricing/promotions/${promo.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', ...authHeaders() },
+        credentials: 'include',
+        body: JSON.stringify({ isActive: !promo.isActive }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Failed')
+      setPromotions((prev) => prev.map((p) => (p.id === promo.id ? json.data : p)))
+    } catch { /* silent */ }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/pricing/promotions/${id}`, {
+        method: 'DELETE',
+        headers: authHeaders(),
+      credentials: 'include',
+      })
+      if (!res.ok) throw new Error('Delete failed')
+      setPromotions((prev) => prev.filter((p) => p.id !== id))
+    } catch { /* silent */ } finally {
+      setDeleteConfirm(null)
+    }
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h2 className="text-xl font-bold text-blue-950 dark:text-white">Promotions &amp; discounts</h2>
+          <p className="mt-0.5 text-sm text-stone-500 dark:text-slate-400">
+            Promo codes applied during checkout to reduce subscription prices.
+          </p>
+        </div>
+        {formState === 'hidden' && (
+          <button type="button" onClick={openCreate}
+            className="btn-primary inline-flex items-center gap-1.5"
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+            New promotion
+          </button>
+        )}
+      </div>
+
+      {formState !== 'hidden' && (
+        <PromotionFormPanel
+          initial={formInitial}
+          onSave={handleSave}
+          onCancel={() => setFormState('hidden')}
+          saving={saving}
+          error={formError}
+        />
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-10">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" />
+        </div>
+      ) : promotions.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-stone-300 bg-stone-50 py-10 text-center dark:border-blue-800 dark:bg-[#07101e]">
+          <p className="text-sm text-stone-400 dark:text-slate-500">No promotions yet. Create one above.</p>
+        </div>
+      ) : (
+        <div className="rounded-2xl border border-stone-200/80 bg-white shadow-sm dark:border-blue-900 dark:bg-[#0d1b38] overflow-hidden">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="border-b border-stone-200/80 dark:border-blue-900">
+                {['Code', 'Name', 'Discount', 'Plans', 'Periods', 'Validity', 'Uses', 'Status', ''].map((h) => (
+                  <th key={h} className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.14em] text-stone-500 dark:text-slate-400">
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {promotions.map((promo, i) => {
+                const isExpired = promo.validUntil && new Date(promo.validUntil) < new Date()
+                const isEditing = formState === promo.id
+                return (
+                  <tr key={promo.id}
+                    className={`${i < promotions.length - 1 ? 'border-b border-stone-100 dark:border-blue-900/60' : ''} ${isEditing ? 'bg-orange-50/40 dark:bg-[#12101e]' : ''}`}
+                  >
+                    <td className="px-4 py-3">
+                      <span className="font-mono text-xs font-bold text-orange-600 dark:text-orange-400">{promo.code}</span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="font-medium text-stone-800 dark:text-slate-100">{promo.name}</p>
+                      {promo.description && <p className="mt-0.5 text-xs text-stone-400 dark:text-slate-500">{promo.description}</p>}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap">
+                      <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold ${
+                        promo.discountType === 'PERCENTAGE'
+                          ? 'bg-sky-900/30 text-sky-300'
+                          : 'bg-emerald-900/30 text-emerald-300'
+                      }`}>
+                        {promo.discountType === 'PERCENTAGE'
+                          ? `${promo.discountValue}%`
+                          : `${fmtCentimes(promo.discountValue)} MAD`}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      {promo.plans.length === 0 ? (
+                        <span className="text-xs text-stone-400 dark:text-slate-500">All</span>
+                      ) : (
+                        <div className="flex flex-wrap gap-1">
+                          {promo.plans.map((p) => (
+                            <span key={p} className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${PLAN_BADGE[p] ?? 'bg-zinc-800 text-zinc-300'}`}>{p}</span>
+                          ))}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      {promo.periods.length === 0 ? (
+                        <span className="text-xs text-stone-400 dark:text-slate-500">All</span>
+                      ) : (
+                        <div className="flex flex-wrap gap-1">
+                          {promo.periods.map((p) => (
+                            <span key={p} className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-bold text-zinc-300">{p}</span>
+                          ))}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-xs text-stone-500 dark:text-slate-400">
+                      <p>{fmtDate(promo.validFrom)}</p>
+                      <p className={isExpired ? 'text-red-400' : ''}>{promo.validUntil ? `→ ${fmtDate(promo.validUntil)}` : '→ No expiry'}</p>
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-xs text-stone-500 dark:text-slate-400">
+                      {promo.usedCount}{promo.maxUses != null ? ` / ${promo.maxUses}` : ''}
+                    </td>
+                    <td className="px-4 py-3">
+                      <button type="button" onClick={() => handleToggleActive(promo)}
+                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${promo.isActive && !isExpired ? 'bg-orange-500' : 'bg-stone-300 dark:bg-zinc-600'}`}
+                      >
+                        <span className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${promo.isActive ? 'translate-x-4' : 'translate-x-0.5'}`} />
+                      </button>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-1">
+                        <button type="button" onClick={() => openEdit(promo)}
+                          className="rounded-lg p-1.5 text-stone-400 transition hover:bg-stone-100 hover:text-stone-700 dark:hover:bg-[#162038] dark:hover:text-slate-200"
+                          title="Edit"
+                        >
+                          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
+                          </svg>
+                        </button>
+                        {deleteConfirm === promo.id ? (
+                          <>
+                            <button type="button" onClick={() => handleDelete(promo.id)}
+                              className="rounded-lg px-2 py-1 text-[11px] font-semibold text-red-400 transition hover:bg-red-900/20"
+                            >Confirm</button>
+                            <button type="button" onClick={() => setDeleteConfirm(null)}
+                              className="rounded-lg px-2 py-1 text-[11px] font-semibold text-stone-400 transition hover:bg-stone-100 dark:hover:bg-[#162038]"
+                            >Cancel</button>
+                          </>
+                        ) : (
+                          <button type="button" onClick={() => setDeleteConfirm(promo.id)}
+                            className="rounded-lg p-1.5 text-stone-400 transition hover:bg-red-900/20 hover:text-red-400"
+                            title="Delete"
+                          >
+                            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                            </svg>
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function PricingPage() {
+  const [configs, setConfigs] = useState<PricingConfig[]>([])
+  const [draft, setDraft] = useState<PricingDraft>({})
+  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [successMsg, setSuccessMsg] = useState('')
+
+  useEffect(() => {
+    fetch(`${ADMIN_API_BASE}/admin/pricing`, {
+      headers: authHeaders(),
+      credentials: 'include',
+      cache: 'no-store',
+    })
+      .then((r) => r.json())
+      .then((json) => {
+        if (!json?.data) throw new Error(json?.message ?? 'Failed to load')
+        const list: PricingConfig[] = json.data
+        setConfigs(list)
+        const initial: PricingDraft = {}
+        for (const c of list) initial[pricingKey(c.plan, c.billingPeriod)] = fmtCentimes(c.amount)
+        setDraft(initial)
+        setStatus('ready')
+      })
+      .catch((err) => { setError(err.message); setStatus('error') })
+  }, [])
+
+  async function handleSavePrices() {
+    setError('')
+    setSuccessMsg('')
+    const entries: { plan: string; billingPeriod: string; amount: number }[] = []
+    for (const plan of PLANS) {
+      for (const period of PERIODS) {
+        const k = pricingKey(plan, period)
+        const amount = parseCentimes(draft[k] ?? '')
+        if (amount === null) { setError(`Invalid value for ${plan} ${period}`); return }
+        entries.push({ plan, billingPeriod: period, amount })
+      }
+    }
+    setSaving(true)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/pricing`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', ...authHeaders() },
+        credentials: 'include',
+        body: JSON.stringify({ entries }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Save failed')
+      const updated: PricingConfig[] = json.data
+      setConfigs(updated)
+      const refreshed: PricingDraft = {}
+      for (const c of updated) refreshed[pricingKey(c.plan, c.billingPeriod)] = fmtCentimes(c.amount)
+      setDraft(refreshed)
+      setSuccessMsg('Prices saved successfully.')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" />
+      </div>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="card p-6 text-sm text-red-400">
+        <div>{error}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-10">
+      <div className="rdg-page-heading">
+        <div>
+        <p className="rdg-page-kicker">Platform</p>
+        <h1 className="mt-1 text-3xl font-black tracking-tight text-blue-950 dark:text-white">Subscription Pricing</h1>
+        <p className="mt-1 text-sm text-stone-500 dark:text-slate-400">
+          Manage plan prices, plan features, and promotional discount codes.
+        </p>
+        </div>
+      </div>
+
+      <PricingTable
+        configs={configs}
+        draft={draft}
+        onChange={(k, v) => setDraft((prev) => ({ ...prev, [k]: v }))}
+        onSave={handleSavePrices}
+        saving={saving}
+        error={error}
+        successMsg={successMsg}
+      />
+
+      <div className="border-t border-stone-200/80 dark:border-blue-900" />
+
+      <PlanFeaturesSection />
+
+      <div className="border-t border-stone-200/80 dark:border-blue-900" />
+
+      <PromotionsSection />
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/renters/page.tsx b/admin/src/app/dashboard/renters/page.tsx
new file mode 100644
index 0000000..927bf78
--- /dev/null
+++ b/admin/src/app/dashboard/renters/page.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAdminI18n } from '@/components/I18nProvider'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface Renter {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  isBlocked: boolean
+  createdAt: string
+}
+
+export default function AdminRentersPage() {
+  const { language, dict } = useAdminI18n()
+  const copy = {
+    en: {
+      title: 'Renters',
+      search: 'Search renters…',
+      name: 'Name',
+      email: 'Email',
+      phone: 'Phone',
+      status: 'Status',
+      joined: 'Joined',
+      loading: 'Loading…',
+      empty: 'No renters found',
+      blocked: 'Blocked',
+      active: 'Active',
+      unblock: 'Unblock',
+      block: 'Block',
+    },
+    fr: {
+      title: 'Locataires',
+      search: 'Rechercher des locataires…',
+      name: 'Nom',
+      email: 'E-mail',
+      phone: 'Téléphone',
+      status: 'Statut',
+      joined: 'Date d’inscription',
+      loading: 'Chargement…',
+      empty: 'Aucun locataire trouvé',
+      blocked: 'Bloqué',
+      active: 'Actif',
+      unblock: 'Débloquer',
+      block: 'Bloquer',
+    },
+    ar: {
+      title: 'المستأجرون',
+      search: 'ابحث عن مستأجرين…',
+      name: 'الاسم',
+      email: 'البريد الإلكتروني',
+      phone: 'الهاتف',
+      status: 'الحالة',
+      joined: 'تاريخ التسجيل',
+      loading: 'جارٍ التحميل…',
+      empty: 'لم يتم العثور على مستأجرين',
+      blocked: 'محظور',
+      active: 'نشط',
+      unblock: 'فك الحظر',
+      block: 'حظر',
+    },
+  }[language]
+  const [renters, setRenters] = useState<Renter[]>([])
+  const [filtered, setFiltered] = useState<Renter[]>([])
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [actioning, setActioning] = useState<string | null>(null)
+
+  async function fetchRenters() {
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/renters`, {
+        cache: 'no-store',
+        credentials: 'include',
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Failed')
+      const list = Array.isArray(json.data) ? json.data : (json.data?.data ?? [])
+      setRenters(list)
+      setFiltered(list)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchRenters() }, [])
+
+  useEffect(() => {
+    const q = search.toLowerCase()
+    setFiltered(renters.filter((r) =>
+      `${r.firstName} ${r.lastName}`.toLowerCase().includes(q) || r.email.toLowerCase().includes(q)
+    ))
+  }, [search, renters])
+
+  async function toggleBlock(id: string, isBlocked: boolean) {
+    setActioning(id)
+    try {
+      const endpoint = isBlocked ? 'unblock' : 'block'
+      const res = await fetch(`${ADMIN_API_BASE}/admin/renters/${id}/${endpoint}`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+      if (!res.ok) throw new Error('Action failed')
+      await fetchRenters()
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setActioning(null)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div>
+          <p className="rdg-page-kicker">{dict.platform}</p>
+          <h1 className="mt-1 text-3xl font-black">{copy.title}</h1>
+        </div>
+        <input
+          className="w-64 px-3 py-2 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          placeholder={copy.search}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.name}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.email}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.phone}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.status}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-zinc-500 uppercase tracking-wider">{copy.joined}</th>
+                <th className="px-6 py-3" />
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">{copy.loading}</td></tr>
+              ) : filtered.length === 0 ? (
+                <tr><td colSpan={6} className="px-6 py-12 text-center text-zinc-500">{copy.empty}</td></tr>
+              ) : filtered.map((r) => (
+                <tr key={r.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="px-6 py-4 font-medium text-zinc-100">{r.firstName} {r.lastName}</td>
+                  <td className="px-6 py-4 text-zinc-400">{r.email}</td>
+                  <td className="px-6 py-4 text-zinc-400">{r.phone ?? '—'}</td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                      r.isBlocked ? 'text-red-400 bg-red-950/40' : 'text-emerald-400 bg-emerald-950/40'
+                    }`}>
+                      {r.isBlocked ? copy.blocked : copy.active}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-zinc-500 text-xs">{new Date(r.createdAt).toLocaleDateString()}</td>
+                  <td className="px-6 py-4">
+                    <button
+                      onClick={() => toggleBlock(r.id, r.isBlocked)}
+                      disabled={actioning === r.id}
+                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors disabled:opacity-50 ${
+                        r.isBlocked
+                          ? 'bg-emerald-950/50 hover:bg-emerald-900/50 text-emerald-400'
+                          : 'bg-red-950/50 hover:bg-red-900/50 text-red-400'
+                      }`}
+                    >
+                      {r.isBlocked ? copy.unblock : copy.block}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/app/dashboard/site-config/page.tsx b/admin/src/app/dashboard/site-config/page.tsx
new file mode 100644
index 0000000..0142373
--- /dev/null
+++ b/admin/src/app/dashboard/site-config/page.tsx
@@ -0,0 +1,799 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import {
+  cloneMarketplaceHomepageContent,
+  resolveMarketplaceHomepageSections,
+  type MarketplaceHomepageConfig,
+  type MarketplaceHomepageContent,
+  type MarketplaceHomepageSectionType,
+  type MarketplaceLanguage,
+} from '@rentaldrivego/types'
+import { useAdminI18n } from '@/components/I18nProvider'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface Company {
+  id: string
+  name: string
+  slug: string
+  status: string
+  email: string
+  brand: {
+    displayName: string | null
+  } | null
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'text-emerald-400 bg-emerald-900/30',
+  TRIALING: 'text-sky-400 bg-sky-900/30',
+  SUSPENDED: 'text-red-400 bg-red-900/30',
+  PENDING: 'text-orange-400 bg-orange-900/30',
+  CANCELLED: 'text-zinc-400 bg-zinc-800',
+}
+
+const INPUT_CLASS = 'w-full rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500'
+const LABEL_CLASS = 'mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500'
+
+function cloneHomepageContent(content: MarketplaceHomepageConfig) {
+  const cloned = JSON.parse(JSON.stringify(content)) as MarketplaceHomepageConfig
+  ;(['en', 'fr', 'ar'] as MarketplaceLanguage[]).forEach((language) => {
+    cloned[language].sections = resolveMarketplaceHomepageSections(cloned[language].sections)
+  })
+  return cloned
+}
+
+const HOMEPAGE_SECTIONS: MarketplaceHomepageSectionType[] = [
+  'hero',
+  'surface',
+  'pillars',
+  'audiences',
+  'features',
+  'steps',
+  'closing',
+]
+
+export default function AdminSiteConfigPage() {
+  const { language, dict } = useAdminI18n()
+  const copy = {
+    en: {
+      title: 'Site configuration',
+      description: 'Edit the main marketplace homepage here, or jump into a company to manage its branded public homepage and menu.',
+      homepageTitle: 'Main website homepage',
+      homepageDescription: 'This controls the marketplace homepage shown on the main RentalDriveGo website.',
+      saveHomepage: 'Save homepage',
+      savingHomepage: 'Saving…',
+      homepageSaved: 'Marketplace homepage saved.',
+      search: 'Search by company or slug…',
+      loading: 'Loading…',
+      empty: 'No companies found',
+      company: 'Company',
+      slug: 'Slug',
+      status: 'Status',
+      actions: 'Actions',
+      configure: 'Configure site',
+      manageCompany: 'Open company',
+      companiesTitle: 'Company branded sites',
+      languageLabel: 'Language',
+      hero: 'Hero',
+      surface: 'Surface',
+      companySection: 'Operator card',
+      renterSection: 'Renter card',
+      valueSection: 'Value blocks',
+      featureSection: 'Feature list',
+      stepsSection: 'Launch steps',
+      closingSection: 'Closing call to action',
+      previewTitle: 'Live preview',
+      previewDescription: 'Draft changes appear here before you save them.',
+      homepageSections: 'Homepage sections',
+      homepageSectionsDescription: 'Add or remove blocks from the main marketplace homepage.',
+      addSection: 'Add',
+      removeSection: 'Remove',
+      expand: 'Expand',
+      collapse: 'Collapse',
+    },
+    fr: {
+      title: 'Configuration du site',
+      description: 'Modifiez ici la page d’accueil principale de la marketplace, ou ouvrez une entreprise pour gérer sa page publique et son menu.',
+      homepageTitle: 'Page d’accueil du site principal',
+      homepageDescription: 'Cette section contrôle la page d’accueil marketplace affichée sur le site principal de RentalDriveGo.',
+      saveHomepage: 'Enregistrer la page d’accueil',
+      savingHomepage: 'Enregistrement…',
+      homepageSaved: 'Page d’accueil marketplace enregistrée.',
+      search: 'Rechercher par entreprise ou slug…',
+      loading: 'Chargement…',
+      empty: 'Aucune entreprise trouvée',
+      company: 'Entreprise',
+      slug: 'Slug',
+      status: 'Statut',
+      actions: 'Actions',
+      configure: 'Configurer le site',
+      manageCompany: 'Ouvrir l’entreprise',
+      companiesTitle: 'Sites de marque des entreprises',
+      languageLabel: 'Langue',
+      hero: 'Bloc principal',
+      surface: 'Bloc marketplace',
+      companySection: 'Bloc opérateur',
+      renterSection: 'Bloc client',
+      valueSection: 'Blocs de valeur',
+      featureSection: 'Liste des fonctionnalités',
+      stepsSection: 'Étapes de lancement',
+      closingSection: 'Appel à l’action final',
+      previewTitle: 'Aperçu en direct',
+      previewDescription: 'Les brouillons apparaissent ici avant l’enregistrement.',
+      homepageSections: 'Sections de la page d’accueil',
+      homepageSectionsDescription: 'Ajoutez ou retirez des blocs de la page d’accueil marketplace principale.',
+      addSection: 'Ajouter',
+      removeSection: 'Retirer',
+      expand: 'Ouvrir',
+      collapse: 'Réduire',
+    },
+    ar: {
+      title: 'إعدادات الموقع',
+      description: 'عدّل الصفحة الرئيسية للموقع الرئيسي هنا، أو افتح شركة لإدارة صفحتها العامة وقائمة التنقل الخاصة بها.',
+      homepageTitle: 'الصفحة الرئيسية للموقع الرئيسي',
+      homepageDescription: 'هذا القسم يتحكم في الصفحة الرئيسية للمنصة على موقع RentalDriveGo الرئيسي.',
+      saveHomepage: 'حفظ الصفحة الرئيسية',
+      savingHomepage: 'جارٍ الحفظ…',
+      homepageSaved: 'تم حفظ الصفحة الرئيسية للمنصة.',
+      search: 'ابحث باسم الشركة أو slug…',
+      loading: 'جارٍ التحميل…',
+      empty: 'لم يتم العثور على شركات',
+      company: 'الشركة',
+      slug: 'Slug',
+      status: 'الحالة',
+      actions: 'الإجراءات',
+      configure: 'إعداد الموقع',
+      manageCompany: 'فتح الشركة',
+      companiesTitle: 'المواقع العامة للشركات',
+      languageLabel: 'اللغة',
+      hero: 'البطاقة الرئيسية',
+      surface: 'قسم المنصة',
+      companySection: 'بطاقة المشغل',
+      renterSection: 'بطاقة المستأجر',
+      valueSection: 'عناصر القيمة',
+      featureSection: 'قائمة الميزات',
+      stepsSection: 'خطوات الإطلاق',
+      closingSection: 'الدعوة الختامية',
+      previewTitle: 'معاينة مباشرة',
+      previewDescription: 'تظهر التغييرات هنا قبل الحفظ.',
+      homepageSections: 'أقسام الصفحة الرئيسية',
+      homepageSectionsDescription: 'أضف أو احذف كتل الصفحة الرئيسية للمنصة.',
+      addSection: 'إضافة',
+      removeSection: 'إزالة',
+      expand: 'توسيع',
+      collapse: 'طي',
+    },
+  }[language]
+
+  const [companies, setCompanies] = useState<Company[]>([])
+  const [filtered, setFiltered] = useState<Company[]>([])
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [homepage, setHomepage] = useState<MarketplaceHomepageConfig>(cloneMarketplaceHomepageContent())
+  const [homepageLanguage, setHomepageLanguage] = useState<MarketplaceLanguage>(language)
+  const [homepageSaving, setHomepageSaving] = useState(false)
+  const [homepageMessage, setHomepageMessage] = useState<string | null>(null)
+  const [homepageExpanded, setHomepageExpanded] = useState(false)
+
+  useEffect(() => {
+    setHomepageLanguage(language)
+  }, [language])
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [companiesRes, homepageRes] = await Promise.all([
+          fetch(`${ADMIN_API_BASE}/admin/companies`, {
+            credentials: 'include',
+            cache: 'no-store',
+          }),
+          fetch(`${ADMIN_API_BASE}/admin/site-config/marketplace-homepage`, {
+            credentials: 'include',
+            cache: 'no-store',
+          }),
+        ])
+
+        const companiesJson = await companiesRes.json()
+        if (!companiesRes.ok) throw new Error(companiesJson?.message ?? 'Failed to fetch companies')
+        setCompanies(companiesJson.data?.data ?? [])
+        setFiltered(companiesJson.data?.data ?? [])
+
+        const homepageJson = await homepageRes.json()
+        if (homepageRes.ok && homepageJson?.data) {
+          setHomepage(cloneHomepageContent(homepageJson.data as MarketplaceHomepageConfig))
+        }
+      } catch (err: any) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+  }, [])
+
+  useEffect(() => {
+    const q = search.toLowerCase()
+    setFiltered(
+      companies.filter((company) =>
+        company.name.toLowerCase().includes(q)
+        || company.slug.toLowerCase().includes(q)
+        || company.email.toLowerCase().includes(q),
+      ),
+    )
+  }, [search, companies])
+
+  function updateHomepageContent(patch: Partial<MarketplaceHomepageContent>) {
+    setHomepage((current) => ({
+      ...current,
+      [homepageLanguage]: {
+        ...current[homepageLanguage],
+        ...patch,
+      },
+    }))
+  }
+
+  function updateMetric(index: number, label: string) {
+    const metrics = homepage[homepageLanguage].metrics.map((metric, metricIndex) => (
+      metricIndex === index ? { ...metric, label } : metric
+    ))
+    updateHomepageContent({ metrics })
+  }
+
+  function updatePillar(index: number, patch: { title?: string; body?: string }) {
+    const pillars = homepage[homepageLanguage].pillars.map((pillar, pillarIndex) => (
+      pillarIndex === index ? { ...pillar, ...patch } : pillar
+    ))
+    updateHomepageContent({ pillars })
+  }
+
+  function updateStep(index: number, patch: { title?: string; body?: string }) {
+    const steps = homepage[homepageLanguage].steps.map((step, stepIndex) => (
+      stepIndex === index ? { ...step, ...patch } : step
+    ))
+    updateHomepageContent({ steps })
+  }
+
+  function getActiveSections() {
+    return resolveMarketplaceHomepageSections(activeContent.sections)
+  }
+
+  function addHomepageSection(section: MarketplaceHomepageSectionType) {
+    const sections = getActiveSections()
+    if (sections.includes(section)) return
+    updateHomepageContent({ sections: [...sections, section] })
+  }
+
+  function removeHomepageSection(section: MarketplaceHomepageSectionType) {
+    const sections = getActiveSections().filter((item) => item !== section)
+    if (sections.length === 0) return
+    updateHomepageContent({ sections })
+  }
+
+  async function saveHomepage() {
+    setHomepageSaving(true)
+    setHomepageMessage(null)
+    try {
+      const res = await fetch(`${ADMIN_API_BASE}/admin/site-config/marketplace-homepage`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({ homepage }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.message ?? 'Failed to save homepage')
+      setHomepage(cloneHomepageContent(json.data as MarketplaceHomepageConfig))
+      setHomepageMessage(copy.homepageSaved)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setHomepageSaving(false)
+    }
+  }
+
+  const activeContent = homepage[homepageLanguage]
+  const activeSections = getActiveSections()
+  const availableSections = HOMEPAGE_SECTIONS.filter((section) => !activeSections.includes(section))
+  const sectionLabels: Record<MarketplaceHomepageSectionType, string> = {
+    hero: copy.hero,
+    surface: copy.surface,
+    pillars: copy.valueSection,
+    audiences: `${copy.companySection} / ${copy.renterSection}`,
+    features: copy.featureSection,
+    howitworks: language === 'fr' ? 'Fonctionnement' : language === 'ar' ? 'كيفية العمل' : 'How it works',
+    steps: copy.stepsSection,
+    testimonials: language === 'fr' ? 'Témoignages' : language === 'ar' ? 'الشهادات' : 'Testimonials',
+    closing: copy.closingSection,
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+        <div>
+          <p className="rdg-page-kicker">{dict.platform}</p>
+          <h1 className="mt-1 text-3xl font-black">{copy.title}</h1>
+          <p className="mt-2 max-w-3xl text-sm text-zinc-500">{copy.description}</p>
+        </div>
+        <input
+          className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 xl:w-72"
+          placeholder={copy.search}
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+      </div>
+
+      {error ? <div className="panel p-4 text-sm text-red-400">{error}</div> : null}
+
+      <section className="panel p-6">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-100">{copy.homepageTitle}</h2>
+            <p className="mt-1 text-sm text-zinc-500">{copy.homepageDescription}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">{copy.languageLabel}</span>
+              {(['en', 'fr', 'ar'] as MarketplaceLanguage[]).map((value) => (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setHomepageLanguage(value)}
+                  className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+                    homepageLanguage === value ? 'bg-emerald-500 text-white' : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
+                  }`}
+                >
+                  {value.toUpperCase()}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={() => setHomepageExpanded((current) => !current)}
+              className="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-xs font-semibold text-zinc-200 transition hover:border-zinc-600 hover:bg-zinc-800"
+            >
+              {homepageExpanded ? copy.collapse : copy.expand}
+            </button>
+          </div>
+        </div>
+
+        {homepageExpanded ? (
+          <>
+            {homepageMessage ? <div className="mt-4 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">{homepageMessage}</div> : null}
+
+            <div className="mt-6 rounded-2xl border border-zinc-800 bg-zinc-950/60 p-4">
+              <h3 className="text-sm font-semibold text-zinc-100">{copy.homepageSections}</h3>
+              <p className="mt-1 text-xs text-zinc-500">{copy.homepageSectionsDescription}</p>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                {activeSections.map((section) => (
+                  <div key={section} className="inline-flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-xs font-semibold text-zinc-200">
+                    <span>{sectionLabels[section]}</span>
+                    <button
+                      type="button"
+                      onClick={() => removeHomepageSection(section)}
+                      className="rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-rose-300"
+                    >
+                      {copy.removeSection}
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {availableSections.length ? (
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {availableSections.map((section) => (
+                    <button
+                      key={section}
+                      type="button"
+                      onClick={() => addHomepageSection(section)}
+                      className="rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-semibold text-emerald-300 transition hover:bg-blue-800/20"
+                    >
+                      {copy.addSection} {sectionLabels[section]}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+
+            <div className="mt-6 rounded-[1.75rem] border border-zinc-800 bg-zinc-950/60 p-4">
+          <div className="flex items-center justify-between gap-4 border-b border-zinc-800 pb-4">
+            <div>
+              <h3 className="text-sm font-semibold text-zinc-100">{copy.previewTitle}</h3>
+              <p className="mt-1 text-xs text-zinc-500">{copy.previewDescription}</p>
+            </div>
+            <span className="rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-300">
+              {homepageLanguage.toUpperCase()}
+            </span>
+          </div>
+
+          <div className="mt-4 overflow-hidden rounded-[1.5rem] border border-stone-200 bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] shadow-2xl shadow-black/20">
+            <div className="border-b border-stone-200 bg-white/90 px-5 py-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p className="text-xs font-bold uppercase tracking-[0.32em] text-orange-700">{activeContent.heroKicker}</p>
+                  <p className="mt-2 text-sm text-stone-500">rentaldrivego.com</p>
+                </div>
+                <div className="flex flex-wrap gap-2 text-xs font-semibold text-stone-600">
+                  {activeContent.metrics.map((metric) => (
+                    <span key={metric.value} className="rounded-full border border-stone-300 bg-white px-3 py-1.5">
+                      {metric.label}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-10 px-5 py-6 lg:px-8">
+              {activeSections.includes('hero') ? <section className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
+                <div>
+                  <h4 className="text-4xl font-black tracking-[-0.04em] text-blue-950">{activeContent.heroTitle}</h4>
+                  <p className="mt-5 max-w-2xl text-base leading-8 text-stone-600">{activeContent.heroBody}</p>
+                  <div className="mt-8 flex flex-wrap gap-3">
+                    <span className="rounded-full bg-orange-600 px-5 py-3 text-sm font-semibold text-white">{activeContent.startTrial}</span>
+                    <span className="rounded-full border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-700">{activeContent.exploreVehicles}</span>
+                  </div>
+                </div>
+                {activeSections.includes('surface') ? (
+                <div className="rounded-[1.5rem] bg-[#06132e] p-6 text-white">
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
+                      {activeContent.surfaceLabel}
+                    </span>
+                    <span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
+                      {activeContent.liveLabel}
+                    </span>
+                  </div>
+                  <h5 className="mt-5 text-2xl font-black tracking-[-0.03em]">{activeContent.surfaceTitle}</h5>
+                  <p className="mt-4 text-sm leading-7 text-stone-300">{activeContent.surfaceBody}</p>
+                  <div className="mt-6 space-y-3">
+                    {[activeContent.trustedFleets, activeContent.brandedFlows, activeContent.multiTenant].map((item, index) => (
+                      <div key={`${item}-${index}`} className="rounded-[1.25rem] border border-white/10 bg-white/5 px-4 py-3 text-sm font-semibold">
+                        {item}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                ) : null}
+              </section> : null}
+
+              {activeSections.includes('surface') && !activeSections.includes('hero') ? (
+              <section className="rounded-[1.5rem] bg-[#06132e] p-6 text-white">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
+                    {activeContent.surfaceLabel}
+                  </span>
+                  <span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
+                    {activeContent.liveLabel}
+                  </span>
+                </div>
+                <h5 className="mt-5 text-2xl font-black tracking-[-0.03em]">{activeContent.surfaceTitle}</h5>
+                <p className="mt-4 text-sm leading-7 text-stone-300">{activeContent.surfaceBody}</p>
+              </section>
+              ) : null}
+
+              {activeSections.includes('pillars') ? <section className="grid gap-4 lg:grid-cols-3">
+                {activeContent.pillars.map((pillar, index) => (
+                  <article
+                    key={`${pillar.title}-${index}`}
+                    className={`rounded-[1.5rem] border p-5 ${index === 1 ? 'border-orange-700 bg-orange-600 text-white' : 'border-stone-200 bg-white text-stone-900'}`}
+                  >
+                    <p className={`text-xs font-bold uppercase tracking-[0.24em] ${index === 1 ? 'text-stone-300' : 'text-stone-400'}`}>0{index + 1}</p>
+                    <h5 className="mt-3 text-xl font-black">{pillar.title}</h5>
+                    <p className={`mt-3 text-sm leading-7 ${index === 1 ? 'text-stone-200' : 'text-stone-600'}`}>{pillar.body}</p>
+                  </article>
+                ))}
+              </section> : null}
+
+              {activeSections.includes('audiences') ? <section className="grid gap-4 lg:grid-cols-2">
+                <article className="rounded-[1.5rem] border border-stone-200 bg-white p-5">
+                  <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500">{activeContent.companyKicker}</p>
+                  <h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.companyTitle}</h5>
+                  <p className="mt-3 text-sm leading-7 text-stone-600">{activeContent.companyBody}</p>
+                </article>
+                <article className="rounded-[1.5rem] border border-stone-200 bg-[#f7efe2] p-5">
+                  <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700">{activeContent.renterKicker}</p>
+                  <h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.renterTitle}</h5>
+                  <p className="mt-3 text-sm leading-7 text-stone-700">{activeContent.renterBody}</p>
+                </article>
+              </section> : null}
+
+              {(activeSections.includes('features') || activeSections.includes('steps')) ? <section className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
+                {activeSections.includes('features') ? (
+                <article className="rounded-[1.5rem] border border-stone-200 bg-[#fffdf8] p-5">
+                  <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500">{activeContent.featureLabel}</p>
+                  <div className="mt-5 space-y-3">
+                    {activeContent.features.map((feature, index) => (
+                      <div key={`${feature}-${index}`} className="flex items-start gap-3 rounded-[1rem] border border-stone-200 bg-white px-4 py-3">
+                        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-orange-600 text-xs font-bold text-white">
+                          {index + 1}
+                        </span>
+                        <p className="text-sm font-semibold leading-6 text-stone-800">{feature}</p>
+                      </div>
+                    ))}
+                  </div>
+                </article>
+                ) : <div />}
+                {activeSections.includes('steps') ? (
+                <article className="rounded-[1.5rem] border border-stone-200 bg-white p-5">
+                  <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700">{activeContent.readyKicker}</p>
+                  <h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.stepsTitle}</h5>
+                  <div className="mt-5 space-y-3">
+                    {activeContent.steps.map((step) => (
+                      <div key={step.step} className="rounded-[1rem] border border-stone-200 bg-stone-50 p-4">
+                        <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500">{activeContent.stepLabel} {step.step}</p>
+                        <h6 className="mt-2 text-lg font-black text-blue-950">{step.title}</h6>
+                        <p className="mt-2 text-sm leading-7 text-stone-600">{step.body}</p>
+                      </div>
+                    ))}
+                  </div>
+                </article>
+                ) : <div />}
+              </section> : null}
+
+              {activeSections.includes('closing') ? <section className="rounded-[1.5rem] bg-[#06132e] px-6 py-7 text-white">
+                <p className="text-xs font-bold uppercase tracking-[0.28em] text-orange-300">{activeContent.readyKicker}</p>
+                <h5 className="mt-4 max-w-3xl text-3xl font-black tracking-[-0.04em]">{activeContent.readyTitle}</h5>
+                <p className="mt-4 max-w-2xl text-sm leading-8 text-stone-300">{activeContent.readyBody}</p>
+                <div className="mt-6 flex flex-wrap gap-3">
+                  <span className="rounded-full border border-white/20 px-5 py-3 text-sm font-semibold">{activeContent.viewPricing}</span>
+                  <span className="rounded-full bg-orange-300 px-5 py-3 text-sm font-semibold text-blue-950">{activeContent.createWorkspace}</span>
+                </div>
+              </section> : null}
+            </div>
+          </div>
+            </div>
+
+            <div className="mt-6 space-y-8">
+            <div className="grid gap-4 md:grid-cols-2">
+              <label>
+                <span className={LABEL_CLASS}>Brand kicker</span>
+                <input className={INPUT_CLASS} value={activeContent.heroKicker} onChange={(event) => updateHomepageContent({ heroKicker: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Primary CTA</span>
+                <input className={INPUT_CLASS} value={activeContent.startTrial} onChange={(event) => updateHomepageContent({ startTrial: event.target.value })} />
+              </label>
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>{copy.hero} title</span>
+                <input className={INPUT_CLASS} value={activeContent.heroTitle} onChange={(event) => updateHomepageContent({ heroTitle: event.target.value })} />
+              </label>
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>{copy.hero} body</span>
+                <textarea className={`${INPUT_CLASS} min-h-24`} value={activeContent.heroBody} onChange={(event) => updateHomepageContent({ heroBody: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Secondary CTA</span>
+                <input className={INPUT_CLASS} value={activeContent.exploreVehicles} onChange={(event) => updateHomepageContent({ exploreVehicles: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.surface} badge</span>
+                <input className={INPUT_CLASS} value={activeContent.surfaceLabel} onChange={(event) => updateHomepageContent({ surfaceLabel: event.target.value })} />
+              </label>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>{copy.surface} title</span>
+                <input className={INPUT_CLASS} value={activeContent.surfaceTitle} onChange={(event) => updateHomepageContent({ surfaceTitle: event.target.value })} />
+              </label>
+              <label className="md:col-span-2">
+                <span className={LABEL_CLASS}>{copy.surface} body</span>
+                <textarea className={`${INPUT_CLASS} min-h-24`} value={activeContent.surfaceBody} onChange={(event) => updateHomepageContent({ surfaceBody: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Live label</span>
+                <input className={INPUT_CLASS} value={activeContent.liveLabel} onChange={(event) => updateHomepageContent({ liveLabel: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Trusted fleets</span>
+                <input className={INPUT_CLASS} value={activeContent.trustedFleets} onChange={(event) => updateHomepageContent({ trustedFleets: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Branded flows</span>
+                <input className={INPUT_CLASS} value={activeContent.brandedFlows} onChange={(event) => updateHomepageContent({ brandedFlows: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>Multi-tenant</span>
+                <input className={INPUT_CLASS} value={activeContent.multiTenant} onChange={(event) => updateHomepageContent({ multiTenant: event.target.value })} />
+              </label>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <label>
+                <span className={LABEL_CLASS}>{copy.companySection} kicker</span>
+                <input className={INPUT_CLASS} value={activeContent.companyKicker} onChange={(event) => updateHomepageContent({ companyKicker: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.renterSection} kicker</span>
+                <input className={INPUT_CLASS} value={activeContent.renterKicker} onChange={(event) => updateHomepageContent({ renterKicker: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.companySection} title</span>
+                <input className={INPUT_CLASS} value={activeContent.companyTitle} onChange={(event) => updateHomepageContent({ companyTitle: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.renterSection} title</span>
+                <input className={INPUT_CLASS} value={activeContent.renterTitle} onChange={(event) => updateHomepageContent({ renterTitle: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.companySection} body</span>
+                <textarea className={`${INPUT_CLASS} min-h-24`} value={activeContent.companyBody} onChange={(event) => updateHomepageContent({ companyBody: event.target.value })} />
+              </label>
+              <label>
+                <span className={LABEL_CLASS}>{copy.renterSection} body</span>
+                <textarea className={`${INPUT_CLASS} min-h-24`} value={activeContent.renterBody} onChange={(event) => updateHomepageContent({ renterBody: event.target.value })} />
+              </label>
+            </div>
+
+            <div className="grid gap-6 xl:grid-cols-2">
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-zinc-200">{copy.valueSection}</h3>
+                <div className="grid gap-4">
+                  {activeContent.metrics.map((metric, index) => (
+                    <label key={metric.value}>
+                      <span className={LABEL_CLASS}>Metric {metric.value}</span>
+                      <input className={INPUT_CLASS} value={metric.label} onChange={(event) => updateMetric(index, event.target.value)} />
+                    </label>
+                  ))}
+                  {activeContent.pillars.map((pillar, index) => (
+                    <div key={`${pillar.title}-${index}`} className="grid gap-4 rounded-2xl border border-zinc-800 bg-zinc-950/50 p-4">
+                      <label>
+                        <span className={LABEL_CLASS}>Pillar {index + 1} title</span>
+                        <input className={INPUT_CLASS} value={pillar.title} onChange={(event) => updatePillar(index, { title: event.target.value })} />
+                      </label>
+                      <label>
+                        <span className={LABEL_CLASS}>Pillar {index + 1} body</span>
+                        <textarea className={`${INPUT_CLASS} min-h-24`} value={pillar.body} onChange={(event) => updatePillar(index, { body: event.target.value })} />
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-zinc-200">{copy.featureSection}</h3>
+                <label>
+                  <span className={LABEL_CLASS}>Feature section label</span>
+                  <input className={INPUT_CLASS} value={activeContent.featureLabel} onChange={(event) => updateHomepageContent({ featureLabel: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Features, one per line</span>
+                  <textarea
+                    className={`${INPUT_CLASS} min-h-40`}
+                    value={activeContent.features.join('\n')}
+                    onChange={(event) => updateHomepageContent({ features: event.target.value.split('\n').map((item) => item.trim()).filter(Boolean) })}
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div className="grid gap-6 xl:grid-cols-2">
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-zinc-200">{copy.stepsSection}</h3>
+                <label>
+                  <span className={LABEL_CLASS}>Steps title</span>
+                  <input className={INPUT_CLASS} value={activeContent.stepsTitle} onChange={(event) => updateHomepageContent({ stepsTitle: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Step label</span>
+                  <input className={INPUT_CLASS} value={activeContent.stepLabel} onChange={(event) => updateHomepageContent({ stepLabel: event.target.value })} />
+                </label>
+                {activeContent.steps.map((step, index) => (
+                  <div key={step.step} className="grid gap-4 rounded-2xl border border-zinc-800 bg-zinc-950/50 p-4">
+                    <p className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">Step {step.step}</p>
+                    <label>
+                      <span className={LABEL_CLASS}>Title</span>
+                      <input className={INPUT_CLASS} value={step.title} onChange={(event) => updateStep(index, { title: event.target.value })} />
+                    </label>
+                    <label>
+                      <span className={LABEL_CLASS}>Body</span>
+                      <textarea className={`${INPUT_CLASS} min-h-24`} value={step.body} onChange={(event) => updateStep(index, { body: event.target.value })} />
+                    </label>
+                  </div>
+                ))}
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-zinc-200">{copy.closingSection}</h3>
+                <label>
+                  <span className={LABEL_CLASS}>Closing kicker</span>
+                  <input className={INPUT_CLASS} value={activeContent.readyKicker} onChange={(event) => updateHomepageContent({ readyKicker: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Closing title</span>
+                  <input className={INPUT_CLASS} value={activeContent.readyTitle} onChange={(event) => updateHomepageContent({ readyTitle: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Closing body</span>
+                  <textarea className={`${INPUT_CLASS} min-h-24`} value={activeContent.readyBody} onChange={(event) => updateHomepageContent({ readyBody: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Pricing CTA</span>
+                  <input className={INPUT_CLASS} value={activeContent.viewPricing} onChange={(event) => updateHomepageContent({ viewPricing: event.target.value })} />
+                </label>
+                <label>
+                  <span className={LABEL_CLASS}>Workspace CTA</span>
+                  <input className={INPUT_CLASS} value={activeContent.createWorkspace} onChange={(event) => updateHomepageContent({ createWorkspace: event.target.value })} />
+                </label>
+              </div>
+            </div>
+            </div>
+
+            <div className="mt-6 flex justify-end">
+              <button
+                type="button"
+                onClick={saveHomepage}
+                disabled={homepageSaving}
+                className="rounded-xl bg-blue-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-800 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {homepageSaving ? copy.savingHomepage : copy.saveHomepage}
+              </button>
+            </div>
+          </>
+        ) : null}
+      </section>
+
+      <section className="panel overflow-hidden">
+        <div className="border-b border-zinc-800 px-6 py-4">
+          <h2 className="text-base font-semibold text-zinc-100">{copy.companiesTitle}</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">{copy.company}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">{copy.slug}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">{copy.status}</th>
+                <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-zinc-500">{copy.actions}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr>
+                  <td colSpan={4} className="px-6 py-12 text-center text-zinc-500">{copy.loading}</td>
+                </tr>
+              ) : filtered.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-6 py-12 text-center text-zinc-500">{copy.empty}</td>
+                </tr>
+              ) : filtered.map((company) => (
+                <tr key={company.id} className="transition-colors hover:bg-zinc-800/30">
+                  <td className="px-6 py-4">
+                    <p className="font-medium text-zinc-100">{company.brand?.displayName ?? company.name}</p>
+                    <p className="text-xs text-zinc-500">{company.email}</p>
+                  </td>
+                  <td className="px-6 py-4 font-mono text-xs text-zinc-400">{company.slug}</td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[company.status] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {company.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex justify-end gap-2">
+                      <Link
+                        href={`/dashboard/companies/${company.id}#site-config`}
+                        className="rounded-lg bg-blue-700 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-800"
+                      >
+                        {copy.configure}
+                      </Link>
+                      <Link
+                        href={`/dashboard/companies/${company.id}`}
+                        className="rounded-lg bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-200 transition-colors hover:bg-zinc-700"
+                      >
+                        {copy.manageCompany}
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/admin/src/app/favicon.ico/route.test.ts b/admin/src/app/favicon.ico/route.test.ts
new file mode 100644
index 0000000..8a2d6e0
--- /dev/null
+++ b/admin/src/app/favicon.ico/route.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const nextServer = vi.hoisted(() => ({
+  redirect: vi.fn((url: URL) => ({ kind: 'redirect', url: url.toString() })),
+}))
+
+vi.mock('next/server', () => ({
+  NextResponse: {
+    redirect: nextServer.redirect,
+  },
+}))
+
+describe('admin favicon route', () => {
+  it('redirects favicon requests to the generated icon route on the same origin', async () => {
+    const { GET } = await import('./route')
+
+    const response = GET(new Request('https://admin.example.com/favicon.ico'))
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://admin.example.com/icon' })
+    expect(nextServer.redirect).toHaveBeenCalledTimes(1)
+  })
+
+  it('preserves forwarded path base through the request URL origin only', async () => {
+    const { GET } = await import('./route')
+
+    const response = GET(new Request('https://admin.example.com/admin/favicon.ico'))
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://admin.example.com/icon' })
+  })
+})
diff --git a/admin/src/app/favicon.ico/route.ts b/admin/src/app/favicon.ico/route.ts
new file mode 100644
index 0000000..c678dff
--- /dev/null
+++ b/admin/src/app/favicon.ico/route.ts
@@ -0,0 +1,6 @@
+import { NextResponse } from 'next/server'
+
+export function GET(request: Request) {
+  const url = new URL('/icon', request.url)
+  return NextResponse.redirect(url)
+}
diff --git a/admin/src/app/globals.css b/admin/src/app/globals.css
new file mode 100644
index 0000000..0ef6d98
--- /dev/null
+++ b/admin/src/app/globals.css
@@ -0,0 +1,1102 @@
+@import "../styles/phase16-tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html.light {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+body {
+  @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
+  background-image:
+    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+}
+
+.shell {
+  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
+.panel {
+  @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
+  border-color: rgb(231 229 228 / 0.8);
+  background-color: rgb(255 255 255 / 0.82);
+}
+
+html.dark body {
+  background-image:
+    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+}
+
+html.dark .panel {
+  border-color: rgb(30 60 140 / 0.40);
+  background-color: rgb(11 25 55 / 0.72);
+}
+
+@layer utilities {
+  .light body {
+    color: rgb(28 25 23);
+  }
+
+  /* ── Dark mode: zinc classes → deep navy blue ─────────────── */
+  .bg-zinc-950 {
+    background-color: rgb(6 13 30);
+  }
+
+  .bg-zinc-950\/90 {
+    background-color: rgb(6 13 30 / 0.9);
+  }
+
+  .bg-zinc-900 {
+    background-color: rgb(11 25 55);
+  }
+
+  .bg-zinc-800,
+  .bg-zinc-800\/50 {
+    background-color: rgb(20 42 90);
+  }
+
+  .border-zinc-800,
+  .border-zinc-700 {
+    border-color: rgb(30 60 130);
+  }
+
+  .text-zinc-100,
+  .text-zinc-200 {
+    color: rgb(241 245 249);
+  }
+
+  .text-zinc-500 {
+    color: rgb(148 163 184);
+  }
+
+  .text-zinc-400,
+  .text-zinc-300 {
+    color: rgb(100 116 139);
+  }
+
+  .hover\:bg-zinc-800:hover,
+  .hover\:bg-zinc-800\/50:hover {
+    background-color: rgb(30 55 115);
+  }
+
+  .hover\:text-zinc-200:hover {
+    color: rgb(241 245 249);
+  }
+
+  /* ── Primary action (emerald class → orange) ──────────────── */
+  .text-emerald-400 {
+    color: rgb(251 146 60);
+  }
+
+  .bg-emerald-600 {
+    background-color: rgb(234 88 12);
+  }
+
+  .hover\:bg-emerald-500:hover {
+    background-color: rgb(194 65 12);
+  }
+
+  .dark .bg-emerald-600 {
+    background-color: rgb(249 115 22);
+  }
+
+  .dark .hover\:bg-emerald-500:hover {
+    background-color: rgb(251 146 60);
+  }
+
+  .bg-emerald-900\/30,
+  .bg-emerald-950\/40,
+  .bg-emerald-950\/50 {
+    background-color: rgb(154 52 18 / 0.22);
+  }
+
+  .border-emerald-500 {
+    border-color: rgb(249 115 22);
+  }
+
+  .focus\:ring-emerald-500:focus {
+    --tw-ring-color: rgb(234 88 12 / 0.45);
+  }
+
+  .hover\:bg-emerald-900\/50:hover {
+    background-color: rgb(154 52 18 / 0.35);
+  }
+
+  /* ── Light mode: zinc classes → white / stone-light ──────── */
+  .light .bg-zinc-950 {
+    background-color: rgb(255 253 248);
+  }
+
+  .light .bg-zinc-950\/90 {
+    background-color: rgb(255 255 255 / 0.9);
+  }
+
+  .light .bg-zinc-900 {
+    background-color: rgb(255 255 255 / 0.82);
+  }
+
+  .light .bg-zinc-800,
+  .light .bg-zinc-800\/50 {
+    background-color: rgb(245 245 244);
+  }
+
+  .light .border-zinc-800,
+  .light .border-zinc-700 {
+    border-color: rgb(231 229 228);
+  }
+
+  .light .text-zinc-100,
+  .light .text-zinc-200 {
+    color: rgb(28 25 23);
+  }
+
+  .light .text-zinc-500 {
+    color: rgb(120 113 108);
+  }
+
+  .light .text-zinc-400,
+  .light .text-zinc-300 {
+    color: rgb(87 83 78);
+  }
+
+  .light .hover\:bg-zinc-800:hover,
+  .light .hover\:bg-zinc-800\/50:hover {
+    background-color: rgb(245 245 244);
+  }
+
+  .light .hover\:text-zinc-200:hover {
+    color: rgb(28 25 23);
+  }
+}
+
+/* Phase 16 operational application layer */
+@layer base {
+  html {
+    min-width: 320px;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    scroll-behavior: smooth;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    font-family: var(--rdg-font-latin);
+    line-height: 1.6;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--rdg-text-primary);
+    line-height: 1.18;
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  a,
+  button,
+  input,
+  select,
+  textarea {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer components {
+  .shell {
+    width: min(100%, var(--rdg-container-max));
+  }
+
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+    box-shadow: var(--rdg-shadow-card);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+  }
+
+  .site-panel-muted {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: var(--rdg-surface-muted);
+  }
+
+  .site-panel-contrast {
+    border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
+    border-radius: var(--rdg-radius-lg);
+    background:
+      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
+      linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
+  }
+
+  .btn-primary,
+  .site-link-primary {
+    min-height: var(--rdg-touch-min);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-action-conversion);
+    color: #ffffff;
+    box-shadow: var(--rdg-shadow-subtle);
+  }
+
+  .btn-primary:hover,
+  .site-link-primary:hover {
+    background: var(--rdg-action-conversion-hover);
+  }
+
+  .btn-secondary,
+  .site-link-secondary {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border-strong);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-action-primary);
+  }
+
+  .btn-secondary:hover,
+  .site-link-secondary:hover {
+    border-color: var(--rdg-action-primary);
+    background: var(--rdg-soft-blue);
+    color: var(--rdg-action-primary-hover);
+  }
+
+  .input-field,
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  select,
+  textarea {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-text-primary);
+  }
+
+  .input-field::placeholder,
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--rdg-text-subdued);
+  }
+
+  table {
+    border-color: var(--rdg-border);
+  }
+
+  thead {
+    background: var(--rdg-surface-muted);
+    color: var(--rdg-text-secondary);
+  }
+
+  tbody tr {
+    border-color: var(--rdg-border);
+  }
+}
+
+@media (forced-colors: active) {
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel,
+  .site-panel-muted,
+  .site-panel-contrast {
+    border: 1px solid CanvasText;
+    box-shadow: none;
+  }
+}
+
+/* Phase 16 admin semantic corrections: blue actions, green status, orange focus. */
+@layer utilities {
+  .text-emerald-400 { color: rgb(52 211 153); }
+  .text-emerald-300 { color: rgb(110 231 183); }
+  .text-emerald-500 { color: rgb(16 185 129); }
+  .text-emerald-600 { color: rgb(5 150 105); }
+  .bg-emerald-400 { background-color: rgb(52 211 153); }
+  .bg-emerald-500 { background-color: rgb(16 185 129); }
+  .bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.10); }
+  .bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.15); }
+  .bg-emerald-900\/20 { background-color: rgb(6 78 59 / 0.20); }
+  .bg-emerald-900\/30 { background-color: rgb(6 78 59 / 0.30); }
+  .bg-emerald-900\/40 { background-color: rgb(6 78 59 / 0.40); }
+  .bg-emerald-950\/40 { background-color: rgb(2 44 34 / 0.40); }
+  .bg-emerald-950\/50 { background-color: rgb(2 44 34 / 0.50); }
+  .border-emerald-500 { border-color: rgb(16 185 129); }
+  .border-emerald-500\/30 { border-color: rgb(16 185 129 / 0.30); }
+  .hover\:bg-emerald-900\/50:hover { background-color: rgb(6 78 59 / 0.50); }
+  .focus\:ring-orange-500:focus { --tw-ring-color: rgb(249 115 22 / 0.50); }
+}
+
+html.dark body,
+html[data-theme='dark'] body {
+  background: var(--rdg-surface-page);
+}
+
+html.dark .panel,
+html.dark .card,
+html.dark .glass-card,
+html[data-theme='dark'] .panel,
+html[data-theme='dark'] .card,
+html[data-theme='dark'] .glass-card {
+  border-color: var(--rdg-border);
+  background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+  box-shadow: var(--rdg-shadow-card);
+}
+
+/* ==============================================================
+   Phase 16 operational shell
+   Mirrors the approved homepage system: precise blue hierarchy,
+   orange conversion accents, calm surfaces, 44px controls, true RTL,
+   and restrained depth instead of dashboard-template theatrics.
+   ============================================================== */
+
+.rdg-app-shell {
+  min-height: 100dvh;
+  color: var(--rdg-text-primary);
+  background:
+    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rdg-blue-100) 72%, transparent), transparent 30rem),
+    radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--rdg-orange-100) 48%, transparent), transparent 25rem),
+    linear-gradient(180deg, var(--rdg-surface-page), color-mix(in srgb, var(--rdg-soft-blue) 52%, var(--rdg-surface-page)) 52%, var(--rdg-surface-page));
+}
+
+html.dark .rdg-app-shell,
+html[data-theme='dark'] .rdg-app-shell {
+  background:
+    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rdg-blue-800) 22%, transparent), transparent 32rem),
+    radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--rdg-orange-700) 10%, transparent), transparent 28rem),
+    linear-gradient(180deg, var(--rdg-navy-950), #09172a 54%, var(--rdg-navy-950));
+}
+
+.rdg-workspace {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.rdg-sidebar {
+  border-color: var(--rdg-border) !important;
+  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: 10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+html[dir='rtl'] .rdg-sidebar {
+  box-shadow: -10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
+}
+
+.rdg-sidebar-brand {
+  min-height: var(--rdg-header-size);
+  border-color: var(--rdg-border) !important;
+}
+
+.rdg-brand-mark {
+  display: inline-grid;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--rdg-radius-sm);
+  background: var(--rdg-action-primary) !important;
+  color: #fff;
+  box-shadow: var(--rdg-shadow-subtle);
+}
+
+.rdg-sidebar-nav {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rdg-action-primary) 25%, transparent) transparent;
+}
+
+.rdg-nav-item {
+  position: relative;
+  min-height: var(--rdg-touch-min);
+  border: 1px solid transparent;
+  border-radius: var(--rdg-radius-sm) !important;
+  color: var(--rdg-text-secondary) !important;
+  transition:
+    color var(--rdg-duration-standard) var(--rdg-easing),
+    background var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    transform var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-nav-item:hover {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 18%, var(--rdg-border));
+  background: var(--rdg-soft-blue) !important;
+  color: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-nav-item[aria-current='page'],
+.rdg-nav-item[data-active='true'] {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 35%, var(--rdg-border));
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--rdg-action-primary) 22%, transparent) !important;
+}
+
+html.dark .rdg-nav-item[aria-current='page'],
+html.dark .rdg-nav-item[data-active='true'] {
+  color: var(--rdg-navy-950) !important;
+}
+
+.rdg-nav-item[aria-current='page'] svg,
+.rdg-nav-item[data-active='true'] svg {
+  color: inherit !important;
+}
+
+.rdg-sidebar-footer {
+  border-color: var(--rdg-border) !important;
+}
+
+.rdg-user-card {
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-md) !important;
+  background: var(--rdg-surface-muted) !important;
+}
+
+.rdg-avatar {
+  display: inline-grid;
+  min-width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  font-weight: 800;
+}
+
+.rdg-topbar {
+  position: sticky;
+  z-index: 30;
+  top: 0;
+  display: flex;
+  min-height: var(--rdg-header-size);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rdg-space-4);
+  border-bottom: 1px solid var(--rdg-border) !important;
+  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: var(--rdg-shadow-subtle);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.rdg-topbar-title {
+  margin: 0;
+  color: var(--rdg-text-primary) !important;
+  font-size: clamp(1rem, 1.5vw, 1.2rem);
+  font-weight: 800;
+  letter-spacing: -0.015em;
+}
+
+.rdg-topbar-kicker,
+.rdg-page-kicker {
+  margin: 0;
+  color: var(--rdg-action-conversion) !important;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+html[dir='rtl'] .rdg-topbar-kicker,
+html[dir='rtl'] .rdg-page-kicker {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.rdg-system-status {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid color-mix(in srgb, var(--rdg-green-700) 22%, var(--rdg-border));
+  border-radius: var(--rdg-radius-pill);
+  padding: 0 var(--rdg-space-3);
+  background: color-mix(in srgb, var(--rdg-green-100) 64%, var(--rdg-surface-primary));
+  color: var(--rdg-green-700);
+  font-size: 0.75rem;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+html.dark .rdg-system-status {
+  background: color-mix(in srgb, var(--rdg-green-700) 16%, var(--rdg-surface-primary));
+  color: #86efac;
+}
+
+.rdg-system-status::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
+  content: '';
+}
+
+.rdg-search-field {
+  min-height: 42px !important;
+  border-color: var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: none !important;
+}
+
+.rdg-search-field:focus {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-surface-primary) !important;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 12%, transparent) !important;
+}
+
+.rdg-app-main {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: clamp(20px, 3vw, 40px);
+}
+
+.rdg-app-content {
+  width: min(100%, var(--rdg-container-max));
+  margin-inline: auto;
+}
+
+.rdg-app-content > * {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.rdg-app-content h1 {
+  color: var(--rdg-text-primary) !important;
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 850 !important;
+  letter-spacing: -0.035em;
+}
+
+.rdg-app-content h2 {
+  color: var(--rdg-text-primary) !important;
+  font-weight: 800 !important;
+  letter-spacing: -0.02em;
+}
+
+.rdg-app-content h3,
+.rdg-app-content h4 {
+  color: var(--rdg-text-primary) !important;
+  font-weight: 750 !important;
+}
+
+.rdg-app-content p {
+  color: inherit;
+}
+
+.rdg-page-hero {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--rdg-border);
+  border-radius: var(--rdg-radius-xl);
+  padding: clamp(24px, 4vw, 40px);
+  background:
+    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rdg-blue-500) 18%, transparent), transparent 38%),
+    var(--rdg-surface-elevated);
+  box-shadow: var(--rdg-shadow-card);
+}
+
+.rdg-page-hero::before {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 4px;
+  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
+  content: '';
+}
+
+.rdg-page-description {
+  max-width: 68ch;
+  color: var(--rdg-text-secondary) !important;
+  font-size: 0.98rem;
+  line-height: 1.7;
+}
+
+/* Core surfaces. These intentionally match homepage Card/StateShell geometry. */
+.rdg-app-shell .card,
+.rdg-app-shell .panel,
+.rdg-app-shell .glass-card {
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-lg) !important;
+  background: color-mix(in srgb, var(--rdg-surface-elevated) 96%, transparent) !important;
+  box-shadow: var(--rdg-shadow-card) !important;
+  color: var(--rdg-text-primary);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.rdg-app-shell a.card,
+.rdg-app-shell a.panel,
+.rdg-app-shell button.card,
+.rdg-app-shell button.panel {
+  transition:
+    transform var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    box-shadow var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-app-shell a.card:hover,
+.rdg-app-shell a.panel:hover,
+.rdg-app-shell button.card:hover,
+.rdg-app-shell button.panel:hover {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 34%, var(--rdg-border)) !important;
+  box-shadow: 0 24px 64px color-mix(in srgb, var(--rdg-shadow-color) 90%, transparent) !important;
+  transform: translateY(-2px);
+}
+
+.rdg-app-shell .card > header,
+.rdg-app-shell .panel > header {
+  border-color: var(--rdg-border) !important;
+}
+
+/* Operational actions are blue. Orange remains the conversion/focus accent. */
+.rdg-app-shell .btn-primary {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-action-primary) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  padding: 0.65rem 1rem;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  font-weight: 750;
+  box-shadow: var(--rdg-shadow-subtle) !important;
+  transition:
+    background var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    transform var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+html.dark .rdg-app-shell .btn-primary {
+  color: var(--rdg-navy-950) !important;
+}
+
+.rdg-app-shell .btn-primary:hover {
+  border-color: var(--rdg-action-primary-hover) !important;
+  background: var(--rdg-action-primary-hover) !important;
+  transform: translateY(-1px);
+}
+
+.rdg-app-shell .btn-secondary {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-border-strong) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  padding: 0.65rem 1rem;
+  background: var(--rdg-surface-primary) !important;
+  color: var(--rdg-action-primary) !important;
+  font-weight: 750;
+}
+
+.rdg-app-shell .btn-secondary:hover {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-soft-blue) !important;
+  color: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-app-shell .btn-conversion {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-action-conversion);
+  border-radius: var(--rdg-radius-sm);
+  padding: 0.65rem 1rem;
+  background: var(--rdg-action-conversion);
+  color: #fff;
+  font-weight: 750;
+}
+
+.rdg-app-shell .btn-conversion:hover {
+  border-color: var(--rdg-action-conversion-hover);
+  background: var(--rdg-action-conversion-hover);
+}
+
+.rdg-app-shell .btn-danger {
+  min-height: var(--rdg-touch-min);
+  border-radius: var(--rdg-radius-sm) !important;
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']),
+.rdg-app-shell select,
+.rdg-app-shell textarea,
+.rdg-app-shell .input-field {
+  min-height: var(--rdg-touch-min);
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-surface-primary) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: none;
+  transition:
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    box-shadow var(--rdg-duration-standard) var(--rdg-easing),
+    background var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):hover,
+.rdg-app-shell select:hover,
+.rdg-app-shell textarea:hover,
+.rdg-app-shell .input-field:hover {
+  border-color: var(--rdg-border-strong) !important;
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
+.rdg-app-shell select:focus,
+.rdg-app-shell textarea:focus,
+.rdg-app-shell .input-field:focus {
+  border-color: var(--rdg-action-primary) !important;
+  outline: none;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 13%, transparent) !important;
+}
+
+.rdg-app-shell input::placeholder,
+.rdg-app-shell textarea::placeholder {
+  color: var(--rdg-text-subdued) !important;
+}
+
+.rdg-app-shell table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--rdg-text-primary);
+}
+
+.rdg-app-shell thead {
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-secondary) !important;
+}
+
+.rdg-app-shell th {
+  padding: 0.85rem 1.1rem;
+  font-size: 0.72rem;
+  font-weight: 800 !important;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html[dir='rtl'] .rdg-app-shell th {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.rdg-app-shell td {
+  padding: 0.95rem 1.1rem;
+  color: var(--rdg-text-secondary);
+  vertical-align: middle;
+}
+
+.rdg-app-shell tbody tr {
+  border-color: var(--rdg-border) !important;
+  transition: background var(--rdg-duration-fast) ease;
+}
+
+.rdg-app-shell tbody tr:hover {
+  background: color-mix(in srgb, var(--rdg-soft-blue) 62%, transparent) !important;
+}
+
+.rdg-app-shell .progress-bar {
+  overflow: hidden;
+  border-radius: var(--rdg-radius-pill);
+  background: var(--rdg-surface-strong) !important;
+}
+
+.rdg-app-shell .progress-fill.blue {
+  background: var(--rdg-action-primary) !important;
+}
+
+.rdg-app-shell .progress-fill.orange {
+  background: var(--rdg-action-conversion) !important;
+}
+
+.rdg-app-shell .badge-blue,
+.rdg-app-shell .badge-green,
+.rdg-app-shell .badge-amber,
+.rdg-app-shell .badge-red,
+.rdg-app-shell .badge-gray,
+.rdg-app-shell .badge-purple,
+.rdg-app-shell .badge-indigo {
+  min-height: 24px;
+  align-items: center;
+  border-radius: var(--rdg-radius-pill) !important;
+  border: 1px solid transparent;
+  padding-inline: 0.65rem;
+  font-weight: 750;
+}
+
+.rdg-app-shell .badge-blue {
+  border-color: color-mix(in srgb, var(--rdg-blue-700) 22%, transparent);
+  background: color-mix(in srgb, var(--rdg-blue-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-blue-700) !important;
+}
+
+.rdg-app-shell .badge-green {
+  border-color: color-mix(in srgb, var(--rdg-green-700) 22%, transparent);
+  background: color-mix(in srgb, var(--rdg-green-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-green-700) !important;
+}
+
+.rdg-app-shell .badge-amber {
+  border-color: color-mix(in srgb, var(--rdg-amber-800) 20%, transparent);
+  background: color-mix(in srgb, var(--rdg-amber-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-amber-800) !important;
+}
+
+.rdg-app-shell .badge-red {
+  border-color: color-mix(in srgb, var(--rdg-red-700) 20%, transparent);
+  background: color-mix(in srgb, var(--rdg-red-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-red-700) !important;
+}
+
+.rdg-app-shell .badge-gray {
+  border-color: var(--rdg-border);
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-secondary) !important;
+}
+
+html.dark .rdg-app-shell .badge-blue { color: var(--rdg-blue-100) !important; }
+html.dark .rdg-app-shell .badge-green { color: #bbf7d0 !important; }
+html.dark .rdg-app-shell .badge-amber { color: #fde68a !important; }
+html.dark .rdg-app-shell .badge-red { color: #fecaca !important; }
+
+/* Semantic bridge for legacy utility classes still present in large pages. */
+html.light .rdg-app-shell .bg-white,
+html.light .rdg-app-shell .bg-zinc-900,
+html.light .rdg-app-shell .bg-zinc-950 {
+  background-color: var(--rdg-surface-elevated) !important;
+}
+
+html.light .rdg-app-shell .bg-slate-50,
+html.light .rdg-app-shell .bg-zinc-800 {
+  background-color: var(--rdg-surface-muted) !important;
+}
+
+html.light .rdg-app-shell .text-zinc-100,
+html.light .rdg-app-shell .text-zinc-200,
+html.light .rdg-app-shell .text-slate-900 {
+  color: var(--rdg-text-primary) !important;
+}
+
+html.light .rdg-app-shell .text-zinc-300,
+html.light .rdg-app-shell .text-zinc-400,
+html.light .rdg-app-shell .text-zinc-500,
+html.light .rdg-app-shell .text-slate-700,
+html.light .rdg-app-shell .text-slate-600,
+html.light .rdg-app-shell .text-slate-500,
+html.light .rdg-app-shell .text-stone-500 {
+  color: var(--rdg-text-secondary) !important;
+}
+
+.rdg-app-shell .border-zinc-800,
+.rdg-app-shell .border-zinc-700,
+.rdg-app-shell .border-slate-200,
+.rdg-app-shell .border-stone-200 {
+  border-color: var(--rdg-border) !important;
+}
+
+html.dark .rdg-app-shell .bg-white,
+html.dark .rdg-app-shell .bg-zinc-900,
+html.dark .rdg-app-shell .bg-zinc-950 {
+  background-color: var(--rdg-surface-elevated) !important;
+}
+
+html.dark .rdg-app-shell .bg-slate-50,
+html.dark .rdg-app-shell .bg-zinc-800 {
+  background-color: var(--rdg-surface-muted) !important;
+}
+
+html.dark .rdg-app-shell .text-zinc-100,
+html.dark .rdg-app-shell .text-zinc-200,
+html.dark .rdg-app-shell .text-slate-900 {
+  color: var(--rdg-text-primary) !important;
+}
+
+html.dark .rdg-app-shell .text-zinc-300,
+html.dark .rdg-app-shell .text-zinc-400,
+html.dark .rdg-app-shell .text-zinc-500,
+html.dark .rdg-app-shell .text-slate-700,
+html.dark .rdg-app-shell .text-slate-600,
+html.dark .rdg-app-shell .text-slate-500,
+html.dark .rdg-app-shell .text-stone-500 {
+  color: var(--rdg-text-secondary) !important;
+}
+
+/* Dialogs and overlays inherit the same surface system. */
+.rdg-app-shell [role='dialog'],
+.rdg-app-shell dialog {
+  border-color: var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-lg) !important;
+  background: var(--rdg-surface-elevated) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: var(--rdg-shadow-overlay) !important;
+}
+
+@media (max-width: 1023px) {
+  .rdg-app-main {
+    padding: 20px 16px 32px;
+  }
+
+  .rdg-topbar {
+    padding-inline: 16px !important;
+  }
+}
+
+@media (max-width: 639px) {
+  .rdg-app-main {
+    padding: 16px 12px 28px;
+  }
+
+  .rdg-app-content h1 {
+    font-size: 1.65rem;
+  }
+
+  .rdg-page-hero {
+    border-radius: var(--rdg-radius-lg);
+    padding: 24px 20px;
+  }
+
+  .rdg-system-status,
+  .rdg-topbar-search {
+    display: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .rdg-sidebar,
+  .rdg-topbar,
+  .rdg-app-shell .card,
+  .rdg-app-shell .panel,
+  .rdg-app-shell .glass-card,
+  .rdg-page-hero {
+    border: 1px solid CanvasText !important;
+    box-shadow: none !important;
+    backdrop-filter: none;
+  }
+}
+
+@media print {
+  .rdg-app-shell {
+    display: block !important;
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+  .rdg-app-main {
+    padding: 0 !important;
+  }
+
+  .rdg-app-shell .card,
+  .rdg-app-shell .panel,
+  .rdg-app-shell .glass-card {
+    box-shadow: none !important;
+  }
+}
+
+/* Legacy primary-action utilities are normalized to the homepage blue action. */
+.rdg-app-shell button.bg-blue-700,
+.rdg-app-shell a.bg-blue-700,
+.rdg-app-shell button.bg-blue-600,
+.rdg-app-shell a.bg-blue-600,
+.rdg-app-shell button.bg-emerald-700,
+.rdg-app-shell a.bg-emerald-700,
+.rdg-app-shell button.bg-emerald-600,
+.rdg-app-shell a.bg-emerald-600,
+.rdg-app-shell button.bg-emerald-500,
+.rdg-app-shell a.bg-emerald-500 {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+}
+
+.rdg-app-shell button.bg-blue-700:hover,
+.rdg-app-shell a.bg-blue-700:hover,
+.rdg-app-shell button.bg-blue-600:hover,
+.rdg-app-shell a.bg-blue-600:hover,
+.rdg-app-shell button.bg-emerald-700:hover,
+.rdg-app-shell a.bg-emerald-700:hover,
+.rdg-app-shell button.bg-emerald-600:hover,
+.rdg-app-shell a.bg-emerald-600:hover,
+.rdg-app-shell button.bg-emerald-500:hover,
+.rdg-app-shell a.bg-emerald-500:hover {
+  background: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-page-heading {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--rdg-space-5);
+  min-height: 64px;
+  padding: 2px 0 var(--rdg-space-5);
+  border-bottom: 1px solid var(--rdg-border);
+}
+
+.rdg-page-heading::after {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: -1px;
+  width: 72px;
+  height: 3px;
+  border-radius: var(--rdg-radius-pill);
+  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
+  content: '';
+}
+
+.rdg-page-heading h1,
+.rdg-page-heading h2 { margin: 0; }
+.rdg-page-heading p { color: var(--rdg-text-secondary) !important; }
+
+@media (max-width: 639px) {
+  .rdg-page-heading { align-items: flex-start; flex-direction: column; }
+}
+
+/* Explicit field utility for pages that compose controls dynamically. */
+.rdg-app-shell .field {
+  width: 100%;
+  min-height: var(--rdg-touch-min);
+  border: 1px solid var(--rdg-border);
+  border-radius: var(--rdg-radius-sm);
+  background: var(--rdg-surface-primary);
+  color: var(--rdg-text-primary);
+  padding: 0.7rem 0.85rem;
+  transition: border-color var(--rdg-duration-fast) var(--rdg-easing), box-shadow var(--rdg-duration-fast) var(--rdg-easing), background-color var(--rdg-duration-fast) var(--rdg-easing);
+}
+.rdg-app-shell .field:hover { border-color: var(--rdg-border-strong); }
+.rdg-app-shell .field:focus {
+  border-color: var(--rdg-focus);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rdg-focus) 18%, transparent);
+  outline: none;
+}
diff --git a/admin/src/app/icon.tsx b/admin/src/app/icon.tsx
new file mode 100644
index 0000000..7403251
--- /dev/null
+++ b/admin/src/app/icon.tsx
@@ -0,0 +1,32 @@
+import { ImageResponse } from 'next/og'
+
+export const size = {
+  width: 32,
+  height: 32,
+}
+
+export const contentType = 'image/png'
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#111827',
+          color: '#ffffff',
+          fontSize: 18,
+          fontWeight: 700,
+          borderRadius: 8,
+        }}
+      >
+        A
+      </div>
+    ),
+    size,
+  )
+}
diff --git a/admin/src/app/layout.tsx b/admin/src/app/layout.tsx
new file mode 100644
index 0000000..47ca4b4
--- /dev/null
+++ b/admin/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+import { AdminI18nProvider } from '@/components/I18nProvider'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'RentalDriveGo Admin',
+  description: 'RentalDriveGo platform administration.',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="light" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              "(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('admin-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(theme);document.documentElement.style.colorScheme=theme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
+          }}
+        />
+      </head>
+      <body suppressHydrationWarning><AdminI18nProvider>{children}</AdminI18nProvider></body>
+    </html>
+  )
+}
diff --git a/admin/src/app/login/page.tsx b/admin/src/app/login/page.tsx
new file mode 100644
index 0000000..9a6fa5d
--- /dev/null
+++ b/admin/src/app/login/page.tsx
@@ -0,0 +1,13 @@
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { resolveServerAppUrl } from '@/lib/appUrls'
+
+export default async function AdminLoginPage() {
+  const requestHeaders = await headers()
+  const dashboardUrl = resolveServerAppUrl(
+    process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+    requestHeaders.get('host'),
+    requestHeaders.get('x-forwarded-proto'),
+  )
+  redirect(`${dashboardUrl}/sign-in?portal=admin&next=/dashboard`)
+}
diff --git a/admin/src/app/page.tsx b/admin/src/app/page.tsx
new file mode 100644
index 0000000..4083365
--- /dev/null
+++ b/admin/src/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function AdminRootPage() {
+  redirect('/login')
+}
diff --git a/admin/src/app/root-redirects.test.ts b/admin/src/app/root-redirects.test.ts
new file mode 100644
index 0000000..89c61c9
--- /dev/null
+++ b/admin/src/app/root-redirects.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const navigation = vi.hoisted(() => ({
+  redirect: vi.fn((path: string) => {
+    throw new Error(`NEXT_REDIRECT:${path}`)
+  }),
+}))
+
+vi.mock('next/navigation', () => navigation)
+
+import AdminRootPage from './page'
+
+describe('admin public redirects', () => {
+  it('sends the admin root to the login page', () => {
+    expect(() => AdminRootPage()).toThrow('NEXT_REDIRECT:/login')
+    expect(navigation.redirect).toHaveBeenCalledWith('/login')
+  })
+})
diff --git a/admin/src/components/I18nProvider.tsx b/admin/src/components/I18nProvider.tsx
new file mode 100644
index 0000000..5b2e301
--- /dev/null
+++ b/admin/src/components/I18nProvider.tsx
@@ -0,0 +1,311 @@
+'use client'
+
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
+export type AdminLanguage = 'en' | 'fr' | 'ar'
+export type AdminTheme = 'light' | 'dark'
+
+type AdminDictionary = {
+  nav: Record<string, string>
+  logout: string
+  language: string
+  theme: string
+  light: string
+  dark: string
+  overview: string
+  admin: string
+  platform: string
+  loading: string
+}
+
+const dictionaries: Record<AdminLanguage, AdminDictionary> = {
+  en: {
+    nav: {
+      overview: 'Overview',
+      companies: 'Companies',
+      siteConfig: 'Site Config',
+      renters: 'Renters',
+      auditLogs: 'Audit Logs',
+      adminUsers: 'Admin Users',
+      billing: 'Billing',
+      pricing: 'Pricing',
+      notifications: 'Notifications',
+      menuManagement: 'Menu Management',
+    },
+    logout: 'Logout',
+    language: 'Language',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    overview: 'Platform overview',
+    admin: 'Admin',
+    platform: 'Platform',
+    loading: 'Loading',
+  },
+  fr: {
+    nav: {
+      overview: "Vue d'ensemble",
+      companies: 'Entreprises',
+      siteConfig: 'Config site',
+      renters: 'Locataires',
+      auditLogs: "Journaux d'audit",
+      adminUsers: 'Utilisateurs admin',
+      billing: 'Facturation',
+      pricing: 'Tarification',
+      notifications: 'Notifications',
+      menuManagement: 'Gestion du menu',
+    },
+    logout: 'Déconnexion',
+    language: 'Langue',
+    theme: 'Mode',
+    light: 'Clair',
+    dark: 'Sombre',
+    overview: 'Vue plateforme',
+    admin: 'Admin',
+    platform: 'Plateforme',
+    loading: 'Chargement',
+  },
+  ar: {
+    nav: {
+      overview: 'نظرة عامة',
+      companies: 'الشركات',
+      siteConfig: 'إعدادات الموقع',
+      renters: 'المستأجرون',
+      auditLogs: 'سجلات التدقيق',
+      adminUsers: 'مستخدمو الإدارة',
+      billing: 'الفوترة',
+      pricing: 'الأسعار',
+      notifications: 'الإشعارات',
+      menuManagement: 'إدارة القوائم',
+    },
+    logout: 'تسجيل الخروج',
+    language: 'اللغة',
+    theme: 'الوضع',
+    light: 'فاتح',
+    dark: 'داكن',
+    overview: 'نظرة عامة على المنصة',
+    admin: 'الإدارة',
+    platform: 'المنصة',
+    loading: 'جارٍ التحميل',
+  },
+}
+
+const languageMeta = {
+  en: { flag: '🇺🇸', shortLabel: 'EN' },
+  fr: { flag: '🇫🇷', shortLabel: 'FR' },
+  ar: { flag: '🇲🇦', shortLabel: 'AR' },
+} as const
+
+const SHARED_THEME_KEY = 'rentaldrivego-theme'
+
+type AdminI18nContext = {
+  language: AdminLanguage
+  setLanguage: (value: AdminLanguage) => void
+  theme: AdminTheme
+  setTheme: (value: AdminTheme) => void
+  dict: AdminDictionary
+}
+
+const Context = createContext<AdminI18nContext | null>(null)
+
+export function AdminI18nProvider({ children }: { children: React.ReactNode }) {
+  const [language, setLanguage] = useState<AdminLanguage>('en')
+  const [theme, setTheme] = useState<AdminTheme>('light')
+  // Skip the very first write so we don't overwrite a stored preference with
+  // the default 'en' value before the hydration read-effect has applied it.
+  const skipFirstLangWrite = useRef(true)
+
+  useEffect(() => {
+    const stored = window.localStorage.getItem('admin-language')
+    const storedTheme = window.localStorage.getItem(SHARED_THEME_KEY) ?? window.localStorage.getItem('admin-theme')
+    if (stored === 'en' || stored === 'fr' || stored === 'ar') {
+      setLanguage(stored)
+    }
+
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      setTheme(storedTheme)
+      return
+    }
+
+    if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setTheme('light')
+    }
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.lang = language
+    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
+    if (skipFirstLangWrite.current) {
+      skipFirstLangWrite.current = false
+      return
+    }
+    window.localStorage.setItem('admin-language', language)
+  }, [language])
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark')
+    document.documentElement.classList.add(theme)
+    document.documentElement.style.colorScheme = theme
+    document.body.dataset.theme = theme
+    document.cookie = `${SHARED_THEME_KEY}=${encodeURIComponent(theme)}; path=/; max-age=31536000; SameSite=Lax`
+    window.localStorage.setItem(SHARED_THEME_KEY, theme)
+    window.localStorage.setItem('admin-theme', theme)
+  }, [theme])
+
+  const value = useMemo(
+    () => ({ language, setLanguage, theme, setTheme, dict: dictionaries[language] }),
+    [language, theme],
+  )
+  return <Context.Provider value={value}>{children}</Context.Provider>
+}
+
+export function useAdminI18n() {
+  const context = useContext(Context)
+  if (!context) throw new Error('useAdminI18n must be used within AdminI18nProvider')
+  return context
+}
+
+export function AdminLanguageSwitcher() {
+  const { language, setLanguage } = useAdminI18n()
+  const [open, setOpen] = useState(false)
+  const [embedded, setEmbedded] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setEmbedded(window.self !== window.top)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function onMouseDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [open])
+
+  if (embedded) return null
+
+  const current = languageMeta[language]
+
+  return (
+    <div ref={ref} className="relative flex-1">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200 dark:hover:bg-[#162038]"
+      >
+        <span className="flex items-center gap-1.5">
+          <span aria-hidden="true">{current.flag}</span>
+          <span>{current.shortLabel}</span>
+        </span>
+        <svg className={`h-3 w-3 text-stone-400 transition-transform dark:text-stone-500 ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-[#0d1b38]">
+          {(['en', 'fr', 'ar'] as AdminLanguage[]).map((value) => {
+            const meta = languageMeta[value]
+            const active = value === language
+            return (
+              <button
+                key={value}
+                type="button"
+                onClick={() => { setLanguage(value); setOpen(false) }}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
+                  active
+                    ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038]'
+                }`}
+              >
+                <span aria-hidden="true">{meta.flag}</span>
+                <span>{meta.shortLabel}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function AdminThemeSwitcher() {
+  const { theme, setTheme, dict } = useAdminI18n()
+  const [open, setOpen] = useState(false)
+  const [embedded, setEmbedded] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setEmbedded(window.self !== window.top)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function onMouseDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [open])
+
+  if (embedded) return null
+
+  return (
+    <div ref={ref} className="relative flex-1">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200 dark:hover:bg-[#162038]"
+      >
+        <span className="flex items-center gap-1.5">
+          {theme === 'light' ? (
+            <svg className="h-3.5 w-3.5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+            </svg>
+          ) : (
+            <svg className="h-3.5 w-3.5 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+            </svg>
+          )}
+          <span>{theme === 'light' ? dict.light : dict.dark}</span>
+        </span>
+        <svg className={`h-3 w-3 text-stone-400 transition-transform dark:text-stone-500 ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-[#0d1b38]">
+          {(['light', 'dark'] as AdminTheme[]).map((value) => {
+            const active = value === theme
+            return (
+              <button
+                key={value}
+                type="button"
+                onClick={() => { setTheme(value); setOpen(false) }}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
+                  active
+                    ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038]'
+                }`}
+              >
+                {value === 'light' ? (
+                  <svg className="h-3.5 w-3.5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                  </svg>
+                ) : (
+                  <svg className="h-3.5 w-3.5 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                  </svg>
+                )}
+                <span className={active ? 'text-inherit' : ''}>{value === 'light' ? dict.light : dict.dark}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin/src/components/PublicFooter.tsx b/admin/src/components/PublicFooter.tsx
new file mode 100644
index 0000000..4f037b3
--- /dev/null
+++ b/admin/src/components/PublicFooter.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import {
+  AdminLanguageSwitcher,
+  AdminThemeSwitcher,
+  useAdminI18n,
+} from '@/components/I18nProvider'
+
+const languageMeta = {
+  en: { flag: '🇺🇸', shortLabel: 'EN' },
+  fr: { flag: '🇫🇷', shortLabel: 'FR' },
+  ar: { flag: '🇲🇦', shortLabel: 'AR' },
+} as const
+
+export default function PublicFooter() {
+  const { language } = useAdminI18n()
+  const currentLanguage = languageMeta[language]
+  const dict = {
+    en: {
+      preferences: 'Admin preferences',
+    },
+    fr: {
+      preferences: 'Préférences d’administration',
+    },
+    ar: {
+      preferences: 'تفضيلات الإدارة',
+    },
+  }[language]
+
+  return (
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-4 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/72">
+      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
+        <div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
+          <p>{dict.preferences}</p>
+          <span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-1 text-stone-700 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200">
+            <span aria-hidden="true">{currentLanguage.flag}</span>
+            <span>{currentLanguage.shortLabel}</span>
+          </span>
+        </div>
+        <div className="flex flex-col items-center gap-3 sm:flex-row">
+          <AdminLanguageSwitcher />
+          <AdminThemeSwitcher />
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/admin/src/components/PublicHeader.tsx b/admin/src/components/PublicHeader.tsx
new file mode 100644
index 0000000..69d80e9
--- /dev/null
+++ b/admin/src/components/PublicHeader.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import Link from 'next/link'
+import { useAdminI18n } from '@/components/I18nProvider'
+
+const languageMeta = {
+  en: { flag: '🇺🇸', shortLabel: 'EN' },
+  fr: { flag: '🇫🇷', shortLabel: 'FR' },
+  ar: { flag: '🇲🇦', shortLabel: 'AR' },
+} as const
+
+export default function PublicHeader() {
+  const { language } = useAdminI18n()
+  const currentLanguage = languageMeta[language]
+  const dict = {
+    en: {
+      admin: 'Admin Console',
+      signIn: 'Sign in',
+    },
+    fr: {
+      admin: 'Console admin',
+      signIn: 'Connexion',
+    },
+    ar: {
+      admin: 'لوحة الإدارة',
+      signIn: 'تسجيل الدخول',
+    },
+  }[language]
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/76">
+      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
+        <Link href="/" className="flex items-center gap-3">
+          <span className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">RentalDriveGo</span>
+          <span className="hidden text-sm font-semibold text-stone-500 dark:text-stone-400 sm:inline">{dict.admin}</span>
+        </Link>
+        <nav className="flex items-center gap-2">
+          <span className="inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-2 text-xs font-semibold text-stone-700 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200">
+            <span aria-hidden="true">{currentLanguage.flag}</span>
+            <span>{currentLanguage.shortLabel}</span>
+          </span>
+          <Link href="/login" className="rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300">
+            {dict.signIn}
+          </Link>
+        </nav>
+      </div>
+    </header>
+  )
+}
diff --git a/admin/src/components/PublicShell.test.ts b/admin/src/components/PublicShell.test.ts
new file mode 100644
index 0000000..25acbbd
--- /dev/null
+++ b/admin/src/components/PublicShell.test.ts
@@ -0,0 +1,31 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/components/PublicHeader', () => ({ default: function MockAdminHeader() { return React.createElement('admin-header') } }))
+vi.mock('@/components/PublicFooter', () => ({ default: function MockAdminFooter() { return React.createElement('admin-footer') } }))
+
+import PublicShell from './PublicShell'
+
+function childTypes(node: React.ReactElement): string[] {
+  return React.Children.toArray(node.props.children).filter(isValidElement).map((child) => {
+    const type = child.type as any
+    if (typeof type === 'string') return type
+    return type.displayName ?? type.name ?? 'anonymous'
+  })
+}
+
+describe('admin PublicShell', () => {
+  it('always renders the admin public chrome around children', () => {
+    const shell = PublicShell({ children: React.createElement('section', { id: 'login' }) })
+
+    expect(childTypes(shell)).toEqual(['MockAdminHeader', 'div', 'MockAdminFooter'])
+  })
+
+  it('uses a flex column root so footer placement stays stable', () => {
+    const shell = PublicShell({ children: React.createElement('section') })
+
+    expect(shell.props.className).toContain('flex')
+    expect(shell.props.className).toContain('min-h-screen')
+    expect(shell.props.className).toContain('flex-col')
+  })
+})
diff --git a/admin/src/components/PublicShell.tsx b/admin/src/components/PublicShell.tsx
new file mode 100644
index 0000000..cfeb63f
--- /dev/null
+++ b/admin/src/components/PublicShell.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import React from "react";
+
+import PublicFooter from '@/components/PublicFooter'
+import PublicHeader from '@/components/PublicHeader'
+
+export default function PublicShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)] dark:text-slate-100">
+      <PublicHeader />
+      <div className="flex flex-1 flex-col">{children}</div>
+      <PublicFooter />
+    </div>
+  )
+}
diff --git a/admin/src/lib/api.test.ts b/admin/src/lib/api.test.ts
new file mode 100644
index 0000000..a402005
--- /dev/null
+++ b/admin/src/lib/api.test.ts
@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+afterEach(() => {
+  delete process.env.API_INTERNAL_URL
+  delete process.env.NEXT_PUBLIC_API_URL
+  vi.restoreAllMocks()
+  Reflect.deleteProperty(globalThis, 'fetch')
+  vi.resetModules()
+})
+
+describe('adminFetch', () => {
+  it('requests through the server API base and returns the data envelope', async () => {
+    process.env.API_INTERNAL_URL = 'http://internal-api/api/v1'
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ data: { companies: [] } }),
+    }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { adminFetch } = await import('./api')
+    await expect(adminFetch('/admin/companies', 'admin-token')).resolves.toEqual({ companies: [] })
+
+    expect(fetchMock).toHaveBeenCalledWith('http://internal-api/api/v1/admin/companies', {
+      cache: 'no-store',
+      credentials: 'include',
+    })
+  })
+
+  it('omits authorization when no token is supplied', async () => {
+    delete process.env.API_INTERNAL_URL
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { ok: true } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { adminFetch } = await import('./api')
+    await adminFetch('/public')
+
+    expect((fetchMock as any).mock.calls[0]?.[1]).toEqual({ cache: 'no-store', credentials: 'include' })
+  })
+
+  it('throws the API message from failed responses', async () => {
+    const fetchMock = vi.fn(async () => ({ ok: false, json: async () => ({ message: 'Admin only' }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { adminFetch } = await import('./api')
+    await expect(adminFetch('/admin/menu')).rejects.toThrow('Admin only')
+  })
+})
diff --git a/admin/src/lib/api.ts b/admin/src/lib/api.ts
new file mode 100644
index 0000000..2eac6bb
--- /dev/null
+++ b/admin/src/lib/api.ts
@@ -0,0 +1,14 @@
+export const ADMIN_API_BASE =
+  typeof window === 'undefined'
+    ? (process.env.API_INTERNAL_URL ?? process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1')
+    : (process.env.NEXT_PUBLIC_API_URL ?? '/admin/api/v1')
+
+export async function adminFetch<T>(path: string, _token?: string): Promise<T> {
+  const res = await fetch(`${ADMIN_API_BASE}${path}`, {
+    cache: 'no-store',
+    credentials: 'include',
+  })
+  const json = await res.json()
+  if (!res.ok) throw new Error(json?.message ?? 'Request failed')
+  return json.data as T
+}
diff --git a/admin/src/lib/appUrls.test.ts b/admin/src/lib/appUrls.test.ts
new file mode 100644
index 0000000..12f1ab3
--- /dev/null
+++ b/admin/src/lib/appUrls.test.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveBrowserAppUrl, resolveServerAppUrl } from './appUrls'
+
+function installWindow(hostname: string, protocol = 'https:') {
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: { location: { hostname, protocol } },
+  })
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+})
+
+describe('admin app URL resolution', () => {
+  it('keeps server fallback unchanged without a browser window', () => {
+    expect(resolveBrowserAppUrl('http://localhost:3002/admin')).toBe('http://localhost:3002/admin')
+  })
+
+  it('removes trailing slash for localhost browser fallbacks', () => {
+    installWindow('127.0.0.1')
+    expect(resolveBrowserAppUrl('http://localhost:3002/admin/')).toBe('http://localhost:3002/admin')
+  })
+
+  it('rewrites fallback origin to the current browser host in production', () => {
+    installWindow('admin.rentaldrivego.ma')
+    expect(resolveBrowserAppUrl('http://localhost:3002/admin')).toBe('https://admin.rentaldrivego.ma/admin')
+  })
+
+  it('resolves server app URLs from forwarded host and protocol', () => {
+    expect(resolveServerAppUrl('http://localhost:3002/admin', 'admin.example.com', 'https')).toBe('https://admin.example.com:3002/admin')
+  })
+
+  it('falls back when host is missing or the fallback is not parseable', () => {
+    expect(resolveServerAppUrl('http://localhost:3002/admin', null)).toBe('http://localhost:3002/admin')
+    expect(resolveServerAppUrl('/admin', 'admin.example.com')).toBe('/admin')
+  })
+})
diff --git a/apps/homepage/src/lib/appUrls.ts b/admin/src/lib/appUrls.ts
similarity index 100%
rename from apps/homepage/src/lib/appUrls.ts
rename to admin/src/lib/appUrls.ts
diff --git a/admin/src/middleware.ts b/admin/src/middleware.ts
new file mode 100644
index 0000000..68e9b95
--- /dev/null
+++ b/admin/src/middleware.ts
@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.headers.has('x-middleware-subrequest')) {
+    return new NextResponse('Unsupported internal request header', { status: 400 })
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    '/(api|trpc)(.*)',
+  ],
+}
diff --git a/admin/src/styles/phase16-tokens.css b/admin/src/styles/phase16-tokens.css
new file mode 100644
index 0000000..c53154b
--- /dev/null
+++ b/admin/src/styles/phase16-tokens.css
@@ -0,0 +1,162 @@
+/* RentalDriveGo Phase 16 design tokens.
+ * Kept deliberately identical across the homepage, operator dashboard, and
+ * platform admin so the product behaves like one system rather than three
+ * unrelated Tailwind experiments.
+ */
+:root {
+  --rdg-blue-50: #eff6ff;
+  --rdg-blue-100: #dbeafe;
+  --rdg-blue-200: #bfdbfe;
+  --rdg-blue-500: #2874e8;
+  --rdg-blue-600: #1b5dd8;
+  --rdg-blue-700: #174bb5;
+  --rdg-blue-800: #183d88;
+  --rdg-orange-100: #ffedd5;
+  --rdg-orange-400: #fb923c;
+  --rdg-orange-600: #ea580c;
+  --rdg-orange-700: #c2410c;
+  --rdg-navy-950: #081426;
+  --rdg-navy-900: #0d1b2e;
+  --rdg-navy-850: #11233b;
+  --rdg-navy-800: #162b46;
+  --rdg-gray-25: #fbfdff;
+  --rdg-gray-50: #f7f9fc;
+  --rdg-gray-100: #eef2f7;
+  --rdg-gray-200: #dbe3ed;
+  --rdg-gray-300: #c6d0dc;
+  --rdg-gray-500: #64748b;
+  --rdg-gray-600: #475569;
+  --rdg-gray-700: #334155;
+  --rdg-gray-800: #1e293b;
+  --rdg-gray-900: #0f172a;
+  --rdg-green-100: #dcfce7;
+  --rdg-green-700: #15803d;
+  --rdg-amber-100: #fef3c7;
+  --rdg-amber-800: #92400e;
+  --rdg-red-100: #fee2e2;
+  --rdg-red-700: #b91c1c;
+
+  --rdg-space-1: 4px;
+  --rdg-space-2: 8px;
+  --rdg-space-3: 12px;
+  --rdg-space-4: 16px;
+  --rdg-space-5: 20px;
+  --rdg-space-6: 24px;
+  --rdg-space-8: 32px;
+  --rdg-space-10: 40px;
+  --rdg-space-12: 48px;
+  --rdg-space-16: 64px;
+  --rdg-space-20: 80px;
+  --rdg-space-24: 96px;
+
+  --rdg-radius-sm: 10px;
+  --rdg-radius-md: 16px;
+  --rdg-radius-lg: 24px;
+  --rdg-radius-xl: 32px;
+  --rdg-radius-pill: 999px;
+  --rdg-touch-min: 44px;
+  --rdg-header-size: 76px;
+  --rdg-sidebar-size: 272px;
+  --rdg-container-max: 1440px;
+  --rdg-content-max: 1280px;
+  --rdg-duration-fast: 120ms;
+  --rdg-duration-standard: 160ms;
+  --rdg-duration-overlay: 220ms;
+  --rdg-easing: cubic-bezier(0.2, 0, 0, 1);
+  --rdg-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --rdg-font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
+
+  --rdg-surface-page: var(--rdg-gray-25);
+  --rdg-surface-primary: #ffffff;
+  --rdg-surface-elevated: #ffffff;
+  --rdg-surface-muted: #f2f6fb;
+  --rdg-surface-strong: #e8f0fa;
+  --rdg-text-primary: #102035;
+  --rdg-text-secondary: #52647a;
+  --rdg-text-subdued: var(--rdg-gray-500);
+  --rdg-text-inverse: #f8fafc;
+  --rdg-border: #d8e2ee;
+  --rdg-border-strong: #bdcad9;
+  --rdg-action-primary: var(--rdg-blue-700);
+  --rdg-action-primary-hover: var(--rdg-blue-800);
+  --rdg-action-conversion: var(--rdg-orange-700);
+  --rdg-action-conversion-hover: #9a3412;
+  --rdg-focus: #f97316;
+  --rdg-soft-blue: #eef5ff;
+  --rdg-soft-orange: #fff7ed;
+  --rdg-overlay: rgba(8, 20, 38, 0.62);
+  --rdg-shadow-color: rgba(8, 20, 38, 0.12);
+  --rdg-shadow-subtle: 0 1px 2px var(--rdg-shadow-color);
+  --rdg-shadow-card: 0 20px 60px var(--rdg-shadow-color);
+  --rdg-shadow-overlay: 0 28px 80px var(--rdg-shadow-color);
+
+  /* Compatibility aliases retained for existing pages. */
+  --primary: var(--rdg-action-primary);
+  --primary-hover: var(--rdg-action-primary-hover);
+  --accent: var(--rdg-action-conversion);
+  --bg-elevated: var(--rdg-surface-elevated);
+  --border-accent: var(--rdg-border);
+  --glass-bg: color-mix(in srgb, var(--rdg-surface-elevated) 90%, transparent);
+  --shadow-card: var(--rdg-shadow-card);
+  --shadow-glow: 0 0 20px color-mix(in srgb, var(--rdg-action-primary) 16%, transparent);
+}
+
+html.dark,
+html[data-theme='dark'] {
+  --rdg-surface-page: var(--rdg-navy-950);
+  --rdg-surface-primary: var(--rdg-navy-900);
+  --rdg-surface-elevated: var(--rdg-navy-850);
+  --rdg-surface-muted: #0b1a2d;
+  --rdg-surface-strong: #172d48;
+  --rdg-text-primary: #eef5ff;
+  --rdg-text-secondary: #adbed2;
+  --rdg-text-subdued: var(--rdg-gray-300);
+  --rdg-text-inverse: var(--rdg-navy-950);
+  --rdg-border: #263c56;
+  --rdg-border-strong: #3a536e;
+  --rdg-action-primary: #76a9ff;
+  --rdg-action-primary-hover: #9bc2ff;
+  --rdg-action-conversion: var(--rdg-orange-400);
+  --rdg-action-conversion-hover: #fdba74;
+  --rdg-focus: var(--rdg-orange-400);
+  --rdg-soft-blue: #10284a;
+  --rdg-soft-orange: #3a2015;
+  --rdg-overlay: rgba(2, 8, 18, 0.76);
+  --rdg-shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+html.light,
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+html[lang='ar'] body {
+  font-family: var(--rdg-font-arabic);
+  line-height: 1.8;
+}
+
+::selection {
+  background: var(--rdg-blue-200);
+  color: var(--rdg-gray-900);
+}
+
+html.dark ::selection,
+html[data-theme='dark'] ::selection {
+  background: var(--rdg-blue-800);
+  color: var(--rdg-gray-25);
+}
+
+:focus-visible {
+  outline: 3px solid var(--rdg-focus);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/apps/homepage/tailwind.config.ts b/admin/tailwind.config.ts
similarity index 100%
rename from apps/homepage/tailwind.config.ts
rename to admin/tailwind.config.ts
diff --git a/admin/tsconfig.json b/admin/tsconfig.json
new file mode 100644
index 0000000..b575f7d
--- /dev/null
+++ b/admin/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/admin/vitest.config.ts b/admin/vitest.config.ts
new file mode 100644
index 0000000..474502a
--- /dev/null
+++ b/admin/vitest.config.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['src/**/*.test.ts'],
+    clearMocks: true,
+    restoreMocks: true,
+  },
+})
diff --git a/api/.env.test b/api/.env.test
new file mode 100644
index 0000000..685408a
--- /dev/null
+++ b/api/.env.test
@@ -0,0 +1,6 @@
+DATABASE_URL=postgresql://user:replace-with-password@host:5432/db
+REDIS_URL=redis://localhost:6379
+JWT_SECRET=replace-with-64-byte-random-secret
+JWT_EXPIRY=8h
+NODE_ENV=test
+FILE_STORAGE_ROOT=/tmp/rentaldrivego-test-storage
diff --git a/api/package.json b/api/package.json
new file mode 100644
index 0000000..3c90573
--- /dev/null
+++ b/api/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@rentaldrivego/api",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "node ../../scripts/run-with-env-file.cjs ../../.env.local ../../node_modules/.bin/ts-node-dev --respawn --transpile-only --ignore-watch ../../packages/types/dist src/index.ts",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "tsc",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "node dist/index.js",
+    "type-check": "tsc --noEmit",
+    "pretest": "npm run build --workspace @rentaldrivego/types",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "pretest:integration": "npm run build --workspace @rentaldrivego/types",
+    "test:integration": "vitest run --config vitest.integration.config.ts",
+    "test:integration:watch": "vitest --config vitest.integration.config.ts",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
+    "test:e2e:watch": "vitest --config vitest.e2e.config.ts",
+    "test:api": "vitest run --config vitest.api.config.ts",
+    "test:api:watch": "vitest --config vitest.api.config.ts"
+  },
+  "dependencies": {
+    "@react-pdf/renderer": "^3.4.3",
+    "@rentaldrivego/database": "*",
+    "@rentaldrivego/types": "*",
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "dayjs": "^1.11.11",
+    "express": "^4.19.2",
+    "express-rate-limit": "^8.5.1",
+    "firebase-admin": "^12.1.0",
+    "helmet": "^7.1.0",
+    "ioredis": "^5.3.2",
+    "jsonwebtoken": "^9.0.2",
+    "morgan": "^1.10.0",
+    "multer": "^2.1.1",
+    "node-cron": "^3.0.3",
+    "nodemailer": "^8.0.10",
+    "otplib": "^12.0.1",
+    "qrcode": "^1.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "resend": "^3.2.0",
+    "socket.io": "^4.7.5",
+    "swagger-ui-express": "^5.0.1",
+    "twilio": "^5.1.0",
+    "zod": "^3.23.0",
+    "zod-to-json-schema": "^3.25.2"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/morgan": "^1.9.9",
+    "@types/multer": "^1.4.11",
+    "@types/node": "^20.12.0",
+    "@types/node-cron": "^3.0.11",
+    "@types/nodemailer": "^6.4.17",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@types/supertest": "^6.0.2",
+    "@types/swagger-ui-express": "^4.1.8",
+    "supertest": "^7.0.0",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/api/src/app.ts b/api/src/app.ts
new file mode 100644
index 0000000..e62243e
--- /dev/null
+++ b/api/src/app.ts
@@ -0,0 +1,240 @@
+import express from 'express'
+import cors, { type CorsOptions } from 'cors'
+import helmet from 'helmet'
+import morgan from 'morgan'
+import swaggerUi from 'swagger-ui-express'
+import { openApiDocument } from './swagger/openapi'
+import { getPublicStorageRoot } from './lib/storage'
+import { authLimiter, apiLimiter, publicLimiter, adminLimiter } from './middleware/rateLimiter'
+import { requestIdMiddleware } from './middleware/requestId'
+
+// ─── Module routes ────────────────────────────────────────────
+import webhookRouter       from './modules/webhooks/webhook.routes'
+import companyAuthRouter   from './modules/auth/auth.company.routes'
+import employeeAuthRouter  from './modules/auth/auth.employee.routes'
+import accountAuthRouter   from './modules/auth/auth.account.routes'
+import renterAuthRouter    from './modules/auth/auth.renter.routes'
+import teamRouter          from './modules/team/team.routes'
+import offersRouter        from './modules/offers/offer.routes'
+import analyticsRouter     from './modules/analytics/analytics.routes'
+import notificationsRouter from './modules/notifications/notification.routes'
+import adminRouter         from './modules/admin/admin.routes'
+import subscriptionsRouter, {
+  subscriptionPublicRouter,
+  subscriptionWebhookRouter,
+} from './modules/subscriptions/subscription.routes'
+import paymentsRouter      from './modules/payments/payment.routes'
+import customersRouter     from './modules/customers/customer.routes'
+import vehiclesRouter      from './modules/vehicles/vehicle.routes'
+import companiesRouter     from './modules/companies/company.routes'
+import reservationsRouter  from './modules/reservations/reservation.routes'
+import marketplaceRouter   from './modules/marketplace/marketplace.routes'
+import siteRouter          from './modules/site/site.routes'
+import reviewsRouter       from './modules/reviews/review.routes'
+import complaintsRouter    from './modules/complaints/complaint.routes'
+import licenseValidationRouter from './modules/licenses/license.validation.routes'
+
+// ─── Centralized error handling ───────────────────────────────
+import { errorMiddleware } from './http/errors/errorMiddleware'
+
+const v1 = '/api/v1'
+
+const defaultCorsOrigins = [
+  'http://localhost:3000',
+  'http://localhost:3001',
+  'http://localhost:3002',
+  'http://localhost:4000',
+  'http://127.0.0.1:3000',
+  'http://127.0.0.1:3001',
+  'http://127.0.0.1:3002',
+  'http://127.0.0.1:4000',
+]
+
+export const corsOrigins = process.env.CORS_ORIGINS
+  ? process.env.CORS_ORIGINS.split(',').map((o) => o.trim()).filter(Boolean)
+  : defaultCorsOrigins
+
+function isAllowedLocalDevOrigin(origin: string) {
+  if (process.env.NODE_ENV === 'production') return false
+
+  try {
+    const url = new URL(origin)
+    return (
+      url.protocol === 'http:' &&
+      ['localhost', '127.0.0.1'].includes(url.hostname) &&
+      ['3000', '3001', '3002', '4000'].includes(url.port)
+    )
+  } catch {
+    return false
+  }
+}
+
+export function isCorsOriginAllowed(origin: string | undefined) {
+  if (!origin) return true
+  return corsOrigins.includes(origin) || isAllowedLocalDevOrigin(origin)
+}
+
+export const corsOptions: CorsOptions = {
+  origin(origin, callback) {
+    callback(null, isCorsOriginAllowed(origin))
+  },
+  credentials: true,
+}
+
+const routeDocs = [
+  { method: 'GET',  path: '/health',                         description: 'Health check' },
+  { method: 'GET',  path: `${v1}/docs`,                      description: 'Machine-readable API index' },
+  { method: 'GET',  path: `${v1}/auth/renter/me`,            description: 'Current renter profile' },
+  { method: 'GET',  path: `${v1}/vehicles`,                  description: 'List company vehicles' },
+  { method: 'POST', path: `${v1}/vehicles`,                  description: 'Create vehicle' },
+  { method: 'GET',  path: `${v1}/reservations`,              description: 'List reservations' },
+  { method: 'POST', path: `${v1}/reservations`,              description: 'Create reservation' },
+  { method: 'GET',  path: `${v1}/customers`,                 description: 'List customers' },
+  { method: 'POST', path: `${v1}/customers`,                 description: 'Create customer' },
+  { method: 'GET',  path: `${v1}/offers`,                    description: 'List offers' },
+  { method: 'GET',  path: `${v1}/analytics/dashboard`,       description: 'Dashboard analytics' },
+  { method: 'GET',  path: `${v1}/analytics/report`,          description: 'Analytics report' },
+  { method: 'GET',  path: `${v1}/notifications/company`,     description: 'Company notifications' },
+  { method: 'GET',  path: `${v1}/marketplace/cities`,        description: 'Marketplace cities' },
+  { method: 'GET',  path: `${v1}/marketplace/search`,        description: 'Marketplace search' },
+  { method: 'GET',  path: `${v1}/site/:slug/brand`,          description: 'Public site brand config' },
+  { method: 'GET',  path: `${v1}/companies/me`,              description: 'Current company profile' },
+  { method: 'GET',  path: `${v1}/subscriptions/plans`,       description: 'Subscription plans' },
+  { method: 'GET',  path: `${v1}/subscriptions/features`,    description: 'Subscription plan features' },
+  { method: 'POST', path: `${v1}/admin/auth/login`,          description: 'Admin login' },
+]
+
+export function createApp() {
+  const app = express()
+  const corsMiddleware = cors(corsOptions)
+
+  if (process.env.NODE_ENV === 'production') {
+    app.set('trust proxy', 1)
+  }
+
+  app.use(requestIdMiddleware)
+
+  app.use((req, res, next) => {
+    if (req.headers['x-middleware-subrequest']) {
+      return res.status(400).json({ error: 'bad_request', message: 'Unsupported internal request header', statusCode: 400 })
+    }
+    next()
+  })
+
+  app.use(corsMiddleware)
+
+  // Customer identity documents must never be anonymously retrievable from the
+  // public storage mount, even if an older raw storage URL leaks.
+  app.use('/storage/companies/:companyId/customers/:customerId', (_req, res) => {
+    res.status(404).end()
+  })
+
+  // Public storage assets (logos, vehicle photos, etc.) must be loadable cross-origin
+  // by the browser. Without this header, helmet's default CORP: same-origin reaches
+  // 404 responses (when express.static calls next() on a miss) and the browser blocks
+  // the response even for broken-image cases, producing ERR_BLOCKED_BY_RESPONSE.
+  app.use('/storage', (_req, res, next) => {
+    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
+    next()
+  })
+
+  // Serve only explicitly public uploaded assets. Private documents are resolved
+  // through authenticated API routes such as /customers/:id/license-image.
+  app.use('/storage', express.static(getPublicStorageRoot()))
+
+  // Swagger UI — mounted before helmet so its assets are not blocked by CSP
+  app.use('/docs', swaggerUi.serve, swaggerUi.setup(openApiDocument, { customSiteTitle: 'RentalDriveGo API Docs' }))
+  app.get('/api/v1/openapi.json', (_req, res) => res.json(openApiDocument))
+
+  // Webhooks must use raw body BEFORE express.json(); signature verification
+  // must never reconstruct the payload with JSON.stringify(req.body).
+  app.use(`${v1}/webhooks`, express.raw({ type: 'application/json' }), webhookRouter)
+  app.use(`${v1}/payments/webhooks`, express.raw({ type: 'application/json' }))
+  app.use(`${v1}/subscriptions/webhooks`, express.raw({ type: 'application/json' }))
+
+  // Let /storage responses manage CORP explicitly so missing files still return
+  // a normal cross-origin 404 instead of being blocked by Helmet's default
+  // same-origin policy. Keep CSP explicit instead of letting browser security
+  // drift into wishful thinking with headers.
+  app.use(helmet({
+    crossOriginResourcePolicy: false,
+    contentSecurityPolicy: {
+      directives: {
+        defaultSrc: ["'self'"],
+        baseUri: ["'self'"],
+        frameAncestors: ["'none'"],
+        formAction: ["'self'"],
+        objectSrc: ["'none'"],
+        scriptSrc: ["'self'"],
+        styleSrc: ["'self'", "'unsafe-inline'"],
+        imgSrc: ["'self'", 'data:', 'blob:', 'https:'],
+        connectSrc: ["'self'", 'https:', 'wss:'],
+        upgradeInsecureRequests: process.env.NODE_ENV === 'production' ? [] : null,
+      },
+    },
+    referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
+    frameguard: { action: 'deny' },
+  }))
+  if (process.env.NODE_ENV !== 'test') app.use(morgan('combined'))
+  app.use(express.json({ limit: '10mb' }))
+
+  // ─── API Routes ─────────────────────────────────────────────
+  app.use(`${v1}/auth/account`,   authLimiter, accountAuthRouter)
+  app.use(`${v1}/auth/renter`,    authLimiter, renterAuthRouter)
+  app.use(`${v1}/auth/company`,   authLimiter, companyAuthRouter)
+  app.use(`${v1}/auth/employee`,  authLimiter, employeeAuthRouter)
+
+  app.use(`${v1}/admin/auth`,     authLimiter)
+  app.use(`${v1}/admin`,          adminLimiter, adminRouter)
+
+  app.use(`${v1}/marketplace`,    publicLimiter, marketplaceRouter)
+  app.use(`${v1}/site`,           publicLimiter, siteRouter)
+  app.use(`${v1}/subscriptions`,  subscriptionPublicRouter)
+  app.use(`${v1}/subscriptions`,  subscriptionWebhookRouter)
+
+  app.use(`${v1}/vehicles`,       apiLimiter, vehiclesRouter)
+  app.use(`${v1}/reservations`,   apiLimiter, reservationsRouter)
+  app.use(`${v1}/team`,           apiLimiter, teamRouter)
+  app.use(`${v1}/customers`,      apiLimiter, customersRouter)
+  app.use(`${v1}/offers`,         apiLimiter, offersRouter)
+  app.use(`${v1}/analytics`,      apiLimiter, analyticsRouter)
+  app.use(`${v1}/notifications`,  apiLimiter, notificationsRouter)
+  app.use(`${v1}/companies`,      apiLimiter, companiesRouter)
+  app.use(`${v1}/subscriptions`,  apiLimiter, subscriptionsRouter)
+  app.use(`${v1}/payments`,       apiLimiter, paymentsRouter)
+  app.use(`${v1}/reviews`,        apiLimiter, reviewsRouter)
+  app.use(`${v1}/complaints`,     apiLimiter, complaintsRouter)
+  app.use(`${v1}/licenses`,       publicLimiter, licenseValidationRouter)
+
+  // ─── Health / Docs ──────────────────────────────────────────
+  app.get(v1, (_req, res) => {
+    res.json({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: v1,
+      health: '/health',
+      docs: `${v1}/docs`,
+      openApi: `${v1}/openapi.json`,
+    })
+  })
+
+  app.get('/health', (_req, res) => {
+    res.json({ status: 'ok', version: '1.0.0', timestamp: new Date().toISOString() })
+  })
+
+  app.get(`${v1}/docs`, (_req, res) => {
+    res.json({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: v1,
+      routes: routeDocs,
+      swaggerUi: '/docs',
+      openApi: '/api/v1/openapi.json',
+    })
+  })
+
+  // ─── Error handler ──────────────────────────────────────────
+  app.use(errorMiddleware)
+
+  return app
+}
diff --git a/api/src/data/platform-content.json b/api/src/data/platform-content.json
new file mode 100644
index 0000000..5fc59e4
--- /dev/null
+++ b/api/src/data/platform-content.json
@@ -0,0 +1,331 @@
+{
+  "marketplaceHomepage": {
+    "en": {
+      "sections": [
+        "hero",
+        "surface",
+        "pillars",
+        "audiences",
+        "features",
+        "howitworks",
+        "steps",
+        "testimonials",
+        "closing"
+      ],
+      "heroKicker": "RentalDriveGo",
+      "heroTitle": "Marketplace discovery with a sharper front door.",
+      "heroBody": "Rental companies run private operations, renters browse a shared marketplace, and every booking ends on the company’s own branded checkout.",
+      "startTrial": "Start free trial",
+      "exploreVehicles": "Explore vehicles",
+      "surfaceLabel": "Marketplace surface",
+      "surfaceTitle": "Designed for two audiences at once.",
+      "surfaceBody": "Operators need control, renters need confidence. The marketplace should show both without feeling like a template.",
+      "liveLabel": "Live network",
+      "trustedFleets": "Trusted fleets",
+      "brandedFlows": "Branded booking flows",
+      "multiTenant": "Multi-tenant operations",
+      "companyKicker": "Operator workflow",
+      "companyTitle": "Manage inventory, offers, billing, and staff from one control layer.",
+      "companyBody": "Publish inventory once, decide what appears publicly, and keep contracts, payments, and reporting isolated per company.",
+      "renterKicker": "Renter experience",
+      "renterTitle": "Let renters compare quickly, then hand them off to the right company site.",
+      "renterBody": "The marketplace works as a discovery engine, not a dead-end aggregator. Search here, reserve there, and pay direct.",
+      "pillars": [
+        {
+          "title": "Unified publishing",
+          "body": "Vehicle photos, pricing, and offers flow from one admin workflow into marketplace discovery and branded booking pages."
+        },
+        {
+          "title": "Qualified discovery",
+          "body": "Featured offers, location-aware browsing, and company reputation signals help renters narrow options fast."
+        },
+        {
+          "title": "Direct revenue path",
+          "body": "Bookings move into the company’s own payment flow, so customer ownership and cash collection stay with the business."
+        }
+      ],
+      "metrics": [
+        {
+          "value": "01",
+          "label": "Shared marketplace visibility"
+        },
+        {
+          "value": "02",
+          "label": "Direct company checkout"
+        },
+        {
+          "value": "03",
+          "label": "Company-owned payments"
+        }
+      ],
+      "featureLabel": "What the product covers",
+      "features": [
+        "Fleet management with multi-photo uploads",
+        "Marketplace offers and redirect booking flow",
+        "Branded public booking site per company",
+        "Customer CRM, analytics, and billing controls"
+      ],
+      "howitworksKicker": "GETTING STARTED",
+      "howitworksTitle": "How It Works",
+      "howitworksSteps": [
+        {
+          "number": "1",
+          "title": "Create Account",
+          "description": "Sign up for your company workspace and choose your pricing plan for the 90-day free trial."
+        },
+        {
+          "number": "2",
+          "title": "Add Your Fleet",
+          "description": "Upload vehicle photos, set prices, and create offers visible on the marketplace."
+        },
+        {
+          "number": "3",
+          "title": "Start Selling",
+          "description": "Renters discover your fleet, and bookings flow directly to your branded checkout."
+        }
+      ],
+      "stepsTitle": "How companies launch",
+      "steps": [
+        {
+          "step": "1",
+          "title": "Create your company workspace",
+          "body": "Pick a plan, launch your 90-day trial, and verify the owner account."
+        },
+        {
+          "step": "2",
+          "title": "Publish vehicles and offers",
+          "body": "Upload photos once and control what appears on the marketplace and branded site."
+        },
+        {
+          "step": "3",
+          "title": "Accept bookings on your own site",
+          "body": "Renters discover your fleet on RentalDriveGo, then pay you directly on your branded booking flow."
+        }
+      ],
+      "stepLabel": "Step",
+      "readyKicker": "Ready to launch",
+      "readyTitle": "The marketplace homepage should explain the product in seconds.",
+      "readyBody": "Use the marketplace to attract demand, then move renters into a branded experience that keeps pricing, payments, and trust tied to your company.",
+      "viewPricing": "View pricing",
+      "createWorkspace": "Create workspace"
+    },
+    "fr": {
+      "sections": [
+        "hero",
+        "surface",
+        "pillars",
+        "audiences",
+        "features",
+        "howitworks",
+        "steps",
+        "testimonials",
+        "closing"
+      ],
+      "heroKicker": "RentalDriveGo",
+      "heroTitle": "Une vitrine marketplace plus claire et plus percutante.",
+      "heroBody": "Les entreprises de location gèrent leurs opérations en privé, les clients parcourent une marketplace commune et chaque réservation se finalise sur le parcours de paiement aux couleurs de l'entreprise.",
+      "startTrial": "Commencer l’essai gratuit",
+      "exploreVehicles": "Explorer les véhicules",
+      "surfaceLabel": "Vitrine marketplace",
+      "surfaceTitle": "Pensée pour deux audiences à la fois.",
+      "surfaceBody": "Les opérateurs veulent du contrôle, les clients veulent de la confiance. La marketplace doit montrer les deux sans ressembler à un modèle générique.",
+      "liveLabel": "Réseau actif",
+      "trustedFleets": "Flottes fiables",
+      "brandedFlows": "Parcours de marque",
+      "multiTenant": "Opérations multi-tenant",
+      "companyKicker": "Flux opérateur",
+      "companyTitle": "Pilotez l’inventaire, les offres, la facturation et l’équipe depuis un seul centre de contrôle.",
+      "companyBody": "Publiez une seule fois, choisissez ce qui apparaît publiquement, et gardez contrats, paiements et rapports isolés par entreprise.",
+      "renterKicker": "Expérience client",
+      "renterTitle": "Laissez les clients comparer rapidement, puis redirigez-les vers le bon site d’entreprise.",
+      "renterBody": "La marketplace sert de moteur de découverte, pas d’agrégateur sans suite. Recherche ici, réservation là-bas, paiement direct.",
+      "pillars": [
+        {
+          "title": "Publication unifiée",
+          "body": "Les photos, tarifs et offres circulent depuis un seul flux d’administration vers la découverte marketplace et les pages de réservation de marque."
+        },
+        {
+          "title": "Découverte qualifiée",
+          "body": "Offres mises en avant, navigation par localisation et signaux de réputation aident les clients à filtrer rapidement."
+        },
+        {
+          "title": "Revenus en direct",
+          "body": "Les réservations basculent vers le paiement propre à l’entreprise afin de préserver la relation client et l’encaissement."
+        }
+      ],
+      "metrics": [
+        {
+          "value": "01",
+          "label": "Visibilité marketplace partagée"
+        },
+        {
+          "value": "02",
+          "label": "Paiement direct entreprise"
+        },
+        {
+          "value": "03",
+          "label": "Paiements gérés par l’entreprise"
+        }
+      ],
+      "featureLabel": "Ce que couvre le produit",
+      "features": [
+        "Gestion de flotte avec téléversement de plusieurs photos",
+        "Offres marketplace et redirection vers la réservation",
+        "Site public de réservation par entreprise",
+         "CRM client, analytics et contrôle de facturation"
+       ],
+       "howitworksKicker": "MISE EN ROUTE",
+       "howitworksTitle": "Comment ça marche",
+       "howitworksSteps": [
+         {
+           "number": "1",
+           "title": "Créer un compte",
+           "description": "Inscrivez-vous à votre espace entreprise et choisissez votre forfait pour l'essai gratuit de 90 jours."
+         },
+         {
+           "number": "2",
+           "title": "Ajouter votre flotte",
+           "description": "Téléversez les photos des véhicules, fixez les tarifs et créez des offres visibles sur la marketplace."
+         },
+         {
+           "number": "3",
+           "title": "Commencer à vendre",
+           "description": "Les clients découvrent votre flotte et les réservations arrivent directement à votre paiement de marque."
+         }
+       ],
+       "stepsTitle": "Comment les entreprises démarrent",
+      "steps": [
+        {
+          "step": "1",
+          "title": "Créez votre espace entreprise",
+          "body": "Choisissez un plan, lancez votre essai de 90 jours et vérifiez le compte propriétaire."
+        },
+        {
+          "step": "2",
+          "title": "Publiez véhicules et offres",
+          "body": "Téléversez une seule fois et contrôlez ce qui apparaît sur la marketplace et le site de marque."
+        },
+        {
+          "step": "3",
+          "title": "Acceptez les réservations sur votre site",
+          "body": "Les clients découvrent votre flotte sur RentalDriveGo puis paient directement via votre parcours de réservation."
+        }
+      ],
+      "stepLabel": "Étape",
+      "readyKicker": "Prêt à démarrer",
+      "readyTitle": "La page d’accueil marketplace doit présenter le produit en quelques secondes.",
+      "readyBody": "Utilisez la marketplace pour capter la demande, puis orientez les clients vers une expérience de marque où les prix, les paiements et la confiance restent attachés à votre entreprise.",
+      "viewPricing": "Voir les tarifs",
+      "createWorkspace": "Créer l’espace"
+    },
+    "ar": {
+      "sections": [
+        "hero",
+        "surface",
+        "pillars",
+        "audiences",
+        "features",
+        "howitworks",
+        "steps",
+        "testimonials",
+        "closing"
+      ],
+      "heroKicker": "RentalDriveGo",
+      "heroTitle": "واجهة سوق أكثر وضوحاً وتأثيراً.",
+      "heroBody": "شركات التأجير تدير عملياتها بشكل خاص، والمستأجرون يتصفحون سوقاً مشتركاً، وكل حجز ينتهي في صفحة دفع تحمل هوية الشركة ذاتها.",
+      "startTrial": "ابدأ التجربة المجانية",
+      "exploreVehicles": "استكشف السيارات",
+      "surfaceLabel": "واجهة السوق",
+      "surfaceTitle": "مصممة لجمهورين في الوقت نفسه.",
+      "surfaceBody": "المشغلون يريدون التحكم، والمستأجرون يريدون الثقة. يجب أن تُظهر المنصة الأمرين معاً من دون أن تبدو كقالب عادي.",
+      "liveLabel": "شبكة نشطة",
+      "trustedFleets": "أساطيل موثوقة",
+      "brandedFlows": "مسارات حجز مخصصة",
+      "multiTenant": "عمليات متعددة الشركات",
+      "companyKicker": "سير عمل المشغل",
+      "companyTitle": "تحكم في المخزون والعروض والفوترة والفريق من طبقة تشغيل واحدة.",
+      "companyBody": "انشر المخزون مرة واحدة، وحدد ما يظهر للعامة، واحتفظ بالعقود والمدفوعات والتقارير معزولة لكل شركة.",
+      "renterKicker": "تجربة المستأجر",
+      "renterTitle": "دع المستأجرين يقارنون بسرعة ثم وجّههم إلى موقع الشركة المناسب.",
+      "renterBody": "هذه المنصة محرك لاكتشاف الخيارات، وليست مُجمِّعاً بلا مسار واضح. ابحث هنا، احجز هناك، وادفع مباشرة للشركة.",
+      "pillars": [
+        {
+          "title": "نشر موحد",
+          "body": "صور السيارات والأسعار والعروض تنتقل من سير إدارة واحد إلى السوق وصفحات الحجز ذات الهوية الخاصة."
+        },
+        {
+          "title": "اكتشاف مؤهل",
+          "body": "تساعد العروض المميزة، والتصفح حسب الموقع، وإشارات السمعة المستأجرين على تحديد خياراتهم بسرعة."
+        },
+        {
+          "title": "مسار إيراد مباشر",
+          "body": "تنتقل الحجوزات إلى صفحة الدفع الخاصة بالشركة حتى تبقى علاقة العميل والتحصيل المالي بيد الشركة نفسها."
+        }
+      ],
+      "metrics": [
+        {
+          "value": "01",
+          "label": "ظهور مشترك في السوق"
+        },
+        {
+          "value": "02",
+          "label": "دفع مباشر للشركة"
+        },
+        {
+          "value": "03",
+          "label": "مدفوعات مملوكة للشركة"
+        }
+      ],
+      "featureLabel": "ما الذي يقدمه المنتج",
+      "features": [
+        "إدارة الأسطول مع رفع عدة صور",
+        "عروض السوق والتحويل إلى مسار الحجز",
+        "موقع حجز عام مخصص لكل شركة",
+         "إدارة العملاء والتحليلات والفوترة"
+       ],
+       "howitworksKicker": "البدء",
+       "howitworksTitle": "كيف يعمل",
+       "howitworksSteps": [
+         {
+           "number": "1",
+           "title": "إنشاء حساب",
+           "description": "قم بالتسجيل للحصول على مساحة عمل شركتك واختر خطتك للتجربة المجانية لمدة 90 يوماً."
+         },
+         {
+           "number": "2",
+           "title": "أضف أسطولك",
+           "description": "قم برفع صور السيارات، وحدد الأسعار، وأنشئ عروضاً مرئية في السوق."
+         },
+         {
+           "number": "3",
+           "title": "ابدأ البيع",
+           "description": "يكتشف المستأجرون أسطولك وتأتي الحجوزات مباشرة إلى دفعتك المخصصة."
+         }
+       ],
+       "stepsTitle": "كيف تبدأ الشركات",
+      "steps": [
+        {
+          "step": "1",
+          "title": "أنشئ مساحة عمل شركتك",
+          "body": "اختر الخطة وابدأ تجربتك لمدة 14 يوماً ثم فعّل حساب المالك."
+        },
+        {
+          "step": "2",
+          "title": "انشر السيارات والعروض",
+          "body": "ارفع الصور مرة واحدة وتحكم فيما يظهر في السوق وفي الموقع المخصص."
+        },
+        {
+          "step": "3",
+          "title": "استقبل الحجوزات على موقعك",
+          "body": "يكتشف المستأجرون أسطولك على RentalDriveGo ثم يدفعون مباشرة عبر مسار الحجز الخاص بك."
+        }
+      ],
+      "stepLabel": "الخطوة",
+      "readyKicker": "جاهز للانطلاق",
+      "readyTitle": "يجب أن تشرح الصفحة الرئيسية قيمة المنصة خلال ثوانٍ.",
+      "readyBody": "استخدم السوق لجذب الطلب، ثم انقل المستأجرين إلى تجربة تحمل هوية شركتك، بحيث تبقى الأسعار والمدفوعات والثقة مرتبطة بنشاطك.",
+      "viewPricing": "عرض الأسعار",
+      "createWorkspace": "إنشاء المساحة"
+    }
+  }
+}
diff --git a/api/src/http/errors/errorMiddleware.test.ts b/api/src/http/errors/errorMiddleware.test.ts
new file mode 100644
index 0000000..a107405
--- /dev/null
+++ b/api/src/http/errors/errorMiddleware.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { Response } from 'express'
+import { z } from 'zod'
+import { AppError, ConflictError, ForbiddenError, NotFoundError, UnauthorizedError, ValidationError } from './index'
+import { errorMiddleware } from './errorMiddleware'
+
+function createResponseStub() {
+  const res = {
+    status: vi.fn(),
+    json: vi.fn(),
+  }
+
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+
+  return res as unknown as Response & typeof res
+}
+
+function handle(error: unknown) {
+  const res = createResponseStub()
+  errorMiddleware(error, {} as any, res, vi.fn())
+  return res
+}
+
+describe('AppError subclasses', () => {
+  it.each([
+    [new ValidationError('Bad payload'), 400, 'validation_error'],
+    [new UnauthorizedError(), 401, 'unauthorized'],
+    [new ForbiddenError(), 403, 'forbidden'],
+    [new NotFoundError(), 404, 'not_found'],
+    [new ConflictError(), 409, 'conflict'],
+  ])('sets stable status and error code for %s', (error, statusCode, code) => {
+    expect(error).toBeInstanceOf(AppError)
+    expect(error.statusCode).toBe(statusCode)
+    expect(error.error).toBe(code)
+  })
+})
+
+describe('errorMiddleware', () => {
+  it('normalizes Zod errors into validation responses', () => {
+    const result = z.object({ email: z.string().email() }).safeParse({ email: 'not-an-email' })
+    expect(result.success).toBe(false)
+
+    const res = handle(result.success ? new Error('unexpected') : result.error)
+
+    expect(res.status).toHaveBeenCalledWith(400)
+    expect(res.json).toHaveBeenCalledWith(expect.objectContaining({
+      error: 'validation_error',
+      message: 'Invalid request body',
+      statusCode: 400,
+      issues: expect.any(Array),
+    }))
+  })
+
+  it('normalizes Prisma not found errors', () => {
+    const res = handle({ code: 'P2025' })
+
+    expect(res.status).toHaveBeenCalledWith(404)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'not_found',
+      message: 'Resource not found',
+      statusCode: 404,
+    })
+  })
+
+  it('normalizes Prisma unique constraint errors', () => {
+    const res = handle({ code: 'P2002' })
+
+    expect(res.status).toHaveBeenCalledWith(409)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'conflict',
+      message: 'A resource with this value already exists',
+      statusCode: 409,
+    })
+  })
+
+  it('preserves AppError metadata in the response body', () => {
+    const res = handle(new AppError('Plan required', 402, 'payment_required', { requiredPlan: 'PRO' }))
+
+    expect(res.status).toHaveBeenCalledWith(402)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'payment_required',
+      message: 'Plan required',
+      statusCode: 402,
+      requiredPlan: 'PRO',
+    })
+  })
+
+  it('falls back to a 500 internal error response', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    const res = handle(new Error('boom'))
+
+    expect(res.status).toHaveBeenCalledWith(500)
+    expect(res.json).toHaveBeenCalledWith({ error: 'internal_error', message: 'Internal server error', statusCode: 500, requestId: undefined })
+
+    spy.mockRestore()
+  })
+})
diff --git a/api/src/http/errors/errorMiddleware.ts b/api/src/http/errors/errorMiddleware.ts
new file mode 100644
index 0000000..051d91b
--- /dev/null
+++ b/api/src/http/errors/errorMiddleware.ts
@@ -0,0 +1,48 @@
+import { Request, Response, NextFunction } from 'express'
+import { AppError } from './index'
+
+function withRequestId(req: Request, payload: Record<string, unknown>) {
+  return { ...payload, requestId: req.requestId }
+}
+
+export function errorMiddleware(err: any, req: Request, res: Response, _next: NextFunction) {
+  if (err.name === 'ZodError') {
+    return res.status(400).json(withRequestId(req, {
+      error: 'validation_error',
+      message: 'Invalid request body',
+      issues: err.issues,
+      statusCode: 400,
+    }))
+  }
+
+  if (err.code === 'P2025') {
+    return res.status(404).json(withRequestId(req, { error: 'not_found', message: 'Resource not found', statusCode: 404 }))
+  }
+
+  if (err.code === 'P2002') {
+    return res.status(409).json(withRequestId(req, { error: 'conflict', message: 'A resource with this value already exists', statusCode: 409 }))
+  }
+
+  if (err instanceof AppError) {
+    if (err.statusCode >= 500) console.error('[API Error]', { requestId: req.requestId, err })
+    return res.status(err.statusCode).json(withRequestId(req, {
+      error: err.error,
+      message: err.statusCode >= 500 ? 'Internal server error' : err.message,
+      statusCode: err.statusCode,
+      ...(err.statusCode >= 500 ? {} : err.data),
+    }))
+  }
+
+  const statusCode = typeof err.statusCode === 'number' ? err.statusCode : 500
+  const safeStatusCode = statusCode >= 400 && statusCode < 600 ? statusCode : 500
+
+  if (safeStatusCode >= 500) {
+    console.error('[API Error]', { requestId: req.requestId, err })
+  }
+
+  res.status(safeStatusCode).json(withRequestId(req, {
+    error: safeStatusCode >= 500 ? 'internal_error' : (err.code ?? 'request_error'),
+    message: safeStatusCode >= 500 ? 'Internal server error' : (err.message ?? 'Request failed'),
+    statusCode: safeStatusCode,
+  }))
+}
diff --git a/api/src/http/errors/index.ts b/api/src/http/errors/index.ts
new file mode 100644
index 0000000..8cf4f8b
--- /dev/null
+++ b/api/src/http/errors/index.ts
@@ -0,0 +1,43 @@
+export class AppError extends Error {
+  readonly statusCode: number
+  readonly error: string
+  readonly data?: Record<string, unknown>
+
+  constructor(message: string, statusCode: number, error: string, data?: Record<string, unknown>) {
+    super(message)
+    this.statusCode = statusCode
+    this.error = error
+    this.data = data
+    this.name = this.constructor.name
+  }
+}
+
+export class ValidationError extends AppError {
+  constructor(message = 'Validation error') {
+    super(message, 400, 'validation_error')
+  }
+}
+
+export class NotFoundError extends AppError {
+  constructor(message = 'Resource not found') {
+    super(message, 404, 'not_found')
+  }
+}
+
+export class ConflictError extends AppError {
+  constructor(message = 'A resource with this value already exists') {
+    super(message, 409, 'conflict')
+  }
+}
+
+export class ForbiddenError extends AppError {
+  constructor(message = 'Forbidden') {
+    super(message, 403, 'forbidden')
+  }
+}
+
+export class UnauthorizedError extends AppError {
+  constructor(message = 'Unauthorized') {
+    super(message, 401, 'unauthorized')
+  }
+}
diff --git a/api/src/http/respond/index.ts b/api/src/http/respond/index.ts
new file mode 100644
index 0000000..bd2b277
--- /dev/null
+++ b/api/src/http/respond/index.ts
@@ -0,0 +1,13 @@
+import { Response } from 'express'
+
+export function ok<T>(res: Response, data: T): void {
+  res.json({ data })
+}
+
+export function created<T>(res: Response, data: T): void {
+  res.status(201).json({ data })
+}
+
+export function noContent(res: Response): void {
+  res.status(204).end()
+}
diff --git a/api/src/http/respond/respond.test.ts b/api/src/http/respond/respond.test.ts
new file mode 100644
index 0000000..1885622
--- /dev/null
+++ b/api/src/http/respond/respond.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { Response } from 'express'
+import { created, noContent, ok } from './index'
+
+function createResponseStub() {
+  const res = {
+    status: vi.fn(),
+    json: vi.fn(),
+    end: vi.fn(),
+  }
+
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  res.end.mockReturnValue(res)
+
+  return res as unknown as Response & typeof res
+}
+
+describe('http/respond helpers', () => {
+  it('ok responds with the expected data envelope', () => {
+    const res = createResponseStub()
+    const payload = { id: 'vehicle_1', name: 'Dacia Logan' }
+
+    ok(res, payload)
+
+    expect(res.status).not.toHaveBeenCalled()
+    expect(res.json).toHaveBeenCalledWith({ data: payload })
+  })
+
+  it('created responds with status 201 and the expected data envelope', () => {
+    const res = createResponseStub()
+    const payload = { id: 'reservation_1' }
+
+    created(res, payload)
+
+    expect(res.status).toHaveBeenCalledWith(201)
+    expect(res.json).toHaveBeenCalledWith({ data: payload })
+  })
+
+  it('noContent responds with status 204 and no body', () => {
+    const res = createResponseStub()
+
+    noContent(res)
+
+    expect(res.status).toHaveBeenCalledWith(204)
+    expect(res.end).toHaveBeenCalledWith()
+    expect(res.json).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/http/upload/index.ts b/api/src/http/upload/index.ts
new file mode 100644
index 0000000..c4df6a9
--- /dev/null
+++ b/api/src/http/upload/index.ts
@@ -0,0 +1,83 @@
+import path from 'path'
+import multer from 'multer'
+import { ValidationError } from '../errors'
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10 MB
+const ALLOWED_IMAGE_TYPES = new Map<string, string[]>([
+  ['image/jpeg', ['.jpg', '.jpeg']],
+  ['image/png', ['.png']],
+  ['image/webp', ['.webp']],
+  ['image/gif', ['.gif']],
+])
+
+/**
+ * Shared multer instance used by all upload endpoints.
+ * Files are kept in memory so services receive a Buffer — no temp-file cleanup needed.
+ */
+export const imageUpload = multer({
+  storage: multer.memoryStorage(),
+  limits: { fileSize: MAX_FILE_SIZE, files: 20 },
+})
+
+type DetectedFile = { mime: string; ext: string }
+
+export function detectImageType(buffer: Buffer): DetectedFile | null {
+  if (buffer.length >= 3 && buffer[0] === 0xff && buffer[1] === 0xd8 && buffer[2] === 0xff) {
+    return { mime: 'image/jpeg', ext: '.jpg' }
+  }
+
+  if (
+    buffer.length >= 8 &&
+    buffer[0] === 0x89 && buffer[1] === 0x50 && buffer[2] === 0x4e && buffer[3] === 0x47 &&
+    buffer[4] === 0x0d && buffer[5] === 0x0a && buffer[6] === 0x1a && buffer[7] === 0x0a
+  ) {
+    return { mime: 'image/png', ext: '.png' }
+  }
+
+  if (buffer.length >= 12 && buffer.subarray(0, 4).toString('ascii') === 'RIFF' && buffer.subarray(8, 12).toString('ascii') === 'WEBP') {
+    return { mime: 'image/webp', ext: '.webp' }
+  }
+
+  if (buffer.length >= 6) {
+    const sig = buffer.subarray(0, 6).toString('ascii')
+    if (sig === 'GIF87a' || sig === 'GIF89a') return { mime: 'image/gif', ext: '.gif' }
+  }
+
+  return null
+}
+
+function assertSafeImageContent(file: Express.Multer.File) {
+  const detected = detectImageType(file.buffer)
+  if (!detected || !ALLOWED_IMAGE_TYPES.has(detected.mime)) {
+    throw new ValidationError(`Unsupported or spoofed image file: ${file.originalname}`)
+  }
+
+  if (file.mimetype !== detected.mime) {
+    throw new ValidationError(`MIME type does not match file content for "${file.originalname}"`)
+  }
+
+  const ext = path.extname(file.originalname).toLowerCase()
+  const allowedExtensions = ALLOWED_IMAGE_TYPES.get(detected.mime) ?? []
+  if (ext && !allowedExtensions.includes(ext)) {
+    throw new ValidationError(`File extension does not match file content for "${file.originalname}"`)
+  }
+}
+
+/**
+ * Asserts that a file was provided and is an image by content, not by client claims.
+ */
+export function assertImageFile(
+  file: Express.Multer.File | undefined,
+  fieldLabel = 'file',
+): asserts file is Express.Multer.File {
+  if (!file) throw new ValidationError(`A ${fieldLabel} is required`)
+  assertSafeImageContent(file)
+}
+
+/**
+ * Asserts that at least one file was provided and all files are image content.
+ */
+export function assertImageFiles(files: Express.Multer.File[], fieldLabel = 'photos'): void {
+  if (!files || files.length === 0) throw new ValidationError(`At least one ${fieldLabel} file is required`)
+  for (const file of files) assertSafeImageContent(file)
+}
diff --git a/api/src/http/upload/upload.test.ts b/api/src/http/upload/upload.test.ts
new file mode 100644
index 0000000..59db1db
--- /dev/null
+++ b/api/src/http/upload/upload.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { ValidationError } from '../errors'
+import { assertImageFile, assertImageFiles } from './index'
+
+const file = (overrides: Partial<Express.Multer.File> = {}) => ({
+  fieldname: 'file',
+  originalname: 'photo.jpg',
+  encoding: '7bit',
+  mimetype: 'image/jpeg',
+  size: 123,
+  buffer: Buffer.from([0xff, 0xd8, 0xff, 0xdb]),
+  stream: undefined as any,
+  destination: '',
+  filename: '',
+  path: '',
+  ...overrides,
+})
+
+describe('upload assertions', () => {
+  it('accepts a single image file and narrows the route input', () => {
+    expect(() => assertImageFile(file())).not.toThrow()
+  })
+
+  it('rejects missing single file uploads with a field-specific error', () => {
+    expect(() => assertImageFile(undefined, 'license image')).toThrow(ValidationError)
+    expect(() => assertImageFile(undefined, 'license image')).toThrow('A license image is required')
+  })
+
+  it('rejects non-image single file uploads', () => {
+    expect(() => assertImageFile(file({ mimetype: 'application/pdf', originalname: 'license.pdf' }))).toThrow('MIME type does not match file content')
+  })
+
+  it('accepts multiple image files and rejects empty or mixed batches', () => {
+    expect(() => assertImageFiles([file({ originalname: 'front.png', mimetype: 'image/png', buffer: Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]) })])).not.toThrow()
+    expect(() => assertImageFiles([], 'inspection photos')).toThrow('At least one inspection photos file is required')
+    expect(() => assertImageFiles([
+      file({ originalname: 'front.png', mimetype: 'image/png', buffer: Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]) }),
+      file({ originalname: 'report.pdf', mimetype: 'application/pdf', buffer: Buffer.from('%PDF') }),
+    ])).toThrow('Unsupported or spoofed image file: report.pdf')
+  })
+})
diff --git a/api/src/http/validate/index.ts b/api/src/http/validate/index.ts
new file mode 100644
index 0000000..a23e224
--- /dev/null
+++ b/api/src/http/validate/index.ts
@@ -0,0 +1,14 @@
+import type { Request } from 'express'
+import type { ZodTypeAny, output } from 'zod'
+
+export function parseBody<TSchema extends ZodTypeAny>(schema: TSchema, req: Request): output<TSchema> {
+  return schema.parse(req.body)
+}
+
+export function parseQuery<TSchema extends ZodTypeAny>(schema: TSchema, req: Request): output<TSchema> {
+  return schema.parse(req.query)
+}
+
+export function parseParams<TSchema extends ZodTypeAny>(schema: TSchema, req: Request): output<TSchema> {
+  return schema.parse(req.params)
+}
diff --git a/api/src/http/validate/validate.test.ts b/api/src/http/validate/validate.test.ts
new file mode 100644
index 0000000..407fd56
--- /dev/null
+++ b/api/src/http/validate/validate.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import type { Request } from 'express'
+import { z } from 'zod'
+import { parseBody, parseParams, parseQuery } from './index'
+
+describe('http/validate parsers', () => {
+  it('parseBody returns typed and coerced request body values', () => {
+    const schema = z.object({ seats: z.coerce.number().int().min(1), brand: z.string().min(1) })
+    const req = { body: { seats: '5', brand: 'Toyota' } } as Request
+
+    expect(parseBody(schema, req)).toEqual({ seats: 5, brand: 'Toyota' })
+  })
+
+  it('parseQuery validates query values and throws ZodError for invalid input', () => {
+    const schema = z.object({ page: z.coerce.number().int().positive() })
+    const req = { query: { page: '0' } } as unknown as Request
+
+    expect(() => parseQuery(schema, req)).toThrow('Number must be greater than 0')
+  })
+
+  it('parseParams returns validated path parameters', () => {
+    const schema = z.object({ vehicleId: z.string().min(1) })
+    const req = { params: { vehicleId: 'veh_123' } } as unknown as Request
+
+    expect(parseParams(schema, req)).toEqual({ vehicleId: 'veh_123' })
+  })
+})
diff --git a/api/src/http/webhooks.ts b/api/src/http/webhooks.ts
new file mode 100644
index 0000000..4d5395e
--- /dev/null
+++ b/api/src/http/webhooks.ts
@@ -0,0 +1,18 @@
+import type { Request } from 'express'
+import { ValidationError } from './errors'
+
+export function getRawBodyString(req: Request) {
+  if (!Buffer.isBuffer(req.body)) {
+    throw new ValidationError('Webhook route must be mounted with express.raw before JSON parsing')
+  }
+  return req.body.toString('utf8')
+}
+
+export function parseRawJsonBody<T = unknown>(req: Request): T {
+  const rawBody = getRawBodyString(req)
+  try {
+    return JSON.parse(rawBody) as T
+  } catch {
+    throw new ValidationError('Malformed webhook JSON')
+  }
+}
diff --git a/api/src/index.ts b/api/src/index.ts
new file mode 100644
index 0000000..83477d9
--- /dev/null
+++ b/api/src/index.ts
@@ -0,0 +1,271 @@
+import http from 'http'
+import { Server as SocketIOServer } from 'socket.io'
+import type { Socket } from 'socket.io'
+import cron from 'node-cron'
+import { redis } from './lib/redis'
+import { prisma } from './lib/prisma'
+import { assertStorageConfiguration } from './lib/storage'
+import { createApp, corsOrigins } from './app'
+import { verifyAnyActorToken } from './security/tokens'
+import { getSessionCookieName } from './security/sessionCookies'
+import { sendNotification } from './services/notificationService'
+import {
+  runTrialExpirationJob,
+  runPaymentPendingTimeoutJob,
+  runPastDueTimeoutJob,
+  runSuspensionTimeoutJob,
+  runPeriodEndCancellationJob,
+} from './modules/subscriptions/subscription.service'
+
+const app    = createApp()
+const server = http.createServer(app)
+assertStorageConfiguration()
+
+// ─── Socket.io ────────────────────────────────────────────────
+const io = new SocketIOServer(server, {
+  cors: { origin: corsOrigins, credentials: true, methods: ['GET', 'POST'] },
+})
+
+
+function readCookieFromHeader(cookieHeader: string | undefined, name: string): string | null {
+  if (!cookieHeader) return null
+
+  for (const chunk of cookieHeader.split(';')) {
+    const [rawName, ...rawValue] = chunk.trim().split('=')
+    if (rawName === name) return decodeURIComponent(rawValue.join('='))
+  }
+
+  return null
+}
+
+function getSocketSessionToken(socket: Socket): string | undefined {
+  const explicitToken = socket.handshake.auth?.token
+  if (typeof explicitToken === 'string' && explicitToken.trim()) return explicitToken.trim()
+
+  const cookieHeader = socket.request.headers.cookie
+  return (
+    readCookieFromHeader(cookieHeader, getSessionCookieName('employee')) ??
+    readCookieFromHeader(cookieHeader, getSessionCookieName('admin')) ??
+    readCookieFromHeader(cookieHeader, getSessionCookieName('renter')) ??
+    undefined
+  )
+}
+
+// Authenticate socket connections via JWT before joining user rooms
+io.use((socket, next) => {
+  const token = getSocketSessionToken(socket)
+  if (!token) return next() // unauthenticated connections allowed; they just don't join rooms
+  try {
+    const payload = verifyAnyActorToken(token)
+    ;(socket as any).authenticatedUserId = payload.sub
+    next()
+  } catch {
+    next(new Error('invalid_token'))
+  }
+})
+
+io.on('connection', (socket) => {
+  const userId = (socket as any).authenticatedUserId as string | undefined
+  if (userId) {
+    socket.join(`user:${userId}`)
+  }
+})
+
+// Redis pub/sub → broadcast to connected clients
+const subscriber = redis.duplicate()
+subscriber.psubscribe('notifications:*', (err) => {
+  if (err) console.error('[Redis] Subscribe error:', err)
+})
+subscriber.on('pmessage', (_pattern, channel, message) => {
+  try {
+    const parsed = JSON.parse(message)
+    const userId = channel.replace('notifications:', '')
+    io.to(`user:${userId}`).emit('notification', parsed)
+  } catch (err) {
+    console.error('[Redis] Invalid notification message:', err)
+  }
+})
+
+// ─── Scheduled jobs ───────────────────────────────────────────
+
+// Daily: flag expiring/expired licenses
+cron.schedule('0 8 * * *', async () => {
+  const customers = await prisma.customer.findMany({ where: { licenseExpiry: { not: null } } })
+  for (const c of customers) {
+    if (!c.licenseExpiry) continue
+    const daysLeft = Math.ceil((c.licenseExpiry.getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+    const expired = c.licenseExpiry <= new Date()
+    const expiring = !expired && daysLeft < 90
+    if (expired !== c.licenseExpired || expiring !== c.licenseExpiringSoon) {
+      await prisma.customer.update({ where: { id: c.id }, data: { licenseExpired: expired, licenseExpiringSoon: expiring, licenseValidationStatus: expired ? 'EXPIRED' : expiring ? 'EXPIRING' : 'VALID' } })
+    }
+  }
+})
+
+// Hourly: expire trials that ended without payment
+cron.schedule('0 * * * *', async () => {
+  const n = await runTrialExpirationJob()
+  if (n > 0) console.log(`[subscription] trial_expiration: ${n} expired`)
+})
+
+// Hourly: payment_pending → past_due after 7 days
+cron.schedule('15 * * * *', async () => {
+  const n = await runPaymentPendingTimeoutJob()
+  if (n > 0) console.log(`[subscription] payment_pending_timeout: ${n} moved to past_due`)
+})
+
+// Hourly: past_due → suspended after 7 days
+cron.schedule('30 * * * *', async () => {
+  const n = await runPastDueTimeoutJob()
+  if (n > 0) console.log(`[subscription] past_due_timeout: ${n} suspended`)
+})
+
+// Daily: suspended → cancelled after 16 days; and period-end cancellations
+cron.schedule('0 1 * * *', async () => {
+  const nSuspend = await runSuspensionTimeoutJob()
+  const nPeriod  = await runPeriodEndCancellationJob()
+  if (nSuspend > 0) console.log(`[subscription] suspension_timeout: ${nSuspend} cancelled`)
+  if (nPeriod > 0)  console.log(`[subscription] period_end_cancel: ${nPeriod} cancelled`)
+})
+
+// Daily: send trial-ending reminders (3 days before trial end)
+cron.schedule('0 9 * * *', async () => {
+  const soon = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)
+  const subscriptions = await prisma.subscription.findMany({
+    where: { status: 'TRIALING', trialEndAt: { lte: soon, gte: new Date() } },
+    include: { company: { include: { employees: { where: { role: 'OWNER' } } } } },
+  })
+  for (const sub of subscriptions) {
+    const owner = sub.company.employees[0]
+    if (owner) {
+      await sendNotification({
+        type: 'SUBSCRIPTION_TRIAL_ENDING',
+        companyId: sub.companyId,
+        employeeId: owner.id,
+        channels: ['IN_APP'],
+        templateKey: 'subscription.trial_ending',
+        templateVariables: {
+          trialEndDate: sub.trialEndAt ?? new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
+        },
+      }).catch((err) => {
+        console.error('[Notifications] Failed to create trial ending reminder:', err?.message ?? String(err))
+      })
+    }
+  }
+})
+
+// Daily: notify companies about upcoming and overdue vehicle maintenance (date- and odometer-based).
+// Repeats every day until the owner logs a new service entry that pushes the due date/mileage into the future.
+cron.schedule('0 8 * * *', async () => {
+  const now = new Date()
+  const in30Days = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
+  const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+
+  // Fetch all candidate logs (date-due or has an odometer target), ordered newest-first per vehicle+type.
+  // We keep only the LATEST log per vehicle+type so that once the owner logs a new service the
+  // old overdue log is superseded and notifications stop automatically.
+  const allCandidates = await prisma.maintenanceLog.findMany({
+    where: {
+      OR: [
+        { nextDueAt: { lte: in30Days } },
+        { nextDueMileage: { not: null } },
+      ],
+    },
+    include: { vehicle: { include: { company: { include: { employees: { where: { role: { in: ['OWNER', 'MANAGER'] }, isActive: true }, take: 1 } } } } } },
+    orderBy: { performedAt: 'desc' },
+  })
+
+  // Keep only the most-recent log per vehicle+type combination
+  const latestByKey = new Map<string, typeof allCandidates[number]>()
+  for (const log of allCandidates) {
+    const key = `${log.vehicleId}:${log.type}`
+    if (!latestByKey.has(key)) latestByKey.set(key, log)
+  }
+
+  for (const log of latestByKey.values()) {
+    const vehicle = log.vehicle
+    const company = vehicle.company
+    const recipient = company.employees[0]
+    if (!recipient) continue
+
+    // Determine date-based urgency
+    let isOverdueByDate = false
+    let daysLeft: number | null = null
+    let dueSoonByDate = false
+    if (log.nextDueAt) {
+      daysLeft = Math.ceil((log.nextDueAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+      isOverdueByDate = log.nextDueAt <= now
+      dueSoonByDate = !isOverdueByDate && daysLeft <= 30
+    }
+
+    // Determine odometer-based urgency
+    let isOverdueByOdometer = false
+    let kmLeft: number | null = null
+    let dueSoonByOdometer = false
+    if (log.nextDueMileage != null && vehicle.mileage != null) {
+      kmLeft = log.nextDueMileage - vehicle.mileage
+      isOverdueByOdometer = kmLeft <= 0
+      dueSoonByOdometer = !isOverdueByOdometer && kmLeft <= 500
+    }
+
+    // Skip if the latest log is no longer due (owner has updated it)
+    const isOverdue = isOverdueByDate || isOverdueByOdometer
+    const isDueSoon = !isOverdue && (dueSoonByDate || dueSoonByOdometer)
+    if (!isOverdue && !isDueSoon) continue
+
+    // Dedup: don't send more than once per day for the same log
+    const alreadySent = await prisma.notification.findFirst({
+      where: {
+        type: 'VEHICLE_MAINTENANCE_DUE',
+        companyId: company.id,
+        createdAt: { gte: oneDayAgo },
+        data: { path: ['maintenanceLogId'], equals: log.id },
+      },
+    })
+    if (alreadySent) continue
+
+    // Build human-readable description
+    const dueParts: string[] = []
+    if (isOverdueByDate) dueParts.push(`overdue since ${log.nextDueAt!.toLocaleDateString()}`)
+    else if (dueSoonByDate && daysLeft != null) dueParts.push(`due in ${daysLeft} day${daysLeft === 1 ? '' : 's'}`)
+    if (isOverdueByOdometer) dueParts.push(`overdue by odometer (${Math.abs(kmLeft!).toLocaleString()} km ago)`)
+    else if (dueSoonByOdometer && kmLeft != null) dueParts.push(`${kmLeft.toLocaleString()} km remaining`)
+
+    const title = isOverdue
+      ? `Overdue: ${log.type} — ${vehicle.make} ${vehicle.model}`
+      : `${log.type} due soon — ${vehicle.make} ${vehicle.model}`
+    const body = `${log.type} for ${vehicle.make} ${vehicle.model} (${vehicle.licensePlate}): ${dueParts.join('; ')}. Please log the service to dismiss this reminder.`
+
+    await prisma.notification.create({
+      data: {
+        type: 'VEHICLE_MAINTENANCE_DUE',
+        title,
+        body,
+        data: {
+          vehicleId: vehicle.id,
+          maintenanceLogId: log.id,
+          maintenanceType: log.type,
+          isOverdue,
+          daysLeft,
+          kmLeft,
+          isOverdueByDate,
+          isOverdueByOdometer,
+        },
+        companyId: company.id,
+        employeeId: recipient.id,
+        channel: 'IN_APP',
+        status: 'DELIVERED',
+      },
+    })
+  }
+})
+
+// ─── Start ────────────────────────────────────────────────────
+const PORT = Number(process.env.API_PORT ?? 4000)
+const HOST = process.env.API_HOST ?? '0.0.0.0'
+
+server.listen(PORT, HOST, () => {
+  console.log(`[API] Server running on ${HOST}:${PORT}`)
+})
+
+export { app, io }
diff --git a/api/src/lib/emailTranslations.test.ts b/api/src/lib/emailTranslations.test.ts
new file mode 100644
index 0000000..9e512da
--- /dev/null
+++ b/api/src/lib/emailTranslations.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import {
+  formatDate,
+  marketplaceReservationEmail,
+  resetPasswordEmail,
+  signupEmail,
+} from './emailTranslations'
+
+describe('emailTranslations', () => {
+  const trialEnd = new Date('2026-07-15T12:00:00.000Z')
+
+  it('renders signup subjects in every supported locale', () => {
+    expect(signupEmail.subject('en')).toContain('workspace')
+    expect(signupEmail.subject('fr')).toContain('espace')
+    expect(signupEmail.subject('ar')).toContain('جاهزة')
+  })
+
+  it('renders localized signup text with billing and provider details', () => {
+    const text = signupEmail.text({
+      firstName: 'Aya',
+      companyName: 'Atlas Cars',
+      plan: 'PRO',
+      billingPeriod: 'ANNUAL',
+      currency: 'MAD',
+      paymentProvider: 'AmanPay',
+      trialEnd,
+    }, 'fr')
+
+    expect(text).toContain('Bonjour Aya')
+    expect(text).toContain('Atlas Cars')
+    expect(text).toContain('Forfait : PRO (annuel)')
+    expect(text).toContain('Fournisseur de paiement principal : AmanPay')
+  })
+
+  it('marks Arabic reset-password HTML as right-to-left and embeds the reset URL', () => {
+    const html = resetPasswordEmail.html('https://example.test/reset/token', 'Mina', 45, 'ar')
+
+    expect(html).toContain('dir="rtl"')
+    expect(html).toContain('https://example.test/reset/token')
+    expect(html).toContain('45')
+  })
+
+  it('includes optional contact phone in marketplace reservation HTML when present', () => {
+    const html = marketplaceReservationEmail.html({
+      firstName: 'Yassine',
+      vehicleYear: 2024,
+      vehicleMake: 'Dacia',
+      vehicleModel: 'Duster',
+      companyName: 'Atlas Cars',
+      startDate: new Date('2026-08-01T00:00:00.000Z'),
+      endDate: new Date('2026-08-05T00:00:00.000Z'),
+      totalDays: 4,
+      rateDisplay: '400.00',
+      totalDisplay: '1600.00',
+      email: 'yassine@example.test',
+      phone: '+212600000000',
+    }, 'en')
+
+    expect(html).toContain('2024 Dacia Duster')
+    expect(html).toContain('Atlas Cars')
+    expect(html).toContain('yassine@example.test or +212600000000')
+  })
+
+  it('formats dates with the locale-specific formatter', () => {
+    expect(formatDate(new Date('2026-02-03T00:00:00.000Z'), 'en')).toContain('2026')
+    expect(formatDate(new Date('2026-02-03T00:00:00.000Z'), 'fr')).toContain('2026')
+    expect(formatDate(new Date('2026-02-03T00:00:00.000Z'), 'ar')).toMatch(/2026|٢٠٢٦/)
+    expect(formatDate(new Date('2026-02-03T00:00:00.000Z'), 'ar')).toContain('فبراير')
+  })
+})
diff --git a/api/src/lib/emailTranslations.ts b/api/src/lib/emailTranslations.ts
new file mode 100644
index 0000000..81aee34
--- /dev/null
+++ b/api/src/lib/emailTranslations.ts
@@ -0,0 +1,290 @@
+export type Lang = 'en' | 'fr' | 'ar'
+
+function t<T>(map: Record<Lang, T>, lang: Lang): T {
+  return map[lang] ?? map['fr']
+}
+
+const dateLocale: Record<Lang, string> = { en: 'en-GB', fr: 'fr-FR', ar: 'ar-MA' }
+
+export function formatDate(date: Date, lang: Lang, opts?: Intl.DateTimeFormatOptions): string {
+  return date.toLocaleDateString(dateLocale[lang], opts ?? { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+// ─── Signup confirmation ──────────────────────────────────────────────────────
+
+export const signupEmail = {
+  subject: (lang: Lang) => t({
+    en: 'Your workspace is ready — RentalDriveGo',
+    fr: 'Votre espace de travail est prêt — RentalDriveGo',
+    ar: 'مساحة عملك جاهزة — RentalDriveGo',
+  }, lang),
+
+  text: (opts: {
+    firstName: string
+    companyName: string
+    plan: string
+    billingPeriod: string
+    currency: string
+    paymentProvider: string
+    trialEnd: Date
+  }, lang: Lang): string => {
+    const trialStr = formatDate(opts.trialEnd, lang)
+    return t({
+      en: [
+        `Hi ${opts.firstName},`,
+        '',
+        `Your RentalDriveGo workspace for ${opts.companyName} has been created successfully.`,
+        `Plan: ${opts.plan} (${opts.billingPeriod.toLowerCase()})`,
+        `Currency: ${opts.currency}`,
+        `Primary payment provider: ${opts.paymentProvider}`,
+        `Free trial ends on ${trialStr}.`,
+        '',
+        'Your workspace is ready. Sign in with the email and password you chose during signup.',
+        '',
+        'RentalDriveGo',
+      ].join('\n'),
+      fr: [
+        `Bonjour ${opts.firstName},`,
+        '',
+        `Votre espace de travail RentalDriveGo pour ${opts.companyName} a été créé avec succès.`,
+        `Forfait : ${opts.plan} (${opts.billingPeriod === 'MONTHLY' ? 'mensuel' : 'annuel'})`,
+        `Devise : ${opts.currency}`,
+        `Fournisseur de paiement principal : ${opts.paymentProvider}`,
+        `La période d'essai gratuit se termine le ${trialStr}.`,
+        '',
+        "Votre espace de travail est prêt. Connectez-vous avec l'e-mail et le mot de passe choisis lors de l'inscription.",
+        '',
+        'RentalDriveGo',
+      ].join('\n'),
+      ar: [
+        `مرحباً ${opts.firstName}،`,
+        '',
+        `تم إنشاء مساحة عمل RentalDriveGo الخاصة بـ ${opts.companyName} بنجاح.`,
+        `الخطة: ${opts.plan} (${opts.billingPeriod === 'MONTHLY' ? 'شهري' : 'سنوي'})`,
+        `العملة: ${opts.currency}`,
+        `مزود الدفع الرئيسي: ${opts.paymentProvider}`,
+        `تنتهي الفترة التجريبية المجانية في ${trialStr}.`,
+        '',
+        'مساحة عملك جاهزة. سجّل الدخول باستخدام البريد الإلكتروني وكلمة المرور التي اخترتهما عند التسجيل.',
+        '',
+        'RentalDriveGo',
+      ].join('\n'),
+    }, lang)
+  },
+}
+
+// ─── Password reset ───────────────────────────────────────────────────────────
+
+export const resetPasswordEmail = {
+  subject: (lang: Lang) => t({
+    en: 'Reset your RentalDriveGo password',
+    fr: 'Réinitialisez votre mot de passe RentalDriveGo',
+    ar: 'إعادة تعيين كلمة مرور RentalDriveGo',
+  }, lang),
+
+  html: (resetUrl: string, firstName: string, expireMinutes: number, lang: Lang): string => {
+    const isRtl = lang === 'ar'
+    const dir = isRtl ? 'rtl' : 'ltr'
+    return t({
+      en: `<div dir="ltr" style="font-family:sans-serif;max-width:560px;margin:auto;padding:32px;color:#1c1917">
+        <p>Hi ${firstName},</p>
+        <p>You requested a password reset for your RentalDriveGo workspace account.</p>
+        <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">Reset your password</a></p>
+        <p>This link expires in ${expireMinutes} minutes. If you did not request this, you can safely ignore this email.</p>
+        <p>RentalDriveGo</p>
+      </div>`,
+      fr: `<div dir="ltr" style="font-family:sans-serif;max-width:560px;margin:auto;padding:32px;color:#1c1917">
+        <p>Bonjour ${firstName},</p>
+        <p>Vous avez demandé la réinitialisation du mot de passe de votre compte RentalDriveGo.</p>
+        <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">Réinitialiser mon mot de passe</a></p>
+        <p>Ce lien expire dans ${expireMinutes} minutes. Si vous n'avez pas fait cette demande, ignorez simplement cet e-mail.</p>
+        <p>RentalDriveGo</p>
+      </div>`,
+      ar: `<div dir="rtl" style="font-family:sans-serif;max-width:560px;margin:auto;padding:32px;color:#1c1917">
+        <p>مرحباً ${firstName}،</p>
+        <p>طلبت إعادة تعيين كلمة مرور حساب RentalDriveGo الخاص بك.</p>
+        <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">إعادة تعيين كلمة المرور</a></p>
+        <p>تنتهي صلاحية هذا الرابط خلال ${expireMinutes} دقيقة. إذا لم تطلب ذلك، يمكنك تجاهل هذا البريد الإلكتروني بأمان.</p>
+        <p>RentalDriveGo</p>
+      </div>`,
+    }, lang)
+  },
+
+  text: (resetUrl: string, firstName: string, expireMinutes: number, lang: Lang): string => t({
+    en: `Hi ${firstName},\n\nReset your password here: ${resetUrl}\n\nThis link expires in ${expireMinutes} minutes.\n\nRentalDriveGo`,
+    fr: `Bonjour ${firstName},\n\nRéinitialisez votre mot de passe ici : ${resetUrl}\n\nCe lien expire dans ${expireMinutes} minutes.\n\nRentalDriveGo`,
+    ar: `مرحباً ${firstName}،\n\nأعد تعيين كلمة مرورك هنا: ${resetUrl}\n\nينتهي هذا الرابط خلال ${expireMinutes} دقيقة.\n\nRentalDriveGo`,
+  }, lang),
+}
+
+// ─── Marketplace reservation request ─────────────────────────────────────────
+
+export const marketplaceReservationEmail = {
+  subject: (vehicleName: string, lang: Lang) => t({
+    en: `Reservation Request Received — ${vehicleName}`,
+    fr: `Demande de réservation reçue — ${vehicleName}`,
+    ar: `تم استلام طلب الحجز — ${vehicleName}`,
+  }, lang),
+
+  html: (opts: {
+    firstName: string
+    vehicleYear: number
+    vehicleMake: string
+    vehicleModel: string
+    companyName: string
+    startDate: Date
+    endDate: Date
+    totalDays: number
+    rateDisplay: string
+    totalDisplay: string
+    email: string
+    phone?: string
+  }, lang: Lang): string => {
+    const startStr = formatDate(opts.startDate, lang)
+    const endStr = formatDate(opts.endDate, lang)
+    const isRtl = lang === 'ar'
+    const l = t({
+      en: {
+        greeting: `Hi ${opts.firstName},`,
+        intro: 'Your reservation request has been received and is pending company confirmation.',
+        company: 'Company', pickup: 'Pick-up date', returnD: 'Return date',
+        duration: 'Duration', daily: 'Daily rate', total: 'Estimated total', days: 'day(s)',
+        footer: `The company will review your request and get in touch shortly. You may be contacted at ${opts.email}${opts.phone ? ` or ${opts.phone}` : ''}.`,
+      },
+      fr: {
+        greeting: `Bonjour ${opts.firstName},`,
+        intro: 'Votre demande de réservation a été reçue et est en attente de confirmation.',
+        company: 'Société', pickup: 'Date de prise en charge', returnD: 'Date de retour',
+        duration: 'Durée', daily: 'Tarif journalier', total: 'Total estimé', days: 'jour(s)',
+        footer: `La société examinera votre demande et vous contactera prochainement. Vous pouvez être contacté à ${opts.email}${opts.phone ? ` ou ${opts.phone}` : ''}.`,
+      },
+      ar: {
+        greeting: `مرحباً ${opts.firstName}،`,
+        intro: 'تم استلام طلب الحجز وهو في انتظار تأكيد الشركة.',
+        company: 'الشركة', pickup: 'تاريخ الاستلام', returnD: 'تاريخ الإرجاع',
+        duration: 'المدة', daily: 'السعر اليومي', total: 'الإجمالي التقديري', days: 'يوم',
+        footer: `ستراجع الشركة طلبك وستتواصل معك قريباً. يمكن التواصل معك على ${opts.email}${opts.phone ? ` أو ${opts.phone}` : ''}.`,
+      },
+    }, lang)
+
+    return `
+      <div style="font-family:sans-serif;max-width:560px;margin:auto;padding:32px;color:#1c1917;direction:${isRtl ? 'rtl' : 'ltr'}">
+        <h2 style="margin-bottom:4px">${l.greeting}</h2>
+        <p style="color:#57534e">${l.intro}</p>
+        <hr style="border:none;border-top:1px solid #e7e5e4;margin:24px 0"/>
+        <h3 style="margin-bottom:12px">${opts.vehicleYear} ${opts.vehicleMake} ${opts.vehicleModel}</h3>
+        <p><strong>${l.company}:</strong> ${opts.companyName}</p>
+        <p><strong>${l.pickup}:</strong> ${startStr}</p>
+        <p><strong>${l.returnD}:</strong> ${endStr}</p>
+        <p><strong>${l.duration}:</strong> ${opts.totalDays} ${l.days}</p>
+        <p><strong>${l.daily}:</strong> ${opts.rateDisplay} MAD</p>
+        <p><strong>${l.total}:</strong> ${opts.totalDisplay} MAD</p>
+        <hr style="border:none;border-top:1px solid #e7e5e4;margin:24px 0"/>
+        <p style="color:#57534e;font-size:13px">${l.footer}</p>
+      </div>
+    `
+  },
+
+  text: (opts: {
+    firstName: string
+    vehicleYear: number
+    vehicleMake: string
+    vehicleModel: string
+    companyName: string
+    startDate: Date
+    endDate: Date
+    totalDays: number
+    rateDisplay: string
+    totalDisplay: string
+  }, lang: Lang): string => {
+    const startStr = formatDate(opts.startDate, lang)
+    const endStr = formatDate(opts.endDate, lang)
+    return t({
+      en: `Hi ${opts.firstName},\n\nYour reservation request for the ${opts.vehicleYear} ${opts.vehicleMake} ${opts.vehicleModel} from ${opts.companyName} has been received.\n\nDates: ${startStr} → ${endStr}\nDuration: ${opts.totalDays} day(s)\nDaily rate: ${opts.rateDisplay} MAD\nEstimated total: ${opts.totalDisplay} MAD\n\nThe company will confirm your request shortly.\n\nThank you!`,
+      fr: `Bonjour ${opts.firstName},\n\nVotre demande de réservation pour la ${opts.vehicleYear} ${opts.vehicleMake} ${opts.vehicleModel} auprès de ${opts.companyName} a été reçue.\n\nDates : ${startStr} → ${endStr}\nDurée : ${opts.totalDays} jour(s)\nTarif journalier : ${opts.rateDisplay} MAD\nTotal estimé : ${opts.totalDisplay} MAD\n\nLa société confirmera votre demande prochainement.\n\nMerci !`,
+      ar: `مرحباً ${opts.firstName}،\n\nتم استلام طلب حجزك لسيارة ${opts.vehicleYear} ${opts.vehicleMake} ${opts.vehicleModel} من ${opts.companyName}.\n\nالتواريخ: ${startStr} → ${endStr}\nالمدة: ${opts.totalDays} يوم\nالسعر اليومي: ${opts.rateDisplay} MAD\nالإجمالي التقديري: ${opts.totalDisplay} MAD\n\nستؤكد الشركة طلبك قريباً.\n\nشكراً!`,
+    }, lang)
+  },
+}
+
+// ─── Booking confirmed ────────────────────────────────────────────────────────
+
+export const bookingConfirmedNotif = {
+  title: (lang: Lang) => t({
+    en: 'Booking Confirmed',
+    fr: 'Réservation confirmée',
+    ar: 'تم تأكيد الحجز',
+  }, lang),
+  body: (lang: Lang) => t({
+    en: 'Your booking has been confirmed.',
+    fr: 'Votre réservation a été confirmée.',
+    ar: 'تم تأكيد حجزك.',
+  }, lang),
+}
+
+// ─── Post-rental review request ───────────────────────────────────────────────
+
+export const reviewRequestEmail = {
+  subject: (vehicleLabel: string, lang: Lang) => t({
+    en: `How was your rental? — ${vehicleLabel}`,
+    fr: `Comment s'est passée votre location ? — ${vehicleLabel}`,
+    ar: `كيف كانت تجربة الإيجار؟ — ${vehicleLabel}`,
+  }, lang),
+
+  html: (opts: {
+    firstName: string
+    companyName: string
+    vehicleLabel: string
+    reviewUrl: string
+  }, lang: Lang): string => {
+    const isRtl = lang === 'ar'
+    const l = t({
+      en: {
+        greeting: `Hi ${opts.firstName},`,
+        body1: `Thank you for renting with <strong>${opts.companyName}</strong>. We hope you enjoyed your <strong>${opts.vehicleLabel}</strong>.`,
+        body2: 'Your feedback helps the company improve and helps other customers make informed choices. It only takes 30 seconds.',
+        cta: 'Leave a review',
+        disclaimer: 'This link is unique to your reservation and can only be used once. If you did not rent a vehicle recently, you can ignore this email.',
+      },
+      fr: {
+        greeting: `Bonjour ${opts.firstName},`,
+        body1: `Merci d'avoir loué chez <strong>${opts.companyName}</strong>. Nous espérons que vous avez apprécié votre <strong>${opts.vehicleLabel}</strong>.`,
+        body2: "Votre avis aide la société à s'améliorer et aide les autres clients à faire des choix éclairés. Cela ne prend que 30 secondes.",
+        cta: 'Laisser un avis',
+        disclaimer: "Ce lien est unique à votre réservation et ne peut être utilisé qu'une seule fois. Si vous n'avez pas loué de véhicule récemment, vous pouvez ignorer cet e-mail.",
+      },
+      ar: {
+        greeting: `مرحباً ${opts.firstName}،`,
+        body1: `شكراً لاختيار <strong>${opts.companyName}</strong>. نأمل أنك استمتعت بـ <strong>${opts.vehicleLabel}</strong>.`,
+        body2: 'تساعد ملاحظاتك الشركة على التحسين وتساعد العملاء الآخرين على اتخاذ قرارات مستنيرة. لا يستغرق الأمر سوى 30 ثانية.',
+        cta: 'اترك تقييماً',
+        disclaimer: 'هذا الرابط فريد لحجزك ولا يمكن استخدامه إلا مرة واحدة. إذا لم تستأجر مركبة مؤخراً، يمكنك تجاهل هذا البريد الإلكتروني.',
+      },
+    }, lang)
+
+    return `
+      <div style="font-family:sans-serif;max-width:560px;margin:auto;padding:32px;color:#1c1917;direction:${isRtl ? 'rtl' : 'ltr'}">
+        <h2 style="margin-bottom:4px">${l.greeting}</h2>
+        <p style="color:#57534e">${l.body1}</p>
+        <p style="color:#57534e">${l.body2}</p>
+        <div style="margin:32px 0;text-align:center">
+          <a href="${opts.reviewUrl}" style="background:#1c1917;color:#ffffff;padding:14px 32px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;display:inline-block">
+            ${l.cta}
+          </a>
+        </div>
+        <p style="color:#a8a29e;font-size:12px">${l.disclaimer}</p>
+      </div>
+    `
+  },
+
+  text: (opts: {
+    firstName: string
+    companyName: string
+    vehicleLabel: string
+    reviewUrl: string
+  }, lang: Lang): string => t({
+    en: `Hi ${opts.firstName},\n\nThank you for renting with ${opts.companyName}. We hope you enjoyed your ${opts.vehicleLabel}.\n\nLeave a review here (one-time link):\n${opts.reviewUrl}\n\nThank you!`,
+    fr: `Bonjour ${opts.firstName},\n\nMerci d'avoir loué chez ${opts.companyName}. Nous espérons que vous avez apprécié votre ${opts.vehicleLabel}.\n\nLaissez un avis ici (lien unique) :\n${opts.reviewUrl}\n\nMerci !`,
+    ar: `مرحباً ${opts.firstName}،\n\nشكراً لاختيار ${opts.companyName}. نأمل أنك استمتعت بـ ${opts.vehicleLabel}.\n\nاترك تقييماً هنا (رابط فريد):\n${opts.reviewUrl}\n\nشكراً!`,
+  }, lang),
+}
diff --git a/api/src/lib/inputValidation.test.ts b/api/src/lib/inputValidation.test.ts
new file mode 100644
index 0000000..6af6a73
--- /dev/null
+++ b/api/src/lib/inputValidation.test.ts
@@ -0,0 +1,172 @@
+import { describe, expect, it } from 'vitest'
+import { sanitizeAndFormat, toTitleCase, toTitleCaseAll, toLowerCase, toUpperCase, preserveOriginal, getMaxLength } from './inputValidation'
+
+describe('toTitleCase', () => {
+  it('uppercases first letter and lowercases rest of each word', () => {
+    expect(toTitleCase('john doe')).toBe('John Doe')
+    expect(toTitleCase('MARIA')).toBe('Maria')
+    expect(toTitleCase('new york')).toBe('New York')
+  })
+
+  it('preserves numbers and special chars that survive sanitization', () => {
+    expect(toTitleCase('123 main st.')).toBe('123 Main St.')
+  })
+
+  it('handles single word', () => {
+    expect(toTitleCase('hello')).toBe('Hello')
+  })
+})
+
+describe('toTitleCaseAll', () => {
+  it('uppercases first letter of every word', () => {
+    expect(toTitleCaseAll('acme corporation ltd.')).toBe('Acme Corporation Ltd.')
+    expect(toTitleCaseAll('123 main street, apt 4b')).toBe('123 Main Street, Apt 4b')
+  })
+})
+
+describe('toLowerCase', () => {
+  it('lowercases all characters', () => {
+    expect(toLowerCase('John.Doe@Example.COM')).toBe('john.doe@example.com')
+    expect(toLowerCase('ALLCAPS')).toBe('allcaps')
+  })
+})
+
+describe('toUpperCase', () => {
+  it('uppercases letters, leaves numbers unchanged', () => {
+    expect(toUpperCase('abc-123')).toBe('ABC-123')
+    expect(toUpperCase('ab123cd')).toBe('AB123CD')
+  })
+})
+
+describe('preserveOriginal', () => {
+  it('returns the string unchanged', () => {
+    expect(preserveOriginal('SW1A 1AA')).toBe('SW1A 1AA')
+    expect(preserveOriginal('12345')).toBe('12345')
+  })
+})
+
+describe('sanitizeAndFormat', () => {
+  // ─── Title Case fields
+
+  it('formats name fields (title case, max 50)', () => {
+    expect(sanitizeAndFormat('john doe', 'name')).toBe('John Doe')
+    expect(sanitizeAndFormat('MARIA', 'name')).toBe('Maria')
+  })
+
+  it('formats streetAddress (title case, max 100)', () => {
+    expect(sanitizeAndFormat('123 main st.', 'streetAddress')).toBe('123 Main St')
+    expect(sanitizeAndFormat('elm street 42', 'streetAddress')).toBe('Elm Street 42')
+  })
+
+  it('formats city (title case, max 50)', () => {
+    expect(sanitizeAndFormat('new york', 'city')).toBe('New York')
+  })
+
+  it('formats pickupLocation and returnLocation', () => {
+    expect(sanitizeAndFormat('airport terminal 1', 'pickupLocation')).toBe('Airport Terminal 1')
+    expect(sanitizeAndFormat('downtown garage', 'returnLocation')).toBe('Downtown Garage')
+  })
+
+  it('formats country (title case)', () => {
+    expect(sanitizeAndFormat('united kingdom', 'country')).toBe('United Kingdom')
+  })
+
+  // ─── Title Case All fields
+
+  it('formats fullAddress (title case all, max 200)', () => {
+    expect(sanitizeAndFormat('123 main street, apt 4b', 'fullAddress')).toBe('123 Main Street, Apt 4b')
+  })
+
+  it('formats commercialName (title case all, max 100)', () => {
+    expect(sanitizeAndFormat('acme corporation', 'commercialName')).toBe('Acme Corporation')
+  })
+
+  it('formats legalCompanyName (title case all, max 100)', () => {
+    expect(sanitizeAndFormat('global rentals llc', 'legalCompanyName')).toBe('Global Rentals Llc')
+  })
+
+  // ─── Email
+
+  it('formats email (lowercase)', () => {
+    expect(sanitizeAndFormat('John.Doe@Example.COM', 'email')).toBe('john.doe@example.com')
+  })
+
+  // ─── Uppercase fields
+
+  it('formats licensePlate (uppercase, preserves hyphens)', () => {
+    expect(sanitizeAndFormat('abc-123', 'licensePlate')).toBe('ABC-123')
+  })
+
+  it('formats VIN (uppercase)', () => {
+    expect(sanitizeAndFormat('1hgbh41jxmn109186', 'vin')).toBe('1HGBH41JXMN109186')
+  })
+
+  it('formats passportNumber (uppercase)', () => {
+    expect(sanitizeAndFormat('ab123456', 'passportNumber')).toBe('AB123456')
+  })
+
+  it('formats driverLicenseNumber (uppercase, preserves hyphens)', () => {
+    expect(sanitizeAndFormat('d123-456-789', 'driverLicenseNumber')).toBe('D123-456-789')
+  })
+
+  it('formats licenseCategory (uppercase)', () => {
+    expect(sanitizeAndFormat('b', 'licenseCategory')).toBe('B')
+  })
+
+  // ─── Car fields
+
+  it('formats carMark (title case)', () => {
+    expect(sanitizeAndFormat('TOYOTA', 'carMark')).toBe('Toyota')
+    expect(sanitizeAndFormat('mercedes-benz', 'carMark')).toBe('Mercedes-Benz')
+  })
+
+  it('formats carModel (title case)', () => {
+    expect(sanitizeAndFormat('corolla', 'carModel')).toBe('Corolla')
+  })
+
+  it('formats carColor (title case)', () => {
+    expect(sanitizeAndFormat('midnight-blue', 'carColor')).toBe('Midnight-Blue')
+  })
+
+  // ─── ZIP Code (preserved)
+
+  it('preserves ZIP code format', () => {
+    expect(sanitizeAndFormat('12345', 'zipCode')).toBe('12345')
+    expect(sanitizeAndFormat('SW1A 1AA', 'zipCode')).toBe('SW1A 1AA')
+  })
+
+  // ─── Sanitization
+
+  it('removes disallowed characters', () => {
+    expect(sanitizeAndFormat('John!@#', 'name')).toBe('John')
+  })
+
+  it('strips disallowed characters including angle brackets', () => {
+    const result = sanitizeAndFormat('test<script>alert(1)</script>', 'name')
+    expect(result).toBe('Testscriptalertscript')
+  })
+
+  // ─── Truncation
+
+  it('truncates to max length', () => {
+    const longName = 'A'.repeat(60)
+    expect(sanitizeAndFormat(longName, 'name')).toHaveLength(50)
+  })
+
+  it('does not truncate strings within limit', () => {
+    expect(sanitizeAndFormat('John', 'name')).toHaveLength(4)
+  })
+})
+
+describe('getMaxLength', () => {
+  it('returns correct max lengths', () => {
+    expect(getMaxLength('name')).toBe(50)
+    expect(getMaxLength('streetAddress')).toBe(100)
+    expect(getMaxLength('fullAddress')).toBe(200)
+    expect(getMaxLength('email')).toBe(100)
+    expect(getMaxLength('licensePlate')).toBe(30)
+    expect(getMaxLength('zipCode')).toBe(10)
+    expect(getMaxLength('carMark')).toBe(30)
+  })
+})
+
diff --git a/api/src/lib/inputValidation.ts b/api/src/lib/inputValidation.ts
new file mode 100644
index 0000000..c0e0288
--- /dev/null
+++ b/api/src/lib/inputValidation.ts
@@ -0,0 +1,136 @@
+/**
+ * User Input Validation and Formatting Library
+ *
+ * Implements the rules defined in docs/input_validation_plan.md.
+ * Provides formatting functions and a Zod-integrated pipeline that:
+ *   1. Removes disallowed characters
+ *   2. Trims leading/trailing whitespace
+ *   3. Validates format (email)
+ *   4. Applies case transformation
+ *   5. Truncates to max length
+ */
+
+// ─── Character class definitions ───────────────────────────────
+
+const LETTERS_NUMBERS = 'a-zA-Z0-9'
+const LETTERS_NUMBERS_HYPHEN = `${LETTERS_NUMBERS}\\-`
+const LETTERS_SPACES_HYPHEN = 'a-zA-Z\\s\\-'
+const BASE_TEXT = `${LETTERS_NUMBERS}\\s\\-\\/`
+const EXTENDED_TEXT = `${BASE_TEXT},`
+
+// ─── Field type definitions ────────────────────────────────────
+
+export type FieldType =
+  | 'name' | 'nationality' | 'streetAddress' | 'city'
+  | 'pickupLocation' | 'returnLocation' | 'country'
+  | 'fullAddress' | 'commercialName' | 'legalCompanyName'
+  | 'email'
+  | 'licensePlate' | 'vin' | 'cin' | 'passportNumber'
+  | 'internationalPermitNumber' | 'driverLicenseNumber'
+  | 'licenseCategory' | 'iceNumber' | 'commercialRegistry'
+  | 'carMark' | 'carModel' | 'carColor'
+  | 'zipCode'
+
+interface FieldConfig {
+  maxLength: number
+  allowedPattern: RegExp
+  transform: (value: string) => string
+}
+
+// ─── Formatting functions ──────────────────────────────────────
+
+/** Uppercase first letter of each word, lowercase the rest */
+export function toTitleCase(str: string): string {
+  return str.replace(/\b\w+/g, (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+}
+
+/** Uppercase first letter of every word */
+export function toTitleCaseAll(str: string): string {
+  return str.replace(/\b\w+/g, (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+}
+
+export function toLowerCase(str: string): string {
+  return str.toLowerCase()
+}
+
+/** Uppercase letters only, leave numbers unchanged */
+export function toUpperCase(str: string): string {
+  return str.replace(/[a-zA-Z]/g, (char) => char.toUpperCase())
+}
+
+export function preserveOriginal(str: string): string {
+  return str
+}
+
+// ─── Field configuration ───────────────────────────────────────
+
+const FIELD_CONFIGS: Record<FieldType, FieldConfig> = {
+  // Group 1: Title Case
+  name:           { maxLength: 50,  allowedPattern: new RegExp('^[' + LETTERS_SPACES_HYPHEN + ']*$'),    transform: toTitleCase },
+  nationality:    { maxLength: 50,  allowedPattern: new RegExp('^[' + LETTERS_SPACES_HYPHEN + ']*$'),    transform: toTitleCase },
+  streetAddress:  { maxLength: 100, allowedPattern: new RegExp('^[' + BASE_TEXT + ']*$'),                transform: toTitleCase },
+  city:           { maxLength: 50,  allowedPattern: new RegExp('^[' + LETTERS_SPACES_HYPHEN + ']*$'),    transform: toTitleCase },
+  pickupLocation: { maxLength: 50,  allowedPattern: new RegExp('^[' + BASE_TEXT + ']*$'),                transform: toTitleCase },
+  returnLocation: { maxLength: 50,  allowedPattern: new RegExp('^[' + BASE_TEXT + ']*$'),                transform: toTitleCase },
+  country:        { maxLength: 50,  allowedPattern: new RegExp('^[' + LETTERS_SPACES_HYPHEN + ']*$'),    transform: toTitleCase },
+
+  // Group 2: Title Case All
+  fullAddress:      { maxLength: 200, allowedPattern: new RegExp('^[' + EXTENDED_TEXT + ']*$'),           transform: toTitleCaseAll },
+  commercialName:   { maxLength: 100, allowedPattern: new RegExp('^[' + EXTENDED_TEXT + ']*$'),           transform: toTitleCaseAll },
+  legalCompanyName: { maxLength: 100, allowedPattern: new RegExp('^[' + EXTENDED_TEXT + ']*$'),           transform: toTitleCaseAll },
+
+  // Group 3: Lowercase — email
+  email: { maxLength: 100, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS + '@._%\\+\\-]*$'), transform: toLowerCase },
+
+  // Group 4: Uppercase (hyphens allowed per plan examples: "abc-123" → "ABC-123")
+  licensePlate:             { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  vin:                      { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  cin:                      { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  passportNumber:           { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  internationalPermitNumber:{ maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  driverLicenseNumber:      { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  licenseCategory:          { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  iceNumber:                { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+  commercialRegistry:       { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS_HYPHEN + ']*$'), transform: toUpperCase },
+
+  // Group 5: Car fields
+  carMark:  { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS + '\\s\\-]*$'), transform: toTitleCase },
+  carModel: { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS + '\\s\\-]*$'), transform: toTitleCase },
+  carColor: { maxLength: 30, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS + '\\s\\-]*$'), transform: toTitleCase },
+
+  // Group 6: Preserved (spaces for UK postcodes like "SW1A 1AA")
+  zipCode: { maxLength: 10, allowedPattern: new RegExp('^[' + LETTERS_NUMBERS + '\\s\\-]*$'), transform: preserveOriginal },
+}
+
+// ─── Public API ────────────────────────────────────────────────
+
+/** Full processing pipeline: sanitize → trim → format → truncate */
+export function sanitizeAndFormat(value: string, fieldType: FieldType): string {
+  const config = FIELD_CONFIGS[fieldType]
+
+  // Step 1: Remove disallowed characters
+  let sanitized = ''
+  for (const char of value) {
+    if (config.allowedPattern.test(char)) {
+      sanitized += char
+    }
+  }
+
+  // Step 2: Trim
+  sanitized = sanitized.trim()
+
+  // Step 3: Apply case transformation
+  const formatted = config.transform(sanitized)
+
+  // Step 4: Truncate
+  if (formatted.length > config.maxLength) {
+    return formatted.slice(0, config.maxLength)
+  }
+
+  return formatted
+}
+
+/** Get the max length for a given field type */
+export function getMaxLength(fieldType: FieldType): number {
+  return FIELD_CONFIGS[fieldType].maxLength
+}
diff --git a/api/src/lib/isDatabaseUnavailable.test.ts b/api/src/lib/isDatabaseUnavailable.test.ts
new file mode 100644
index 0000000..1ed1564
--- /dev/null
+++ b/api/src/lib/isDatabaseUnavailable.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { isDatabaseUnavailableError } from './isDatabaseUnavailable'
+
+describe('isDatabaseUnavailableError', () => {
+  it('detects Prisma P1001 connection failures', () => {
+    expect(isDatabaseUnavailableError({ code: 'P1001' })).toBe(true)
+  })
+
+  it('detects database reachability failures by message', () => {
+    expect(isDatabaseUnavailableError({ message: "Can't reach database server at postgres:5432" })).toBe(true)
+  })
+
+  it('rejects unrelated, null, and primitive errors', () => {
+    expect(isDatabaseUnavailableError({ code: 'P2002' })).toBe(false)
+    expect(isDatabaseUnavailableError(new Error('network hiccup'))).toBe(false)
+    expect(isDatabaseUnavailableError(null)).toBe(false)
+    expect(isDatabaseUnavailableError('P1001')).toBe(false)
+  })
+})
diff --git a/api/src/lib/isDatabaseUnavailable.ts b/api/src/lib/isDatabaseUnavailable.ts
new file mode 100644
index 0000000..1c70913
--- /dev/null
+++ b/api/src/lib/isDatabaseUnavailable.ts
@@ -0,0 +1,5 @@
+export function isDatabaseUnavailableError(error: unknown): boolean {
+  if (!error || typeof error !== 'object') return false
+  const candidate = error as { code?: string; message?: string }
+  return candidate.code === 'P1001' || candidate.message?.includes("Can't reach database server") === true
+}
diff --git a/api/src/lib/prisma.ts b/api/src/lib/prisma.ts
new file mode 100644
index 0000000..9afc896
--- /dev/null
+++ b/api/src/lib/prisma.ts
@@ -0,0 +1,13 @@
+import { PrismaClient } from '@rentaldrivego/database/client'
+
+const globalForPrisma = global as unknown as { prisma: PrismaClient }
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+  })
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma
+}
diff --git a/api/src/lib/redis.ts b/api/src/lib/redis.ts
new file mode 100644
index 0000000..ac69fc6
--- /dev/null
+++ b/api/src/lib/redis.ts
@@ -0,0 +1,10 @@
+import Redis from 'ioredis'
+
+export const redis = new Redis(process.env.REDIS_URL ?? 'redis://localhost:6379', {
+  maxRetriesPerRequest: 3,
+  retryStrategy: (times) => Math.min(times * 50, 2000),
+})
+
+redis.on('error', (err) => {
+  console.error('[Redis] Connection error:', err.message)
+})
diff --git a/api/src/lib/storage.test.ts b/api/src/lib/storage.test.ts
new file mode 100644
index 0000000..0a0dc48
--- /dev/null
+++ b/api/src/lib/storage.test.ts
@@ -0,0 +1,62 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  assertStorageConfiguration,
+  deleteImage,
+  getPrivateStorageRoot,
+  getProtectedCustomerLicenseImageUrl,
+  getPublicStorageRoot,
+  getStorageRoot,
+  resolveStoredFilePath,
+  uploadImage,
+} from './storage'
+
+const originalEnv = { ...process.env }
+
+describe('storage', () => {
+  afterEach(() => {
+    process.env = { ...originalEnv }
+  })
+
+  it('uses FILE_STORAGE_ROOT when configured and builds protected customer license URLs from dashboard URL', () => {
+    process.env.FILE_STORAGE_ROOT = '/tmp/rdg-storage'
+    process.env.DASHBOARD_URL = 'https://dashboard.rentaldrivego.test/dashboard/'
+
+    expect(getStorageRoot()).toBe('/tmp/rdg-storage')
+    expect(getPublicStorageRoot()).toBe('/tmp/rdg-storage/public')
+    expect(getPrivateStorageRoot()).toBe('/tmp/rdg-storage/private')
+    expect(getProtectedCustomerLicenseImageUrl('customer_1')).toBe('https://dashboard.rentaldrivego.test/dashboard/api/v1/customers/customer_1/license-image')
+  })
+
+  it('rejects implicit in-app storage in production', () => {
+    delete process.env.FILE_STORAGE_ROOT
+    process.env.NODE_ENV = 'production'
+
+    expect(() => assertStorageConfiguration()).toThrow('FILE_STORAGE_ROOT must be set in production')
+  })
+
+  it('uploads, resolves, and deletes files under the configured storage root', async () => {
+    const root = fs.mkdtempSync(path.join(os.tmpdir(), 'rdg-storage-'))
+    process.env.FILE_STORAGE_ROOT = root
+    process.env.API_URL = 'https://api.rentaldrivego.test/'
+
+    const url = await uploadImage(Buffer.from('image-bytes'), 'customers/licenses', 'customer_1')
+
+    expect(url).toBe('https://api.rentaldrivego.test/storage/customers/licenses/customer_1.jpg')
+    const filePath = resolveStoredFilePath(url)
+    expect(filePath).toBe(path.join(root, 'private/customers/licenses/customer_1.jpg'))
+    expect(fs.readFileSync(filePath!, 'utf8')).toBe('image-bytes')
+
+    await deleteImage(url)
+    expect(fs.existsSync(filePath!)).toBe(false)
+  })
+
+  it('ignores non-storage URLs when resolving or deleting files', async () => {
+    process.env.FILE_STORAGE_ROOT = fs.mkdtempSync(path.join(os.tmpdir(), 'rdg-storage-'))
+
+    expect(resolveStoredFilePath('https://cdn.test/not-storage/file.jpg')).toBeNull()
+    await expect(deleteImage('https://cdn.test/not-storage/file.jpg')).resolves.toBeUndefined()
+  })
+})
diff --git a/api/src/lib/storage.ts b/api/src/lib/storage.ts
new file mode 100644
index 0000000..af099c3
--- /dev/null
+++ b/api/src/lib/storage.ts
@@ -0,0 +1,142 @@
+import fs from 'fs'
+import path from 'path'
+import crypto from 'crypto'
+
+const APP_PACKAGE_ROOT = path.resolve(__dirname, '..', '..', '..')
+const APP_SOURCE_ROOT = path.join(APP_PACKAGE_ROOT, 'src')
+const APP_DIST_ROOT = path.join(APP_PACKAGE_ROOT, 'dist')
+const DEFAULT_STORAGE_ROOT = path.join(APP_PACKAGE_ROOT, 'storage')
+const LEGACY_STORAGE_ROOTS = [
+  path.join(APP_SOURCE_ROOT, 'lib', 'storage'),
+]
+
+export type StorageVisibility = 'public' | 'private'
+
+export function getStorageRoot(): string {
+  return process.env.FILE_STORAGE_ROOT
+    ? path.resolve(process.env.FILE_STORAGE_ROOT)
+    : DEFAULT_STORAGE_ROOT
+}
+
+export function getPublicStorageRoot(): string {
+  return path.join(getStorageRoot(), 'public')
+}
+
+export function getPrivateStorageRoot(): string {
+  return path.join(getStorageRoot(), 'private')
+}
+
+export function getLegacyStorageRoots(): string[] {
+  return LEGACY_STORAGE_ROOTS
+}
+
+function isWithinPath(targetPath: string, parentPath: string): boolean {
+  const relative = path.relative(parentPath, targetPath)
+  return relative === '' || (!relative.startsWith('..') && !path.isAbsolute(relative))
+}
+
+export function assertStorageConfiguration(): string {
+  const storageRoot = getStorageRoot()
+
+  if (process.env.NODE_ENV === 'production' && !process.env.FILE_STORAGE_ROOT) {
+    throw new Error('FILE_STORAGE_ROOT must be set in production so uploads are stored on the mounted volume.')
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    const forbiddenRoots = [APP_PACKAGE_ROOT, APP_SOURCE_ROOT, APP_DIST_ROOT]
+    const invalidRoot = forbiddenRoots.find((root) => isWithinPath(storageRoot, root))
+    if (invalidRoot) {
+      throw new Error(
+        `FILE_STORAGE_ROOT must point outside the API app tree in production. Received ${storageRoot}, which is inside ${invalidRoot}.`
+      )
+    }
+  }
+
+  return storageRoot
+}
+
+function ensureStorageRoot(visibility: StorageVisibility): string {
+  assertStorageConfiguration()
+  const root = visibility === 'public' ? getPublicStorageRoot() : getPrivateStorageRoot()
+  fs.mkdirSync(root, { recursive: true })
+  return root
+}
+
+function inferVisibility(folder: string): StorageVisibility {
+  const normalized = folder.replace(/\\/g, '/')
+  if (/\/customers\//.test(`/${normalized}/`)) return 'private'
+  if (/\/licenses?\//.test(`/${normalized}/`)) return 'private'
+  if (/\/contracts?\//.test(`/${normalized}/`)) return 'private'
+  if (/\/documents?\//.test(`/${normalized}/`)) return 'private'
+  if (/\/inspections?\//.test(`/${normalized}/`)) return 'private'
+  if (/\/internal\//.test(`/${normalized}/`)) return 'private'
+  return 'public'
+}
+
+function getApiBase(): string {
+  return (process.env.API_URL ?? 'http://localhost:4000').replace(/\/$/, '')
+}
+
+function getDashboardBase(): string {
+  return (
+    process.env.DASHBOARD_URL ??
+    process.env.NEXT_PUBLIC_DASHBOARD_URL ??
+    'http://localhost:3000/dashboard'
+  ).replace(/\/$/, '')
+}
+
+function getStorageRelativePath(imageUrl: string): string | null {
+  const marker = '/storage/'
+  const idx = imageUrl.indexOf(marker)
+  if (idx === -1) return null
+  return imageUrl.slice(idx + marker.length)
+}
+
+export function getProtectedCustomerLicenseImageUrl(customerId: string): string {
+  return `${getDashboardBase()}/api/v1/customers/${customerId}/license-image`
+}
+
+export async function uploadImage(
+  buffer: Buffer,
+  folder: string,
+  publicId?: string,
+  visibility: StorageVisibility = inferVisibility(folder),
+): Promise<string> {
+  const storageRoot = ensureStorageRoot(visibility)
+  const folderPath = path.join(storageRoot, folder)
+  if (!isWithinPath(folderPath, storageRoot)) {
+    throw new Error('Upload path escapes storage root')
+  }
+  fs.mkdirSync(folderPath, { recursive: true })
+
+  const filename = publicId
+    ? `${publicId}.jpg`
+    : `${crypto.randomBytes(16).toString('hex')}.jpg`
+
+  fs.writeFileSync(path.join(folderPath, filename), buffer)
+
+  return `${getApiBase()}/storage/${folder}/${filename}`
+}
+
+export function resolveStoredFilePath(imageUrl: string): string | null {
+  const relative = getStorageRelativePath(imageUrl)
+  if (!relative) return null
+
+  const roots = [getPublicStorageRoot(), getPrivateStorageRoot(), ...getLegacyStorageRoots(), assertStorageConfiguration()]
+  for (const root of roots) {
+    const filePath = path.join(root, relative)
+    if (!isWithinPath(filePath, root)) continue
+    if (fs.existsSync(filePath)) {
+      return filePath
+    }
+  }
+
+  return null
+}
+
+export async function deleteImage(imageUrl: string): Promise<void> {
+  const filePath = resolveStoredFilePath(imageUrl)
+  if (filePath && fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath)
+  }
+}
diff --git a/api/src/lib/zodValidation.ts b/api/src/lib/zodValidation.ts
new file mode 100644
index 0000000..0141a69
--- /dev/null
+++ b/api/src/lib/zodValidation.ts
@@ -0,0 +1,155 @@
+import { z } from 'zod'
+import { sanitizeAndFormat, getMaxLength } from './inputValidation'
+import type { FieldType } from './inputValidation'
+
+// ─── Regex constants ───────────────────────────────────────────
+
+const GLOBAL_ALLOWED = /^[a-zA-Z0-9@\-/\s]*$/
+
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/
+
+/** Morocco phone: (+212|00212|0) + 5/6/7 + 8 digits (optional spaces) */
+const MA_PHONE_REGEX = /^(?:(?:\+|00)212|0)\s?[5-7](?:\s?\d){8}$/
+
+// ─── Phone sanitization ───────────────────────────────────────
+
+function sanitizePhone(raw: string): string {
+  let out = ''
+  for (const ch of raw) {
+    if (/[\d\s+]/.test(ch)) out += ch
+  }
+  return out.trim()
+}
+
+// ─── Required fields ───────────────────────────────────────────
+
+function applyFieldRules(fieldType: FieldType) {
+  const maxLength = getMaxLength(fieldType)
+  return z
+    .string()
+    .min(1, { message: 'This field is required' })
+    .trim()
+    .transform((val: string) => sanitizeAndFormat(val, fieldType))
+    .pipe(
+      z.string().refine(
+        (val: string) => val.length <= maxLength,
+        { message: 'Maximum ' + maxLength + ' characters allowed' }
+      )
+    )
+}
+
+// ─── Optional fields ───────────────────────────────────────────
+
+function applyOptionalFieldRules(fieldType: FieldType) {
+  const maxLength = getMaxLength(fieldType)
+  return z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val === undefined || val === null || val.trim() === '') return undefined
+      return sanitizeAndFormat(val, fieldType)
+    })
+    .pipe(
+      z.string().optional().refine(
+        (val) => val === undefined || val.length <= maxLength,
+        { message: 'Maximum ' + maxLength + ' characters allowed' }
+      )
+    )
+}
+
+// ─── Exported helpers ──────────────────────────────────────────
+
+export function textField(fieldType: FieldType) {
+  return applyFieldRules(fieldType)
+}
+export function optionalTextField(fieldType: FieldType) {
+  return applyOptionalFieldRules(fieldType)
+}
+export function titleCaseAllField(fieldType: FieldType) {
+  return applyFieldRules(fieldType)
+}
+export function optionalTitleCaseAllField(fieldType: FieldType) {
+  return applyOptionalFieldRules(fieldType)
+}
+export function upperField(fieldType: FieldType) {
+  return applyFieldRules(fieldType)
+}
+export function optionalUpperField(fieldType: FieldType) {
+  return applyOptionalFieldRules(fieldType)
+}
+export function carTextField(fieldType: FieldType) {
+  return applyFieldRules(fieldType)
+}
+export function optionalCarTextField(fieldType: FieldType) {
+  return applyOptionalFieldRules(fieldType)
+}
+export function zipField() {
+  return applyFieldRules('zipCode')
+}
+export function optionalZipField() {
+  return applyOptionalFieldRules('zipCode')
+}
+
+// ─── Email fields ──────────────────────────────────────────────
+
+export function emailField() {
+  return z
+    .string()
+    .min(1, { message: 'Email is required' })
+    .trim()
+    .transform((val: string) => sanitizeAndFormat(val, 'email'))
+    .pipe(
+      z.string().refine(
+        (val: string) => EMAIL_REGEX.test(val),
+        { message: 'Please enter a valid email address' }
+      )
+    )
+}
+
+export function optionalEmailField() {
+  return z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val === undefined || val === null || val.trim() === '') return undefined
+      return sanitizeAndFormat(val, 'email')
+    })
+    .pipe(
+      z.string().optional().refine(
+        (val) => val === undefined || EMAIL_REGEX.test(val),
+        { message: 'Please enter a valid email address' }
+      )
+    )
+}
+
+// ─── Phone fields ──────────────────────────────────────────────
+
+export function phoneField() {
+  return z
+    .string()
+    .min(1, { message: 'Phone number is required' })
+    .trim()
+    .transform((val: string) => sanitizePhone(val))
+    .pipe(
+      z.string().refine(
+        (val: string) => MA_PHONE_REGEX.test(val),
+        { message: 'Please enter a valid Morocco phone number' }
+      )
+    )
+}
+
+export function optionalPhoneField() {
+  return z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val === undefined || val === null || val.trim() === '') return undefined
+      return sanitizePhone(val)
+    })
+    .pipe(
+      z.string().optional().refine(
+        (val) => val === undefined || MA_PHONE_REGEX.test(val),
+        { message: 'Please enter a valid Morocco phone number' }
+      )
+    )
+}
diff --git a/api/src/middleware/authHelpers.test.ts b/api/src/middleware/authHelpers.test.ts
new file mode 100644
index 0000000..3d8ba97
--- /dev/null
+++ b/api/src/middleware/authHelpers.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { Request, Response } from 'express'
+
+import { getCookie, sendForbidden, sendPaymentRequired, sendUnauthorized } from './authHelpers'
+
+function responseStub() {
+  const res = {
+    status: vi.fn(),
+    json: vi.fn(),
+  }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('authHelpers', () => {
+  it('extracts and decodes a cookie value by name', () => {
+    const req = {
+      headers: {
+        cookie: 'theme=dark; employee_session=abc%20123%3D; other=value',
+      },
+    } as Request
+
+    expect(getCookie(req, 'employee_session')).toBe('abc 123=')
+  })
+
+  it('returns null when the cookie header or requested cookie is missing', () => {
+    expect(getCookie({ headers: {} } as Request, 'employee_session')).toBeNull()
+    expect(getCookie({ headers: { cookie: 'theme=dark' } } as Request, 'employee_session')).toBeNull()
+  })
+
+  it('sends a uniform unauthorized response', () => {
+    const res = responseStub()
+
+    sendUnauthorized(res, 'invalid_token', 'Invalid token')
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid token', statusCode: 401 })
+  })
+
+  it('sends forbidden responses with optional metadata', () => {
+    const res = responseStub()
+
+    sendForbidden(res, 'forbidden', 'Nope', { requiredRole: 'OWNER' })
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'forbidden',
+      message: 'Nope',
+      statusCode: 403,
+      requiredRole: 'OWNER',
+    })
+  })
+
+  it('sends payment-required responses with optional metadata', () => {
+    const res = responseStub()
+
+    sendPaymentRequired(res, 'subscription_suspended', 'Pay up', { billingUrl: '/billing' })
+
+    expect(res.status).toHaveBeenCalledWith(402)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'subscription_suspended',
+      message: 'Pay up',
+      statusCode: 402,
+      billingUrl: '/billing',
+    })
+  })
+})
diff --git a/api/src/middleware/authHelpers.ts b/api/src/middleware/authHelpers.ts
new file mode 100644
index 0000000..8a1879c
--- /dev/null
+++ b/api/src/middleware/authHelpers.ts
@@ -0,0 +1,45 @@
+import { Request, Response } from 'express'
+
+/**
+ * Sends a uniform auth-error JSON response.
+ * All auth middleware must go through this function so the shape is identical
+ * to what the errorMiddleware produces for AppError instances.
+ */
+export function sendUnauthorized(res: Response, error: string, message: string) {
+  return res.status(401).json({ error, message, statusCode: 401 })
+}
+
+export function getCookie(req: Request, name: string): string | null {
+  const cookieHeader = req.headers.cookie
+  if (!cookieHeader) return null
+
+  for (const chunk of cookieHeader.split(';')) {
+    const [rawName, ...rawValue] = chunk.trim().split('=')
+    if (rawName === name) {
+      return decodeURIComponent(rawValue.join('='))
+    }
+  }
+
+  return null
+}
+
+export function getBearerToken(req: Request): string | null {
+  const authHeader = req.headers.authorization
+  if (!authHeader?.startsWith('Bearer ')) return null
+  const token = authHeader.slice(7).trim()
+  return token.length > 0 ? token : null
+}
+
+export function getAuthToken(req: Request, cookieName?: string): string | null {
+  // Prefer HttpOnly cookies over bearer tokens so stale script-readable tokens
+  // cannot shadow a valid server-managed session during migration.
+  return (cookieName ? getCookie(req, cookieName) : null) ?? getBearerToken(req)
+}
+
+export function sendForbidden(res: Response, error: string, message: string, extra?: Record<string, unknown>) {
+  return res.status(403).json({ error, message, statusCode: 403, ...extra })
+}
+
+export function sendPaymentRequired(res: Response, error: string, message: string, extra?: Record<string, unknown>) {
+  return res.status(402).json({ error, message, statusCode: 402, ...extra })
+}
diff --git a/api/src/middleware/rateLimiter.test.ts b/api/src/middleware/rateLimiter.test.ts
new file mode 100644
index 0000000..a1efcc9
--- /dev/null
+++ b/api/src/middleware/rateLimiter.test.ts
@@ -0,0 +1,69 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const createdLimiters: any[] = []
+
+vi.mock('express-rate-limit', () => ({
+  default: vi.fn((config: any) => {
+    createdLimiters.push(config)
+    return config
+  }),
+  ipKeyGenerator: vi.fn((ip: string) => `ip:${ip}`),
+}))
+
+vi.mock('../security/tokens', () => ({
+  verifyAnyActorToken: vi.fn((token: string) => {
+    if (token === 'employee-token') return { type: 'employee', sub: 'employee_1' }
+    if (token === 'renter-token') return { type: 'renter', sub: 'renter_1' }
+    throw new Error('Invalid actor token')
+  }),
+}))
+
+import rateLimit, { ipKeyGenerator } from 'express-rate-limit'
+
+describe('rateLimiter middleware configuration', () => {
+  beforeEach(() => {
+    createdLimiters.length = 0
+    vi.resetModules()
+  })
+
+  it('configures auth limiter to count failed attempts only', async () => {
+    const { authLimiter } = await import('./rateLimiter')
+
+    expect(authLimiter.max).toBe(20)
+    expect(authLimiter.windowMs).toBe(15 * 60 * 1000)
+    expect(authLimiter.skipSuccessfulRequests).toBe(true)
+    expect(authLimiter.message).toMatchObject({ error: 'too_many_requests', statusCode: 429 })
+    expect(rateLimit).toHaveBeenCalled()
+  })
+
+  it('keys general API limits by verified actor identity before falling back to request context', async () => {
+    const { apiLimiter } = await import('./rateLimiter')
+
+    expect(apiLimiter.keyGenerator({
+      ip: '203.0.113.10',
+      headers: { cookie: 'theme=dark; employee_session=employee-token' },
+      companyId: 'company_1',
+    } as any)).toBe('ip:203.0.113.10:employee:employee_1')
+    expect(apiLimiter.keyGenerator({
+      ip: '203.0.113.10',
+      headers: { authorization: 'Bearer renter-token' },
+      renterId: 'legacy_renter_context',
+    } as any)).toBe('ip:203.0.113.10:renter:renter_1')
+    expect(apiLimiter.keyGenerator({
+      ip: '203.0.113.10',
+      headers: { authorization: 'Bearer invalid-token' },
+      companyId: 'company_1',
+    } as any)).toBe('ip:203.0.113.10:company_1')
+    expect(apiLimiter.keyGenerator({ ip: '203.0.113.10', headers: {}, renterId: 'renter_1' } as any)).toBe('ip:203.0.113.10:renter_1')
+    expect(ipKeyGenerator).toHaveBeenCalledWith('203.0.113.10')
+  })
+
+  it('uses tighter public and admin limits with explicit 429 payloads', async () => {
+    const { publicLimiter, adminLimiter } = await import('./rateLimiter')
+
+    expect(publicLimiter.max).toBe(60)
+    expect(publicLimiter.message.message).toBe('Rate limit exceeded')
+    expect(adminLimiter.max).toBe(100)
+    expect(adminLimiter.message.message).toBe('Too many admin requests')
+  })
+})
diff --git a/api/src/middleware/rateLimiter.ts b/api/src/middleware/rateLimiter.ts
new file mode 100644
index 0000000..757f0a6
--- /dev/null
+++ b/api/src/middleware/rateLimiter.ts
@@ -0,0 +1,126 @@
+import rateLimit, { ipKeyGenerator } from 'express-rate-limit'
+import type { Request } from 'express'
+import { verifyAnyActorToken } from '../security/tokens'
+import { getSessionCookieName } from '../security/sessionCookies'
+
+
+const SESSION_COOKIE_NAMES = [
+  getSessionCookieName('admin'),
+  getSessionCookieName('employee'),
+  getSessionCookieName('renter'),
+]
+
+function readCookie(cookieHeader: string | undefined, name: string): string | null {
+  if (!cookieHeader) return null
+
+  for (const chunk of cookieHeader.split(';')) {
+    const [rawName, ...rawValue] = chunk.trim().split('=')
+    if (rawName === name) return decodeURIComponent(rawValue.join('='))
+  }
+
+  return null
+}
+
+function getBearerToken(req: Request): string | null {
+  const authHeader = req.headers.authorization
+  if (!authHeader?.startsWith('Bearer ')) return null
+  const token = authHeader.slice(7).trim()
+  return token || null
+}
+
+function getRequestToken(req: Request): string | null {
+  const cookieHeader = req.headers.cookie
+  for (const name of SESSION_COOKIE_NAMES) {
+    const token = readCookie(cookieHeader, name)
+    if (token) return token
+  }
+
+  return getBearerToken(req)
+}
+
+function getAuthenticatedActorKey(req: Request): string | null {
+  const token = getRequestToken(req)
+  if (!token) return null
+
+  try {
+    const payload = verifyAnyActorToken(token)
+    return `${payload.type}:${payload.sub}`
+  } catch {
+    return null
+  }
+}
+
+// req.ip is already the real client IP when app.set('trust proxy', 1) is configured
+const getClientIpKey = (req: Request) => ipKeyGenerator(req.ip ?? '')
+
+// Strict limiter for auth endpoints — prevents brute-force and credential stuffing.
+// Successful requests (e.g. GET /me profile reads) are skipped so only failed
+// attempts count toward the cap.
+export const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 20,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+  skipSuccessfulRequests: true,
+  keyGenerator: (req) => getClientIpKey(req),
+  message: { error: 'too_many_requests', message: 'Too many attempts, please try again later', statusCode: 429 },
+})
+
+// Standard limiter for general authenticated API endpoints
+export const apiLimiter = rateLimit({
+  windowMs: 60 * 1000, // 1 minute
+  max: 120,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+  keyGenerator: (req) => {
+    const ip = getClientIpKey(req)
+    const actorKey = getAuthenticatedActorKey(req)
+    const companyId = (req as any).companyId ?? ''
+    const renterId = (req as any).renterId ?? ''
+    return `${ip}:${actorKey || companyId || renterId || 'anonymous'}`
+  },
+  message: { error: 'too_many_requests', message: 'Rate limit exceeded', statusCode: 429 },
+})
+
+// Limiter for public marketplace and site endpoints (no auth)
+export const publicLimiter = rateLimit({
+  windowMs: 60 * 1000,
+  max: 60,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+  keyGenerator: (req) => getClientIpKey(req),
+  message: { error: 'too_many_requests', message: 'Rate limit exceeded', statusCode: 429 },
+})
+
+// Tight limiter for admin endpoints
+export const adminLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 100,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+  keyGenerator: (req) => {
+    const ip = getClientIpKey(req)
+    return `${ip}:${getAuthenticatedActorKey(req) || 'anonymous'}`
+  },
+  message: { error: 'too_many_requests', message: 'Too many admin requests', statusCode: 429 },
+})
+
+
+// Applied after authentication so limits can include actor identity rather than
+// pretending every employee behind the same NAT is the same organism.
+export const actorLimiter = rateLimit({
+  windowMs: 60 * 1000,
+  max: 240,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+  keyGenerator: (req) => {
+    const ip = getClientIpKey(req)
+    const actorKey = getAuthenticatedActorKey(req)
+    const companyId = (req as any).companyId ?? ''
+    const employeeId = (req as any).employee?.id ?? ''
+    const renterId = (req as any).renterId ?? ''
+    const adminId = (req as any).admin?.id ?? ''
+    return `${ip}:${companyId}:${actorKey || employeeId || renterId || adminId || 'anonymous'}`
+  },
+  message: { error: 'too_many_requests', message: 'Authenticated rate limit exceeded', statusCode: 429 },
+})
diff --git a/api/src/middleware/requestId.ts b/api/src/middleware/requestId.ts
new file mode 100644
index 0000000..62d2a33
--- /dev/null
+++ b/api/src/middleware/requestId.ts
@@ -0,0 +1,10 @@
+import crypto from 'crypto'
+import type { Request, Response, NextFunction } from 'express'
+
+export function requestIdMiddleware(req: Request, res: Response, next: NextFunction) {
+  const incoming = req.headers['x-request-id']
+  const requestId = Array.isArray(incoming) ? incoming[0] : incoming
+  req.requestId = requestId && requestId.length <= 128 ? requestId : `req_${crypto.randomUUID()}`
+  res.setHeader('X-Request-Id', req.requestId)
+  next()
+}
diff --git a/api/src/middleware/requireAdminAuth.test.ts b/api/src/middleware/requireAdminAuth.test.ts
new file mode 100644
index 0000000..df87cb3
--- /dev/null
+++ b/api/src/middleware/requireAdminAuth.test.ts
@@ -0,0 +1,152 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+vi.mock('jsonwebtoken', () => ({
+  default: { verify: vi.fn() },
+}))
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    adminUser: { findUnique: vi.fn() },
+  },
+}))
+
+import jwt from 'jsonwebtoken'
+import { prisma } from '../lib/prisma'
+import { requireAdminAuth, requireAdminRole } from './requireAdminAuth'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireAdminAuth middleware', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+  })
+
+  it('rejects requests without an admin bearer token', async () => {
+    const req = { headers: {} } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Admin authentication required', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid token signatures', async () => {
+    vi.mocked(jwt.verify).mockImplementation(() => { throw new Error('bad token') })
+    const req = { headers: { authorization: 'Bearer bad' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid or expired admin token', statusCode: 401 })
+    expect(prisma.adminUser.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects non-admin token types', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as any)
+    const req = { headers: { authorization: 'Bearer employee-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid or expired admin token', statusCode: 401 })
+    expect(prisma.adminUser.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects inactive admin accounts', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as any)
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue({ id: 'admin_1', isActive: false } as any)
+    const req = { headers: { authorization: 'Bearer admin-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Admin account not found or deactivated', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('attaches the admin record for valid admin tokens', async () => {
+    const admin = { id: 'admin_1', isActive: true, role: 'SUPPORT', totpEnabled: true }
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as any)
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue(admin as any)
+    const req = { headers: { authorization: 'Bearer admin-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(prisma.adminUser.findUnique).toHaveBeenCalledWith({ where: { id: 'admin_1' } })
+    expect(req.admin).toEqual(admin)
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+
+  it('blocks non-enrolled admins from privileged routes', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as any)
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue({ id: 'admin_1', isActive: true, role: 'ADMIN', totpEnabled: false } as any)
+    const req = { headers: { authorization: 'Bearer admin-token' }, path: '/companies' } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireAdminAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith({ error: 'admin_2fa_required', message: 'Admin 2FA enrollment is required before using privileged admin routes', statusCode: 403 })
+    expect(next).not.toHaveBeenCalled()
+  })
+})
+
+describe('requireAdminRole middleware', () => {
+  it('requires requireAdminAuth to run first', () => {
+    const req = {} as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireAdminRole('SUPPORT' as any)(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Admin authentication required', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('blocks admins below the required rank', () => {
+    const req = { admin: { role: 'VIEWER' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireAdminRole('FINANCE' as any)(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'forbidden',
+      message: 'This action requires the FINANCE role or higher',
+      statusCode: 403,
+    })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('allows admins at or above the required rank', () => {
+    const req = { admin: { role: 'ADMIN' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireAdminRole('SUPPORT' as any)(req, res, next)
+
+    expect(next).toHaveBeenCalledTimes(1)
+    expect(res.status).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/middleware/requireAdminAuth.ts b/api/src/middleware/requireAdminAuth.ts
new file mode 100644
index 0000000..0972321
--- /dev/null
+++ b/api/src/middleware/requireAdminAuth.ts
@@ -0,0 +1,94 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../lib/prisma'
+import { AdminRole } from '@rentaldrivego/database'
+import { getAuthToken, sendUnauthorized, sendForbidden } from './authHelpers'
+import { verifyActorToken } from '../security/tokens'
+import { getSessionCookieName } from '../security/sessionCookies'
+
+const ROLE_RANK: Record<AdminRole, number> = {
+  SUPER_ADMIN: 5,
+  ADMIN:       4,
+  SUPPORT:     3,
+  FINANCE:     2,
+  VIEWER:      1,
+}
+
+const ADMIN_2FA_ENROLLMENT_EXEMPT_PATHS = new Set([
+  '/auth/me',
+  '/auth/logout',
+  '/auth/2fa/setup',
+  '/auth/2fa/verify',
+])
+
+const FRESH_2FA_WINDOW_MS = Number(process.env.ADMIN_FRESH_2FA_WINDOW_MS ?? 10 * 60 * 1000)
+
+function is2faEnrollmentExempt(req: Request) {
+  return ADMIN_2FA_ENROLLMENT_EXEMPT_PATHS.has(req.path)
+}
+
+/**
+ * Requires a valid admin session token.
+ *
+ * Guarantees on success:
+ *   req.admin — the full AdminUser record
+ */
+export async function requireAdminAuth(req: Request, res: Response, next: NextFunction) {
+  const token = getAuthToken(req, getSessionCookieName('admin'))
+
+  if (!token) return sendUnauthorized(res, 'unauthenticated', 'Admin authentication required')
+
+  let payload: { sub: string; type: string; last2faAt?: number }
+  try {
+    payload = verifyActorToken(token, 'admin')
+  } catch {
+    return sendUnauthorized(res, 'invalid_token', 'Invalid or expired admin token')
+  }
+
+  const admin = await prisma.adminUser.findUnique({ where: { id: payload.sub } })
+  if (!admin || !admin.isActive) {
+    return sendUnauthorized(res, 'unauthenticated', 'Admin account not found or deactivated')
+  }
+
+  if (!admin.totpEnabled && !is2faEnrollmentExempt(req)) {
+    return sendForbidden(res, 'admin_2fa_required', 'Admin 2FA enrollment is required before using privileged admin routes')
+  }
+
+  req.admin = admin
+  req.adminAuthLast2faAt = typeof payload.last2faAt === 'number' ? payload.last2faAt : undefined
+  next()
+}
+
+/**
+ * Requires the authenticated admin to have at least `minimumRole`.
+ * Must be applied after `requireAdminAuth`.
+ */
+export function requireAdminRole(minimumRole: AdminRole) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const admin = req.admin
+    if (!admin) return sendUnauthorized(res, 'unauthenticated', 'Admin authentication required')
+
+    const rank     = ROLE_RANK[admin.role]   ?? 0
+    const required = ROLE_RANK[minimumRole]  ?? 99
+
+    if (rank < required) {
+      return sendForbidden(res, 'forbidden', `This action requires the ${minimumRole} role or higher`)
+    }
+
+    next()
+  }
+}
+
+export function requireFreshAdmin2FA(req: Request, res: Response, next: NextFunction) {
+  const admin = req.admin
+  if (!admin) return sendUnauthorized(res, 'unauthenticated', 'Admin authentication required')
+  if (!admin.totpEnabled) {
+    return sendForbidden(res, 'admin_2fa_required', 'Admin 2FA enrollment is required for this action')
+  }
+
+  const last2faAt = req.adminAuthLast2faAt
+  if (!last2faAt || Date.now() - last2faAt > FRESH_2FA_WINDOW_MS) {
+    return sendForbidden(res, 'fresh_2fa_required', 'Fresh admin 2FA verification is required for this action')
+  }
+
+  next()
+}
diff --git a/api/src/middleware/requireApiKey.test.ts b/api/src/middleware/requireApiKey.test.ts
new file mode 100644
index 0000000..6b9e63e
--- /dev/null
+++ b/api/src/middleware/requireApiKey.test.ts
@@ -0,0 +1,159 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+import { generateCompanyApiKey } from '../security/apiKeys'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    companyApiKey: {
+      findUnique: vi.fn(),
+      update: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { requireApiKey } from './requireApiKey'
+
+function createResponseStub() {
+  const res = {
+    status: vi.fn(),
+    json: vi.fn(),
+  }
+
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+
+  return res as unknown as Response & typeof res
+}
+
+describe('requireApiKey middleware', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('rejects requests with no x-api-key header', async () => {
+    const req = { headers: {} } as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'missing_api_key',
+      message: 'API key required in x-api-key header',
+      statusCode: 401,
+    })
+    expect((prisma as any).companyApiKey.findUnique).not.toHaveBeenCalled()
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects malformed API keys before database lookup', async () => {
+    const req = { headers: { 'x-api-key': 'bad-key' } } as unknown as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect((prisma as any).companyApiKey.findUnique).not.toHaveBeenCalled()
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'invalid_api_key',
+      message: 'Invalid API key',
+      statusCode: 401,
+    })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects unknown API key prefixes', async () => {
+    const generated = generateCompanyApiKey()
+    vi.mocked((prisma as any).companyApiKey.findUnique).mockResolvedValue(null)
+    const req = { headers: { 'x-api-key': generated.rawKey } } as unknown as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect((prisma as any).companyApiKey.findUnique).toHaveBeenCalledWith({
+      where: { prefix: generated.prefix },
+      include: { company: true },
+    })
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'invalid_api_key',
+      message: 'Invalid API key',
+      statusCode: 401,
+    })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects revoked API keys', async () => {
+    const generated = generateCompanyApiKey()
+    vi.mocked((prisma as any).companyApiKey.findUnique).mockResolvedValue({
+      id: 'key_1',
+      companyId: 'company_1',
+      prefix: generated.prefix,
+      keyHash: generated.keyHash,
+      revokedAt: new Date('2026-06-01T00:00:00.000Z'),
+      company: { id: 'company_1', name: 'Atlas Cars' },
+    })
+    const req = { headers: { 'x-api-key': generated.rawKey } } as unknown as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects API keys whose secret does not match the stored hash', async () => {
+    const generated = generateCompanyApiKey()
+    const other = generateCompanyApiKey()
+    vi.mocked((prisma as any).companyApiKey.findUnique).mockResolvedValue({
+      id: 'key_1',
+      companyId: 'company_1',
+      prefix: generated.prefix,
+      keyHash: other.keyHash,
+      revokedAt: null,
+      company: { id: 'company_1', name: 'Atlas Cars' },
+    })
+    const req = { headers: { 'x-api-key': generated.rawKey } } as unknown as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('attaches company context, updates lastUsedAt, and calls next for valid API keys', async () => {
+    const generated = generateCompanyApiKey()
+    const company = { id: 'company_1', name: 'Atlas Cars' }
+    vi.mocked((prisma as any).companyApiKey.findUnique).mockResolvedValue({
+      id: 'key_1',
+      companyId: company.id,
+      prefix: generated.prefix,
+      keyHash: generated.keyHash,
+      revokedAt: null,
+      company,
+    })
+    vi.mocked((prisma as any).companyApiKey.update).mockResolvedValue({})
+    const req = { headers: { 'x-api-key': generated.rawKey } } as unknown as Request
+    const res = createResponseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireApiKey(req, res, next)
+
+    expect((prisma as any).companyApiKey.update).toHaveBeenCalledWith({
+      where: { id: 'key_1' },
+      data: { lastUsedAt: expect.any(Date) },
+    })
+    expect(req.company).toEqual(company)
+    expect(req.companyId).toBe('company_1')
+    expect(next).toHaveBeenCalledTimes(1)
+    expect(res.status).not.toHaveBeenCalled()
+    expect(res.json).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/middleware/requireApiKey.ts b/api/src/middleware/requireApiKey.ts
new file mode 100644
index 0000000..abbe4ec
--- /dev/null
+++ b/api/src/middleware/requireApiKey.ts
@@ -0,0 +1,35 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../lib/prisma'
+import { getApiKeyPrefix, hashApiKey, timingSafeEqualHex } from '../security/apiKeys'
+
+export async function requireApiKey(req: Request, res: Response, next: NextFunction) {
+  const apiKey = req.headers['x-api-key'] as string | undefined
+
+  if (!apiKey) {
+    return res.status(401).json({ error: 'missing_api_key', message: 'API key required in x-api-key header', statusCode: 401 })
+  }
+
+  const prefix = getApiKeyPrefix(apiKey)
+  if (!prefix) {
+    return res.status(401).json({ error: 'invalid_api_key', message: 'Invalid API key', statusCode: 401 })
+  }
+
+  const keyRecord = await (prisma as any).companyApiKey.findUnique({
+    where: { prefix },
+    include: { company: true },
+  })
+
+  const hashed = hashApiKey(apiKey)
+  if (!keyRecord || keyRecord.revokedAt || !timingSafeEqualHex(hashed, keyRecord.keyHash)) {
+    return res.status(401).json({ error: 'invalid_api_key', message: 'Invalid API key', statusCode: 401 })
+  }
+
+  await (prisma as any).companyApiKey.update({
+    where: { id: keyRecord.id },
+    data: { lastUsedAt: new Date() },
+  })
+
+  req.company = keyRecord.company
+  req.companyId = keyRecord.companyId
+  next()
+}
diff --git a/api/src/middleware/requireCompanyAuth.test.ts b/api/src/middleware/requireCompanyAuth.test.ts
new file mode 100644
index 0000000..44e0aec
--- /dev/null
+++ b/api/src/middleware/requireCompanyAuth.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+vi.mock('jsonwebtoken', () => ({
+  default: { verify: vi.fn() },
+}))
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn() },
+  },
+}))
+
+import jwt from 'jsonwebtoken'
+import { prisma } from '../lib/prisma'
+import { requireCompanyAuth, requireCompanyDocumentAuth } from './requireCompanyAuth'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireCompanyAuth middleware', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+  })
+
+  it('rejects missing bearer tokens', async () => {
+    const req = { headers: {} } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Authentication required', statusCode: 401 })
+    expect(prisma.employee.findUnique).not.toHaveBeenCalled()
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid tokens', async () => {
+    vi.mocked(jwt.verify).mockImplementation(() => { throw new Error('bad token') })
+    const req = { headers: { authorization: 'Bearer bad' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid or expired session token', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects non-employee token types', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'renter_1', type: 'renter' } as any)
+    const req = { headers: { authorization: 'Bearer renter-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid or expired session token', statusCode: 401 })
+    expect(prisma.employee.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects inactive or missing employees', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as any)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue({ id: 'emp_1', isActive: false } as any)
+    const req = { headers: { authorization: 'Bearer employee-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Employee account not found or inactive', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('attaches employee and company context for active employees', async () => {
+    const employee = { id: 'emp_1', companyId: 'company_1', isActive: true, company: { id: 'company_1', name: 'Atlas' } }
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as any)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(employee as any)
+    const req = { headers: { authorization: 'Bearer employee-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyAuth(req, res, next)
+
+    expect(prisma.employee.findUnique).toHaveBeenCalledWith({ where: { id: 'emp_1' }, include: { company: true } })
+    expect(req.employee).toEqual(employee)
+    expect(req.company).toEqual(employee.company)
+    expect(req.companyId).toBe('company_1')
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+
+  it('accepts employee_session cookies for document routes', async () => {
+    const employee = { id: 'emp_2', companyId: 'company_2', isActive: true, company: { id: 'company_2' } }
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_2', type: 'employee' } as any)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(employee as any)
+    const req = { headers: { cookie: 'employee_session=cookie-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireCompanyDocumentAuth(req, res, next)
+
+    expect(jwt.verify).toHaveBeenCalledWith('cookie-token', 'test-secret', {
+      algorithms: ['HS256'],
+      issuer: 'rentaldrivego-api',
+      audience: 'employee',
+    })
+    expect(req.companyId).toBe('company_2')
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/api/src/middleware/requireCompanyAuth.ts b/api/src/middleware/requireCompanyAuth.ts
new file mode 100644
index 0000000..57afbfd
--- /dev/null
+++ b/api/src/middleware/requireCompanyAuth.ts
@@ -0,0 +1,49 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../lib/prisma'
+import { getAuthToken, sendUnauthorized } from './authHelpers'
+import { verifyActorToken } from '../security/tokens'
+import { getSessionCookieName } from '../security/sessionCookies'
+import { actorLimiter } from './rateLimiter'
+
+/**
+ * Validates a company-scoped Bearer token and loads the employee + company onto `req`.
+ *
+ * Guarantees on success:
+ *   req.employee  — full employee record (with company relation)
+ *   req.company   — the employee's company
+ *   req.companyId — string shorthand for req.company.id
+ */
+async function authenticateCompanyRequest(req: Request, res: Response, next: NextFunction) {
+  const token = getAuthToken(req, getSessionCookieName('employee'))
+
+  if (!token) return sendUnauthorized(res, 'unauthenticated', 'Authentication required')
+
+  let payload: { sub: string; type: string }
+  try {
+    payload = verifyActorToken(token, 'employee')
+  } catch {
+    return sendUnauthorized(res, 'invalid_token', 'Invalid or expired session token')
+  }
+
+  const employee = await prisma.employee.findUnique({
+    where: { id: payload.sub },
+    include: { company: true },
+  })
+
+  if (!employee || !employee.isActive) {
+    return sendUnauthorized(res, 'unauthenticated', 'Employee account not found or inactive')
+  }
+
+  req.employee  = employee
+  req.company   = employee.company
+  req.companyId = employee.companyId
+  return actorLimiter(req, res, next)
+}
+
+export async function requireCompanyAuth(req: Request, res: Response, next: NextFunction) {
+  return authenticateCompanyRequest(req, res, next)
+}
+
+export async function requireCompanyDocumentAuth(req: Request, res: Response, next: NextFunction) {
+  return authenticateCompanyRequest(req, res, next)
+}
diff --git a/api/src/middleware/requireCompanyPolicy.ts b/api/src/middleware/requireCompanyPolicy.ts
new file mode 100644
index 0000000..7c36461
--- /dev/null
+++ b/api/src/middleware/requireCompanyPolicy.ts
@@ -0,0 +1,22 @@
+import type { Request, Response, NextFunction } from 'express'
+import { sendForbidden, sendUnauthorized } from './authHelpers'
+import type { EmployeeRole } from '@rentaldrivego/database'
+import { CompanyPolicy, type CompanyPolicyAction } from '../security/policies/companyPolicy'
+
+export function requireCompanyPolicy(action: CompanyPolicyAction) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const employee = req.employee
+    if (!employee) return sendUnauthorized(res, 'unauthenticated', 'Authentication required')
+
+    const allowedRoles: readonly EmployeeRole[] = CompanyPolicy[action]
+    if (!allowedRoles.includes(employee.role)) {
+      return sendForbidden(res, 'forbidden', 'You do not have permission to perform this action', {
+        action,
+        allowedRoles,
+        yourRole: employee.role,
+      })
+    }
+
+    next()
+  }
+}
diff --git a/api/src/middleware/requireRenterAuth.test.ts b/api/src/middleware/requireRenterAuth.test.ts
new file mode 100644
index 0000000..a63b7ee
--- /dev/null
+++ b/api/src/middleware/requireRenterAuth.test.ts
@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+vi.mock('jsonwebtoken', () => ({
+  default: { verify: vi.fn() },
+}))
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    renter: { findUnique: vi.fn() },
+  },
+}))
+
+import jwt from 'jsonwebtoken'
+import { prisma } from '../lib/prisma'
+import { optionalRenterAuth, requireRenterAuth } from './requireRenterAuth'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireRenterAuth middleware', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+  })
+
+  it('rejects missing bearer tokens', async () => {
+    const req = { headers: {} } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireRenterAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Renter authentication required', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid tokens and wrong token types', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as any)
+    const req = { headers: { authorization: 'Bearer employee-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireRenterAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'invalid_token', message: 'Invalid or expired token', statusCode: 401 })
+    expect(prisma.renter.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects inactive renters', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'renter_1', type: 'renter' } as any)
+    vi.mocked(prisma.renter.findUnique).mockResolvedValue({ id: 'renter_1', isActive: false } as any)
+    const req = { headers: { authorization: 'Bearer renter-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireRenterAuth(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Renter account not found or inactive', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('attaches renterId for active renters', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'renter_1', type: 'renter' } as any)
+    vi.mocked(prisma.renter.findUnique).mockResolvedValue({ id: 'renter_1', isActive: true } as any)
+    const req = { headers: { authorization: 'Bearer renter-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireRenterAuth(req, res, next)
+
+    expect(req.renterId).toBe('renter_1')
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+
+  it('optional auth never blocks missing or invalid tokens', async () => {
+    const noTokenReq = { headers: {} } as Request
+    const invalidReq = { headers: { authorization: 'Bearer bad' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+    vi.mocked(jwt.verify).mockImplementation(() => { throw new Error('bad token') })
+
+    await optionalRenterAuth(noTokenReq, res, next)
+    await optionalRenterAuth(invalidReq, res, next)
+
+    expect(next).toHaveBeenCalledTimes(2)
+  })
+
+  it('optional auth attaches renterId only for renter tokens', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'renter_2', type: 'renter' } as any)
+    const req = { headers: { authorization: 'Bearer renter-token' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await optionalRenterAuth(req, res, next)
+
+    expect(req.renterId).toBe('renter_2')
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/api/src/middleware/requireRenterAuth.ts b/api/src/middleware/requireRenterAuth.ts
new file mode 100644
index 0000000..2a98795
--- /dev/null
+++ b/api/src/middleware/requireRenterAuth.ts
@@ -0,0 +1,54 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../lib/prisma'
+import { getAuthToken, sendUnauthorized } from './authHelpers'
+import { verifyActorToken } from '../security/tokens'
+import { getSessionCookieName } from '../security/sessionCookies'
+import { actorLimiter } from './rateLimiter'
+
+/**
+ * Requires a valid renter Bearer token.
+ *
+ * Guarantees on success:
+ *   req.renterId — the authenticated renter's id
+ */
+export async function requireRenterAuth(req: Request, res: Response, next: NextFunction) {
+  const token = getAuthToken(req, getSessionCookieName('renter'))
+
+  if (!token) return sendUnauthorized(res, 'unauthenticated', 'Renter authentication required')
+
+  let payload: { sub: string; type: string }
+  try {
+    payload = verifyActorToken(token, 'renter')
+  } catch {
+    return sendUnauthorized(res, 'invalid_token', 'Invalid or expired token')
+  }
+
+  const renter = await prisma.renter.findUnique({ where: { id: payload.sub } })
+  if (!renter || !renter.isActive) {
+    return sendUnauthorized(res, 'unauthenticated', 'Renter account not found or inactive')
+  }
+
+  req.renterId = renter.id
+  return actorLimiter(req, res, next)
+}
+
+/**
+ * Optionally extracts renter identity from a Bearer token.
+ * Never blocks the request — invalid or absent tokens are silently ignored.
+ *
+ * Sets on success:
+ *   req.renterId — the authenticated renter's id (if token is valid)
+ */
+export async function optionalRenterAuth(req: Request, _res: Response, next: NextFunction) {
+  const token = getAuthToken(req, getSessionCookieName('renter'))
+  if (!token) return next()
+
+  try {
+    const payload = verifyActorToken(token, 'renter')
+    req.renterId = payload.sub
+  } catch {
+    // Optional — silently ignore invalid tokens
+  }
+
+  next()
+}
diff --git a/api/src/middleware/requireRole.test.ts b/api/src/middleware/requireRole.test.ts
new file mode 100644
index 0000000..a17eeb7
--- /dev/null
+++ b/api/src/middleware/requireRole.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+import { requireRole } from './requireRole'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireRole middleware', () => {
+  it('rejects requests when company auth did not attach an employee', () => {
+    const req = {} as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireRole('AGENT' as any)(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'Authentication required', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects employees below the required role and includes role context', () => {
+    const req = { employee: { role: 'AGENT' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireRole('MANAGER' as any)(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'forbidden',
+      message: 'This action requires the MANAGER role or higher',
+      statusCode: 403,
+      requiredRole: 'MANAGER',
+      yourRole: 'AGENT',
+    })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('allows employees at or above the required role', () => {
+    const req = { employee: { role: 'OWNER' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireRole('MANAGER' as any)(req, res, next)
+
+    expect(next).toHaveBeenCalledTimes(1)
+    expect(res.status).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/middleware/requireRole.ts b/api/src/middleware/requireRole.ts
new file mode 100644
index 0000000..bb0ef61
--- /dev/null
+++ b/api/src/middleware/requireRole.ts
@@ -0,0 +1,32 @@
+import { Request, Response, NextFunction } from 'express'
+import { EmployeeRole } from '@rentaldrivego/database'
+import { sendUnauthorized, sendForbidden } from './authHelpers'
+
+const ROLE_RANK: Record<EmployeeRole, number> = {
+  OWNER:   3,
+  MANAGER: 2,
+  AGENT:   1,
+}
+
+/**
+ * Requires the authenticated employee to have at least `minimumRole`.
+ * Must be applied after `requireCompanyAuth`.
+ */
+export function requireRole(minimumRole: EmployeeRole) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const employee = req.employee
+    if (!employee) return sendUnauthorized(res, 'unauthenticated', 'Authentication required')
+
+    const employeeRank = ROLE_RANK[employee.role] ?? 0
+    const requiredRank = ROLE_RANK[minimumRole]   ?? 99
+
+    if (employeeRank < requiredRank) {
+      return sendForbidden(res, 'forbidden', `This action requires the ${minimumRole} role or higher`, {
+        requiredRole: minimumRole,
+        yourRole: employee.role,
+      })
+    }
+
+    next()
+  }
+}
diff --git a/api/src/middleware/requireSubscription.test.ts b/api/src/middleware/requireSubscription.test.ts
new file mode 100644
index 0000000..444501e
--- /dev/null
+++ b/api/src/middleware/requireSubscription.test.ts
@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+import { requireSubscription } from './requireSubscription'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireSubscription middleware', () => {
+  beforeEach(() => {
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = 'https://dashboard.example.test'
+  })
+
+  it('requires tenant/company context first', () => {
+    const req = {} as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireSubscription(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated', message: 'No company context', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('blocks suspended companies with a billing URL', () => {
+    const req = { company: { status: 'SUSPENDED' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireSubscription(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(402)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'subscription_suspended',
+      message: 'Your account has been suspended. Please contact support or renew your subscription.',
+      statusCode: 402,
+      billingUrl: 'https://dashboard.example.test/billing',
+    })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('blocks pending companies with setup guidance', () => {
+    const req = { company: { status: 'PENDING' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireSubscription(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(402)
+    expect(res.json).toHaveBeenCalledWith(expect.objectContaining({
+      error: 'subscription_pending',
+      message: 'Your account is pending activation. Please complete your subscription setup.',
+    }))
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('allows active companies through', () => {
+    const req = { company: { status: 'ACTIVE' } } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    requireSubscription(req, res, next)
+
+    expect(next).toHaveBeenCalledTimes(1)
+    expect(res.status).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/middleware/requireSubscription.ts b/api/src/middleware/requireSubscription.ts
new file mode 100644
index 0000000..fabce45
--- /dev/null
+++ b/api/src/middleware/requireSubscription.ts
@@ -0,0 +1,29 @@
+import { Request, Response, NextFunction } from 'express'
+import { sendUnauthorized, sendPaymentRequired } from './authHelpers'
+
+const BLOCKED_STATUSES = ['SUSPENDED', 'PENDING']
+
+/**
+ * Blocks requests for companies with lapsed or unactivated subscriptions.
+ * Must be applied after `requireTenant`.
+ *
+ * Guarantees on success:
+ *   req.company.status is not SUSPENDED or PENDING
+ */
+export function requireSubscription(req: Request, res: Response, next: NextFunction) {
+  const company = req.company
+  if (!company) return sendUnauthorized(res, 'unauthenticated', 'No company context')
+
+  if (BLOCKED_STATUSES.includes(company.status)) {
+    return sendPaymentRequired(
+      res,
+      `subscription_${company.status.toLowerCase()}`,
+      company.status === 'SUSPENDED'
+        ? 'Your account has been suspended. Please contact support or renew your subscription.'
+        : 'Your account is pending activation. Please complete your subscription setup.',
+      { billingUrl: `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/billing` },
+    )
+  }
+
+  next()
+}
diff --git a/api/src/middleware/requireTenant.test.ts b/api/src/middleware/requireTenant.test.ts
new file mode 100644
index 0000000..e2a8da1
--- /dev/null
+++ b/api/src/middleware/requireTenant.test.ts
@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    company: { findUnique: vi.fn() },
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { requireTenant } from './requireTenant'
+
+function responseStub() {
+  const res = { status: vi.fn(), json: vi.fn() }
+  res.status.mockReturnValue(res)
+  res.json.mockReturnValue(res)
+  return res as unknown as Response & typeof res
+}
+
+describe('requireTenant middleware', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('fails fast when company auth did not set companyId', async () => {
+    const req = {} as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireTenant(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'unauthenticated',
+      message: 'Tenant context missing — requireCompanyAuth must run first',
+      statusCode: 401,
+    })
+    expect(prisma.company.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects company ids that no longer exist', async () => {
+    vi.mocked(prisma.company.findUnique).mockResolvedValue(null)
+    const req = { companyId: 'company_missing' } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireTenant(req, res, next)
+
+    expect(prisma.company.findUnique).toHaveBeenCalledWith({ where: { id: 'company_missing' } })
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'company_not_found', message: 'Company not found', statusCode: 401 })
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('attaches the fresh company record and continues', async () => {
+    const company = { id: 'company_1', status: 'ACTIVE' }
+    vi.mocked(prisma.company.findUnique).mockResolvedValue(company as any)
+    const req = { companyId: 'company_1' } as Request
+    const res = responseStub()
+    const next = vi.fn() as NextFunction
+
+    await requireTenant(req, res, next)
+
+    expect(req.company).toEqual(company)
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/api/src/middleware/requireTenant.ts b/api/src/middleware/requireTenant.ts
new file mode 100644
index 0000000..7804df8
--- /dev/null
+++ b/api/src/middleware/requireTenant.ts
@@ -0,0 +1,25 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../lib/prisma'
+import { sendUnauthorized } from './authHelpers'
+
+/**
+ * Loads the company record and validates it exists.
+ * Must be applied after `requireCompanyAuth`.
+ *
+ * Guarantees on success:
+ *   req.company   — full Company record
+ *   req.companyId — string id (already set by requireCompanyAuth)
+ */
+export async function requireTenant(req: Request, res: Response, next: NextFunction) {
+  if (!req.companyId) {
+    return sendUnauthorized(res, 'unauthenticated', 'Tenant context missing — requireCompanyAuth must run first')
+  }
+
+  const company = await prisma.company.findUnique({ where: { id: req.companyId } })
+  if (!company) {
+    return sendUnauthorized(res, 'company_not_found', 'Company not found')
+  }
+
+  req.company = company
+  next()
+}
diff --git a/api/src/modules/admin/admin.billing.schemas.test.ts b/api/src/modules/admin/admin.billing.schemas.test.ts
new file mode 100644
index 0000000..aa8eff8
--- /dev/null
+++ b/api/src/modules/admin/admin.billing.schemas.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import {
+  billingAccountUpdateSchema,
+  billingCreditNoteSchema,
+  billingRefundSchema,
+  createBillingInvoiceSchema,
+  payBillingInvoiceSchema,
+} from './admin.schemas'
+
+describe('admin billing schemas', () => {
+  it('accepts complete draft invoice payloads and preserves nullable billing fields', () => {
+    const parsed = createBillingInvoiceSchema.parse({
+      subscriptionId: null,
+      invoiceType: 'MANUAL',
+      currency: 'MAD',
+      dueAt: '2026-08-10',
+      isSubscriptionBlocking: false,
+      adminReason: null,
+      lineItems: [{
+        type: 'MANUAL_ADJUSTMENT',
+        description: 'Manual correction',
+        quantity: 2,
+        unitAmount: 1500,
+        periodStart: null,
+        periodEnd: '2026-08-31T00:00:00.000Z',
+      }],
+    })
+
+    expect(parsed.lineItems[0]).toMatchObject({ quantity: 2, unitAmount: 1500, periodStart: null })
+  })
+
+  it('rejects invoices without line items because empty invoices are bookkeeping cosplay', () => {
+    expect(() => createBillingInvoiceSchema.parse({ invoiceType: 'MANUAL', lineItems: [] })).toThrow()
+  })
+
+  it('bounds billing account net terms and validates email formatting', () => {
+    expect(billingAccountUpdateSchema.parse({
+      legalName: 'Atlas Cars LLC',
+      billingEmail: 'billing@example.test',
+      invoiceTerms: 'NET_30',
+      netTermsDays: 30,
+    })).toMatchObject({ netTermsDays: 30 })
+
+    expect(() => billingAccountUpdateSchema.parse({ billingEmail: 'not-email', netTermsDays: 366 })).toThrow()
+  })
+
+  it('requires positive money movements for payments, credit notes, and refunds', () => {
+    expect(payBillingInvoiceSchema.parse({ amount: 5000, paymentMethodId: null })).toEqual({ amount: 5000, paymentMethodId: null })
+    expect(() => payBillingInvoiceSchema.parse({ amount: 0 })).toThrow()
+    expect(() => billingCreditNoteSchema.parse({ amount: -1, reason: 'Bad credit' })).toThrow()
+    expect(() => billingRefundSchema.parse({ amount: 0, reason: 'Bad refund' })).toThrow()
+  })
+})
diff --git a/api/src/modules/admin/admin.billing.service.ts b/api/src/modules/admin/admin.billing.service.ts
new file mode 100644
index 0000000..4a2d0be
--- /dev/null
+++ b/api/src/modules/admin/admin.billing.service.ts
@@ -0,0 +1,1406 @@
+import { prisma } from '../../lib/prisma'
+import { NotFoundError, ValidationError } from '../../http/errors'
+import { generateInvoicePdf } from '../../services/invoicePdfService'
+
+const BLOCKING_INVOICE_TYPES = new Set([
+  'SUBSCRIPTION_INITIAL',
+  'SUBSCRIPTION_RENEWAL',
+  'TRIAL_CONVERSION',
+  'SUBSCRIPTION_UPGRADE',
+])
+
+const EDITABLE_BILLING_STATUSES = new Set(['DRAFT', 'OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'])
+
+function toSequenceNumber(value: unknown) {
+  if (typeof value === 'bigint') return Number(value)
+  if (typeof value === 'number') return value
+  if (typeof value === 'string') return Number(value)
+  throw new Error('Invalid invoice sequence value')
+}
+
+function buildSequentialInvoiceNumber(sequence: number, date: Date) {
+  return `INV-${date.getFullYear()}-${String(sequence).padStart(6, '0')}`
+}
+
+function isBlockingInvoiceType(invoiceType: string) {
+  return BLOCKING_INVOICE_TYPES.has(invoiceType)
+}
+
+function getInvoiceTermsDays(invoiceTerms: string, explicitNetTermsDays: number) {
+  if (explicitNetTermsDays > 0) return explicitNetTermsDays
+  const map: Record<string, number> = {
+    DUE_ON_RECEIPT: 0,
+    NET_7: 7,
+    NET_15: 15,
+    NET_30: 30,
+    NET_45: 45,
+    NET_60: 60,
+  }
+  return map[invoiceTerms] ?? 0
+}
+
+function addDays(date: Date, days: number) {
+  const copy = new Date(date)
+  copy.setDate(copy.getDate() + days)
+  return copy
+}
+
+function normalizeAddress(address: any) {
+  if (!address) return null
+  if (typeof address === 'string') return { formatted: address }
+  return address
+}
+
+function fmtLegacyInvoiceType(_invoice: any) {
+  return 'SUBSCRIPTION_INITIAL'
+}
+
+function mapLegacyInvoiceStatus(status: string) {
+  switch (status) {
+    case 'PAID':
+      return 'PAID'
+    case 'FAILED':
+      return 'PAST_DUE'
+    case 'REFUNDED':
+      return 'REFUNDED'
+    case 'VOIDED':
+      return 'VOID'
+    default:
+      return 'OPEN'
+  }
+}
+
+function calculateLineAmounts(items: Array<{ type: string; amount: number }>) {
+  const subtotalAmount = items
+    .filter((item) => !['DISCOUNT', 'CREDIT', 'TAX'].includes(item.type))
+    .reduce((sum, item) => sum + item.amount, 0)
+  const discountAmount = Math.abs(
+    items.filter((item) => item.type === 'DISCOUNT').reduce((sum, item) => sum + item.amount, 0),
+  )
+  const creditAmount = Math.abs(
+    items.filter((item) => item.type === 'CREDIT').reduce((sum, item) => sum + item.amount, 0),
+  )
+  const taxAmount = items.filter((item) => item.type === 'TAX').reduce((sum, item) => sum + item.amount, 0)
+  const totalAmount = Math.max(subtotalAmount - discountAmount - creditAmount + taxAmount, 0)
+  return { subtotalAmount, discountAmount, creditAmount, taxAmount, totalAmount }
+}
+
+async function createBillingEvent(tx: any, data: {
+  billingAccountId?: string | null
+  invoiceId?: string | null
+  subscriptionId?: string | null
+  companyId?: string | null
+  eventType: string
+  source: string
+  payload?: Record<string, unknown>
+}) {
+  await tx.billingEvent.create({
+    data: {
+      billingAccountId: data.billingAccountId ?? null,
+      invoiceId: data.invoiceId ?? null,
+      subscriptionId: data.subscriptionId ?? null,
+      companyId: data.companyId ?? null,
+      eventType: data.eventType,
+      source: data.source,
+      payload: data.payload ?? {},
+      occurredAt: new Date(),
+    },
+  })
+}
+
+async function createAuditLog(data: {
+  adminUserId: string
+  action: string
+  resource: string
+  resourceId?: string
+  companyId?: string
+  before?: any
+  after?: any
+  note?: string
+  ipAddress?: string
+}) {
+  await prisma.auditLog.create({ data: data as any })
+}
+
+async function ensurePrimaryBillingAccount(companyId: string, tx: any = prisma) {
+  const existing = await tx.billingAccount.findFirst({
+    where: { companyId, isPrimary: true },
+    include: { company: { include: { contractSettings: true, subscription: true } }, creditBalances: true },
+  })
+  if (existing) return existing
+
+  const company = await tx.company.findUniqueOrThrow({
+    where: { id: companyId },
+    include: { accountingSettings: true, contractSettings: true, subscription: true },
+  })
+
+  const created = await tx.billingAccount.create({
+    data: {
+      companyId,
+      isPrimary: true,
+      legalName: company.name,
+      billingEmail: company.email,
+      billingAddress: normalizeAddress(company.address),
+      defaultCurrency: company.accountingSettings?.currency ?? 'MAD',
+      invoiceTerms: 'DUE_ON_RECEIPT',
+      netTermsDays: 0,
+      metadata: {},
+    },
+    include: { company: { include: { contractSettings: true, subscription: true } }, creditBalances: true },
+  })
+
+  await tx.billingCreditBalance.create({
+    data: {
+      billingAccountId: created.id,
+      currency: created.defaultCurrency,
+      balanceAmount: 0,
+    },
+  })
+
+  await createBillingEvent(tx, {
+    billingAccountId: created.id,
+    companyId,
+    eventType: 'billing_account.created',
+    source: 'system',
+    payload: { companyId },
+  })
+
+  return tx.billingAccount.findUniqueOrThrow({
+    where: { id: created.id },
+    include: { company: { include: { contractSettings: true, subscription: true } }, creditBalances: true },
+  })
+}
+
+async function getNextInvoiceSequence(tx: any) {
+  const latest = await tx.billingInvoice.findFirst({
+    where: { invoiceSequence: { not: null } },
+    select: { invoiceSequence: true },
+    orderBy: { invoiceSequence: 'desc' },
+  })
+  return (latest?.invoiceSequence ?? 0) + 1
+}
+
+async function maybeRestoreSubscription(tx: any, invoice: any) {
+  if (!invoice.subscriptionId || !invoice.isSubscriptionBlocking) return
+  const subscription = await tx.subscription.findUnique({ where: { id: invoice.subscriptionId } })
+  if (!subscription) return
+  if (['PAYMENT_PENDING', 'PAST_DUE', 'SUSPENDED', 'TRIALING', 'UNPAID'].includes(subscription.status)) {
+    await tx.subscription.update({
+      where: { id: subscription.id },
+      data: {
+        status: 'ACTIVE',
+        paymentPendingSince: null,
+        paymentDueAt: null,
+        pastDueSince: null,
+        suspendedAt: null,
+        retryCount: 0,
+      },
+    })
+  }
+}
+
+async function maybeCancelSubscriptionForWriteoff(tx: any, invoice: any) {
+  if (!invoice.subscriptionId || !invoice.isSubscriptionBlocking) return
+  const subscription = await tx.subscription.findUnique({ where: { id: invoice.subscriptionId } })
+  if (!subscription || ['CANCELLED', 'EXPIRED'].includes(subscription.status)) return
+  await tx.subscription.update({
+    where: { id: subscription.id },
+    data: {
+      status: 'CANCELLED',
+      cancelledAt: new Date(),
+      endedAt: new Date(),
+    },
+  })
+}
+
+async function syncOneLegacyInvoice(tx: any, legacy: any) {
+  const account = await ensurePrimaryBillingAccount(legacy.companyId, tx)
+  const status = mapLegacyInvoiceStatus(legacy.status)
+  const sequence = await getNextInvoiceSequence(tx)
+  const invoiceDate = legacy.createdAt ?? new Date()
+  const invoiceNumber = buildSequentialInvoiceNumber(sequence, invoiceDate)
+  const amountPaid = ['PAID', 'REFUNDED'].includes(status) ? legacy.amount : 0
+  const amountDue = ['OPEN', 'PAST_DUE', 'PAYMENT_PENDING'].includes(status) ? legacy.amount : 0
+
+  const billingInvoice = await tx.billingInvoice.create({
+    data: {
+      billingAccountId: account.id,
+      companyId: legacy.companyId,
+      subscriptionId: legacy.subscriptionId,
+      invoiceNumber,
+      invoiceSequence: sequence,
+      invoiceType: fmtLegacyInvoiceType(legacy),
+      status,
+      currency: legacy.currency,
+      subtotalAmount: legacy.amount,
+      totalAmount: legacy.amount,
+      amountPaid,
+      amountDue,
+      invoiceDate,
+      dueAt: legacy.dueAt ?? legacy.createdAt ?? new Date(),
+      finalizedAt: legacy.createdAt ?? new Date(),
+      paidAt: legacy.paidAt,
+      voidedAt: legacy.voidedAt,
+      billingName: account.legalName,
+      billingEmail: account.billingEmail,
+      billingAddress: account.billingAddress,
+      paymentProvider: legacy.paymentProvider,
+      isSubscriptionBlocking: true,
+      metadata: { legacySubscriptionInvoiceId: legacy.id },
+    },
+  })
+
+  await tx.billingInvoiceLineItem.create({
+    data: {
+      invoiceId: billingInvoice.id,
+      subscriptionId: legacy.subscriptionId,
+      plan: legacy.subscription?.plan ?? null,
+      type: 'SUBSCRIPTION_FEE',
+      description: `${legacy.subscription?.plan ?? 'Subscription'} legacy charge`,
+      quantity: 1,
+      unitAmount: legacy.amount,
+      amount: legacy.amount,
+      currency: legacy.currency,
+      periodStart: legacy.subscription?.currentPeriodStart ?? null,
+      periodEnd: legacy.subscription?.currentPeriodEnd ?? null,
+      metadata: { legacySubscriptionInvoiceId: legacy.id },
+    },
+  })
+
+  for (const attempt of legacy.attempts ?? []) {
+    await tx.billingPaymentAttempt.create({
+      data: {
+        invoiceId: billingInvoice.id,
+        billingAccountId: account.id,
+        providerPaymentId: attempt.providerPaymentId,
+        status: attempt.status === 'succeeded' ? 'SUCCEEDED' : attempt.status === 'failed' ? 'FAILED' : 'PENDING',
+        amount: legacy.amount,
+        currency: legacy.currency,
+        failureCode: attempt.failureCode,
+        failureMessage: attempt.failureMessage,
+        attemptedAt: attempt.attemptedAt,
+        metadata: { legacyPaymentAttemptId: attempt.id },
+      },
+    })
+  }
+
+  await tx.subscriptionInvoice.update({
+    where: { id: legacy.id },
+    data: { billingInvoiceId: billingInvoice.id },
+  })
+
+  await createBillingEvent(tx, {
+    billingAccountId: account.id,
+    invoiceId: billingInvoice.id,
+    subscriptionId: legacy.subscriptionId,
+    companyId: legacy.companyId,
+    eventType: 'invoice.created',
+    source: 'legacy_sync',
+    payload: { legacySubscriptionInvoiceId: legacy.id, status },
+  })
+}
+
+async function syncLegacySubscriptionInvoices(companyId?: string) {
+  const unsynced = await prisma.subscriptionInvoice.findMany({
+    where: {
+      billingInvoiceId: null,
+      ...(companyId ? { companyId } : {}),
+    },
+    include: {
+      subscription: true,
+      attempts: true,
+    },
+    orderBy: { createdAt: 'asc' },
+    take: companyId ? 100 : 250,
+  })
+
+  for (const legacy of unsynced) {
+    await prisma.$transaction(async (tx: any) => {
+      const latest = await tx.subscriptionInvoice.findUnique({
+        where: { id: legacy.id },
+        include: { subscription: true, attempts: true },
+      })
+      if (!latest || latest.billingInvoiceId) return
+      await syncOneLegacyInvoice(tx, latest)
+    })
+  }
+}
+
+function buildBillingAccountWhere(query: { q?: string; status?: string; plan?: string }) {
+  const where: any = {}
+  if (query.q) {
+    where.OR = [
+      { legalName: { contains: query.q, mode: 'insensitive' } },
+      { billingEmail: { contains: query.q, mode: 'insensitive' } },
+      { company: { name: { contains: query.q, mode: 'insensitive' } } },
+      { company: { email: { contains: query.q, mode: 'insensitive' } } },
+      { company: { slug: { contains: query.q, mode: 'insensitive' } } },
+    ]
+  }
+  if (query.status || query.plan) {
+    where.company = {
+      subscription: {
+        ...(query.status ? { status: query.status } : {}),
+        ...(query.plan ? { plan: query.plan } : {}),
+      },
+    }
+  }
+  return where
+}
+
+export async function listBillingAccounts(query: { q?: string; status?: string; plan?: string; page: number; pageSize: number }) {
+  await syncLegacySubscriptionInvoices()
+
+  const matchingCompanies = await prisma.company.findMany({
+    where: {
+      ...(query.q
+        ? {
+            OR: [
+              { name: { contains: query.q, mode: 'insensitive' } },
+              { email: { contains: query.q, mode: 'insensitive' } },
+              { slug: { contains: query.q, mode: 'insensitive' } },
+            ],
+          }
+        : {}),
+      ...(query.status || query.plan
+        ? {
+            subscription: {
+              ...(query.status ? { status: query.status as any } : {}),
+              ...(query.plan ? { plan: query.plan as any } : {}),
+            },
+          }
+        : {}),
+    },
+    select: { id: true },
+    take: 250,
+  })
+
+  for (const company of matchingCompanies) {
+    await ensurePrimaryBillingAccount(company.id)
+  }
+
+  const where = buildBillingAccountWhere(query)
+  const [accounts, total, invoiceAgg] = await Promise.all([
+    prisma.billingAccount.findMany({
+      where,
+      include: {
+        company: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            slug: true,
+            status: true,
+            subscription: {
+              select: {
+                id: true,
+                plan: true,
+                billingPeriod: true,
+                status: true,
+                currentPeriodEnd: true,
+                cancelAtPeriodEnd: true,
+              },
+            },
+          },
+        },
+        creditBalances: true,
+        invoices: {
+          orderBy: { createdAt: 'desc' },
+          take: 5,
+          select: {
+            id: true,
+            invoiceNumber: true,
+            invoiceType: true,
+            status: true,
+            totalAmount: true,
+            amountDue: true,
+            amountPaid: true,
+            currency: true,
+            dueAt: true,
+            paidAt: true,
+            createdAt: true,
+          },
+        },
+      },
+      orderBy: { createdAt: 'desc' },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+    }),
+    prisma.billingAccount.count({ where }),
+    prisma.billingInvoice.groupBy({
+      by: ['status'],
+      _sum: { amountDue: true, totalAmount: true },
+      _count: { _all: true },
+    }),
+  ])
+
+  const invoiceAggItems = invoiceAgg as any[]
+
+  const stats = {
+    billingAccountCount: total,
+    openInvoiceCount: invoiceAggItems
+      .filter((item) => ['OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(item.status))
+      .reduce((sum, item) => sum + item._count._all, 0),
+    pastDueInvoiceCount: invoiceAggItems
+      .filter((item) => item.status === 'PAST_DUE')
+      .reduce((sum, item) => sum + item._count._all, 0),
+    paidInvoiceCount: invoiceAggItems
+      .filter((item) => item.status === 'PAID')
+      .reduce((sum, item) => sum + item._count._all, 0),
+    accountsReceivableTotal: invoiceAggItems
+      .filter((item) => ['OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(item.status))
+      .reduce((sum, item) => sum + (item._sum.amountDue ?? 0), 0),
+    recognizedRevenueTotal: invoiceAggItems
+      .filter((item) => ['PAID', 'PARTIALLY_REFUNDED', 'REFUNDED'].includes(item.status))
+      .reduce((sum, item) => sum + (item._sum.totalAmount ?? 0), 0),
+  }
+
+  const data = (accounts as any[]).map((account) => {
+    const openBalance = (account.invoices as any[])
+      .filter((invoice: any) => ['OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(invoice.status))
+      .reduce((sum: number, invoice: any) => sum + invoice.amountDue, 0)
+    const paidBalance = (account.invoices as any[])
+      .filter((invoice: any) => ['PAID', 'PARTIALLY_REFUNDED', 'REFUNDED'].includes(invoice.status))
+      .reduce((sum: number, invoice: any) => sum + invoice.amountPaid, 0)
+    return {
+      ...account,
+      openBalance,
+      paidBalance,
+      creditBalance: (account.creditBalances as any[]).reduce((sum: number, item: any) => sum + item.balanceAmount, 0),
+    }
+  })
+
+  return { data, total, stats }
+}
+
+export async function getBillingAccountDetail(companyId: string) {
+  await syncLegacySubscriptionInvoices(companyId)
+  await ensurePrimaryBillingAccount(companyId)
+
+  const account = await prisma.billingAccount.findFirst({
+    where: { companyId, isPrimary: true },
+    include: {
+      company: {
+        include: {
+          subscription: true,
+          contractSettings: true,
+          accountingSettings: true,
+        },
+      },
+      paymentMethods: true,
+      creditBalances: true,
+      creditLedgerEntries: {
+        orderBy: { createdAt: 'desc' },
+        take: 50,
+      },
+      events: {
+        orderBy: { createdAt: 'desc' },
+        take: 50,
+      },
+      invoices: {
+        orderBy: { createdAt: 'desc' },
+        take: 50,
+        include: {
+          lineItems: { orderBy: { createdAt: 'asc' } },
+          paymentIntents: { orderBy: { createdAt: 'desc' } },
+          paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+          taxRecords: true,
+          creditNotes: { orderBy: { createdAt: 'desc' } },
+          refunds: { orderBy: { createdAt: 'desc' } },
+        },
+      },
+    },
+  })
+
+  if (!account) throw new NotFoundError('Billing account not found')
+  return account
+}
+
+export async function updateBillingAccount(
+  billingAccountId: string,
+  data: {
+    legalName?: string
+    billingEmail?: string
+    billingAddress?: any
+    taxId?: string | null
+    taxExempt?: boolean
+    invoiceTerms?: string
+    netTermsDays?: number
+  },
+  adminId: string,
+  ip?: string,
+) {
+  const before = await prisma.billingAccount.findUniqueOrThrow({ where: { id: billingAccountId } })
+  const updated = await prisma.billingAccount.update({
+    where: { id: billingAccountId },
+    data: {
+      ...(data.legalName !== undefined ? { legalName: data.legalName } : {}),
+      ...(data.billingEmail !== undefined ? { billingEmail: data.billingEmail } : {}),
+      ...(data.billingAddress !== undefined ? { billingAddress: normalizeAddress(data.billingAddress) } : {}),
+      ...(data.taxId !== undefined ? { taxId: data.taxId } : {}),
+      ...(data.taxExempt !== undefined ? { taxExempt: data.taxExempt } : {}),
+      ...(data.invoiceTerms !== undefined ? { invoiceTerms: data.invoiceTerms as any } : {}),
+      ...(data.netTermsDays !== undefined ? { netTermsDays: data.netTermsDays } : {}),
+    },
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'UPDATE_BILLING_ACCOUNT',
+    resource: 'BillingAccount',
+    resourceId: billingAccountId,
+    companyId: before.companyId,
+    before,
+    after: updated,
+    ipAddress: ip,
+  })
+
+  await prisma.billingEvent.create({
+    data: {
+      billingAccountId,
+      companyId: before.companyId,
+      eventType: 'billing_account.updated',
+      source: 'admin',
+      payload: data as any,
+      occurredAt: new Date(),
+    },
+  })
+
+  return updated
+}
+
+export async function setDunningPaused(
+  billingAccountId: string,
+  paused: boolean,
+  adminId: string,
+  ip?: string,
+) {
+  const account = await prisma.billingAccount.findUniqueOrThrow({ where: { id: billingAccountId } })
+  const updated = await prisma.billingAccount.update({
+    where: { id: billingAccountId },
+    data: {
+      dunningPaused: paused,
+      dunningPausedAt: paused ? new Date() : null,
+      dunningPausedBy: paused ? adminId : null,
+    },
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: paused ? 'PAUSE_DUNNING' : 'RESUME_DUNNING',
+    resource: 'BillingAccount',
+    resourceId: billingAccountId,
+    companyId: account.companyId,
+    after: { dunningPaused: paused },
+    ipAddress: ip,
+  })
+
+  await prisma.billingEvent.create({
+    data: {
+      billingAccountId,
+      companyId: account.companyId,
+      eventType: paused ? 'dunning.paused' : 'dunning.resumed',
+      source: 'admin',
+      payload: { pausedBy: adminId },
+      occurredAt: new Date(),
+    },
+  })
+
+  return updated
+}
+
+export async function createDraftInvoice(
+  billingAccountId: string,
+  data: {
+    subscriptionId?: string | null
+    invoiceType: string
+    currency?: string
+    dueAt?: string | null
+    isSubscriptionBlocking?: boolean
+    adminReason?: string | null
+    lineItems: Array<{
+      type: string
+      description: string
+      quantity: number
+      unitAmount: number
+      periodStart?: string | null
+      periodEnd?: string | null
+    }>
+  },
+  adminId: string,
+  ip?: string,
+) {
+  if (!data.lineItems.length) throw new ValidationError('Invoice requires at least one line item')
+
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const account = await tx.billingAccount.findUniqueOrThrow({
+      where: { id: billingAccountId },
+      include: { company: true },
+    })
+
+    const created = await tx.billingInvoice.create({
+      data: {
+        billingAccountId,
+        companyId: account.companyId,
+        subscriptionId: data.subscriptionId ?? null,
+        invoiceType: data.invoiceType as any,
+        status: 'DRAFT',
+        currency: data.currency ?? account.defaultCurrency,
+        dueAt: data.dueAt ? new Date(data.dueAt) : null,
+        isSubscriptionBlocking: data.isSubscriptionBlocking ?? isBlockingInvoiceType(data.invoiceType),
+        adminReason: data.adminReason ?? null,
+        createdByAdminId: adminId,
+        billingName: account.legalName,
+        billingEmail: account.billingEmail,
+        billingAddress: normalizeAddress(account.billingAddress) ?? undefined,
+        metadata: {},
+        lineItems: {
+          create: data.lineItems.map((item) => ({
+            type: item.type as any,
+            description: item.description,
+            quantity: item.quantity,
+            unitAmount: item.unitAmount,
+            amount: item.quantity * item.unitAmount,
+            currency: data.currency ?? account.defaultCurrency,
+            periodStart: item.periodStart ? new Date(item.periodStart) : null,
+            periodEnd: item.periodEnd ? new Date(item.periodEnd) : null,
+          })),
+        },
+      },
+      include: { lineItems: true },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId,
+      invoiceId: created.id,
+      subscriptionId: created.subscriptionId,
+      companyId: account.companyId,
+      eventType: 'invoice.created',
+      source: 'admin',
+      payload: { invoiceType: created.invoiceType, lineItemCount: data.lineItems.length },
+    })
+
+    return created
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'CREATE_BILLING_INVOICE',
+    resource: 'BillingInvoice',
+    resourceId: invoice.id,
+    companyId: invoice.companyId,
+    after: invoice,
+    note: data.adminReason ?? undefined,
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function finalizeInvoice(invoiceId: string, adminId: string, ip?: string) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUnique({
+      where: { id: invoiceId },
+      include: {
+        billingAccount: {
+          include: {
+            company: { include: { contractSettings: true } },
+            creditBalances: true,
+          },
+        },
+        lineItems: true,
+      },
+    })
+
+    if (!current) throw new NotFoundError('Invoice not found')
+    if (current.status !== 'DRAFT') throw new ValidationError('Only draft invoices can be finalized')
+    if (!current.lineItems.length) throw new ValidationError('Invoice requires at least one line item')
+
+    const account = current.billingAccount
+    const currency = current.currency || account.defaultCurrency
+    const existingCreditAmount = Math.abs(
+      current.lineItems.filter((item: any) => item.type === 'CREDIT').reduce((sum: number, item: any) => sum + item.amount, 0),
+    )
+    const { subtotalAmount, discountAmount } = calculateLineAmounts(current.lineItems)
+    const availableBalance = account.creditBalances.find((balance: any) => balance.currency === currency)?.balanceAmount ?? 0
+    const preTaxBase = Math.max(subtotalAmount - discountAmount - existingCreditAmount, 0)
+    const autoCreditToApply = Math.min(availableBalance, preTaxBase)
+
+    if (autoCreditToApply > 0) {
+      await tx.billingInvoiceLineItem.create({
+        data: {
+          invoiceId: current.id,
+          type: 'CREDIT',
+          description: 'Account credit applied',
+          quantity: 1,
+          unitAmount: -autoCreditToApply,
+          amount: -autoCreditToApply,
+          currency,
+          metadata: { autoApplied: true },
+        },
+      })
+
+      await tx.billingCreditBalance.update({
+        where: {
+          billingAccountId_currency: {
+            billingAccountId: account.id,
+            currency,
+          },
+        },
+        data: {
+          balanceAmount: { decrement: autoCreditToApply },
+        },
+      })
+
+      await tx.billingCreditLedgerEntry.create({
+        data: {
+          billingAccountId: account.id,
+          invoiceId: current.id,
+          type: 'applied',
+          amount: -autoCreditToApply,
+          currency,
+          reason: 'Applied automatically on invoice finalization',
+          createdBy: adminId,
+        },
+      })
+    }
+
+    const taxRate = account.taxExempt ? 0 : Number(account.company.contractSettings?.taxRate ?? 0)
+    const taxBase = Math.max(preTaxBase - autoCreditToApply, 0)
+    const taxAmount = taxRate > 0 ? Math.round(taxBase * (taxRate / 100)) : 0
+
+    if (taxAmount > 0) {
+      await tx.billingInvoiceLineItem.create({
+        data: {
+          invoiceId: current.id,
+          type: 'TAX',
+          description: `Tax (${taxRate}%)`,
+          quantity: 1,
+          unitAmount: taxAmount,
+          amount: taxAmount,
+          currency,
+        },
+      })
+
+      await tx.billingTaxRecord.create({
+        data: {
+          invoiceId: current.id,
+          taxRate,
+          taxAmount,
+          taxType: 'VAT',
+          taxExempt: false,
+          metadata: {},
+        },
+      })
+    } else if (account.taxExempt) {
+      await tx.billingTaxRecord.create({
+        data: {
+          invoiceId: current.id,
+          taxRate: 0,
+          taxAmount: 0,
+          taxType: 'EXEMPT',
+          taxExempt: true,
+          exemptionReason: 'Billing account marked tax exempt',
+          metadata: {},
+        },
+      })
+    }
+
+    const finalLineItems = await tx.billingInvoiceLineItem.findMany({ where: { invoiceId: current.id } })
+    const amounts = calculateLineAmounts(finalLineItems)
+    const finalizedAt = new Date()
+    const sequence = await getNextInvoiceSequence(tx)
+    const invoiceNumber = buildSequentialInvoiceNumber(sequence, finalizedAt)
+    const dueAt = current.dueAt ?? addDays(finalizedAt, getInvoiceTermsDays(account.invoiceTerms, account.netTermsDays))
+    const status = amounts.totalAmount === 0 ? 'PAID' : 'OPEN'
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: current.id },
+      data: {
+        invoiceNumber,
+        invoiceSequence: sequence,
+        status,
+        subtotalAmount: amounts.subtotalAmount,
+        discountAmount: amounts.discountAmount,
+        creditAmount: amounts.creditAmount,
+        taxAmount: amounts.taxAmount,
+        totalAmount: amounts.totalAmount,
+        amountPaid: 0,
+        amountDue: amounts.totalAmount,
+        invoiceDate: finalizedAt,
+        dueAt,
+        finalizedAt,
+        paidAt: status === 'PAID' ? finalizedAt : null,
+        billingName: account.legalName,
+        billingEmail: account.billingEmail,
+        billingAddress: normalizeAddress(account.billingAddress) ?? undefined,
+      },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: account.id,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'invoice.finalized',
+      source: 'admin',
+      payload: { invoiceNumber, totalAmount: updated.totalAmount },
+    })
+
+    if (updated.status === 'PAID') {
+      await createBillingEvent(tx, {
+        billingAccountId: account.id,
+        invoiceId: updated.id,
+        subscriptionId: updated.subscriptionId,
+        companyId: updated.companyId,
+        eventType: 'invoice.paid',
+        source: 'system',
+        payload: { method: 'credit_balance' },
+      })
+      await maybeRestoreSubscription(tx, updated)
+    }
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'FINALIZE_BILLING_INVOICE',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    after: { status: invoice.status, invoiceNumber: invoice.invoiceNumber },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function payInvoice(
+  invoiceId: string,
+  data: {
+    amount?: number
+    paymentMethodId?: string | null
+    providerPaymentId?: string | null
+  },
+  adminId: string,
+  ip?: string,
+) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({
+      where: { id: invoiceId },
+      include: {
+        billingAccount: true,
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+      },
+    })
+
+    if (!['OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(current.status)) {
+      throw new ValidationError('Invoice is not payable in its current state')
+    }
+
+    const amount = data.amount ?? current.amountDue
+    if (amount <= 0 || amount > current.amountDue) {
+      throw new ValidationError('Payment amount must be greater than zero and no more than the invoice balance')
+    }
+
+    const intent = await tx.billingPaymentIntent.create({
+      data: {
+        invoiceId: current.id,
+        billingAccountId: current.billingAccountId,
+        paymentMethodId: data.paymentMethodId ?? null,
+        providerPaymentIntentId: data.providerPaymentId ?? null,
+        status: 'SUCCEEDED',
+        amount,
+        currency: current.currency,
+        metadata: { source: 'admin_manual_collection' },
+      },
+    })
+
+    await tx.billingPaymentAttempt.create({
+      data: {
+        invoiceId: current.id,
+        billingAccountId: current.billingAccountId,
+        paymentIntentId: intent.id,
+        paymentMethodId: data.paymentMethodId ?? null,
+        providerPaymentId: data.providerPaymentId ?? null,
+        status: 'SUCCEEDED',
+        amount,
+        currency: current.currency,
+        attemptedAt: new Date(),
+        metadata: { source: 'admin_manual_collection' },
+      },
+    })
+
+    const nextAmountPaid = current.amountPaid + amount
+    const nextAmountDue = Math.max(current.amountDue - amount, 0)
+    const nextStatus = nextAmountDue === 0 ? 'PAID' : 'PARTIALLY_PAID'
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: current.id },
+      data: {
+        amountPaid: nextAmountPaid,
+        amountDue: nextAmountDue,
+        status: nextStatus,
+        paidAt: nextAmountDue === 0 ? new Date() : current.paidAt,
+      },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: nextAmountDue === 0 ? 'invoice.paid' : 'invoice.partially_paid',
+      source: 'admin',
+      payload: { amount, amountPaid: nextAmountPaid, amountDue: nextAmountDue },
+    })
+
+    if (nextAmountDue === 0) {
+      await maybeRestoreSubscription(tx, updated)
+    }
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'PAY_BILLING_INVOICE',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    after: { amountPaid: invoice.amountPaid, amountDue: invoice.amountDue, status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function retryInvoicePayment(
+  invoiceId: string,
+  data: { paymentMethodId?: string | null },
+  adminId: string,
+  ip?: string,
+) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({
+      where: { id: invoiceId },
+      include: { billingAccount: true },
+    })
+
+    if (!['OPEN', 'PAST_DUE', 'PARTIALLY_PAID'].includes(current.status)) {
+      throw new ValidationError('Only open or overdue invoices can be retried')
+    }
+
+    const intent = await tx.billingPaymentIntent.create({
+      data: {
+        invoiceId: current.id,
+        billingAccountId: current.billingAccountId,
+        paymentMethodId: data.paymentMethodId ?? current.billingAccount.defaultPaymentMethodId ?? null,
+        status: 'PROCESSING',
+        amount: current.amountDue,
+        currency: current.currency,
+        metadata: { source: 'admin_retry' },
+      },
+    })
+
+    await tx.billingPaymentAttempt.create({
+      data: {
+        invoiceId: current.id,
+        billingAccountId: current.billingAccountId,
+        paymentIntentId: intent.id,
+        paymentMethodId: data.paymentMethodId ?? current.billingAccount.defaultPaymentMethodId ?? null,
+        status: 'PENDING',
+        amount: current.amountDue,
+        currency: current.currency,
+        attemptedAt: new Date(),
+        metadata: { source: 'admin_retry' },
+      },
+    })
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: current.id },
+      data: { status: 'PAYMENT_PENDING' },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'invoice.payment_started',
+      source: 'admin',
+      payload: { amountDue: updated.amountDue },
+    })
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'RETRY_BILLING_INVOICE_PAYMENT',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    after: { status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function voidInvoice(invoiceId: string, reason: string, adminId: string, ip?: string) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({ where: { id: invoiceId } })
+    if (!['DRAFT', 'OPEN', 'PAYMENT_PENDING', 'PAST_DUE', 'PARTIALLY_PAID'].includes(current.status)) {
+      throw new ValidationError('Only unpaid invoices can be voided')
+    }
+    if (current.amountPaid > 0) {
+      throw new ValidationError('Paid invoices cannot be voided through this workflow')
+    }
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: invoiceId },
+      data: {
+        status: 'VOID',
+        amountDue: 0,
+        voidedAt: new Date(),
+      },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'invoice.voided',
+      source: 'admin',
+      payload: { reason },
+    })
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'VOID_BILLING_INVOICE',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    note: reason,
+    after: { status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function markInvoiceUncollectible(invoiceId: string, reason: string, adminId: string, ip?: string) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({ where: { id: invoiceId } })
+    if (!['OPEN', 'PAST_DUE', 'PAYMENT_PENDING', 'PARTIALLY_PAID'].includes(current.status)) {
+      throw new ValidationError('Only open invoices can be marked uncollectible')
+    }
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: invoiceId },
+      data: {
+        status: 'UNCOLLECTIBLE',
+        markedUncollectibleAt: new Date(),
+      },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'invoice.marked_uncollectible',
+      source: 'admin',
+      payload: { reason },
+    })
+
+    await maybeCancelSubscriptionForWriteoff(tx, updated)
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'MARK_BILLING_INVOICE_UNCOLLECTIBLE',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    note: reason,
+    after: { status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function issueCreditNote(
+  invoiceId: string,
+  data: { amount: number; reason: string },
+  adminId: string,
+  ip?: string,
+) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({
+      where: { id: invoiceId },
+      include: { creditNotes: true },
+    })
+    if (!EDITABLE_BILLING_STATUSES.has(current.status)) {
+      throw new ValidationError('Credit notes can only be issued against active receivable invoices')
+    }
+    if (data.amount <= 0 || data.amount > current.amountDue) {
+      throw new ValidationError('Credit note amount must be positive and no more than the outstanding balance')
+    }
+
+    await tx.billingCreditNote.create({
+      data: {
+        invoiceId,
+        billingAccountId: current.billingAccountId,
+        amount: data.amount,
+        currency: current.currency,
+        reason: data.reason,
+        status: 'APPLIED',
+        createdBy: adminId,
+      },
+    })
+
+    const nextTotalAmount = Math.max(current.totalAmount - data.amount, 0)
+    const nextAmountDue = Math.max(current.amountDue - data.amount, 0)
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: invoiceId },
+      data: {
+        creditAmount: current.creditAmount + data.amount,
+        totalAmount: nextTotalAmount,
+        amountDue: nextAmountDue,
+        status: nextAmountDue === 0 ? 'PAID' : current.status,
+        paidAt: nextAmountDue === 0 ? new Date() : current.paidAt,
+      },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: { orderBy: { createdAt: 'desc' } },
+        refunds: true,
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'credit.applied',
+      source: 'admin',
+      payload: { amount: data.amount, reason: data.reason },
+    })
+
+    if (nextAmountDue === 0) {
+      await maybeRestoreSubscription(tx, updated)
+    }
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'ISSUE_BILLING_CREDIT_NOTE',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    note: data.reason,
+    after: { creditAmount: invoice.creditAmount, amountDue: invoice.amountDue, status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function issueRefund(
+  invoiceId: string,
+  data: { amount: number; reason: string },
+  adminId: string,
+  ip?: string,
+) {
+  const invoice = await prisma.$transaction(async (tx: any) => {
+    const current = await tx.billingInvoice.findUniqueOrThrow({
+      where: { id: invoiceId },
+      include: {
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        refunds: true,
+      },
+    })
+    if (!['PAID', 'PARTIALLY_REFUNDED', 'REFUNDED'].includes(current.status)) {
+      throw new ValidationError('Only paid invoices can be refunded')
+    }
+
+    const refundedSoFar = current.refunds
+      .filter((refund: any) => refund.status === 'SUCCEEDED')
+      .reduce((sum: number, refund: any) => sum + refund.amount, 0)
+    const refundableAmount = Math.max(current.totalAmount - refundedSoFar, 0)
+    if (data.amount <= 0 || data.amount > refundableAmount) {
+      throw new ValidationError('Refund amount must be positive and within the refundable amount')
+    }
+
+    const latestSuccessfulAttempt = current.paymentAttempts.find((attempt: any) => attempt.status === 'SUCCEEDED') ?? null
+
+    await tx.billingRefund.create({
+      data: {
+        invoiceId,
+        paymentAttemptId: latestSuccessfulAttempt?.id ?? null,
+        billingAccountId: current.billingAccountId,
+        amount: data.amount,
+        currency: current.currency,
+        reason: data.reason,
+        status: 'SUCCEEDED',
+        createdBy: adminId,
+      },
+    })
+
+    const totalRefunded = refundedSoFar + data.amount
+    const nextStatus = totalRefunded >= current.totalAmount ? 'REFUNDED' : 'PARTIALLY_REFUNDED'
+
+    const updated = await tx.billingInvoice.update({
+      where: { id: invoiceId },
+      data: { status: nextStatus },
+      include: {
+        lineItems: { orderBy: { createdAt: 'asc' } },
+        paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+        taxRecords: true,
+        creditNotes: true,
+        refunds: { orderBy: { createdAt: 'desc' } },
+      },
+    })
+
+    await createBillingEvent(tx, {
+      billingAccountId: updated.billingAccountId,
+      invoiceId: updated.id,
+      subscriptionId: updated.subscriptionId,
+      companyId: updated.companyId,
+      eventType: 'refund.succeeded',
+      source: 'admin',
+      payload: { amount: data.amount, reason: data.reason },
+    })
+
+    return updated
+  })
+
+  await createAuditLog({
+    adminUserId: adminId,
+    action: 'ISSUE_BILLING_REFUND',
+    resource: 'BillingInvoice',
+    resourceId: invoiceId,
+    companyId: invoice.companyId,
+    note: data.reason,
+    after: { status: invoice.status },
+    ipAddress: ip,
+  })
+
+  return invoice
+}
+
+export async function getInvoicePdf(invoiceId: string) {
+  await syncLegacySubscriptionInvoices()
+
+  const invoice = await prisma.billingInvoice.findUnique({
+    where: { id: invoiceId },
+    include: {
+      company: true,
+      subscription: true,
+      lineItems: { orderBy: { createdAt: 'asc' } },
+      paymentAttempts: { orderBy: { attemptedAt: 'desc' } },
+      taxRecords: true,
+      creditNotes: { orderBy: { createdAt: 'desc' } },
+      refunds: { orderBy: { createdAt: 'desc' } },
+    },
+  })
+  if (!invoice) throw new NotFoundError('Invoice not found')
+  if (!invoice.invoiceNumber) throw new ValidationError('Invoice must be finalized before a PDF can be generated')
+
+  const latestPaymentAttempt = invoice.paymentAttempts.find((attempt: any) => attempt.status === 'SUCCEEDED') ?? invoice.paymentAttempts[0] ?? null
+  const pdfBuffer = await generateInvoicePdf({
+    invoiceNumber: invoice.invoiceNumber,
+    issueDate: invoice.invoiceDate?.toISOString() ?? invoice.createdAt.toISOString(),
+    dueDate: invoice.dueAt?.toISOString() ?? null,
+    company: {
+      name: invoice.billingName ?? invoice.company.name,
+      email: invoice.billingEmail ?? invoice.company.email,
+      phone: invoice.company.phone,
+      address: invoice.billingAddress ?? invoice.company.address,
+    },
+    subscription: invoice.subscription
+      ? {
+          plan: invoice.subscription.plan,
+          billingPeriod: invoice.subscription.billingPeriod,
+          currentPeriodStart: invoice.subscription.currentPeriodStart?.toISOString(),
+          currentPeriodEnd: invoice.subscription.currentPeriodEnd?.toISOString(),
+          currency: invoice.subscription.currency,
+        }
+      : undefined,
+    amount: invoice.totalAmount,
+    currency: invoice.currency,
+    status: invoice.status,
+    paymentProvider: invoice.paymentProvider ?? 'MANUAL',
+    transactionId: latestPaymentAttempt?.providerPaymentId ?? null,
+    paidAt: invoice.paidAt?.toISOString(),
+    lineItems: invoice.lineItems.map((item: any) => ({
+      description: item.description,
+      amount: item.amount,
+      currency: item.currency,
+      quantity: item.quantity,
+      unitAmount: item.unitAmount,
+      periodStart: item.periodStart?.toISOString() ?? null,
+      periodEnd: item.periodEnd?.toISOString() ?? null,
+    })),
+    totals: {
+      subtotalAmount: invoice.subtotalAmount,
+      discountAmount: invoice.discountAmount,
+      creditAmount: invoice.creditAmount,
+      taxAmount: invoice.taxAmount,
+      totalAmount: invoice.totalAmount,
+      amountPaid: invoice.amountPaid,
+      amountDue: invoice.amountDue,
+    },
+  })
+
+  return { pdfBuffer, invoiceNumber: invoice.invoiceNumber }
+}
diff --git a/api/src/modules/admin/admin.menu.schemas.test.ts b/api/src/modules/admin/admin.menu.schemas.test.ts
new file mode 100644
index 0000000..1ff0d44
--- /dev/null
+++ b/api/src/modules/admin/admin.menu.schemas.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+import {
+  menuItemSchema,
+  menuPlanAssignmentsSchema,
+  menuCompanyAssignmentsSchema,
+  menuPreviewSchema,
+  promotionCreateSchema,
+  promotionUpdateSchema,
+} from './admin.schemas'
+
+describe('admin menu and promotion schemas', () => {
+  it('trims labels and applies safe menu item defaults', () => {
+    expect(menuItemSchema.parse({ label: ' Fleet ', itemType: 'INTERNAL_PAGE' })).toMatchObject({
+      label: 'Fleet',
+      itemType: 'INTERNAL_PAGE',
+      displayOrder: 0,
+      openInNewTab: false,
+      isRequired: false,
+      isActive: true,
+      roles: [],
+      subscriptionPlans: [],
+      companyAssignments: [],
+    })
+  })
+
+  it('rejects negative menu ordering and invalid role previews', () => {
+    expect(() => menuItemSchema.parse({ label: 'Fleet', itemType: 'INTERNAL_PAGE', displayOrder: -1 })).toThrow()
+    expect(() => menuPreviewSchema.parse({ companyId: 'company_1', role: 'SUPER_ADMIN' })).toThrow()
+  })
+
+  it('requires at least one plan or company assignment', () => {
+    expect(() => menuPlanAssignmentsSchema.parse({ assignments: [] })).toThrow()
+    expect(() => menuCompanyAssignmentsSchema.parse({ assignments: [] })).toThrow()
+    expect(menuPlanAssignmentsSchema.parse({ assignments: [{ plan: 'PRO' }] })).toEqual({ assignments: [{ plan: 'PRO' }] })
+  })
+
+  it('accepts only uppercase promotion codes and preserves update partiality', () => {
+    const valid = {
+      code: 'SUMMER_26',
+      name: 'Summer 2026',
+      discountType: 'PERCENTAGE',
+      discountValue: 20,
+      plans: ['STARTER', 'GROWTH'],
+      periods: ['MONTHLY'],
+      validFrom: '2026-07-01T00:00:00.000Z',
+    }
+
+    expect(promotionCreateSchema.parse(valid)).toMatchObject({ ...valid, isActive: true })
+    expect(() => promotionCreateSchema.parse({ ...valid, code: 'summer' })).toThrow()
+    expect(promotionUpdateSchema.parse({ name: 'Updated name' })).toEqual({ name: 'Updated name' })
+  })
+})
diff --git a/api/src/modules/admin/admin.presenter.test.ts b/api/src/modules/admin/admin.presenter.test.ts
new file mode 100644
index 0000000..894e35e
--- /dev/null
+++ b/api/src/modules/admin/admin.presenter.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { presentAdminSession, presentAdminUser, presentPaginated } from './admin.presenter'
+
+describe('admin.presenter', () => {
+  it('removes admin secrets from user responses', () => {
+    const result = presentAdminUser({
+      id: 'admin_1',
+      email: 'admin@example.com',
+      role: 'SUPER_ADMIN',
+      passwordHash: 'hash',
+      totpSecret: 'secret',
+    })
+
+    expect(result).toEqual({ id: 'admin_1', email: 'admin@example.com', role: 'SUPER_ADMIN' })
+  })
+
+  it('wraps sessions without leaking credentials', () => {
+    expect(presentAdminSession({ id: 'admin_1', passwordHash: 'hash', totpSecret: 'secret' }, 'jwt-token')).toEqual({
+      token: 'jwt-token',
+      admin: { id: 'admin_1' },
+    })
+  })
+
+  it('computes pagination metadata and preserves extra aggregate fields', () => {
+    expect(presentPaginated([{ id: 'row_1' }], 41, 2, 20, { active: 11 })).toEqual({
+      data: [{ id: 'row_1' }],
+      total: 41,
+      page: 2,
+      pageSize: 20,
+      totalPages: 3,
+      active: 11,
+    })
+  })
+})
diff --git a/api/src/modules/admin/admin.presenter.ts b/api/src/modules/admin/admin.presenter.ts
new file mode 100644
index 0000000..f9d6e0d
--- /dev/null
+++ b/api/src/modules/admin/admin.presenter.ts
@@ -0,0 +1,28 @@
+export function presentAdminUser<T extends Record<string, any>>(admin: T) {
+  const { passwordHash, totpSecret, ...safe } = admin
+  return safe
+}
+
+export function presentAdminSession<T extends Record<string, any>>(admin: T, token: string) {
+  return {
+    token,
+    admin: presentAdminUser(admin),
+  }
+}
+
+export function presentPaginated<T>(
+  data: T[],
+  total: number,
+  page: number,
+  pageSize: number,
+  extra: Record<string, unknown> = {},
+) {
+  return {
+    data,
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize),
+    ...extra,
+  }
+}
diff --git a/api/src/modules/admin/admin.repo.edge.test.ts b/api/src/modules/admin/admin.repo.edge.test.ts
new file mode 100644
index 0000000..3be66e5
--- /dev/null
+++ b/api/src/modules/admin/admin.repo.edge.test.ts
@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    adminUser: { findFirst: vi.fn(), findUniqueOrThrow: vi.fn(), update: vi.fn() },
+    auditLog: { create: vi.fn() },
+    company: { findMany: vi.fn(), count: vi.fn(), findUniqueOrThrow: vi.fn(), update: vi.fn(), delete: vi.fn() },
+    billingAccount: { findMany: vi.fn(), count: vi.fn() },
+    $transaction: vi.fn(),
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './admin.repo'
+
+describe('admin.repo edge queries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('clears reset token metadata when updating an admin password', async () => {
+    await repo.updateAdminPassword('admin_1', 'hash_1')
+
+    expect(prisma.adminUser.update).toHaveBeenCalledWith({
+      where: { id: 'admin_1' },
+      data: {
+        passwordHash: 'hash_1',
+        passwordResetToken: null,
+        passwordResetExpiresAt: null,
+      },
+    })
+  })
+
+  it('filters company list by search, status and plan with pagination', async () => {
+    vi.mocked(prisma.company.findMany).mockResolvedValue([] as never)
+    vi.mocked(prisma.company.count).mockResolvedValue(0 as never)
+
+    await repo.listCompaniesPage({ q: 'atlas', status: 'ACTIVE', plan: 'PRO', page: 3, pageSize: 25 })
+
+    const where = {
+      status: 'ACTIVE',
+      OR: [
+        { name: { contains: 'atlas', mode: 'insensitive' } },
+        { email: { contains: 'atlas', mode: 'insensitive' } },
+        { slug: { contains: 'atlas', mode: 'insensitive' } },
+      ],
+      subscription: { plan: 'PRO' },
+    }
+
+    expect(prisma.company.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where,
+      skip: 50,
+      take: 25,
+      orderBy: { createdAt: 'desc' },
+    }))
+    expect(prisma.company.count).toHaveBeenCalledWith({ where })
+  })
+
+  it('looks up reset tokens only when they have not expired', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-01T00:00:00.000Z'))
+
+    await repo.findAdminByResetToken('reset-token')
+
+    expect(prisma.adminUser.findFirst).toHaveBeenCalledWith({
+      where: {
+        passwordResetToken: 'reset-token',
+        passwordResetExpiresAt: { gt: new Date('2026-06-01T00:00:00.000Z') },
+      },
+    })
+
+    vi.useRealTimers()
+  })
+})
diff --git a/api/src/modules/admin/admin.repo.test.ts b/api/src/modules/admin/admin.repo.test.ts
new file mode 100644
index 0000000..d2bea7a
--- /dev/null
+++ b/api/src/modules/admin/admin.repo.test.ts
@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    adminUser: {
+      findFirst: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import { findAdminByEmail } from './admin.repo'
+
+describe('admin.repo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('looks up admin email case-insensitively', async () => {
+    await findAdminByEmail('Admin@Example.com')
+
+    expect(prisma.adminUser.findFirst).toHaveBeenCalledWith({
+      where: {
+        email: {
+          equals: 'Admin@Example.com',
+          mode: 'insensitive',
+        },
+      },
+    })
+  })
+})
diff --git a/api/src/modules/admin/admin.repo.ts b/api/src/modules/admin/admin.repo.ts
new file mode 100644
index 0000000..a815a7c
--- /dev/null
+++ b/api/src/modules/admin/admin.repo.ts
@@ -0,0 +1,581 @@
+import { prisma } from '../../lib/prisma'
+
+const companyListInclude = {
+  brand: { select: { displayName: true, logoUrl: true, subdomain: true } },
+  contractSettings: { select: { legalName: true } },
+  subscription: { select: { plan: true, status: true } },
+  _count: { select: { employees: true, vehicles: true } },
+} as const
+
+const companyDetailInclude = {
+  brand: true,
+  contractSettings: true,
+  accountingSettings: true,
+  subscription: { include: { invoices: { orderBy: { createdAt: 'desc' }, take: 10 } } },
+  employees: true,
+  _count: { select: { employees: true, vehicles: true, customers: true, reservations: true } },
+} as const
+
+const billingInclude = {
+  company: { select: { id: true, name: true, email: true, slug: true, status: true } },
+  invoices: {
+    select: { id: true, amount: true, currency: true, status: true, paidAt: true, createdAt: true },
+    orderBy: { createdAt: 'desc' },
+    take: 5,
+  },
+  _count: { select: { invoices: true } },
+} as const
+
+function parseOptionalDate(value?: string | null) {
+  if (!value) return null
+  return new Date(value)
+}
+
+export function findAdminByEmail(email: string) {
+  return prisma.adminUser.findFirst({
+    where: {
+      email: {
+        equals: email,
+        mode: 'insensitive',
+      },
+    },
+  })
+}
+
+export function findAdminByIdOrThrow(id: string) {
+  return prisma.adminUser.findUniqueOrThrow({ where: { id } })
+}
+
+export function updateAdminLastLogin(id: string) {
+  return prisma.adminUser.update({ where: { id }, data: { lastLoginAt: new Date() } })
+}
+
+export function updateAdminTotpSecret(id: string, secret: string) {
+  return prisma.adminUser.update({ where: { id }, data: { totpSecret: secret } })
+}
+
+export function enableAdminTotp(id: string) {
+  return prisma.adminUser.update({ where: { id }, data: { totpEnabled: true } })
+}
+
+
+export async function replaceAdminRecoveryCodes(adminUserId: string, codeHashes: string[]) {
+  return prisma.$transaction(async (tx) => {
+    await tx.adminRecoveryCode.deleteMany({ where: { adminUserId } })
+    await tx.adminRecoveryCode.createMany({
+      data: codeHashes.map((codeHash) => ({ adminUserId, codeHash })),
+    })
+  })
+}
+
+export function listUnusedAdminRecoveryCodes(adminUserId: string) {
+  return prisma.adminRecoveryCode.findMany({
+    where: { adminUserId, usedAt: null },
+    select: { id: true, codeHash: true },
+    orderBy: { createdAt: 'asc' },
+  })
+}
+
+export function markAdminRecoveryCodeUsed(id: string) {
+  return prisma.adminRecoveryCode.update({ where: { id }, data: { usedAt: new Date() } })
+}
+
+export function setAdminPasswordReset(id: string, token: string, expiresAt: Date) {
+  return prisma.adminUser.update({
+    where: { id },
+    data: { passwordResetToken: token, passwordResetExpiresAt: expiresAt },
+  })
+}
+
+export function findAdminByResetToken(token: string) {
+  return prisma.adminUser.findFirst({
+    where: {
+      passwordResetToken: token,
+      passwordResetExpiresAt: { gt: new Date() },
+    },
+  })
+}
+
+export function updateAdminPassword(id: string, passwordHash: string) {
+  return prisma.adminUser.update({
+    where: { id },
+    data: {
+      passwordHash,
+      passwordResetToken: null,
+      passwordResetExpiresAt: null,
+    },
+  })
+}
+
+export function createAuditLog(data: Record<string, unknown>) {
+  return prisma.auditLog.create({ data: data as any })
+}
+
+export async function listCompaniesPage(query: { q?: string; status?: string; plan?: string; page: number; pageSize: number }) {
+  const where: any = {}
+  if (query.status) where.status = query.status
+  if (query.q) {
+    where.OR = [
+      { name: { contains: query.q, mode: 'insensitive' } },
+      { email: { contains: query.q, mode: 'insensitive' } },
+      { slug: { contains: query.q, mode: 'insensitive' } },
+    ]
+  }
+  if (query.plan) where.subscription = { plan: query.plan }
+
+  const [data, total] = await Promise.all([
+    prisma.company.findMany({
+      where,
+      include: companyListInclude,
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.company.count({ where }),
+  ])
+
+  return { data, total }
+}
+
+export function getCompanyDetail(id: string) {
+  return prisma.company.findUniqueOrThrow({ where: { id }, include: companyDetailInclude })
+}
+
+export function getCompanyUpdateSnapshot(id: string) {
+  return prisma.company.findUniqueOrThrow({
+    where: { id },
+    include: { brand: true, contractSettings: true, accountingSettings: true, subscription: true },
+  })
+}
+
+export async function applyCompanyUpdate(
+  id: string,
+  body: any,
+  current: {
+    name: string
+    slug: string
+    address?: unknown
+    brand?: { paymentMethodsEnabled?: any[] | null } | null
+  },
+) {
+  return prisma.$transaction(async (tx: any) => {
+    if (body.company) {
+      const companyData = { ...body.company }
+      if (companyData.address && typeof companyData.address === 'object' && !Array.isArray(companyData.address)) {
+        const baseAddress = current.address && typeof current.address === 'object' && !Array.isArray(current.address)
+          ? current.address as Record<string, unknown>
+          : {}
+        companyData.address = { ...baseAddress, ...companyData.address }
+      }
+      await tx.company.update({ where: { id }, data: companyData })
+    }
+
+    if (body.subscription) {
+      const sub = body.subscription
+      await tx.subscription.upsert({
+        where: { companyId: id },
+        update: {
+          ...sub,
+          trialStartAt: parseOptionalDate(sub.trialStartAt),
+          trialEndAt: parseOptionalDate(sub.trialEndAt),
+          currentPeriodStart: parseOptionalDate(sub.currentPeriodStart),
+          currentPeriodEnd: parseOptionalDate(sub.currentPeriodEnd),
+          cancelledAt: parseOptionalDate(sub.cancelledAt),
+        },
+        create: {
+          companyId: id,
+          plan: sub.plan ?? 'STARTER',
+          billingPeriod: sub.billingPeriod ?? 'MONTHLY',
+          status: sub.status ?? 'TRIALING',
+          currency: sub.currency ?? 'MAD',
+          trialStartAt: parseOptionalDate(sub.trialStartAt),
+          trialEndAt: parseOptionalDate(sub.trialEndAt),
+          currentPeriodStart: parseOptionalDate(sub.currentPeriodStart),
+          currentPeriodEnd: parseOptionalDate(sub.currentPeriodEnd),
+          cancelledAt: parseOptionalDate(sub.cancelledAt),
+          cancelAtPeriodEnd: sub.cancelAtPeriodEnd ?? false,
+        } as any,
+      })
+    }
+
+    if (body.brand) {
+      await tx.brandSettings.upsert({
+        where: { companyId: id },
+        update: body.brand,
+        create: {
+          companyId: id,
+          displayName: body.brand.displayName ?? current.name,
+          subdomain: body.brand.subdomain ?? current.slug,
+          paymentMethodsEnabled: current.brand?.paymentMethodsEnabled ?? [],
+          ...body.brand,
+        } as any,
+      })
+    }
+
+    if (body.contractSettings) {
+      await tx.contractSettings.upsert({
+        where: { companyId: id },
+        update: body.contractSettings,
+        create: { companyId: id, ...body.contractSettings } as any,
+      })
+    }
+
+    if (body.accountingSettings) {
+      await tx.accountingSettings.upsert({
+        where: { companyId: id },
+        update: body.accountingSettings,
+        create: { companyId: id, ...body.accountingSettings } as any,
+      })
+    }
+
+    return tx.company.findUniqueOrThrow({ where: { id }, include: companyDetailInclude })
+  })
+}
+
+export function updateCompanyStatus(id: string, status: string) {
+  return prisma.company.update({ where: { id }, data: { status: status as any } })
+}
+
+export function deleteCompany(id: string) {
+  return prisma.company.delete({ where: { id } })
+}
+
+export function getCompanyForImpersonation(id: string) {
+  return prisma.company.findUniqueOrThrow({
+    where: { id },
+    include: { employees: { where: { role: 'OWNER' } } },
+  })
+}
+
+export async function listRentersPage(query: { q?: string; blocked?: string; page: number; pageSize: number }) {
+  const where: any = {}
+  if (query.blocked !== undefined) where.isActive = query.blocked === 'false'
+  if (query.q) {
+    where.OR = [
+      { firstName: { contains: query.q, mode: 'insensitive' } },
+      { email: { contains: query.q, mode: 'insensitive' } },
+    ]
+  }
+
+  const [data, total] = await Promise.all([
+    prisma.renter.findMany({
+      where,
+      select: {
+        id: true,
+        firstName: true,
+        lastName: true,
+        email: true,
+        phone: true,
+        isActive: true,
+        createdAt: true,
+        _count: { select: { reservations: true } },
+      },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.renter.count({ where }),
+  ])
+
+  return { data, total }
+}
+
+export function updateRenterActive(id: string, isActive: boolean) {
+  return prisma.renter.update({ where: { id }, data: { isActive } })
+}
+
+export async function getPlatformMetricCounts() {
+  const [
+    totalCompanies,
+    activeCompanies,
+    trialingCompanies,
+    suspendedCompanies,
+    totalRenters,
+    totalReservations,
+  ] = await Promise.all([
+    prisma.company.count(),
+    prisma.company.count({ where: { status: 'ACTIVE' } }),
+    prisma.company.count({ where: { status: 'TRIALING' } }),
+    prisma.company.count({ where: { status: 'SUSPENDED' } }),
+    prisma.renter.count(),
+    prisma.reservation.count(),
+  ])
+
+  return {
+    totalCompanies,
+    activeCompanies,
+    trialingCompanies,
+    suspendedCompanies,
+    totalRenters,
+    totalReservations,
+  }
+}
+
+export async function listAuditLogsPage(query: { adminId?: string; action?: string; companyId?: string; entityId?: string; page: number; pageSize: number }) {
+  const where: any = {}
+  if (query.adminId) where.adminUserId = query.adminId
+  if (query.action) where.action = { contains: query.action }
+  if (query.companyId) where.companyId = query.companyId
+  if (query.entityId) where.resourceId = query.entityId
+
+  const [data, total] = await Promise.all([
+    prisma.auditLog.findMany({
+      where,
+      include: { adminUser: { select: { firstName: true, lastName: true, email: true } } },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.auditLog.count({ where }),
+  ])
+
+  return { data, total }
+}
+
+export function listAdmins() {
+  return prisma.adminUser.findMany({
+    include: { permissions: true },
+  })
+}
+
+export function createAdmin(data: {
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+  passwordHash: string
+  permissions?: any[]
+}) {
+  return prisma.adminUser.create({
+    data: {
+      email: data.email,
+      firstName: data.firstName,
+      lastName: data.lastName,
+      role: data.role as any,
+      passwordHash: data.passwordHash,
+      permissions: data.permissions ? { create: data.permissions } : undefined,
+    },
+    include: { permissions: true },
+  })
+}
+
+export function updateAdminRole(id: string, role: string) {
+  return prisma.adminUser.update({ where: { id }, data: { role: role as any } })
+}
+
+export function updateAdmin(
+  id: string,
+  data: {
+    email?: string
+    firstName?: string
+    lastName?: string
+    role?: string
+    passwordHash?: string
+    isActive?: boolean
+  },
+) {
+  return prisma.adminUser.update({
+    where: { id },
+    data: {
+      ...(data.email !== undefined ? { email: data.email } : {}),
+      ...(data.firstName !== undefined ? { firstName: data.firstName } : {}),
+      ...(data.lastName !== undefined ? { lastName: data.lastName } : {}),
+      ...(data.role !== undefined ? { role: data.role as any } : {}),
+      ...(data.passwordHash !== undefined ? { passwordHash: data.passwordHash } : {}),
+      ...(data.isActive !== undefined ? { isActive: data.isActive } : {}),
+    },
+    include: { permissions: true },
+  })
+}
+
+export async function replaceAdminPermissions(id: string, permissions: any[]) {
+  await prisma.adminUser.findUniqueOrThrow({ where: { id } })
+  await prisma.$transaction([
+    prisma.adminPermission.deleteMany({ where: { adminUserId: id } }),
+    prisma.adminPermission.createMany({
+      data: permissions.map((permission) => ({
+        adminUserId: id,
+        resource: permission.resource,
+        actions: permission.actions,
+      })) as any,
+    }),
+  ])
+  return prisma.adminUser.findUniqueOrThrow({ where: { id }, include: { permissions: true } })
+}
+
+export async function listBillingPage(query: { status?: string; plan?: string; page: number; pageSize: number }) {
+  const where: any = {}
+  if (query.status) where.status = query.status
+  if (query.plan) where.plan = query.plan
+
+  const [data, total] = await Promise.all([
+    prisma.subscription.findMany({
+      where,
+      include: billingInclude,
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.subscription.count({ where }),
+  ])
+
+  return { data, total }
+}
+
+export function listActiveSubscriptionsForMrr() {
+  return prisma.subscription.findMany({
+    where: { status: { in: ['ACTIVE', 'TRIALING'] as any[] } },
+    select: { plan: true, billingPeriod: true },
+  })
+}
+
+export async function getBillingStatusCounts() {
+  const [activeCount, trialingCount, pastDueCount, cancelledCount] = await Promise.all([
+    prisma.subscription.count({ where: { status: 'ACTIVE' } }),
+    prisma.subscription.count({ where: { status: 'TRIALING' } }),
+    prisma.subscription.count({ where: { status: 'PAST_DUE' } }),
+    prisma.subscription.count({ where: { status: 'CANCELLED' } }),
+  ])
+
+  return { activeCount, trialingCount, pastDueCount, cancelledCount }
+}
+
+export async function listCompanyInvoicesPage(companyId: string, query: { page: number; pageSize: number }) {
+  const [data, total] = await Promise.all([
+    prisma.subscriptionInvoice.findMany({
+      where: { companyId },
+      orderBy: { createdAt: 'desc' },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+    }),
+    prisma.subscriptionInvoice.count({ where: { companyId } }),
+  ])
+
+  return { data, total }
+}
+
+export function getInvoicePdfRecord(invoiceId: string) {
+  return prisma.subscriptionInvoice.findUniqueOrThrow({
+    where: { id: invoiceId },
+    include: {
+      company: { select: { name: true, email: true, phone: true, address: true } },
+      subscription: {
+        select: {
+          plan: true,
+          billingPeriod: true,
+          currency: true,
+          currentPeriodStart: true,
+          currentPeriodEnd: true,
+        },
+      },
+    },
+  })
+}
+
+export function listPricingConfigs() {
+  return prisma.pricingConfig.findMany({ orderBy: [{ plan: 'asc' }, { billingPeriod: 'asc' }] })
+}
+
+export function upsertPricingConfig(plan: string, billingPeriod: string, amount: number, updatedBy?: string) {
+  return prisma.pricingConfig.upsert({
+    where: { plan_billingPeriod: { plan, billingPeriod } },
+    update: { amount, updatedBy },
+    create: { id: `prc_${plan.toLowerCase()}_${billingPeriod.toLowerCase()}`, plan, billingPeriod, amount, updatedBy },
+  })
+}
+
+export function listPlanFeatures() {
+  return prisma.planFeature.findMany({
+    orderBy: [{ plan: 'asc' }, { sortOrder: 'asc' }, { createdAt: 'asc' }],
+  })
+}
+
+export function createPlanFeature(data: { plan: 'STARTER' | 'GROWTH' | 'PRO'; label: string; sortOrder?: number }) {
+  return prisma.planFeature.create({
+    data: {
+      plan: data.plan,
+      label: data.label,
+      sortOrder: data.sortOrder ?? 0,
+    },
+  })
+}
+
+export function updatePlanFeature(id: string, data: Partial<{ plan: 'STARTER' | 'GROWTH' | 'PRO'; label: string; sortOrder: number }>) {
+  return prisma.planFeature.update({
+    where: { id },
+    data,
+  })
+}
+
+export function deletePlanFeature(id: string) {
+  return prisma.planFeature.delete({ where: { id } })
+}
+
+// ─── Pricing promotions ────────────────────────────────────────────────────
+
+export function listPromotions() {
+  return (prisma as any).pricingPromotion.findMany({ orderBy: { createdAt: 'desc' } })
+}
+
+export function createPromotion(data: {
+  code: string; name: string; description?: string | null
+  discountType: string; discountValue: number
+  plans: string[]; periods: string[]
+  maxUses?: number | null; validFrom: string; validUntil?: string | null
+  isActive: boolean; createdBy?: string | null
+}) {
+  return (prisma as any).pricingPromotion.create({
+    data: {
+      ...data,
+      validFrom: new Date(data.validFrom),
+      validUntil: data.validUntil ? new Date(data.validUntil) : null,
+    },
+  })
+}
+
+export function updatePromotion(id: string, data: Partial<{
+  code: string; name: string; description: string | null
+  discountType: string; discountValue: number
+  plans: string[]; periods: string[]
+  maxUses: number | null; validFrom: string; validUntil: string | null
+  isActive: boolean
+}>) {
+  const { validFrom, validUntil, ...rest } = data
+  return (prisma as any).pricingPromotion.update({
+    where: { id },
+    data: {
+      ...rest,
+      ...(validFrom  ? { validFrom:  new Date(validFrom)  } : {}),
+      ...(validUntil !== undefined ? { validUntil: validUntil ? new Date(validUntil) : null } : {}),
+    },
+  })
+}
+
+export function deletePromotion(id: string) {
+  return (prisma as any).pricingPromotion.delete({ where: { id } })
+}
+
+export async function listNotificationsPage(query: {
+  channel?: string
+  status?: string
+  companyId?: string
+  page: number
+  pageSize: number
+}) {
+  const where: any = {}
+  if (query.channel)   where.channel   = query.channel
+  if (query.status)    where.status    = query.status
+  if (query.companyId) where.companyId = query.companyId
+
+  const [data, total] = await Promise.all([
+    prisma.notification.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      include: { company: { select: { name: true } } },
+    }),
+    prisma.notification.count({ where }),
+  ])
+  return { data, total }
+}
diff --git a/api/src/modules/admin/admin.routes.ts b/api/src/modules/admin/admin.routes.ts
new file mode 100644
index 0000000..a26bc4d
--- /dev/null
+++ b/api/src/modules/admin/admin.routes.ts
@@ -0,0 +1,575 @@
+import { Router } from 'express'
+import { requireAdminAuth, requireAdminRole, requireFreshAdmin2FA } from '../../middleware/requireAdminAuth'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { setSessionCookie, clearSessionCookie } from '../../security/sessionCookies'
+import * as service from './admin.service'
+import * as subService from '../subscriptions/subscription.service'
+import * as menuService from '../menu/menu.service'
+import { presentAdminUser } from './admin.presenter'
+import {
+  loginSchema, forgotPasswordSchema, resetPasswordSchema, totpVerifySchema,
+  companiesQuerySchema, rentersQuerySchema, auditLogQuerySchema, billingQuerySchema, notificationsQuerySchema,
+  invoicesQuerySchema, adminCompanyUpdateSchema, companyStatusSchema,
+  createAdminSchema, adminRoleSchema, adminPermissionsSchema,
+  updateAdminSchema,
+  homepageUpdateSchema, idParamSchema, companyIdParamSchema, billingAccountIdParamSchema, invoiceIdParamSchema,
+  pricingUpdateSchema, planFeatureCreateSchema, planFeatureUpdateSchema, planFeatureIdParamSchema,
+  promotionCreateSchema, promotionUpdateSchema, promotionIdParamSchema,
+  billingAccountUpdateSchema, createBillingInvoiceSchema, payBillingInvoiceSchema,
+  retryBillingInvoiceSchema, billingReasonSchema, billingCreditNoteSchema, billingRefundSchema,
+  menuItemSchema, menuItemStatusSchema, menuPlanAssignmentsSchema, menuCompanyAssignmentsSchema,
+  menuPreviewSchema, menuAuditLogQuerySchema, menuPlanParamSchema, menuCompanyParamSchema,
+} from './admin.schemas'
+import { z } from 'zod'
+
+const adminSubOverrideSchema = z.object({
+  reason: z.string().min(1).max(500),
+})
+const adminExtendTrialSchema = z.object({
+  extraDays: z.number().int().positive(),
+  reason:    z.string().min(1).max(500),
+})
+const adminImpersonationSchema = z.object({
+  reason: z.string().min(5).max(500),
+  durationMinutes: z.number().int().min(1).max(30).default(15),
+})
+const subIdParamSchema = z.object({ subscriptionId: z.string() })
+
+const router = Router()
+
+// ─── Auth (public) ─────────────────────────────────────────────
+
+router.post('/auth/login', async (req, res, next) => {
+  try {
+    const { email, password, totpCode, recoveryCode } = parseBody(loginSchema, req)
+    const result = await service.login(email, password, totpCode, recoveryCode)
+    if (!result)                        return res.status(401).json({ error: 'invalid_credentials', message: 'Invalid email or password', statusCode: 401 })
+    if ('totpRequired'  in result)      return res.status(401).json({ error: 'totp_required',       message: '2FA code required',           statusCode: 401 })
+    if ('invalidTotp'   in result)      return res.status(401).json({ error: 'invalid_totp',        message: 'Invalid 2FA code',            statusCode: 401 })
+    setSessionCookie(res, 'admin', result.token, 8 * 60 * 60 * 1000)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/auth/logout', (_req, res) => {
+  clearSessionCookie(res, 'admin')
+  ok(res, { success: true })
+})
+
+router.post('/auth/forgot-password', async (req, res, next) => {
+  try {
+    const { email } = parseBody(forgotPasswordSchema, req)
+    await service.forgotPassword(email)
+    ok(res, { message: 'If that email is registered, a reset link has been sent.' })
+  } catch (err) { next(err) }
+})
+
+router.post('/auth/reset-password', async (req, res, next) => {
+  try {
+    const { token, password } = parseBody(resetPasswordSchema, req)
+    const ok2 = await service.resetPassword(token, password)
+    if (!ok2) return res.status(400).json({ error: 'invalid_token', message: 'Reset link is invalid or has expired.', statusCode: 400 })
+    ok(res, { message: 'Password updated successfully. You can now sign in.' })
+  } catch (err) { next(err) }
+})
+
+// ─── Auth (protected) ──────────────────────────────────────────
+
+router.get('/auth/me', requireAdminAuth, (req, res) => {
+  ok(res, presentAdminUser(req.admin as any))
+})
+
+router.post('/auth/2fa/setup', requireAdminAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.setupTotp(req.admin.id, req.admin.email))
+  } catch (err) { next(err) }
+})
+
+router.post('/auth/2fa/verify', requireAdminAuth, async (req, res, next) => {
+  try {
+    const { code } = parseBody(totpVerifySchema, req)
+    const result = await service.verifyTotp(req.admin.id, code)
+    if (!result) return res.status(400).json({ error: 'invalid_code', message: 'Invalid 2FA code', statusCode: 400 })
+    setSessionCookie(res, 'admin', result.token, 8 * 60 * 60 * 1000)
+    ok(res, { success: true, admin: result.admin, recoveryCodes: result.recoveryCodes })
+  } catch (err) { next(err) }
+})
+
+router.post('/auth/2fa/recovery-codes/regenerate', requireAdminAuth, requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    ok(res, await service.regenerateRecoveryCodes(req.admin.id))
+  } catch (err) { next(err) }
+})
+
+// ─── Companies ─────────────────────────────────────────────────
+
+router.get('/companies', requireAdminAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.listCompanies(parseQuery(companiesQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.get('/companies/:id', requireAdminAuth, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.getCompany(id))
+  } catch (err) { next(err) }
+})
+
+router.patch('/companies/:id', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body   = parseBody(adminCompanyUpdateSchema, req)
+    ok(res, await service.updateCompany(id, body, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.patch('/companies/:id/status', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { id }          = parseParams(idParamSchema, req)
+    const { status, reason } = parseBody(companyStatusSchema, req)
+    ok(res, await service.setCompanyStatus(id, status, reason, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.delete('/companies/:id', requireAdminAuth, requireAdminRole('ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.deleteCompany(id, req.admin.id, req.ip)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/companies/:id/impersonate', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { reason, durationMinutes } = parseBody(adminImpersonationSchema, req)
+    ok(res, await service.impersonateCompany(id, req.admin.id, req.ip, reason, durationMinutes))
+  } catch (err) { next(err) }
+})
+
+// ─── Menu management ──────────────────────────────────────────
+
+router.get('/menu-items', requireAdminAuth, requireAdminRole('SUPPORT'), async (_req, res, next) => {
+  try {
+    ok(res, await menuService.listMenuItems())
+  } catch (err) { next(err) }
+})
+
+router.post('/menu-items', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    created(res, { data: await menuService.createMenuItem(parseBody(menuItemSchema, req), req.admin) })
+  } catch (err) { next(err) }
+})
+
+router.get('/menu-items/:id', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await menuService.getMenuItem(id))
+  } catch (err) { next(err) }
+})
+
+router.put('/menu-items/:id', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await menuService.updateMenuItem(id, parseBody(menuItemSchema, req), req.admin))
+  } catch (err) { next(err) }
+})
+
+router.patch('/menu-items/:id/status', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { isActive } = parseBody(menuItemStatusSchema, req)
+    ok(res, await menuService.setMenuItemStatus(id, isActive, req.admin))
+  } catch (err) { next(err) }
+})
+
+router.delete('/menu-items/:id', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await menuService.deleteMenuItem(id, req.admin)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/menu-items/:id/subscriptions', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { assignments } = parseBody(menuPlanAssignmentsSchema, req)
+    ok(res, await menuService.assignMenuItemToPlans(id, assignments, req.admin))
+  } catch (err) { next(err) }
+})
+
+router.delete('/menu-items/:id/subscriptions/:plan', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id, plan } = parseParams(menuPlanParamSchema, req)
+    ok(res, await menuService.removeMenuItemFromPlan(id, plan, req.admin))
+  } catch (err) { next(err) }
+})
+
+router.post('/menu-items/:id/companies', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { assignments } = parseBody(menuCompanyAssignmentsSchema, req)
+    ok(res, await menuService.assignMenuItemToCompanies(id, assignments, req.admin))
+  } catch (err) { next(err) }
+})
+
+router.delete('/menu-items/:id/companies/:companyId', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    const { id, companyId } = parseParams(menuCompanyParamSchema, req)
+    ok(res, await menuService.removeMenuItemFromCompany(id, companyId, req.admin))
+  } catch (err) { next(err) }
+})
+
+router.post('/menu-preview', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    ok(res, await menuService.previewCompanyMenu(parseBody(menuPreviewSchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.get('/menu-audit-logs', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    ok(res, await menuService.listMenuAuditLogs(parseQuery(menuAuditLogQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+// ─── Renters ───────────────────────────────────────────────────
+
+router.get('/renters', requireAdminAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.listRenters(parseQuery(rentersQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.post('/renters/:id/block', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.setRenterActive(id, false)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/renters/:id/unblock', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.setRenterActive(id, true)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+// ─── Metrics ───────────────────────────────────────────────────
+
+router.get('/metrics', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    ok(res, await service.getPlatformMetrics())
+  } catch (err) { next(err) }
+})
+
+// ─── Notifications ─────────────────────────────────────────────
+
+router.get('/notifications', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    ok(res, await service.listNotifications(parseQuery(notificationsQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+// ─── Audit logs ────────────────────────────────────────────────
+
+router.get('/audit-logs', requireAdminAuth, requireAdminRole('ADMIN'), async (req, res, next) => {
+  try {
+    ok(res, await service.getAuditLogs(parseQuery(auditLogQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+// ─── Admin users ───────────────────────────────────────────────
+
+router.get('/admins', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), async (req, res, next) => {
+  try {
+    ok(res, await service.listAdmins())
+  } catch (err) { next(err) }
+})
+
+router.post('/admins', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    created(res, { data: await service.createAdmin(parseBody(createAdminSchema, req)) })
+  } catch (err) { next(err) }
+})
+
+router.patch('/admins/:id', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.updateAdmin(id, parseBody(updateAdminSchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.patch('/admins/:id/role', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { id }   = parseParams(idParamSchema, req)
+    const { role } = parseBody(adminRoleSchema, req)
+    await service.updateAdminRole(id, role)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.patch('/admins/:id/permissions', requireAdminAuth, requireAdminRole('SUPER_ADMIN'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { id }          = parseParams(idParamSchema, req)
+    const { permissions } = parseBody(adminPermissionsSchema, req)
+    ok(res, await service.updateAdminPermissions(id, permissions))
+  } catch (err) { next(err) }
+})
+
+// ─── Billing ───────────────────────────────────────────────────
+
+router.get('/billing', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    ok(res, await service.getBilling(parseQuery(billingQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.get('/billing/invoices/:invoiceId/pdf', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    const { pdfBuffer, invoiceNumber } = await service.getInvoicePdf(invoiceId)
+    res.setHeader('Content-Type', 'application/pdf')
+    res.setHeader('Content-Disposition', `attachment; filename="${invoiceNumber}.pdf"`)
+    res.setHeader('Content-Length', pdfBuffer.length)
+    res.end(pdfBuffer)
+  } catch (err) { next(err) }
+})
+
+router.get('/billing/:companyId', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { companyId } = parseParams(companyIdParamSchema, req)
+    ok(res, await service.getBillingAccountDetail(companyId))
+  } catch (err) { next(err) }
+})
+
+router.get('/billing/:companyId/invoices', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { companyId } = parseParams(companyIdParamSchema, req)
+    ok(res, await service.getCompanyInvoices(companyId, parseQuery(invoicesQuerySchema, req)))
+  } catch (err) { next(err) }
+})
+
+router.patch('/billing/accounts/:billingAccountId', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { billingAccountId } = parseParams(billingAccountIdParamSchema, req)
+    ok(res, await service.updateBillingAccount(billingAccountId, parseBody(billingAccountUpdateSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/accounts/:billingAccountId/pause-dunning', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { billingAccountId } = parseParams(billingAccountIdParamSchema, req)
+    ok(res, await service.setDunningPaused(billingAccountId, true, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/accounts/:billingAccountId/resume-dunning', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { billingAccountId } = parseParams(billingAccountIdParamSchema, req)
+    ok(res, await service.setDunningPaused(billingAccountId, false, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/accounts/:billingAccountId/invoices', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { billingAccountId } = parseParams(billingAccountIdParamSchema, req)
+    created(res, await service.createBillingInvoice(billingAccountId, parseBody(createBillingInvoiceSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/finalize', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    ok(res, await service.finalizeBillingInvoice(invoiceId, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/pay', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    ok(res, await service.payBillingInvoice(invoiceId, parseBody(payBillingInvoiceSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/retry-payment', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    ok(res, await service.retryBillingInvoicePayment(invoiceId, parseBody(retryBillingInvoiceSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/void', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    const { reason } = parseBody(billingReasonSchema, req)
+    ok(res, await service.voidBillingInvoice(invoiceId, reason, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/uncollectible', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    const { reason } = parseBody(billingReasonSchema, req)
+    ok(res, await service.markBillingInvoiceUncollectible(invoiceId, reason, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/credit-notes', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    ok(res, await service.issueBillingCreditNote(invoiceId, parseBody(billingCreditNoteSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.post('/billing/invoices/:invoiceId/refunds', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { invoiceId } = parseParams(invoiceIdParamSchema, req)
+    ok(res, await service.issueBillingRefund(invoiceId, parseBody(billingRefundSchema, req), req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+// ─── Pricing config ────────────────────────────────────────────
+
+router.get('/pricing', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    ok(res, await service.getPricingConfigs())
+  } catch (err) { next(err) }
+})
+
+router.patch('/pricing', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { entries } = parseBody(pricingUpdateSchema, req)
+    ok(res, await service.updatePricingConfigs(entries, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.get('/pricing/features', requireAdminAuth, requireAdminRole('FINANCE'), async (_req, res, next) => {
+  try {
+    ok(res, await service.listPlanFeatures())
+  } catch (err) { next(err) }
+})
+
+router.post('/pricing/features', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const data = parseBody(planFeatureCreateSchema, req)
+    created(res, await service.createPlanFeature(data, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.patch('/pricing/features/:featureId', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { featureId } = parseParams(planFeatureIdParamSchema, req)
+    const data = parseBody(planFeatureUpdateSchema, req)
+    ok(res, await service.updatePlanFeature(featureId, data, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.delete('/pricing/features/:featureId', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { featureId } = parseParams(planFeatureIdParamSchema, req)
+    await service.deletePlanFeature(featureId, req.admin.id, req.ip)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+// ─── Promotions ────────────────────────────────────────────────────────────
+
+router.get('/pricing/promotions', requireAdminAuth, requireAdminRole('FINANCE'), async (req, res, next) => {
+  try {
+    ok(res, await service.listPromotions())
+  } catch (err) { next(err) }
+})
+
+router.post('/pricing/promotions', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const data = parseBody(promotionCreateSchema, req)
+    created(res, await service.createPromotion(data as any, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.patch('/pricing/promotions/:promotionId', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { promotionId } = parseParams(promotionIdParamSchema, req)
+    const data = parseBody(promotionUpdateSchema, req)
+    ok(res, await service.updatePromotion(promotionId, data as any, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+router.delete('/pricing/promotions/:promotionId', requireAdminAuth, requireAdminRole('FINANCE'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { promotionId } = parseParams(promotionIdParamSchema, req)
+    await service.deletePromotion(promotionId, req.admin.id, req.ip)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+// ─── Subscription admin overrides ─────────────────────────────
+
+router.get('/subscriptions/:subscriptionId/events', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    ok(res, await subService.getEventsBySubscriptionId(subscriptionId))
+  } catch (err) { next(err) }
+})
+
+router.post('/subscriptions/:subscriptionId/extend-trial', requireAdminAuth, requireAdminRole('SUPPORT'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    const { extraDays, reason } = parseBody(adminExtendTrialSchema, req)
+    ok(res, await subService.adminExtendTrial(subscriptionId, extraDays, req.admin.id, reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/subscriptions/:subscriptionId/extend-grace-period', requireAdminAuth, requireAdminRole('SUPPORT'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    const { reason } = parseBody(adminSubOverrideSchema, req)
+    ok(res, await subService.adminExtendGracePeriod(subscriptionId, 7, req.admin.id, reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/subscriptions/:subscriptionId/suspend', requireAdminAuth, requireAdminRole('SUPPORT'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    const { reason } = parseBody(adminSubOverrideSchema, req)
+    ok(res, await subService.adminSuspendSubscription(subscriptionId, req.admin.id, reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/subscriptions/:subscriptionId/reactivate', requireAdminAuth, requireAdminRole('SUPPORT'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    const { reason } = parseBody(adminSubOverrideSchema, req)
+    ok(res, await subService.adminReactivateSubscription(subscriptionId, req.admin.id, reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/subscriptions/:subscriptionId/cancel', requireAdminAuth, requireAdminRole('SUPPORT'), requireFreshAdmin2FA, async (req, res, next) => {
+  try {
+    const { subscriptionId } = parseParams(subIdParamSchema, req)
+    const { reason } = parseBody(adminSubOverrideSchema, req)
+    ok(res, await subService.adminCancelSubscription(subscriptionId, req.admin.id, reason))
+  } catch (err) { next(err) }
+})
+
+// ─── Site config ───────────────────────────────────────────────
+
+router.get('/site-config/marketplace-homepage', requireAdminAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.getMarketplaceHomepage())
+  } catch (err) { next(err) }
+})
+
+router.patch('/site-config/marketplace-homepage', requireAdminAuth, requireAdminRole('SUPPORT'), async (req, res, next) => {
+  try {
+    const { homepage } = parseBody(homepageUpdateSchema, req)
+    ok(res, await service.updateMarketplaceHomepage(homepage, req.admin.id, req.ip))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/admin/admin.schemas.ts b/api/src/modules/admin/admin.schemas.ts
new file mode 100644
index 0000000..9b577e9
--- /dev/null
+++ b/api/src/modules/admin/admin.schemas.ts
@@ -0,0 +1,411 @@
+import { z } from 'zod'
+import type { MarketplaceHomepageContent, MarketplaceHomepageHowItWorksStep, MarketplaceHomepageMetric, MarketplaceHomepagePillar, MarketplaceHomepageSectionType, MarketplaceHomepageStep, MarketplaceHomepageTestimonial } from '@rentaldrivego/types'
+
+export const loginSchema = z.object({
+  email:     z.string().email().max(255).trim().toLowerCase(),
+  password:  z.string().max(128),
+  totpCode:  z.string().length(6).optional(),
+  recoveryCode: z.string().min(8).max(32).optional(),
+})
+
+export const forgotPasswordSchema = z.object({
+  email: z.string().email().max(255).trim().toLowerCase(),
+})
+
+export const resetPasswordSchema = z.object({
+  token:    z.string().min(1),
+  password: z.string().min(8).max(128),
+})
+
+export const totpVerifySchema = z.object({
+  code: z.string().length(6),
+})
+
+export const companiesQuerySchema = z.object({
+  q:        z.string().optional(),
+  status:   z.string().optional(),
+  plan:     z.string().optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const rentersQuerySchema = z.object({
+  q:        z.string().optional(),
+  blocked:  z.string().optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const auditLogQuerySchema = z.object({
+  adminId:   z.string().optional(),
+  action:    z.string().optional(),
+  companyId: z.string().optional(),
+  entityId:  z.string().optional(),
+  page:      z.coerce.number().int().min(1).default(1),
+  pageSize:  z.coerce.number().int().min(1).max(100).default(50),
+})
+
+export const notificationsQuerySchema = z.object({
+  channel:   z.string().optional(),
+  status:    z.string().optional(),
+  companyId: z.string().optional(),
+  page:      z.coerce.number().int().min(1).default(1),
+  pageSize:  z.coerce.number().int().min(1).max(200).default(50),
+})
+
+export const billingQuerySchema = z.object({
+  q:        z.string().optional(),
+  status:   z.string().optional(),
+  plan:     z.string().optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const invoicesQuerySchema = z.object({
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const permissionSchema = z.object({
+  resource: z.enum(['COMPANIES', 'COMPANY_EMPLOYEES', 'SUBSCRIPTIONS', 'PAYMENTS', 'OFFERS', 'RENTERS', 'ADMIN_USERS', 'AUDIT_LOGS', 'PLATFORM_METRICS']),
+  actions:  z.array(z.enum(['READ', 'CREATE', 'UPDATE', 'DELETE', 'SUSPEND', 'IMPERSONATE'])).min(1),
+})
+
+export const createAdminSchema = z.object({
+  email:       z.string().email().trim().toLowerCase(),
+  firstName:   z.string().min(1).max(100).trim(),
+  lastName:    z.string().min(1).max(100).trim(),
+  role:        z.enum(['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE', 'VIEWER']),
+  password:    z.string().min(8),
+  permissions: z.array(permissionSchema).optional(),
+})
+
+export const updateAdminSchema = z.object({
+  email: z.string().email().trim().toLowerCase().optional(),
+  firstName: z.string().min(1).max(100).trim().optional(),
+  lastName: z.string().min(1).max(100).trim().optional(),
+  role: z.enum(['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE', 'VIEWER']).optional(),
+  password: z.string().min(8).optional(),
+  isActive: z.boolean().optional(),
+})
+
+export const adminRoleSchema = z.object({
+  role: z.enum(['SUPER_ADMIN', 'ADMIN', 'SUPPORT', 'FINANCE', 'VIEWER']),
+})
+
+export const adminPermissionsSchema = z.object({
+  permissions: z.array(permissionSchema),
+})
+
+export const companyStatusSchema = z.object({
+  status: z.enum(['ACTIVE', 'SUSPENDED', 'CANCELLED']),
+  reason: z.string().optional(),
+})
+
+const nullableString = z.union([z.string(), z.null()]).optional()
+const nullableEmail  = z.union([z.string().email(), z.null()]).optional()
+const nullableUrl    = z.union([z.string().url(), z.null()]).optional()
+const nullableDate   = z.union([z.string().datetime(), z.string().regex(/^\d{4}-\d{2}-\d{2}$/), z.null()]).optional()
+
+export const adminCompanyUpdateSchema = z.object({
+  company: z.object({
+    name: z.string().min(1).optional(), slug: z.string().min(1).optional(),
+    email: z.string().email().optional(), phone: nullableString,
+    status: z.enum(['PENDING', 'TRIALING', 'ACTIVE', 'PAST_DUE', 'SUSPENDED', 'CANCELLED']).optional(),
+    subscriptionPaymentRef: nullableString,
+    address: z.object({
+      streetAddress: nullableString,
+      city: nullableString,
+      country: nullableString,
+      zipCode: nullableString,
+      legalName: nullableString,
+      legalForm: nullableString,
+      companyEmail: nullableEmail,
+      managerName: nullableString,
+      iceNumber: nullableString,
+      operatingLicenseNumber: nullableString,
+      operatingLicenseIssuedAt: nullableString,
+      operatingLicenseIssuedBy: nullableString,
+      fax: nullableString,
+      yearsActive: nullableString,
+      representativeName: nullableString,
+      representativeTitle: nullableString,
+      responsibleName: nullableString,
+      responsibleRole: nullableString,
+      responsibleIdentityNumber: nullableString,
+      responsibleQualification: nullableString,
+      responsiblePhone: nullableString,
+      responsibleEmail: nullableEmail,
+    }).optional(),
+  }).optional(),
+  subscription: z.object({
+    plan: z.enum(['STARTER', 'GROWTH', 'PRO']).optional(),
+    billingPeriod: z.enum(['MONTHLY', 'ANNUAL']).optional(),
+    status: z.enum(['TRIALING', 'ACTIVE', 'PAST_DUE', 'CANCELLED', 'UNPAID']).optional(),
+    currency: z.literal('MAD').optional(),
+    trialStartAt: nullableDate, trialEndAt: nullableDate,
+    currentPeriodStart: nullableDate, currentPeriodEnd: nullableDate,
+    cancelledAt: nullableDate, cancelAtPeriodEnd: z.boolean().optional(),
+  }).optional(),
+  brand: z.object({
+    displayName: z.string().min(1).optional(), tagline: nullableString,
+    subdomain: z.string().min(1).optional(), customDomain: nullableString,
+    publicEmail: nullableEmail, publicPhone: nullableString, publicAddress: nullableString,
+    publicCity: nullableString, publicCountry: nullableString, websiteUrl: nullableUrl,
+    whatsappNumber: nullableString, defaultLocale: z.string().min(2).optional(),
+    defaultCurrency: z.literal('MAD').optional(),
+    isListedOnMarketplace: z.boolean().optional(),
+    homePageConfig: z.any().optional(),
+    menuConfig: z.any().optional(),
+  }).optional(),
+  contractSettings: z.object({
+    legalName: nullableString, registrationNumber: nullableString, taxId: nullableString,
+    terms: z.string().optional(),
+    fuelPolicyType: z.enum(['FULL_TO_FULL', 'FULL_TO_EMPTY', 'SAME_TO_SAME', 'PREPAID', 'FREE']).optional(),
+    lateFeePerHour: z.number().int().nullable().optional(), taxRate: z.number().nullable().optional(),
+    signatureRequired: z.boolean().optional(), showTax: z.boolean().optional(),
+  }).optional(),
+  accountingSettings: z.object({
+    reportingPeriod: z.enum(['WEEKLY', 'MONTHLY', 'QUARTERLY', 'ANNUAL']).optional(),
+    fiscalYearStart: z.number().int().min(1).max(12).optional(),
+    currency: z.literal('MAD').optional(),
+    accountantEmail: nullableEmail, accountantName: nullableString,
+    autoSendReport: z.boolean().optional(),
+    reportFormat: z.enum(['PDF', 'CSV', 'BOTH']).optional(),
+  }).optional(),
+})
+
+const marketplaceMetricSchema:         z.ZodType<MarketplaceHomepageMetric>         = z.object({ value: z.string().min(1), label: z.string().min(1) })
+const marketplacePillarSchema:         z.ZodType<MarketplaceHomepagePillar>         = z.object({ title: z.string().min(1), body: z.string().min(1) })
+const marketplaceStepSchema:           z.ZodType<MarketplaceHomepageStep>           = z.object({ step: z.string().min(1), title: z.string().min(1), body: z.string().min(1) })
+const marketplaceHowItWorksStepSchema: z.ZodType<MarketplaceHomepageHowItWorksStep> = z.object({ number: z.string().min(1), title: z.string().min(1), description: z.string().min(1) })
+const marketplaceTestimonialSchema:    z.ZodType<MarketplaceHomepageTestimonial>     = z.object({ quote: z.string().min(1), author: z.string().min(1), role: z.string().min(1), company: z.string().optional() })
+const marketplaceSectionSchema: z.ZodType<MarketplaceHomepageSectionType>  = z.enum(['hero', 'surface', 'pillars', 'audiences', 'features', 'howitworks', 'steps', 'testimonials', 'closing'])
+
+const marketplaceHomepageContentSchema: z.ZodType<MarketplaceHomepageContent> = z.object({
+  sections: z.array(marketplaceSectionSchema).min(1),
+  heroKicker: z.string().min(1), heroTitle: z.string().min(1), heroBody: z.string().min(1),
+  startTrial: z.string().min(1), exploreVehicles: z.string().min(1),
+  surfaceLabel: z.string().min(1), surfaceTitle: z.string().min(1), surfaceBody: z.string().min(1),
+  liveLabel: z.string().min(1), trustedFleets: z.string().min(1), brandedFlows: z.string().min(1), multiTenant: z.string().min(1),
+  companyKicker: z.string().min(1), companyTitle: z.string().min(1), companyBody: z.string().min(1),
+  renterKicker: z.string().min(1), renterTitle: z.string().min(1), renterBody: z.string().min(1),
+  pillars: z.array(marketplacePillarSchema).length(3),
+  metrics: z.array(marketplaceMetricSchema).length(3),
+  featureLabel: z.string().min(1), features: z.array(z.string().min(1)).min(1),
+  howitworksKicker: z.string().min(1), howitworksTitle: z.string().min(1), howitworksSteps: z.array(marketplaceHowItWorksStepSchema).min(1),
+  stepsTitle: z.string().min(1), steps: z.array(marketplaceStepSchema).length(3), stepLabel: z.string().min(1),
+  testimonialsKicker: z.string().min(1), testimonialsTitle: z.string().min(1), testimonials: z.array(marketplaceTestimonialSchema).min(1),
+  readyKicker: z.string().min(1), readyTitle: z.string().min(1), readyBody: z.string().min(1),
+  viewPricing: z.string().min(1), createWorkspace: z.string().min(1),
+})
+
+export const marketplaceHomepageConfigSchema = z.object({
+  en: marketplaceHomepageContentSchema,
+  fr: marketplaceHomepageContentSchema,
+  ar: marketplaceHomepageContentSchema,
+})
+
+export const idParamSchema = z.object({
+  id: z.string().min(1),
+})
+
+export const companyIdParamSchema = z.object({
+  companyId: z.string().min(1),
+})
+
+export const billingAccountIdParamSchema = z.object({
+  billingAccountId: z.string().min(1),
+})
+
+export const invoiceIdParamSchema = z.object({
+  invoiceId: z.string().min(1),
+})
+
+export const billingAccountUpdateSchema = z.object({
+  legalName: z.string().min(1).max(255).optional(),
+  billingEmail: z.string().email().optional(),
+  billingAddress: z.any().optional(),
+  taxId: z.union([z.string().max(120), z.null()]).optional(),
+  taxExempt: z.boolean().optional(),
+  invoiceTerms: z.enum(['DUE_ON_RECEIPT', 'NET_7', 'NET_15', 'NET_30', 'NET_45', 'NET_60']).optional(),
+  netTermsDays: z.number().int().min(0).max(365).optional(),
+})
+
+export const billingLineItemInputSchema = z.object({
+  type: z.enum([
+    'SUBSCRIPTION_FEE',
+    'SEAT_FEE',
+    'USAGE_FEE',
+    'SETUP_FEE',
+    'DISCOUNT',
+    'TAX',
+    'CREDIT',
+    'PRORATION',
+    'REFUND_ADJUSTMENT',
+    'MANUAL_ADJUSTMENT',
+    'PROFESSIONAL_SERVICES',
+    'CANCELLATION_FEE',
+  ]),
+  description: z.string().min(1).max(255),
+  quantity: z.number().int().positive().max(100000),
+  unitAmount: z.number().int(),
+  periodStart: nullableDate,
+  periodEnd: nullableDate,
+})
+
+export const createBillingInvoiceSchema = z.object({
+  subscriptionId: z.union([z.string(), z.null()]).optional(),
+  invoiceType: z.enum([
+    'SUBSCRIPTION_INITIAL',
+    'SUBSCRIPTION_RENEWAL',
+    'TRIAL_CONVERSION',
+    'SUBSCRIPTION_UPGRADE',
+    'SUBSCRIPTION_DOWNGRADE_CREDIT',
+    'USAGE_BASED',
+    'ONE_TIME',
+    'MANUAL',
+    'CORRECTION',
+    'CANCELLATION_FEE',
+  ]),
+  currency: z.string().min(3).max(8).optional(),
+  dueAt: nullableDate,
+  isSubscriptionBlocking: z.boolean().optional(),
+  adminReason: z.union([z.string().max(500), z.null()]).optional(),
+  lineItems: z.array(billingLineItemInputSchema).min(1),
+})
+
+export const payBillingInvoiceSchema = z.object({
+  amount: z.number().int().positive().optional(),
+  paymentMethodId: z.union([z.string(), z.null()]).optional(),
+  providerPaymentId: z.union([z.string(), z.null()]).optional(),
+})
+
+export const retryBillingInvoiceSchema = z.object({
+  paymentMethodId: z.union([z.string(), z.null()]).optional(),
+})
+
+export const billingReasonSchema = z.object({
+  reason: z.string().min(1).max(500),
+})
+
+export const billingCreditNoteSchema = z.object({
+  amount: z.number().int().positive(),
+  reason: z.string().min(1).max(500),
+})
+
+export const billingRefundSchema = z.object({
+  amount: z.number().int().positive(),
+  reason: z.string().min(1).max(500),
+})
+
+export const homepageUpdateSchema = z.object({
+  homepage: marketplaceHomepageConfigSchema,
+})
+
+export const pricingUpdateSchema = z.object({
+  entries: z.array(z.object({
+    plan:          z.enum(['STARTER', 'GROWTH', 'PRO']),
+    billingPeriod: z.enum(['MONTHLY', 'ANNUAL']),
+    amount:        z.number().int().positive(),
+  })).min(1),
+})
+
+const planFeatureSchema = z.object({
+  plan:      z.enum(['STARTER', 'GROWTH', 'PRO']),
+  label:     z.string().min(1).max(120),
+  sortOrder: z.number().int().min(0).default(0),
+})
+
+export const planFeatureCreateSchema = planFeatureSchema
+export const planFeatureUpdateSchema = planFeatureSchema.partial()
+export const promotionCreateSchema = z.object({
+  code:          z.string().min(2).max(30).regex(/^[A-Z0-9_-]+$/, 'Code must be uppercase A-Z, 0-9, _ or -'),
+  name:          z.string().min(1).max(100),
+  description:   z.string().max(500).optional(),
+  discountType:  z.enum(['PERCENTAGE', 'FIXED']),
+  discountValue: z.number().int().positive(),
+  plans:         z.array(z.enum(['STARTER', 'GROWTH', 'PRO'])),
+  periods:       z.array(z.enum(['MONTHLY', 'ANNUAL'])),
+  maxUses:       z.number().int().positive().nullable().optional(),
+  validFrom:     z.string().datetime(),
+  validUntil:    z.string().datetime().nullable().optional(),
+  isActive:      z.boolean().default(true),
+})
+
+export const promotionUpdateSchema = promotionCreateSchema.partial()
+
+export const planFeatureIdParamSchema = z.object({ featureId: z.string().min(1) })
+export const promotionIdParamSchema = z.object({ promotionId: z.string().min(1) })
+
+const employeeRoleSchema = z.enum(['OWNER', 'MANAGER', 'AGENT'])
+const planSchema = z.enum(['STARTER', 'GROWTH', 'PRO'])
+const menuItemTypeSchema = z.enum(['INTERNAL_PAGE', 'EXTERNAL_LINK', 'PARENT_MENU', 'SECTION_LABEL', 'DIVIDER'])
+
+export const menuItemSchema = z.object({
+  systemKey: z.string().trim().min(1).max(120).optional().nullable(),
+  label: z.string().trim().min(1).max(120),
+  itemType: menuItemTypeSchema,
+  routeOrUrl: z.string().trim().max(400).optional().nullable(),
+  icon: z.string().trim().max(120).optional().nullable(),
+  parentId: z.string().trim().min(1).optional().nullable(),
+  displayOrder: z.number().int().min(0).default(0),
+  openInNewTab: z.boolean().default(false),
+  isRequired: z.boolean().default(false),
+  isActive: z.boolean().default(true),
+  roles: z.array(employeeRoleSchema).default([]),
+  subscriptionPlans: z.array(z.object({
+    plan: planSchema,
+    displayOrder: z.number().int().min(0).optional(),
+    isActive: z.boolean().optional(),
+  })).default([]),
+  companyAssignments: z.array(z.object({
+    companyId: z.string().trim().min(1),
+    displayOrder: z.number().int().min(0).optional(),
+    isActive: z.boolean().optional(),
+  })).default([]),
+})
+
+export const menuItemStatusSchema = z.object({
+  isActive: z.boolean(),
+})
+
+export const menuPlanAssignmentsSchema = z.object({
+  assignments: z.array(z.object({
+    plan: planSchema,
+    displayOrder: z.number().int().min(0).optional(),
+    isActive: z.boolean().optional(),
+  })).min(1),
+})
+
+export const menuCompanyAssignmentsSchema = z.object({
+  assignments: z.array(z.object({
+    companyId: z.string().trim().min(1),
+    displayOrder: z.number().int().min(0).optional(),
+    isActive: z.boolean().optional(),
+  })).min(1),
+})
+
+export const menuPreviewSchema = z.object({
+  companyId: z.string().trim().min(1),
+  role: employeeRoleSchema,
+})
+
+export const menuAuditLogQuerySchema = z.object({
+  page: z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const menuItemIdParamSchema = z.object({
+  id: z.string().min(1),
+})
+
+export const menuPlanParamSchema = z.object({
+  id: z.string().min(1),
+  plan: planSchema,
+})
+
+export const menuCompanyParamSchema = z.object({
+  id: z.string().min(1),
+  companyId: z.string().min(1),
+})
diff --git a/api/src/modules/admin/admin.service.test.ts b/api/src/modules/admin/admin.service.test.ts
new file mode 100644
index 0000000..3b6d5be
--- /dev/null
+++ b/api/src/modules/admin/admin.service.test.ts
@@ -0,0 +1,49 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./admin.repo', () => ({
+  findAdminByEmail: vi.fn(),
+  setAdminPasswordReset: vi.fn(),
+}))
+
+vi.mock('../../services/notificationService', () => ({
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+import * as repo from './admin.repo'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import { forgotPassword } from './admin.service'
+
+describe('admin.service forgotPassword', () => {
+  const originalAdminUrl = process.env.ADMIN_URL
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.ADMIN_URL = 'http://localhost:3000/admin'
+  })
+
+  afterAll(() => {
+    process.env.ADMIN_URL = originalAdminUrl
+  })
+
+  it('sends the reset email to the canonical stored admin address', async () => {
+    vi.mocked(repo.findAdminByEmail).mockResolvedValue({
+      id: 'admin_1',
+      email: 'admin@rentaldrivego.com',
+      firstName: 'Samir',
+      isActive: true,
+    } as any)
+
+    await forgotPassword('Admin@RentalDriveGo.com')
+
+    expect(repo.setAdminPasswordReset).toHaveBeenCalledWith(
+      'admin_1',
+      expect.any(String),
+      expect.any(Date),
+    )
+    expect(sendTransactionalEmail).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: 'admin@rentaldrivego.com',
+      }),
+    )
+  })
+})
diff --git a/api/src/modules/admin/admin.service.ts b/api/src/modules/admin/admin.service.ts
new file mode 100644
index 0000000..4d2732c
--- /dev/null
+++ b/api/src/modules/admin/admin.service.ts
@@ -0,0 +1,514 @@
+import bcrypt from 'bcryptjs'
+import crypto from 'crypto'
+import { authenticator } from 'otplib'
+import { signActorToken } from '../../security/tokens'
+import qrcode from 'qrcode'
+import { getMarketplaceHomepageContent, saveMarketplaceHomepageContent } from '../../services/platformContentService'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import * as presenter from './admin.presenter'
+import * as repo from './admin.repo'
+import * as billingService from './admin.billing.service'
+
+const ADMIN_RESET_TTL_MINUTES = 60
+const ADMIN_RECOVERY_CODE_COUNT = 10
+
+
+function generateRecoveryCode() {
+  const raw = crypto.randomBytes(9).toString('base64url').replace(/[^a-zA-Z0-9]/g, '').toUpperCase().slice(0, 12)
+  return `${raw.slice(0, 4)}-${raw.slice(4, 8)}-${raw.slice(8, 12)}`
+}
+
+async function issueAdminRecoveryCodes(adminId: string) {
+  const codes = Array.from({ length: ADMIN_RECOVERY_CODE_COUNT }, generateRecoveryCode)
+  const hashes = await Promise.all(codes.map((code) => bcrypt.hash(code, 12)))
+  await repo.replaceAdminRecoveryCodes(adminId, hashes)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'ADMIN_2FA_RECOVERY_CODES_ISSUED',
+    resource: 'AdminUser',
+    resourceId: adminId,
+  })
+  return codes
+}
+
+async function consumeAdminRecoveryCode(adminId: string, code: string) {
+  const normalized = code.trim().toUpperCase()
+  if (!normalized) return false
+
+  const codes = await repo.listUnusedAdminRecoveryCodes(adminId)
+  for (const candidate of codes) {
+    if (await bcrypt.compare(normalized, candidate.codeHash)) {
+      await repo.markAdminRecoveryCodeUsed(candidate.id)
+      await repo.createAuditLog({
+        adminUserId: adminId,
+        action: 'ADMIN_2FA_RECOVERY_CODE_USED',
+        resource: 'AdminUser',
+        resourceId: adminId,
+      })
+      return true
+    }
+  }
+
+  return false
+}
+
+function signAdminToken(adminId: string, last2faAt?: number) {
+  return signActorToken(adminId, 'admin', { expiresIn: '8h', last2faAt })
+}
+
+function toAuditJson<T>(value: T) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+function ensureAdminBasePath(baseUrl: string) {
+  try {
+    const url = new URL(baseUrl)
+    const pathname = url.pathname.replace(/\/$/, '')
+    if (!pathname.endsWith('/admin')) url.pathname = `${pathname}/admin`
+    return url.toString().replace(/\/$/, '')
+  } catch {
+    const trimmed = baseUrl.replace(/\/$/, '')
+    return trimmed.endsWith('/admin') ? trimmed : `${trimmed}/admin`
+  }
+}
+
+export async function login(email: string, password: string, totpCode?: string, recoveryCode?: string) {
+  const admin = await repo.findAdminByEmail(email)
+  if (!admin || !admin.isActive) return null
+
+  const valid = await bcrypt.compare(password, admin.passwordHash)
+  if (!valid) return null
+
+  if (admin.totpEnabled) {
+    if (!totpCode && !recoveryCode) return { totpRequired: true } as const
+
+    const validTotp = totpCode
+      ? authenticator.verify({ token: totpCode, secret: admin.totpSecret! })
+      : false
+    const validRecoveryCode = !validTotp && recoveryCode
+      ? await consumeAdminRecoveryCode(admin.id, recoveryCode)
+      : false
+
+    if (!validTotp && !validRecoveryCode) {
+      return { invalidTotp: true } as const
+    }
+  }
+
+  await repo.updateAdminLastLogin(admin.id)
+  await repo.createAuditLog({
+    adminUserId: admin.id,
+    action: 'ADMIN_LOGIN',
+    resource: 'AdminUser',
+    resourceId: admin.id,
+  })
+
+  return presenter.presentAdminSession(admin, signAdminToken(admin.id, admin.totpEnabled ? Date.now() : undefined))
+}
+
+export async function setupTotp(adminId: string, email: string) {
+  const secret = authenticator.generateSecret()
+  await repo.updateAdminTotpSecret(adminId, secret)
+  const otpauth = authenticator.keyuri(email, 'RentalDriveGo Admin', secret)
+  const qrCode = await qrcode.toDataURL(otpauth)
+  return { secret, qrCode }
+}
+
+export async function verifyTotp(adminId: string, code: string) {
+  const admin = await repo.findAdminByIdOrThrow(adminId)
+  if (!admin.totpSecret) return false
+
+  const valid = authenticator.verify({ token: code, secret: admin.totpSecret })
+  if (!valid) return false
+
+  await repo.enableAdminTotp(adminId)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'ADMIN_2FA_VERIFIED',
+    resource: 'AdminUser',
+    resourceId: adminId,
+  })
+  const recoveryCodes = await issueAdminRecoveryCodes(adminId)
+  return {
+    ...presenter.presentAdminSession({ ...admin, totpEnabled: true }, signAdminToken(adminId, Date.now())),
+    recoveryCodes,
+  }
+}
+
+export async function regenerateRecoveryCodes(adminId: string) {
+  return { recoveryCodes: await issueAdminRecoveryCodes(adminId) }
+}
+
+export async function forgotPassword(email: string) {
+  const admin = await repo.findAdminByEmail(email)
+  if (!admin || !admin.isActive) return
+
+  const rawToken = crypto.randomBytes(32).toString('hex')
+  const expiresAt = new Date(Date.now() + ADMIN_RESET_TTL_MINUTES * 60 * 1000)
+  await repo.setAdminPasswordReset(admin.id, rawToken, expiresAt)
+
+  const adminUrl = ensureAdminBasePath(
+    process.env.ADMIN_URL ?? process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3000/admin',
+  )
+  const resetUrl = `${adminUrl}/reset-password?token=${rawToken}`
+
+  await sendTransactionalEmail({
+    to: admin.email,
+    subject: 'Reset your RentalDriveGo admin password',
+    html: `<p>Hi ${admin.firstName},</p><p><a href="${resetUrl}">Reset password</a></p><p>Expires in ${ADMIN_RESET_TTL_MINUTES} minutes.</p>`,
+    text: `Hi ${admin.firstName},\n\nReset here: ${resetUrl}\n\nExpires in ${ADMIN_RESET_TTL_MINUTES} minutes.`,
+  }).catch((err) => console.error('[AdminForgotPassword]', err?.message))
+}
+
+export async function resetPassword(token: string, password: string) {
+  const admin = await repo.findAdminByResetToken(token)
+  if (!admin) return false
+
+  await repo.updateAdminPassword(admin.id, await bcrypt.hash(password, 12))
+  return true
+}
+
+export async function listCompanies(query: { q?: string; status?: string; plan?: string; page: number; pageSize: number }) {
+  const { data, total } = await repo.listCompaniesPage(query)
+  return presenter.presentPaginated(data, total, query.page, query.pageSize)
+}
+
+export function getCompany(id: string) {
+  return repo.getCompanyDetail(id)
+}
+
+export async function updateCompany(id: string, body: any, adminId: string, ip?: string) {
+  const before = await repo.getCompanyUpdateSnapshot(id)
+  const updated = await repo.applyCompanyUpdate(id, body, before)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'UPDATE_COMPANY',
+    resource: 'Company',
+    resourceId: id,
+    companyId: id,
+    before: toAuditJson(before),
+    after: toAuditJson(body),
+    ipAddress: ip,
+  })
+  return updated
+}
+
+export async function setCompanyStatus(id: string, status: string, reason: string | undefined, adminId: string, ip?: string) {
+  const before = await repo.getCompanyUpdateSnapshot(id)
+  const updated = await repo.updateCompanyStatus(id, status)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: `SET_COMPANY_STATUS_${status}`,
+    resource: 'Company',
+    resourceId: id,
+    companyId: id,
+    before: { status: before.status },
+    after: { status },
+    note: reason,
+    ipAddress: ip,
+  })
+  return updated
+}
+
+export async function deleteCompany(id: string, adminId: string, ip?: string) {
+  await repo.deleteCompany(id)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'DELETE_COMPANY',
+    resource: 'Company',
+    resourceId: id,
+    ipAddress: ip,
+  })
+}
+
+export async function impersonateCompany(id: string, adminId: string, ip?: string, reason?: string, durationMinutes = 15) {
+  const company = await repo.getCompanyForImpersonation(id)
+  const ttlMinutes = Math.min(Math.max(durationMinutes, 1), 30)
+  const employeeId = company.employees[0]?.id
+  if (!employeeId) throw new Error('Company has no employee account to impersonate')
+  const token = signActorToken(employeeId, 'employee', { expiresIn: `${ttlMinutes}m` as any })
+
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'IMPERSONATE_COMPANY',
+    resource: 'Company',
+    resourceId: id,
+    companyId: id,
+    note: reason,
+    before: { originalAdminId: adminId },
+    after: { targetCompanyId: id, durationMinutes: ttlMinutes },
+    ipAddress: ip,
+  })
+
+  return { token, expiresIn: ttlMinutes * 60, impersonation: { companyId: id, reason, durationMinutes: ttlMinutes } }
+}
+
+export async function listRenters(query: { q?: string; blocked?: string; page: number; pageSize: number }) {
+  const { data, total } = await repo.listRentersPage(query)
+  return presenter.presentPaginated(data, total, query.page, query.pageSize)
+}
+
+export function setRenterActive(id: string, isActive: boolean) {
+  return repo.updateRenterActive(id, isActive)
+}
+
+export function getPlatformMetrics() {
+  return repo.getPlatformMetricCounts()
+}
+
+export async function listNotifications(query: { channel?: string; status?: string; companyId?: string; page: number; pageSize: number }) {
+  const { data, total } = await repo.listNotificationsPage(query)
+  return presenter.presentPaginated(data, total, query.page, query.pageSize)
+}
+
+export async function getAuditLogs(query: { adminId?: string; action?: string; companyId?: string; entityId?: string; page: number; pageSize: number }) {
+  const { data, total } = await repo.listAuditLogsPage(query)
+  return presenter.presentPaginated(data, total, query.page, query.pageSize)
+}
+
+export async function listAdmins() {
+  const admins = await repo.listAdmins()
+  return admins.map((admin: any) => presenter.presentAdminUser(admin))
+}
+
+export async function createAdmin(body: { email: string; firstName: string; lastName: string; role: string; password: string; permissions?: any[] }) {
+  const admin = await repo.createAdmin({
+    ...body,
+    passwordHash: await bcrypt.hash(body.password, 12),
+  })
+  return presenter.presentAdminUser(admin)
+}
+
+export async function updateAdmin(
+  id: string,
+  body: {
+    email?: string
+    firstName?: string
+    lastName?: string
+    role?: string
+    password?: string
+    isActive?: boolean
+  },
+) {
+  const admin = await repo.updateAdmin(id, {
+    ...(body.email !== undefined ? { email: body.email } : {}),
+    ...(body.firstName !== undefined ? { firstName: body.firstName } : {}),
+    ...(body.lastName !== undefined ? { lastName: body.lastName } : {}),
+    ...(body.role !== undefined ? { role: body.role } : {}),
+    ...(body.isActive !== undefined ? { isActive: body.isActive } : {}),
+    ...(body.password ? { passwordHash: await bcrypt.hash(body.password, 12) } : {}),
+  })
+
+  return presenter.presentAdminUser(admin)
+}
+
+export function updateAdminRole(id: string, role: string) {
+  return repo.updateAdminRole(id, role)
+}
+
+export async function updateAdminPermissions(id: string, permissions: any[]) {
+  const admin = await repo.replaceAdminPermissions(id, permissions)
+  return presenter.presentAdminUser(admin)
+}
+
+export async function getBilling(query: { q?: string; status?: string; plan?: string; page: number; pageSize: number }) {
+  const { data, total, stats } = await billingService.listBillingAccounts(query)
+  return presenter.presentPaginated(data, total, query.page, query.pageSize, { stats })
+}
+
+export async function getCompanyInvoices(companyId: string, query: { page: number; pageSize: number }) {
+  const detail = await billingService.getBillingAccountDetail(companyId)
+  const start = (query.page - 1) * query.pageSize
+  const end = start + query.pageSize
+  const data = detail.invoices.slice(start, end)
+  const total = detail.invoices.length
+  return presenter.presentPaginated(data, total, query.page, query.pageSize)
+}
+
+export async function getInvoicePdf(invoiceId: string) {
+  return billingService.getInvoicePdf(invoiceId)
+}
+
+export function getBillingAccountDetail(companyId: string) {
+  return billingService.getBillingAccountDetail(companyId)
+}
+
+export function updateBillingAccount(
+  billingAccountId: string,
+  data: Parameters<typeof billingService.updateBillingAccount>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.updateBillingAccount(billingAccountId, data, adminId, ip)
+}
+
+export function setDunningPaused(billingAccountId: string, paused: boolean, adminId: string, ip?: string) {
+  return billingService.setDunningPaused(billingAccountId, paused, adminId, ip)
+}
+
+export function createBillingInvoice(
+  billingAccountId: string,
+  data: Parameters<typeof billingService.createDraftInvoice>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.createDraftInvoice(billingAccountId, data, adminId, ip)
+}
+
+export function finalizeBillingInvoice(invoiceId: string, adminId: string, ip?: string) {
+  return billingService.finalizeInvoice(invoiceId, adminId, ip)
+}
+
+export function payBillingInvoice(
+  invoiceId: string,
+  data: Parameters<typeof billingService.payInvoice>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.payInvoice(invoiceId, data, adminId, ip)
+}
+
+export function retryBillingInvoicePayment(
+  invoiceId: string,
+  data: Parameters<typeof billingService.retryInvoicePayment>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.retryInvoicePayment(invoiceId, data, adminId, ip)
+}
+
+export function voidBillingInvoice(invoiceId: string, reason: string, adminId: string, ip?: string) {
+  return billingService.voidInvoice(invoiceId, reason, adminId, ip)
+}
+
+export function markBillingInvoiceUncollectible(invoiceId: string, reason: string, adminId: string, ip?: string) {
+  return billingService.markInvoiceUncollectible(invoiceId, reason, adminId, ip)
+}
+
+export function issueBillingCreditNote(
+  invoiceId: string,
+  data: Parameters<typeof billingService.issueCreditNote>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.issueCreditNote(invoiceId, data, adminId, ip)
+}
+
+export function issueBillingRefund(
+  invoiceId: string,
+  data: Parameters<typeof billingService.issueRefund>[1],
+  adminId: string,
+  ip?: string,
+) {
+  return billingService.issueRefund(invoiceId, data, adminId, ip)
+}
+
+export function getMarketplaceHomepage() {
+  return getMarketplaceHomepageContent()
+}
+
+export async function updateMarketplaceHomepage(homepage: any, adminId: string, ip?: string) {
+  const saved = await saveMarketplaceHomepageContent(homepage)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'UPDATE',
+    resource: 'MarketplaceHomepage',
+    after: toAuditJson(saved),
+    ipAddress: ip,
+    userAgent: undefined,
+  })
+  return saved
+}
+
+export function getPricingConfigs() {
+  return repo.listPricingConfigs()
+}
+
+export async function updatePricingConfigs(entries: { plan: string; billingPeriod: string; amount: number }[], adminId: string, ip?: string) {
+  const results = await Promise.all(
+    entries.map((e) => repo.upsertPricingConfig(e.plan, e.billingPeriod, e.amount, adminId)),
+  )
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'UPDATE',
+    resource: 'PricingConfig',
+    after: toAuditJson(results),
+    ipAddress: ip,
+    userAgent: undefined,
+  })
+  return results
+}
+
+export function listPlanFeatures() {
+  return repo.listPlanFeatures()
+}
+
+export async function createPlanFeature(data: Parameters<typeof repo.createPlanFeature>[0], adminId: string, ip?: string) {
+  const feature = await repo.createPlanFeature(data)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'CREATE',
+    resource: 'PlanFeature',
+    after: toAuditJson(feature),
+    ipAddress: ip,
+    userAgent: undefined,
+  })
+  return feature
+}
+
+export async function updatePlanFeature(id: string, data: Parameters<typeof repo.updatePlanFeature>[1], adminId: string, ip?: string) {
+  const feature = await repo.updatePlanFeature(id, data)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'UPDATE',
+    resource: 'PlanFeature',
+    resourceId: id,
+    after: toAuditJson(feature),
+    ipAddress: ip,
+    userAgent: undefined,
+  })
+  return feature
+}
+
+export async function deletePlanFeature(id: string, adminId: string, ip?: string) {
+  await repo.deletePlanFeature(id)
+  await repo.createAuditLog({
+    adminUserId: adminId,
+    action: 'DELETE',
+    resource: 'PlanFeature',
+    resourceId: id,
+    ipAddress: ip,
+    userAgent: undefined,
+  })
+}
+
+// ─── Promotions ────────────────────────────────────────────────────────────
+
+export function listPromotions() {
+  return repo.listPromotions()
+}
+
+export async function createPromotion(data: Parameters<typeof repo.createPromotion>[0], adminId: string, ip?: string) {
+  const promo = await repo.createPromotion({ ...data, createdBy: adminId })
+  await repo.createAuditLog({
+    adminUserId: adminId, action: 'CREATE', resource: 'PricingPromotion',
+    after: toAuditJson(promo), ipAddress: ip, userAgent: undefined,
+  })
+  return promo
+}
+
+export async function updatePromotion(id: string, data: Parameters<typeof repo.updatePromotion>[1], adminId: string, ip?: string) {
+  const promo = await repo.updatePromotion(id, data)
+  await repo.createAuditLog({
+    adminUserId: adminId, action: 'UPDATE', resource: 'PricingPromotion',
+    after: toAuditJson(promo), ipAddress: ip, userAgent: undefined,
+  })
+  return promo
+}
+
+export async function deletePromotion(id: string, adminId: string, ip?: string) {
+  await repo.deletePromotion(id)
+  await repo.createAuditLog({
+    adminUserId: adminId, action: 'DELETE', resource: 'PricingPromotion',
+    entityId: id, ipAddress: ip, userAgent: undefined,
+  })
+}
diff --git a/api/src/modules/analytics/analytics.routes.ts b/api/src/modules/analytics/analytics.routes.ts
new file mode 100644
index 0000000..5872054
--- /dev/null
+++ b/api/src/modules/analytics/analytics.routes.ts
@@ -0,0 +1,49 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseQuery } from '../../http/validate'
+import { ok } from '../../http/respond'
+import * as service from './analytics.service'
+import { summaryQuerySchema, reportQuerySchema } from './analytics.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/summary', async (req, res, next) => {
+  try {
+    const { period } = parseQuery(summaryQuerySchema, req)
+    ok(res, await service.getSummary(req.companyId, period))
+  } catch (err) { next(err) }
+})
+
+router.get('/dashboard', async (req, res, next) => {
+  try {
+    ok(res, await service.getDashboard(req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.get('/sources', async (req, res, next) => {
+  try {
+    ok(res, await service.getSources(req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.get('/report', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const query  = parseQuery(reportQuerySchema, req)
+    const result = await service.getReport(req.companyId, query)
+    if (result.format === 'CSV') {
+      const start = result.startDate.toISOString().slice(0, 10)
+      const end   = result.endDate.toISOString().slice(0, 10)
+      res.setHeader('Content-Type', 'text/csv')
+      res.setHeader('Content-Disposition', `attachment; filename="report-${start}-${end}.csv"`)
+      return res.send(result.csv)
+    }
+    ok(res, result.report)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/analytics/analytics.schemas.edge.test.ts b/api/src/modules/analytics/analytics.schemas.edge.test.ts
new file mode 100644
index 0000000..8d9e610
--- /dev/null
+++ b/api/src/modules/analytics/analytics.schemas.edge.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { reportQuerySchema, summaryQuerySchema } from './analytics.schemas'
+
+describe('analytics schema contracts', () => {
+  it('defaults summary period to the 30 day window', () => {
+    expect(summaryQuerySchema.parse({})).toEqual({ period: '30d' })
+  })
+
+  it('defaults reports to JSON while preserving explicit date range filters', () => {
+    expect(reportQuerySchema.parse({ from: '2026-01-01', to: '2026-01-31' })).toEqual({
+      from: '2026-01-01',
+      to: '2026-01-31',
+      format: 'JSON',
+    })
+  })
+
+  it('passes CSV format and period through without lowercasing surprises', () => {
+    expect(reportQuerySchema.parse({ format: 'CSV', period: 'quarter' })).toEqual({
+      format: 'CSV',
+      period: 'quarter',
+    })
+  })
+})
diff --git a/api/src/modules/analytics/analytics.schemas.ts b/api/src/modules/analytics/analytics.schemas.ts
new file mode 100644
index 0000000..c257fb9
--- /dev/null
+++ b/api/src/modules/analytics/analytics.schemas.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+export const summaryQuerySchema = z.object({
+  period: z.string().default('30d'),
+})
+
+export const reportQuerySchema = z.object({
+  from:   z.string().optional(),
+  to:     z.string().optional(),
+  format: z.string().default('JSON'),
+  period: z.string().optional(),
+})
diff --git a/api/src/modules/analytics/analytics.service.test.ts b/api/src/modules/analytics/analytics.service.test.ts
new file mode 100644
index 0000000..3d74c6c
--- /dev/null
+++ b/api/src/modules/analytics/analytics.service.test.ts
@@ -0,0 +1,150 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    reservation: {
+      count: vi.fn(),
+      aggregate: vi.fn(),
+      findMany: vi.fn(),
+      groupBy: vi.fn(),
+    },
+    vehicle: {
+      count: vi.fn(),
+    },
+    customer: {
+      count: vi.fn(),
+    },
+    subscription: {
+      findUnique: vi.fn(),
+    },
+    accountingSettings: {
+      findUnique: vi.fn(),
+    },
+  },
+}))
+
+vi.mock('../../services/financialReportService', () => ({
+  generateFinancialReport: vi.fn(),
+  toCsv: vi.fn(),
+}))
+
+import { prisma } from '../../lib/prisma'
+import { generateFinancialReport, toCsv } from '../../services/financialReportService'
+import { getDashboard, getReport, getSources, getSummary } from './analytics.service'
+
+describe('analytics.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-08T12:00:00.000Z'))
+  })
+
+  it('summarizes reservations, available vehicles, revenue, and customers for a day window', async () => {
+    vi.mocked(prisma.reservation.count).mockResolvedValue(7 as never)
+    vi.mocked(prisma.vehicle.count).mockResolvedValue(12 as never)
+    vi.mocked(prisma.reservation.aggregate).mockResolvedValue({ _sum: { totalAmount: 4800 } } as never)
+    vi.mocked(prisma.customer.count).mockResolvedValue(42 as never)
+
+    const result = await getSummary('company_1', '14d')
+
+    expect(prisma.reservation.count).toHaveBeenCalledWith({
+      where: { companyId: 'company_1', createdAt: { gte: new Date('2026-05-25T12:00:00.000Z') } },
+    })
+    expect(prisma.vehicle.count).toHaveBeenCalledWith({ where: { companyId: 'company_1', status: 'AVAILABLE' } })
+    expect(result).toEqual({
+      totalReservations: 7,
+      activeVehicles: 12,
+      totalRevenue: 4800,
+      totalCustomers: 42,
+      period: '14d',
+    })
+  })
+
+  it('builds dashboard KPIs, percentage deltas, recent reservation cards, source breakdown, and subscription summary', async () => {
+    vi.mocked(prisma.reservation.count)
+      .mockResolvedValueOnce(10 as never)
+      .mockResolvedValueOnce(5 as never)
+    vi.mocked(prisma.vehicle.count)
+      .mockResolvedValueOnce(4 as never)
+      .mockResolvedValueOnce(0 as never)
+    vi.mocked(prisma.customer.count)
+      .mockResolvedValueOnce(20 as never)
+      .mockResolvedValueOnce(25 as never)
+    vi.mocked(prisma.reservation.aggregate)
+      .mockResolvedValueOnce({ _sum: { totalAmount: 9000 } } as never)
+      .mockResolvedValueOnce({ _sum: { totalAmount: 3000 } } as never)
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([
+      {
+        id: 'reservation_abc12345',
+        contractNumber: null,
+        customer: { firstName: 'Nora', lastName: 'Driver' },
+        vehicle: { make: 'Dacia', model: 'Duster' },
+        startDate: new Date('2026-06-10T00:00:00.000Z'),
+        endDate: new Date('2026-06-12T00:00:00.000Z'),
+        status: 'CONFIRMED',
+        totalAmount: 1200,
+      },
+    ] as never)
+    vi.mocked(prisma.reservation.groupBy).mockResolvedValue([
+      { source: 'MARKETPLACE', _count: { id: 3 }, _sum: { totalAmount: 3600 } },
+      { source: 'DIRECT', _count: { id: 2 }, _sum: { totalAmount: null } },
+    ] as never)
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue({
+      status: 'ACTIVE',
+      plan: 'PRO',
+      trialEndAt: new Date('2026-06-30T00:00:00.000Z'),
+    } as never)
+
+    const result = await getDashboard('company_1')
+
+    expect(result.kpis).toEqual({
+      totalBookings: 10,
+      activeVehicles: 4,
+      monthlyRevenue: 9000,
+      totalCustomers: 20,
+      bookingsChange: 100,
+      vehiclesChange: 100,
+      revenueChange: 200,
+      customersChange: -20,
+    })
+    expect(result.recentReservations).toEqual([expect.objectContaining({
+      id: 'reservation_abc12345',
+      bookingRef: 'ABC12345',
+      customerName: 'Nora Driver',
+      vehicleName: 'Dacia Duster',
+      status: 'CONFIRMED',
+      totalAmount: 1200,
+    })])
+    expect(result.sourceBreakdown).toEqual([
+      { source: 'MARKETPLACE', count: 3, revenue: 3600 },
+      { source: 'DIRECT', count: 2, revenue: 0 },
+    ])
+    expect(result.subscription).toEqual({
+      status: 'ACTIVE',
+      planName: 'PRO',
+      trialEndsAt: new Date('2026-06-30T00:00:00.000Z'),
+    })
+  })
+
+  it('returns source groups straight from reservation grouping', async () => {
+    vi.mocked(prisma.reservation.groupBy).mockResolvedValue([{ source: 'DIRECT', _count: { id: 2 } }] as never)
+
+    await expect(getSources('company_1')).resolves.toEqual([{ source: 'DIRECT', _count: { id: 2 } }])
+    expect(prisma.reservation.groupBy).toHaveBeenCalledWith({ by: ['source'], where: { companyId: 'company_1' }, _count: { id: true } })
+  })
+
+  it('uses explicit report dates and emits CSV only when requested', async () => {
+    vi.mocked(prisma.accountingSettings.findUnique).mockResolvedValue({ reportingPeriod: 'ANNUAL' } as never)
+    vi.mocked(generateFinancialReport).mockResolvedValue({ rows: [{ label: 'Revenue', amount: 1000 }] } as never)
+    vi.mocked(toCsv).mockReturnValue('label,amount\nRevenue,1000')
+
+    const result = await getReport('company_1', {
+      from: '2026-05-01',
+      to: '2026-05-31',
+      format: 'CSV',
+    })
+
+    expect(generateFinancialReport).toHaveBeenCalledWith('company_1', new Date('2026-05-01'), new Date('2026-05-31'))
+    expect(toCsv).toHaveBeenCalledWith([{ label: 'Revenue', amount: 1000 }])
+    expect(result.csv).toBe('label,amount\nRevenue,1000')
+  })
+})
diff --git a/api/src/modules/analytics/analytics.service.ts b/api/src/modules/analytics/analytics.service.ts
new file mode 100644
index 0000000..f7046d8
--- /dev/null
+++ b/api/src/modules/analytics/analytics.service.ts
@@ -0,0 +1,100 @@
+import { prisma } from '../../lib/prisma'
+import { generateFinancialReport, toCsv } from '../../services/financialReportService'
+
+function getRangeFromPeriod(period: string) {
+  const now = new Date()
+  switch (period) {
+    case 'WEEKLY':    return { from: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000), to: now }
+    case 'QUARTERLY': return { from: new Date(now.getFullYear(), now.getMonth() - 2, 1), to: now }
+    case 'ANNUAL':    return { from: new Date(now.getFullYear(), 0, 1), to: now }
+    default:          return { from: new Date(now.getFullYear(), now.getMonth(), 1), to: now }
+  }
+}
+
+function pct(current: number, previous: number) {
+  if (previous === 0) return current > 0 ? 100 : 0
+  return Math.round(((current - previous) / previous) * 100)
+}
+
+export async function getSummary(companyId: string, period: string) {
+  const days  = parseInt(period.replace('d', '')) || 30
+  const since = new Date(Date.now() - days * 24 * 60 * 60 * 1000)
+  const [totalReservations, activeVehicles, totalRevenue, totalCustomers] = await Promise.all([
+    prisma.reservation.count({ where: { companyId, createdAt: { gte: since } } }),
+    prisma.vehicle.count({ where: { companyId, status: 'AVAILABLE' } }),
+    prisma.reservation.aggregate({ where: { companyId, status: { in: ['COMPLETED'] }, createdAt: { gte: since } }, _sum: { totalAmount: true } }),
+    prisma.customer.count({ where: { companyId } }),
+  ])
+  return { totalReservations, activeVehicles, totalRevenue: totalRevenue._sum.totalAmount ?? 0, totalCustomers, period }
+}
+
+export async function getDashboard(companyId: string) {
+  const now            = new Date()
+  const monthStart     = new Date(now.getFullYear(), now.getMonth(), 1)
+  const prevMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+  const prevMonthEnd   = new Date(monthStart.getTime() - 1)
+
+  const [
+    totalBookings, previousBookings, activeVehicles, previousActiveVehicles,
+    totalCustomers, previousCustomers, monthlyRevenueAgg, previousRevenueAgg,
+    recentReservations, sourceGroups, subscription,
+  ] = await Promise.all([
+    prisma.reservation.count({ where: { companyId, createdAt: { gte: monthStart } } }),
+    prisma.reservation.count({ where: { companyId, createdAt: { gte: prevMonthStart, lte: prevMonthEnd } } }),
+    prisma.vehicle.count({ where: { companyId, status: { in: ['AVAILABLE', 'RENTED'] } } }),
+    prisma.vehicle.count({ where: { companyId, createdAt: { lte: prevMonthEnd }, status: { in: ['AVAILABLE', 'RENTED'] } } }),
+    prisma.customer.count({ where: { companyId } }),
+    prisma.customer.count({ where: { companyId, createdAt: { lte: prevMonthEnd } } }),
+    prisma.reservation.aggregate({ where: { companyId, status: { in: ['CONFIRMED', 'ACTIVE', 'COMPLETED'] }, createdAt: { gte: monthStart } }, _sum: { totalAmount: true } }),
+    prisma.reservation.aggregate({ where: { companyId, status: { in: ['CONFIRMED', 'ACTIVE', 'COMPLETED'] }, createdAt: { gte: prevMonthStart, lte: prevMonthEnd } }, _sum: { totalAmount: true } }),
+    prisma.reservation.findMany({ where: { companyId }, include: { customer: true, vehicle: true }, orderBy: { createdAt: 'desc' }, take: 8 }),
+    prisma.reservation.groupBy({ by: ['source'], where: { companyId }, _count: { id: true }, _sum: { totalAmount: true } }),
+    prisma.subscription.findUnique({ where: { companyId } }),
+  ])
+
+  return {
+    kpis: {
+      totalBookings,
+      activeVehicles,
+      monthlyRevenue:  monthlyRevenueAgg._sum.totalAmount ?? 0,
+      totalCustomers,
+      bookingsChange:  pct(totalBookings,   previousBookings),
+      vehiclesChange:  pct(activeVehicles,  previousActiveVehicles),
+      revenueChange:   pct(monthlyRevenueAgg._sum.totalAmount ?? 0, previousRevenueAgg._sum.totalAmount ?? 0),
+      customersChange: pct(totalCustomers,  previousCustomers),
+    },
+    recentReservations: (recentReservations as any[]).map((r) => ({
+      id:           r.id,
+      bookingRef:   r.contractNumber ?? r.id.slice(-8).toUpperCase(),
+      customerName: `${r.customer.firstName} ${r.customer.lastName}`,
+      vehicleName:  `${r.vehicle.make} ${r.vehicle.model}`,
+      startDate:    r.startDate,
+      endDate:      r.endDate,
+      status:       r.status,
+      totalAmount:  r.totalAmount,
+    })),
+    sourceBreakdown: (sourceGroups as any[]).map((g) => ({
+      source:  g.source,
+      count:   g._count.id,
+      revenue: g._sum.totalAmount ?? 0,
+    })),
+    subscription: subscription ? {
+      status:      subscription.status,
+      planName:    subscription.plan,
+      trialEndsAt: subscription.trialEndAt,
+    } : null,
+  }
+}
+
+export async function getSources(companyId: string) {
+  return prisma.reservation.groupBy({ by: ['source'], where: { companyId }, _count: { id: true } })
+}
+
+export async function getReport(companyId: string, query: { from?: string; to?: string; format: string; period?: string }) {
+  const accountingSettings = await prisma.accountingSettings.findUnique({ where: { companyId } })
+  const derivedRange = getRangeFromPeriod(query.period || accountingSettings?.reportingPeriod || 'MONTHLY')
+  const startDate = query.from ? new Date(query.from) : derivedRange.from
+  const endDate   = query.to   ? new Date(query.to)   : derivedRange.to
+  const report    = await generateFinancialReport(companyId, startDate, endDate)
+  return { report, startDate, endDate, format: query.format, csv: query.format === 'CSV' ? toCsv(report.rows) : null }
+}
diff --git a/api/src/modules/auth/auth.account.routes.ts b/api/src/modules/auth/auth.account.routes.ts
new file mode 100644
index 0000000..ef389fb
--- /dev/null
+++ b/api/src/modules/auth/auth.account.routes.ts
@@ -0,0 +1,24 @@
+import { Router } from 'express'
+import { parseBody } from '../../http/validate'
+import { created, ok } from '../../http/respond'
+import { accountStartSchema } from './auth.account.schemas'
+import * as service from './auth.account.service'
+
+const router = Router()
+
+/**
+ * POST /api/v1/auth/account/start
+ *
+ * Minimal signup — Step 0 of progressive profiling.
+ * Creates a DRAFT company + OWNER employee and sends a verification email.
+ * The user must verify their email before signing in.
+ */
+router.post('/start', async (req, res, next) => {
+  try {
+    const body = parseBody(accountStartSchema, req)
+    const result = await service.startAccount(body)
+    created(res, result)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/auth/auth.account.schemas.ts b/api/src/modules/auth/auth.account.schemas.ts
new file mode 100644
index 0000000..fd870d9
--- /dev/null
+++ b/api/src/modules/auth/auth.account.schemas.ts
@@ -0,0 +1,59 @@
+import { z } from 'zod'
+
+/**
+ * Minimal signup schema — only asks for what's needed to create an identity.
+ * See progressive-signup-plan.md Section 3.
+ */
+export const accountStartSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8).max(128),
+  preferredLanguage: z.enum(['en', 'fr', 'ar']).default('en'),
+})
+
+export const companyProfileSchema = z.object({
+  firstName: z.string().min(1).max(80).optional(),
+  lastName: z.string().min(1).max(80).optional(),
+  firstNameAr: z.string().max(80).optional(),
+  lastNameAr: z.string().max(80).optional(),
+  companyName: z.string().min(2).max(120).optional(),
+  companyNameAr: z.string().max(120).optional(),
+  phone: z.string().min(1).max(80).optional(),
+  companyEmail: z.string().email().optional(),
+  streetAddress: z.string().min(1).max(200).optional(),
+  streetAddressAr: z.string().max(200).optional(),
+  city: z.string().min(1).max(120).optional(),
+  cityAr: z.string().max(120).optional(),
+  country: z.string().min(1).max(120).optional(),
+  countryAr: z.string().max(120).optional(),
+  zipCode: z.string().min(1).max(40).optional(),
+  fax: z.string().max(80).optional(),
+  yearsActive: z.string().max(80).optional(),
+})
+
+export const legalIdentitySchema = z.object({
+  legalName: z.string().min(2).max(160),
+  legalForm: z.string().min(1).max(80),
+  registrationNumber: z.string().min(1).max(120),
+  iceNumber: z.string().min(1).max(120),
+  taxId: z.string().min(1).max(120),
+  operatingLicenseNumber: z.string().min(1).max(120),
+  operatingLicenseIssuedAt: z.string().min(1).max(40),
+  operatingLicenseIssuedBy: z.string().min(1).max(160),
+})
+
+export const paymentSetupSchema = z.object({
+  paymentProvider: z.enum(['AMANPAY', 'PAYPAL']),
+  responsibleName: z.string().min(1).max(160),
+  responsibleRole: z.string().min(1).max(120),
+  responsibleIdentityNumber: z.string().min(1).max(120),
+  responsibleQualification: z.string().max(200).optional(),
+  responsiblePhone: z.string().min(1).max(80),
+  responsibleEmail: z.string().email(),
+  representativeName: z.string().max(160).optional(),
+  representativeTitle: z.string().max(120).optional(),
+})
+
+export const planSchema = z.object({
+  plan: z.enum(['STARTER', 'GROWTH', 'PRO']),
+  billingPeriod: z.enum(['MONTHLY', 'ANNUAL']),
+})
diff --git a/api/src/modules/auth/auth.account.service.ts b/api/src/modules/auth/auth.account.service.ts
new file mode 100644
index 0000000..3c89ce7
--- /dev/null
+++ b/api/src/modules/auth/auth.account.service.ts
@@ -0,0 +1,131 @@
+import bcrypt from 'bcryptjs'
+import crypto from 'crypto'
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import * as repo from './auth.company.repo'
+import type { output } from 'zod'
+import type { accountStartSchema } from './auth.account.schemas'
+
+type AccountStartInput = output<typeof accountStartSchema>
+
+function ensureDashboardBasePath(baseUrl: string) {
+  try {
+    const url = new URL(baseUrl)
+    const pathname = url.pathname.replace(/\/$/, '')
+    if (!pathname.endsWith('/dashboard')) url.pathname = `${pathname}/dashboard`
+    return url.toString().replace(/\/$/, '')
+  } catch {
+    const trimmed = baseUrl.replace(/\/$/, '')
+    return trimmed.endsWith('/dashboard') ? trimmed : `${trimmed}/dashboard`
+  }
+}
+
+/**
+ * Minimal account creation — Step 0 of progressive signup.
+ * Creates a DRAFT company + OWNER employee, sends a verification email.
+ * The user must verify their email before they can log in.
+ */
+export async function startAccount(body: AccountStartInput) {
+  if (await repo.findEmployeeByEmail(body.email)) {
+    throw new AppError('An account with this email already exists', 409, 'email_taken')
+  }
+
+  const slug = `company-${Date.now().toString(36)}`
+  const passwordHash = await bcrypt.hash(body.password, 12)
+  const verificationToken = crypto.randomBytes(32).toString('hex')
+
+  const result = await prisma.$transaction(async (tx: any) => {
+    const now = new Date()
+    const trialEndAt = new Date(now.getTime() + 90 * 24 * 60 * 60 * 1000)
+
+    const company = await tx.company.create({
+      data: {
+        name: '',
+        slug,
+        email: body.email,
+        address: {},
+        status: 'TRIALING',
+      },
+    })
+
+    await tx.brandSettings.create({
+      data: {
+        companyId: company.id,
+        displayName: body.email.split('@')[0] || 'My Workspace',
+        subdomain: slug,
+        defaultLocale: body.preferredLanguage,
+        defaultCurrency: 'MAD',
+      },
+    })
+
+    await tx.subscription.create({
+      data: {
+        companyId: company.id,
+        plan: 'STARTER',
+        billingPeriod: 'MONTHLY',
+        currency: 'MAD',
+        status: 'TRIALING',
+        trialStartAt: now,
+        trialEndAt,
+        currentPeriodStart: now,
+        currentPeriodEnd: trialEndAt,
+      },
+    })
+
+    const employee = await tx.employee.create({
+      data: {
+        companyId: company.id,
+        clerkUserId: `local_owner_${company.id}`,
+        firstName: '',
+        lastName: '',
+        email: body.email,
+        passwordHash,
+        emailVerificationToken: verificationToken,
+        role: 'OWNER',
+        preferredLanguage: body.preferredLanguage,
+        isActive: true,
+      },
+      include: { company: true },
+    })
+
+    return { employee, company }
+  })
+
+  const dashboardUrl = ensureDashboardBasePath(
+    process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+  )
+  const verifyUrl = `${dashboardUrl}/verify-email?token=${encodeURIComponent(verificationToken)}`
+
+  const emailSubjects: Record<string, string> = {
+    en: 'Verify your email — RentalDriveGo',
+    fr: 'Vérifiez votre email — RentalDriveGo',
+    ar: 'تحقق من بريدك الإلكتروني — RentalDriveGo',
+  }
+  const emailBodies: Record<string, string> = {
+    en: `<p>Welcome to RentalDriveGo!</p><p>Click the link below to verify your email and activate your account:</p><p><a href="${verifyUrl}">Verify Email</a></p><p>If you did not create this account, you can safely ignore this email.</p>`,
+    fr: `<p>Bienvenue sur RentalDriveGo !</p><p>Cliquez sur le lien ci-dessous pour vérifier votre email et activer votre compte :</p><p><a href="${verifyUrl}">Vérifier l'email</a></p><p>Si vous n'avez pas créé ce compte, ignorez cet email.</p>`,
+    ar: `<p>مرحباً بك في RentalDriveGo!</p><p>انقر على الرابط أدناه للتحقق من بريدك الإلكتروني وتفعيل حسابك:</p><p><a href="${verifyUrl}">تحقق من البريد الإلكتروني</a></p><p>إذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.</p>`,
+  }
+  const emailTexts: Record<string, string> = {
+    en: `Welcome to RentalDriveGo!\n\nVerify your email by visiting:\n${verifyUrl}\n\nIf you did not create this account, you can safely ignore this email.`,
+    fr: `Bienvenue sur RentalDriveGo !\n\nVérifiez votre email en visitant :\n${verifyUrl}\n\nSi vous n'avez pas créé ce compte, ignorez cet email.`,
+    ar: `مرحباً بك في RentalDriveGo!\n\nتحقق من بريدك الإلكتروني بزيارة:\n${verifyUrl}\n\nإذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.`,
+  }
+
+  const lang = (body.preferredLanguage === 'ar' || body.preferredLanguage === 'fr') ? body.preferredLanguage : 'en'
+
+  await sendTransactionalEmail({
+    to: body.email,
+    subject: emailSubjects[lang],
+    html: emailBodies[lang],
+    text: emailTexts[lang],
+  }).catch((err) => {
+    console.error('[AccountStart] Verification email delivery failed:', err?.message)
+  })
+
+  return {
+    message: 'Account created. Please check your email to verify your address before signing in.',
+    email: body.email,
+  }
+}
diff --git a/api/src/modules/auth/auth.company.repo.test.ts b/api/src/modules/auth/auth.company.repo.test.ts
new file mode 100644
index 0000000..78a53de
--- /dev/null
+++ b/api/src/modules/auth/auth.company.repo.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+
+import { createCompanySignup } from './auth.company.repo'
+
+function makeDb() {
+  return {
+    company: { create: vi.fn().mockResolvedValue({ id: 'company_1', name: 'Atlas Cars', slug: 'atlas-cars' }) },
+    brandSettings: { create: vi.fn().mockResolvedValue({}) },
+    contractSettings: { create: vi.fn().mockResolvedValue({}) },
+    subscription: { create: vi.fn().mockResolvedValue({}) },
+    employee: { create: vi.fn().mockResolvedValue({ id: 'employee_1', email: 'owner@example.com' }) },
+  }
+}
+
+const baseInput = {
+  companyName: 'Atlas Cars',
+  legalName: 'Atlas Cars SARL',
+  slug: 'atlas-cars',
+  ownerEmail: 'owner@example.com',
+  companyEmail: 'contact@example.com',
+  companyPhone: '+212600000000',
+  streetAddress: '1 Fleet Street',
+  city: 'Casablanca',
+  country: 'Morocco',
+  zipCode: '20000',
+  legalForm: 'SARL',
+  managerName: 'Aya Benali',
+  iceNumber: 'ICE123',
+  taxId: 'TAX123',
+  operatingLicenseNumber: 'LIC123',
+  operatingLicenseIssuedAt: '2026-01-01',
+  operatingLicenseIssuedBy: 'Transport Authority',
+  fax: '',
+  yearsActive: '5',
+  representativeName: '',
+  representativeTitle: '',
+  responsibleName: 'Omar Alaoui',
+  responsibleRole: 'Manager',
+  responsibleIdentityNumber: 'ID123',
+  responsibleQualification: '',
+  responsiblePhone: '+212611111111',
+  responsibleEmail: 'responsible@example.com',
+  currency: 'MAD' as const,
+  registrationNumber: 'REG123',
+  plan: 'GROWTH' as const,
+  billingPeriod: 'ANNUAL' as const,
+  preferredLanguage: 'fr' as const,
+  firstName: 'Aya',
+  lastName: 'Benali',
+  passwordHash: 'hashed-password',
+  now: new Date('2026-06-01T00:00:00.000Z'),
+  trialEndAt: new Date('2026-08-30T00:00:00.000Z'),
+}
+
+describe('auth.company.repo.createCompanySignup', () => {
+  it('creates the company, tenant settings, trial subscription, and active owner in one transaction client', async () => {
+    const db = makeDb()
+
+    await expect(createCompanySignup(db as never, baseInput)).resolves.toEqual({
+      company: { id: 'company_1', name: 'Atlas Cars', slug: 'atlas-cars' },
+      employee: { id: 'employee_1', email: 'owner@example.com' },
+    })
+
+    expect(db.company.create).toHaveBeenCalledWith({ data: expect.objectContaining({
+      name: 'Atlas Cars',
+      slug: 'atlas-cars',
+      email: 'contact@example.com',
+      status: 'TRIALING',
+      address: expect.objectContaining({
+        legalName: 'Atlas Cars SARL',
+        companyEmail: 'contact@example.com',
+        fax: null,
+        representativeName: null,
+        responsibleEmail: 'responsible@example.com',
+      }),
+    }) })
+
+    expect(db.brandSettings.create).toHaveBeenCalledWith({ data: expect.objectContaining({
+      companyId: 'company_1',
+      displayName: 'Atlas Cars',
+      subdomain: 'atlas-cars',
+      defaultLocale: 'fr',
+      defaultCurrency: 'MAD',
+    }) })
+
+    expect(db.contractSettings.create).toHaveBeenCalledWith({ data: expect.objectContaining({
+      companyId: 'company_1',
+      registrationNumber: 'REG123',
+      taxId: 'TAX123',
+    }) })
+
+    expect(db.subscription.create).toHaveBeenCalledWith({ data: expect.objectContaining({
+      companyId: 'company_1',
+      plan: 'GROWTH',
+      billingPeriod: 'ANNUAL',
+      status: 'TRIALING',
+      trialStartAt: baseInput.now,
+      trialEndAt: baseInput.trialEndAt,
+    }) })
+
+    expect(db.employee.create).toHaveBeenCalledWith({ data: expect.objectContaining({
+      companyId: 'company_1',
+      clerkUserId: 'local_owner_company_1',
+      email: 'owner@example.com',
+      role: 'OWNER',
+      preferredLanguage: 'fr',
+      isActive: true,
+    }) })
+  })
+})
diff --git a/api/src/modules/auth/auth.company.repo.ts b/api/src/modules/auth/auth.company.repo.ts
new file mode 100644
index 0000000..4da8026
--- /dev/null
+++ b/api/src/modules/auth/auth.company.repo.ts
@@ -0,0 +1,146 @@
+import { prisma } from '../../lib/prisma'
+
+type DbClient = Pick<typeof prisma, 'company' | 'brandSettings' | 'contractSettings' | 'subscription' | 'employee'>
+
+type CompanySignupInput = {
+  companyName: string
+  legalName: string
+  slug: string
+  ownerEmail: string
+  companyEmail: string
+  companyPhone: string
+  streetAddress: string
+  city: string
+  country: string
+  zipCode: string
+  legalForm: string
+  managerName: string
+  iceNumber: string
+  taxId: string
+  operatingLicenseNumber: string
+  operatingLicenseIssuedAt: string
+  operatingLicenseIssuedBy: string
+  fax?: string
+  yearsActive: string
+  representativeName?: string
+  representativeTitle?: string
+  responsibleName: string
+  responsibleRole: string
+  responsibleIdentityNumber: string
+  responsibleQualification?: string
+  responsiblePhone: string
+  responsibleEmail: string
+  currency: 'MAD'
+  registrationNumber: string
+  plan: 'STARTER' | 'GROWTH' | 'PRO'
+  billingPeriod: 'MONTHLY' | 'ANNUAL'
+  preferredLanguage: 'en' | 'fr' | 'ar'
+  firstName: string
+  lastName: string
+  passwordHash: string
+  now: Date
+  trialEndAt: Date
+}
+
+export function findCompanyBySlug(slug: string) {
+  return prisma.company.findUnique({ where: { slug } })
+}
+
+export function findCompanyByEmail(email: string) {
+  return prisma.company.findUnique({ where: { email } })
+}
+
+export function findEmployeeByEmail(email: string) {
+  return prisma.employee.findFirst({ where: { email } })
+}
+
+export async function createCompanySignup(db: DbClient, input: CompanySignupInput) {
+  const company = await db.company.create({
+    data: {
+      name: input.companyName,
+      slug: input.slug,
+      email: input.companyEmail,
+      phone: input.companyPhone,
+      address: {
+        streetAddress: input.streetAddress,
+        city: input.city,
+        country: input.country,
+        zipCode: input.zipCode,
+        legalName: input.legalName,
+        legalForm: input.legalForm,
+        companyEmail: input.companyEmail,
+        managerName: input.managerName,
+        iceNumber: input.iceNumber,
+        operatingLicenseNumber: input.operatingLicenseNumber,
+        operatingLicenseIssuedAt: input.operatingLicenseIssuedAt,
+        operatingLicenseIssuedBy: input.operatingLicenseIssuedBy,
+        fax: input.fax || null,
+        yearsActive: input.yearsActive,
+        representativeName: input.representativeName || null,
+        representativeTitle: input.representativeTitle || null,
+        responsibleName: input.responsibleName,
+        responsibleRole: input.responsibleRole,
+        responsibleIdentityNumber: input.responsibleIdentityNumber,
+        responsibleQualification: input.responsibleQualification || null,
+        responsiblePhone: input.responsiblePhone,
+        responsibleEmail: input.responsibleEmail,
+      },
+      status: 'TRIALING',
+    },
+  })
+
+  await db.brandSettings.create({
+    data: {
+      companyId: company.id,
+      displayName: input.companyName,
+      subdomain: input.slug,
+      publicEmail: input.companyEmail,
+      publicPhone: input.companyPhone,
+      publicAddress: input.streetAddress,
+      publicCity: input.city,
+      publicCountry: input.country,
+      defaultLocale: input.preferredLanguage,
+      defaultCurrency: input.currency,
+    },
+  })
+
+  await db.contractSettings.create({
+    data: {
+      companyId: company.id,
+      legalName: input.legalName,
+      registrationNumber: input.registrationNumber,
+      taxId: input.taxId,
+    },
+  })
+
+  await db.subscription.create({
+    data: {
+      companyId: company.id,
+      plan: input.plan,
+      billingPeriod: input.billingPeriod,
+      currency: input.currency,
+      status: 'TRIALING',
+      trialStartAt: input.now,
+      trialEndAt: input.trialEndAt,
+      currentPeriodStart: input.now,
+      currentPeriodEnd: input.trialEndAt,
+    },
+  })
+
+  const employee = await db.employee.create({
+    data: {
+      companyId: company.id,
+      clerkUserId: `local_owner_${company.id}`,
+      firstName: input.firstName,
+      lastName: input.lastName,
+      email: input.ownerEmail,
+      phone: input.companyPhone,
+      passwordHash: input.passwordHash,
+      role: 'OWNER',
+      preferredLanguage: input.preferredLanguage,
+      isActive: true,
+    },
+  })
+
+  return { company, employee }
+}
diff --git a/api/src/modules/auth/auth.company.routes.ts b/api/src/modules/auth/auth.company.routes.ts
new file mode 100644
index 0000000..edd8b90
--- /dev/null
+++ b/api/src/modules/auth/auth.company.routes.ts
@@ -0,0 +1,26 @@
+import { Router } from 'express'
+import { parseBody } from '../../http/validate'
+import { created } from '../../http/respond'
+import { companySignupSchema } from './auth.company.schemas'
+import * as service from './auth.company.service'
+
+const router = Router()
+
+router.post('/signup', async (req, res, next) => {
+  try {
+    const body = parseBody(companySignupSchema, req)
+    created(res, await service.signup(body))
+  } catch (err) { next(err) }
+})
+
+router.post('/complete-signup', (_req, res) => {
+  service.completeSignupDisabled()
+  res.end()
+})
+
+router.post('/verify-email', (_req, res) => {
+  service.verifyEmailDisabled()
+  res.end()
+})
+
+export default router
diff --git a/api/src/modules/auth/auth.company.schemas.ts b/api/src/modules/auth/auth.company.schemas.ts
new file mode 100644
index 0000000..c55d4da
--- /dev/null
+++ b/api/src/modules/auth/auth.company.schemas.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod'
+
+export const companySignupSchema = z.object({
+  firstName: z.string().min(1).max(80),
+  lastName: z.string().min(1).max(80),
+  email: z.string().email(),
+  password: z.string().min(8).max(128),
+  companyName: z.string().min(2).max(120),
+  legalName: z.string().min(2).max(160),
+  legalForm: z.string().min(1).max(80),
+  registrationNumber: z.string().min(1).max(120),
+  iceNumber: z.string().min(1).max(120),
+  taxId: z.string().min(1).max(120),
+  operatingLicenseNumber: z.string().min(1).max(120),
+  operatingLicenseIssuedAt: z.string().min(1).max(40),
+  operatingLicenseIssuedBy: z.string().min(1).max(160),
+  streetAddress: z.string().min(1).max(200),
+  city: z.string().min(1).max(120),
+  country: z.string().min(1).max(120),
+  zipCode: z.string().min(1).max(40),
+  companyPhone: z.string().min(1).max(80),
+  companyEmail: z.string().email(),
+  fax: z.string().max(80).optional(),
+  yearsActive: z.string().min(1).max(80),
+  representativeName: z.string().max(160).optional(),
+  representativeTitle: z.string().max(120).optional(),
+  responsibleName: z.string().min(1).max(160),
+  responsibleRole: z.string().min(1).max(120),
+  responsibleIdentityNumber: z.string().min(1).max(120),
+  responsibleQualification: z.string().max(200).optional(),
+  responsiblePhone: z.string().min(1).max(80),
+  responsibleEmail: z.string().email(),
+  preferredLanguage: z.enum(['en', 'fr', 'ar']).default('en'),
+  plan: z.enum(['STARTER', 'GROWTH', 'PRO']),
+  billingPeriod: z.enum(['MONTHLY', 'ANNUAL']),
+  currency: z.literal('MAD'),
+  paymentProvider: z.enum(['AMANPAY', 'PAYPAL']),
+})
diff --git a/api/src/modules/auth/auth.company.service.test.ts b/api/src/modules/auth/auth.company.service.test.ts
new file mode 100644
index 0000000..fcfb483
--- /dev/null
+++ b/api/src/modules/auth/auth.company.service.test.ts
@@ -0,0 +1,138 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import * as repo from './auth.company.repo'
+import * as service from './auth.company.service'
+import { sendNotification } from '../../services/notificationService'
+
+vi.mock('bcryptjs', () => ({ default: { hash: vi.fn().mockResolvedValue('hashed-password') } }))
+vi.mock('../../lib/prisma', () => ({ prisma: { $transaction: vi.fn() } }))
+vi.mock('./auth.company.repo', () => ({
+  findCompanyBySlug: vi.fn(),
+  findCompanyByEmail: vi.fn(),
+  findEmployeeByEmail: vi.fn(),
+  createCompanySignup: vi.fn(),
+}))
+vi.mock('../../services/notificationService', () => ({ sendNotification: vi.fn() }))
+
+const body = {
+  firstName: 'Aya',
+  lastName: 'Benali',
+  email: 'owner@example.com',
+  password: 'super-secret',
+  companyName: 'Atlas & Desert Cars!!!',
+  legalName: 'Atlas Cars SARL',
+  legalForm: 'SARL',
+  registrationNumber: 'REG123',
+  iceNumber: 'ICE123',
+  taxId: 'TAX123',
+  operatingLicenseNumber: 'LIC123',
+  operatingLicenseIssuedAt: '2026-01-01',
+  operatingLicenseIssuedBy: 'Transport Authority',
+  streetAddress: '1 Fleet Street',
+  city: 'Casablanca',
+  country: 'Morocco',
+  zipCode: '20000',
+  companyPhone: '+212600000000',
+  companyEmail: 'contact@example.com',
+  yearsActive: '5',
+  responsibleName: 'Omar Alaoui',
+  responsibleRole: 'Manager',
+  responsibleIdentityNumber: 'ID123',
+  responsiblePhone: '+212611111111',
+  responsibleEmail: 'responsible@example.com',
+  preferredLanguage: 'fr' as const,
+  plan: 'PRO' as const,
+  billingPeriod: 'MONTHLY' as const,
+  currency: 'MAD' as const,
+  paymentProvider: 'PAYPAL' as const,
+}
+
+describe('auth.company.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(repo.findCompanyByEmail).mockResolvedValue(null)
+    vi.mocked(repo.findEmployeeByEmail).mockResolvedValue(null)
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(null)
+    vi.mocked(repo.createCompanySignup).mockResolvedValue({
+      company: { id: 'company_1', name: 'Atlas & Desert Cars!!!', slug: 'atlas-desert-cars' },
+      employee: { id: 'employee_1' },
+    } as never)
+    vi.mocked(prisma.$transaction).mockImplementation(async (fn: any) => fn({ tx: true }))
+    vi.mocked(sendNotification).mockResolvedValue([{ channel: 'EMAIL', success: true }] as never)
+  })
+
+  it('rejects duplicate company contact email before hashing or transaction work', async () => {
+    vi.mocked(repo.findCompanyByEmail).mockResolvedValue({ id: 'company_existing' } as never)
+
+    await expect(service.signup(body)).rejects.toMatchObject({ statusCode: 409, error: 'company_email_taken' })
+    expect(prisma.$transaction).not.toHaveBeenCalled()
+  })
+
+  it('rejects duplicate owner email before creating tenant data', async () => {
+    vi.mocked(repo.findEmployeeByEmail).mockResolvedValue({ id: 'employee_existing' } as never)
+
+    await expect(service.signup(body)).rejects.toMatchObject({ statusCode: 409, error: 'owner_email_taken' })
+    expect(prisma.$transaction).not.toHaveBeenCalled()
+  })
+
+  it('generates a stable slug, creates the tenant signup, sends notification, and presents the workspace result', async () => {
+    const result = await service.signup(body)
+
+    expect(result).toEqual(expect.objectContaining({
+      companyId: 'company_1',
+      companyName: 'Atlas & Desert Cars!!!',
+      slug: 'atlas-desert-cars',
+      nextStep: 'workspace_created',
+      emailDelivery: { channel: 'EMAIL', success: true },
+    }))
+    expect(result.trialEndsAt).toEqual(expect.any(String))
+    expect(repo.findCompanyBySlug).toHaveBeenCalledWith('atlas-desert-cars')
+    expect(repo.createCompanySignup).toHaveBeenCalledWith({ tx: true }, expect.objectContaining({
+      slug: 'atlas-desert-cars',
+      ownerEmail: 'owner@example.com',
+      passwordHash: 'hashed-password',
+      managerName: 'Aya Benali',
+      trialEndAt: expect.any(Date),
+    }))
+    expect(sendNotification).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'ACCOUNT_CREATED',
+      companyId: 'company_1',
+      employeeId: 'employee_1',
+      email: 'owner@example.com',
+      channels: ['EMAIL', 'IN_APP'],
+      locale: 'fr',
+      templateVariables: expect.objectContaining({
+        firstName: 'Aya',
+        companyName: 'Atlas & Desert Cars!!!',
+        paymentProvider: 'PAYPAL',
+      }),
+    }))
+  })
+
+  it('increments the slug when the clean base slug is already taken', async () => {
+    vi.mocked(repo.findCompanyBySlug)
+      .mockResolvedValueOnce({ id: 'existing' } as never)
+      .mockResolvedValueOnce(null)
+
+    await service.signup(body)
+
+    expect(repo.findCompanyBySlug).toHaveBeenNthCalledWith(1, 'atlas-desert-cars')
+    expect(repo.findCompanyBySlug).toHaveBeenNthCalledWith(2, 'atlas-desert-cars-2')
+    expect(repo.createCompanySignup).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ slug: 'atlas-desert-cars-2' }))
+  })
+
+  it('keeps signup successful when notification delivery fails', async () => {
+    vi.mocked(sendNotification).mockRejectedValue(new Error('smtp down'))
+
+    await expect(service.signup(body)).resolves.toMatchObject({
+      companyId: 'company_1',
+      emailDelivery: { attempted: false, success: false, error: null },
+    })
+  })
+
+  it('exposes removed legacy auth endpoints as explicit gone errors', () => {
+    expect(() => service.completeSignupDisabled()).toThrow(AppError)
+    expect(() => service.verifyEmailDisabled()).toThrow(AppError)
+  })
+})
diff --git a/api/src/modules/auth/auth.company.service.ts b/api/src/modules/auth/auth.company.service.ts
new file mode 100644
index 0000000..832fdf0
--- /dev/null
+++ b/api/src/modules/auth/auth.company.service.ts
@@ -0,0 +1,123 @@
+import bcrypt from 'bcryptjs'
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import { sendNotification } from '../../services/notificationService'
+import {
+  coerceNotificationLocale,
+  localizeBillingPeriod,
+  localizePlanName,
+} from '../../services/notificationLocalizationService'
+import { presentCompanySignup } from './auth.presenter'
+import * as repo from './auth.company.repo'
+import { companySignupSchema } from './auth.company.schemas'
+import type { output } from 'zod'
+
+type CompanySignupInput = output<typeof companySignupSchema>
+const TRIAL_PERIOD_DAYS = 90
+
+function slugify(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 50) || 'company'
+}
+
+async function generateUniqueSlug(baseName: string) {
+  const base = slugify(baseName)
+
+  for (let attempt = 0; attempt < 25; attempt++) {
+    const slug = attempt === 0 ? base : `${base}-${attempt + 1}`
+    const existing = await repo.findCompanyBySlug(slug)
+    if (!existing) return slug
+  }
+
+  return `${base}-${Date.now().toString(36)}`
+}
+
+export async function signup(body: CompanySignupInput) {
+  if (await repo.findCompanyByEmail(body.companyEmail)) {
+    throw new AppError('A company account with this contact email already exists', 409, 'company_email_taken')
+  }
+
+  if (await repo.findEmployeeByEmail(body.email)) {
+    throw new AppError('An employee account with this owner email already exists', 409, 'owner_email_taken')
+  }
+
+  const slug = await generateUniqueSlug(body.companyName)
+  const now = new Date()
+  const trialEndAt = new Date(now.getTime() + TRIAL_PERIOD_DAYS * 24 * 60 * 60 * 1000)
+  const passwordHash = await bcrypt.hash(body.password, 12)
+
+  const result = await prisma.$transaction((tx: any) => repo.createCompanySignup(tx, {
+    companyName: body.companyName,
+    legalName: body.legalName,
+    slug,
+    ownerEmail: body.email,
+    companyEmail: body.companyEmail,
+    companyPhone: body.companyPhone,
+    streetAddress: body.streetAddress,
+    city: body.city,
+    country: body.country,
+    zipCode: body.zipCode,
+    legalForm: body.legalForm,
+    managerName: `${body.firstName} ${body.lastName}`.trim(),
+    iceNumber: body.iceNumber,
+    taxId: body.taxId,
+    operatingLicenseNumber: body.operatingLicenseNumber,
+    operatingLicenseIssuedAt: body.operatingLicenseIssuedAt,
+    operatingLicenseIssuedBy: body.operatingLicenseIssuedBy,
+    fax: body.fax,
+    yearsActive: body.yearsActive,
+    representativeName: body.representativeName,
+    representativeTitle: body.representativeTitle,
+    responsibleName: body.responsibleName,
+    responsibleRole: body.responsibleRole,
+    responsibleIdentityNumber: body.responsibleIdentityNumber,
+    responsibleQualification: body.responsibleQualification,
+    responsiblePhone: body.responsiblePhone,
+    responsibleEmail: body.responsibleEmail,
+    currency: body.currency,
+    registrationNumber: body.registrationNumber,
+    plan: body.plan,
+    billingPeriod: body.billingPeriod,
+    preferredLanguage: body.preferredLanguage,
+    firstName: body.firstName,
+    lastName: body.lastName,
+    passwordHash,
+    now,
+    trialEndAt,
+  }))
+
+  const lang = coerceNotificationLocale(body.preferredLanguage)
+  const emailResult = await sendNotification({
+    type: 'ACCOUNT_CREATED',
+    companyId: result.company.id,
+    employeeId: result.employee.id,
+    email: body.email,
+    channels: ['EMAIL', 'IN_APP'],
+    locale: lang,
+    templateKey: 'account.created',
+    templateVariables: {
+      firstName: body.firstName,
+      companyName: body.companyName,
+      planName: localizePlanName(body.plan, lang),
+      billingPeriodLabel: localizeBillingPeriod(body.billingPeriod, lang),
+      currency: body.currency,
+      paymentProvider: body.paymentProvider,
+      trialEndDate: trialEndAt,
+    },
+  }).catch(() => [])
+
+  const emailDelivery = (emailResult as Array<{ channel?: string }>).find((entry) => entry.channel === 'EMAIL')
+
+  return presentCompanySignup({
+    company: result.company,
+    trialEndAt,
+    emailDelivery,
+  })
+}
+
+export function completeSignupDisabled() {
+  throw new AppError('Clerk-based signup has been removed. Use /auth/company/signup instead.', 410, 'disabled')
+}
+
+export function verifyEmailDisabled() {
+  throw new AppError('Email verification resend via Clerk has been removed from this project.', 410, 'disabled')
+}
diff --git a/api/src/modules/auth/auth.employee.repo.edge.test.ts b/api/src/modules/auth/auth.employee.repo.edge.test.ts
new file mode 100644
index 0000000..f10de0d
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.repo.edge.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const prismaMock = vi.hoisted(() => ({
+  employee: {
+    findUnique: vi.fn(),
+    findFirst: vi.fn(),
+    update: vi.fn(),
+  },
+}))
+
+vi.mock('../../lib/prisma', () => ({ prisma: prismaMock }))
+
+import * as repo from './auth.employee.repo'
+
+describe('auth.employee.repo query boundaries', () => {
+  it('loads employee sessions with company context by id', async () => {
+    await repo.findEmployeeWithCompanyById('employee_1')
+
+    expect(prismaMock.employee.findUnique).toHaveBeenCalledWith({
+      where: { id: 'employee_1' },
+      include: { company: true },
+    })
+  })
+
+  it('looks up employee login emails case-insensitively and includes company context', async () => {
+    await repo.findEmployeeWithCompanyByEmail('Agent@Example.TEST')
+
+    expect(prismaMock.employee.findFirst).toHaveBeenCalledWith({
+      where: { email: { equals: 'Agent@Example.TEST', mode: 'insensitive' } },
+      include: { company: true },
+    })
+  })
+
+  it('only sends forgot-password emails to active employees', async () => {
+    await repo.findActiveEmployeeByEmail('agent@example.test')
+
+    expect(prismaMock.employee.findFirst).toHaveBeenCalledWith({
+      where: {
+        email: { equals: 'agent@example.test', mode: 'insensitive' },
+        isActive: true,
+      },
+    })
+  })
+
+  it('requires unexpired reset tokens for stored-token password reset lookup', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+
+    await repo.findEmployeeByResetToken('reset_123')
+
+    expect(prismaMock.employee.findFirst).toHaveBeenCalledWith({
+      where: {
+        passwordResetToken: 'reset_123',
+        passwordResetExpiresAt: { gt: new Date('2026-06-09T12:00:00.000Z') },
+      },
+    })
+    vi.useRealTimers()
+  })
+
+  it('clears stored reset token fields when password changes', async () => {
+    await repo.resetPassword('employee_1', 'hash_new')
+
+    expect(prismaMock.employee.update).toHaveBeenCalledWith({
+      where: { id: 'employee_1' },
+      data: {
+        passwordHash: 'hash_new',
+        passwordResetToken: null,
+        passwordResetExpiresAt: null,
+      },
+    })
+  })
+})
diff --git a/api/src/modules/auth/auth.employee.repo.test.ts b/api/src/modules/auth/auth.employee.repo.test.ts
new file mode 100644
index 0000000..ecb93f6
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.repo.test.ts
@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: {
+      findFirst: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import { findActiveEmployeeByEmail, findEmployeeWithCompanyByEmail } from './auth.employee.repo'
+
+describe('auth.employee.repo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('looks up employee login email case-insensitively', async () => {
+    await findEmployeeWithCompanyByEmail('Owner@Example.com')
+
+    expect(prisma.employee.findFirst).toHaveBeenCalledWith({
+      where: {
+        email: {
+          equals: 'Owner@Example.com',
+          mode: 'insensitive',
+        },
+      },
+      include: { company: true },
+    })
+  })
+
+  it('looks up active employee reset email case-insensitively', async () => {
+    await findActiveEmployeeByEmail('Owner@Example.com')
+
+    expect(prisma.employee.findFirst).toHaveBeenCalledWith({
+      where: {
+        email: {
+          equals: 'Owner@Example.com',
+          mode: 'insensitive',
+        },
+        isActive: true,
+      },
+    })
+  })
+})
diff --git a/api/src/modules/auth/auth.employee.repo.ts b/api/src/modules/auth/auth.employee.repo.ts
new file mode 100644
index 0000000..25549c5
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.repo.ts
@@ -0,0 +1,96 @@
+import { prisma } from '../../lib/prisma'
+
+export function findEmployeeWithCompanyById(id: string) {
+  return prisma.employee.findUnique({
+    where: { id },
+    include: { company: true },
+  })
+}
+
+export function findEmployeeById(id: string) {
+  return prisma.employee.findUnique({
+    where: { id },
+  })
+}
+
+export function findEmployeeWithCompanyByEmail(email: string) {
+  return prisma.employee.findFirst({
+    where: {
+      email: {
+        equals: email,
+        mode: 'insensitive',
+      },
+    },
+    include: { company: true },
+  })
+}
+
+export function findActiveEmployeeByEmail(email: string) {
+  return prisma.employee.findFirst({
+    where: {
+      email: {
+        equals: email,
+        mode: 'insensitive',
+      },
+      isActive: true,
+    },
+  })
+}
+
+export function setPasswordResetToken(id: string, passwordResetToken: string, passwordResetExpiresAt: Date) {
+  return prisma.employee.update({
+    where: { id },
+    data: { passwordResetToken, passwordResetExpiresAt },
+  })
+}
+
+export function updatePreferredLanguage(id: string, preferredLanguage: 'en' | 'fr' | 'ar') {
+  return prisma.employee.update({
+    where: { id },
+    data: { preferredLanguage },
+  })
+}
+
+export function findEmployeeByResetToken(token: string) {
+  return prisma.employee.findFirst({
+    where: {
+      passwordResetToken: token,
+      passwordResetExpiresAt: { gt: new Date() },
+    },
+  })
+}
+
+export function resetPassword(id: string, passwordHash: string) {
+  return prisma.employee.update({
+    where: { id },
+    data: {
+      passwordHash,
+      passwordResetToken: null,
+      passwordResetExpiresAt: null,
+    },
+  })
+}
+
+export function setEmailVerificationToken(id: string, token: string) {
+  return prisma.employee.update({
+    where: { id },
+    data: { emailVerificationToken: token },
+  })
+}
+
+export function findEmployeeByVerificationToken(token: string) {
+  return prisma.employee.findFirst({
+    where: { emailVerificationToken: token },
+    include: { company: true },
+  })
+}
+
+export function verifyEmployeeEmail(id: string) {
+  return prisma.employee.update({
+    where: { id },
+    data: {
+      emailVerified: new Date(),
+      emailVerificationToken: null,
+    },
+  })
+}
diff --git a/api/src/modules/auth/auth.employee.routes.ts b/api/src/modules/auth/auth.employee.routes.ts
new file mode 100644
index 0000000..a5e0ca5
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.routes.ts
@@ -0,0 +1,78 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { parseBody } from '../../http/validate'
+import { ok } from '../../http/respond'
+import { setSessionCookie, clearSessionCookie } from '../../security/sessionCookies'
+import { getEmployeeMenu } from '../menu/menu.service'
+import {
+  employeeForgotPasswordSchema,
+  employeeLanguageSchema,
+  employeeLoginSchema,
+  employeeResetPasswordSchema,
+} from './auth.employee.schemas'
+import * as service from './auth.employee.service'
+
+const router = Router()
+
+router.get('/me', requireCompanyAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.getMe(req.employee.id))
+  } catch (err) { next(err) }
+})
+
+router.get('/menu', requireCompanyAuth, async (req, res, next) => {
+  try {
+    ok(res, await getEmployeeMenu(req.employee.id))
+  } catch (err) { next(err) }
+})
+
+router.post('/login', async (req, res, next) => {
+  try {
+    const body = parseBody(employeeLoginSchema, req)
+    const result = await service.login(body)
+    if ('token' in result) setSessionCookie(res, 'employee', result.token, 8 * 60 * 60 * 1000)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/logout', (_req, res) => {
+  clearSessionCookie(res, 'employee')
+  ok(res, { success: true })
+})
+
+router.post('/forgot-password', async (req, res, next) => {
+  try {
+    const { email } = parseBody(employeeForgotPasswordSchema, req)
+    ok(res, await service.forgotPassword(email))
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/language', requireCompanyAuth, async (req, res, next) => {
+  try {
+    const { language } = parseBody(employeeLanguageSchema, req)
+    ok(res, await service.updateLanguage(req.employee.id, language))
+  } catch (err) { next(err) }
+})
+
+router.post('/reset-password', async (req, res, next) => {
+  try {
+    const { token, password } = parseBody(employeeResetPasswordSchema, req)
+    ok(res, await service.resetPassword(token, password))
+  } catch (err) { next(err) }
+})
+
+router.post('/verify-email', async (req, res, next) => {
+  try {
+    const { token } = parseBody(employeeResetPasswordSchema.pick({ token: true }), req)
+    ok(res, await service.verifyEmail(token))
+  } catch (err) { next(err) }
+})
+
+router.post('/resend-verification', async (req, res, next) => {
+  try {
+    const { email } = parseBody(employeeForgotPasswordSchema, req)
+    ok(res, await service.resendVerification(email))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/auth/auth.employee.schemas.ts b/api/src/modules/auth/auth.employee.schemas.ts
new file mode 100644
index 0000000..602e7de
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.schemas.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+export const employeeLoginSchema = z.object({
+  email: z.string().email().max(255).trim().toLowerCase(),
+  password: z.string().max(128),
+})
+
+export const employeeForgotPasswordSchema = z.object({
+  email: z.string().email().max(255).trim().toLowerCase(),
+})
+
+export const employeeLanguageSchema = z.object({
+  language: z.enum(['en', 'fr', 'ar']),
+})
+
+export const employeeResetPasswordSchema = z.object({
+  token: z.string().min(1),
+  password: z.string().min(8).max(128),
+})
diff --git a/api/src/modules/auth/auth.employee.service.edge.test.ts b/api/src/modules/auth/auth.employee.service.edge.test.ts
new file mode 100644
index 0000000..0cda582
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.service.edge.test.ts
@@ -0,0 +1,140 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('bcryptjs', () => ({
+  default: {
+    compare: vi.fn(),
+    hash: vi.fn(),
+  },
+}))
+vi.mock('../../services/notificationService', () => ({ sendTransactionalEmail: vi.fn() }))
+vi.mock('./auth.employee.repo', () => ({
+  findEmployeeWithCompanyById: vi.fn(),
+  findEmployeeWithCompanyByEmail: vi.fn(),
+  findActiveEmployeeByEmail: vi.fn(),
+  findEmployeeByResetToken: vi.fn(),
+  findEmployeeById: vi.fn(),
+  updatePreferredLanguage: vi.fn(),
+  resetPassword: vi.fn(),
+}))
+
+import bcrypt from 'bcryptjs'
+import { AppError } from '../../http/errors'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import * as repo from './auth.employee.repo'
+import * as service from './auth.employee.service'
+
+const employee = {
+  id: 'employee_1',
+  email: 'agent@example.test',
+  firstName: 'Aya',
+  lastName: 'Agent',
+  role: 'AGENT',
+  preferredLanguage: 'fr',
+  companyId: 'company_1',
+  isActive: true,
+  passwordHash: 'hash_old',
+  company: { name: 'Atlas Cars', slug: 'atlas' },
+}
+
+describe('auth.employee.service edge behavior', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+    process.env.JWT_EXPIRY = '8h'
+    delete process.env.DASHBOARD_URL
+    delete process.env.NEXT_PUBLIC_DASHBOARD_URL
+    vi.mocked(bcrypt.compare).mockResolvedValue(true as never)
+    vi.mocked(bcrypt.hash).mockResolvedValue('hash_new' as never)
+  })
+
+  it('rejects inactive employee sessions before presenting tenant data', async () => {
+    vi.mocked(repo.findEmployeeWithCompanyById).mockResolvedValue({ ...employee, isActive: false } as never)
+
+    await expect(service.getMe('employee_1')).rejects.toMatchObject({
+      statusCode: 401,
+      error: 'unauthenticated',
+    })
+  })
+
+  it('logs in active employees with a signed token and company context', async () => {
+    vi.mocked(repo.findEmployeeWithCompanyByEmail).mockResolvedValue(employee as never)
+
+    const result = await service.login({ email: 'agent@example.test', password: 'correct-password' })
+
+    expect(bcrypt.compare).toHaveBeenCalledWith('correct-password', 'hash_old')
+    expect(result).toMatchObject({
+      token: expect.any(String),
+      employee: {
+        id: 'employee_1',
+        companyId: 'company_1',
+        companyName: 'Atlas Cars',
+        companySlug: 'atlas',
+      },
+    })
+  })
+
+  it('distinguishes employees without passwords from wrong credentials', async () => {
+    vi.mocked(repo.findEmployeeWithCompanyByEmail).mockResolvedValue({ ...employee, passwordHash: null } as never)
+
+    await expect(service.login({ email: 'agent@example.test', password: 'anything' })).rejects.toMatchObject({
+      statusCode: 401,
+      error: 'password_not_set',
+    })
+    expect(bcrypt.compare).not.toHaveBeenCalled()
+  })
+
+  it('sends reset links to active employees using the dashboard base path exactly once', async () => {
+    process.env.DASHBOARD_URL = 'https://tenant.example.test/app'
+    vi.mocked(repo.findActiveEmployeeByEmail).mockResolvedValue(employee as never)
+    vi.mocked(sendTransactionalEmail).mockResolvedValue({ success: true } as never)
+
+    await expect(service.forgotPassword('agent@example.test')).resolves.toEqual({
+      message: 'If that email is registered, a reset link has been sent.',
+    })
+
+    expect(sendTransactionalEmail).toHaveBeenCalledWith(expect.objectContaining({
+      to: 'agent@example.test',
+      subject: expect.any(String),
+      html: expect.stringContaining('https://tenant.example.test/app/dashboard/reset-password?token='),
+      text: expect.stringContaining('https://tenant.example.test/app/dashboard/reset-password?token='),
+    }))
+  })
+
+  it('does not disclose whether forgot-password emails exist', async () => {
+    vi.mocked(repo.findActiveEmployeeByEmail).mockResolvedValue(null)
+
+    await expect(service.forgotPassword('missing@example.test')).resolves.toEqual({
+      message: 'If that email is registered, a reset link has been sent.',
+    })
+    expect(sendTransactionalEmail).not.toHaveBeenCalled()
+  })
+
+  it('updates employee password from a stored reset token and clears reset state through the repo', async () => {
+    vi.mocked(repo.findEmployeeByResetToken).mockResolvedValue(employee as never)
+
+    await expect(service.resetPassword('stored-token', 'new-secure-password')).resolves.toEqual({
+      message: 'Password updated successfully. You can now sign in.',
+    })
+
+    expect(bcrypt.hash).toHaveBeenCalledWith('new-secure-password', 12)
+    expect(repo.resetPassword).toHaveBeenCalledWith('employee_1', 'hash_new')
+  })
+
+  it('rejects invalid reset tokens before hashing new passwords', async () => {
+    vi.mocked(repo.findEmployeeByResetToken).mockResolvedValue(null)
+    vi.mocked(repo.findEmployeeById).mockResolvedValue(null)
+
+    await expect(service.resetPassword('bad-token', 'new-secure-password')).rejects.toMatchObject({
+      statusCode: 400,
+      error: 'invalid_token',
+    })
+    expect(bcrypt.hash).not.toHaveBeenCalled()
+  })
+
+  it('delegates language preference updates and returns a stable contract', async () => {
+    vi.mocked(repo.updatePreferredLanguage).mockResolvedValue({} as never)
+
+    await expect(service.updateLanguage('employee_1', 'ar')).resolves.toEqual({ language: 'ar' })
+    expect(repo.updatePreferredLanguage).toHaveBeenCalledWith('employee_1', 'ar')
+  })
+})
diff --git a/api/src/modules/auth/auth.employee.service.test.ts b/api/src/modules/auth/auth.employee.service.test.ts
new file mode 100644
index 0000000..fc38c53
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.service.test.ts
@@ -0,0 +1,81 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./auth.employee.repo', () => ({
+  findActiveEmployeeByEmail: vi.fn(),
+  findEmployeeById: vi.fn(),
+  findEmployeeByResetToken: vi.fn(),
+  resetPassword: vi.fn(),
+}))
+
+vi.mock('../../services/notificationService', () => ({
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+import * as repo from './auth.employee.repo'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import { forgotPassword, resetPassword } from './auth.employee.service'
+
+describe('auth.employee.service forgotPassword', () => {
+  const originalDashboardUrl = process.env.DASHBOARD_URL
+  const originalJwtSecret = process.env.JWT_SECRET
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.DASHBOARD_URL = 'http://localhost:3000/dashboard'
+    process.env.JWT_SECRET = 'test-secret'
+  })
+
+  afterAll(() => {
+    process.env.DASHBOARD_URL = originalDashboardUrl
+    process.env.JWT_SECRET = originalJwtSecret
+  })
+
+  it('sends the reset email to the canonical stored address', async () => {
+    vi.mocked(repo.findActiveEmployeeByEmail).mockResolvedValue({
+      id: 'emp_1',
+      email: 'owner@company.com',
+      firstName: 'Aya',
+      preferredLanguage: 'en',
+      passwordHash: '$2a$12$abcdefghijklmnopqrstuv',
+    } as any)
+
+    await forgotPassword('Owner@Company.com')
+
+    expect(sendTransactionalEmail).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: 'owner@company.com',
+        html: expect.stringContaining('/dashboard/reset-password?token='),
+        text: expect.stringContaining('/dashboard/reset-password?token='),
+      }),
+    )
+  })
+
+  it('accepts stateless reset tokens', async () => {
+    const employee = {
+      id: 'emp_1',
+      isActive: true,
+      passwordHash: '$2a$12$abcdefghijklmnopqrstuv',
+    } as any
+
+    vi.mocked(repo.findActiveEmployeeByEmail).mockResolvedValue({
+      ...employee,
+      email: 'owner@company.com',
+      firstName: 'Aya',
+      preferredLanguage: 'en',
+    })
+    vi.mocked(repo.findEmployeeByResetToken).mockResolvedValue(null)
+    vi.mocked(repo.findEmployeeById).mockResolvedValue(employee)
+    vi.mocked(repo.resetPassword).mockResolvedValue({} as any)
+
+    await forgotPassword('Owner@Company.com')
+
+    const emailCall = vi.mocked(sendTransactionalEmail).mock.calls[0]?.[0]
+    const match = emailCall?.text.match(/token=([^\s]+)/)
+    expect(match?.[1]).toBeTruthy()
+
+    await expect(resetPassword(decodeURIComponent(match![1]), 'new-password-123')).resolves.toEqual({
+      message: 'Password updated successfully. You can now sign in.',
+    })
+    expect(repo.resetPassword).toHaveBeenCalledWith('emp_1', expect.any(String))
+  })
+})
diff --git a/api/src/modules/auth/auth.employee.service.ts b/api/src/modules/auth/auth.employee.service.ts
new file mode 100644
index 0000000..d467ede
--- /dev/null
+++ b/api/src/modules/auth/auth.employee.service.ts
@@ -0,0 +1,231 @@
+import bcrypt from 'bcryptjs'
+import crypto from 'crypto'
+import jwt from 'jsonwebtoken'
+import { signActorToken } from '../../security/tokens'
+import { AppError } from '../../http/errors'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import { resetPasswordEmail, type Lang } from '../../lib/emailTranslations'
+import { presentEmployeeSession } from './auth.presenter'
+import * as repo from './auth.employee.repo'
+import { employeeLanguageSchema, employeeLoginSchema } from './auth.employee.schemas'
+import type { output } from 'zod'
+
+const RESET_TOKEN_TTL_MINUTES = 60
+
+type EmployeeLoginInput = output<typeof employeeLoginSchema>
+type EmployeeLanguageInput = output<typeof employeeLanguageSchema>
+type EmployeePasswordResetPayload = jwt.JwtPayload & {
+  sub: string
+  type: 'employee_password_reset'
+  pwdv: string
+}
+
+function signEmployeeToken(employeeId: string) {
+  return signActorToken(employeeId, 'employee', {
+    expiresIn: (process.env.JWT_EXPIRY ?? '8h') as jwt.SignOptions['expiresIn'],
+  })
+}
+
+function getEmployeePasswordResetVersion(passwordHash: string | null | undefined) {
+  return crypto
+    .createHash('sha256')
+    .update(`${process.env.JWT_SECRET!}:${passwordHash ?? 'no-password-set'}`)
+    .digest('hex')
+}
+
+function signEmployeePasswordResetToken(employeeId: string, passwordHash: string | null | undefined) {
+  return jwt.sign(
+    {
+      sub: employeeId,
+      type: 'employee_password_reset',
+      pwdv: getEmployeePasswordResetVersion(passwordHash),
+    },
+    process.env.JWT_SECRET!,
+    {
+      algorithm: 'HS256',
+      issuer: 'rentaldrivego-api',
+      audience: 'employee_password_reset',
+      expiresIn: `${RESET_TOKEN_TTL_MINUTES}m`,
+    },
+  )
+}
+
+function verifyEmployeePasswordResetToken(token: string): EmployeePasswordResetPayload | null {
+  try {
+    const payload = jwt.verify(token, process.env.JWT_SECRET!, {
+      algorithms: ['HS256'],
+      issuer: 'rentaldrivego-api',
+      audience: 'employee_password_reset',
+    }) as jwt.JwtPayload
+
+    if (
+      typeof payload.sub !== 'string' ||
+      payload.type !== 'employee_password_reset' ||
+      typeof payload.pwdv !== 'string'
+    ) {
+      return null
+    }
+
+    return payload as EmployeePasswordResetPayload
+  } catch {
+    return null
+  }
+}
+
+function ensureDashboardBasePath(baseUrl: string) {
+  try {
+    const url = new URL(baseUrl)
+    const pathname = url.pathname.replace(/\/$/, '')
+    if (!pathname.endsWith('/dashboard')) url.pathname = `${pathname}/dashboard`
+    return url.toString().replace(/\/$/, '')
+  } catch {
+    const trimmed = baseUrl.replace(/\/$/, '')
+    return trimmed.endsWith('/dashboard') ? trimmed : `${trimmed}/dashboard`
+  }
+}
+
+export async function getMe(employeeId: string) {
+  const employee = await repo.findEmployeeWithCompanyById(employeeId)
+
+  if (!employee || !employee.isActive) {
+    throw new AppError('Employee account not found or inactive', 401, 'unauthenticated')
+  }
+
+  return presentEmployeeSession(employee)
+}
+
+export async function login(body: EmployeeLoginInput) {
+  const employee = await repo.findEmployeeWithCompanyByEmail(body.email)
+
+  if (!employee || !employee.isActive) {
+    throw new AppError('Invalid email or password', 401, 'invalid_credentials')
+  }
+
+  if (!employee.passwordHash) {
+    throw new AppError('This account does not have a password yet. Use the invitation or reset email to set one first.', 401, 'password_not_set')
+  }
+
+  if (!employee.emailVerified) {
+    throw new AppError('Please verify your email address before signing in. Check your inbox for the verification link.', 401, 'email_not_verified')
+  }
+
+  const validPassword = await bcrypt.compare(body.password, employee.passwordHash)
+  if (!validPassword) {
+    throw new AppError('Invalid email or password', 401, 'invalid_credentials')
+  }
+
+  return presentEmployeeSession(employee, signEmployeeToken(employee.id))
+}
+
+export async function forgotPassword(email: string) {
+  const employee = await repo.findActiveEmployeeByEmail(email)
+
+  if (employee) {
+    const resetToken = signEmployeePasswordResetToken(employee.id, employee.passwordHash)
+
+    const dashboardUrl = ensureDashboardBasePath(
+      process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+    )
+    const resetUrl = `${dashboardUrl}/reset-password?token=${encodeURIComponent(resetToken)}`
+    const lang = (employee.preferredLanguage as Lang) ?? 'fr'
+
+    await sendTransactionalEmail({
+      to: employee.email,
+      subject: resetPasswordEmail.subject(lang),
+      html: resetPasswordEmail.html(resetUrl, employee.firstName, RESET_TOKEN_TTL_MINUTES, lang),
+      text: resetPasswordEmail.text(resetUrl, employee.firstName, RESET_TOKEN_TTL_MINUTES, lang),
+    }).catch((err) => {
+      console.error('[ForgotPassword] Email delivery failed:', err?.message)
+      console.error('[ForgotPassword] Provider config — resendKey present:', !!process.env.RESEND_API_KEY, '| smtpHost:', process.env.MAIL_HOST ?? 'not set')
+    })
+  }
+
+  return { message: 'If that email is registered, a reset link has been sent.' }
+}
+
+export async function updateLanguage(employeeId: string, language: EmployeeLanguageInput['language']) {
+  await repo.updatePreferredLanguage(employeeId, language)
+  return { language }
+}
+
+async function findEmployeeFromResetToken(token: string) {
+  try {
+    const employee = await repo.findEmployeeByResetToken(token)
+    if (employee) return employee
+  } catch (err: any) {
+    console.error('[EmployeeResetPassword] Stored token lookup failed:', err?.message ?? String(err))
+  }
+
+  const payload = verifyEmployeePasswordResetToken(token)
+  if (!payload) return null
+
+  const employee = await repo.findEmployeeById(payload.sub)
+  if (!employee || !employee.isActive) return null
+
+  if (payload.pwdv !== getEmployeePasswordResetVersion(employee.passwordHash)) {
+    return null
+  }
+
+  return employee
+}
+
+export async function resetPassword(token: string, password: string) {
+  const employee = await findEmployeeFromResetToken(token)
+
+  if (!employee) {
+    throw new AppError('Reset link is invalid or has expired.', 400, 'invalid_token')
+  }
+
+  await repo.resetPassword(employee.id, await bcrypt.hash(password, 12))
+  return { message: 'Password updated successfully. You can now sign in.' }
+}
+
+export async function verifyEmail(token: string) {
+  const employee = await repo.findEmployeeByVerificationToken(token)
+
+  if (!employee) {
+    throw new AppError('Verification link is invalid or has expired.', 400, 'invalid_token')
+  }
+
+  await repo.verifyEmployeeEmail(employee.id)
+
+  return { message: 'Email verified successfully. You can now sign in.', email: employee.email }
+}
+
+export async function resendVerification(email: string) {
+  const employee = await repo.findActiveEmployeeByEmail(email)
+
+  if (!employee) {
+    return { message: 'If that email is registered and not yet verified, a new verification link has been sent.' }
+  }
+
+  if (employee.emailVerified) {
+    return { message: 'This email is already verified. You can sign in.' }
+  }
+
+  const verificationToken = crypto.randomBytes(32).toString('hex')
+  await repo.setEmailVerificationToken(employee.id, verificationToken)
+
+  const dashboardUrl = ensureDashboardBasePath(
+    process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+  )
+  const verifyUrl = `${dashboardUrl}/verify-email?token=${encodeURIComponent(verificationToken)}`
+
+  const lang = (employee.preferredLanguage === 'ar' || employee.preferredLanguage === 'fr') ? employee.preferredLanguage : 'en'
+  const emailSubjects: Record<string, string> = {
+    en: 'Verify your email — RentalDriveGo',
+    fr: 'Vérifiez votre email — RentalDriveGo',
+    ar: 'تحقق من بريدك الإلكتروني — RentalDriveGo',
+  }
+
+  await sendTransactionalEmail({
+    to: employee.email,
+    subject: emailSubjects[lang],
+    html: `<p>Click the link below to verify your email and activate your account:</p><p><a href="${verifyUrl}">Verify Email</a></p>`,
+    text: `Verify your email by visiting:\n${verifyUrl}`,
+  }).catch((err) => {
+    console.error('[ResendVerification] Email delivery failed:', err?.message)
+  })
+
+  return { message: 'A new verification link has been sent to your email.' }
+}
diff --git a/api/src/modules/auth/auth.presenter.test.ts b/api/src/modules/auth/auth.presenter.test.ts
new file mode 100644
index 0000000..0779d13
--- /dev/null
+++ b/api/src/modules/auth/auth.presenter.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest'
+import { presentCompanySignup, presentEmployeeSession, presentRenterProfile } from './auth.presenter'
+
+describe('auth presenters', () => {
+  it('presents employee sessions without leaking company internals or requiring a token', () => {
+    const employee = {
+      id: 'employee_1',
+      email: 'owner@example.com',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      role: 'OWNER',
+      preferredLanguage: 'fr',
+      companyId: 'company_1',
+      company: { name: 'Atlas Cars', slug: 'atlas-cars' },
+    }
+
+    expect(presentEmployeeSession(employee)).toEqual({
+      employee: {
+        id: 'employee_1',
+        email: 'owner@example.com',
+        firstName: 'Aya',
+        lastName: 'Benali',
+        role: 'OWNER',
+        preferredLanguage: 'fr',
+        companyId: 'company_1',
+        companyName: 'Atlas Cars',
+        companySlug: 'atlas-cars',
+      },
+    })
+  })
+
+  it('adds the token only when one is supplied', () => {
+    const employee = {
+      id: 'employee_1',
+      email: 'owner@example.com',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      role: 'OWNER',
+      preferredLanguage: null,
+      companyId: 'company_1',
+      company: { name: 'Atlas Cars', slug: 'atlas-cars' },
+    }
+
+    expect(presentEmployeeSession(employee, 'jwt-token')).toEqual(expect.objectContaining({
+      token: 'jwt-token',
+      employee: expect.objectContaining({ id: 'employee_1' }),
+    }))
+  })
+
+  it('presents company signup with a deterministic next step and fallback email delivery state', () => {
+    expect(presentCompanySignup({
+      company: { id: 'company_1', name: 'Atlas Cars', slug: 'atlas-cars' },
+      trialEndAt: new Date('2026-09-01T00:00:00.000Z'),
+    })).toEqual({
+      companyId: 'company_1',
+      companyName: 'Atlas Cars',
+      slug: 'atlas-cars',
+      invitationId: null,
+      trialEndsAt: '2026-09-01T00:00:00.000Z',
+      nextStep: 'workspace_created',
+      emailDelivery: { attempted: false, success: false, error: null },
+    })
+  })
+
+  it('hydrates saved renter companies in renter save order and leaves missing brand data explicit', () => {
+    const renter = {
+      id: 'renter_1',
+      firstName: 'Youssef',
+      lastName: 'Amrani',
+      email: 'youssef@example.com',
+      phone: null,
+      preferredLocale: 'fr',
+      preferredCurrency: 'MAD',
+      emailVerified: true,
+      savedCompanies: [{ companyId: 'company_2' }, { companyId: 'company_missing' }, { companyId: 'company_1' }],
+    }
+
+    const result = presentRenterProfile(renter, [
+      { id: 'company_1', brand: { displayName: 'Atlas', subdomain: 'atlas', logoUrl: '/atlas.png' } },
+      { id: 'company_2', brand: null },
+    ])
+
+    expect(result.savedCompanies).toEqual([
+      { id: 'company_2', brand: null },
+      { id: 'company_missing', brand: null },
+      { id: 'company_1', brand: { displayName: 'Atlas', subdomain: 'atlas', logoUrl: '/atlas.png' } },
+    ])
+  })
+})
diff --git a/api/src/modules/auth/auth.presenter.ts b/api/src/modules/auth/auth.presenter.ts
new file mode 100644
index 0000000..b630ccc
--- /dev/null
+++ b/api/src/modules/auth/auth.presenter.ts
@@ -0,0 +1,86 @@
+type EmployeeWithCompany = {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+  preferredLanguage?: string | null
+  companyId: string
+  company: {
+    name: string
+    slug: string
+  }
+}
+
+type CompanySignupResult = {
+  company: {
+    id: string
+    name: string
+    slug: string
+  }
+  trialEndAt: Date
+  emailDelivery?: unknown
+}
+
+type RenterProfile = {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  preferredLocale: string | null
+  preferredCurrency: string | null
+  emailVerified: boolean
+  savedCompanies: Array<{ companyId: string }>
+}
+
+type SavedCompany = {
+  id: string
+  brand: {
+    displayName: string | null
+    subdomain: string | null
+    logoUrl: string | null
+  } | null
+}
+
+export function presentEmployeeSession(employee: EmployeeWithCompany, token?: string) {
+  const data = {
+    employee: {
+      id: employee.id,
+      email: employee.email,
+      firstName: employee.firstName,
+      lastName: employee.lastName,
+      role: employee.role,
+      preferredLanguage: employee.preferredLanguage,
+      companyId: employee.companyId,
+      companyName: employee.company.name,
+      companySlug: employee.company.slug,
+    },
+  }
+
+  return token ? { token, ...data } : data
+}
+
+export function presentCompanySignup(result: CompanySignupResult) {
+  return {
+    companyId: result.company.id,
+    companyName: result.company.name,
+    slug: result.company.slug,
+    invitationId: null,
+    trialEndsAt: result.trialEndAt.toISOString(),
+    nextStep: 'workspace_created',
+    emailDelivery: result.emailDelivery ?? { attempted: false, success: false, error: null },
+  }
+}
+
+export function presentRenterProfile(renter: RenterProfile, companies: SavedCompany[]) {
+  const companyMap = new Map(companies.map((company) => [company.id, company]))
+
+  return {
+    ...renter,
+    savedCompanies: renter.savedCompanies.map((savedCompany) => ({
+      id: savedCompany.companyId,
+      brand: companyMap.get(savedCompany.companyId)?.brand ?? null,
+    })),
+  }
+}
diff --git a/api/src/modules/auth/auth.renter.repo.ts b/api/src/modules/auth/auth.renter.repo.ts
new file mode 100644
index 0000000..acda579
--- /dev/null
+++ b/api/src/modules/auth/auth.renter.repo.ts
@@ -0,0 +1,50 @@
+import { prisma } from '../../lib/prisma'
+import type { output } from 'zod'
+import { renterUpdateSchema } from './auth.renter.schemas'
+
+type RenterUpdateInput = output<typeof renterUpdateSchema>
+
+export function findRenterProfile(id: string) {
+  return prisma.renter.findUniqueOrThrow({
+    where: { id },
+    select: {
+      id: true,
+      firstName: true,
+      lastName: true,
+      email: true,
+      phone: true,
+      preferredLocale: true,
+      preferredCurrency: true,
+      emailVerified: true,
+      savedCompanies: { select: { companyId: true } },
+    },
+  })
+}
+
+export function findSavedCompanies(companyIds: string[]) {
+  return companyIds.length === 0
+    ? Promise.resolve([])
+    : prisma.company.findMany({
+        where: { id: { in: companyIds } },
+        select: {
+          id: true,
+          brand: {
+            select: { displayName: true, subdomain: true, logoUrl: true },
+          },
+        },
+      })
+}
+
+export function updateRenterProfile(id: string, data: RenterUpdateInput) {
+  return prisma.renter.update({
+    where: { id },
+    data,
+  })
+}
+
+export function updateRenterFcmToken(id: string, fcmToken: string) {
+  return prisma.renter.update({
+    where: { id },
+    data: { fcmToken },
+  })
+}
diff --git a/api/src/modules/auth/auth.renter.routes.ts b/api/src/modules/auth/auth.renter.routes.ts
new file mode 100644
index 0000000..72607ef
--- /dev/null
+++ b/api/src/modules/auth/auth.renter.routes.ts
@@ -0,0 +1,40 @@
+import { Router } from 'express'
+import { requireRenterAuth } from '../../middleware/requireRenterAuth'
+import { parseBody } from '../../http/validate'
+import { ok } from '../../http/respond'
+import { renterFcmTokenSchema, renterUpdateSchema } from './auth.renter.schemas'
+import * as service from './auth.renter.service'
+
+const router = Router()
+
+router.post('/signup', (_req, res) => {
+  service.signupDisabled()
+  res.end()
+})
+
+router.post('/login', (_req, res) => {
+  service.loginDisabled()
+  res.end()
+})
+
+router.get('/me', requireRenterAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.getMe(req.renterId))
+  } catch (err) { next(err) }
+})
+
+router.patch('/me', requireRenterAuth, async (req, res, next) => {
+  try {
+    const body = parseBody(renterUpdateSchema, req)
+    ok(res, await service.updateMe(req.renterId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/me/fcm-token', requireRenterAuth, async (req, res, next) => {
+  try {
+    const { fcmToken } = parseBody(renterFcmTokenSchema, req)
+    ok(res, await service.updateFcmToken(req.renterId, fcmToken))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/auth/auth.renter.schemas.ts b/api/src/modules/auth/auth.renter.schemas.ts
new file mode 100644
index 0000000..650064c
--- /dev/null
+++ b/api/src/modules/auth/auth.renter.schemas.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+export const renterUpdateSchema = z.object({
+  firstName: z.string().min(1).max(100).trim().optional(),
+  lastName: z.string().min(1).max(100).trim().optional(),
+  phone: z.string().max(30).trim().optional(),
+  preferredLocale: z.enum(['en', 'fr', 'ar']).optional(),
+  preferredCurrency: z.literal('MAD').optional(),
+})
+
+export const renterFcmTokenSchema = z.object({
+  fcmToken: z.string(),
+})
diff --git a/api/src/modules/auth/auth.renter.service.test.ts b/api/src/modules/auth/auth.renter.service.test.ts
new file mode 100644
index 0000000..0854213
--- /dev/null
+++ b/api/src/modules/auth/auth.renter.service.test.ts
@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AppError } from '../../http/errors'
+import * as repo from './auth.renter.repo'
+import * as service from './auth.renter.service'
+
+vi.mock('./auth.renter.repo', () => ({
+  findRenterProfile: vi.fn(),
+  findSavedCompanies: vi.fn(),
+  updateRenterProfile: vi.fn(),
+  updateRenterFcmToken: vi.fn(),
+}))
+
+describe('auth.renter.service', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('keeps renter self-signup disabled with an explicit product error', () => {
+    expect(() => service.signupDisabled()).toThrow(AppError)
+    try {
+      service.signupDisabled()
+    } catch (err) {
+      expect(err).toMatchObject({ statusCode: 403, error: 'renter_signup_disabled' })
+    }
+  })
+
+  it('keeps renter login disabled with an explicit product error', () => {
+    expect(() => service.loginDisabled()).toThrow(AppError)
+    try {
+      service.loginDisabled()
+    } catch (err) {
+      expect(err).toMatchObject({ statusCode: 403, error: 'renter_login_disabled' })
+    }
+  })
+
+  it('loads saved company brand data only for company IDs attached to the renter profile', async () => {
+    vi.mocked(repo.findRenterProfile).mockResolvedValue({
+      id: 'renter_1',
+      firstName: 'Youssef',
+      lastName: 'Amrani',
+      email: 'youssef@example.com',
+      phone: null,
+      preferredLocale: 'fr',
+      preferredCurrency: 'MAD',
+      emailVerified: true,
+      savedCompanies: [{ companyId: 'company_2' }, { companyId: 'company_1' }],
+    } as never)
+    vi.mocked(repo.findSavedCompanies).mockResolvedValue([
+      { id: 'company_1', brand: { displayName: 'Atlas', subdomain: 'atlas', logoUrl: null } },
+      { id: 'company_2', brand: { displayName: 'Desert Cars', subdomain: 'desert', logoUrl: '/desert.png' } },
+    ] as never)
+
+    await expect(service.getMe('renter_1')).resolves.toMatchObject({
+      id: 'renter_1',
+      savedCompanies: [
+        { id: 'company_2', brand: { displayName: 'Desert Cars' } },
+        { id: 'company_1', brand: { displayName: 'Atlas' } },
+      ],
+    })
+    expect(repo.findSavedCompanies).toHaveBeenCalledWith(['company_2', 'company_1'])
+  })
+
+  it('delegates profile updates without inventing side effects in the service layer', async () => {
+    vi.mocked(repo.updateRenterProfile).mockResolvedValue({ id: 'renter_1', firstName: 'Nora' } as never)
+
+    await expect(service.updateMe('renter_1', { firstName: 'Nora', preferredLocale: 'ar' })).resolves.toEqual({
+      id: 'renter_1',
+      firstName: 'Nora',
+    })
+    expect(repo.updateRenterProfile).toHaveBeenCalledWith('renter_1', { firstName: 'Nora', preferredLocale: 'ar' })
+  })
+
+  it('updates the renter FCM token and returns a stable success contract', async () => {
+    vi.mocked(repo.updateRenterFcmToken).mockResolvedValue({} as never)
+
+    await expect(service.updateFcmToken('renter_1', 'fcm_123')).resolves.toEqual({ success: true })
+    expect(repo.updateRenterFcmToken).toHaveBeenCalledWith('renter_1', 'fcm_123')
+  })
+})
diff --git a/api/src/modules/auth/auth.renter.service.ts b/api/src/modules/auth/auth.renter.service.ts
new file mode 100644
index 0000000..6b65060
--- /dev/null
+++ b/api/src/modules/auth/auth.renter.service.ts
@@ -0,0 +1,30 @@
+import { AppError } from '../../http/errors'
+import { presentRenterProfile } from './auth.presenter'
+import * as repo from './auth.renter.repo'
+import type { output } from 'zod'
+import { renterUpdateSchema } from './auth.renter.schemas'
+
+type RenterUpdateInput = output<typeof renterUpdateSchema>
+
+export function signupDisabled() {
+  throw new AppError('Renter account creation is disabled. Only company owners can sign in to the platform.', 403, 'renter_signup_disabled')
+}
+
+export function loginDisabled() {
+  throw new AppError('Renter sign-in is disabled. Only company owners can sign in to the platform.', 403, 'renter_login_disabled')
+}
+
+export async function getMe(renterId: string) {
+  const renter = await repo.findRenterProfile(renterId)
+  const savedCompanies = await repo.findSavedCompanies(renter.savedCompanies.map((savedCompany: any) => savedCompany.companyId))
+  return presentRenterProfile(renter, savedCompanies)
+}
+
+export function updateMe(renterId: string, body: RenterUpdateInput) {
+  return repo.updateRenterProfile(renterId, body)
+}
+
+export async function updateFcmToken(renterId: string, fcmToken: string) {
+  await repo.updateRenterFcmToken(renterId, fcmToken)
+  return { success: true }
+}
diff --git a/api/src/modules/auth/auth.role-specific-schemas.test.ts b/api/src/modules/auth/auth.role-specific-schemas.test.ts
new file mode 100644
index 0000000..d57661b
--- /dev/null
+++ b/api/src/modules/auth/auth.role-specific-schemas.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { companySignupSchema } from './auth.company.schemas'
+import { employeeForgotPasswordSchema, employeeLanguageSchema, employeeLoginSchema, employeeResetPasswordSchema } from './auth.employee.schemas'
+import { renterFcmTokenSchema, renterUpdateSchema } from './auth.renter.schemas'
+
+const validCompanySignup = {
+  firstName: 'Aya',
+  lastName: 'Haddad',
+  email: 'owner@example.test',
+  password: 'securePass123',
+  companyName: 'Atlas Cars',
+  legalName: 'Atlas Cars SARL',
+  legalForm: 'SARL',
+  registrationNumber: 'RC-1',
+  iceNumber: 'ICE-1',
+  taxId: 'TAX-1',
+  operatingLicenseNumber: 'LIC-1',
+  operatingLicenseIssuedAt: '2025-01-01',
+  operatingLicenseIssuedBy: 'Transport Authority',
+  streetAddress: '1 Main Street',
+  city: 'Casablanca',
+  country: 'Morocco',
+  zipCode: '20000',
+  companyPhone: '+212600000000',
+  companyEmail: 'company@example.test',
+  yearsActive: '3',
+  responsibleName: 'Aya Haddad',
+  responsibleRole: 'Owner',
+  responsibleIdentityNumber: 'ID-1',
+  responsiblePhone: '+212600000001',
+  responsibleEmail: 'responsible@example.test',
+  plan: 'GROWTH',
+  billingPeriod: 'MONTHLY',
+  currency: 'MAD',
+  paymentProvider: 'AMANPAY',
+}
+
+describe('role-specific auth schema contracts', () => {
+  it('defaults company signup language and keeps billing provider constrained', () => {
+    expect(companySignupSchema.parse(validCompanySignup)).toMatchObject({ preferredLanguage: 'en', paymentProvider: 'AMANPAY' })
+    expect(() => companySignupSchema.parse({ ...validCompanySignup, paymentProvider: 'WIRE_TRANSFER' })).toThrow()
+    expect(() => companySignupSchema.parse({ ...validCompanySignup, currency: 'EUR' })).toThrow()
+  })
+
+  it('normalizes employee email fields and validates reset password strength', () => {
+    expect(employeeLoginSchema.parse({ email: 'OWNER@EXAMPLE.TEST', password: 'secret' })).toEqual({
+      email: 'owner@example.test',
+      password: 'secret',
+    })
+    expect(employeeForgotPasswordSchema.parse({ email: 'HELP@EXAMPLE.TEST' })).toEqual({ email: 'help@example.test' })
+    expect(employeeResetPasswordSchema.parse({ token: 'token_1', password: 'new-pass-123' })).toEqual({ token: 'token_1', password: 'new-pass-123' })
+    expect(() => employeeResetPasswordSchema.parse({ token: '', password: 'short' })).toThrow()
+  })
+
+  it('limits employee language changes to supported locales', () => {
+    expect(employeeLanguageSchema.parse({ language: 'fr' })).toEqual({ language: 'fr' })
+    expect(() => employeeLanguageSchema.parse({ language: 'es' })).toThrow()
+  })
+
+  it('normalizes renter profile updates while keeping MAD as the only supported currency', () => {
+    expect(renterUpdateSchema.parse({ firstName: '  Salma ', lastName: '  Idrissi ', preferredLocale: 'ar', preferredCurrency: 'MAD' })).toEqual({
+      firstName: 'Salma',
+      lastName: 'Idrissi',
+      preferredLocale: 'ar',
+      preferredCurrency: 'MAD',
+    })
+    expect(() => renterUpdateSchema.parse({ preferredCurrency: 'EUR' })).toThrow()
+  })
+
+  it('requires a renter FCM token payload key', () => {
+    expect(renterFcmTokenSchema.parse({ fcmToken: 'token_abc' })).toEqual({ fcmToken: 'token_abc' })
+    expect(() => renterFcmTokenSchema.parse({ token: 'token_abc' })).toThrow()
+  })
+})
diff --git a/api/src/modules/auth/auth.schemas.test.ts b/api/src/modules/auth/auth.schemas.test.ts
new file mode 100644
index 0000000..0bc32df
--- /dev/null
+++ b/api/src/modules/auth/auth.schemas.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest'
+import { companySignupSchema } from './auth.company.schemas'
+import { employeeForgotPasswordSchema, employeeLanguageSchema, employeeLoginSchema, employeeResetPasswordSchema } from './auth.employee.schemas'
+import { renterFcmTokenSchema, renterUpdateSchema } from './auth.renter.schemas'
+
+describe('auth schemas', () => {
+  const validCompanySignup = {
+    firstName: 'Aya',
+    lastName: 'Benali',
+    email: 'owner@example.test',
+    password: 'safe-password',
+    companyName: 'Atlas Cars',
+    legalName: 'Atlas Cars SARL',
+    legalForm: 'SARL',
+    registrationNumber: 'RC-1',
+    iceNumber: 'ICE-1',
+    taxId: 'TAX-1',
+    operatingLicenseNumber: 'LIC-1',
+    operatingLicenseIssuedAt: '2024-01-01',
+    operatingLicenseIssuedBy: 'Rabat',
+    streetAddress: '1 Avenue',
+    city: 'Rabat',
+    country: 'Morocco',
+    zipCode: '10000',
+    companyPhone: '+212600000000',
+    companyEmail: 'company@example.test',
+    yearsActive: '3',
+    responsibleName: 'Aya Benali',
+    responsibleRole: 'Owner',
+    responsibleIdentityNumber: 'ID-1',
+    responsiblePhone: '+212600000001',
+    responsibleEmail: 'owner@example.test',
+    plan: 'GROWTH',
+    billingPeriod: 'MONTHLY',
+    currency: 'MAD',
+    paymentProvider: 'AMANPAY',
+  } as const
+
+  it('defaults company signup language and rejects unsupported commercial choices', () => {
+    const parsed = companySignupSchema.parse(validCompanySignup)
+
+    expect(parsed.preferredLanguage).toBe('en')
+    expect(companySignupSchema.safeParse({ ...validCompanySignup, plan: 'ENTERPRISE' }).success).toBe(false)
+    expect(companySignupSchema.safeParse({ ...validCompanySignup, currency: 'EUR' }).success).toBe(false)
+    expect(companySignupSchema.safeParse({ ...validCompanySignup, paymentProvider: 'STRIPE' }).success).toBe(false)
+  })
+
+  it('normalizes employee auth fields and rejects weak reset payloads', () => {
+    expect(employeeLoginSchema.parse({ email: 'Agent@Example.COM', password: 'password' })).toEqual({
+      email: 'agent@example.com',
+      password: 'password',
+    })
+    expect(employeeForgotPasswordSchema.parse({ email: 'Reset@Example.COM' }).email).toBe('reset@example.com')
+    expect(employeeLanguageSchema.safeParse({ language: 'ar' }).success).toBe(true)
+    expect(employeeLanguageSchema.safeParse({ language: 'es' }).success).toBe(false)
+    expect(employeeResetPasswordSchema.safeParse({ token: '', password: 'long-enough' }).success).toBe(false)
+    expect(employeeResetPasswordSchema.safeParse({ token: 'token_1', password: 'short' }).success).toBe(false)
+  })
+
+  it('trims renter profile updates and keeps renter push token required', () => {
+    expect(renterUpdateSchema.parse({ firstName: ' Aya ', lastName: ' Benali ', phone: ' 0600000000 ', preferredLocale: 'fr', preferredCurrency: 'MAD' })).toEqual({
+      firstName: 'Aya',
+      lastName: 'Benali',
+      phone: '0600000000',
+      preferredLocale: 'fr',
+      preferredCurrency: 'MAD',
+    })
+    expect(renterUpdateSchema.safeParse({ preferredLocale: 'es' }).success).toBe(false)
+    expect(renterUpdateSchema.safeParse({ preferredCurrency: 'EUR' }).success).toBe(false)
+    expect(renterFcmTokenSchema.safeParse({ fcmToken: 'token_1' }).success).toBe(true)
+    expect(renterFcmTokenSchema.safeParse({}).success).toBe(false)
+  })
+})
diff --git a/api/src/modules/companies/company.presenter.test.ts b/api/src/modules/companies/company.presenter.test.ts
new file mode 100644
index 0000000..f873d62
--- /dev/null
+++ b/api/src/modules/companies/company.presenter.test.ts
@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { presentBrand } from './company.presenter'
+
+const fullBrand = {
+  id: 'brand_1',
+  companyId: 'comp_1',
+  displayName: 'Test Rentals',
+  subdomain: 'test-rentals',
+  logoUrl: 'https://example.com/logo.jpg',
+  primaryColor: '#1A56DB',
+  defaultLocale: 'en',
+  defaultCurrency: 'MAD',
+  amanpayMerchantId: 'merchant-abc',
+  amanpaySecretKey: 'super-secret-key',
+  paypalEmail: 'paypal@example.com',
+  paypalMerchantId: 'paypal-merchant-xyz',
+  isListedOnMarketplace: true,
+}
+
+describe('presentBrand', () => {
+  it('strips amanpaySecretKey from the response', () => {
+    const result = presentBrand(fullBrand)
+    expect(result).not.toHaveProperty('amanpaySecretKey')
+  })
+
+  it('strips amanpayMerchantId from the response', () => {
+    const result = presentBrand(fullBrand)
+    expect(result).not.toHaveProperty('amanpayMerchantId')
+  })
+
+  it('strips paypalEmail from the response', () => {
+    const result = presentBrand(fullBrand)
+    expect(result).not.toHaveProperty('paypalEmail')
+  })
+
+  it('strips paypalMerchantId from the response', () => {
+    const result = presentBrand(fullBrand)
+    expect(result).not.toHaveProperty('paypalMerchantId')
+  })
+
+  it('sets amanpayConfigured=true when both amanpay credentials are present', () => {
+    const result = presentBrand(fullBrand)
+    expect(result.amanpayConfigured).toBe(true)
+  })
+
+  it('sets amanpayConfigured=false when amanpaySecretKey is null', () => {
+    const result = presentBrand({ ...fullBrand, amanpaySecretKey: null })
+    expect(result.amanpayConfigured).toBe(false)
+  })
+
+  it('sets amanpayConfigured=false when amanpayMerchantId is null', () => {
+    const result = presentBrand({ ...fullBrand, amanpayMerchantId: null })
+    expect(result.amanpayConfigured).toBe(false)
+  })
+
+  it('sets amanpayConfigured=false when both amanpay fields are null', () => {
+    const result = presentBrand({ ...fullBrand, amanpayMerchantId: null, amanpaySecretKey: null })
+    expect(result.amanpayConfigured).toBe(false)
+  })
+
+  it('sets paypalConfigured=true when paypalEmail is set', () => {
+    const result = presentBrand({ ...fullBrand, paypalMerchantId: null })
+    expect(result.paypalConfigured).toBe(true)
+  })
+
+  it('sets paypalConfigured=true when paypalMerchantId is set', () => {
+    const result = presentBrand({ ...fullBrand, paypalEmail: null })
+    expect(result.paypalConfigured).toBe(true)
+  })
+
+  it('sets paypalConfigured=false when both paypal fields are null', () => {
+    const result = presentBrand({ ...fullBrand, paypalEmail: null, paypalMerchantId: null })
+    expect(result.paypalConfigured).toBe(false)
+  })
+
+  it('preserves all non-credential fields', () => {
+    const result = presentBrand(fullBrand)
+    expect(result).toMatchObject({
+      id:                   'brand_1',
+      companyId:            'comp_1',
+      displayName:          'Test Rentals',
+      subdomain:            'test-rentals',
+      logoUrl:              'https://example.com/logo.jpg',
+      primaryColor:         '#1A56DB',
+      defaultLocale:        'en',
+      defaultCurrency:      'MAD',
+      isListedOnMarketplace: true,
+    })
+  })
+
+  it('returns null when brand is null', () => {
+    expect(presentBrand(null)).toBeNull()
+  })
+
+  it('returns undefined when brand is undefined', () => {
+    expect(presentBrand(undefined)).toBeUndefined()
+  })
+})
diff --git a/api/src/modules/companies/company.presenter.ts b/api/src/modules/companies/company.presenter.ts
new file mode 100644
index 0000000..16d0498
--- /dev/null
+++ b/api/src/modules/companies/company.presenter.ts
@@ -0,0 +1,13 @@
+export function presentCompany(company: any) {
+  return company
+}
+
+export function presentBrand(brand: any) {
+  if (!brand) return brand
+  const { amanpaySecretKey, amanpayMerchantId, paypalEmail, paypalMerchantId, ...safe } = brand
+  return {
+    ...safe,
+    amanpayConfigured: !!(amanpayMerchantId && amanpaySecretKey),
+    paypalConfigured:  !!(paypalEmail || paypalMerchantId),
+  }
+}
diff --git a/api/src/modules/companies/company.repo.edge.test.ts b/api/src/modules/companies/company.repo.edge.test.ts
new file mode 100644
index 0000000..7ac154e
--- /dev/null
+++ b/api/src/modules/companies/company.repo.edge.test.ts
@@ -0,0 +1,83 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    company: { findUniqueOrThrow: vi.fn(), update: vi.fn(), findFirst: vi.fn() },
+    brandSettings: { findUnique: vi.fn(), upsert: vi.fn(), findFirst: vi.fn(), updateMany: vi.fn() },
+    contractSettings: { findUnique: vi.fn(), upsert: vi.fn() },
+    insurancePolicy: { findMany: vi.fn(), create: vi.fn(), updateMany: vi.fn(), findUniqueOrThrow: vi.fn(), deleteMany: vi.fn() },
+    pricingRule: { findMany: vi.fn(), create: vi.fn(), updateMany: vi.fn(), findUniqueOrThrow: vi.fn(), deleteMany: vi.fn() },
+    accountingSettings: { findUnique: vi.fn(), upsert: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './company.repo'
+
+describe('company.repo edge queries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('loads a company dashboard envelope with brand, subscription and counts', async () => {
+    await repo.findCompany('company_1')
+
+    expect(prisma.company.findUniqueOrThrow).toHaveBeenCalledWith({
+      where: { id: 'company_1' },
+      include: {
+        brand: true,
+        subscription: true,
+        _count: { select: { vehicles: true, customers: true, reservations: true } },
+      },
+    })
+  })
+
+  it('upserts brand settings with companyId only in the create branch', async () => {
+    await repo.upsertBrand('company_1', { logoUrl: '/new.png' }, { primaryColor: '#111111' })
+
+    expect(prisma.brandSettings.upsert).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      update: { logoUrl: '/new.png' },
+      create: { companyId: 'company_1', primaryColor: '#111111' },
+    })
+  })
+
+  it('orders insurance policies by required status, sort order and name', async () => {
+    await repo.findInsurancePolicies('company_1')
+
+    expect(prisma.insurancePolicy.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      orderBy: [{ isRequired: 'desc' }, { sortOrder: 'asc' }, { name: 'asc' }],
+    })
+  })
+
+  it('updates and deletes pricing rules inside the tenant boundary', async () => {
+    await repo.updatePricingRule('rule_1', 'company_1', { isActive: false })
+    await repo.deletePricingRule('rule_1', 'company_1')
+
+    expect(prisma.pricingRule.updateMany).toHaveBeenCalledWith({
+      where: { id: 'rule_1', companyId: 'company_1' },
+      data: { isActive: false },
+    })
+    expect(prisma.pricingRule.deleteMany).toHaveBeenCalledWith({ where: { id: 'rule_1', companyId: 'company_1' } })
+  })
+
+  it('detects duplicate public branding outside the current company', async () => {
+    await repo.findBrandBySubdomain('atlas', 'company_1')
+    await repo.findBrandByCustomDomain('cars.example.test', 'company_1')
+
+    expect(prisma.brandSettings.findFirst).toHaveBeenNthCalledWith(1, {
+      where: { subdomain: 'atlas', companyId: { not: 'company_1' } },
+    })
+    expect(prisma.brandSettings.findFirst).toHaveBeenNthCalledWith(2, {
+      where: { customDomain: 'cars.example.test', companyId: { not: 'company_1' } },
+    })
+  })
+
+  it('clears custom domain verification metadata in one tenant-scoped mutation', async () => {
+    await repo.clearCustomDomain('company_1')
+
+    expect(prisma.brandSettings.updateMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      data: { customDomain: null, customDomainVerified: false, customDomainAddedAt: null },
+    })
+  })
+})
diff --git a/api/src/modules/companies/company.repo.ts b/api/src/modules/companies/company.repo.ts
new file mode 100644
index 0000000..8ef636c
--- /dev/null
+++ b/api/src/modules/companies/company.repo.ts
@@ -0,0 +1,145 @@
+import { prisma } from '../../lib/prisma'
+import { generateCompanyApiKey } from '../../security/apiKeys'
+
+export async function findCompany(companyId: string) {
+  return prisma.company.findUniqueOrThrow({
+    where: { id: companyId },
+    include: {
+      brand: true,
+      subscription: true,
+      _count: { select: { vehicles: true, customers: true, reservations: true } },
+    },
+  })
+}
+
+export async function updateCompany(companyId: string, data: any) {
+  return prisma.company.update({ where: { id: companyId }, data })
+}
+
+export async function findBrand(companyId: string) {
+  return prisma.brandSettings.findUnique({ where: { companyId } })
+}
+
+export async function upsertBrand(companyId: string, updateData: any, createData: any) {
+  return prisma.brandSettings.upsert({
+    where: { companyId },
+    update: updateData,
+    create: { companyId, ...createData },
+  })
+}
+
+export async function findContractSettings(companyId: string) {
+  return prisma.contractSettings.findUnique({ where: { companyId } })
+}
+
+export async function upsertContractSettings(companyId: string, data: any) {
+  return prisma.contractSettings.upsert({
+    where: { companyId },
+    update: data,
+    create: { companyId, ...data },
+  })
+}
+
+export async function findInsurancePolicies(companyId: string) {
+  return prisma.insurancePolicy.findMany({
+    where: { companyId },
+    orderBy: [{ isRequired: 'desc' }, { sortOrder: 'asc' }, { name: 'asc' }],
+  })
+}
+
+export async function createInsurancePolicy(companyId: string, data: any) {
+  return prisma.insurancePolicy.create({ data: { companyId, ...data } })
+}
+
+export async function updateInsurancePolicy(id: string, companyId: string, data: any) {
+  return prisma.insurancePolicy.updateMany({ where: { id, companyId }, data })
+}
+
+export async function findInsurancePolicyOrThrow(id: string) {
+  return prisma.insurancePolicy.findUniqueOrThrow({ where: { id } })
+}
+
+export async function deleteInsurancePolicy(id: string, companyId: string) {
+  return prisma.insurancePolicy.deleteMany({ where: { id, companyId } })
+}
+
+export async function findPricingRules(companyId: string) {
+  return prisma.pricingRule.findMany({
+    where: { companyId },
+    orderBy: [{ isActive: 'desc' }, { createdAt: 'asc' }],
+  })
+}
+
+export async function createPricingRule(companyId: string, data: any) {
+  return prisma.pricingRule.create({ data: { companyId, ...data } })
+}
+
+export async function updatePricingRule(id: string, companyId: string, data: any) {
+  return prisma.pricingRule.updateMany({ where: { id, companyId }, data })
+}
+
+export async function findPricingRuleOrThrow(id: string) {
+  return prisma.pricingRule.findUniqueOrThrow({ where: { id } })
+}
+
+export async function deletePricingRule(id: string, companyId: string) {
+  return prisma.pricingRule.deleteMany({ where: { id, companyId } })
+}
+
+export async function findAccountingSettings(companyId: string) {
+  return prisma.accountingSettings.findUnique({ where: { companyId } })
+}
+
+export async function upsertAccountingSettings(companyId: string, data: any) {
+  return prisma.accountingSettings.upsert({
+    where: { companyId },
+    update: data,
+    create: { companyId, ...data },
+  })
+}
+
+export async function findApiKey(companyId: string) {
+  const apiKeys = await (prisma as any).companyApiKey.findMany({
+    where: { companyId, revokedAt: null },
+    orderBy: { createdAt: 'desc' },
+    select: { id: true, name: true, prefix: true, lastUsedAt: true, createdAt: true, revokedAt: true },
+  })
+
+  return { apiKeys }
+}
+
+export async function regenerateApiKey(companyId: string) {
+  const nextKey = generateCompanyApiKey()
+
+  await prisma.$transaction(async (tx: any) => {
+    await (tx as any).companyApiKey.updateMany({
+      where: { companyId, revokedAt: null },
+      data: { revokedAt: new Date() },
+    })
+    await (tx as any).companyApiKey.create({
+      data: {
+        companyId,
+        name: 'Default API key',
+        prefix: nextKey.prefix,
+        keyHash: nextKey.keyHash,
+      },
+    })
+  })
+
+  return { apiKey: nextKey.rawKey, prefix: nextKey.prefix, warning: 'This raw API key is shown once. Store it securely.' }
+}
+
+export async function findBrandBySubdomain(subdomain: string, excludeCompanyId: string) {
+  return prisma.brandSettings.findFirst({ where: { subdomain, companyId: { not: excludeCompanyId } } })
+}
+
+export async function findBrandByCustomDomain(customDomain: string, excludeCompanyId: string) {
+  return prisma.brandSettings.findFirst({ where: { customDomain, companyId: { not: excludeCompanyId } } })
+}
+
+export async function clearCustomDomain(companyId: string) {
+  return prisma.brandSettings.updateMany({
+    where: { companyId },
+    data: { customDomain: null, customDomainVerified: false, customDomainAddedAt: null },
+  })
+}
diff --git a/api/src/modules/companies/company.routes.ts b/api/src/modules/companies/company.routes.ts
new file mode 100644
index 0000000..0fa7fbf
--- /dev/null
+++ b/api/src/modules/companies/company.routes.ts
@@ -0,0 +1,205 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { requireCompanyPolicy } from '../../middleware/requireCompanyPolicy'
+import { parseBody, parseParams } from '../../http/validate'
+import { ok, created, noContent } from '../../http/respond'
+import { imageUpload, assertImageFile } from '../../http/upload'
+import * as service from './company.service'
+import {
+  companySchema, brandSchema, contractSettingsSchema,
+  insurancePolicySchema, pricingRuleSchema, accountingSettingsSchema,
+  subdomainSchema, customDomainSchema, idParamSchema,
+} from './company.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/me', async (req, res, next) => {
+  try {
+    const company = await service.getCompany(req.companyId)
+    ok(res, company)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(companySchema, req)
+    const company = await service.updateCompany(req.companyId, body)
+    ok(res, company)
+  } catch (err) { next(err) }
+})
+
+router.get('/me/brand', async (req, res, next) => {
+  try {
+    const brand = await service.getBrand(req.companyId)
+    ok(res, brand)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/brand', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(brandSchema, req)
+    const brand = await service.updateBrand(req.companyId, body, req.company.name, req.company.slug)
+    ok(res, brand)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/brand/logo', requireRole('OWNER'), imageUpload.single('file'), async (req, res, next) => {
+  try {
+    assertImageFile(req.file, 'logo')
+    const brand = await service.uploadLogo(req.companyId, req.company.name, req.company.slug, req.file.buffer)
+    ok(res, brand)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/brand/hero', requireRole('OWNER'), imageUpload.single('file'), async (req, res, next) => {
+  try {
+    assertImageFile(req.file, 'hero image')
+    const brand = await service.uploadHeroImage(req.companyId, req.company.name, req.company.slug, req.file.buffer)
+    ok(res, brand)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/brand/subdomain/check', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { subdomain } = parseBody(subdomainSchema, req)
+    const result = await service.checkSubdomainAvailability(subdomain, req.companyId)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/brand/custom-domain', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { customDomain } = parseBody(customDomainSchema, req)
+    const brand = await service.setCustomDomain(req.companyId, req.company.name, req.company.slug, customDomain)
+    ok(res, brand)
+  } catch (err) { next(err) }
+})
+
+router.get('/me/brand/custom-domain/status', async (req, res, next) => {
+  try {
+    const status = await service.getCustomDomainStatus(req.companyId)
+    ok(res, status)
+  } catch (err) { next(err) }
+})
+
+router.delete('/me/brand/custom-domain', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const result = await service.removeCustomDomain(req.companyId)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.get('/me/contract-settings', async (req, res, next) => {
+  try {
+    const settings = await service.getContractSettings(req.companyId)
+    ok(res, settings)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/contract-settings', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const body = parseBody(contractSettingsSchema, req)
+    const settings = await service.updateContractSettings(req.companyId, body)
+    ok(res, settings)
+  } catch (err) { next(err) }
+})
+
+router.get('/me/insurance-policies', async (req, res, next) => {
+  try {
+    const policies = await service.getInsurancePolicies(req.companyId)
+    ok(res, policies)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/insurance-policies', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const body = parseBody(insurancePolicySchema, req)
+    const policy = await service.createInsurancePolicy(req.companyId, body)
+    created(res, policy)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/insurance-policies/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(insurancePolicySchema.partial(), req)
+    const policy = await service.updateInsurancePolicy(id, req.companyId, body)
+    ok(res, policy)
+  } catch (err) { next(err) }
+})
+
+router.delete('/me/insurance-policies/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.deleteInsurancePolicy(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/me/pricing-rules', async (req, res, next) => {
+  try {
+    const rules = await service.getPricingRules(req.companyId)
+    ok(res, rules)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/pricing-rules', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const body = parseBody(pricingRuleSchema, req)
+    const rule = await service.createPricingRule(req.companyId, body)
+    created(res, rule)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/pricing-rules/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(pricingRuleSchema.partial(), req)
+    const rule = await service.updatePricingRule(id, req.companyId, body)
+    ok(res, rule)
+  } catch (err) { next(err) }
+})
+
+router.delete('/me/pricing-rules/:id', requireCompanyPolicy('deletePricingRule'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.deletePricingRule(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/me/accounting-settings', async (req, res, next) => {
+  try {
+    const settings = await service.getAccountingSettings(req.companyId)
+    ok(res, settings)
+  } catch (err) { next(err) }
+})
+
+router.patch('/me/accounting-settings', requireCompanyPolicy('updateAccountingSettings'), async (req, res, next) => {
+  try {
+    const body = parseBody(accountingSettingsSchema, req)
+    const settings = await service.updateAccountingSettings(req.companyId, body)
+    ok(res, settings)
+  } catch (err) { next(err) }
+})
+
+router.get('/me/api-key', requireCompanyPolicy('viewApiKey'), async (req, res, next) => {
+  try {
+    const company = await service.getApiKey(req.companyId)
+    ok(res, company)
+  } catch (err) { next(err) }
+})
+
+router.post('/me/api-key/regenerate', requireCompanyPolicy('regenerateApiKey'), async (req, res, next) => {
+  try {
+    const company = await service.regenerateApiKey(req.companyId)
+    ok(res, company)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/companies/company.schemas.edge.test.ts b/api/src/modules/companies/company.schemas.edge.test.ts
new file mode 100644
index 0000000..8200d10
--- /dev/null
+++ b/api/src/modules/companies/company.schemas.edge.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { accountingSettingsSchema, brandSchema, companySchema, contractSettingsSchema, customDomainSchema, insurancePolicySchema, pricingRuleSchema, subdomainSchema } from './company.schemas'
+
+describe('company schemas edge cases', () => {
+  it('validates company and brand public configuration boundaries', () => {
+    expect(companySchema.parse({ email: 'ops@example.test', address: { city: 'Rabat' } })).toMatchObject({ email: 'ops@example.test' })
+    expect(companySchema.safeParse({ email: 'bad-email' }).success).toBe(false)
+
+    const brand = brandSchema.parse({
+      displayName: 'Atlas',
+      websiteUrl: 'https://atlas.example.test',
+      paypalEmail: 'paypal@example.test',
+      defaultCurrency: 'MAD',
+      homePageConfig: { showOffers: true, layout: { items: [{ id: 'hero-1', type: 'hero', x: 1, y: 1, w: 12, h: 4 }] } },
+    })
+    expect(brand.homePageConfig?.layout?.items[0].type).toBe('hero')
+    expect(brandSchema.safeParse({ websiteUrl: 'not-url' }).success).toBe(false)
+    expect(brandSchema.safeParse({ defaultCurrency: 'EUR' }).success).toBe(false)
+  })
+
+  it('keeps contract, accounting, insurance, and pricing settings inside known enums', () => {
+    expect(contractSettingsSchema.parse({ fuelPolicyType: 'FULL_TO_FULL', additionalDriverCharge: 'PER_DAY', taxRate: 20 })).toMatchObject({ fuelPolicyType: 'FULL_TO_FULL' })
+    expect(contractSettingsSchema.safeParse({ fuelPolicyType: 'CHAOS' }).success).toBe(false)
+    expect(accountingSettingsSchema.parse({ reportingPeriod: 'MONTHLY', fiscalYearStart: 1, currency: 'MAD' })).toMatchObject({ fiscalYearStart: 1 })
+    expect(accountingSettingsSchema.safeParse({ fiscalYearStart: 13 }).success).toBe(false)
+
+    expect(insurancePolicySchema.parse({ name: 'CDW', type: 'CDW', chargeType: 'PER_DAY', chargeValue: 100 })).toMatchObject({ isActive: true, isRequired: false, sortOrder: 0 })
+    expect(insurancePolicySchema.safeParse({ name: 'CDW', type: 'CDW', chargeType: 'PER_DAY', chargeValue: -1 }).success).toBe(false)
+    expect(pricingRuleSchema.safeParse({ name: 'Young driver', type: 'SURCHARGE', condition: 'AGE_LESS_THAN', conditionValue: 25, adjustmentType: 'PERCENTAGE', adjustmentValue: 10 }).success).toBe(true)
+    expect(pricingRuleSchema.safeParse({ name: '', type: 'SURCHARGE', condition: 'AGE_LESS_THAN', conditionValue: 25, adjustmentType: 'PERCENTAGE', adjustmentValue: 10 }).success).toBe(false)
+  })
+
+  it('requires minimal custom domain and subdomain lengths', () => {
+    expect(subdomainSchema.safeParse({ subdomain: 'ab' }).success).toBe(false)
+    expect(customDomainSchema.safeParse({ customDomain: 'x.io' }).success).toBe(true)
+  })
+})
diff --git a/api/src/modules/companies/company.schemas.ts b/api/src/modules/companies/company.schemas.ts
new file mode 100644
index 0000000..9a34f0b
--- /dev/null
+++ b/api/src/modules/companies/company.schemas.ts
@@ -0,0 +1,159 @@
+import { z } from 'zod'
+import { optionalTextField, optionalTitleCaseAllField, optionalUpperField, optionalEmailField, optionalPhoneField } from '../../lib/zodValidation'
+
+export const companySchema = z.object({
+  name:    optionalTextField('commercialName'),
+  email:   optionalEmailField(),
+  phone:   optionalPhoneField(),
+  address: z.record(z.unknown()).optional(),
+})
+
+export const brandSchema = z.object({
+  displayName:            z.string().min(1).optional(),
+  tagline:                z.string().optional(),
+  primaryColor:           z.string().optional(),
+  accentColor:            z.string().optional(),
+  publicEmail:            optionalEmailField(),
+  publicPhone:            optionalPhoneField(),
+  publicAddress:          z.string().optional(),
+  publicCity:             optionalTextField('city'),
+  publicCountry:          optionalTextField('country'),
+  websiteUrl:             z.string().url().optional(),
+  whatsappNumber:         z.string().optional(),
+  defaultLocale:          z.string().optional(),
+  defaultCurrency:        z.literal('MAD').optional(),
+  amanpayMerchantId:      z.string().optional(),
+  amanpaySecretKey:       z.string().optional(),
+  paypalEmail:            optionalEmailField(),
+  paypalMerchantId:       z.string().optional(),
+  isListedOnMarketplace:  z.boolean().optional(),
+  homePageConfig: z.object({
+    heroTitle:              z.union([z.string(), z.null()]).optional(),
+    heroDescription:        z.union([z.string(), z.null()]).optional(),
+    viewOffersLabel:        z.union([z.string(), z.null()]).optional(),
+    viewPricingLabel:       z.union([z.string(), z.null()]).optional(),
+    contactCompanyLabel:    z.union([z.string(), z.null()]).optional(),
+    activeOffersTitle:      z.union([z.string(), z.null()]).optional(),
+    seeAllOffersLabel:      z.union([z.string(), z.null()]).optional(),
+    noActiveOffersLabel:    z.union([z.string(), z.null()]).optional(),
+    publishedVehiclesTitle: z.union([z.string(), z.null()]).optional(),
+    viewVehicleLabel:       z.union([z.string(), z.null()]).optional(),
+    pricingEyebrow:         z.union([z.string(), z.null()]).optional(),
+    pricingTitle:           z.union([z.string(), z.null()]).optional(),
+    pricingDescription:     z.union([z.string(), z.null()]).optional(),
+    showOffers:     z.boolean().optional(),
+    showVehicles:   z.boolean().optional(),
+    showPricing:    z.boolean().optional(),
+    layout: z.object({
+      items: z.array(z.object({
+        id:   z.string().min(1),
+        type: z.enum(['hero', 'offers', 'vehicles', 'pricing']),
+        x: z.number().int().min(1),
+        y: z.number().int().min(1),
+        w: z.number().int().min(1),
+        h: z.number().int().min(1),
+      })),
+    }).optional(),
+  }).optional(),
+  menuConfig: z.object({
+    aboutLabel:           z.union([z.string(), z.null()]).optional(),
+    vehiclesLabel:        z.union([z.string(), z.null()]).optional(),
+    offersLabel:          z.union([z.string(), z.null()]).optional(),
+    pricingLabel:         z.union([z.string(), z.null()]).optional(),
+    blogLabel:            z.union([z.string(), z.null()]).optional(),
+    contactLabel:         z.union([z.string(), z.null()]).optional(),
+    bookCarLabel:         z.union([z.string(), z.null()]).optional(),
+    siteNavigationLabel:  z.union([z.string(), z.null()]).optional(),
+    showAbout:    z.boolean().optional(),
+    showVehicles: z.boolean().optional(),
+    showOffers:   z.boolean().optional(),
+    showPricing:  z.boolean().optional(),
+    showBlog:     z.boolean().optional(),
+    showContact:  z.boolean().optional(),
+    pageSections: z.object({
+      home: z.object({
+        hero: z.boolean().optional(), offers: z.boolean().optional(),
+        vehicles: z.boolean().optional(), pricing: z.boolean().optional(),
+      }).optional(),
+      about: z.object({
+        hero: z.boolean().optional(), highlights: z.boolean().optional(), details: z.boolean().optional(),
+      }).optional(),
+      offers: z.object({ header: z.boolean().optional(), grid: z.boolean().optional() }).optional(),
+      pricing: z.object({
+        hero: z.boolean().optional(), plans: z.boolean().optional(),
+        payments: z.boolean().optional(), faq: z.boolean().optional(),
+      }).optional(),
+      vehicles: z.object({
+        header: z.boolean().optional(), filters: z.boolean().optional(), grid: z.boolean().optional(),
+      }).optional(),
+      vehicleDetail: z.object({ gallery: z.boolean().optional(), summary: z.boolean().optional() }).optional(),
+      blog: z.object({ hero: z.boolean().optional(), posts: z.boolean().optional() }).optional(),
+      contact: z.object({ content: z.boolean().optional() }).optional(),
+      booking: z.object({ content: z.boolean().optional() }).optional(),
+      bookingConfirmation: z.object({
+        hero: z.boolean().optional(), summary: z.boolean().optional(), actions: z.boolean().optional(),
+      }).optional(),
+    }).optional(),
+  }).optional(),
+})
+
+export const contractSettingsSchema = z.object({
+  legalName:              optionalTitleCaseAllField('legalCompanyName'),
+  registrationNumber:     optionalUpperField('commercialRegistry'),
+  taxId:                  z.string().optional(),
+  terms:                  z.string().optional(),
+  fuelPolicy:             z.string().optional(),
+  depositPolicy:          z.string().optional(),
+  lateFeePolicy:          z.string().optional(),
+  damagePolicy:           z.string().optional(),
+  contractFooterNote:     z.string().optional(),
+  invoiceFooterNote:      z.string().optional(),
+  signatureRequired:      z.boolean().optional(),
+  showTax:                z.boolean().optional(),
+  taxRate:                z.number().optional(),
+  taxLabel:               z.string().optional(),
+  fuelPolicyType:         z.enum(['FULL_TO_FULL', 'FULL_TO_EMPTY', 'SAME_TO_SAME', 'PREPAID', 'FREE']).optional(),
+  fuelPolicyNote:         z.string().optional(),
+  fuelChargePerLiter:     z.number().int().optional(),
+  fuelShortfallFee:       z.number().int().optional(),
+  lateFeePerHour:         z.number().int().optional(),
+  additionalDriverCharge: z.enum(['FREE', 'PER_DAY', 'FLAT']).optional(),
+  additionalDriverDailyRate: z.number().int().optional(),
+  additionalDriverFlatRate:  z.number().int().optional(),
+})
+
+export const insurancePolicySchema = z.object({
+  name:         z.string().min(1),
+  description:  z.string().optional(),
+  type:         z.enum(['CDW', 'SCDW', 'THEFT', 'THIRD_PARTY', 'FULL', 'BASIC', 'ROADSIDE', 'PERSONAL', 'CUSTOM']),
+  chargeType:   z.enum(['PER_DAY', 'PER_RENTAL', 'PERCENTAGE_OF_RENTAL']),
+  chargeValue:  z.number().int().min(0),
+  isRequired:   z.boolean().default(false),
+  isActive:     z.boolean().default(true),
+  sortOrder:    z.number().int().default(0),
+})
+
+export const pricingRuleSchema = z.object({
+  name:            z.string().min(1),
+  type:            z.enum(['SURCHARGE', 'DISCOUNT']),
+  condition:       z.enum(['AGE_LESS_THAN', 'AGE_GREATER_THAN', 'LICENSE_YEARS_LESS_THAN', 'LICENSE_YEARS_GREATER_THAN']),
+  conditionValue:  z.number().int(),
+  adjustmentType:  z.enum(['PERCENTAGE', 'FLAT_PER_DAY', 'FLAT_TOTAL']),
+  adjustmentValue: z.number().int(),
+  isActive:        z.boolean().default(true),
+  description:     z.string().optional(),
+})
+
+export const accountingSettingsSchema = z.object({
+  reportingPeriod:  z.enum(['WEEKLY', 'MONTHLY', 'QUARTERLY', 'ANNUAL']).optional(),
+  fiscalYearStart:  z.number().int().min(1).max(12).optional(),
+  currency:         z.literal('MAD').optional(),
+  accountantEmail:  optionalEmailField(),
+  accountantName:   optionalTextField('name'),
+  autoSendReport:   z.boolean().optional(),
+  reportFormat:     z.enum(['PDF', 'CSV', 'BOTH']).optional(),
+})
+
+export const subdomainSchema     = z.object({ subdomain: z.string().min(3) })
+export const customDomainSchema  = z.object({ customDomain: z.string().min(3) })
+export const idParamSchema       = z.object({ id: z.string() })
diff --git a/api/src/modules/companies/company.service.edge.test.ts b/api/src/modules/companies/company.service.edge.test.ts
new file mode 100644
index 0000000..f78d1b1
--- /dev/null
+++ b/api/src/modules/companies/company.service.edge.test.ts
@@ -0,0 +1,132 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/storage', () => ({ uploadImage: vi.fn().mockResolvedValue('/storage/companies/company_1/brand/logo.jpg') }))
+vi.mock('./company.repo', () => ({
+  findCompany: vi.fn(),
+  updateCompany: vi.fn(),
+  findBrand: vi.fn(),
+  upsertBrand: vi.fn(),
+  findBrandBySubdomain: vi.fn(),
+  findBrandByCustomDomain: vi.fn(),
+  clearCustomDomain: vi.fn(),
+  findContractSettings: vi.fn(),
+  upsertContractSettings: vi.fn(),
+  findInsurancePolicies: vi.fn(),
+  createInsurancePolicy: vi.fn(),
+  updateInsurancePolicy: vi.fn(),
+  findInsurancePolicyOrThrow: vi.fn(),
+  deleteInsurancePolicy: vi.fn(),
+  findPricingRules: vi.fn(),
+  createPricingRule: vi.fn(),
+  updatePricingRule: vi.fn(),
+  findPricingRuleOrThrow: vi.fn(),
+  deletePricingRule: vi.fn(),
+  findAccountingSettings: vi.fn(),
+  upsertAccountingSettings: vi.fn(),
+  findApiKey: vi.fn(),
+  regenerateApiKey: vi.fn(),
+}))
+
+const repo = await import('./company.repo')
+const service = await import('./company.service')
+
+const currentBrand = {
+  id: 'brand_1',
+  companyId: 'company_1',
+  displayName: 'Atlas Cars',
+  subdomain: 'atlas',
+  amanpayMerchantId: 'merchant_1',
+  amanpaySecretKey: 'secret_1',
+  paypalEmail: null,
+  paypalMerchantId: null,
+  paymentMethodsEnabled: ['AMANPAY'],
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  delete process.env.NEXT_PUBLIC_CUSTOM_DOMAIN_TARGET
+})
+
+describe('company.service edge behavior', () => {
+  it('preserves existing AmanPay credentials when recomputing enabled payment methods', async () => {
+    vi.mocked(repo.findBrand).mockResolvedValue(currentBrand as any)
+    vi.mocked(repo.upsertBrand).mockResolvedValue({ ...currentBrand, paypalEmail: 'billing@example.test' } as any)
+
+    const result = await service.updateBrand('company_1', { paypalEmail: 'billing@example.test' }, 'Atlas Cars', 'atlas')
+
+    expect(repo.upsertBrand).toHaveBeenCalledWith(
+      'company_1',
+      expect.objectContaining({
+        paypalEmail: 'billing@example.test',
+        paymentMethodsEnabled: ['AMANPAY', 'PAYPAL'],
+      }),
+      expect.objectContaining({
+        displayName: 'Atlas Cars',
+        subdomain: 'atlas',
+        paypalEmail: 'billing@example.test',
+        paymentMethodsEnabled: ['AMANPAY', 'PAYPAL'],
+      }),
+    )
+    expect(result).not.toHaveProperty('paypalEmail')
+    expect(result.paypalConfigured).toBe(true)
+  })
+
+  it('does not report AmanPay enabled when only one credential is available', async () => {
+    vi.mocked(repo.findBrand).mockResolvedValue({ ...currentBrand, amanpaySecretKey: null } as any)
+    vi.mocked(repo.upsertBrand).mockResolvedValue({ ...currentBrand, amanpaySecretKey: null } as any)
+
+    await service.updateBrand('company_1', {}, 'Atlas Cars', 'atlas')
+
+    expect(repo.upsertBrand).toHaveBeenCalledWith(
+      'company_1',
+      expect.objectContaining({ paymentMethodsEnabled: [] }),
+      expect.objectContaining({ paymentMethodsEnabled: [] }),
+    )
+  })
+
+  it('normalizes custom domains and marks them pending verification', async () => {
+    vi.mocked(repo.findBrandByCustomDomain).mockResolvedValue(null as any)
+    vi.mocked(repo.upsertBrand).mockResolvedValue({ id: 'brand_1', customDomain: 'cars.example.com' } as any)
+
+    await service.setCustomDomain('company_1', 'Atlas Cars', 'atlas', '  CARS.Example.COM  ')
+
+    expect(repo.findBrandByCustomDomain).toHaveBeenCalledWith('cars.example.com', 'company_1')
+    expect(repo.upsertBrand).toHaveBeenCalledWith(
+      'company_1',
+      expect.objectContaining({ customDomain: 'cars.example.com', customDomainVerified: false, customDomainAddedAt: expect.any(Date) }),
+      expect.objectContaining({ displayName: 'Atlas Cars', subdomain: 'atlas', customDomain: 'cars.example.com', customDomainVerified: false, customDomainAddedAt: expect.any(Date) }),
+    )
+  })
+
+  it('rejects custom domains already owned by another company', async () => {
+    vi.mocked(repo.findBrandByCustomDomain).mockResolvedValue({ id: 'other_brand' } as any)
+
+    await expect(service.setCustomDomain('company_1', 'Atlas Cars', 'atlas', 'cars.example.com')).rejects.toMatchObject({ statusCode: 409 })
+    expect(repo.upsertBrand).not.toHaveBeenCalled()
+  })
+
+  it('returns deterministic custom-domain status and honors configured DNS target', async () => {
+    process.env.NEXT_PUBLIC_CUSTOM_DOMAIN_TARGET = 'tenant-target.example.net'
+    vi.mocked(repo.findBrand).mockResolvedValue({ customDomain: 'cars.example.com', customDomainVerified: false } as any)
+
+    await expect(service.getCustomDomainStatus('company_1')).resolves.toEqual({
+      customDomain: 'cars.example.com',
+      verified: false,
+      status: 'pending_dns',
+      dnsTarget: 'tenant-target.example.net',
+    })
+  })
+
+  it('raises not found when updating a missing insurance policy', async () => {
+    vi.mocked(repo.updateInsurancePolicy).mockResolvedValue({ count: 0 } as any)
+
+    await expect(service.updateInsurancePolicy('policy_1', 'company_1', { name: 'CDW' })).rejects.toMatchObject({ statusCode: 404 })
+    expect(repo.findInsurancePolicyOrThrow).not.toHaveBeenCalled()
+  })
+
+  it('raises not found when deleting a missing pricing rule', async () => {
+    vi.mocked(repo.deletePricingRule).mockResolvedValue({ count: 0 } as any)
+
+    await expect(service.deletePricingRule('rule_1', 'company_1')).rejects.toMatchObject({ statusCode: 404 })
+  })
+})
diff --git a/api/src/modules/companies/company.service.ts b/api/src/modules/companies/company.service.ts
new file mode 100644
index 0000000..f2adf6b
--- /dev/null
+++ b/api/src/modules/companies/company.service.ts
@@ -0,0 +1,153 @@
+import { uploadImage } from '../../lib/storage'
+import { ConflictError, NotFoundError } from '../../http/errors'
+import { presentCompany, presentBrand } from './company.presenter'
+import * as repo from './company.repo'
+
+function buildPaymentMethodsEnabled(input: {
+  amanpayMerchantId?: string | null
+  amanpaySecretKey?: string | null
+  paypalEmail?: string | null
+}) {
+  const methods: Array<'AMANPAY' | 'PAYPAL'> = []
+  if (input.amanpayMerchantId && input.amanpaySecretKey) methods.push('AMANPAY')
+  if (input.paypalEmail) methods.push('PAYPAL')
+  return methods
+}
+
+export async function getCompany(companyId: string) {
+  return presentCompany(await repo.findCompany(companyId))
+}
+
+export async function updateCompany(companyId: string, data: any) {
+  return presentCompany(await repo.updateCompany(companyId, data))
+}
+
+export async function getBrand(companyId: string) {
+  return presentBrand(await repo.findBrand(companyId))
+}
+
+export async function updateBrand(companyId: string, body: any, companyName: string, companySlug: string) {
+  const current = await repo.findBrand(companyId)
+  const paymentMethodsEnabled = buildPaymentMethodsEnabled({
+    amanpayMerchantId: body.amanpayMerchantId ?? current?.amanpayMerchantId,
+    amanpaySecretKey:  body.amanpaySecretKey  ?? current?.amanpaySecretKey,
+    paypalEmail:       body.paypalEmail       ?? current?.paypalEmail,
+  })
+  return presentBrand(await repo.upsertBrand(
+    companyId,
+    { ...body, paymentMethodsEnabled },
+    { displayName: body.displayName ?? companyName, subdomain: companySlug, paymentMethodsEnabled, ...body },
+  ))
+}
+
+export async function uploadLogo(companyId: string, companyName: string, companySlug: string, file: Buffer) {
+  const url = await uploadImage(file, `companies/${companyId}/brand`, 'logo')
+  return presentBrand(await repo.upsertBrand(
+    companyId,
+    { logoUrl: url },
+    { displayName: companyName, subdomain: companySlug, logoUrl: url },
+  ))
+}
+
+export async function uploadHeroImage(companyId: string, companyName: string, companySlug: string, file: Buffer) {
+  const url = await uploadImage(file, `companies/${companyId}/brand`, 'hero')
+  return presentBrand(await repo.upsertBrand(
+    companyId,
+    { heroImageUrl: url },
+    { displayName: companyName, subdomain: companySlug, heroImageUrl: url },
+  ))
+}
+
+export async function checkSubdomainAvailability(subdomain: string, companyId: string) {
+  const existing = await repo.findBrandBySubdomain(subdomain, companyId)
+  return { available: !existing }
+}
+
+export async function setCustomDomain(companyId: string, companyName: string, companySlug: string, customDomain: string) {
+  const normalized = customDomain.toLowerCase().trim()
+  const existing = await repo.findBrandByCustomDomain(normalized, companyId)
+  if (existing) throw new ConflictError('This custom domain is already in use')
+  return repo.upsertBrand(
+    companyId,
+    { customDomain: normalized, customDomainVerified: false, customDomainAddedAt: new Date() },
+    { displayName: companyName, subdomain: companySlug, customDomain: normalized, customDomainVerified: false, customDomainAddedAt: new Date() },
+  )
+}
+
+export async function getCustomDomainStatus(companyId: string) {
+  const brand = await repo.findBrand(companyId)
+  const customDomain = brand?.customDomain ?? null
+  return {
+    customDomain,
+    verified: brand?.customDomainVerified ?? false,
+    status: customDomain ? (brand?.customDomainVerified ? 'verified' : 'pending_dns') : 'not_configured',
+    dnsTarget: process.env.NEXT_PUBLIC_CUSTOM_DOMAIN_TARGET ?? 'cname.vercel-dns.com',
+  }
+}
+
+export async function removeCustomDomain(companyId: string) {
+  const result = await repo.clearCustomDomain(companyId)
+  return { success: result.count > 0 }
+}
+
+export async function getContractSettings(companyId: string) {
+  return repo.findContractSettings(companyId)
+}
+
+export async function updateContractSettings(companyId: string, data: any) {
+  return repo.upsertContractSettings(companyId, data)
+}
+
+export async function getInsurancePolicies(companyId: string) {
+  return repo.findInsurancePolicies(companyId)
+}
+
+export async function createInsurancePolicy(companyId: string, data: any) {
+  return repo.createInsurancePolicy(companyId, data)
+}
+
+export async function updateInsurancePolicy(id: string, companyId: string, data: any) {
+  const result = await repo.updateInsurancePolicy(id, companyId, data)
+  if (result.count === 0) throw new NotFoundError('Insurance policy not found')
+  return repo.findInsurancePolicyOrThrow(id)
+}
+
+export async function deleteInsurancePolicy(id: string, companyId: string) {
+  const result = await repo.deleteInsurancePolicy(id, companyId)
+  if (result.count === 0) throw new NotFoundError('Insurance policy not found')
+}
+
+export async function getPricingRules(companyId: string) {
+  return repo.findPricingRules(companyId)
+}
+
+export async function createPricingRule(companyId: string, data: any) {
+  return repo.createPricingRule(companyId, data)
+}
+
+export async function updatePricingRule(id: string, companyId: string, data: any) {
+  const result = await repo.updatePricingRule(id, companyId, data)
+  if (result.count === 0) throw new NotFoundError('Pricing rule not found')
+  return repo.findPricingRuleOrThrow(id)
+}
+
+export async function deletePricingRule(id: string, companyId: string) {
+  const result = await repo.deletePricingRule(id, companyId)
+  if (result.count === 0) throw new NotFoundError('Pricing rule not found')
+}
+
+export async function getAccountingSettings(companyId: string) {
+  return repo.findAccountingSettings(companyId)
+}
+
+export async function updateAccountingSettings(companyId: string, data: any) {
+  return repo.upsertAccountingSettings(companyId, data)
+}
+
+export async function getApiKey(companyId: string) {
+  return repo.findApiKey(companyId)
+}
+
+export async function regenerateApiKey(companyId: string) {
+  return repo.regenerateApiKey(companyId)
+}
diff --git a/api/src/modules/companies/company.test.ts b/api/src/modules/companies/company.test.ts
new file mode 100644
index 0000000..82be24a
--- /dev/null
+++ b/api/src/modules/companies/company.test.ts
@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import * as repo from './company.repo'
+import * as service from './company.service'
+
+vi.mock('./company.repo')
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn().mockResolvedValue('http://localhost:4000/storage/companies/comp_1/brand/logo.jpg'),
+}))
+
+const mockCompany = {
+  id: 'comp_1',
+  name: 'Test Rentals',
+  slug: 'test-rentals',
+  email: 'info@test.com',
+  brand: null,
+  subscription: null,
+  _count: { vehicles: 5, customers: 10, reservations: 20 },
+}
+
+const mockBrand = {
+  id: 'brand_1',
+  companyId: 'comp_1',
+  displayName: 'Test Rentals',
+  subdomain: 'test-rentals',
+  logoUrl: null,
+  heroImageUrl: null,
+  customDomain: null,
+  customDomainVerified: false,
+  amanpayMerchantId: null,
+  amanpaySecretKey: null,
+  paypalEmail: null,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('company.service', () => {
+  describe('getCompany', () => {
+    it('returns company with brand and subscription', async () => {
+      vi.mocked(repo.findCompany).mockResolvedValue(mockCompany as any)
+      const result = await service.getCompany('comp_1')
+      expect(result).toEqual(mockCompany)
+      expect(repo.findCompany).toHaveBeenCalledWith('comp_1')
+    })
+  })
+
+  describe('updateCompany', () => {
+    it('updates company profile', async () => {
+      vi.mocked(repo.updateCompany).mockResolvedValue({ ...mockCompany, name: 'Updated Rentals' } as any)
+      const result = await service.updateCompany('comp_1', { name: 'Updated Rentals' })
+      expect(repo.updateCompany).toHaveBeenCalledWith('comp_1', { name: 'Updated Rentals' })
+    })
+  })
+
+  describe('uploadLogo', () => {
+    it('uploads logo and upserts brand', async () => {
+      vi.mocked(repo.upsertBrand).mockResolvedValue({ ...mockBrand, logoUrl: 'http://localhost:4000/storage/companies/comp_1/brand/logo.jpg' } as any)
+      const result = await service.uploadLogo('comp_1', 'Test Rentals', 'test-rentals', Buffer.from(''))
+      expect(repo.upsertBrand).toHaveBeenCalledWith(
+        'comp_1',
+        expect.objectContaining({ logoUrl: 'http://localhost:4000/storage/companies/comp_1/brand/logo.jpg' }),
+        expect.objectContaining({ logoUrl: 'http://localhost:4000/storage/companies/comp_1/brand/logo.jpg' }),
+      )
+    })
+  })
+
+  describe('uploadHeroImage', () => {
+    it('uploads hero image and upserts brand', async () => {
+      vi.mocked(repo.upsertBrand).mockResolvedValue({ ...mockBrand, heroImageUrl: 'http://localhost:4000/storage/companies/comp_1/brand/logo.jpg' } as any)
+      await service.uploadHeroImage('comp_1', 'Test Rentals', 'test-rentals', Buffer.from(''))
+      expect(repo.upsertBrand).toHaveBeenCalledWith(
+        'comp_1',
+        expect.objectContaining({ heroImageUrl: expect.any(String) }),
+        expect.objectContaining({ heroImageUrl: expect.any(String) }),
+      )
+    })
+  })
+
+  describe('checkSubdomainAvailability', () => {
+    it('returns available=true when subdomain is free', async () => {
+      vi.mocked(repo.findBrandBySubdomain).mockResolvedValue(null)
+      const result = await service.checkSubdomainAvailability('my-rental', 'comp_1')
+      expect(result.available).toBe(true)
+    })
+
+    it('returns available=false when subdomain is taken', async () => {
+      vi.mocked(repo.findBrandBySubdomain).mockResolvedValue(mockBrand as any)
+      const result = await service.checkSubdomainAvailability('taken-rental', 'comp_1')
+      expect(result.available).toBe(false)
+    })
+  })
+
+  describe('setCustomDomain', () => {
+    it('throws ConflictError when custom domain is already in use', async () => {
+      vi.mocked(repo.findBrandByCustomDomain).mockResolvedValue(mockBrand as any)
+      await expect(service.setCustomDomain('comp_1', 'Test Rentals', 'test-rentals', 'taken.com')).rejects.toThrow('This custom domain is already in use')
+    })
+
+    it('sets custom domain when available', async () => {
+      vi.mocked(repo.findBrandByCustomDomain).mockResolvedValue(null)
+      vi.mocked(repo.upsertBrand).mockResolvedValue({ ...mockBrand, customDomain: 'my-rental.com' } as any)
+      await service.setCustomDomain('comp_1', 'Test Rentals', 'test-rentals', 'My-Rental.com')
+      expect(repo.upsertBrand).toHaveBeenCalledWith(
+        'comp_1',
+        expect.objectContaining({ customDomain: 'my-rental.com' }),
+        expect.objectContaining({ customDomain: 'my-rental.com' }),
+      )
+    })
+  })
+
+  describe('updateInsurancePolicy', () => {
+    it('throws NotFoundError when policy does not belong to company', async () => {
+      vi.mocked(repo.updateInsurancePolicy).mockResolvedValue({ count: 0 } as any)
+      await expect(service.updateInsurancePolicy('pol_1', 'comp_1', { name: 'CDW' })).rejects.toThrow('Insurance policy not found')
+    })
+  })
+
+  describe('deletePricingRule', () => {
+    it('throws NotFoundError when rule does not belong to company', async () => {
+      vi.mocked(repo.deletePricingRule).mockResolvedValue({ count: 0 } as any)
+      await expect(service.deletePricingRule('rule_1', 'comp_1')).rejects.toThrow('Pricing rule not found')
+    })
+  })
+})
diff --git a/api/src/modules/complaints/complaint.repo.edge.test.ts b/api/src/modules/complaints/complaint.repo.edge.test.ts
new file mode 100644
index 0000000..f663fa4
--- /dev/null
+++ b/api/src/modules/complaints/complaint.repo.edge.test.ts
@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    complaint: { findMany: vi.fn(), count: vi.fn(), findFirst: vi.fn(), create: vi.fn(), update: vi.fn(), delete: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './complaint.repo'
+
+describe('complaint.repo edge behavior', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('lists complaints with company-scoped filters and deterministic ordering', async () => {
+    vi.mocked(prisma.complaint.findMany).mockResolvedValue([] as never)
+    vi.mocked(prisma.complaint.count).mockResolvedValue(0 as never)
+
+    await repo.findMany('company_1', { status: 'OPEN', severity: 'LEVEL_2' }, 40, 20)
+
+    const where = { companyId: 'company_1', status: 'OPEN', severity: 'LEVEL_2' }
+    expect(prisma.complaint.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where,
+      skip: 40,
+      take: 20,
+      orderBy: { createdAt: 'desc' },
+    }))
+    expect(prisma.complaint.count).toHaveBeenCalledWith({ where })
+  })
+
+  it('creates complaints with linked reservation, review and customer ids preserved', async () => {
+    await repo.create({
+      companyId: 'company_1',
+      reservationId: 'reservation_1',
+      reviewId: 'review_1',
+      customerId: 'customer_1',
+      severity: 'LEVEL_3',
+      category: 'DAMAGE_CLAIM',
+      subject: 'Damage dispute',
+      assignedTo: 'employee_1',
+    })
+
+    expect(prisma.complaint.create).toHaveBeenCalledWith(expect.objectContaining({
+      data: {
+        companyId: 'company_1',
+        reservationId: 'reservation_1',
+        reviewId: 'review_1',
+        customerId: 'customer_1',
+        severity: 'LEVEL_3',
+        category: 'DAMAGE_CLAIM',
+        subject: 'Damage dispute',
+        assignedTo: 'employee_1',
+      },
+    }))
+  })
+
+  it('updates by complaint id without accepting a company id bypass from caller data', async () => {
+    await repo.updateById('complaint_1', { status: 'RESOLVED', resolution: 'Refunded deposit' })
+
+    expect(prisma.complaint.update).toHaveBeenCalledWith(expect.objectContaining({
+      where: { id: 'complaint_1' },
+      data: { status: 'RESOLVED', resolution: 'Refunded deposit' },
+    }))
+  })
+
+  it('deletes by primary id', async () => {
+    await repo.deleteById('complaint_1')
+
+    expect(prisma.complaint.delete).toHaveBeenCalledWith({ where: { id: 'complaint_1' } })
+  })
+})
diff --git a/api/src/modules/complaints/complaint.repo.ts b/api/src/modules/complaints/complaint.repo.ts
new file mode 100644
index 0000000..1a5d068
--- /dev/null
+++ b/api/src/modules/complaints/complaint.repo.ts
@@ -0,0 +1,84 @@
+import { prisma } from '../../lib/prisma'
+
+const COMPLAINT_INCLUDE = {
+  reservation: {
+    select: {
+      id: true,
+      startDate: true,
+      endDate: true,
+      status: true,
+      vehicle: { select: { make: true, model: true, year: true } },
+    },
+  },
+  customer: {
+    select: {
+      id: true,
+      firstName: true,
+      lastName: true,
+      email: true,
+      phone: true,
+    },
+  },
+  review: {
+    select: {
+      id: true,
+      overallRating: true,
+      comment: true,
+    },
+  },
+}
+
+export async function findMany(
+  companyId: string,
+  where: Record<string, unknown>,
+  skip: number,
+  take: number,
+) {
+  const baseWhere = { companyId, ...where }
+  return Promise.all([
+    prisma.complaint.findMany({
+      where: baseWhere,
+      include: COMPLAINT_INCLUDE,
+      skip,
+      take,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.complaint.count({ where: baseWhere }),
+  ])
+}
+
+export async function findById(id: string, companyId: string) {
+  return prisma.complaint.findFirst({
+    where: { id, companyId },
+    include: COMPLAINT_INCLUDE,
+  })
+}
+
+export async function create(data: {
+  companyId: string
+  reservationId?: string
+  reviewId?: string
+  customerId?: string
+  severity: string
+  category: string
+  subject: string
+  description?: string
+  assignedTo?: string
+}) {
+  return prisma.complaint.create({
+    data: data as any,
+    include: COMPLAINT_INCLUDE,
+  })
+}
+
+export async function updateById(id: string, data: Record<string, unknown>) {
+  return prisma.complaint.update({
+    where: { id },
+    data,
+    include: COMPLAINT_INCLUDE,
+  })
+}
+
+export async function deleteById(id: string) {
+  return prisma.complaint.delete({ where: { id } })
+}
diff --git a/api/src/modules/complaints/complaint.routes.ts b/api/src/modules/complaints/complaint.routes.ts
new file mode 100644
index 0000000..0985a0f
--- /dev/null
+++ b/api/src/modules/complaints/complaint.routes.ts
@@ -0,0 +1,55 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import * as service from './complaint.service'
+import { createSchema, updateSchema, listQuerySchema, idParamSchema } from './complaint.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    const result = await service.listComplaints(req.companyId, query)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/', async (req, res, next) => {
+  try {
+    const body = parseBody(createSchema, req)
+    const complaint = await service.createComplaint(req.companyId, body)
+    created(res, complaint)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const complaint = await service.getComplaint(id, req.companyId)
+    ok(res, complaint)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(updateSchema, req)
+    const updated = await service.updateComplaint(id, req.companyId, body)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const result = await service.deleteComplaint(id, req.companyId)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/complaints/complaint.schemas.edge.test.ts b/api/src/modules/complaints/complaint.schemas.edge.test.ts
new file mode 100644
index 0000000..8c93daa
--- /dev/null
+++ b/api/src/modules/complaints/complaint.schemas.edge.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { createSchema, updateSchema, listQuerySchema } from './complaint.schemas'
+
+describe('complaint schemas', () => {
+  it('defaults new complaints to the lowest severity when not provided', () => {
+    expect(createSchema.parse({ category: 'BILLING', subject: 'Incorrect invoice' })).toMatchObject({
+      category: 'BILLING',
+      subject: 'Incorrect invoice',
+      severity: 'LEVEL_1',
+    })
+  })
+
+  it('rejects empty complaint subjects', () => {
+    expect(() => createSchema.parse({ category: 'BILLING', subject: '' })).toThrow()
+  })
+
+  it('accepts lifecycle updates without requiring immutable creation fields', () => {
+    expect(updateSchema.parse({ status: 'RESOLVED', resolution: 'Refund issued' })).toEqual({
+      status: 'RESOLVED',
+      resolution: 'Refund issued',
+    })
+  })
+
+  it('coerces pagination and applies default page size for list queries', () => {
+    expect(listQuerySchema.parse({ page: '2', severity: 'LEVEL_3' })).toEqual({
+      page: 2,
+      pageSize: 20,
+      severity: 'LEVEL_3',
+    })
+  })
+
+  it('rejects pathological page sizes before they hit the database', () => {
+    expect(() => listQuerySchema.parse({ pageSize: '101' })).toThrow()
+  })
+})
diff --git a/api/src/modules/complaints/complaint.schemas.ts b/api/src/modules/complaints/complaint.schemas.ts
new file mode 100644
index 0000000..ff89aaf
--- /dev/null
+++ b/api/src/modules/complaints/complaint.schemas.ts
@@ -0,0 +1,44 @@
+import { z } from 'zod'
+
+const CATEGORIES = [
+  'BOOKING', 'PICKUP', 'VEHICLE_CLEANLINESS', 'VEHICLE_CONDITION', 'STAFF_SERVICE',
+  'PRICING', 'DEPOSIT', 'INSURANCE', 'DAMAGE_CLAIM', 'RETURN_PROCESS',
+  'COMMUNICATION', 'ROADSIDE_ASSISTANCE', 'BILLING', 'OTHER',
+] as const
+
+const SEVERITIES = ['LEVEL_1', 'LEVEL_2', 'LEVEL_3'] as const
+const STATUSES   = ['OPEN', 'INVESTIGATING', 'RESOLVED', 'CLOSED'] as const
+
+export const createSchema = z.object({
+  reservationId: z.string().optional(),
+  reviewId:      z.string().optional(),
+  customerId:    z.string().optional(),
+  severity:      z.enum(SEVERITIES).default('LEVEL_1'),
+  category:      z.enum(CATEGORIES),
+  subject:       z.string().min(1),
+  description:   z.string().optional(),
+  assignedTo:    z.string().optional(),
+})
+
+export const updateSchema = z.object({
+  status:      z.enum(STATUSES).optional(),
+  severity:    z.enum(SEVERITIES).optional(),
+  category:    z.enum(CATEGORIES).optional(),
+  subject:     z.string().min(1).optional(),
+  description: z.string().optional(),
+  notes:       z.string().optional(),
+  resolution:  z.string().optional(),
+  assignedTo:  z.string().optional(),
+})
+
+export const listQuerySchema = z.object({
+  status:   z.string().optional(),
+  severity: z.string().optional(),
+  category: z.string().optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const idParamSchema = z.object({
+  id: z.string(),
+})
diff --git a/api/src/modules/complaints/complaint.service.test.ts b/api/src/modules/complaints/complaint.service.test.ts
new file mode 100644
index 0000000..f079552
--- /dev/null
+++ b/api/src/modules/complaints/complaint.service.test.ts
@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./complaint.repo', () => ({
+  findMany: vi.fn(),
+  findById: vi.fn(),
+  create: vi.fn(),
+  updateById: vi.fn(),
+  deleteById: vi.fn(),
+}))
+
+import { NotFoundError } from '../../http/errors'
+import * as repo from './complaint.repo'
+import { createComplaint, deleteComplaint, getComplaint, listComplaints, updateComplaint } from './complaint.service'
+
+describe('complaint.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-08T12:00:00.000Z'))
+  })
+
+  it('builds filtered paginated complaint queries without leaking transport concerns into the repo', async () => {
+    vi.mocked(repo.findMany).mockResolvedValue([[{ id: 'complaint_1' }], 11] as never)
+
+    const result = await listComplaints('company_1', {
+      status: 'OPEN',
+      severity: 'HIGH',
+      category: 'BILLING',
+      page: 3,
+      pageSize: 5,
+    })
+
+    expect(repo.findMany).toHaveBeenCalledWith('company_1', {
+      status: 'OPEN',
+      severity: 'HIGH',
+      category: 'BILLING',
+    }, 10, 5)
+    expect(result).toEqual({
+      data: [{ id: 'complaint_1' }],
+      meta: { total: 11, page: 3, pageSize: 5, totalPages: 3 },
+    })
+  })
+
+  it('throws NotFoundError when a complaint cannot be found in the company tenant', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(null as never)
+
+    await expect(getComplaint('complaint_1', 'company_1')).rejects.toBeInstanceOf(NotFoundError)
+  })
+
+  it('sets resolvedAt exactly when the complaint transitions into RESOLVED', async () => {
+    vi.mocked(repo.findById).mockResolvedValue({ id: 'complaint_1', status: 'OPEN' } as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'complaint_1', status: 'RESOLVED' } as never)
+
+    await updateComplaint('complaint_1', 'company_1', { status: 'RESOLVED', resolution: 'Refund issued' })
+
+    expect(repo.updateById).toHaveBeenCalledWith('complaint_1', {
+      status: 'RESOLVED',
+      resolution: 'Refund issued',
+      resolvedAt: new Date('2026-06-08T12:00:00.000Z'),
+    })
+  })
+
+  it('does not overwrite resolvedAt when an already resolved complaint is edited', async () => {
+    vi.mocked(repo.findById).mockResolvedValue({ id: 'complaint_1', status: 'RESOLVED' } as never)
+
+    await updateComplaint('complaint_1', 'company_1', { notes: 'Follow-up call logged' })
+
+    expect(repo.updateById).toHaveBeenCalledWith('complaint_1', { notes: 'Follow-up call logged' })
+  })
+
+  it('creates and deletes complaints through tenant-scoped repository calls', async () => {
+    vi.mocked(repo.create).mockResolvedValue({ id: 'complaint_1' } as never)
+    vi.mocked(repo.findById).mockResolvedValue({ id: 'complaint_1' } as never)
+
+    await createComplaint('company_1', {
+      reservationId: 'reservation_1',
+      severity: 'MEDIUM',
+      category: 'SERVICE',
+      subject: 'Late pickup',
+    })
+    const deleted = await deleteComplaint('complaint_1', 'company_1')
+
+    expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({ companyId: 'company_1', reservationId: 'reservation_1' }))
+    expect(repo.deleteById).toHaveBeenCalledWith('complaint_1')
+    expect(deleted).toEqual({ success: true })
+  })
+})
diff --git a/api/src/modules/complaints/complaint.service.ts b/api/src/modules/complaints/complaint.service.ts
new file mode 100644
index 0000000..c2a4250
--- /dev/null
+++ b/api/src/modules/complaints/complaint.service.ts
@@ -0,0 +1,75 @@
+import { NotFoundError } from '../../http/errors'
+import * as repo from './complaint.repo'
+
+export async function listComplaints(
+  companyId: string,
+  query: { status?: string; severity?: string; category?: string; page: number; pageSize: number },
+) {
+  const { status, severity, category, page, pageSize } = query
+  const where: Record<string, unknown> = {}
+  if (status)   where.status   = status
+  if (severity) where.severity = severity
+  if (category) where.category = category
+
+  const [complaints, total] = await repo.findMany(companyId, where, (page - 1) * pageSize, pageSize)
+  return {
+    data: complaints,
+    meta: { total, page, pageSize, totalPages: Math.ceil(total / pageSize) },
+  }
+}
+
+export async function getComplaint(id: string, companyId: string) {
+  const complaint = await repo.findById(id, companyId)
+  if (!complaint) throw new NotFoundError('Complaint not found')
+  return complaint
+}
+
+export async function createComplaint(
+  companyId: string,
+  data: {
+    reservationId?: string
+    reviewId?: string
+    customerId?: string
+    severity: string
+    category: string
+    subject: string
+    description?: string
+    assignedTo?: string
+  },
+) {
+  return repo.create({ companyId, ...data })
+}
+
+export async function updateComplaint(
+  id: string,
+  companyId: string,
+  data: {
+    status?: string
+    severity?: string
+    category?: string
+    subject?: string
+    description?: string
+    notes?: string
+    resolution?: string
+    assignedTo?: string
+  },
+) {
+  const existing = await repo.findById(id, companyId)
+  if (!existing) throw new NotFoundError('Complaint not found')
+
+  const updateData: Record<string, unknown> = { ...data }
+
+  // When status changes to RESOLVED, set resolvedAt
+  if (data.status === 'RESOLVED' && existing.status !== 'RESOLVED') {
+    updateData.resolvedAt = new Date()
+  }
+
+  return repo.updateById(id, updateData)
+}
+
+export async function deleteComplaint(id: string, companyId: string) {
+  const existing = await repo.findById(id, companyId)
+  if (!existing) throw new NotFoundError('Complaint not found')
+  await repo.deleteById(id)
+  return { success: true }
+}
diff --git a/api/src/modules/customers/customer.edge.test.ts b/api/src/modules/customers/customer.edge.test.ts
new file mode 100644
index 0000000..6d49520
--- /dev/null
+++ b/api/src/modules/customers/customer.edge.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+
+vi.mock('./customer.repo')
+vi.mock('../../services/licenseValidationService', () => ({
+  validateAndFlagLicense: vi.fn().mockResolvedValue({ status: 'VALID' }),
+}))
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn().mockResolvedValue('http://localhost:4000/storage/companies/company_1/customers/customer_1/new-license.jpg'),
+  deleteImage: vi.fn().mockResolvedValue(undefined),
+  resolveStoredFilePath: vi.fn().mockReturnValue('/tmp/license.jpg'),
+  getProtectedCustomerLicenseImageUrl: vi.fn((customerId: string) => `http://localhost:3000/dashboard/api/v1/customers/${customerId}/license-image`),
+}))
+
+import * as repo from './customer.repo'
+import * as service from './customer.service'
+import { validateAndFlagLicense } from '../../services/licenseValidationService'
+import { deleteImage, resolveStoredFilePath, uploadImage } from '../../lib/storage'
+
+const customer = {
+  id: 'customer_1',
+  companyId: 'company_1',
+  firstName: 'Aya',
+  lastName: 'Benali',
+  email: 'aya@example.test',
+  licenseImageUrl: null,
+  flagged: false,
+  flagReason: null,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.mocked(resolveStoredFilePath).mockReturnValue('/tmp/license.jpg')
+})
+
+describe('customer service edge cases', () => {
+  it('trims and caps customer search text before building the query', async () => {
+    vi.mocked(repo.findMany).mockResolvedValue([[], 0] as any)
+    const longQuery = `  ${'x'.repeat(150)}  `
+
+    await service.listCustomers('company_1', { q: longQuery, page: 2, pageSize: 10 })
+
+    const [where, skip, take] = vi.mocked(repo.findMany).mock.calls[0]
+    expect(skip).toBe(10)
+    expect(take).toBe(10)
+    expect(where.OR[0].firstName.contains).toHaveLength(100)
+    expect(where.OR[0].firstName.contains).not.toMatch(/^\s|\s$/)
+  })
+
+  it('parses customer date fields and triggers async license validation on create', async () => {
+    vi.mocked(repo.create).mockResolvedValue({ ...customer, licenseExpiry: new Date('2028-01-01T00:00:00.000Z') } as any)
+
+    await service.createCustomer({
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.test',
+      dateOfBirth: '1998-05-20',
+      licenseIssuedAt: '2024-01-01',
+      licenseExpiry: '2028-01-01',
+    }, 'company_1')
+
+    expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      dateOfBirth: expect.any(Date),
+      licenseIssuedAt: expect.any(Date),
+      licenseExpiry: expect.any(Date),
+    }))
+    expect(validateAndFlagLicense).toHaveBeenCalledWith('customer_1', 'company_1')
+  })
+
+  it('parses changed license dates and validates refreshed customer licenses on update', async () => {
+    vi.mocked(repo.updateMany).mockResolvedValue({ count: 1 } as any)
+    vi.mocked(repo.findUniqueOrThrow).mockResolvedValue({ ...customer, licenseExpiry: new Date('2029-01-01T00:00:00.000Z') } as any)
+
+    await service.updateCustomer('customer_1', 'company_1', { licenseExpiry: '2029-01-01' })
+
+    expect(repo.updateMany).toHaveBeenCalledWith('customer_1', 'company_1', expect.objectContaining({
+      licenseExpiry: expect.any(Date),
+      dateOfBirth: undefined,
+      licenseIssuedAt: undefined,
+    }))
+    expect(validateAndFlagLicense).toHaveBeenCalledWith('customer_1', 'company_1')
+  })
+
+  it('replaces existing license images without failing the upload when old-file deletion rejects', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ ...customer, licenseImageUrl: 'http://localhost:4000/storage/old-license.jpg' } as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...customer, licenseImageUrl: 'http://localhost:4000/storage/companies/company_1/customers/customer_1/new-license.jpg' } as any)
+    vi.mocked(deleteImage).mockRejectedValue(new Error('old file missing'))
+
+    const result = await service.uploadLicenseImage('customer_1', 'company_1', { buffer: Buffer.from('image') } as any)
+
+    expect(uploadImage).toHaveBeenCalledWith(expect.any(Buffer), 'companies/company_1/customers/customer_1')
+    expect(deleteImage).toHaveBeenCalledWith('http://localhost:4000/storage/old-license.jpg')
+    expect(result.licenseImageUrl).toBe('http://localhost:3000/dashboard/api/v1/customers/customer_1/license-image')
+  })
+
+  it('throws not found when a stored license URL cannot be resolved to a safe file path', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ ...customer, licenseImageUrl: 'https://evil.example/license.jpg' } as any)
+    vi.mocked(resolveStoredFilePath).mockReturnValue(null)
+
+    await expect(service.getLicenseImageFile('customer_1', 'company_1')).rejects.toThrow('License image not found')
+  })
+
+  it('records approver name, timestamp, and note when denying a license', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue(customer as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...customer, licenseValidationStatus: 'DENIED' } as any)
+
+    await service.approveLicense('customer_1', 'company_1', 'DENY', 'Unreadable scan', 'Ops Lead')
+
+    expect(repo.updateById).toHaveBeenCalledWith('customer_1', expect.objectContaining({
+      licenseValidationStatus: 'DENIED',
+      licenseApprovedBy: 'Ops Lead',
+      licenseApprovedAt: expect.any(Date),
+      licenseApprovalNote: 'Unreadable scan',
+    }))
+  })
+})
diff --git a/api/src/modules/customers/customer.presenter.test.ts b/api/src/modules/customers/customer.presenter.test.ts
new file mode 100644
index 0000000..58af2c1
--- /dev/null
+++ b/api/src/modules/customers/customer.presenter.test.ts
@@ -0,0 +1,40 @@
+import { afterAll, beforeEach, describe, expect, it } from 'vitest'
+import { presentCustomer, presentCustomerList } from './customer.presenter'
+
+describe('customer.presenter', () => {
+  const originalDashboardUrl = process.env.DASHBOARD_URL
+  const originalPublicDashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL
+
+  beforeEach(() => {
+    process.env.DASHBOARD_URL = 'https://dashboard.example.test'
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = ''
+  })
+
+  afterAll(() => {
+    process.env.DASHBOARD_URL = originalDashboardUrl
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = originalPublicDashboardUrl
+  })
+
+  it('rewrites raw customer license images to the protected dashboard endpoint', () => {
+    expect(presentCustomer({
+      id: 'customer_1',
+      firstName: 'Aya',
+      licenseImageUrl: '/storage/companies/company_1/customers/customer_1/license.jpg',
+    })).toMatchObject({
+      id: 'customer_1',
+      firstName: 'Aya',
+      licenseImageUrl: 'https://dashboard.example.test/api/v1/customers/customer_1/license-image',
+    })
+  })
+
+  it('keeps missing license images null and wraps customer lists with metadata', () => {
+    expect(presentCustomer({ id: 'customer_1', licenseImageUrl: null }).licenseImageUrl).toBeNull()
+    expect(presentCustomerList([{ id: 'customer_1' }], { total: 1, page: 1, pageSize: 20, totalPages: 1 })).toEqual({
+      data: [{ id: 'customer_1' }],
+      total: 1,
+      page: 1,
+      pageSize: 20,
+      totalPages: 1,
+    })
+  })
+})
diff --git a/api/src/modules/customers/customer.presenter.ts b/api/src/modules/customers/customer.presenter.ts
new file mode 100644
index 0000000..6463441
--- /dev/null
+++ b/api/src/modules/customers/customer.presenter.ts
@@ -0,0 +1,14 @@
+import { getProtectedCustomerLicenseImageUrl } from '../../lib/storage'
+
+export function presentCustomer(customer: any) {
+  return {
+    ...customer,
+    licenseImageUrl: customer?.licenseImageUrl
+      ? getProtectedCustomerLicenseImageUrl(customer.id)
+      : null,
+  }
+}
+
+export function presentCustomerList(customers: any[], meta: { total: number; page: number; pageSize: number; totalPages: number }) {
+  return { data: customers, ...meta }
+}
diff --git a/api/src/modules/customers/customer.repo.boundary.test.ts b/api/src/modules/customers/customer.repo.boundary.test.ts
new file mode 100644
index 0000000..ce3af80
--- /dev/null
+++ b/api/src/modules/customers/customer.repo.boundary.test.ts
@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    $queryRawUnsafe: vi.fn(),
+    customer: {
+      findMany: vi.fn(),
+      count: vi.fn(),
+      findFirst: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      updateMany: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+
+describe('customer.repo storage-column compatibility', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+  })
+
+  it('includes licenseImageUrl when the deployed schema supports the column', async () => {
+    vi.mocked(prisma.$queryRawUnsafe).mockResolvedValue([{ exists: true }] as never)
+    const repo = await import('./customer.repo')
+
+    await repo.findMany({ companyId: 'company_1' }, 0, 20)
+
+    expect(prisma.customer.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      select: expect.objectContaining({ licenseImageUrl: true }),
+    }))
+    expect(prisma.customer.count).toHaveBeenCalledWith({ where: { companyId: 'company_1' } })
+  })
+
+  it('strips licenseImageUrl from writes when the old deployed schema lacks the column', async () => {
+    vi.mocked(prisma.$queryRawUnsafe).mockResolvedValue([{ exists: false }] as never)
+    const repo = await import('./customer.repo')
+
+    await repo.create({ companyId: 'company_1', email: 'renter@example.test', licenseImageUrl: '/storage/private.png' })
+
+    expect(prisma.customer.create).toHaveBeenCalledWith({
+      data: { companyId: 'company_1', email: 'renter@example.test' },
+      select: expect.not.objectContaining({ licenseImageUrl: true }),
+    })
+  })
+
+  it('scopes customer updates by id and company id without querying schema support', async () => {
+    const repo = await import('./customer.repo')
+
+    await repo.updateMany('customer_1', 'company_1', { flagged: true })
+
+    expect(prisma.customer.updateMany).toHaveBeenCalledWith({
+      where: { id: 'customer_1', companyId: 'company_1' },
+      data: { flagged: true },
+    })
+    expect(prisma.$queryRawUnsafe).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/modules/customers/customer.repo.ts b/api/src/modules/customers/customer.repo.ts
new file mode 100644
index 0000000..b5ef7fe
--- /dev/null
+++ b/api/src/modules/customers/customer.repo.ts
@@ -0,0 +1,109 @@
+import { prisma } from '../../lib/prisma'
+
+let customerLicenseImageColumnSupported: boolean | null = null
+
+async function hasCustomerLicenseImageColumn() {
+  if (customerLicenseImageColumnSupported !== null) {
+    return customerLicenseImageColumnSupported
+  }
+
+  const rows = await prisma.$queryRawUnsafe<Array<{ exists: boolean }>>(
+    "select exists(select 1 from information_schema.columns where table_schema = 'public' and table_name = 'customers' and column_name = 'licenseImageUrl') as exists"
+  )
+  customerLicenseImageColumnSupported = Boolean(rows[0]?.exists)
+  return customerLicenseImageColumnSupported
+}
+
+function buildCustomerSelect(includeLicenseImageUrl: boolean) {
+  return {
+    id: true,
+    companyId: true,
+    renterId: true,
+    firstName: true,
+    lastName: true,
+    email: true,
+    phone: true,
+    driverLicense: true,
+    dateOfBirth: true,
+    nationality: true,
+    address: true,
+    notes: true,
+    flagged: true,
+    flagReason: true,
+    licenseExpiry: true,
+    licenseIssuedAt: true,
+    licenseCountry: true,
+    licenseNumber: true,
+    licenseCategory: true,
+    licenseExpired: true,
+    licenseExpiringSoon: true,
+    licenseValidationStatus: true,
+    licenseApprovedBy: true,
+    licenseApprovedAt: true,
+    licenseApprovalNote: true,
+    ...(includeLicenseImageUrl ? { licenseImageUrl: true } : {}),
+    createdAt: true,
+    updatedAt: true,
+  }
+}
+
+async function getCustomerSelect() {
+  return buildCustomerSelect(await hasCustomerLicenseImageColumn())
+}
+
+async function sanitizeCustomerData(data: Record<string, unknown>) {
+  if (await hasCustomerLicenseImageColumn()) {
+    return data
+  }
+
+  const { licenseImageUrl, ...rest } = data
+  void licenseImageUrl
+  return rest as Record<string, unknown>
+}
+
+export async function findMany(where: any, skip: number, take: number) {
+  const select = await getCustomerSelect()
+  return Promise.all([
+    prisma.customer.findMany({ where, skip, take, orderBy: { createdAt: 'desc' }, select }),
+    prisma.customer.count({ where }),
+  ])
+}
+
+export async function findById(id: string, companyId: string) {
+  const select = await getCustomerSelect()
+  return prisma.customer.findFirst({
+    where: { id, companyId },
+    select: {
+      ...select,
+      reservations: { include: { vehicle: true }, orderBy: { createdAt: 'desc' }, take: 20 },
+    },
+  })
+}
+
+export async function findByIdSimple(id: string, companyId: string) {
+  return prisma.customer.findFirst({ where: { id, companyId }, select: await getCustomerSelect() })
+}
+
+export async function create(data: any) {
+  return prisma.customer.create({ data: (await sanitizeCustomerData(data)) as any, select: await getCustomerSelect() })
+}
+
+export async function updateMany(id: string, companyId: string, data: any) {
+  return prisma.customer.updateMany({ where: { id, companyId }, data })
+}
+
+export async function updateById(id: string, data: any) {
+  return prisma.customer.update({
+    where: { id },
+    data: (await sanitizeCustomerData(data)) as any,
+    select: await getCustomerSelect(),
+  })
+}
+
+export async function findUniqueOrThrow(id: string, companyId?: string) {
+  const select = await getCustomerSelect()
+  if (companyId) {
+    return prisma.customer.findFirstOrThrow({ where: { id, companyId }, select })
+  }
+  return prisma.customer.findUniqueOrThrow({ where: { id }, select })
+}
diff --git a/api/src/modules/customers/customer.routes.ts b/api/src/modules/customers/customer.routes.ts
new file mode 100644
index 0000000..4a32752
--- /dev/null
+++ b/api/src/modules/customers/customer.routes.ts
@@ -0,0 +1,100 @@
+import { Router } from 'express'
+import { requireCompanyAuth, requireCompanyDocumentAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { imageUpload, assertImageFile } from '../../http/upload'
+import * as service from './customer.service'
+import { customerSchema, listQuerySchema, approveLicenseSchema, flagSchema, idParamSchema } from './customer.schemas'
+
+const router = Router()
+
+router.get('/:id/license-image', requireCompanyDocumentAuth, requireTenant, requireSubscription, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const filePath = await service.getLicenseImageFile(id, req.companyId)
+    res.sendFile(filePath)
+  } catch (err) { next(err) }
+})
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    const result = await service.listCustomers(req.companyId, query)
+    res.json(result)
+  } catch (err) { next(err) }
+})
+
+router.post('/', async (req, res, next) => {
+  try {
+    const body = parseBody(customerSchema, req)
+    const customer = await service.createCustomer(body, req.companyId)
+    created(res, customer)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const customer = await service.getCustomer(id, req.companyId)
+    ok(res, customer)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(customerSchema.partial(), req)
+    const customer = await service.updateCustomer(id, req.companyId, body)
+    ok(res, customer)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/flag', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { reason } = parseBody(flagSchema, req)
+    await service.flagCustomer(id, req.companyId, reason)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id/flag', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.unflagCustomer(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/validate-license', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const result = await service.validateCustomerLicense(id, req.companyId)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/license-image', imageUpload.single('file'), async (req, res, next) => {
+  try {
+    assertImageFile(req.file, 'license image')
+    const { id } = parseParams(idParamSchema, req)
+    const updated = await service.uploadLicenseImage(id, req.companyId, req.file)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/approve-license', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { decision, note } = parseBody(approveLicenseSchema, req)
+    const approverName = `${req.employee.firstName} ${req.employee.lastName}`
+    const updated = await service.approveLicense(id, req.companyId, decision, note, approverName)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/customers/customer.schemas.contract.test.ts b/api/src/modules/customers/customer.schemas.contract.test.ts
new file mode 100644
index 0000000..7224b39
--- /dev/null
+++ b/api/src/modules/customers/customer.schemas.contract.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { approveLicenseSchema, customerSchema, flagSchema, listQuerySchema } from './customer.schemas'
+
+describe('customer schema contracts', () => {
+  it('normalizes create payload identity fields and optional text', () => {
+    const parsed = customerSchema.parse({
+      firstName: '  Aya  ',
+      lastName: '  Haddad  ',
+      email: 'AYA@EXAMPLE.TEST',
+      phone: '  +212600000000  ',
+      notes: '  VIP renter  ',
+      licenseNumber: '  B-123456  ',
+      dateOfBirth: '1994-05-01T00:00:00.000Z',
+    })
+
+    expect(parsed).toMatchObject({
+      firstName: 'Aya',
+      lastName: 'Haddad',
+      email: 'aya@example.test',
+      phone: '+212600000000',
+      notes: 'VIP renter',
+      licenseNumber: 'B-123456',
+    })
+  })
+
+  it('coerces list pagination and preserves supported filters', () => {
+    expect(listQuerySchema.parse({ page: '3', pageSize: '40', q: 'aya', flagged: 'true' })).toEqual({
+      page: 3,
+      pageSize: 40,
+      q: 'aya',
+      flagged: 'true',
+    })
+  })
+
+  it('rejects impossible pagination and unsafe customer field lengths', () => {
+    expect(() => listQuerySchema.parse({ page: '0' })).toThrow()
+    expect(() => customerSchema.parse({ firstName: '', lastName: 'Haddad', email: 'aya@example.test' })).toThrow()
+    expect(() => customerSchema.parse({ firstName: 'Aya', lastName: 'Haddad', email: 'not-email' })).toThrow()
+    expect(() => customerSchema.parse({ firstName: 'Aya', lastName: 'Haddad', email: 'aya@example.test', notes: 'x'.repeat(2001) })).toThrow()
+  })
+
+  it('limits license approvals to explicit approve or deny decisions', () => {
+    expect(approveLicenseSchema.parse({ decision: 'APPROVE', note: 'Verified manually' })).toEqual({
+      decision: 'APPROVE',
+      note: 'Verified manually',
+    })
+    expect(() => approveLicenseSchema.parse({ decision: 'MAYBE' })).toThrow()
+  })
+
+  it('keeps customer flagging reason optional', () => {
+    expect(flagSchema.parse({})).toEqual({})
+    expect(flagSchema.parse({ reason: 'Chargeback risk' })).toEqual({ reason: 'Chargeback risk' })
+  })
+})
diff --git a/api/src/modules/customers/customer.schemas.ts b/api/src/modules/customers/customer.schemas.ts
new file mode 100644
index 0000000..f1a673c
--- /dev/null
+++ b/api/src/modules/customers/customer.schemas.ts
@@ -0,0 +1,40 @@
+import { z } from 'zod'
+import { textField, optionalTextField, emailField, optionalUpperField, optionalPhoneField } from '../../lib/zodValidation'
+
+export const paginationSchema = z.object({
+  page:     z.coerce.number().int().min(1).max(10000).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const customerSchema = z.object({
+  firstName:       textField('name'),
+  lastName:        textField('name'),
+  email:           emailField(),
+  phone:           optionalPhoneField(),
+  driverLicense:   optionalUpperField('driverLicenseNumber'),
+  dateOfBirth:     z.string().datetime().optional(),
+  nationality:     optionalTextField('nationality'),
+  address:         z.record(z.unknown()).optional(),
+  notes:           z.string().max(2000).trim().optional(),
+  licenseExpiry:   z.string().datetime().optional(),
+  licenseIssuedAt: z.string().datetime().optional(),
+  licenseCountry:  optionalTextField('country'),
+  licenseNumber:   optionalUpperField('driverLicenseNumber'),
+  licenseCategory: optionalUpperField('licenseCategory'),
+})
+
+export const listQuerySchema = paginationSchema.extend({
+  q:       z.string().max(100).optional(),
+  flagged: z.enum(['true', 'false']).optional(),
+})
+
+export const approveLicenseSchema = z.object({
+  decision: z.enum(['APPROVE', 'DENY']),
+  note:     z.string().optional(),
+})
+
+export const flagSchema = z.object({
+  reason: z.string().optional(),
+})
+
+export const idParamSchema = z.object({ id: z.string() })
diff --git a/api/src/modules/customers/customer.service.boundary.test.ts b/api/src/modules/customers/customer.service.boundary.test.ts
new file mode 100644
index 0000000..db2f9fe
--- /dev/null
+++ b/api/src/modules/customers/customer.service.boundary.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../services/licenseValidationService', () => ({
+  validateAndFlagLicense: vi.fn(),
+}))
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn(),
+  deleteImage: vi.fn(),
+  resolveStoredFilePath: vi.fn(),
+}))
+vi.mock('./customer.presenter', () => ({
+  presentCustomer: vi.fn((customer: any) => ({ presented: true, ...customer })),
+  presentCustomerList: vi.fn((customers: any[], meta: any) => ({ data: customers, meta })),
+}))
+vi.mock('./customer.repo', () => ({
+  findMany: vi.fn(),
+  findById: vi.fn(),
+  create: vi.fn(),
+  updateMany: vi.fn(),
+  findUniqueOrThrow: vi.fn(),
+  findByIdSimple: vi.fn(),
+  updateById: vi.fn(),
+}))
+
+import { NotFoundError } from '../../http/errors'
+import { validateAndFlagLicense } from '../../services/licenseValidationService'
+import { uploadImage, deleteImage, resolveStoredFilePath } from '../../lib/storage'
+import * as repo from './customer.repo'
+import * as service from './customer.service'
+
+describe('customer.service boundary behavior', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('trims and caps search while applying flagged and pagination filters', async () => {
+    vi.mocked(repo.findMany).mockResolvedValue([[{ id: 'customer_1' }], 41] as never)
+
+    const result = await service.listCustomers('company_1', {
+      page: 3,
+      pageSize: 10,
+      q: `  ${'x'.repeat(150)}  `,
+      flagged: 'false',
+    })
+
+    const expectedQ = 'x'.repeat(100)
+    expect(repo.findMany).toHaveBeenCalledWith({
+      companyId: 'company_1',
+      flagged: false,
+      OR: [
+        { firstName: { contains: expectedQ, mode: 'insensitive' } },
+        { lastName: { contains: expectedQ, mode: 'insensitive' } },
+        { email: { contains: expectedQ, mode: 'insensitive' } },
+      ],
+    }, 20, 10)
+    expect(result.meta).toEqual({ total: 41, page: 3, pageSize: 10, totalPages: 5 })
+  })
+
+  it('normalizes customer date fields and swallows async license validation failures after create', async () => {
+    vi.mocked(repo.create).mockResolvedValue({ id: 'customer_1', email: 'renter@example.test' } as never)
+    vi.mocked(validateAndFlagLicense).mockRejectedValue(new Error('provider down') as never)
+
+    await service.createCustomer({
+      firstName: 'Nora',
+      dateOfBirth: '1992-02-03',
+      licenseExpiry: '2027-01-01',
+      licenseIssuedAt: '2022-01-01',
+    }, 'company_1')
+
+    expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      dateOfBirth: new Date('1992-02-03'),
+      licenseExpiry: new Date('2027-01-01'),
+      licenseIssuedAt: new Date('2022-01-01'),
+    }))
+    expect(validateAndFlagLicense).toHaveBeenCalledWith('customer_1', 'company_1')
+  })
+
+  it('throws not found when tenant-scoped update touches no rows', async () => {
+    vi.mocked(repo.updateMany).mockResolvedValue({ count: 0 } as never)
+
+    await expect(service.updateCustomer('customer_1', 'company_1', { firstName: 'Nope' })).rejects.toBeInstanceOf(NotFoundError)
+    expect(repo.findUniqueOrThrow).not.toHaveBeenCalled()
+  })
+
+  it('uploads the new license image and best-effort deletes the previous one', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ id: 'customer_1', licenseImageUrl: '/storage/old.png' } as never)
+    vi.mocked(uploadImage).mockResolvedValue('/storage/new.png' as never)
+    vi.mocked(deleteImage).mockRejectedValue(new Error('already gone') as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'customer_1', licenseImageUrl: '/storage/new.png' } as never)
+
+    const file = { buffer: Buffer.from('fake') } as Express.Multer.File
+    const result = await service.uploadLicenseImage('customer_1', 'company_1', file)
+
+    expect(uploadImage).toHaveBeenCalledWith(file.buffer, 'companies/company_1/customers/customer_1')
+    expect(deleteImage).toHaveBeenCalledWith('/storage/old.png')
+    expect(repo.updateById).toHaveBeenCalledWith('customer_1', { licenseImageUrl: '/storage/new.png' })
+    expect(result.licenseImageUrl).toBe('/storage/new.png')
+  })
+
+  it('rejects license-image access when the stored URL cannot resolve to a file path', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ id: 'customer_1', licenseImageUrl: '/storage/missing.png' } as never)
+    vi.mocked(resolveStoredFilePath).mockReturnValue(null)
+
+    await expect(service.getLicenseImageFile('customer_1', 'company_1')).rejects.toBeInstanceOf(NotFoundError)
+  })
+
+  it('records approver metadata when manually approving a license', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ id: 'customer_1' } as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'customer_1', licenseValidationStatus: 'APPROVED' } as never)
+
+    await service.approveLicense('customer_1', 'company_1', 'APPROVE', undefined, 'Mina Manager')
+
+    expect(repo.updateById).toHaveBeenCalledWith('customer_1', expect.objectContaining({
+      licenseValidationStatus: 'APPROVED',
+      licenseApprovedBy: 'Mina Manager',
+      licenseApprovalNote: null,
+      licenseApprovedAt: expect.any(Date),
+    }))
+  })
+})
diff --git a/api/src/modules/customers/customer.service.ts b/api/src/modules/customers/customer.service.ts
new file mode 100644
index 0000000..7237d9f
--- /dev/null
+++ b/api/src/modules/customers/customer.service.ts
@@ -0,0 +1,100 @@
+import { validateAndFlagLicense } from '../../services/licenseValidationService'
+import { uploadImage, deleteImage, resolveStoredFilePath } from '../../lib/storage'
+import { NotFoundError } from '../../http/errors'
+import { presentCustomer, presentCustomerList } from './customer.presenter'
+import * as repo from './customer.repo'
+
+export async function listCustomers(companyId: string, query: { page?: number; pageSize?: number; q?: string; flagged?: string }) {
+  const page     = query.page     ?? 1
+  const pageSize = query.pageSize ?? 20
+  const { q, flagged } = query
+  const safeQ = q ? q.trim().slice(0, 100) : undefined
+  const where: any = { companyId }
+  if (flagged !== undefined) where.flagged = flagged === 'true'
+  if (safeQ) {
+    where.OR = [
+      { firstName: { contains: safeQ, mode: 'insensitive' } },
+      { lastName:  { contains: safeQ, mode: 'insensitive' } },
+      { email:     { contains: safeQ, mode: 'insensitive' } },
+    ]
+  }
+  const [customers, total] = await repo.findMany(where, (page - 1) * pageSize, pageSize)
+  return presentCustomerList(customers.map(presentCustomer), { total, page, pageSize, totalPages: Math.ceil(total / pageSize) })
+}
+
+export async function getCustomer(id: string, companyId: string) {
+  const customer = await repo.findById(id, companyId)
+  if (!customer) throw new NotFoundError('Customer not found')
+  return presentCustomer(customer)
+}
+
+export async function createCustomer(data: any, companyId: string) {
+  const customer = await repo.create({
+    ...data,
+    companyId,
+    dateOfBirth:     data.dateOfBirth     ? new Date(data.dateOfBirth)     : null,
+    licenseExpiry:   data.licenseExpiry   ? new Date(data.licenseExpiry)   : null,
+    licenseIssuedAt: data.licenseIssuedAt ? new Date(data.licenseIssuedAt) : null,
+  })
+  if (data.licenseExpiry) {
+    await validateAndFlagLicense(customer.id, companyId).catch(() => null)
+  }
+  return presentCustomer(customer)
+}
+
+export async function updateCustomer(id: string, companyId: string, data: any) {
+  const result = await repo.updateMany(id, companyId, {
+    ...data,
+    dateOfBirth:     data.dateOfBirth     ? new Date(data.dateOfBirth)     : undefined,
+    licenseExpiry:   data.licenseExpiry   ? new Date(data.licenseExpiry)   : undefined,
+    licenseIssuedAt: data.licenseIssuedAt ? new Date(data.licenseIssuedAt) : undefined,
+  })
+  if (result.count === 0) throw new NotFoundError('Customer not found')
+  if (data.licenseExpiry) await validateAndFlagLicense(id, companyId).catch(() => null)
+  return presentCustomer(await repo.findUniqueOrThrow(id, companyId))
+}
+
+export async function flagCustomer(id: string, companyId: string, reason?: string) {
+  await repo.updateMany(id, companyId, { flagged: true, flagReason: reason ?? null })
+}
+
+export async function unflagCustomer(id: string, companyId: string) {
+  await repo.updateMany(id, companyId, { flagged: false, flagReason: null })
+}
+
+export async function validateCustomerLicense(id: string, companyId: string) {
+  const customer = await repo.findByIdSimple(id, companyId)
+  if (!customer) throw new NotFoundError('Customer not found')
+  return validateAndFlagLicense(customer.id, companyId)
+}
+
+export async function uploadLicenseImage(id: string, companyId: string, file: Express.Multer.File) {
+  const customer = await repo.findByIdSimple(id, companyId)
+  if (!customer) throw new NotFoundError('Customer not found')
+  const url = await uploadImage(file.buffer, `companies/${companyId}/customers/${customer.id}`)
+  if (customer.licenseImageUrl) {
+    await deleteImage(customer.licenseImageUrl).catch(() => null)
+  }
+  return presentCustomer(await repo.updateById(customer.id, { licenseImageUrl: url }))
+}
+
+export async function getLicenseImageFile(id: string, companyId: string) {
+  const customer = await repo.findByIdSimple(id, companyId)
+  if (!customer || !customer.licenseImageUrl) throw new NotFoundError('License image not found')
+
+  const filePath = resolveStoredFilePath(customer.licenseImageUrl)
+  if (!filePath) throw new NotFoundError('License image not found')
+
+  return filePath
+}
+
+export async function approveLicense(id: string, companyId: string, decision: 'APPROVE' | 'DENY', note: string | undefined, approverName: string) {
+  const customer = await repo.findByIdSimple(id, companyId)
+  if (!customer) throw new NotFoundError('Customer not found')
+  return presentCustomer(await repo.updateById(customer.id, {
+    licenseValidationStatus: decision === 'APPROVE' ? 'APPROVED' : 'DENIED',
+    licenseApprovedBy:       approverName,
+    licenseApprovedAt:       new Date(),
+    licenseApprovalNote:     note ?? null,
+  }))
+}
diff --git a/api/src/modules/customers/customer.test.ts b/api/src/modules/customers/customer.test.ts
new file mode 100644
index 0000000..ebd8a88
--- /dev/null
+++ b/api/src/modules/customers/customer.test.ts
@@ -0,0 +1,134 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import * as repo from './customer.repo'
+import * as service from './customer.service'
+
+vi.mock('./customer.repo')
+vi.mock('../../services/licenseValidationService', () => ({
+  validateAndFlagLicense: vi.fn().mockResolvedValue({ status: 'VALID', daysUntilExpiry: 365, requiresApproval: false, message: 'Valid' }),
+}))
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn().mockResolvedValue('http://localhost:4000/storage/test.jpg'),
+  deleteImage: vi.fn().mockResolvedValue(undefined),
+  resolveStoredFilePath: vi.fn().mockReturnValue('/tmp/license.jpg'),
+  getProtectedCustomerLicenseImageUrl: vi.fn((customerId: string) => `http://localhost:3000/dashboard/api/v1/customers/${customerId}/license-image`),
+}))
+
+const mockCustomer = {
+  id: 'cust_1',
+  companyId: 'comp_1',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john@example.com',
+  licenseImageUrl: null,
+  flagged: false,
+  flagReason: null,
+  licenseExpiry: null,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('customer.service', () => {
+  describe('listCustomers', () => {
+    it('returns paginated customer list', async () => {
+      vi.mocked(repo.findMany).mockResolvedValue([[mockCustomer], 1] as any)
+      const result = await service.listCustomers('comp_1', { page: 1, pageSize: 20 })
+      expect(result.total).toBe(1)
+      expect(result.data).toHaveLength(1)
+      expect(result.totalPages).toBe(1)
+    })
+
+    it('filters by search query', async () => {
+      vi.mocked(repo.findMany).mockResolvedValue([[], 0] as any)
+      await service.listCustomers('comp_1', { page: 1, pageSize: 20, q: 'john' })
+      expect(repo.findMany).toHaveBeenCalledWith(
+        expect.objectContaining({ OR: expect.arrayContaining([expect.objectContaining({ firstName: expect.anything() })]) }),
+        0, 20,
+      )
+    })
+
+    it('filters by flagged status', async () => {
+      vi.mocked(repo.findMany).mockResolvedValue([[], 0] as any)
+      await service.listCustomers('comp_1', { page: 1, pageSize: 20, flagged: 'true' })
+      expect(repo.findMany).toHaveBeenCalledWith(
+        expect.objectContaining({ flagged: true }),
+        0, 20,
+      )
+    })
+  })
+
+  describe('createCustomer', () => {
+    it('creates customer and returns it', async () => {
+      vi.mocked(repo.create).mockResolvedValue(mockCustomer as any)
+      const result = await service.createCustomer({ firstName: 'John', lastName: 'Doe', email: 'john@example.com' }, 'comp_1')
+      expect(result).toEqual({
+        ...mockCustomer,
+        licenseImageUrl: null,
+      })
+      expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({ companyId: 'comp_1' }))
+    })
+  })
+
+  describe('updateCustomer', () => {
+    it('throws NotFoundError when customer does not belong to company', async () => {
+      vi.mocked(repo.updateMany).mockResolvedValue({ count: 0 } as any)
+      await expect(service.updateCustomer('cust_1', 'comp_1', { firstName: 'Jane' })).rejects.toThrow('Customer not found')
+    })
+
+    it('updates customer and returns refreshed record', async () => {
+      vi.mocked(repo.updateMany).mockResolvedValue({ count: 1 } as any)
+      vi.mocked(repo.findUniqueOrThrow).mockResolvedValue({ ...mockCustomer, firstName: 'Jane' } as any)
+      const result = await service.updateCustomer('cust_1', 'comp_1', { firstName: 'Jane' })
+      expect(result.firstName).toBe('Jane')
+      expect(result.licenseImageUrl).toBeNull()
+    })
+  })
+
+  describe('flagCustomer', () => {
+    it('sets flagged=true with reason', async () => {
+      vi.mocked(repo.updateMany).mockResolvedValue({ count: 1 } as any)
+      await service.flagCustomer('cust_1', 'comp_1', 'Suspicious behavior')
+      expect(repo.updateMany).toHaveBeenCalledWith('cust_1', 'comp_1', { flagged: true, flagReason: 'Suspicious behavior' })
+    })
+  })
+
+  describe('unflagCustomer', () => {
+    it('clears flag and reason', async () => {
+      vi.mocked(repo.updateMany).mockResolvedValue({ count: 1 } as any)
+      await service.unflagCustomer('cust_1', 'comp_1')
+      expect(repo.updateMany).toHaveBeenCalledWith('cust_1', 'comp_1', { flagged: false, flagReason: null })
+    })
+  })
+
+  describe('uploadLicenseImage', () => {
+    it('uploads image and updates customer record', async () => {
+      vi.mocked(repo.findByIdSimple).mockResolvedValue(mockCustomer as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockCustomer, licenseImageUrl: 'http://localhost:4000/storage/test.jpg' } as any)
+      const result = await service.uploadLicenseImage('cust_1', 'comp_1', { buffer: Buffer.from(''), mimetype: 'image/jpeg' } as any)
+      expect(result.licenseImageUrl).toBe('http://localhost:3000/dashboard/api/v1/customers/cust_1/license-image')
+    })
+
+    it('resolves a stored file path for protected downloads', async () => {
+      vi.mocked(repo.findByIdSimple).mockResolvedValue({ ...mockCustomer, licenseImageUrl: 'http://localhost:4000/storage/test.jpg' } as any)
+      const result = await service.getLicenseImageFile('cust_1', 'comp_1')
+      expect(result).toBe('/tmp/license.jpg')
+    })
+  })
+
+  describe('approveLicense', () => {
+    it('sets APPROVED status', async () => {
+      vi.mocked(repo.findByIdSimple).mockResolvedValue(mockCustomer as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockCustomer, licenseValidationStatus: 'APPROVED' } as any)
+      const result = await service.approveLicense('cust_1', 'comp_1', 'APPROVE', undefined, 'Admin User')
+      expect(repo.updateById).toHaveBeenCalledWith('cust_1', expect.objectContaining({ licenseValidationStatus: 'APPROVED' }))
+    })
+
+    it('sets DENIED status', async () => {
+      vi.mocked(repo.findByIdSimple).mockResolvedValue(mockCustomer as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockCustomer, licenseValidationStatus: 'DENIED' } as any)
+      await service.approveLicense('cust_1', 'comp_1', 'DENY', 'Expired document', 'Admin User')
+      expect(repo.updateById).toHaveBeenCalledWith('cust_1', expect.objectContaining({ licenseValidationStatus: 'DENIED' }))
+    })
+  })
+})
diff --git a/api/src/modules/licenses/license.validation.routes.ts b/api/src/modules/licenses/license.validation.routes.ts
new file mode 100644
index 0000000..8abc617
--- /dev/null
+++ b/api/src/modules/licenses/license.validation.routes.ts
@@ -0,0 +1,69 @@
+import { Router } from 'express'
+import { parseBody } from '../../http/validate'
+import { ok } from '../../http/respond'
+import { AppError } from '../../http/errors'
+import { validateLicenseSchema } from './license.validation.schemas'
+import { parseExpirationDate, validateLicenseDate, ErrorCode } from '../../services/licenseValidationService'
+
+const router = Router()
+
+/**
+ * POST /api/v1/licenses/validate
+ *
+ * Validates a driver's license expiration date against the minimum validity rule.
+ *
+ * Request body:
+ *   { expiration_date: string, license_number?: string, state?: string }
+ *
+ * Success (200): license is valid (≥30 days remaining)
+ * Error (400):   invalid format, missing date, future date
+ * Error (422):   expired or expiring soon (<30 days remaining)
+ */
+router.post('/validate', async (req, res, next) => {
+  try {
+    const { expiration_date } = parseBody(validateLicenseSchema, req)
+    const parsedDate = parseExpirationDate(expiration_date)
+
+    if (!parsedDate) {
+      throw new AppError(
+        `Unable to parse date "${expiration_date}". Please use YYYY-MM-DD, MM/DD/YYYY, DD/MM/YYYY, or DD-MMM-YYYY format.`,
+        400,
+        ErrorCode.LICENSE_INVALID_FORMAT,
+        {
+          details: {
+            expiration_date,
+            suggested_action: 'Please provide the date in a supported format (e.g., YYYY-MM-DD).',
+          },
+        },
+      )
+    }
+
+    const result = validateLicenseDate(parsedDate)
+
+    if (!result.valid) {
+      // Map error codes to HTTP status
+      const statusCode =
+        result.error_code === ErrorCode.LICENSE_EXPIRED || result.error_code === ErrorCode.LICENSE_EXPIRING_SOON
+          ? 422
+          : 400
+
+      throw new AppError(result.message, statusCode, result.error_code!, {
+        details: result.details,
+      })
+    }
+
+    ok(res, {
+      valid: true,
+      days_remaining: result.days_remaining,
+      expiration_date: result.expiration_date,
+      message: result.message,
+      next_reminder: result.days_remaining
+        ? new Date(Date.now() + (result.days_remaining - 30) * 86400000).toISOString().split('T')[0] ?? null
+        : null,
+    })
+  } catch (err) {
+    next(err)
+  }
+})
+
+export default router
diff --git a/api/src/modules/licenses/license.validation.schemas.ts b/api/src/modules/licenses/license.validation.schemas.ts
new file mode 100644
index 0000000..5dfae3b
--- /dev/null
+++ b/api/src/modules/licenses/license.validation.schemas.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+
+/** Request body for POST /api/v1/licenses/validate */
+export const validateLicenseSchema = z.object({
+  expiration_date: z.string().min(1, 'expiration_date is required'),
+  license_number: z.string().max(100).optional(),
+  state: z.string().length(2).optional(),
+})
+
+export type ValidateLicenseInput = z.infer<typeof validateLicenseSchema>
diff --git a/api/src/modules/marketplace/marketplace.presenter.test.ts b/api/src/modules/marketplace/marketplace.presenter.test.ts
new file mode 100644
index 0000000..cc879a9
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.presenter.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { presentVehicleWithAvailability } from './marketplace.presenter'
+
+describe('marketplace.presenter', () => {
+  it('adds public availability fields without mutating the original vehicle shape', () => {
+    const nextAvailableAt = new Date('2026-08-01T10:00:00.000Z')
+    const vehicle = { id: 'vehicle_1', make: 'Dacia', model: 'Logan', dailyRate: 25000 }
+
+    expect(presentVehicleWithAvailability(vehicle, {
+      available: false,
+      status: 'RESERVED',
+      nextAvailableAt,
+    })).toEqual({
+      id: 'vehicle_1',
+      make: 'Dacia',
+      model: 'Logan',
+      dailyRate: 25000,
+      availability: false,
+      availabilityStatus: 'RESERVED',
+      nextAvailableAt,
+    })
+
+    expect(vehicle).toEqual({ id: 'vehicle_1', make: 'Dacia', model: 'Logan', dailyRate: 25000 })
+  })
+})
diff --git a/api/src/modules/marketplace/marketplace.presenter.ts b/api/src/modules/marketplace/marketplace.presenter.ts
new file mode 100644
index 0000000..b62d992
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.presenter.ts
@@ -0,0 +1,11 @@
+export function presentVehicleWithAvailability<T extends { id: string }>(
+  vehicle: T,
+  availability: { available: boolean; status: string; nextAvailableAt: Date | null },
+) {
+  return {
+    ...vehicle,
+    availability:       availability.available,
+    availabilityStatus: availability.status,
+    nextAvailableAt:    availability.nextAvailableAt,
+  }
+}
diff --git a/api/src/modules/marketplace/marketplace.repo.edge.test.ts b/api/src/modules/marketplace/marketplace.repo.edge.test.ts
new file mode 100644
index 0000000..0e2ed96
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.repo.edge.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const prismaMock = vi.hoisted(() => ({
+  offer: { findMany: vi.fn(), findFirst: vi.fn() },
+  company: { findMany: vi.fn(), findFirst: vi.fn(), findFirstOrThrow: vi.fn() },
+  vehicle: { findMany: vi.fn(), findFirst: vi.fn(), findFirstOrThrow: vi.fn() },
+  reservation: { create: vi.fn(), findUnique: vi.fn(), update: vi.fn() },
+  customer: { findUnique: vi.fn(), create: vi.fn(), update: vi.fn() },
+  review: { findMany: vi.fn(), create: vi.fn() },
+}))
+
+vi.mock('../../lib/prisma', () => ({ prisma: prismaMock }))
+
+import * as repo from './marketplace.repo'
+
+describe('marketplace.repo public query and write boundaries', () => {
+  it('finds public offers using active/public/current-window filters and featured ordering', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-09T10:00:00.000Z'))
+
+    await repo.findPublicOffers()
+
+    expect(prismaMock.offer.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where: {
+        isPublic: true,
+        isActive: true,
+        validFrom: { lte: new Date('2026-06-09T10:00:00.000Z') },
+        validUntil: { gte: new Date('2026-06-09T10:00:00.000Z') },
+      },
+      orderBy: [{ isFeatured: 'desc' }, { createdAt: 'desc' }],
+      take: 50,
+    }))
+    vi.useRealTimers()
+  })
+
+  it('lists marketplace cities only from active listed companies with a public city', async () => {
+    await repo.findCitiesFromCompanies()
+
+    expect(prismaMock.company.findMany).toHaveBeenCalledWith({
+      where: {
+        status: { in: ['ACTIVE', 'TRIALING'] },
+        brand: { isListedOnMarketplace: true, publicCity: { not: null } },
+      },
+      select: { brand: { select: { publicCity: true } } },
+    })
+  })
+
+  it('requires published vehicles and an active company when loading marketplace vehicle details', async () => {
+    await repo.findVehicleForMarketplace('vehicle_1', 'atlas')
+
+    expect(prismaMock.vehicle.findFirst).toHaveBeenCalledWith({
+      where: {
+        id: 'vehicle_1',
+        isPublished: true,
+        company: { slug: 'atlas', status: { in: ['ACTIVE', 'TRIALING'] } },
+      },
+      include: { company: { include: { brand: true } } },
+    })
+  })
+
+  it('patches marketplace customer address fields without deleting existing address metadata', async () => {
+    prismaMock.customer.findUnique.mockResolvedValueOnce({
+      id: 'customer_1',
+      address: { fullAddress: 'Old address', loyaltyNote: 'keep', internationalLicenseNumber: 'INT-1' },
+    })
+
+    await repo.upsertMarketplaceCustomer('company_1', {
+      email: 'renter@example.test',
+      firstName: 'Nora',
+      lastName: 'Renter',
+      identityDocumentNumber: 'ID-9',
+      internationalLicenseNumber: undefined,
+    })
+
+    expect(prismaMock.customer.update).toHaveBeenCalledWith({
+      where: { id: 'customer_1' },
+      data: expect.objectContaining({
+        firstName: 'Nora',
+        address: {
+          fullAddress: 'Old address',
+          loyaltyNote: 'keep',
+          internationalLicenseNumber: 'INT-1',
+          identityDocumentNumber: 'ID-9',
+        },
+      }),
+    })
+  })
+
+  it('creates marketplace reservations as draft marketplace-sourced records', async () => {
+    const startDate = new Date('2026-07-01T10:00:00.000Z')
+    const endDate = new Date('2026-07-05T10:00:00.000Z')
+
+    await repo.createMarketplaceReservation({
+      companyId: 'company_1',
+      vehicleId: 'vehicle_1',
+      customerId: 'customer_1',
+      startDate,
+      endDate,
+      dailyRate: 500,
+      totalDays: 4,
+      totalAmount: 2000,
+      pickupLocation: 'Airport',
+      returnLocation: null,
+    })
+
+    expect(prismaMock.reservation.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        companyId: 'company_1',
+        vehicleId: 'vehicle_1',
+        customerId: 'customer_1',
+        source: 'MARKETPLACE',
+        status: 'DRAFT',
+      }),
+    })
+  })
+
+  it('submits public reviews as published records and prevents null renter ids from becoming explicit nulls', async () => {
+    await repo.createReview({
+      reservationId: 'reservation_1',
+      companyId: 'company_1',
+      renterId: null,
+      overallRating: 5,
+      vehicleRating: 4,
+      serviceRating: 5,
+      comment: 'Clean car',
+    })
+
+    expect(prismaMock.review.create).toHaveBeenCalledWith({
+      data: {
+        reservationId: 'reservation_1',
+        companyId: 'company_1',
+        renterId: undefined,
+        overallRating: 5,
+        vehicleRating: 4,
+        serviceRating: 5,
+        comment: 'Clean car',
+        isPublished: true,
+      },
+    })
+  })
+})
diff --git a/api/src/modules/marketplace/marketplace.repo.ts b/api/src/modules/marketplace/marketplace.repo.ts
new file mode 100644
index 0000000..66fb7e0
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.repo.ts
@@ -0,0 +1,241 @@
+import { prisma } from '../../lib/prisma'
+
+export async function findPublicOffers() {
+  return prisma.offer.findMany({
+    where: { isPublic: true, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+    include: { company: { include: { brand: { select: { displayName: true, logoUrl: true, subdomain: true, primaryColor: true } } } } },
+    orderBy: [{ isFeatured: 'desc' }, { createdAt: 'desc' }],
+    take: 50,
+  })
+}
+
+export async function findCitiesFromCompanies() {
+  return prisma.company.findMany({
+    where: {
+      status: { in: ['ACTIVE', 'TRIALING'] },
+      brand: { isListedOnMarketplace: true, publicCity: { not: null } },
+    },
+    select: { brand: { select: { publicCity: true } } },
+  })
+}
+
+export async function findListedCompanies(where: any, skip: number, take: number) {
+  return prisma.company.findMany({
+    where,
+    include: {
+      brand: { select: { displayName: true, logoUrl: true, subdomain: true, publicCity: true, publicCountry: true, marketplaceRating: true, primaryColor: true } },
+      _count: { select: { vehicles: { where: { isPublished: true, status: 'AVAILABLE' } } } },
+    },
+    skip,
+    take,
+  })
+}
+
+export async function findPublishedVehicles(where: any) {
+  return prisma.vehicle.findMany({
+    where,
+    include: {
+      company: { include: { brand: { select: { displayName: true, logoUrl: true, subdomain: true, marketplaceRating: true, primaryColor: true } } } },
+    },
+    orderBy: { dailyRate: 'asc' },
+  })
+}
+
+export async function findVehicleForMarketplace(vehicleId: string, companySlug: string) {
+  return prisma.vehicle.findFirst({
+    where: { id: vehicleId, isPublished: true, company: { slug: companySlug, status: { in: ['ACTIVE', 'TRIALING'] } } },
+    include: { company: { include: { brand: true } } },
+  })
+}
+
+export async function findVehicleForMarketplaceById(vehicleId: string) {
+  return prisma.vehicle.findFirst({
+    where: {
+      id: vehicleId,
+      isPublished: true,
+      company: { status: { in: ['ACTIVE', 'TRIALING'] }, brand: { isListedOnMarketplace: true } },
+    },
+    include: { company: { include: { brand: true } } },
+  })
+}
+
+export async function upsertMarketplaceCustomer(companyId: string, data: {
+  email: string
+  firstName: string
+  lastName: string
+  phone?: string
+  dateOfBirth?: string
+  nationality?: string
+  identityDocumentNumber?: string
+  fullAddress?: string
+  driverLicense?: string
+  licenseExpiry?: string
+  licenseIssuedAt?: string
+  licenseCountry?: string
+  licenseCategory?: string
+  internationalLicenseNumber?: string
+}) {
+  const existing = await prisma.customer.findUnique({
+    where: { companyId_email: { companyId, email: data.email } },
+    select: { id: true, address: true },
+  })
+
+  // Only patch the address JSON with fields that were actually provided
+  const prevAddress = (existing?.address && typeof existing.address === 'object' && !Array.isArray(existing.address))
+    ? existing.address as Record<string, unknown>
+    : {}
+  const hasAddressPatch = data.fullAddress || data.identityDocumentNumber || data.internationalLicenseNumber !== undefined
+  const address = hasAddressPatch
+    ? {
+        ...prevAddress,
+        ...(data.fullAddress               ? { fullAddress: data.fullAddress }                                 : {}),
+        ...(data.identityDocumentNumber    ? { identityDocumentNumber: data.identityDocumentNumber }           : {}),
+        ...(data.internationalLicenseNumber !== undefined ? { internationalLicenseNumber: data.internationalLicenseNumber ?? null } : {}),
+      }
+    : undefined
+
+  const payload = {
+    firstName: data.firstName,
+    lastName:  data.lastName,
+    email:     data.email,
+    ...(data.phone            ? { phone: data.phone }                                          : {}),
+    ...(data.driverLicense    ? { driverLicense: data.driverLicense, licenseNumber: data.driverLicense } : {}),
+    ...(data.dateOfBirth      ? { dateOfBirth: new Date(data.dateOfBirth) }                    : {}),
+    ...(data.nationality      ? { nationality: data.nationality }                              : {}),
+    ...(address !== undefined ? { address }                                                    : {}),
+    ...(data.licenseExpiry    ? { licenseExpiry: new Date(data.licenseExpiry) }                : {}),
+    ...(data.licenseIssuedAt  ? { licenseIssuedAt: new Date(data.licenseIssuedAt) }            : {}),
+    ...(data.licenseCountry   ? { licenseCountry: data.licenseCountry }                        : {}),
+    ...(data.licenseCategory  ? { licenseCategory: data.licenseCategory }                      : {}),
+  }
+
+  if (!existing) {
+    return prisma.customer.create({ data: { companyId, ...payload } })
+  }
+  return prisma.customer.update({ where: { id: existing.id }, data: payload })
+}
+
+export async function createMarketplaceReservation(data: {
+  companyId: string; vehicleId: string; customerId: string
+  startDate: Date; endDate: Date; pickupLocation?: string | null; returnLocation?: string | null
+  dailyRate: number; totalDays: number; totalAmount: number; notes?: string; bookingReference?: string
+}) {
+  return prisma.reservation.create({
+    data: { ...data, source: 'MARKETPLACE', status: 'DRAFT' },
+  })
+}
+
+export async function createMarketplaceFunnelEvent(data: {
+  eventName: string
+  companySlug: string
+  vehicleId: string
+  renterId?: string | null
+  sessionId?: string
+  path?: string
+  metadata?: Record<string, string | number | boolean | null>
+}) {
+  const vehicle = await prisma.vehicle.findFirst({
+    where: {
+      id: data.vehicleId,
+      isPublished: true,
+      company: { slug: data.companySlug, status: { in: ['ACTIVE', 'TRIALING'] } },
+    },
+    select: { companyId: true },
+  })
+
+  return prisma.marketplaceFunnelEvent.create({
+    data: {
+      eventName: data.eventName,
+      companyId: vehicle?.companyId ?? null,
+      companySlug: data.companySlug,
+      vehicleId: data.vehicleId,
+      renterId: data.renterId ?? null,
+      sessionId: data.sessionId,
+      path: data.path,
+      metadata: (data.metadata ?? {}) as any,
+    },
+  })
+}
+
+export async function findCompanyPage(slug: string) {
+  return prisma.company.findFirst({
+    where: { slug, status: { in: ['ACTIVE', 'TRIALING'] } },
+    include: {
+      brand: true,
+      vehicles: { where: { isPublished: true, status: 'AVAILABLE' }, orderBy: { createdAt: 'desc' } },
+      offers:   { where: { isPublic: true, isActive: true, validUntil: { gte: new Date() } }, orderBy: { isFeatured: 'desc' } },
+    },
+  })
+}
+
+export async function findCompanyBySlug(slug: string) {
+  return prisma.company.findFirstOrThrow({ where: { slug, status: { in: ['ACTIVE', 'TRIALING'] } } })
+}
+
+export async function findCompanyReviews(companyId: string) {
+  return prisma.review.findMany({
+    where: { companyId, isPublished: true },
+    include: { renter: { select: { firstName: true, lastName: true } } },
+    orderBy: { createdAt: 'desc' },
+    take: 50,
+  })
+}
+
+export async function findCompanyVehicles(companyId: string) {
+  return prisma.vehicle.findMany({
+    where: { companyId, isPublished: true, status: 'AVAILABLE' },
+    orderBy: { createdAt: 'desc' },
+  })
+}
+
+export async function findVehicleById(slug: string, vehicleId: string) {
+  const company = await prisma.company.findFirstOrThrow({ where: { slug, status: { in: ['ACTIVE', 'TRIALING'] } } })
+  return prisma.vehicle.findFirstOrThrow({
+    where: { id: vehicleId, companyId: company.id, isPublished: true, status: 'AVAILABLE' },
+    include: { company: { include: { brand: true } } },
+  })
+}
+
+export async function findCompanyOffers(companyId: string) {
+  return prisma.offer.findMany({
+    where: { companyId, isPublic: true, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+    orderBy: [{ isFeatured: 'desc' }, { createdAt: 'desc' }],
+  })
+}
+
+export async function findReservationByReviewToken(token: string) {
+  return prisma.reservation.findUnique({
+    where: { reviewToken: token },
+    include: {
+      vehicle: { select: { make: true, model: true, year: true, photos: true } },
+      company: { include: { brand: { select: { displayName: true, logoUrl: true } } } },
+      review:  { select: { id: true } },
+    },
+  })
+}
+
+export async function findReservationForReviewSubmit(token: string) {
+  return prisma.reservation.findUnique({
+    where: { reviewToken: token },
+    include: { review: { select: { id: true } } },
+  })
+}
+
+export async function createReview(data: {
+  reservationId: string; companyId: string; renterId?: string | null
+  overallRating: number; vehicleRating?: number; serviceRating?: number; comment?: string
+}) {
+  return prisma.review.create({
+    data: { ...data, renterId: data.renterId ?? undefined, isPublished: true },
+  })
+}
+
+export async function invalidateReviewToken(reservationId: string) {
+  return prisma.reservation.update({ where: { id: reservationId }, data: { reviewToken: null } })
+}
+
+export async function findOfferByCode(code: string) {
+  return prisma.offer.findFirst({
+    where: { promoCode: code, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+  })
+}
diff --git a/api/src/modules/marketplace/marketplace.routes.ts b/api/src/modules/marketplace/marketplace.routes.ts
new file mode 100644
index 0000000..9c55cb2
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.routes.ts
@@ -0,0 +1,176 @@
+import { Router } from 'express'
+import { optionalRenterAuth } from '../../middleware/requireRenterAuth'
+import { parseBody, parseParams, parseQuery } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { isDatabaseUnavailableError } from '../../lib/isDatabaseUnavailable'
+import * as service from './marketplace.service'
+import {
+  paginationSchema, searchSchema, companiesQuerySchema, marketplaceReservationSchema,
+  reviewBodySchema, slugParamSchema, vehicleParamSchema, reviewTokenSchema, offerCodeParamSchema,
+  vehicleAvailabilityQuerySchema, marketplaceFunnelEventSchema,
+} from './marketplace.schemas'
+
+const router = Router()
+router.use(optionalRenterAuth)
+
+router.get('/offers', async (_req, res, next) => {
+  try {
+    ok(res, await service.getPublicOffers())
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/cities', async (_req, res, next) => {
+  try {
+    ok(res, await service.getCities())
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/companies', async (req, res, next) => {
+  try {
+    const { city, hasOffer } = parseQuery(companiesQuerySchema, req)
+    const { page, pageSize } = parseQuery(paginationSchema, req)
+    ok(res, await service.getListedCompanies({ city, hasOffer, page, pageSize }))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/search', async (req, res, next) => {
+  try {
+    const filters    = parseQuery(searchSchema, req)
+    const pagination = parseQuery(paginationSchema, req)
+    ok(res, await service.searchVehicles({ ...filters, ...pagination }))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.post('/reservations', async (req, res, next) => {
+  try {
+    const body   = parseBody(marketplaceReservationSchema, req)
+    const result = await service.createMarketplaceReservation(body)
+    created(res, result)
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Service temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.post('/events', async (req, res, next) => {
+  try {
+    const body = parseBody(marketplaceFunnelEventSchema, req)
+    ok(res, await service.trackMarketplaceFunnelEvent(body, req.renterId))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Analytics events are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/review/:token', async (req, res, next) => {
+  try {
+    const { token } = parseParams(reviewTokenSchema, req)
+    ok(res, await service.getReviewContext(token))
+  } catch (err) { next(err) }
+})
+
+router.post('/review/:token', async (req, res, next) => {
+  try {
+    const { token } = parseParams(reviewTokenSchema, req)
+    const body      = parseBody(reviewBodySchema, req)
+    const result    = await service.submitReview(token, body)
+    created(res, result)
+  } catch (err) { next(err) }
+})
+
+router.post('/offers/:code/validate', async (req, res, next) => {
+  try {
+    const { code } = parseParams(offerCodeParamSchema, req)
+    ok(res, await service.validateOfferCode(code))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Offer validation is temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getCompanyPage(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Marketplace data is temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/reviews', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getCompanyReviews(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/:slug/vehicles', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getCompanyVehicles(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/:slug/vehicles/:id', async (req, res, next) => {
+  try {
+    const { slug, id } = parseParams(vehicleParamSchema, req)
+    ok(res, await service.getVehicleDetail(slug, id))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Vehicle details are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/vehicles/:id/availability', async (req, res, next) => {
+  try {
+    const { slug, id } = parseParams(vehicleParamSchema, req)
+    const { startDate, endDate } = parseQuery(vehicleAvailabilityQuerySchema, req)
+    ok(res, await service.getMarketplaceVehicleAvailability(slug, id, { startDate, endDate }))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Availability checks are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/offers', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getCompanyOffers(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+export default router
diff --git a/api/src/modules/marketplace/marketplace.schemas.test.ts b/api/src/modules/marketplace/marketplace.schemas.test.ts
new file mode 100644
index 0000000..878be22
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.schemas.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { marketplaceReservationSchema, paginationSchema, reviewBodySchema, searchSchema } from './marketplace.schemas'
+
+describe('marketplace.schemas', () => {
+  it('coerces pagination and caps untrusted public page sizes', () => {
+    expect(paginationSchema.parse({ page: '2', pageSize: '40' })).toEqual({ page: 2, pageSize: 40 })
+    expect(paginationSchema.parse({})).toEqual({ page: 1, pageSize: 20 })
+    expect(() => paginationSchema.parse({ pageSize: '500' })).toThrow()
+  })
+
+  it('trims search filters and coerces maxPrice', () => {
+    expect(searchSchema.parse({ city: ' Rabat ', maxPrice: '500', dropoffMode: 'different' })).toEqual({
+      city: 'Rabat',
+      maxPrice: 500,
+      dropoffMode: 'different',
+    })
+    expect(() => searchSchema.parse({ dropoffMode: 'teleport' })).toThrow()
+    expect(() => searchSchema.parse({ maxPrice: '-1' })).toThrow()
+  })
+
+  it('defaults marketplace reservation language while keeping date and email validation strict', () => {
+    const parsed = marketplaceReservationSchema.parse({
+      vehicleId: 'ckvvehicle000000000000001',
+      companySlug: 'atlas-cars',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    })
+
+    expect(parsed.language).toBe('fr')
+    expect(() => marketplaceReservationSchema.parse({ ...parsed, email: 'bad-email' })).toThrow()
+    expect(() => marketplaceReservationSchema.parse({ ...parsed, startDate: '2026-07-01' })).toThrow()
+  })
+
+  it('validates review ratings as bounded integers', () => {
+    expect(reviewBodySchema.parse({ overallRating: 5, comment: 'Clean car' })).toEqual({ overallRating: 5, comment: 'Clean car' })
+    expect(() => reviewBodySchema.parse({ overallRating: 6 })).toThrow()
+    expect(() => reviewBodySchema.parse({ overallRating: 4.5 })).toThrow()
+  })
+})
diff --git a/api/src/modules/marketplace/marketplace.schemas.ts b/api/src/modules/marketplace/marketplace.schemas.ts
new file mode 100644
index 0000000..be2b7fa
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.schemas.ts
@@ -0,0 +1,86 @@
+import { z } from 'zod'
+
+export const paginationSchema = z.object({
+  page:     z.coerce.number().int().min(1).max(10000).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const searchSchema = z.object({
+  city:         z.string().trim().max(100).optional(),
+  pickupLocation: z.string().trim().max(100).optional(),
+  dropoffLocation: z.string().trim().max(100).optional(),
+  dropoffMode: z.enum(['same', 'different']).optional(),
+  startDate:    z.string().datetime().optional(),
+  endDate:      z.string().datetime().optional(),
+  category:     z.string().trim().max(50).optional(),
+  maxPrice:     z.coerce.number().int().min(0).max(1_000_000).optional(),
+  transmission: z.string().trim().max(20).optional(),
+  make:         z.string().trim().max(60).optional(),
+  model:        z.string().trim().max(60).optional(),
+})
+
+export const companiesQuerySchema = z.object({
+  city:     z.string().trim().max(100).optional(),
+  hasOffer: z.string().optional(),
+})
+
+export const vehicleAvailabilityQuerySchema = z.object({
+  startDate: z.string().datetime(),
+  endDate: z.string().datetime(),
+})
+
+export const marketplaceReservationSchema = z.object({
+  vehicleId:   z.string().cuid(),
+  companySlug: z.string().trim().max(100).optional(),
+  firstName:   z.string().min(1).max(100),
+  lastName:    z.string().min(1).max(100),
+  email:       z.string().email(),
+  // Contact info — collected at reservation time
+  phone:       z.string().min(1).max(30).optional(),
+  // Identity & license — optional at reservation, collected at pickup
+  dateOfBirth: z.string().datetime().optional(),
+  nationality: z.string().min(1).max(100).optional(),
+  identityDocumentNumber: z.string().min(1).max(100).optional(),
+  fullAddress: z.string().min(1).max(500).optional(),
+  driverLicense: z.string().min(1).max(50).optional(),
+  licenseExpiry: z.string().datetime().optional(),
+  licenseIssuedAt: z.string().datetime().optional(),
+  licenseCountry: z.string().min(1).max(100).optional(),
+  licenseCategory: z.string().min(1).max(20).optional(),
+  internationalLicenseNumber: z.string().trim().max(100).optional(),
+  startDate:   z.string().datetime(),
+  endDate:     z.string().datetime(),
+  pickupLocation: z.string().trim().max(100).optional(),
+  returnLocation: z.string().trim().max(100).optional(),
+  notes:       z.string().max(500).optional(),
+  language:    z.enum(['en', 'fr', 'ar']).default('fr'),
+})
+
+export const marketplaceFunnelEventSchema = z.object({
+  eventName: z.enum([
+    'booking_form_viewed',
+    'trip_dates_selected',
+    'contact_details_started',
+    'driver_details_expanded',
+    'booking_request_submitted',
+    'booking_request_failed',
+    'booking_request_success',
+  ]),
+  companySlug: z.string().trim().max(100),
+  vehicleId: z.string().cuid(),
+  sessionId: z.string().trim().max(100).optional(),
+  path: z.string().trim().max(500).optional(),
+  metadata: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), z.null()])).optional(),
+})
+
+export const reviewBodySchema = z.object({
+  overallRating: z.number().int().min(1).max(5),
+  vehicleRating: z.number().int().min(1).max(5).optional(),
+  serviceRating: z.number().int().min(1).max(5).optional(),
+  comment:       z.string().max(2000).optional(),
+})
+
+export const slugParamSchema      = z.object({ slug: z.string() })
+export const vehicleParamSchema   = z.object({ slug: z.string(), id: z.string() })
+export const reviewTokenSchema    = z.object({ token: z.string() })
+export const offerCodeParamSchema = z.object({ code: z.string() })
diff --git a/api/src/modules/marketplace/marketplace.service.edge.test.ts b/api/src/modules/marketplace/marketplace.service.edge.test.ts
new file mode 100644
index 0000000..ef8a769
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.service.edge.test.ts
@@ -0,0 +1,83 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./marketplace.repo', () => ({
+  findCompanyPage: vi.fn(),
+  findCompanyBySlug: vi.fn(),
+  findCompanyReviews: vi.fn(),
+  findCompanyVehicles: vi.fn(),
+  findVehicleById: vi.fn(),
+  findCompanyOffers: vi.fn(),
+  findOfferByCode: vi.fn(),
+}))
+vi.mock('../../services/vehicleAvailabilityService', () => ({ getVehicleAvailabilitySummary: vi.fn() }))
+vi.mock('../../services/notificationService', () => ({ sendNotification: vi.fn(), sendTransactionalEmail: vi.fn() }))
+vi.mock('../../lib/emailTranslations', () => ({
+  marketplaceReservationEmail: { subject: vi.fn(), html: vi.fn(), text: vi.fn() },
+}))
+
+import * as repo from './marketplace.repo'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import { getCompanyOffers, getCompanyPage, getCompanyReviews, getCompanyVehicles, getVehicleDetail, validateOfferCode } from './marketplace.service'
+
+beforeEach(() => vi.clearAllMocks())
+
+describe('marketplace.service public page edges', () => {
+  it('enriches company page vehicles with availability without changing company metadata', async () => {
+    const nextAvailableAt = new Date('2026-07-14T09:00:00.000Z')
+    vi.mocked(repo.findCompanyPage).mockResolvedValue({
+      id: 'company_1',
+      name: 'Atlas Cars',
+      vehicles: [{ id: 'vehicle_1', make: 'Dacia' }, { id: 'vehicle_2', make: 'Renault' }],
+    } as any)
+    vi.mocked(getVehicleAvailabilitySummary)
+      .mockResolvedValueOnce({ available: false, status: 'RESERVED', nextAvailableAt, blockingReason: 'RESERVATION' })
+      .mockResolvedValueOnce({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+
+    const result = await getCompanyPage('atlas-cars')
+
+    expect(result).toMatchObject({ id: 'company_1', name: 'Atlas Cars' })
+    expect(result.vehicles).toEqual([
+      expect.objectContaining({ id: 'vehicle_1', availability: false, availabilityStatus: 'RESERVED', nextAvailableAt }),
+      expect.objectContaining({ id: 'vehicle_2', availability: true, availabilityStatus: 'AVAILABLE', nextAvailableAt: null }),
+    ])
+  })
+
+  it('throws when a public company page cannot be found', async () => {
+    vi.mocked(repo.findCompanyPage).mockResolvedValue(null)
+    await expect(getCompanyPage('missing-company')).rejects.toThrow('Company not found')
+  })
+
+  it('resolves public company child resources through the company id, not the slug directly', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue({ id: 'company_1' } as any)
+    vi.mocked(repo.findCompanyReviews).mockResolvedValue([{ id: 'review_1' }] as any)
+    vi.mocked(repo.findCompanyVehicles).mockResolvedValue([{ id: 'vehicle_1' }] as any)
+    vi.mocked(repo.findCompanyOffers).mockResolvedValue([{ id: 'offer_1' }] as any)
+
+    await expect(getCompanyReviews('atlas-cars')).resolves.toEqual([{ id: 'review_1' }])
+    await expect(getCompanyVehicles('atlas-cars')).resolves.toEqual([{ id: 'vehicle_1' }])
+    await expect(getCompanyOffers('atlas-cars')).resolves.toEqual([{ id: 'offer_1' }])
+
+    expect(repo.findCompanyReviews).toHaveBeenCalledWith('company_1')
+    expect(repo.findCompanyVehicles).toHaveBeenCalledWith('company_1')
+    expect(repo.findCompanyOffers).toHaveBeenCalledWith('company_1')
+  })
+
+  it('adds availability to vehicle detail responses', async () => {
+    const nextAvailableAt = new Date('2026-12-01T00:00:00.000Z')
+    vi.mocked(repo.findVehicleById).mockResolvedValue({ id: 'vehicle_1', make: 'Hyundai' } as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: false, status: 'MAINTENANCE', nextAvailableAt, blockingReason: 'BLOCK' })
+
+    await expect(getVehicleDetail('atlas-cars', 'vehicle_1')).resolves.toEqual(expect.objectContaining({
+      id: 'vehicle_1',
+      availability: false,
+      availabilityStatus: 'MAINTENANCE',
+      nextAvailableAt,
+    }))
+  })
+
+  it('rejects exhausted offer codes before returning them as valid', async () => {
+    vi.mocked(repo.findOfferByCode).mockResolvedValue({ code: 'SUMMER', maxRedemptions: 10, redemptionCount: 10 } as any)
+
+    await expect(validateOfferCode('SUMMER')).rejects.toThrow('maximum redemptions')
+  })
+})
diff --git a/api/src/modules/marketplace/marketplace.service.ts b/api/src/modules/marketplace/marketplace.service.ts
new file mode 100644
index 0000000..f5e4a0a
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.service.ts
@@ -0,0 +1,361 @@
+import { AppError, NotFoundError, ConflictError } from '../../http/errors'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import { sendNotification, sendTransactionalEmail } from '../../services/notificationService'
+import { marketplaceReservationEmail, type Lang } from '../../lib/emailTranslations'
+import * as repo from './marketplace.repo'
+
+function normalizeLocation(value?: string | null) {
+  const normalized = value?.trim()
+  return normalized ? normalized : null
+}
+
+function normalizeLocationList(values?: string[] | null) {
+  if (!Array.isArray(values)) return []
+  return values
+    .map((value) => normalizeLocation(value))
+    .filter((value): value is string => Boolean(value))
+}
+
+function includesLocation(values: string[], target: string) {
+  const key = target.toLocaleLowerCase()
+  return values.some((value) => value.toLocaleLowerCase() === key)
+}
+
+function matchesVehicleLocationRules(
+  vehicle: { pickupLocations?: string[]; dropoffLocations?: string[]; allowDifferentDropoff?: boolean },
+  params: { pickupLocation?: string; dropoffLocation?: string; dropoffMode?: 'same' | 'different' },
+) {
+  const pickupLocation = normalizeLocation(params.pickupLocation)
+  const dropoffLocation = normalizeLocation(params.dropoffLocation)
+  const pickupLocations = normalizeLocationList(vehicle.pickupLocations)
+  const dropoffLocations = normalizeLocationList(vehicle.dropoffLocations)
+
+  if (pickupLocation && pickupLocations.length > 0 && !includesLocation(pickupLocations, pickupLocation)) {
+    return false
+  }
+
+  if (params.dropoffMode === 'different') {
+    if (!vehicle.allowDifferentDropoff) return false
+    if (dropoffLocation && dropoffLocations.length > 0 && !includesLocation(dropoffLocations, dropoffLocation)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export async function getPublicOffers() {
+  return repo.findPublicOffers()
+}
+
+export async function getCities() {
+  const rows = await repo.findCitiesFromCompanies()
+  const map = new Map<string, string>()
+  for (const row of rows) {
+    const city = row.brand?.publicCity?.trim()
+    if (!city) continue
+    const key = city.toLocaleLowerCase()
+    if (!map.has(key)) map.set(key, city)
+  }
+  return Array.from(map.values()).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+}
+
+export async function getListedCompanies(params: {
+  city?: string; hasOffer?: string; page?: number; pageSize?: number
+}) {
+  const page     = params.page     ?? 1
+  const pageSize = params.pageSize ?? 20
+  const where: any = { status: { in: ['ACTIVE', 'TRIALING'] }, brand: { isListedOnMarketplace: true } }
+  if (params.city) where.brand = { ...where.brand, publicCity: { contains: params.city, mode: 'insensitive' } }
+  if (params.hasOffer === 'true') {
+    where.offers = { some: { isPublic: true, isActive: true, validUntil: { gte: new Date() } } }
+  }
+  return repo.findListedCompanies(where, (page - 1) * pageSize, pageSize)
+}
+
+export async function searchVehicles(params: {
+  city?: string; pickupLocation?: string; dropoffLocation?: string; dropoffMode?: 'same' | 'different'
+  startDate?: string; endDate?: string; category?: string
+  maxPrice?: number; transmission?: string; make?: string; model?: string
+  page?: number; pageSize?: number
+}) {
+  const page     = params.page     ?? 1
+  const pageSize = params.pageSize ?? 20
+  const where: any = {
+    isPublished: true,
+    status: 'AVAILABLE',
+    company: { status: { in: ['ACTIVE', 'TRIALING'] }, brand: { isListedOnMarketplace: true } },
+  }
+  if (params.category)     where.category     = params.category
+  if (params.maxPrice !== undefined) where.dailyRate = { lte: params.maxPrice }
+  if (params.transmission) where.transmission = params.transmission
+  if (params.make)         where.make         = { contains: params.make,  mode: 'insensitive' }
+  if (params.model)        where.model        = { contains: params.model, mode: 'insensitive' }
+  if (params.city) {
+    where.company = { ...where.company, brand: { isListedOnMarketplace: true, publicCity: { contains: params.city, mode: 'insensitive' } } }
+  }
+
+  const vehicles = await repo.findPublishedVehicles(where) as any[]
+  const locationFiltered = vehicles.filter((vehicle: any) => matchesVehicleLocationRules(vehicle, params))
+  const pagedVehicles = locationFiltered.slice((page - 1) * pageSize, page * pageSize)
+
+  const availability = await Promise.all(
+    pagedVehicles.map(async (v: any) => {
+      const a = await getVehicleAvailabilitySummary(v.id, {
+        companyId: v.companyId,
+        range: params.startDate && params.endDate
+          ? { startDate: new Date(params.startDate), endDate: new Date(params.endDate) }
+          : undefined,
+      })
+      return [v.id, a] as const
+    }),
+  )
+  const availMap = new Map<string, any>(availability)
+
+  return pagedVehicles.map((v: any) => ({
+    ...v,
+    availability:       availMap.get(v.id)?.available          ?? null,
+    availabilityStatus: availMap.get(v.id)?.status             ?? 'AVAILABLE',
+    nextAvailableAt:    availMap.get(v.id)?.nextAvailableAt    ?? null,
+  }))
+}
+
+export async function getMarketplaceVehicleAvailability(
+  slug: string,
+  vehicleId: string,
+  params: { startDate: string; endDate: string },
+) {
+  const vehicle = await repo.findVehicleForMarketplace(vehicleId, slug)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+
+  const startDate = new Date(params.startDate)
+  const endDate = new Date(params.endDate)
+
+  if (endDate <= startDate) {
+    throw new AppError('End date must be after start date', 400, 'invalid_dates')
+  }
+
+  const availability = await getVehicleAvailabilitySummary(vehicle.id, {
+    companyId: vehicle.companyId,
+    range: { startDate, endDate },
+  })
+
+  return {
+    available: availability.available,
+    availabilityStatus: availability.status,
+    nextAvailableAt: availability.nextAvailableAt?.toISOString() ?? null,
+    blockingReason: availability.blockingReason,
+  }
+}
+
+function generateBookingReference() {
+  const year = new Date().getUTCFullYear()
+  const random = Math.random().toString(36).slice(2, 8).toUpperCase()
+  return `BK-${year}-${random}`
+}
+
+export async function createMarketplaceReservation(body: {
+  vehicleId: string; companySlug?: string; firstName: string; lastName: string
+  email: string; phone?: string; dateOfBirth?: string; nationality?: string
+  identityDocumentNumber?: string; fullAddress?: string
+  driverLicense?: string; licenseExpiry?: string; licenseIssuedAt?: string
+  licenseCountry?: string; licenseCategory?: string; internationalLicenseNumber?: string
+  startDate: string; endDate: string
+  pickupLocation?: string; returnLocation?: string; notes?: string; language?: string
+}) {
+  const startDate = new Date(body.startDate)
+  const endDate   = new Date(body.endDate)
+
+  if (endDate <= startDate) {
+    throw new AppError('End date must be after start date', 400, 'invalid_dates')
+  }
+
+  const vehicle = await repo.findVehicleForMarketplaceById(body.vehicleId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+
+  const pickupLocation = normalizeLocation(body.pickupLocation)
+  const returnLocation = normalizeLocation(body.returnLocation) ?? pickupLocation
+  const pickupLocations = normalizeLocationList(vehicle.pickupLocations)
+  const dropoffLocations = normalizeLocationList(vehicle.dropoffLocations)
+
+  if (pickupLocation && pickupLocations.length > 0 && !includesLocation(pickupLocations, pickupLocation)) {
+    throw new AppError('Selected pickup location is not available for this vehicle', 400, 'invalid_pickup_location')
+  }
+
+  if (pickupLocation && returnLocation && pickupLocation.toLocaleLowerCase() !== returnLocation.toLocaleLowerCase()) {
+    if (!vehicle.allowDifferentDropoff) {
+      throw new AppError('This vehicle must be returned to the same pickup location', 400, 'same_dropoff_required')
+    }
+    if (dropoffLocations.length > 0 && !includesLocation(dropoffLocations, returnLocation)) {
+      throw new AppError('Selected return location is not available for this vehicle', 400, 'invalid_return_location')
+    }
+  }
+
+  const availability = await getVehicleAvailabilitySummary(vehicle.id, { companyId: vehicle.companyId, range: { startDate, endDate } })
+  if (!availability.available) {
+    throw new AppError('Vehicle is not available for the selected dates', 409, 'unavailable', {
+      nextAvailableAt: availability.nextAvailableAt?.toISOString() ?? null,
+    })
+  }
+
+  const customer = await repo.upsertMarketplaceCustomer(vehicle.companyId, {
+    email: body.email,
+    firstName: body.firstName,
+    lastName: body.lastName,
+    phone: body.phone,
+    dateOfBirth: body.dateOfBirth,
+    nationality: body.nationality,
+    identityDocumentNumber: body.identityDocumentNumber,
+    fullAddress: body.fullAddress,
+    driverLicense: body.driverLicense,
+    licenseExpiry: body.licenseExpiry,
+    licenseIssuedAt: body.licenseIssuedAt,
+    licenseCountry: body.licenseCountry,
+    licenseCategory: body.licenseCategory,
+    internationalLicenseNumber: body.internationalLicenseNumber,
+  })
+
+  const totalDays   = Math.max(1, Math.ceil((endDate.getTime() - startDate.getTime()) / 86_400_000))
+  const totalAmount = vehicle.dailyRate * totalDays
+
+  const reservation = await repo.createMarketplaceReservation({
+    companyId: vehicle.companyId,
+    vehicleId: body.vehicleId,
+    customerId: customer.id,
+    startDate,
+    endDate,
+    pickupLocation,
+    returnLocation,
+    dailyRate: vehicle.dailyRate,
+    totalDays,
+    totalAmount,
+    notes: body.notes,
+    bookingReference: generateBookingReference(),
+  })
+
+  const lang        = (body.language ?? 'fr') as Lang
+  const companyName = vehicle.company.brand?.displayName ?? (vehicle.company as any).name
+  const emailOpts   = {
+    firstName: body.firstName, vehicleYear: vehicle.year, vehicleMake: vehicle.make, vehicleModel: vehicle.model,
+    companyName, startDate, endDate, totalDays,
+    rateDisplay: (vehicle.dailyRate / 100).toFixed(2),
+    totalDisplay: (totalAmount / 100).toFixed(2),
+    email: body.email, phone: body.phone,
+  }
+
+  sendTransactionalEmail({
+    to: body.email,
+    subject: marketplaceReservationEmail.subject(`${vehicle.make} ${vehicle.model}`, lang),
+    html: marketplaceReservationEmail.html(emailOpts, lang),
+    text: marketplaceReservationEmail.text(emailOpts, lang),
+  }).catch(() => null)
+
+  sendNotification({
+    type: 'NEW_BOOKING',
+    title: 'New Marketplace Reservation Request',
+    body: `${body.firstName} ${body.lastName} requested ${vehicle.make} ${vehicle.model} from ${startDate.toISOString().slice(0, 10)} to ${endDate.toISOString().slice(0, 10)}.`,
+    companyId: vehicle.companyId,
+    channels: ['IN_APP'],
+  }).catch(() => null)
+
+  return {
+    reservationId: reservation.id,
+    bookingReference: (reservation as any).bookingReference ?? null,
+    companyName,
+    vehicleName: `${vehicle.year} ${vehicle.make} ${vehicle.model}`,
+    startDate: startDate.toISOString(),
+    endDate: endDate.toISOString(),
+    status: 'PENDING',
+    message: 'The company will review your request.',
+  }
+}
+
+export async function trackMarketplaceFunnelEvent(body: {
+  eventName: string
+  companySlug: string
+  vehicleId: string
+  sessionId?: string
+  path?: string
+  metadata?: Record<string, string | number | boolean | null>
+}, renterId?: string) {
+  await repo.createMarketplaceFunnelEvent({
+    ...body,
+    renterId: renterId ?? null,
+  })
+
+  return { success: true }
+}
+
+export async function getCompanyPage(slug: string) {
+  const company = await repo.findCompanyPage(slug)
+  if (!company) throw new NotFoundError('Company not found')
+
+  const vehicles = await Promise.all(
+    (company.vehicles as any[]).map(async (v: any) => {
+      const a = await getVehicleAvailabilitySummary(v.id, { companyId: v.companyId })
+      return { ...v, availability: a.available, availabilityStatus: a.status, nextAvailableAt: a.nextAvailableAt }
+    }),
+  )
+  return { ...company, vehicles }
+}
+
+export async function getCompanyReviews(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  return repo.findCompanyReviews(company.id)
+}
+
+export async function getCompanyVehicles(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  return repo.findCompanyVehicles(company.id)
+}
+
+export async function getVehicleDetail(slug: string, vehicleId: string) {
+  const vehicle    = await repo.findVehicleById(slug, vehicleId)
+  const availability = await getVehicleAvailabilitySummary(vehicle.id, { companyId: vehicle.companyId })
+  return { ...vehicle, availability: availability.available, availabilityStatus: availability.status, nextAvailableAt: availability.nextAvailableAt }
+}
+
+export async function getCompanyOffers(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  return repo.findCompanyOffers(company.id)
+}
+
+export async function getReviewContext(token: string) {
+  const reservation = await repo.findReservationByReviewToken(token)
+  if (!reservation) throw new NotFoundError('Review link is invalid or has expired')
+  if (reservation.review) throw new ConflictError('A review has already been submitted for this reservation')
+
+  return {
+    reservationId:  reservation.id,
+    companyName:    reservation.company.brand?.displayName ?? (reservation.company as any).name,
+    companyLogoUrl: reservation.company.brand?.logoUrl ?? null,
+    vehicle:        `${reservation.vehicle.year} ${reservation.vehicle.make} ${reservation.vehicle.model}`,
+    vehiclePhoto:   reservation.vehicle.photos[0] ?? null,
+  }
+}
+
+export async function submitReview(token: string, body: {
+  overallRating: number; vehicleRating?: number; serviceRating?: number; comment?: string
+}) {
+  const reservation = await repo.findReservationForReviewSubmit(token)
+  if (!reservation) throw new NotFoundError('Review link is invalid or has expired')
+  if (reservation.review) throw new ConflictError('A review has already been submitted for this reservation')
+
+  const review = await repo.createReview({
+    reservationId: reservation.id,
+    companyId:     reservation.companyId,
+    renterId:      reservation.renterId,
+    ...body,
+  })
+  await repo.invalidateReviewToken(reservation.id)
+  return { reviewId: review.id }
+}
+
+export async function validateOfferCode(code: string) {
+  const offer = await repo.findOfferByCode(code)
+  if (!offer) throw new NotFoundError('Promo code not found or expired')
+  if (offer.maxRedemptions && offer.redemptionCount >= offer.maxRedemptions) {
+    throw new ConflictError('Promo code has reached its maximum redemptions')
+  }
+  return offer
+}
diff --git a/api/src/modules/marketplace/marketplace.test.ts b/api/src/modules/marketplace/marketplace.test.ts
new file mode 100644
index 0000000..8cac703
--- /dev/null
+++ b/api/src/modules/marketplace/marketplace.test.ts
@@ -0,0 +1,251 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { NotFoundError, ConflictError, AppError } from '../../http/errors'
+
+vi.mock('./marketplace.repo', () => ({
+  findPublicOffers:              vi.fn(),
+  findCitiesFromCompanies:       vi.fn(),
+  findListedCompanies:           vi.fn(),
+  findPublishedVehicles:         vi.fn(),
+  findVehicleForMarketplace:     vi.fn(),
+  findVehicleForMarketplaceById: vi.fn(),
+  upsertMarketplaceCustomer:     vi.fn(),
+  createMarketplaceReservation:  vi.fn(),
+  findCompanyPage:               vi.fn(),
+  findCompanyBySlug:             vi.fn(),
+  findCompanyReviews:            vi.fn(),
+  findCompanyVehicles:           vi.fn(),
+  findVehicleById:               vi.fn(),
+  findCompanyOffers:             vi.fn(),
+  findReservationByReviewToken:  vi.fn(),
+  findReservationForReviewSubmit: vi.fn(),
+  createReview:                  vi.fn(),
+  invalidateReviewToken:         vi.fn(),
+  findOfferByCode:               vi.fn(),
+}))
+
+vi.mock('../../services/vehicleAvailabilityService', () => ({
+  getVehicleAvailabilitySummary: vi.fn(),
+}))
+
+vi.mock('../../services/notificationService', () => ({
+  sendNotification:      vi.fn().mockResolvedValue(undefined),
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('../../lib/emailTranslations', () => ({
+  marketplaceReservationEmail: {
+    subject: vi.fn(() => 'Subject'),
+    html:    vi.fn(() => '<html>'),
+    text:    vi.fn(() => 'text'),
+  },
+}))
+
+import * as repo from './marketplace.repo'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import {
+  getCities, searchVehicles, createMarketplaceReservation,
+  getReviewContext, submitReview, validateOfferCode,
+} from './marketplace.service'
+
+const SLUG = 'test-company'
+
+function makeVehicle(overrides: object = {}) {
+  return {
+    id: 'v-1', dailyRate: 10000, year: 2022, make: 'Toyota', model: 'Camry',
+    isPublished: true, status: 'AVAILABLE', companyId: 'co-1',
+    pickupLocations: ['Casablanca'],
+    allowDifferentDropoff: false,
+    dropoffLocations: [],
+    company: { name: 'Test Co', brand: { displayName: 'Test Co' } },
+    ...overrides,
+  }
+}
+
+beforeEach(() => { vi.clearAllMocks() })
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('getCities', () => {
+  it('deduplicates and sorts cities case-insensitively', async () => {
+    vi.mocked(repo.findCitiesFromCompanies).mockResolvedValue([
+      { brand: { publicCity: 'Casablanca' } },
+      { brand: { publicCity: 'casablanca' } },
+      { brand: { publicCity: 'Rabat' } },
+      { brand: null },
+    ] as any)
+
+    const result = await getCities()
+    expect(result).toEqual(['Casablanca', 'Rabat'])
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('searchVehicles', () => {
+  it('returns vehicles enriched with availability data', async () => {
+    vi.mocked(repo.findPublishedVehicles).mockResolvedValue([makeVehicle()] as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+
+    const result = await searchVehicles({ city: 'Casablanca' })
+
+    expect(repo.findPublishedVehicles).toHaveBeenCalledOnce()
+    expect(result[0].availability).toBe(true)
+    expect(result[0].availabilityStatus).toBe('AVAILABLE')
+  })
+
+  it('passes date range to availability service when provided', async () => {
+    vi.mocked(repo.findPublishedVehicles).mockResolvedValue([makeVehicle()] as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: false, status: 'RESERVED', nextAvailableAt: new Date('2025-07-01'), blockingReason: 'RESERVATION' })
+
+    const result = await searchVehicles({ startDate: '2025-06-01T00:00:00.000Z', endDate: '2025-06-04T00:00:00.000Z' })
+
+    expect(getVehicleAvailabilitySummary).toHaveBeenCalledWith('v-1', {
+      companyId: 'co-1',
+      range: { startDate: new Date('2025-06-01T00:00:00.000Z'), endDate: new Date('2025-06-04T00:00:00.000Z') },
+    })
+    expect(result[0].availability).toBe(false)
+  })
+
+  it('filters out vehicles that do not support different drop-off when requested', async () => {
+    vi.mocked(repo.findPublishedVehicles).mockResolvedValue([
+      makeVehicle({ id: 'same-only' }),
+      makeVehicle({ id: 'one-way', allowDifferentDropoff: true, dropoffLocations: ['Rabat'] }),
+    ] as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+
+    const result = await searchVehicles({ pickupLocation: 'Casablanca', dropoffLocation: 'Rabat', dropoffMode: 'different' })
+
+    expect(result).toHaveLength(1)
+    expect(result[0].id).toBe('one-way')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('createMarketplaceReservation', () => {
+  const baseBody = {
+    vehicleId: 'v-1', companySlug: SLUG,
+    firstName: 'Ali', lastName: 'Ben', email: 'ali@test.com',
+    phone: '+212600000000',
+    dateOfBirth: '1990-01-01T00:00:00.000Z',
+    nationality: 'Moroccan',
+    identityDocumentNumber: 'CIN123456',
+    fullAddress: '123 Avenue Hassan II, Casablanca',
+    driverLicense: 'DL-123456',
+    licenseExpiry: '2030-01-01T00:00:00.000Z',
+    licenseIssuedAt: '2015-01-01T00:00:00.000Z',
+    licenseCountry: 'Morocco',
+    licenseCategory: 'B',
+    startDate: '2025-06-01T00:00:00.000Z', endDate: '2025-06-04T00:00:00.000Z',
+  }
+
+  it('creates reservation and returns reservationId', async () => {
+    vi.mocked(repo.findVehicleForMarketplaceById).mockResolvedValue(makeVehicle() as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+    vi.mocked(repo.upsertMarketplaceCustomer).mockResolvedValue({ id: 'c-1' } as any)
+    vi.mocked(repo.createMarketplaceReservation).mockResolvedValue({ id: 'r-1', bookingReference: 'BK-2026-ABC123' } as any)
+
+    const result = await createMarketplaceReservation({ ...baseBody, pickupLocation: 'Casablanca', returnLocation: 'Casablanca' })
+    expect(result.reservationId).toBe('r-1')
+    expect(result.bookingReference).toBe('BK-2026-ABC123')
+    expect(repo.upsertMarketplaceCustomer).toHaveBeenCalledWith('co-1', expect.objectContaining({
+      identityDocumentNumber: 'CIN123456',
+      fullAddress: '123 Avenue Hassan II, Casablanca',
+      driverLicense: 'DL-123456',
+    }))
+    expect(repo.createMarketplaceReservation).toHaveBeenCalledWith(expect.objectContaining({
+      pickupLocation: 'Casablanca',
+      returnLocation: 'Casablanca',
+    }))
+  })
+
+  it('throws NotFoundError when vehicle not found', async () => {
+    vi.mocked(repo.findVehicleForMarketplaceById).mockResolvedValue(null)
+
+    await expect(createMarketplaceReservation(baseBody)).rejects.toBeInstanceOf(NotFoundError)
+  })
+
+  it('throws AppError when vehicle is unavailable', async () => {
+    vi.mocked(repo.findVehicleForMarketplaceById).mockResolvedValue(makeVehicle() as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: false, status: 'RESERVED', nextAvailableAt: null, blockingReason: 'RESERVATION' })
+
+    await expect(createMarketplaceReservation(baseBody)).rejects.toMatchObject({ error: 'unavailable' })
+  })
+
+  it('rejects different return locations when the vehicle requires same drop-off', async () => {
+    vi.mocked(repo.findVehicleForMarketplaceById).mockResolvedValue(makeVehicle() as any)
+
+    await expect(
+      createMarketplaceReservation({ ...baseBody, pickupLocation: 'Casablanca', returnLocation: 'Rabat' }),
+    ).rejects.toMatchObject({ error: 'same_dropoff_required' })
+  })
+
+  it('throws AppError for invalid date range', async () => {
+    await expect(
+      createMarketplaceReservation({ ...baseBody, startDate: '2025-06-04T00:00:00.000Z', endDate: '2025-06-01T00:00:00.000Z' }),
+    ).rejects.toMatchObject({ error: 'invalid_dates' })
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('getReviewContext', () => {
+  it('returns review context for a valid unreviewd token', async () => {
+    vi.mocked(repo.findReservationByReviewToken).mockResolvedValue({
+      id: 'r-1', companyId: 'co-1', renterId: null, reviewToken: 'tok',
+      vehicle: { year: 2022, make: 'Toyota', model: 'Camry', photos: ['photo.jpg'] },
+      company: { name: 'Test Co', brand: { displayName: 'Test Co', logoUrl: 'logo.png' } },
+      review: null,
+    } as any)
+
+    const result = await getReviewContext('tok')
+    expect(result.reservationId).toBe('r-1')
+    expect(result.vehiclePhoto).toBe('photo.jpg')
+  })
+
+  it('throws NotFoundError for unknown token', async () => {
+    vi.mocked(repo.findReservationByReviewToken).mockResolvedValue(null)
+    await expect(getReviewContext('bad')).rejects.toBeInstanceOf(NotFoundError)
+  })
+
+  it('throws ConflictError when already reviewed', async () => {
+    vi.mocked(repo.findReservationByReviewToken).mockResolvedValue({
+      id: 'r-1', companyId: 'co-1', renterId: null,
+      vehicle: { year: 2022, make: 'Toyota', model: 'Camry', photos: [] },
+      company: { name: 'Test Co', brand: null },
+      review: { id: 'rev-1' },
+    } as any)
+
+    await expect(getReviewContext('tok')).rejects.toBeInstanceOf(ConflictError)
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('submitReview', () => {
+  it('creates review and invalidates token', async () => {
+    vi.mocked(repo.findReservationForReviewSubmit).mockResolvedValue({ id: 'r-1', companyId: 'co-1', renterId: null, review: null } as any)
+    vi.mocked(repo.createReview).mockResolvedValue({ id: 'rev-1' } as any)
+    vi.mocked(repo.invalidateReviewToken).mockResolvedValue(undefined as any)
+
+    const result = await submitReview('tok', { overallRating: 5 })
+
+    expect(repo.createReview).toHaveBeenCalledOnce()
+    expect(repo.invalidateReviewToken).toHaveBeenCalledWith('r-1')
+    expect(result.reviewId).toBe('rev-1')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('validateOfferCode', () => {
+  it('returns offer when code is valid and not exhausted', async () => {
+    vi.mocked(repo.findOfferByCode).mockResolvedValue({ id: 'o-1', maxRedemptions: null, redemptionCount: 0 } as any)
+    const result = await validateOfferCode('PROMO10')
+    expect((result as any).id).toBe('o-1')
+  })
+
+  it('throws NotFoundError for unknown code', async () => {
+    vi.mocked(repo.findOfferByCode).mockResolvedValue(null)
+    await expect(validateOfferCode('BAD')).rejects.toBeInstanceOf(NotFoundError)
+  })
+
+  it('throws ConflictError when max redemptions reached', async () => {
+    vi.mocked(repo.findOfferByCode).mockResolvedValue({ id: 'o-1', maxRedemptions: 10, redemptionCount: 10 } as any)
+    await expect(validateOfferCode('PROMO10')).rejects.toBeInstanceOf(ConflictError)
+  })
+})
diff --git a/api/src/modules/menu/menu.service.boundary.test.ts b/api/src/modules/menu/menu.service.boundary.test.ts
new file mode 100644
index 0000000..0dc4c1a
--- /dev/null
+++ b/api/src/modules/menu/menu.service.boundary.test.ts
@@ -0,0 +1,173 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    menuItem: {
+      findUnique: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+      findFirst: vi.fn(),
+      findMany: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      delete: vi.fn(),
+    },
+    menuItemRoleVisibility: { deleteMany: vi.fn(), createMany: vi.fn() },
+    subscriptionMenuItem: { deleteMany: vi.fn(), createMany: vi.fn() },
+    companyMenuItem: { deleteMany: vi.fn(), createMany: vi.fn() },
+    company: { findMany: vi.fn(), findUniqueOrThrow: vi.fn() },
+    employee: { findUniqueOrThrow: vi.fn() },
+    auditLog: { create: vi.fn(), findMany: vi.fn(), count: vi.fn() },
+    $transaction: vi.fn(),
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import {
+  assignMenuItemToCompanies,
+  assignMenuItemToPlans,
+  createMenuItem,
+  listMenuAuditLogs,
+  setMenuItemStatus,
+} from './menu.service'
+
+const admin = { id: 'admin_1', role: 'ADMIN' }
+
+describe('menu.service mutation boundaries', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(prisma.menuItem.findFirst).mockResolvedValue(null as never)
+    vi.mocked(prisma.menuItem.findUnique).mockResolvedValue(null as never)
+    vi.mocked(prisma.company.findMany).mockResolvedValue([] as never)
+    vi.mocked(prisma.$transaction).mockImplementation(async (callback: any) => callback(prisma))
+  })
+
+  it('rejects external links that are not HTTPS before any write', async () => {
+    await expect(createMenuItem({
+      label: 'Docs',
+      itemType: 'EXTERNAL_LINK',
+      routeOrUrl: 'http://docs.example.test',
+    }, admin)).rejects.toMatchObject({ statusCode: 400, error: 'validation_error' })
+
+    expect(prisma.menuItem.create).not.toHaveBeenCalled()
+    expect(prisma.auditLog.create).not.toHaveBeenCalled()
+  })
+
+  it('rejects duplicate routes under the same parent with a conflict error', async () => {
+    vi.mocked(prisma.menuItem.findUnique).mockResolvedValue({ id: 'parent_1', itemType: 'PARENT_MENU' } as never)
+    vi.mocked(prisma.menuItem.findFirst).mockResolvedValue({ id: 'item_existing' } as never)
+
+    await expect(createMenuItem({
+      label: 'Fleet',
+      itemType: 'INTERNAL_PAGE',
+      routeOrUrl: '/fleet',
+      parentId: 'parent_1',
+    }, admin)).rejects.toMatchObject({ statusCode: 409, error: 'duplicate_menu_route' })
+  })
+
+  it('normalizes create payloads and syncs role, plan and company assignments transactionally', async () => {
+    vi.mocked(prisma.company.findMany).mockResolvedValue([{ id: 'company_1' }] as never)
+    vi.mocked(prisma.menuItem.create).mockResolvedValue({ id: 'item_1' } as never)
+    vi.mocked(prisma.menuItem.findUniqueOrThrow).mockResolvedValue({ id: 'item_1', label: 'Fleet' } as never)
+
+    await createMenuItem({
+      systemKey: ' fleet ',
+      label: ' Fleet ',
+      itemType: 'INTERNAL_PAGE',
+      routeOrUrl: ' /fleet ',
+      icon: ' Car ',
+      displayOrder: 7,
+      roles: ['MANAGER', 'MANAGER', 'AGENT'],
+      subscriptionPlans: [{ plan: 'GROWTH' }, { plan: 'PRO', displayOrder: 3, isActive: false }],
+      companyAssignments: [{ companyId: 'company_1' }],
+    }, admin)
+
+    expect(prisma.menuItem.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        systemKey: 'fleet',
+        label: 'Fleet',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/fleet',
+        icon: 'Car',
+        displayOrder: 7,
+        openInNewTab: false,
+        isRequired: false,
+        isActive: true,
+        createdBy: 'admin_1',
+        updatedBy: 'admin_1',
+      }),
+    })
+    expect(prisma.menuItemRoleVisibility.createMany).toHaveBeenCalledWith({
+      data: [
+        { menuItemId: 'item_1', role: 'MANAGER' },
+        { menuItemId: 'item_1', role: 'AGENT' },
+      ],
+    })
+    expect(prisma.subscriptionMenuItem.createMany).toHaveBeenCalledWith({
+      data: [
+        { menuItemId: 'item_1', plan: 'GROWTH', displayOrder: 7, isActive: true },
+        { menuItemId: 'item_1', plan: 'PRO', displayOrder: 3, isActive: false },
+      ],
+    })
+    expect(prisma.companyMenuItem.createMany).toHaveBeenCalledWith({
+      data: [{ menuItemId: 'item_1', companyId: 'company_1', displayOrder: 7, isActive: true }],
+    })
+    expect(prisma.auditLog.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({ action: 'CREATE_MENU_ITEM', resource: 'MenuItem', resourceId: 'item_1' }),
+    })
+  })
+
+  it('protects required menu items from non-super-admin disable attempts', async () => {
+    vi.mocked(prisma.menuItem.findUniqueOrThrow).mockResolvedValue({ id: 'item_core', isRequired: true, isActive: true } as never)
+
+    await expect(setMenuItemStatus('item_core', false, admin)).rejects.toMatchObject({ statusCode: 403, error: 'forbidden' })
+
+    expect(prisma.menuItem.update).not.toHaveBeenCalled()
+  })
+
+  it('replaces only requested plan assignments and writes an audit entry', async () => {
+    vi.mocked(prisma.menuItem.findUniqueOrThrow).mockResolvedValue({ id: 'item_1' } as never)
+
+    await assignMenuItemToPlans('item_1', [{ plan: 'STARTER' }, { plan: 'PRO', displayOrder: 4, isActive: false }], admin)
+
+    expect(prisma.subscriptionMenuItem.deleteMany).toHaveBeenCalledWith({
+      where: { menuItemId: 'item_1', plan: { in: ['STARTER', 'PRO'] } },
+    })
+    expect(prisma.subscriptionMenuItem.createMany).toHaveBeenCalledWith({
+      data: [
+        { menuItemId: 'item_1', plan: 'STARTER', displayOrder: 0, isActive: true },
+        { menuItemId: 'item_1', plan: 'PRO', displayOrder: 4, isActive: false },
+      ],
+    })
+    expect(prisma.auditLog.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({ action: 'ASSIGN_MENU_ITEM_TO_SUBSCRIPTIONS', resource: 'MenuSubscriptionAssignment' }),
+    })
+  })
+
+  it('rejects company assignments when any company is cancelled or missing', async () => {
+    vi.mocked(prisma.menuItem.findUniqueOrThrow).mockResolvedValue({ id: 'item_1' } as never)
+    vi.mocked(prisma.company.findMany).mockResolvedValue([{ id: 'company_1' }] as never)
+
+    await expect(assignMenuItemToCompanies('item_1', [
+      { companyId: 'company_1' },
+      { companyId: 'company_cancelled' },
+    ], admin)).rejects.toMatchObject({ statusCode: 400, error: 'validation_error' })
+
+    expect(prisma.companyMenuItem.deleteMany).not.toHaveBeenCalled()
+  })
+
+  it('paginates menu audit logs across menu-related resources only', async () => {
+    vi.mocked(prisma.auditLog.findMany).mockResolvedValue([{ id: 'log_1' }] as never)
+    vi.mocked(prisma.auditLog.count).mockResolvedValue(41 as never)
+
+    const result = await listMenuAuditLogs({ page: 3, pageSize: 20 })
+
+    expect(prisma.auditLog.findMany).toHaveBeenCalledWith({
+      where: { resource: { in: ['MenuItem', 'MenuSubscriptionAssignment', 'MenuCompanyAssignment', 'MenuRoleVisibility'] } },
+      include: { adminUser: { select: { firstName: true, lastName: true, email: true } } },
+      skip: 40,
+      take: 20,
+      orderBy: { createdAt: 'desc' },
+    })
+    expect(result).toEqual({ data: [{ id: 'log_1' }], total: 41, page: 3, pageSize: 20, totalPages: 3 })
+  })
+})
diff --git a/api/src/modules/menu/menu.service.test.ts b/api/src/modules/menu/menu.service.test.ts
new file mode 100644
index 0000000..e81f918
--- /dev/null
+++ b/api/src/modules/menu/menu.service.test.ts
@@ -0,0 +1,201 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    menuItem: {
+      findMany: vi.fn(),
+    },
+    employee: {
+      findUniqueOrThrow: vi.fn(),
+    },
+    company: {
+      findUniqueOrThrow: vi.fn(),
+    },
+    auditLog: {
+      create: vi.fn(),
+    },
+    $transaction: vi.fn(),
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import { getEmployeeMenu, previewCompanyMenu } from './menu.service'
+
+describe('menu.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('builds the employee menu from subscription defaults and company overrides', async () => {
+    vi.mocked(prisma.employee.findUniqueOrThrow).mockResolvedValue({
+      id: 'employee_1',
+      role: 'MANAGER',
+      isActive: true,
+      companyId: 'company_1',
+    } as never)
+
+    vi.mocked(prisma.company.findUniqueOrThrow).mockResolvedValue({
+      id: 'company_1',
+      name: 'Atlas Cars',
+      status: 'ACTIVE',
+      subscription: { plan: 'GROWTH', status: 'ACTIVE' },
+    } as never)
+
+    vi.mocked(prisma.menuItem.findMany).mockResolvedValue([
+      {
+        id: 'item_dashboard',
+        systemKey: 'dashboard',
+        label: 'Dashboard',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/',
+        icon: 'LayoutDashboard',
+        parentId: null,
+        openInNewTab: false,
+        isRequired: true,
+        isActive: true,
+        displayOrder: 1,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [],
+        companyAssignments: [],
+      },
+      {
+        id: 'item_reports',
+        systemKey: 'reports',
+        label: 'Reports',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/reports',
+        icon: 'BarChart2',
+        parentId: null,
+        openInNewTab: false,
+        isRequired: false,
+        isActive: true,
+        displayOrder: 80,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [{ plan: 'GROWTH', displayOrder: 80, isActive: true }],
+        companyAssignments: [],
+      },
+      {
+        id: 'item_finance',
+        systemKey: null,
+        label: 'Finance Portal',
+        itemType: 'EXTERNAL_LINK',
+        routeOrUrl: 'https://finance.example.com',
+        icon: null,
+        parentId: null,
+        openInNewTab: true,
+        isRequired: false,
+        isActive: true,
+        displayOrder: 200,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [],
+        companyAssignments: [{ companyId: 'company_1', displayOrder: 5, isActive: true }],
+      },
+      {
+        id: 'item_owner_only',
+        systemKey: 'settings',
+        label: 'Settings',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/settings',
+        icon: 'Settings',
+        parentId: null,
+        openInNewTab: false,
+        isRequired: false,
+        isActive: true,
+        displayOrder: 150,
+        roleVisibilities: [{ role: 'OWNER' }],
+        subscriptionAssignments: [{ plan: 'GROWTH', displayOrder: 150, isActive: true }],
+        companyAssignments: [],
+      },
+    ] as never)
+
+    const result = await getEmployeeMenu('employee_1')
+
+    expect(result.items).toHaveLength(3)
+    expect(result.items.map((item) => item.label)).toEqual(['Dashboard', 'Finance Portal', 'Reports'])
+    expect(result.items[0]).toMatchObject({
+      label: 'Dashboard',
+      itemType: 'INTERNAL_PAGE',
+    })
+    expect(result.items[1]).toMatchObject({
+      label: 'Finance Portal',
+      itemType: 'EXTERNAL_LINK',
+      openInNewTab: true,
+    })
+  })
+
+  it('explains hidden items in preview results', async () => {
+    vi.mocked(prisma.company.findUniqueOrThrow).mockResolvedValue({
+      id: 'company_1',
+      name: 'Atlas Cars',
+      status: 'ACTIVE',
+      subscription: { plan: 'STARTER', status: 'ACTIVE' },
+    } as never)
+
+    vi.mocked(prisma.menuItem.findMany).mockResolvedValue([
+      {
+        id: 'item_dashboard',
+        systemKey: 'dashboard',
+        label: 'Dashboard',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/',
+        icon: 'LayoutDashboard',
+        parentId: null,
+        openInNewTab: false,
+        isRequired: true,
+        isActive: true,
+        displayOrder: 1,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [],
+        companyAssignments: [],
+      },
+      {
+        id: 'item_reports',
+        systemKey: 'reports',
+        label: 'Reports',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/reports',
+        icon: 'BarChart2',
+        parentId: null,
+        openInNewTab: false,
+        isRequired: false,
+        isActive: true,
+        displayOrder: 80,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [{ plan: 'GROWTH', displayOrder: 80, isActive: true }],
+        companyAssignments: [],
+      },
+      {
+        id: 'item_direct',
+        systemKey: null,
+        label: 'Finance Portal',
+        itemType: 'EXTERNAL_LINK',
+        routeOrUrl: 'https://finance.example.com',
+        icon: null,
+        parentId: null,
+        openInNewTab: true,
+        isRequired: false,
+        isActive: true,
+        displayOrder: 20,
+        roleVisibilities: [{ role: 'MANAGER' }],
+        subscriptionAssignments: [],
+        companyAssignments: [{ companyId: 'company_1', displayOrder: 10, isActive: true }],
+      },
+    ] as never)
+
+    const result = await previewCompanyMenu({ companyId: 'company_1', role: 'MANAGER' })
+
+    expect(result.items.find((item) => item.label === 'Dashboard')).toMatchObject({
+      visible: true,
+      source: 'subscription',
+    })
+    expect(result.items.find((item) => item.label === 'Dashboard')?.reasons.join(' ')).toContain('defaults to all subscription plans')
+    expect(result.items.find((item) => item.label === 'Finance Portal')).toMatchObject({
+      visible: true,
+      source: 'company',
+    })
+    expect(result.items.find((item) => item.label === 'Reports')).toMatchObject({
+      visible: false,
+    })
+    expect(result.items.find((item) => item.label === 'Reports')?.reasons.join(' ')).toContain('STARTER does not include this menu item')
+  })
+})
diff --git a/api/src/modules/menu/menu.service.ts b/api/src/modules/menu/menu.service.ts
new file mode 100644
index 0000000..57a7e0f
--- /dev/null
+++ b/api/src/modules/menu/menu.service.ts
@@ -0,0 +1,659 @@
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+
+type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
+type Plan = 'STARTER' | 'GROWTH' | 'PRO'
+type MenuItemType = 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
+
+type AdminActor = {
+  id: string
+  role: string
+}
+
+type MenuItemInput = {
+  systemKey?: string | null
+  label: string
+  itemType: MenuItemType
+  routeOrUrl?: string | null
+  icon?: string | null
+  parentId?: string | null
+  displayOrder?: number
+  openInNewTab?: boolean
+  isRequired?: boolean
+  isActive?: boolean
+  roles?: EmployeeRole[]
+  subscriptionPlans?: Array<{
+    plan: Plan
+    displayOrder?: number
+    isActive?: boolean
+  }>
+  companyAssignments?: Array<{
+    companyId: string
+    displayOrder?: number
+    isActive?: boolean
+  }>
+}
+
+type MenuPreviewInput = {
+  companyId: string
+  role: EmployeeRole
+}
+
+type MenuAuditQuery = {
+  page: number
+  pageSize: number
+}
+
+type EvaluatedMenuItem = {
+  id: string
+  systemKey: string | null
+  label: string
+  itemType: MenuItemType
+  routeOrUrl: string | null
+  icon: string | null
+  parentId: string | null
+  openInNewTab: boolean
+  isRequired: boolean
+  isActive: boolean
+  displayOrder: number
+  source: 'company' | 'subscription' | 'none'
+  visible: boolean
+  reasons: string[]
+}
+
+const EMPLOYEE_ROLES: EmployeeRole[] = ['OWNER', 'MANAGER', 'AGENT']
+const MENU_AUDIT_RESOURCES = ['MenuItem', 'MenuSubscriptionAssignment', 'MenuCompanyAssignment', 'MenuRoleVisibility']
+const MENU_ITEM_TYPES_WITHOUT_ROUTE = new Set([
+  'PARENT_MENU',
+  'SECTION_LABEL',
+  'DIVIDER',
+])
+
+function normalizeNullableString(value?: string | null) {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+function sortByDisplayOrder<T extends { displayOrder: number; label?: string | null }>(items: T[]) {
+  return [...items].sort((a, b) => {
+    if (a.displayOrder !== b.displayOrder) return a.displayOrder - b.displayOrder
+    return (a.label ?? '').localeCompare(b.label ?? '')
+  })
+}
+
+function toPlanValue(plan: Plan) {
+  return plan
+}
+
+function toItemTypeValue(itemType: MenuItemType) {
+  return itemType
+}
+
+function describeEntitlement(
+  plan: Plan | null,
+  hasSubscriptionAssignment: boolean,
+  hasCompanyAssignment: boolean,
+  defaultsToAllSubscriptions: boolean,
+) {
+  if (hasCompanyAssignment) return 'Visible because it is assigned directly to this company.'
+  if (defaultsToAllSubscriptions) return 'Visible because this menu item defaults to all subscription plans.'
+  if (hasSubscriptionAssignment && plan) return `Visible because ${plan} includes this menu item.`
+  if (plan) return `Hidden because ${plan} does not include this menu item.`
+  return 'Hidden because the company does not have an active subscription assignment for this item.'
+}
+
+async function createAuditLog(admin: AdminActor, action: string, resource: string, resourceId: string | null, before?: unknown, after?: unknown) {
+  await prisma.auditLog.create({
+    data: {
+      adminUserId: admin.id,
+      action,
+      resource,
+      resourceId,
+      before: before === undefined ? undefined : JSON.parse(JSON.stringify(before)),
+      after: after === undefined ? undefined : JSON.parse(JSON.stringify(after)),
+    },
+  })
+}
+
+async function assertMenuItemPayload(input: MenuItemInput, menuItemId?: string) {
+  const label = input.label.trim()
+  if (!label) throw new AppError('Menu label is required.', 400, 'validation_error')
+
+  const itemType = toItemTypeValue(input.itemType)
+  const routeOrUrl = normalizeNullableString(input.routeOrUrl)
+  const parentId = normalizeNullableString(input.parentId)
+
+  if (MENU_ITEM_TYPES_WITHOUT_ROUTE.has(itemType)) {
+    if (routeOrUrl) {
+      throw new AppError('This menu item type cannot define a route or URL.', 400, 'validation_error')
+    }
+  } else if (!routeOrUrl) {
+    throw new AppError('Route or URL is required for this menu item type.', 400, 'validation_error')
+  }
+
+  if (routeOrUrl && itemType === 'EXTERNAL_LINK') {
+    if (!routeOrUrl.startsWith('https://')) {
+      throw new AppError('External links must use HTTPS.', 400, 'validation_error')
+    }
+  }
+
+  if (routeOrUrl && itemType === 'INTERNAL_PAGE' && !routeOrUrl.startsWith('/')) {
+    throw new AppError('Internal page routes must start with "/".', 400, 'validation_error')
+  }
+
+  if (parentId) {
+    if (menuItemId && parentId === menuItemId) {
+      throw new AppError('A menu item cannot be its own parent.', 400, 'validation_error')
+    }
+
+    const parent = await prisma.menuItem.findUnique({ where: { id: parentId } })
+    if (!parent) throw new AppError('Parent menu item was not found.', 400, 'validation_error')
+    if (parent.itemType !== 'PARENT_MENU') {
+      throw new AppError('Only parent menu items can contain children.', 400, 'validation_error')
+    }
+  }
+
+  if (routeOrUrl && !MENU_ITEM_TYPES_WITHOUT_ROUTE.has(itemType)) {
+    const duplicate = await prisma.menuItem.findFirst({
+      where: {
+        routeOrUrl,
+        parentId,
+        ...(menuItemId ? { id: { not: menuItemId } } : {}),
+      },
+      select: { id: true },
+    })
+
+    if (duplicate) {
+      throw new AppError('Duplicate route under the same parent is not allowed.', 409, 'duplicate_menu_route')
+    }
+  }
+
+  const roles = Array.from(new Set(input.roles ?? []))
+  if (roles.some((role) => !EMPLOYEE_ROLES.includes(role))) {
+    throw new AppError('One or more role visibility values are invalid.', 400, 'validation_error')
+  }
+
+  const companyIds = Array.from(new Set((input.companyAssignments ?? []).map((assignment) => assignment.companyId)))
+  if (companyIds.length > 0) {
+    const companies = await prisma.company.findMany({
+      where: { id: { in: companyIds }, status: { not: 'CANCELLED' } },
+      select: { id: true },
+    })
+
+    if (companies.length !== companyIds.length) {
+      throw new AppError('Menu items can only be assigned to active companies.', 400, 'validation_error')
+    }
+  }
+}
+
+async function syncMenuAssignments(
+  tx: Omit<typeof prisma, '$connect' | '$disconnect' | '$on' | '$transaction' | '$use' | '$extends'>,
+  menuItemId: string,
+  input: MenuItemInput,
+) {
+  await tx.menuItemRoleVisibility.deleteMany({ where: { menuItemId } })
+  if ((input.roles ?? []).length > 0) {
+    await tx.menuItemRoleVisibility.createMany({
+      data: Array.from(new Set(input.roles)).map((role) => ({ menuItemId, role })),
+    })
+  }
+
+  await tx.subscriptionMenuItem.deleteMany({ where: { menuItemId } })
+  if ((input.subscriptionPlans ?? []).length > 0) {
+    await tx.subscriptionMenuItem.createMany({
+      data: input.subscriptionPlans!.map((assignment) => ({
+        menuItemId,
+        plan: toPlanValue(assignment.plan),
+        displayOrder: assignment.displayOrder ?? input.displayOrder ?? 0,
+        isActive: assignment.isActive ?? true,
+      })),
+    })
+  }
+
+  await tx.companyMenuItem.deleteMany({ where: { menuItemId } })
+  if ((input.companyAssignments ?? []).length > 0) {
+    await tx.companyMenuItem.createMany({
+      data: input.companyAssignments!.map((assignment) => ({
+        menuItemId,
+        companyId: assignment.companyId,
+        displayOrder: assignment.displayOrder ?? input.displayOrder ?? 0,
+        isActive: assignment.isActive ?? true,
+      })),
+    })
+  }
+}
+
+async function loadMenuItemDetail(id: string) {
+  return prisma.menuItem.findUniqueOrThrow({
+    where: { id },
+    include: {
+      parent: { select: { id: true, label: true } },
+      children: { select: { id: true, label: true } },
+      roleVisibilities: { orderBy: { role: 'asc' } },
+      subscriptionAssignments: { orderBy: [{ plan: 'asc' }, { displayOrder: 'asc' }] },
+      companyAssignments: {
+        include: { company: { select: { id: true, name: true } } },
+        orderBy: [{ displayOrder: 'asc' }, { companyId: 'asc' }],
+      },
+    },
+  })
+}
+
+export async function listMenuItems() {
+  return prisma.menuItem.findMany({
+    include: {
+      parent: { select: { id: true, label: true } },
+      roleVisibilities: { orderBy: { role: 'asc' } },
+      subscriptionAssignments: { orderBy: [{ plan: 'asc' }, { displayOrder: 'asc' }] },
+      companyAssignments: {
+        include: { company: { select: { id: true, name: true } } },
+        orderBy: [{ displayOrder: 'asc' }, { companyId: 'asc' }],
+      },
+    },
+    orderBy: [{ displayOrder: 'asc' }, { createdAt: 'asc' }],
+  })
+}
+
+export async function getMenuItem(id: string) {
+  return loadMenuItemDetail(id)
+}
+
+export async function createMenuItem(input: MenuItemInput, admin: AdminActor) {
+  await assertMenuItemPayload(input)
+
+  const created = await prisma.$transaction(async (tx: any) => {
+    const menuItem = await tx.menuItem.create({
+      data: {
+        systemKey: normalizeNullableString(input.systemKey) ?? undefined,
+        label: input.label.trim(),
+        itemType: toItemTypeValue(input.itemType),
+        routeOrUrl: normalizeNullableString(input.routeOrUrl) ?? undefined,
+        icon: normalizeNullableString(input.icon) ?? undefined,
+        parentId: normalizeNullableString(input.parentId) ?? undefined,
+        displayOrder: input.displayOrder ?? 0,
+        openInNewTab: input.openInNewTab ?? false,
+        isRequired: input.isRequired ?? false,
+        isActive: input.isActive ?? true,
+        createdBy: admin.id,
+        updatedBy: admin.id,
+      },
+    })
+
+    await syncMenuAssignments(tx as any, menuItem.id, input)
+    return menuItem
+  })
+
+  const detail = await loadMenuItemDetail(created.id)
+  await createAuditLog(admin, 'CREATE_MENU_ITEM', 'MenuItem', created.id, undefined, detail)
+  return detail
+}
+
+export async function updateMenuItem(id: string, input: MenuItemInput, admin: AdminActor) {
+  const before = await loadMenuItemDetail(id)
+  await assertMenuItemPayload(input, id)
+
+  const updated = await prisma.$transaction(async (tx: any) => {
+    const menuItem = await tx.menuItem.update({
+      where: { id },
+      data: {
+        systemKey: normalizeNullableString(input.systemKey) ?? undefined,
+        label: input.label.trim(),
+        itemType: toItemTypeValue(input.itemType),
+        routeOrUrl: normalizeNullableString(input.routeOrUrl) ?? undefined,
+        icon: normalizeNullableString(input.icon) ?? undefined,
+        parentId: normalizeNullableString(input.parentId) ?? undefined,
+        displayOrder: input.displayOrder ?? 0,
+        openInNewTab: input.openInNewTab ?? false,
+        isRequired: input.isRequired ?? false,
+        isActive: input.isActive ?? true,
+        updatedBy: admin.id,
+      },
+    })
+
+    await syncMenuAssignments(tx as any, id, input)
+    return menuItem
+  })
+
+  const detail = await loadMenuItemDetail(updated.id)
+  await createAuditLog(admin, 'UPDATE_MENU_ITEM', 'MenuItem', id, before, detail)
+  return detail
+}
+
+export async function setMenuItemStatus(id: string, isActive: boolean, admin: AdminActor) {
+  const before = await prisma.menuItem.findUniqueOrThrow({ where: { id } })
+  if (!isActive && before.isRequired && admin.role !== 'SUPER_ADMIN') {
+    throw new AppError('Required system items can only be disabled by a Super Admin.', 403, 'forbidden')
+  }
+
+  const updated = await prisma.menuItem.update({
+    where: { id },
+    data: { isActive, updatedBy: admin.id },
+  })
+
+  await createAuditLog(
+    admin,
+    isActive ? 'ENABLE_MENU_ITEM' : 'DISABLE_MENU_ITEM',
+    'MenuItem',
+    id,
+    { isActive: before.isActive },
+    { isActive: updated.isActive },
+  )
+
+  return updated
+}
+
+export async function deleteMenuItem(id: string, admin: AdminActor) {
+  const before = await loadMenuItemDetail(id)
+  if (before.isRequired && admin.role !== 'SUPER_ADMIN') {
+    throw new AppError('Required system items can only be deleted by a Super Admin.', 403, 'forbidden')
+  }
+
+  await prisma.menuItem.delete({ where: { id } })
+  await createAuditLog(admin, 'DELETE_MENU_ITEM', 'MenuItem', id, before, undefined)
+}
+
+export async function assignMenuItemToPlans(
+  id: string,
+  assignments: Array<{ plan: Plan; displayOrder?: number; isActive?: boolean }>,
+  admin: AdminActor,
+) {
+  await prisma.menuItem.findUniqueOrThrow({ where: { id } })
+
+  const payload = assignments.map((assignment) => ({
+    menuItemId: id,
+    plan: toPlanValue(assignment.plan),
+    displayOrder: assignment.displayOrder ?? 0,
+    isActive: assignment.isActive ?? true,
+  }))
+
+  await prisma.subscriptionMenuItem.deleteMany({
+    where: { menuItemId: id, plan: { in: payload.map((assignment) => assignment.plan) } },
+  })
+
+  if (payload.length > 0) {
+    await prisma.subscriptionMenuItem.createMany({ data: payload })
+  }
+
+  await createAuditLog(admin, 'ASSIGN_MENU_ITEM_TO_SUBSCRIPTIONS', 'MenuSubscriptionAssignment', id, undefined, payload)
+  return loadMenuItemDetail(id)
+}
+
+export async function removeMenuItemFromPlan(id: string, plan: Plan, admin: AdminActor) {
+  await prisma.subscriptionMenuItem.deleteMany({
+    where: {
+      menuItemId: id,
+      plan: toPlanValue(plan),
+    },
+  })
+
+  await createAuditLog(admin, 'REMOVE_MENU_ITEM_FROM_SUBSCRIPTION', 'MenuSubscriptionAssignment', id, { plan }, undefined)
+  return loadMenuItemDetail(id)
+}
+
+export async function assignMenuItemToCompanies(
+  id: string,
+  assignments: Array<{ companyId: string; displayOrder?: number; isActive?: boolean }>,
+  admin: AdminActor,
+) {
+  await prisma.menuItem.findUniqueOrThrow({ where: { id } })
+  const companyIds = assignments.map((assignment) => assignment.companyId)
+  const companies = await prisma.company.findMany({
+    where: { id: { in: companyIds }, status: { not: 'CANCELLED' } },
+    select: { id: true },
+  })
+
+  if (companies.length !== new Set(companyIds).size) {
+    throw new AppError('Menu items can only be assigned to active companies.', 400, 'validation_error')
+  }
+
+  await prisma.companyMenuItem.deleteMany({
+    where: {
+      menuItemId: id,
+      companyId: { in: companyIds },
+    },
+  })
+
+  if (assignments.length > 0) {
+    await prisma.companyMenuItem.createMany({
+      data: assignments.map((assignment) => ({
+        menuItemId: id,
+        companyId: assignment.companyId,
+        displayOrder: assignment.displayOrder ?? 0,
+        isActive: assignment.isActive ?? true,
+      })),
+    })
+  }
+
+  await createAuditLog(admin, 'ASSIGN_MENU_ITEM_TO_COMPANIES', 'MenuCompanyAssignment', id, undefined, assignments)
+  return loadMenuItemDetail(id)
+}
+
+export async function removeMenuItemFromCompany(id: string, companyId: string, admin: AdminActor) {
+  await prisma.companyMenuItem.deleteMany({
+    where: { menuItemId: id, companyId },
+  })
+
+  await createAuditLog(admin, 'REMOVE_MENU_ITEM_FROM_COMPANY', 'MenuCompanyAssignment', id, { companyId }, undefined)
+  return loadMenuItemDetail(id)
+}
+
+async function getMenuEvaluationContext(companyId: string, role: EmployeeRole, employeeIsActive = true) {
+  const company = await prisma.company.findUniqueOrThrow({
+    where: { id: companyId },
+    select: {
+      id: true,
+      name: true,
+      status: true,
+      subscription: {
+        select: {
+          plan: true,
+          status: true,
+        },
+      },
+    },
+  })
+
+  const menuItems = await prisma.menuItem.findMany({
+    include: {
+      roleVisibilities: true,
+      subscriptionAssignments: true,
+      companyAssignments: {
+        where: { companyId },
+      },
+    },
+    orderBy: [{ displayOrder: 'asc' }, { createdAt: 'asc' }],
+  })
+
+  const currentPlan = company.subscription?.plan ?? null
+  const currentPlanName = currentPlan as Plan | null
+
+  const evaluated: EvaluatedMenuItem[] = (menuItems as any[]).map((item: any) => {
+    const defaultsToAllSubscriptions = item.subscriptionAssignments.length === 0
+    const subscriptionAssignment = item.subscriptionAssignments.find(
+      (assignment: any) => assignment.isActive && (!currentPlan || assignment.plan === currentPlan),
+    )
+    const companyAssignment = item.companyAssignments.find((assignment: any) => assignment.isActive)
+    const roleAllowed = item.roleVisibilities.length === 0 || item.roleVisibilities.some((visibility: any) => visibility.role === role)
+    const subscriptionEntitled = Boolean(subscriptionAssignment || (defaultsToAllSubscriptions && currentPlan))
+    const entitled = Boolean(subscriptionEntitled || companyAssignment)
+    const visible = Boolean(item.isActive && entitled && roleAllowed && employeeIsActive)
+    const displayOrder = companyAssignment?.displayOrder ?? subscriptionAssignment?.displayOrder ?? item.displayOrder
+
+    const reasons: string[] = []
+    if (!item.isActive) reasons.push('Hidden because the menu item is inactive.')
+    if (!employeeIsActive) reasons.push('Hidden because the user account is inactive.')
+    if (!entitled) reasons.push(describeEntitlement(currentPlanName, false, false, false))
+    if (entitled) {
+      reasons.push(
+        describeEntitlement(
+          currentPlanName,
+          Boolean(subscriptionAssignment),
+          Boolean(companyAssignment),
+          Boolean(defaultsToAllSubscriptions && !companyAssignment),
+        ),
+      )
+    }
+    if (!roleAllowed) reasons.push(`Hidden because the ${role} role is not allowed to see this item.`)
+
+    return {
+      id: item.id,
+      systemKey: item.systemKey,
+      label: item.label ?? '',
+      itemType: item.itemType as MenuItemType,
+      routeOrUrl: item.routeOrUrl,
+      icon: item.icon,
+      parentId: item.parentId,
+      openInNewTab: item.openInNewTab,
+      isRequired: item.isRequired,
+      isActive: item.isActive,
+      displayOrder,
+      source: companyAssignment ? 'company' : subscriptionEntitled ? 'subscription' : 'none',
+      visible,
+      reasons,
+    }
+  })
+
+  return {
+    company,
+    role,
+    currentPlan: currentPlanName,
+    items: sortByDisplayOrder(evaluated),
+  }
+}
+
+function buildMenuTree(items: Array<{
+  id: string
+  systemKey: string | null
+  label: string
+  itemType: MenuItemType
+  routeOrUrl: string | null
+  icon: string | null
+  parentId: string | null
+  openInNewTab: boolean
+  displayOrder: number
+}>) {
+  const byId = new Map<string, any>()
+  const roots: any[] = []
+
+  for (const item of items) {
+    byId.set(item.id, {
+      id: item.id,
+      systemKey: item.systemKey,
+      label: item.label ?? '',
+      itemType: item.itemType as MenuItemType,
+      routeOrUrl: item.routeOrUrl,
+      icon: item.icon,
+      parentId: item.parentId,
+      openInNewTab: item.openInNewTab,
+      displayOrder: item.displayOrder,
+      children: [],
+    })
+  }
+
+  for (const item of items) {
+    const node = byId.get(item.id)
+    if (item.parentId && byId.has(item.parentId)) {
+      byId.get(item.parentId).children.push(node)
+    } else {
+      roots.push(node)
+    }
+  }
+
+  const sortTree = (nodes: any[]) => {
+    nodes.sort((a, b) => {
+      if (a.displayOrder !== b.displayOrder) return a.displayOrder - b.displayOrder
+      return a.label.localeCompare(b.label)
+    })
+    nodes.forEach((node) => sortTree(node.children))
+  }
+
+  sortTree(roots)
+  return roots
+}
+
+export async function previewCompanyMenu(input: MenuPreviewInput) {
+  const context = await getMenuEvaluationContext(input.companyId, input.role)
+  return {
+    company: context.company,
+    role: context.role,
+    subscriptionPlan: context.currentPlan,
+    items: context.items,
+    finalMenu: buildMenuTree(
+      context.items
+        .filter((item) => item.visible)
+        .map((item) => ({
+          id: item.id,
+          systemKey: item.systemKey,
+          label: item.label,
+          itemType: item.itemType,
+          routeOrUrl: item.routeOrUrl,
+          icon: item.icon,
+          parentId: item.parentId,
+          openInNewTab: item.openInNewTab,
+          displayOrder: item.displayOrder,
+        })),
+    ),
+  }
+}
+
+export async function getEmployeeMenu(employeeId: string) {
+  const employee = await prisma.employee.findUniqueOrThrow({
+    where: { id: employeeId },
+    select: {
+      id: true,
+      role: true,
+      isActive: true,
+      companyId: true,
+    },
+  })
+
+  const context = await getMenuEvaluationContext(employee.companyId, employee.role, employee.isActive)
+  const visibleItems = context.items.filter((item) => item.visible)
+
+  return {
+    companyId: employee.companyId,
+    role: employee.role,
+    subscriptionPlan: context.currentPlan,
+    items: buildMenuTree(
+      visibleItems.map((item) => ({
+        id: item.id,
+        systemKey: item.systemKey,
+        label: item.label,
+        itemType: item.itemType,
+        routeOrUrl: item.routeOrUrl,
+        icon: item.icon,
+        parentId: item.parentId,
+        openInNewTab: item.openInNewTab,
+        displayOrder: item.displayOrder,
+      })),
+    ),
+  }
+}
+
+export async function listMenuAuditLogs(query: MenuAuditQuery) {
+  const where = {
+    resource: {
+      in: MENU_AUDIT_RESOURCES,
+    },
+  } as const
+
+  const [data, total] = await Promise.all([
+    prisma.auditLog.findMany({
+      where,
+      include: { adminUser: { select: { firstName: true, lastName: true, email: true } } },
+      skip: (query.page - 1) * query.pageSize,
+      take: query.pageSize,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.auditLog.count({ where }),
+  ])
+
+  return {
+    data,
+    total,
+    page: query.page,
+    pageSize: query.pageSize,
+    totalPages: Math.ceil(total / query.pageSize),
+  }
+}
diff --git a/api/src/modules/notifications/notification.repo.edge.test.ts b/api/src/modules/notifications/notification.repo.edge.test.ts
new file mode 100644
index 0000000..0175cee
--- /dev/null
+++ b/api/src/modules/notifications/notification.repo.edge.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const prismaMock = vi.hoisted(() => ({
+  notification: {
+    findMany: vi.fn(),
+    count: vi.fn(),
+    updateMany: vi.fn(),
+  },
+  notificationPreference: {
+    findMany: vi.fn(),
+    upsert: vi.fn(),
+  },
+}))
+
+vi.mock('../../lib/prisma', () => ({ prisma: prismaMock }))
+
+import * as repo from './notification.repo'
+
+describe('notification.repo query boundaries', () => {
+  it('scopes company in-app notification lists and applies unread filtering only when requested', async () => {
+    await repo.findCompany('company_1', 'true')
+
+    expect(prismaMock.notification.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1', channel: 'IN_APP', readAt: null },
+      orderBy: { createdAt: 'desc' },
+      take: 50,
+    })
+  })
+
+  it('marks a single company notification read with tenant scoping', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-09T13:00:00.000Z'))
+
+    await repo.markRead('notification_1', 'company_1')
+
+    expect(prismaMock.notification.updateMany).toHaveBeenCalledWith({
+      where: { id: 'notification_1', companyId: 'company_1' },
+      data: { readAt: new Date('2026-06-09T13:00:00.000Z'), status: 'READ' },
+    })
+    vi.useRealTimers()
+  })
+
+  it('keeps renter bulk read updates constrained to renter in-app notifications', async () => {
+    await repo.markAllRenterRead('renter_1')
+
+    expect(prismaMock.notification.updateMany).toHaveBeenCalledWith({
+      where: { renterId: 'renter_1', channel: 'IN_APP', readAt: null },
+      data: { readAt: expect.any(Date), status: 'READ' },
+    })
+  })
+
+  it('defaults company notification history to a capped newest-first query', async () => {
+    await repo.findCompanyHistory('company_1')
+
+    expect(prismaMock.notification.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      orderBy: { createdAt: 'desc' },
+      take: 200,
+    })
+  })
+
+  it('upserts employee preferences by composite key without cross-employee mutation', async () => {
+    await repo.upsertEmployeePreferences('employee_1', [
+      { notificationType: 'RESERVATION_CREATED', channel: 'EMAIL', enabled: false },
+      { notificationType: 'PAYMENT_RECEIVED', channel: 'IN_APP', enabled: true },
+    ])
+
+    expect(prismaMock.notificationPreference.upsert).toHaveBeenCalledTimes(2)
+    expect(prismaMock.notificationPreference.upsert).toHaveBeenNthCalledWith(1, {
+      where: {
+        employeeId_notificationType_channel: {
+          employeeId: 'employee_1',
+          notificationType: 'RESERVATION_CREATED',
+          channel: 'EMAIL',
+        },
+      },
+      create: {
+        employeeId: 'employee_1',
+        notificationType: 'RESERVATION_CREATED',
+        channel: 'EMAIL',
+        enabled: false,
+      },
+      update: { enabled: false },
+    })
+  })
+
+  it('upserts renter preferences by renter composite key', async () => {
+    await repo.upsertRenterPreferences('renter_1', [
+      { notificationType: 'RESERVATION_CONFIRMED', channel: 'PUSH', enabled: true },
+    ])
+
+    expect(prismaMock.notificationPreference.upsert).toHaveBeenCalledWith({
+      where: {
+        renterId_notificationType_channel: {
+          renterId: 'renter_1',
+          notificationType: 'RESERVATION_CONFIRMED',
+          channel: 'PUSH',
+        },
+      },
+      create: {
+        renterId: 'renter_1',
+        notificationType: 'RESERVATION_CONFIRMED',
+        channel: 'PUSH',
+        enabled: true,
+      },
+      update: { enabled: true },
+    })
+  })
+})
diff --git a/api/src/modules/notifications/notification.repo.ts b/api/src/modules/notifications/notification.repo.ts
new file mode 100644
index 0000000..66d24a6
--- /dev/null
+++ b/api/src/modules/notifications/notification.repo.ts
@@ -0,0 +1,78 @@
+import { prisma } from '../../lib/prisma'
+import { NotificationType, NotificationChannel } from '@rentaldrivego/database'
+
+// ─── Company notifications ────────────────────────────────────
+
+export function findCompany(companyId: string, unread?: string) {
+  const where: any = { companyId, channel: 'IN_APP' }
+  if (unread === 'true') where.readAt = null
+  return prisma.notification.findMany({ where, orderBy: { createdAt: 'desc' }, take: 50 })
+}
+
+export function countUnread(companyId: string) {
+  return prisma.notification.count({ where: { companyId, channel: 'IN_APP', readAt: null } })
+}
+
+export function markRead(id: string, companyId: string) {
+  return prisma.notification.updateMany({ where: { id, companyId }, data: { readAt: new Date(), status: 'READ' } })
+}
+
+export function markAllRead(companyId: string) {
+  return prisma.notification.updateMany({ where: { companyId, readAt: null }, data: { readAt: new Date(), status: 'READ' } })
+}
+
+export function findEmployeePreferences(employeeId: string) {
+  return prisma.notificationPreference.findMany({ where: { employeeId } })
+}
+
+export async function upsertEmployeePreferences(employeeId: string, prefs: Array<{ notificationType: string; channel: string; enabled: boolean }>) {
+  for (const pref of prefs) {
+    await prisma.notificationPreference.upsert({
+      where: { employeeId_notificationType_channel: { employeeId, notificationType: pref.notificationType as NotificationType, channel: pref.channel as NotificationChannel } },
+      create: { employeeId, notificationType: pref.notificationType as NotificationType, channel: pref.channel as NotificationChannel, enabled: pref.enabled },
+      update: { enabled: pref.enabled },
+    })
+  }
+}
+
+export function findCompanyHistory(
+  companyId: string,
+  opts?: { channel?: string; status?: string; limit?: number },
+) {
+  const where: any = { companyId }
+  if (opts?.channel) where.channel = opts.channel
+  if (opts?.status) where.status = opts.status
+  return prisma.notification.findMany({
+    where,
+    orderBy: { createdAt: 'desc' },
+    take: opts?.limit ?? 200,
+  })
+}
+
+// ─── Renter notifications ─────────────────────────────────────
+
+export function findRenter(renterId: string) {
+  return prisma.notification.findMany({ where: { renterId, channel: 'IN_APP' }, orderBy: { createdAt: 'desc' }, take: 50 })
+}
+
+export function markRenterRead(id: string, renterId: string) {
+  return prisma.notification.updateMany({ where: { id, renterId }, data: { readAt: new Date(), status: 'READ' } })
+}
+
+export function markAllRenterRead(renterId: string) {
+  return prisma.notification.updateMany({ where: { renterId, channel: 'IN_APP', readAt: null }, data: { readAt: new Date(), status: 'READ' } })
+}
+
+export function findRenterPreferences(renterId: string) {
+  return prisma.notificationPreference.findMany({ where: { renterId } })
+}
+
+export async function upsertRenterPreferences(renterId: string, prefs: Array<{ notificationType: string; channel: string; enabled: boolean }>) {
+  for (const pref of prefs) {
+    await prisma.notificationPreference.upsert({
+      where: { renterId_notificationType_channel: { renterId, notificationType: pref.notificationType as NotificationType, channel: pref.channel as NotificationChannel } },
+      create: { renterId, notificationType: pref.notificationType as NotificationType, channel: pref.channel as NotificationChannel, enabled: pref.enabled },
+      update: { enabled: pref.enabled },
+    })
+  }
+}
diff --git a/api/src/modules/notifications/notification.routes.ts b/api/src/modules/notifications/notification.routes.ts
new file mode 100644
index 0000000..29300d1
--- /dev/null
+++ b/api/src/modules/notifications/notification.routes.ts
@@ -0,0 +1,103 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRenterAuth } from '../../middleware/requireRenterAuth'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok } from '../../http/respond'
+import * as service from './notification.service'
+import { preferencesSchema, idParamSchema, unreadQuerySchema, historyQuerySchema } from './notification.schemas'
+
+const router = Router()
+
+const companyAuth = [requireCompanyAuth, requireTenant, requireSubscription] as const
+
+// ─── Company notifications ────────────────────────────────────
+
+router.get('/company', ...companyAuth, async (req, res, next) => {
+  try {
+    const { unread } = parseQuery(unreadQuerySchema, req)
+    ok(res, await service.listCompany(req.companyId, unread))
+  } catch (err) { next(err) }
+})
+
+router.get('/unread-count', ...companyAuth, async (req, res, next) => {
+  try {
+    ok(res, { unread: await service.countUnread(req.companyId) })
+  } catch (err) { next(err) }
+})
+
+router.post('/company/:id/read', ...companyAuth, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.markRead(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/company/read-all', ...companyAuth, async (req, res, next) => {
+  try {
+    await service.markAllRead(req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/company/preferences', ...companyAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.getPreferences(req.employee.id))
+  } catch (err) { next(err) }
+})
+
+router.patch('/company/preferences', ...companyAuth, async (req, res, next) => {
+  try {
+    const prefs = parseBody(preferencesSchema, req)
+    await service.setPreferences(req.employee.id, prefs)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/history', ...companyAuth, async (req, res, next) => {
+  try {
+    const { channel, status, limit } = parseQuery(historyQuerySchema, req)
+    ok(res, await service.listCompanyHistory(req.companyId, { channel, status, limit }))
+  } catch (err) { next(err) }
+})
+
+// ─── Renter notifications ─────────────────────────────────────
+
+router.get('/renter', requireRenterAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.listRenter(req.renterId))
+  } catch (err) { next(err) }
+})
+
+router.post('/renter/:id/read', requireRenterAuth, async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.markRenterRead(id, req.renterId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/renter/read-all', requireRenterAuth, async (req, res, next) => {
+  try {
+    await service.markAllRenterRead(req.renterId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/renter/preferences', requireRenterAuth, async (req, res, next) => {
+  try {
+    ok(res, await service.getRenterPreferences(req.renterId))
+  } catch (err) { next(err) }
+})
+
+router.patch('/renter/preferences', requireRenterAuth, async (req, res, next) => {
+  try {
+    const prefs = parseBody(preferencesSchema, req)
+    await service.setRenterPreferences(req.renterId, prefs)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/notifications/notification.schemas.edge.test.ts b/api/src/modules/notifications/notification.schemas.edge.test.ts
new file mode 100644
index 0000000..84bbcce
--- /dev/null
+++ b/api/src/modules/notifications/notification.schemas.edge.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { historyQuerySchema, idParamSchema, preferencesSchema, unreadQuerySchema } from './notification.schemas'
+
+describe('notification schema contracts', () => {
+  it('requires complete preference entries', () => {
+    expect(preferencesSchema.parse([{ notificationType: 'BOOKING_CREATED', channel: 'EMAIL', enabled: true }])).toEqual([
+      { notificationType: 'BOOKING_CREATED', channel: 'EMAIL', enabled: true },
+    ])
+    expect(() => preferencesSchema.parse([{ notificationType: 'BOOKING_CREATED', channel: 'EMAIL' }])).toThrow()
+  })
+
+  it('coerces history limits and caps bulk history requests', () => {
+    expect(historyQuerySchema.parse({ channel: 'EMAIL', status: 'SENT', limit: '25' })).toEqual({
+      channel: 'EMAIL',
+      status: 'SENT',
+      limit: 25,
+    })
+    expect(() => historyQuerySchema.parse({ limit: '0' })).toThrow()
+    expect(() => historyQuerySchema.parse({ limit: '501' })).toThrow()
+  })
+
+  it('accepts unread query passthrough but rejects empty ids', () => {
+    expect(unreadQuerySchema.parse({ unread: 'true' })).toEqual({ unread: 'true' })
+    expect(idParamSchema.parse({ id: 'notification_1' })).toEqual({ id: 'notification_1' })
+    expect(() => idParamSchema.parse({ id: '' })).toThrow()
+  })
+})
diff --git a/api/src/modules/notifications/notification.schemas.ts b/api/src/modules/notifications/notification.schemas.ts
new file mode 100644
index 0000000..2135234
--- /dev/null
+++ b/api/src/modules/notifications/notification.schemas.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+export const preferenceItemSchema = z.object({
+  notificationType: z.string(),
+  channel:          z.string(),
+  enabled:          z.boolean(),
+})
+
+export const preferencesSchema = z.array(preferenceItemSchema)
+
+export const idParamSchema = z.object({
+  id: z.string().min(1),
+})
+
+export const unreadQuerySchema = z.object({
+  unread: z.string().optional(),
+})
+
+export const historyQuerySchema = z.object({
+  channel: z.string().optional(),
+  status:  z.string().optional(),
+  limit:   z.coerce.number().int().min(1).max(500).optional(),
+})
diff --git a/api/src/modules/notifications/notification.service.test.ts b/api/src/modules/notifications/notification.service.test.ts
new file mode 100644
index 0000000..bcec027
--- /dev/null
+++ b/api/src/modules/notifications/notification.service.test.ts
@@ -0,0 +1,74 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./notification.repo', () => ({
+  findCompany: vi.fn(),
+  findCompanyHistory: vi.fn(),
+  countUnread: vi.fn(),
+  markRead: vi.fn(),
+  markAllRead: vi.fn(),
+  findEmployeePreferences: vi.fn(),
+  upsertEmployeePreferences: vi.fn(),
+  findRenter: vi.fn(),
+  markRenterRead: vi.fn(),
+  markAllRenterRead: vi.fn(),
+  findRenterPreferences: vi.fn(),
+  upsertRenterPreferences: vi.fn(),
+}))
+
+import * as repo from './notification.repo'
+import * as service from './notification.service'
+
+describe('notification.service', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('delegates company notification reads and history filters without rewriting query semantics', async () => {
+    vi.mocked(repo.findCompany).mockResolvedValue([{ id: 'n1' }] as never)
+    vi.mocked(repo.findCompanyHistory).mockResolvedValue([{ id: 'h1' }] as never)
+    vi.mocked(repo.countUnread).mockResolvedValue(4 as never)
+
+    await expect(service.listCompany('company_1', 'true')).resolves.toEqual([{ id: 'n1' }])
+    await expect(service.listCompanyHistory('company_1', { channel: 'EMAIL', status: 'FAILED', limit: 25 })).resolves.toEqual([{ id: 'h1' }])
+    await expect(service.countUnread('company_1')).resolves.toBe(4)
+
+    expect(repo.findCompany).toHaveBeenCalledWith('company_1', 'true')
+    expect(repo.findCompanyHistory).toHaveBeenCalledWith('company_1', { channel: 'EMAIL', status: 'FAILED', limit: 25 })
+    expect(repo.countUnread).toHaveBeenCalledWith('company_1')
+  })
+
+  it('marks company notifications read only within the company tenant', async () => {
+    await service.markRead('notification_1', 'company_1')
+    await service.markAllRead('company_1')
+
+    expect(repo.markRead).toHaveBeenCalledWith('notification_1', 'company_1')
+    expect(repo.markAllRead).toHaveBeenCalledWith('company_1')
+  })
+
+  it('reads and writes employee preferences through the employee identity, not the company id', async () => {
+    const prefs = [{ notificationType: 'BOOKING_CONFIRMED', channel: 'EMAIL', enabled: true }]
+    vi.mocked(repo.findEmployeePreferences).mockResolvedValue(prefs as never)
+
+    await expect(service.getPreferences('employee_1')).resolves.toEqual(prefs)
+    await service.setPreferences('employee_1', prefs)
+
+    expect(repo.findEmployeePreferences).toHaveBeenCalledWith('employee_1')
+    expect(repo.upsertEmployeePreferences).toHaveBeenCalledWith('employee_1', prefs)
+  })
+
+  it('keeps renter notification operations scoped to the renter identity', async () => {
+    const prefs = [{ notificationType: 'REVIEW_REQUEST', channel: 'IN_APP', enabled: false }]
+    vi.mocked(repo.findRenter).mockResolvedValue([{ id: 'rn1' }] as never)
+    vi.mocked(repo.findRenterPreferences).mockResolvedValue(prefs as never)
+
+    await service.listRenter('renter_1')
+    await service.markRenterRead('notification_1', 'renter_1')
+    await service.markAllRenterRead('renter_1')
+    await service.getRenterPreferences('renter_1')
+    await service.setRenterPreferences('renter_1', prefs)
+
+    expect(repo.findRenter).toHaveBeenCalledWith('renter_1')
+    expect(repo.markRenterRead).toHaveBeenCalledWith('notification_1', 'renter_1')
+    expect(repo.markAllRenterRead).toHaveBeenCalledWith('renter_1')
+    expect(repo.findRenterPreferences).toHaveBeenCalledWith('renter_1')
+    expect(repo.upsertRenterPreferences).toHaveBeenCalledWith('renter_1', prefs)
+  })
+})
diff --git a/api/src/modules/notifications/notification.service.ts b/api/src/modules/notifications/notification.service.ts
new file mode 100644
index 0000000..cae0e86
--- /dev/null
+++ b/api/src/modules/notifications/notification.service.ts
@@ -0,0 +1,15 @@
+import * as repo from './notification.repo'
+
+export const listCompany      = (companyId: string, unread?: string) => repo.findCompany(companyId, unread)
+export const listCompanyHistory = (companyId: string, opts?: { channel?: string; status?: string; limit?: number }) => repo.findCompanyHistory(companyId, opts)
+export const countUnread      = (companyId: string) => repo.countUnread(companyId)
+export const markRead         = (id: string, companyId: string) => repo.markRead(id, companyId)
+export const markAllRead      = (companyId: string) => repo.markAllRead(companyId)
+export const getPreferences   = (employeeId: string) => repo.findEmployeePreferences(employeeId)
+export const setPreferences   = (employeeId: string, prefs: any[]) => repo.upsertEmployeePreferences(employeeId, prefs)
+
+export const listRenter           = (renterId: string) => repo.findRenter(renterId)
+export const markRenterRead       = (id: string, renterId: string) => repo.markRenterRead(id, renterId)
+export const markAllRenterRead    = (renterId: string) => repo.markAllRenterRead(renterId)
+export const getRenterPreferences = (renterId: string) => repo.findRenterPreferences(renterId)
+export const setRenterPreferences = (renterId: string, prefs: any[]) => repo.upsertRenterPreferences(renterId, prefs)
diff --git a/api/src/modules/offers/offer.repo.edge.test.ts b/api/src/modules/offers/offer.repo.edge.test.ts
new file mode 100644
index 0000000..a42fcff
--- /dev/null
+++ b/api/src/modules/offers/offer.repo.edge.test.ts
@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const tx = vi.hoisted(() => ({
+  offer: { update: vi.fn(), findUniqueOrThrow: vi.fn() },
+  offerVehicle: { deleteMany: vi.fn(), createMany: vi.fn() },
+}))
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    offer: { findMany: vi.fn(), findFirstOrThrow: vi.fn(), findFirst: vi.fn(), create: vi.fn(), deleteMany: vi.fn(), updateMany: vi.fn() },
+    reservation: { count: vi.fn() },
+    $transaction: vi.fn(async (callback: (txArg: typeof tx) => unknown) => callback(tx)),
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './offer.repo'
+
+describe('offer.repo edge behavior', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    tx.offer.update.mockReset()
+    tx.offer.findUniqueOrThrow.mockReset()
+    tx.offerVehicle.deleteMany.mockReset()
+    tx.offerVehicle.createMany.mockReset()
+  })
+
+  it('converts active and public query strings into boolean filters', () => {
+    repo.findMany('company_1', { active: 'false', public: 'true' })
+
+    expect(prisma.offer.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1', isActive: false, isPublic: true },
+      orderBy: { createdAt: 'desc' },
+    })
+  })
+
+  it('creates vehicle links only when explicit vehicle ids are supplied', async () => {
+    await repo.create('company_1', {
+      title: 'Summer',
+      type: 'PERCENTAGE',
+      discountValue: 10,
+      validFrom: '2026-07-01T00:00:00.000Z',
+      validUntil: '2026-07-31T23:59:59.000Z',
+    }, ['vehicle_1', 'vehicle_2'])
+
+    expect(prisma.offer.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        companyId: 'company_1',
+        validFrom: new Date('2026-07-01T00:00:00.000Z'),
+        validUntil: new Date('2026-07-31T23:59:59.000Z'),
+        vehicles: { create: [{ vehicleId: 'vehicle_1' }, { vehicleId: 'vehicle_2' }] },
+      }),
+      include: { vehicles: true },
+    })
+  })
+
+  it('replaces vehicle links inside the update transaction when vehicleIds are provided', async () => {
+    await repo.update('offer_1', { title: 'Updated', validFrom: '2026-08-01T00:00:00.000Z' }, ['vehicle_3'])
+
+    expect(prisma.$transaction).toHaveBeenCalled()
+    expect(tx.offer.update).toHaveBeenCalledWith({
+      where: { id: 'offer_1' },
+      data: expect.objectContaining({ title: 'Updated', validFrom: new Date('2026-08-01T00:00:00.000Z') }),
+    })
+    expect(tx.offerVehicle.deleteMany).toHaveBeenCalledWith({ where: { offerId: 'offer_1' } })
+    expect(tx.offerVehicle.createMany).toHaveBeenCalledWith({ data: [{ offerId: 'offer_1', vehicleId: 'vehicle_3' }] })
+    expect(tx.offer.findUniqueOrThrow).toHaveBeenCalledWith({ where: { id: 'offer_1' }, include: { vehicles: true } })
+  })
+
+  it('does not touch vehicle links when update omits vehicleIds', async () => {
+    await repo.update('offer_1', { description: 'Copy only' })
+
+    expect(tx.offerVehicle.deleteMany).not.toHaveBeenCalled()
+    expect(tx.offerVehicle.createMany).not.toHaveBeenCalled()
+  })
+
+  it('combines redemption counter and reservation count for stats', async () => {
+    vi.mocked(prisma.offer.findFirstOrThrow).mockResolvedValue({ id: 'offer_1', redemptionCount: 7 } as never)
+    vi.mocked(prisma.reservation.count).mockResolvedValue(3 as never)
+
+    await expect(repo.getStats('offer_1', 'company_1')).resolves.toEqual({ redemptions: 7, reservations: 3 })
+    expect(prisma.reservation.count).toHaveBeenCalledWith({ where: { offerId: 'offer_1' } })
+  })
+})
diff --git a/api/src/modules/offers/offer.repo.ts b/api/src/modules/offers/offer.repo.ts
new file mode 100644
index 0000000..22fdff1
--- /dev/null
+++ b/api/src/modules/offers/offer.repo.ts
@@ -0,0 +1,63 @@
+import { prisma } from '../../lib/prisma'
+
+export function findMany(companyId: string, filters: { active?: string; public?: string }) {
+  const where: any = { companyId }
+  if (filters.active !== undefined) where.isActive = filters.active === 'true'
+  if (filters.public !== undefined) where.isPublic = filters.public === 'true'
+  return prisma.offer.findMany({ where, orderBy: { createdAt: 'desc' } })
+}
+
+export function findByIdOrThrow(id: string, companyId: string) {
+  return prisma.offer.findFirstOrThrow({ where: { id, companyId }, include: { vehicles: true } })
+}
+
+export function findFirst(id: string, companyId: string) {
+  return prisma.offer.findFirst({ where: { id, companyId } })
+}
+
+export async function create(companyId: string, data: any, vehicleIds: string[]) {
+  return prisma.offer.create({
+    data: {
+      ...data,
+      companyId,
+      validFrom:  new Date(data.validFrom),
+      validUntil: new Date(data.validUntil),
+      vehicles: vehicleIds.length > 0 ? { create: vehicleIds.map((id) => ({ vehicleId: id })) } : undefined,
+    },
+    include: { vehicles: true },
+  })
+}
+
+export async function update(id: string, data: any, vehicleIds?: string[]) {
+  return prisma.$transaction(async (tx: any) => {
+    await tx.offer.update({
+      where: { id },
+      data: {
+        ...data,
+        validFrom:  data.validFrom  ? new Date(data.validFrom)  : undefined,
+        validUntil: data.validUntil ? new Date(data.validUntil) : undefined,
+      },
+    })
+    if (vehicleIds !== undefined) {
+      await tx.offerVehicle.deleteMany({ where: { offerId: id } })
+      if (vehicleIds.length > 0) {
+        await tx.offerVehicle.createMany({ data: vehicleIds.map((vehicleId) => ({ offerId: id, vehicleId })) })
+      }
+    }
+    return tx.offer.findUniqueOrThrow({ where: { id }, include: { vehicles: true } })
+  })
+}
+
+export function deleteMany(id: string, companyId: string) {
+  return prisma.offer.deleteMany({ where: { id, companyId } })
+}
+
+export function setActive(id: string, companyId: string, isActive: boolean) {
+  return prisma.offer.updateMany({ where: { id, companyId }, data: { isActive } })
+}
+
+export async function getStats(id: string, companyId: string) {
+  const offer = await prisma.offer.findFirstOrThrow({ where: { id, companyId } })
+  const reservations = await prisma.reservation.count({ where: { offerId: offer.id } })
+  return { redemptions: offer.redemptionCount, reservations }
+}
diff --git a/api/src/modules/offers/offer.routes.ts b/api/src/modules/offers/offer.routes.ts
new file mode 100644
index 0000000..abd6bf9
--- /dev/null
+++ b/api/src/modules/offers/offer.routes.ts
@@ -0,0 +1,75 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import * as service from './offer.service'
+import { offerSchema, listQuerySchema, idParamSchema } from './offer.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    ok(res, await service.listOffers(req.companyId, query))
+  } catch (err) { next(err) }
+})
+
+router.post('/', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { vehicleIds, ...body } = parseBody(offerSchema, req)
+    created(res, await service.createOffer(req.companyId, body, vehicleIds))
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.getOffer(id, req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { vehicleIds, ...body } = parseBody(offerSchema.partial(), req)
+    ok(res, await service.updateOffer(id, req.companyId, body, vehicleIds))
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.deleteOffer(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/activate', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.setOfferActive(id, req.companyId, true)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/deactivate', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.setOfferActive(id, req.companyId, false)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/stats', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.getOfferStats(id, req.companyId))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/offers/offer.schemas.edge.test.ts b/api/src/modules/offers/offer.schemas.edge.test.ts
new file mode 100644
index 0000000..501bb51
--- /dev/null
+++ b/api/src/modules/offers/offer.schemas.edge.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { offerSchema, listQuerySchema } from './offer.schemas'
+
+const validOffer = {
+  title: 'Summer deal',
+  type: 'PERCENTAGE',
+  discountValue: 15,
+  validFrom: '2026-07-01T00:00:00.000Z',
+  validUntil: '2026-07-31T23:59:59.000Z',
+}
+
+describe('offer schemas', () => {
+  it('applies safe defaults for public all-fleet offers', () => {
+    expect(offerSchema.parse(validOffer)).toMatchObject({
+      appliesToAll: true,
+      categories: [],
+      vehicleIds: [],
+      isActive: true,
+      isPublic: true,
+      isFeatured: false,
+    })
+  })
+
+  it('accepts targeted vehicle and category offers', () => {
+    expect(offerSchema.parse({
+      ...validOffer,
+      appliesToAll: false,
+      categories: ['SUV', 'LUXURY'],
+      vehicleIds: ['vehicle_1', 'vehicle_2'],
+    })).toMatchObject({ appliesToAll: false, categories: ['SUV', 'LUXURY'], vehicleIds: ['vehicle_1', 'vehicle_2'] })
+  })
+
+  it('rejects non-integer discounts and malformed dates', () => {
+    expect(() => offerSchema.parse({ ...validOffer, discountValue: 12.5 })).toThrow()
+    expect(() => offerSchema.parse({ ...validOffer, validFrom: 'tomorrow' })).toThrow()
+  })
+
+  it('keeps list filters as strings because route logic interprets them', () => {
+    expect(listQuerySchema.parse({ active: 'true', public: 'false' })).toEqual({ active: 'true', public: 'false' })
+  })
+})
diff --git a/api/src/modules/offers/offer.schemas.ts b/api/src/modules/offers/offer.schemas.ts
new file mode 100644
index 0000000..99a8bd4
--- /dev/null
+++ b/api/src/modules/offers/offer.schemas.ts
@@ -0,0 +1,31 @@
+import { z } from 'zod'
+
+export const offerSchema = z.object({
+  title:          z.string().min(1),
+  description:    z.string().optional(),
+  termsAndConds:  z.string().optional(),
+  type:           z.enum(['PERCENTAGE', 'FIXED_AMOUNT', 'FREE_DAY', 'SPECIAL_RATE']),
+  discountValue:  z.number().int().min(0),
+  specialRate:    z.number().int().optional(),
+  appliesToAll:   z.boolean().default(true),
+  categories:     z.array(z.enum(['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'])).default([]),
+  minRentalDays:  z.number().int().optional(),
+  maxRentalDays:  z.number().int().optional(),
+  promoCode:      z.string().optional(),
+  maxRedemptions: z.number().int().optional(),
+  validFrom:      z.string().datetime(),
+  validUntil:     z.string().datetime(),
+  isActive:       z.boolean().default(true),
+  isPublic:       z.boolean().default(true),
+  isFeatured:     z.boolean().default(false),
+  vehicleIds:     z.array(z.string()).default([]),
+})
+
+export const listQuerySchema = z.object({
+  active: z.string().optional(),
+  public: z.string().optional(),
+})
+
+export const idParamSchema = z.object({
+  id: z.string().min(1),
+})
diff --git a/api/src/modules/offers/offer.service.test.ts b/api/src/modules/offers/offer.service.test.ts
new file mode 100644
index 0000000..9ddc09a
--- /dev/null
+++ b/api/src/modules/offers/offer.service.test.ts
@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./offer.repo', () => ({
+  findMany: vi.fn(),
+  findByIdOrThrow: vi.fn(),
+  create: vi.fn(),
+  findFirst: vi.fn(),
+  update: vi.fn(),
+  deleteMany: vi.fn(),
+  setActive: vi.fn(),
+  getStats: vi.fn(),
+}))
+
+import { NotFoundError } from '../../http/errors'
+import * as repo from './offer.repo'
+import { createOffer, deleteOffer, getOffer, getOfferStats, listOffers, setOfferActive, updateOffer } from './offer.service'
+
+describe('offer.service', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('keeps listing filters tenant-scoped and delegates them unchanged to the repository', async () => {
+    vi.mocked(repo.findMany).mockResolvedValue([{ id: 'offer_1' }] as never)
+
+    const result = await listOffers('company_1', { active: 'true', public: 'false' })
+
+    expect(repo.findMany).toHaveBeenCalledWith('company_1', { active: 'true', public: 'false' })
+    expect(result).toEqual([{ id: 'offer_1' }])
+  })
+
+  it('creates offers with separate offer data and vehicle assignment ids', async () => {
+    vi.mocked(repo.create).mockResolvedValue({ id: 'offer_1' } as never)
+
+    const payload = { title: 'Weekend deal', type: 'PERCENTAGE', discountValue: 15 }
+    await createOffer('company_1', payload, ['vehicle_1', 'vehicle_2'])
+
+    expect(repo.create).toHaveBeenCalledWith('company_1', payload, ['vehicle_1', 'vehicle_2'])
+  })
+
+  it('throws NotFoundError before updating an offer outside the tenant boundary', async () => {
+    vi.mocked(repo.findFirst).mockResolvedValue(null as never)
+
+    await expect(updateOffer('offer_1', 'company_1', { title: 'Nope' })).rejects.toBeInstanceOf(NotFoundError)
+    expect(repo.update).not.toHaveBeenCalled()
+  })
+
+  it('updates an existing offer and preserves explicit vehicle assignment updates', async () => {
+    vi.mocked(repo.findFirst).mockResolvedValue({ id: 'offer_1' } as never)
+    vi.mocked(repo.update).mockResolvedValue({ id: 'offer_1', title: 'Summer' } as never)
+
+    const result = await updateOffer('offer_1', 'company_1', { title: 'Summer' }, [])
+
+    expect(repo.update).toHaveBeenCalledWith('offer_1', { title: 'Summer' }, [])
+    expect(result).toEqual({ id: 'offer_1', title: 'Summer' })
+  })
+
+  it('activates, deactivates, deletes, and reads stats through tenant-scoped repository methods', async () => {
+    vi.mocked(repo.setActive).mockResolvedValue({ id: 'offer_1', isActive: true } as never)
+    vi.mocked(repo.deleteMany).mockResolvedValue({ count: 1 } as never)
+    vi.mocked(repo.getStats).mockResolvedValue({ redemptions: 3 } as never)
+    vi.mocked(repo.findByIdOrThrow).mockResolvedValue({ id: 'offer_1' } as never)
+
+    await getOffer('offer_1', 'company_1')
+    await setOfferActive('offer_1', 'company_1', true)
+    await deleteOffer('offer_1', 'company_1')
+    await getOfferStats('offer_1', 'company_1')
+
+    expect(repo.findByIdOrThrow).toHaveBeenCalledWith('offer_1', 'company_1')
+    expect(repo.setActive).toHaveBeenCalledWith('offer_1', 'company_1', true)
+    expect(repo.deleteMany).toHaveBeenCalledWith('offer_1', 'company_1')
+    expect(repo.getStats).toHaveBeenCalledWith('offer_1', 'company_1')
+  })
+})
diff --git a/api/src/modules/offers/offer.service.ts b/api/src/modules/offers/offer.service.ts
new file mode 100644
index 0000000..3f6ccc0
--- /dev/null
+++ b/api/src/modules/offers/offer.service.ts
@@ -0,0 +1,32 @@
+import { NotFoundError } from '../../http/errors'
+import * as repo from './offer.repo'
+
+export function listOffers(companyId: string, filters: { active?: string; public?: string }) {
+  return repo.findMany(companyId, filters)
+}
+
+export function getOffer(id: string, companyId: string) {
+  return repo.findByIdOrThrow(id, companyId)
+}
+
+export function createOffer(companyId: string, data: any, vehicleIds: string[]) {
+  return repo.create(companyId, data, vehicleIds)
+}
+
+export async function updateOffer(id: string, companyId: string, data: any, vehicleIds?: string[]) {
+  const existing = await repo.findFirst(id, companyId)
+  if (!existing) throw new NotFoundError('Offer not found')
+  return repo.update(id, data, vehicleIds)
+}
+
+export function deleteOffer(id: string, companyId: string) {
+  return repo.deleteMany(id, companyId)
+}
+
+export function setOfferActive(id: string, companyId: string, isActive: boolean) {
+  return repo.setActive(id, companyId, isActive)
+}
+
+export function getOfferStats(id: string, companyId: string) {
+  return repo.getStats(id, companyId)
+}
diff --git a/api/src/modules/operations.schemas.test.ts b/api/src/modules/operations.schemas.test.ts
new file mode 100644
index 0000000..6c7beaf
--- /dev/null
+++ b/api/src/modules/operations.schemas.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { createSchema as complaintCreateSchema, listQuerySchema as complaintListQuerySchema, updateSchema as complaintUpdateSchema } from './complaints/complaint.schemas'
+import { historyQuerySchema, preferencesSchema, unreadQuerySchema } from './notifications/notification.schemas'
+import { offerSchema } from './offers/offer.schemas'
+import { cancelSchema, checkoutSchema, startTrialSchema } from './subscriptions/subscription.schemas'
+import { inviteSchema, roleSchema } from './team/team.schemas'
+import { listQuerySchema as reviewListQuerySchema, replySchema } from './reviews/review.schemas'
+import { reportQuerySchema, summaryQuerySchema } from './analytics/analytics.schemas'
+
+describe('operational schemas', () => {
+  it('validates offers, complaints, and reviews without inventing impossible statuses', () => {
+    expect(offerSchema.parse({
+      title: 'Summer',
+      type: 'PERCENTAGE',
+      discountValue: 15,
+      validFrom: '2026-07-01T00:00:00.000Z',
+      validUntil: '2026-08-01T00:00:00.000Z',
+    })).toMatchObject({ appliesToAll: true, categories: [], vehicleIds: [], isActive: true, isPublic: true })
+    expect(offerSchema.safeParse({ title: '', type: 'PERCENTAGE', discountValue: 15, validFrom: 'bad', validUntil: 'bad' }).success).toBe(false)
+
+    expect(complaintCreateSchema.parse({ category: 'BILLING', subject: 'Wrong invoice' })).toMatchObject({ severity: 'LEVEL_1' })
+    expect(complaintUpdateSchema.safeParse({ status: 'IGNORED' }).success).toBe(false)
+    expect(complaintListQuerySchema.parse({ page: '2', pageSize: '25' })).toMatchObject({ page: 2, pageSize: 25 })
+    expect(replySchema.safeParse({ companyReply: '' }).success).toBe(false)
+    expect(reviewListQuerySchema.safeParse({ rating: '6' }).success).toBe(false)
+  })
+
+  it('validates subscriptions, team roles, notifications, and analytics query defaults', () => {
+    expect(checkoutSchema.safeParse({ plan: 'PRO', billingPeriod: 'MONTHLY', currency: 'MAD', provider: 'PAYPAL', successUrl: 'https://ok.example.test', failureUrl: 'https://fail.example.test' }).success).toBe(true)
+    expect(startTrialSchema.parse({ plan: 'STARTER', billingPeriod: 'ANNUAL' })).toMatchObject({ currency: 'MAD' })
+    expect(cancelSchema.parse({})).toEqual({ mode: 'period_end' })
+    expect(inviteSchema.safeParse({ firstName: 'A', lastName: 'B', email: 'agent@example.test', role: 'OWNER' }).success).toBe(false)
+    expect(roleSchema.safeParse({ role: 'AGENT' }).success).toBe(true)
+
+    expect(preferencesSchema.safeParse([{ notificationType: 'BOOKING', channel: 'EMAIL', enabled: true }]).success).toBe(true)
+    expect(unreadQuerySchema.parse({ unread: 'true' })).toEqual({ unread: 'true' })
+    expect(historyQuerySchema.parse({ limit: '100' })).toEqual({ limit: 100 })
+    expect(historyQuerySchema.safeParse({ limit: '501' }).success).toBe(false)
+    expect(summaryQuerySchema.parse({})).toEqual({ period: '30d' })
+    expect(reportQuerySchema.parse({})).toEqual({ format: 'JSON' })
+  })
+})
diff --git a/api/src/modules/payments/payment.repo.edge.test.ts b/api/src/modules/payments/payment.repo.edge.test.ts
new file mode 100644
index 0000000..fd95514
--- /dev/null
+++ b/api/src/modules/payments/payment.repo.edge.test.ts
@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    rentalPayment: { findMany: vi.fn(), findFirst: vi.fn(), findFirstOrThrow: vi.fn(), update: vi.fn(), updateMany: vi.fn(), create: vi.fn() },
+    reservation: { findFirstOrThrow: vi.fn(), update: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './payment.repo'
+
+describe('payment.repo edge queries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('loads recent company payments with reservation, customer and vehicle context', async () => {
+    await repo.findByCompany('company_1')
+
+    expect(prisma.rentalPayment.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      include: { reservation: { include: { customer: true, vehicle: true } } },
+      orderBy: { createdAt: 'desc' },
+      take: 100,
+    })
+  })
+
+  it('finds payment by id only within company and reservation scope', async () => {
+    await repo.findPaymentOrThrow('payment_1', 'company_1', 'reservation_1')
+
+    expect(prisma.rentalPayment.findFirstOrThrow).toHaveBeenCalledWith({
+      where: { id: 'payment_1', companyId: 'company_1', reservationId: 'reservation_1' },
+    })
+  })
+
+  it('marks a payment as succeeded with a fresh paidAt timestamp', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-08-01T12:00:00.000Z'))
+
+    await repo.markPaymentSucceeded('payment_1')
+
+    expect(prisma.rentalPayment.update).toHaveBeenCalledWith({
+      where: { id: 'payment_1' },
+      data: { status: 'SUCCEEDED', paidAt: new Date('2026-08-01T12:00:00.000Z') },
+    })
+
+    vi.useRealTimers()
+  })
+
+  it('increments paid amount and promotes reservation payment status to paid', async () => {
+    await repo.incrementReservationPaid('reservation_1', 2500)
+
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { paymentStatus: 'PAID', paidAmount: { increment: 2500 } },
+    })
+  })
+
+  it('maps partial refunds to the correct payment status', async () => {
+    await repo.setPaymentRefunded('payment_1', true)
+    await repo.setPaymentRefunded('payment_2', false)
+
+    expect(prisma.rentalPayment.update).toHaveBeenNthCalledWith(1, {
+      where: { id: 'payment_1' },
+      data: { status: 'PARTIALLY_REFUNDED' },
+    })
+    expect(prisma.rentalPayment.update).toHaveBeenNthCalledWith(2, {
+      where: { id: 'payment_2' },
+      data: { status: 'REFUNDED' },
+    })
+  })
+})
diff --git a/api/src/modules/payments/payment.repo.ts b/api/src/modules/payments/payment.repo.ts
new file mode 100644
index 0000000..b40514c
--- /dev/null
+++ b/api/src/modules/payments/payment.repo.ts
@@ -0,0 +1,77 @@
+import { prisma } from '../../lib/prisma'
+
+export function findByCompany(companyId: string) {
+  return prisma.rentalPayment.findMany({
+    where: { companyId },
+    include: { reservation: { include: { customer: true, vehicle: true } } },
+    orderBy: { createdAt: 'desc' },
+    take: 100,
+  })
+}
+
+export function findByReservation(reservationId: string, companyId: string) {
+  return prisma.rentalPayment.findMany({ where: { reservationId, companyId }, orderBy: { createdAt: 'desc' } })
+}
+
+export function findByAmanpay(transactionId: string) {
+  return prisma.rentalPayment.findFirst({ where: { amanpayTransactionId: transactionId } })
+}
+
+export function findByPaypal(captureId: string) {
+  return prisma.rentalPayment.findFirst({ where: { paypalCaptureId: captureId } })
+}
+
+export function findByPaypalForCompany(paypalOrderId: string, companyId: string) {
+  return prisma.rentalPayment.findFirstOrThrow({ where: { paypalCaptureId: paypalOrderId, companyId } })
+}
+
+export function findPaymentOrThrow(paymentId: string, companyId: string, reservationId: string) {
+  return prisma.rentalPayment.findFirstOrThrow({ where: { id: paymentId, companyId, reservationId } })
+}
+
+export function findReservationOrThrow(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { vehicle: true, customer: true },
+  })
+}
+
+export function findReservation(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({ where: { id, companyId } })
+}
+
+export function markPaymentSucceeded(id: string) {
+  return prisma.rentalPayment.update({ where: { id }, data: { status: 'SUCCEEDED', paidAt: new Date() } })
+}
+
+export function markPaymentFailed(query: { amanpayTransactionId?: string; paypalCaptureId?: string }) {
+  return prisma.rentalPayment.updateMany({ where: query, data: { status: 'FAILED' } })
+}
+
+export function incrementReservationPaid(reservationId: string, amount: number) {
+  return prisma.reservation.update({ where: { id: reservationId }, data: { paymentStatus: 'PAID', paidAmount: { increment: amount } } })
+}
+
+export function createPayment(data: {
+  companyId: string; reservationId: string; amount: number; currency: string
+  status: string; type: string; paymentProvider: string
+  amanpayTransactionId?: string | null; paypalCaptureId?: string | null; paymentMethod?: string; paidAt?: Date
+}) {
+  return prisma.rentalPayment.create({ data: data as any })
+}
+
+export function updatePaypalCapture(id: string, captureId: string) {
+  return prisma.rentalPayment.update({ where: { id }, data: { status: 'SUCCEEDED', paidAt: new Date(), paypalCaptureId: captureId } })
+}
+
+export function setReservationPaidAmount(reservationId: string, paidAmount: number, paymentStatus: string) {
+  return prisma.reservation.update({ where: { id: reservationId }, data: { paidAmount, paymentStatus: paymentStatus as any } })
+}
+
+export function setReservationRefunded(reservationId: string) {
+  return prisma.reservation.update({ where: { id: reservationId }, data: { paymentStatus: 'REFUNDED' } })
+}
+
+export function setPaymentRefunded(id: string, partial: boolean) {
+  return prisma.rentalPayment.update({ where: { id }, data: { status: partial ? 'PARTIALLY_REFUNDED' : 'REFUNDED' } })
+}
diff --git a/api/src/modules/payments/payment.routes.ts b/api/src/modules/payments/payment.routes.ts
new file mode 100644
index 0000000..0f8f4a7
--- /dev/null
+++ b/api/src/modules/payments/payment.routes.ts
@@ -0,0 +1,91 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody, parseParams } from '../../http/validate'
+import { ok } from '../../http/respond'
+import { getRawBodyString, parseRawJsonBody } from '../../http/webhooks'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as service from './payment.service'
+import { chargeSchema, manualPaymentSchema, refundSchema, capturePaypalSchema, reservationParamSchema, paymentParamSchema } from './payment.schemas'
+
+const router = Router()
+
+// ─── Webhooks (no auth) ────────────────────────────────────────
+
+router.post('/webhooks/amanpay', async (req, res, next) => {
+  try {
+    const rawBody   = getRawBodyString(req)
+    const payload   = parseRawJsonBody(req)
+    const signature = (req.headers['x-amanpay-signature'] as string) ?? ''
+    if (!amanpay.isConfigured() || !amanpay.verifyWebhookSignature(rawBody, signature)) {
+      return res.status(401).json({ error: 'invalid_signature' })
+    }
+    await service.handleAmanpayWebhook(payload, rawBody)
+    res.json({ received: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/webhooks/paypal', async (req, res, next) => {
+  try {
+    const rawBody = getRawBodyString(req)
+    const payload = parseRawJsonBody(req)
+    const isValid = await paypal.verifyWebhookEvent(req.headers as Record<string, string>, rawBody)
+    if (!paypal.isConfigured() || !isValid) return res.status(401).json({ error: 'invalid_signature' })
+    await service.handlePaypalWebhook(payload, rawBody)
+    res.json({ received: true })
+  } catch (err) { next(err) }
+})
+
+// ─── Authenticated ────────────────────────────────────────────
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/company', async (req, res, next) => {
+  try {
+    ok(res, await service.listByCompany(req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.get('/reservations/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(reservationParamSchema, req)
+    ok(res, await service.listByReservation(id, req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.post('/reservations/:id/charge', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id }   = parseParams(reservationParamSchema, req)
+    const body     = parseBody(chargeSchema, req)
+    ok(res, await service.initCharge(id, req.companyId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/reservations/:id/capture-paypal', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id }          = parseParams(reservationParamSchema, req)
+    const { paypalOrderId } = parseBody(capturePaypalSchema, req)
+    ok(res, await service.capturePaypal(id, req.companyId, paypalOrderId))
+  } catch (err) { next(err) }
+})
+
+router.post('/reservations/:id/manual', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(reservationParamSchema, req)
+    const body   = parseBody(manualPaymentSchema, req)
+    ok(res, await service.recordManualPayment(id, req.companyId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/reservations/:reservationId/payments/:paymentId/refund', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { reservationId, paymentId } = parseParams(paymentParamSchema, req)
+    const { amount, reason }           = parseBody(refundSchema, req)
+    ok(res, await service.refundPayment(reservationId, paymentId, req.companyId, amount, reason))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/payments/payment.schemas.edge.test.ts b/api/src/modules/payments/payment.schemas.edge.test.ts
new file mode 100644
index 0000000..1db37de
--- /dev/null
+++ b/api/src/modules/payments/payment.schemas.edge.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { capturePaypalSchema, chargeSchema, manualPaymentSchema, paymentParamSchema, refundSchema, reservationParamSchema } from './payment.schemas'
+
+describe('payment schemas edge cases', () => {
+  it('defaults charge and manual payment currency/type while rejecting unsupported providers', () => {
+    expect(chargeSchema.parse({ provider: 'PAYPAL', successUrl: 'https://ok.example.test', failureUrl: 'https://fail.example.test' })).toMatchObject({
+      provider: 'PAYPAL',
+      type: 'CHARGE',
+      currency: 'MAD',
+    })
+    expect(chargeSchema.safeParse({ provider: 'STRIPE', successUrl: 'https://ok.example.test', failureUrl: 'https://fail.example.test' }).success).toBe(false)
+    expect(manualPaymentSchema.parse({ amount: 500, paymentMethod: 'CASH' })).toMatchObject({ amount: 500, currency: 'MAD', type: 'CHARGE' })
+    expect(manualPaymentSchema.safeParse({ amount: 0, paymentMethod: 'CASH' }).success).toBe(false)
+  })
+
+  it('validates refund/capture/payment parameter payloads', () => {
+    expect(refundSchema.parse({})).toEqual({})
+    expect(refundSchema.safeParse({ amount: -1 }).success).toBe(false)
+    expect(capturePaypalSchema.safeParse({ paypalOrderId: 'order_1' }).success).toBe(true)
+    expect(capturePaypalSchema.safeParse({}).success).toBe(false)
+    expect(reservationParamSchema.safeParse({ id: '' }).success).toBe(false)
+    expect(paymentParamSchema.safeParse({ reservationId: 'reservation_1', paymentId: 'payment_1' }).success).toBe(true)
+  })
+})
diff --git a/api/src/modules/payments/payment.schemas.ts b/api/src/modules/payments/payment.schemas.ts
new file mode 100644
index 0000000..6fe5edf
--- /dev/null
+++ b/api/src/modules/payments/payment.schemas.ts
@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+export const chargeSchema = z.object({
+  provider:   z.enum(['AMANPAY', 'PAYPAL']),
+  type:       z.enum(['CHARGE', 'DEPOSIT']).default('CHARGE'),
+  currency:   z.literal('MAD').default('MAD'),
+  successUrl: z.string().url(),
+  failureUrl: z.string().url(),
+})
+
+export const manualPaymentSchema = z.object({
+  amount:        z.number().int().positive(),
+  currency:      z.literal('MAD').default('MAD'),
+  type:          z.enum(['CHARGE', 'DEPOSIT']).default('CHARGE'),
+  paymentMethod: z.enum(['CASH', 'CHECK', 'BANK_TRANSFER', 'CARD', 'PAYPAL']),
+})
+
+export const refundSchema = z.object({
+  amount: z.number().int().positive().optional(),
+  reason: z.string().optional(),
+})
+
+export const capturePaypalSchema = z.object({
+  paypalOrderId: z.string(),
+})
+
+export const reservationParamSchema = z.object({
+  id: z.string().min(1),
+})
+
+export const paymentParamSchema = z.object({
+  reservationId: z.string().min(1),
+  paymentId:     z.string().min(1),
+})
diff --git a/api/src/modules/payments/payment.service.test.ts b/api/src/modules/payments/payment.service.test.ts
new file mode 100644
index 0000000..6b5cca5
--- /dev/null
+++ b/api/src/modules/payments/payment.service.test.ts
@@ -0,0 +1,206 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn(),
+  createCheckout: vi.fn(),
+  refundTransaction: vi.fn(),
+}))
+
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn(),
+  createOrder: vi.fn(),
+  captureOrder: vi.fn(),
+  refundCapture: vi.fn(),
+}))
+
+vi.mock('./payment.repo', () => ({
+  findByCompany: vi.fn(),
+  findByReservation: vi.fn(),
+  findByAmanpay: vi.fn(),
+  findByPaypal: vi.fn(),
+  findByPaypalForCompany: vi.fn(),
+  findPaymentOrThrow: vi.fn(),
+  findReservationOrThrow: vi.fn(),
+  findReservation: vi.fn(),
+  markPaymentSucceeded: vi.fn(),
+  markPaymentFailed: vi.fn(),
+  incrementReservationPaid: vi.fn(),
+  createPayment: vi.fn(),
+  updatePaypalCapture: vi.fn(),
+  setReservationPaidAmount: vi.fn(),
+  setReservationRefunded: vi.fn(),
+  setPaymentRefunded: vi.fn(),
+}))
+
+import { ConflictError, ValidationError } from '../../http/errors'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './payment.repo'
+import {
+  capturePaypal,
+  handleAmanpayWebhook,
+  handlePaypalWebhook,
+  initCharge,
+  recordManualPayment,
+  refundPayment,
+} from './payment.service'
+
+const reservation = {
+  id: 'reservation_1',
+  companyId: 'company_1',
+  paymentStatus: 'UNPAID',
+  depositAmount: 300,
+  totalAmount: 1200,
+  paidAmount: 200,
+  vehicle: { make: 'Dacia', model: 'Duster' },
+  customer: { firstName: 'Nora', lastName: 'Driver', email: 'nora@example.com' },
+}
+
+describe('payment.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-08T10:15:00.000Z'))
+    delete process.env.API_URL
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    delete process.env.API_URL
+  })
+
+  it('creates an AmanPay deposit checkout using reservation, customer, and webhook details', async () => {
+    vi.mocked(repo.findReservationOrThrow).mockResolvedValue(reservation as never)
+    vi.mocked(amanpay.isConfigured).mockReturnValue(true)
+    vi.mocked(amanpay.createCheckout).mockResolvedValue({ checkoutUrl: 'https://pay.example/checkout', transactionId: 'aman_txn_1' } as never)
+    vi.mocked(repo.createPayment).mockResolvedValue({ id: 'payment_1', status: 'PENDING' } as never)
+
+    const result = await initCharge('reservation_1', 'company_1', {
+      provider: 'AMANPAY',
+      type: 'DEPOSIT',
+      currency: 'MAD',
+      successUrl: 'https://app.example/success',
+      failureUrl: 'https://app.example/failure',
+    })
+
+    expect(amanpay.createCheckout).toHaveBeenCalledWith(expect.objectContaining({
+      amount: 300,
+      currency: 'MAD',
+      orderId: 'reservation_1-DEPOSIT-1780913700000',
+      description: 'Deposit: Dacia Duster',
+      customerEmail: 'nora@example.com',
+      customerName: 'Nora Driver',
+      webhookUrl: 'http://localhost:4000/api/v1/payments/webhooks/amanpay',
+    }))
+    expect(repo.createPayment).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      reservationId: 'reservation_1',
+      amount: 300,
+      status: 'PENDING',
+      type: 'DEPOSIT',
+      paymentProvider: 'AMANPAY',
+      amanpayTransactionId: 'aman_txn_1',
+      paypalCaptureId: null,
+    }))
+    expect(result).toEqual({ payment: { id: 'payment_1', status: 'PENDING' }, checkoutUrl: 'https://pay.example/checkout' })
+  })
+
+  it('refuses to initialize a charge for a fully paid reservation before touching gateways', async () => {
+    vi.mocked(repo.findReservationOrThrow).mockResolvedValue({ ...reservation, paymentStatus: 'PAID' } as never)
+
+    await expect(initCharge('reservation_1', 'company_1', {
+      provider: 'PAYPAL',
+      type: 'CHARGE',
+      currency: 'MAD',
+      successUrl: 'https://app.example/success',
+      failureUrl: 'https://app.example/failure',
+    })).rejects.toBeInstanceOf(ConflictError)
+
+    expect(paypal.isConfigured).not.toHaveBeenCalled()
+    expect(repo.createPayment).not.toHaveBeenCalled()
+  })
+
+  it('records manual payments and marks the reservation as partially or fully paid from the balance math', async () => {
+    vi.mocked(repo.findReservation).mockResolvedValue({ id: 'reservation_1', totalAmount: 1000, paidAmount: 700 } as never)
+    vi.mocked(repo.createPayment).mockResolvedValue({ id: 'payment_1', amount: 300, status: 'SUCCEEDED' } as never)
+
+    const payment = await recordManualPayment('reservation_1', 'company_1', {
+      amount: 300,
+      currency: 'MAD',
+      type: 'CHARGE',
+      paymentMethod: 'CASH',
+    })
+
+    expect(repo.createPayment).toHaveBeenCalledWith(expect.objectContaining({
+      status: 'SUCCEEDED',
+      paymentProvider: 'AMANPAY',
+      paymentMethod: 'CASH',
+      paidAt: expect.any(Date),
+    }))
+    expect(repo.setReservationPaidAmount).toHaveBeenCalledWith('reservation_1', 1000, 'PAID')
+    expect(payment).toEqual({ id: 'payment_1', amount: 300, status: 'SUCCEEDED' })
+  })
+
+  it('rejects manual overpayments instead of silently corrupting the reservation balance', async () => {
+    vi.mocked(repo.findReservation).mockResolvedValue({ id: 'reservation_1', totalAmount: 1000, paidAmount: 950 } as never)
+
+    await expect(recordManualPayment('reservation_1', 'company_1', {
+      amount: 100,
+      currency: 'MAD',
+      type: 'CHARGE',
+      paymentMethod: 'BANK_TRANSFER',
+    })).rejects.toBeInstanceOf(ValidationError)
+
+    expect(repo.createPayment).not.toHaveBeenCalled()
+    expect(repo.setReservationPaidAmount).not.toHaveBeenCalled()
+  })
+
+  it('applies paid AmanPay and denied PayPal webhook events to the matching records', async () => {
+    vi.mocked(repo.findByAmanpay).mockResolvedValue({ id: 'payment_1', reservationId: 'reservation_1', amount: 450 } as never)
+    vi.mocked(repo.findByPaypal).mockResolvedValue({ id: 'payment_2', reservationId: 'reservation_2', amount: 500 } as never)
+
+    await handleAmanpayWebhook({ transaction_id: 'aman_txn_1', status: 'paid' })
+    await handlePaypalWebhook({ event_type: 'PAYMENT.CAPTURE.COMPLETED', resource: { id: 'paypal_capture_1' } })
+    await handlePaypalWebhook({ event_type: 'PAYMENT.CAPTURE.DENIED', resource: { id: 'paypal_capture_2' } })
+
+    expect(repo.markPaymentSucceeded).toHaveBeenCalledWith('payment_1')
+    expect(repo.incrementReservationPaid).toHaveBeenCalledWith('reservation_1', 450)
+    expect(repo.markPaymentSucceeded).toHaveBeenCalledWith('payment_2')
+    expect(repo.incrementReservationPaid).toHaveBeenCalledWith('reservation_2', 500)
+    expect(repo.markPaymentFailed).toHaveBeenCalledWith({ paypalCaptureId: 'paypal_capture_2' })
+  })
+
+  it('captures PayPal orders, stores the capture id, and increments the original reservation payment', async () => {
+    vi.mocked(repo.findByPaypalForCompany).mockResolvedValue({ id: 'payment_1', reservationId: 'reservation_1', amount: 800 } as never)
+    vi.mocked(paypal.captureOrder).mockResolvedValue({ purchase_units: [{ payments: { captures: [{ id: 'capture_123' }] } }] } as never)
+    vi.mocked(repo.updatePaypalCapture).mockResolvedValue({ id: 'payment_1', status: 'SUCCEEDED', paypalCaptureId: 'capture_123' } as never)
+
+    const result = await capturePaypal('reservation_1', 'company_1', 'order_123')
+
+    expect(repo.findByPaypalForCompany).toHaveBeenCalledWith('order_123', 'company_1')
+    expect(repo.updatePaypalCapture).toHaveBeenCalledWith('payment_1', 'capture_123')
+    expect(repo.incrementReservationPaid).toHaveBeenCalledWith('reservation_1', 800)
+    expect(result).toEqual({ id: 'payment_1', status: 'SUCCEEDED', paypalCaptureId: 'capture_123' })
+  })
+
+  it('refunds gateway payments and only marks the reservation refunded on full refunds', async () => {
+    vi.mocked(repo.findPaymentOrThrow).mockResolvedValue({
+      id: 'payment_1',
+      reservationId: 'reservation_1',
+      status: 'SUCCEEDED',
+      amount: 1000,
+      currency: 'MAD',
+      paymentProvider: 'PAYPAL',
+      paypalCaptureId: 'capture_123',
+      amanpayTransactionId: null,
+    } as never)
+    vi.mocked(repo.setPaymentRefunded).mockResolvedValue({ id: 'payment_1', status: 'PARTIALLY_REFUNDED' } as never)
+
+    const result = await refundPayment('reservation_1', 'payment_1', 'company_1', 250, 'Customer request')
+
+    expect(paypal.refundCapture).toHaveBeenCalledWith('capture_123', 250, 'MAD', 'Customer request')
+    expect(repo.setPaymentRefunded).toHaveBeenCalledWith('payment_1', true)
+    expect(repo.setReservationRefunded).not.toHaveBeenCalled()
+    expect(result).toEqual({ id: 'payment_1', status: 'PARTIALLY_REFUNDED' })
+  })
+})
diff --git a/api/src/modules/payments/payment.service.ts b/api/src/modules/payments/payment.service.ts
new file mode 100644
index 0000000..dd41846
--- /dev/null
+++ b/api/src/modules/payments/payment.service.ts
@@ -0,0 +1,142 @@
+import { ConflictError, ValidationError } from '../../http/errors'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './payment.repo'
+import { getWebhookEventId, processWebhookOnce } from '../../security/webhookIdempotency'
+
+export function listByCompany(companyId: string) {
+  return repo.findByCompany(companyId)
+}
+
+export function listByReservation(reservationId: string, companyId: string) {
+  return repo.findByReservation(reservationId, companyId)
+}
+
+async function applyAmanpayWebhook(event: any) {
+  const transactionId = event.transaction_id ?? event.id
+  const status        = event.status?.toUpperCase()
+  if (status === 'PAID' || status === 'SUCCEEDED') {
+    const payment = await repo.findByAmanpay(transactionId)
+    if (payment && payment.status !== 'SUCCEEDED') {
+      await repo.markPaymentSucceeded(payment.id)
+      await repo.incrementReservationPaid(payment.reservationId, payment.amount)
+    }
+  } else if (status === 'FAILED') {
+    await repo.markPaymentFailed({ amanpayTransactionId: transactionId })
+  }
+}
+
+async function applyPaypalWebhook(event: any) {
+  const eventType = event.event_type as string
+  if (eventType === 'PAYMENT.CAPTURE.COMPLETED') {
+    const captureId = event.resource?.id as string
+    const payment   = await repo.findByPaypal(captureId)
+    if (payment && payment.status !== 'SUCCEEDED') {
+      await repo.markPaymentSucceeded(payment.id)
+      await repo.incrementReservationPaid(payment.reservationId, payment.amount)
+    }
+  } else if (eventType === 'PAYMENT.CAPTURE.DENIED') {
+    await repo.markPaymentFailed({ paypalCaptureId: event.resource?.id })
+  }
+}
+
+export async function handleAmanpayWebhook(event: any, rawBody: string | Buffer = JSON.stringify(event)) {
+  return processWebhookOnce({
+    provider: 'amanpay:payments',
+    providerEventId: getWebhookEventId('amanpay', event),
+    eventType: String(event.status ?? 'unknown'),
+    rawBody,
+    handle: () => applyAmanpayWebhook(event),
+  })
+}
+
+export async function handlePaypalWebhook(event: any, rawBody: string | Buffer = JSON.stringify(event)) {
+  return processWebhookOnce({
+    provider: 'paypal:payments',
+    providerEventId: getWebhookEventId('paypal', event),
+    eventType: String(event.event_type ?? 'unknown'),
+    rawBody,
+    handle: () => applyPaypalWebhook(event),
+  })
+}
+
+export async function initCharge(reservationId: string, companyId: string, body: {
+  provider: 'AMANPAY' | 'PAYPAL'; type: 'CHARGE' | 'DEPOSIT'
+  currency: 'MAD'; successUrl: string; failureUrl: string
+}) {
+  const reservation = await repo.findReservationOrThrow(reservationId, companyId)
+  if (reservation.paymentStatus === 'PAID') throw new ConflictError('Reservation is already fully paid')
+
+  const amount      = body.type === 'DEPOSIT' ? reservation.depositAmount : reservation.totalAmount
+  const description = `${body.type === 'DEPOSIT' ? 'Deposit' : 'Rental'}: ${reservation.vehicle.make} ${reservation.vehicle.model}`
+  const orderId     = `${reservationId}-${body.type}-${Date.now()}`
+  const webhookBase = process.env.API_URL ?? 'http://localhost:4000'
+
+  let checkoutUrl: string
+  let amanpayTransactionId: string | null = null
+  let paypalCaptureId: string | null      = null
+
+  if (body.provider === 'AMANPAY') {
+    if (!amanpay.isConfigured()) throw new ValidationError('AmanPay is not configured')
+    const result = await amanpay.createCheckout({
+      amount, currency: body.currency, orderId, description,
+      customerEmail: reservation.customer.email,
+      customerName:  `${reservation.customer.firstName} ${reservation.customer.lastName}`,
+      successUrl: body.successUrl, failureUrl: body.failureUrl,
+      webhookUrl: `${webhookBase}/api/v1/payments/webhooks/amanpay`,
+    })
+    checkoutUrl          = result.checkoutUrl
+    amanpayTransactionId = result.transactionId
+  } else {
+    if (!paypal.isConfigured()) throw new ValidationError('PayPal is not configured')
+    const result = await paypal.createOrder({ amount, currency: body.currency, orderId, description, returnUrl: body.successUrl, cancelUrl: body.failureUrl })
+    checkoutUrl     = result.approveUrl
+    paypalCaptureId = result.orderId
+  }
+
+  const payment = await repo.createPayment({ companyId, reservationId, amount, currency: body.currency, status: 'PENDING', type: body.type, paymentProvider: body.provider, amanpayTransactionId, paypalCaptureId })
+  return { payment, checkoutUrl }
+}
+
+export async function capturePaypal(reservationId: string, companyId: string, paypalOrderId: string) {
+  const payment   = await repo.findByPaypalForCompany(paypalOrderId, companyId)
+  const capture   = await paypal.captureOrder(paypalOrderId) as Record<string, any>
+  const captureId = capture.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? paypalOrderId
+  const updated   = await repo.updatePaypalCapture(payment.id, captureId)
+  await repo.incrementReservationPaid(payment.reservationId, payment.amount)
+  return updated
+}
+
+export async function recordManualPayment(reservationId: string, companyId: string, body: {
+  amount: number; currency: string; type: string; paymentMethod: string
+}) {
+  const reservation   = await repo.findReservation(reservationId, companyId)
+  const remaining     = Math.max(reservation.totalAmount - reservation.paidAmount, 0)
+  if (remaining <= 0)          throw new ConflictError('Reservation is already fully paid')
+  if (body.amount > remaining) throw new ValidationError('Payment amount exceeds remaining balance')
+
+  const payment      = await repo.createPayment({ companyId, reservationId, amount: body.amount, currency: body.currency, status: 'SUCCEEDED', type: body.type, paymentProvider: body.paymentMethod === 'PAYPAL' ? 'PAYPAL' : 'AMANPAY', paymentMethod: body.paymentMethod, paidAt: new Date() })
+  const newPaidAmount = reservation.paidAmount + body.amount
+  await repo.setReservationPaidAmount(reservationId, newPaidAmount, newPaidAmount >= reservation.totalAmount ? 'PAID' : 'PARTIAL')
+  return payment
+}
+
+export async function refundPayment(reservationId: string, paymentId: string, companyId: string, amount?: number, reason?: string) {
+  const payment = await repo.findPaymentOrThrow(paymentId, companyId, reservationId)
+  if (payment.status !== 'SUCCEEDED') throw new ValidationError('Only succeeded payments can be refunded')
+  if (!payment.amanpayTransactionId && !payment.paypalCaptureId) throw new ValidationError('Manual payments must be refunded outside the online gateway flow')
+
+  const refundAmount = amount ?? payment.amount
+  if (payment.paymentProvider === 'AMANPAY') {
+    if (!payment.amanpayTransactionId) throw new Error('No AmanPay transaction ID')
+    await amanpay.refundTransaction(payment.amanpayTransactionId, refundAmount, reason)
+  } else {
+    if (!payment.paypalCaptureId) throw new Error('No PayPal capture ID')
+    await paypal.refundCapture(payment.paypalCaptureId, refundAmount, payment.currency, reason)
+  }
+
+  const isPartial = refundAmount < payment.amount
+  const updated   = await repo.setPaymentRefunded(payment.id, isPartial)
+  if (!isPartial) await repo.setReservationRefunded(payment.reservationId)
+  return updated
+}
diff --git a/api/src/modules/reservations/reservation.additional-driver.service.test.ts b/api/src/modules/reservations/reservation.additional-driver.service.test.ts
new file mode 100644
index 0000000..5500737
--- /dev/null
+++ b/api/src/modules/reservations/reservation.additional-driver.service.test.ts
@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../services/additionalDriverService', () => ({
+  applyAdditionalDriversToReservation: vi.fn(),
+  calculateAdditionalDriverCharge: vi.fn(),
+}))
+
+vi.mock('./reservation.repo', () => ({
+  findAdditionalDriver: vi.fn(),
+  updateAdditionalDriver: vi.fn(),
+}))
+
+import * as repo from './reservation.repo'
+import { approveAdditionalDriver } from './reservation.additional-driver.service'
+
+describe('reservation.additional-driver.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+  })
+
+  it('records manager approval metadata when an additional driver is approved', async () => {
+    vi.mocked(repo.findAdditionalDriver).mockResolvedValue({ id: 'driver_1', approvalNote: 'License expiring' } as never)
+    vi.mocked(repo.updateAdditionalDriver).mockResolvedValue({ id: 'driver_1', approvedBy: 'manager_1' } as never)
+
+    await approveAdditionalDriver('reservation_1', 'driver_1', 'company_1', true, 'Approved after review', 'manager_1')
+
+    expect(repo.findAdditionalDriver).toHaveBeenCalledWith('driver_1', 'reservation_1', 'company_1')
+    expect(repo.updateAdditionalDriver).toHaveBeenCalledWith('driver_1', {
+      approvedAt: new Date('2026-06-09T12:00:00.000Z'),
+      approvedBy: 'manager_1',
+      approvalNote: 'Approved after review',
+    })
+  })
+
+  it('clears approval metadata on rejection while preserving the prior note if no new note is supplied', async () => {
+    vi.mocked(repo.findAdditionalDriver).mockResolvedValue({ id: 'driver_1', approvalNote: 'Manual review needed' } as never)
+
+    await approveAdditionalDriver('reservation_1', 'driver_1', 'company_1', false, undefined, 'manager_1')
+
+    expect(repo.updateAdditionalDriver).toHaveBeenCalledWith('driver_1', {
+      approvedAt: null,
+      approvedBy: null,
+      approvalNote: 'Manual review needed',
+    })
+  })
+})
diff --git a/api/src/modules/reservations/reservation.additional-driver.service.ts b/api/src/modules/reservations/reservation.additional-driver.service.ts
new file mode 100644
index 0000000..84f0139
--- /dev/null
+++ b/api/src/modules/reservations/reservation.additional-driver.service.ts
@@ -0,0 +1,19 @@
+export { applyAdditionalDriversToReservation, calculateAdditionalDriverCharge } from '../../services/additionalDriverService'
+
+import * as repo from './reservation.repo'
+
+export async function approveAdditionalDriver(
+  reservationId: string,
+  driverId: string,
+  companyId: string,
+  approved: boolean,
+  note: string | undefined,
+  approvedBy: string,
+) {
+  const driver = await repo.findAdditionalDriver(driverId, reservationId, companyId)
+  return repo.updateAdditionalDriver(driver.id, {
+    approvedAt:   approved ? new Date() : null,
+    approvedBy:   approved ? approvedBy : null,
+    approvalNote: note ?? driver.approvalNote,
+  })
+}
diff --git a/api/src/modules/reservations/reservation.document.service.test.ts b/api/src/modules/reservations/reservation.document.service.test.ts
new file mode 100644
index 0000000..e77a16f
--- /dev/null
+++ b/api/src/modules/reservations/reservation.document.service.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    $transaction: vi.fn(),
+    contractSettings: { upsert: vi.fn() },
+  },
+}))
+
+import { buildReservationInvoiceLineItems, formatDocumentNumber } from './reservation.document.service'
+
+describe('reservation document helpers', () => {
+  it('formats contract and invoice sequence numbers with stable padding', () => {
+    expect(formatDocumentNumber('CTR', 1)).toBe('CTR-000001')
+    expect(formatDocumentNumber('INV', 42)).toBe('INV-000042')
+    expect(formatDocumentNumber('INV', 1234567)).toBe('INV-1234567')
+  })
+
+  it('builds invoice line items from rental, insurance, additional drivers, pricing adjustments, discounts, and deposits', () => {
+    const result = buildReservationInvoiceLineItems({
+      dailyRate: 300,
+      totalDays: 4,
+      discountAmount: 120,
+      depositAmount: 1000,
+      pricingRulesApplied: [
+        { name: 'Young driver fee', amount: 80, type: 'SURCHARGE' },
+        { name: '', amount: -50, type: 'DISCOUNT' },
+      ],
+      insurances: [
+        { id: 'ins_1', policyName: 'Collision waiver', chargeType: 'PER_DAY', chargeValue: 20, totalCharge: 80 },
+        { id: 'ins_2', policyName: 'Roadside assistance', chargeType: 'PER_RENTAL', chargeValue: 45, totalCharge: 45 },
+      ],
+      additionalDrivers: [
+        { id: 'driver_1', firstName: 'Sam', lastName: 'Driver', totalCharge: 70 },
+        { id: 'driver_2', firstName: 'Free', lastName: 'Driver', totalCharge: 0 },
+      ],
+      vehicle: { year: 2024, make: 'Toyota', model: 'Corolla' },
+    })
+
+    expect(result).toEqual([
+      { description: '2024 Toyota Corolla', qty: 4, unitPrice: 300, total: 1200, category: 'RENTAL' },
+      { description: 'Collision waiver', qty: 4, unitPrice: 20, total: 80, category: 'INSURANCE' },
+      { description: 'Roadside assistance', qty: 1, unitPrice: 45, total: 45, category: 'INSURANCE' },
+      { description: 'Additional driver - Sam Driver', qty: 1, unitPrice: 70, total: 70, category: 'ADDITIONAL_DRIVER' },
+      { description: 'Young driver fee', qty: 1, unitPrice: 80, total: 80, category: 'PRICING_RULE' },
+      { description: 'Pricing adjustment 2', qty: 1, unitPrice: -50, total: -50, category: 'PRICING_RULE' },
+      { description: 'Discount', qty: 1, unitPrice: -120, total: -120, category: 'DISCOUNT' },
+      { description: 'Security deposit', qty: 1, unitPrice: 1000, total: 1000, category: 'DEPOSIT' },
+    ])
+  })
+
+  it('omits zero-value optional invoice lines', () => {
+    const result = buildReservationInvoiceLineItems({
+      dailyRate: 100,
+      totalDays: 2,
+      discountAmount: 0,
+      depositAmount: 0,
+      pricingRulesApplied: null,
+      insurances: [],
+      additionalDrivers: [{ id: 'driver_1', firstName: 'No', lastName: 'Charge', totalCharge: 0 }],
+      vehicle: { year: 2020, make: 'Dacia', model: 'Logan' },
+    })
+
+    expect(result).toEqual([
+      { description: '2020 Dacia Logan', qty: 2, unitPrice: 100, total: 200, category: 'RENTAL' },
+    ])
+  })
+})
diff --git a/api/src/modules/reservations/reservation.document.service.ts b/api/src/modules/reservations/reservation.document.service.ts
new file mode 100644
index 0000000..445f1e1
--- /dev/null
+++ b/api/src/modules/reservations/reservation.document.service.ts
@@ -0,0 +1,263 @@
+import { prisma } from '../../lib/prisma'
+import * as repo from './reservation.repo'
+
+export function formatDocumentNumber(prefix: string, sequence: number): string {
+  return `${prefix}-${String(sequence).padStart(6, '0')}`
+}
+
+export async function ensureReservationDocumentNumbers(companyId: string, reservationId: string) {
+  return prisma.$transaction(async (tx: any) => {
+    const reservation = await tx.reservation.findFirstOrThrow({
+      where: { id: reservationId, companyId },
+      select: { id: true, contractNumber: true, invoiceNumber: true },
+    })
+    if (reservation.contractNumber && reservation.invoiceNumber) return reservation
+
+    const settings = await tx.contractSettings.upsert({
+      where: { companyId },
+      update: {},
+      create: { companyId },
+    })
+
+    const data: { contractNumber?: string; invoiceNumber?: string } = {}
+    const settingsUpdate: { lastContractSeq?: number; lastInvoiceSeq?: number } = {}
+
+    if (!reservation.contractNumber) {
+      const nextSeq = settings.lastContractSeq + 1
+      data.contractNumber = formatDocumentNumber(settings.contractPrefix, nextSeq)
+      settingsUpdate.lastContractSeq = nextSeq
+    }
+    if (!reservation.invoiceNumber) {
+      const nextSeq = settings.lastInvoiceSeq + 1
+      data.invoiceNumber = formatDocumentNumber(settings.invoicePrefix, nextSeq)
+      settingsUpdate.lastInvoiceSeq = nextSeq
+    }
+
+    if (Object.keys(settingsUpdate).length > 0) {
+      await tx.contractSettings.update({ where: { companyId }, data: settingsUpdate })
+    }
+
+    return tx.reservation.update({
+      where: { id: reservationId },
+      data,
+      select: { id: true, contractNumber: true, invoiceNumber: true },
+    })
+  })
+}
+
+export function buildReservationInvoiceLineItems(reservation: {
+  dailyRate: number
+  totalDays: number
+  discountAmount: number
+  depositAmount: number
+  pricingRulesApplied: Array<{ name?: string; amount?: number; type?: string }> | null
+  insurances: Array<{ id: string; policyName: string; chargeType: string; chargeValue: number; totalCharge: number }>
+  additionalDrivers: Array<{ id: string; firstName: string; lastName: string; totalCharge: number }>
+  vehicle: { year: number; make: string; model: string }
+}) {
+  const baseAmount = reservation.dailyRate * reservation.totalDays
+  return [
+    {
+      description: `${reservation.vehicle.year} ${reservation.vehicle.make} ${reservation.vehicle.model}`,
+      qty: reservation.totalDays,
+      unitPrice: reservation.dailyRate,
+      total: baseAmount,
+      category: 'RENTAL',
+    },
+    ...reservation.insurances.map((ins) => ({
+      description: ins.policyName,
+      qty: ins.chargeType === 'PER_DAY' ? reservation.totalDays : 1,
+      unitPrice: ins.chargeType === 'PER_DAY' ? ins.chargeValue : ins.totalCharge,
+      total: ins.totalCharge,
+      category: 'INSURANCE',
+    })),
+    ...reservation.additionalDrivers
+      .filter((d) => d.totalCharge > 0)
+      .map((d) => ({
+        description: `Additional driver - ${d.firstName} ${d.lastName}`,
+        qty: 1,
+        unitPrice: d.totalCharge,
+        total: d.totalCharge,
+        category: 'ADDITIONAL_DRIVER',
+      })),
+    ...((reservation.pricingRulesApplied ?? []).map((rule, i) => ({
+      description: rule.name?.trim() || `Pricing adjustment ${i + 1}`,
+      qty: 1,
+      unitPrice: Number(rule.amount ?? 0),
+      total: Number(rule.amount ?? 0),
+      category: 'PRICING_RULE',
+    }))),
+    ...(reservation.discountAmount > 0 ? [{
+      description: 'Discount',
+      qty: 1,
+      unitPrice: -reservation.discountAmount,
+      total: -reservation.discountAmount,
+      category: 'DISCOUNT',
+    }] : []),
+    ...(reservation.depositAmount > 0 ? [{
+      description: 'Security deposit',
+      qty: 1,
+      unitPrice: reservation.depositAmount,
+      total: reservation.depositAmount,
+      category: 'DEPOSIT',
+    }] : []),
+  ]
+}
+
+export async function getContract(id: string, companyId: string) {
+  await ensureReservationDocumentNumbers(companyId, id)
+
+  const reservation = await repo.findForContract(id, companyId)
+  const contractSettings = reservation.company.contractSettings ?? await prisma.contractSettings.upsert({
+    where: { companyId },
+    update: {},
+    create: { companyId },
+  })
+
+  const extras = reservation.extras && typeof reservation.extras === 'object' && !Array.isArray(reservation.extras)
+    ? (reservation.extras as Record<string, unknown>)
+    : {}
+
+  const invoiceLineItems = buildReservationInvoiceLineItems({
+    dailyRate: reservation.dailyRate,
+    totalDays: reservation.totalDays,
+    discountAmount: reservation.discountAmount,
+    depositAmount: reservation.depositAmount,
+    pricingRulesApplied: Array.isArray(reservation.pricingRulesApplied)
+      ? (reservation.pricingRulesApplied as any)
+      : [],
+    insurances: reservation.insurances,
+    additionalDrivers: reservation.additionalDrivers,
+    vehicle: reservation.vehicle,
+  })
+
+  const subtotal   = invoiceLineItems.reduce((s, i) => s + i.total, 0)
+  const taxes      = contractSettings.showTax && contractSettings.taxRate
+    ? [{ label: contractSettings.taxLabel?.trim() || 'Tax', rate: contractSettings.taxRate, amount: Math.round(subtotal * contractSettings.taxRate / 100) }]
+    : []
+  const taxTotal   = taxes.reduce((s, t) => s + t.amount, 0)
+  const grandTotal = subtotal + taxTotal
+  const amountPaid = reservation.rentalPayments
+    .filter((p: any) => p.status === 'SUCCEEDED')
+    .reduce((s: number, p: any) => s + p.amount, 0)
+
+  const checkInInspection  = reservation.inspections.find((i: any) => i.type === 'CHECKIN') ?? null
+  const checkOutInspection = reservation.inspections.find((i: any) => i.type === 'CHECKOUT') ?? null
+
+  return {
+    reservationId: reservation.id,
+    contractLocale: reservation.company.brand?.defaultLocale ?? 'en',
+    contractNumber: reservation.contractNumber,
+    invoiceNumber:  reservation.invoiceNumber,
+    generatedAt:    new Date().toISOString(),
+    status:         reservation.status,
+    paymentStatus:  reservation.paymentStatus,
+    paymentMode:    typeof extras.paymentMode === 'string' ? extras.paymentMode : null,
+    notes:          reservation.notes,
+    company: {
+      name:               reservation.company.brand?.displayName ?? reservation.company.name,
+      legalName:          contractSettings.legalName || reservation.company.name,
+      email:              reservation.company.brand?.publicEmail ?? reservation.company.email,
+      phone:              reservation.company.brand?.publicPhone ?? reservation.company.phone,
+      address:            reservation.company.brand?.publicAddress ?? reservation.company.address ?? null,
+      city:               reservation.company.brand?.publicCity ?? null,
+      country:            reservation.company.brand?.publicCountry ?? null,
+      registrationNumber: contractSettings.registrationNumber,
+      taxId:              contractSettings.taxId,
+      logoUrl:            reservation.company.brand?.logoUrl ?? null,
+    },
+    driver: {
+      firstName:       reservation.customer.firstName,
+      lastName:        reservation.customer.lastName,
+      email:           reservation.customer.email,
+      phone:           reservation.customer.phone,
+      dateOfBirth:     reservation.customer.dateOfBirth,
+      driverLicense:   reservation.customer.driverLicense,
+      licenseCountry:  reservation.customer.licenseCountry,
+      licenseCategory: reservation.customer.licenseCategory,
+      licenseIssuedAt: reservation.customer.licenseIssuedAt,
+      licenseExpiry:   reservation.customer.licenseExpiry,
+      nationality:     reservation.customer.nationality,
+    },
+    additionalDrivers: reservation.additionalDrivers.map((d: any) => ({
+      id: d.id, firstName: d.firstName, lastName: d.lastName,
+      email: d.email, phone: d.phone, driverLicense: d.driverLicense,
+      licenseIssuedAt: d.licenseIssuedAt, licenseExpiry: d.licenseExpiry,
+      licenseCountry: d.nationality, dateOfBirth: d.dateOfBirth, totalCharge: d.totalCharge,
+    })),
+    vehicle: {
+      make: reservation.vehicle.make, model: reservation.vehicle.model, year: reservation.vehicle.year,
+      color: reservation.vehicle.color, licensePlate: reservation.vehicle.licensePlate,
+      vin: reservation.vehicle.vin, category: reservation.vehicle.category,
+    },
+    rentalPeriod: {
+      startDate: reservation.startDate, endDate: reservation.endDate, totalDays: reservation.totalDays,
+      pickupLocation: reservation.pickupLocation, returnLocation: reservation.returnLocation,
+    },
+    insurance: {
+      total: reservation.insuranceTotal,
+      policies: reservation.insurances.map((ins: any) => ({
+        id: ins.id, name: ins.policyName, chargeType: ins.chargeType,
+        unitPrice: ins.chargeValue, totalCharge: ins.totalCharge,
+      })),
+    },
+    inspections: { checkIn: checkInInspection, checkOut: checkOutInspection },
+    terms: {
+      terms:             contractSettings.terms,
+      fuelPolicy:        contractSettings.fuelPolicy,
+      fuelPolicyType:    contractSettings.fuelPolicyType,
+      depositPolicy:     contractSettings.depositPolicy,
+      lateFeePolicy:     contractSettings.lateFeePolicy,
+      damagePolicy:      contractSettings.damagePolicy,
+      footerNote:        contractSettings.contractFooterNote,
+      signatureRequired: contractSettings.signatureRequired,
+    },
+    invoice: {
+      currency: reservation.company.accountingSettings?.currency ?? reservation.company.brand?.defaultCurrency ?? 'MAD',
+      lineItems: invoiceLineItems,
+      subtotal, taxes, taxTotal, total: grandTotal, amountPaid,
+      balanceDue: grandTotal - amountPaid,
+      payments: reservation.rentalPayments.map((p: any) => ({
+        id: p.id, amount: p.amount, currency: p.currency, type: p.type,
+        status: p.status, provider: p.paymentProvider,
+        paymentMethod: p.paymentMethod, paidAt: p.paidAt, createdAt: p.createdAt,
+      })),
+    },
+  }
+}
+
+export async function getBilling(id: string, companyId: string) {
+  const reservation = await repo.findForBilling(id, companyId)
+  const baseAmount = reservation.dailyRate * reservation.totalDays
+  const lineItems = [
+    {
+      description: `${reservation.vehicle.year} ${reservation.vehicle.make} ${reservation.vehicle.model} — ${reservation.totalDays} day(s)`,
+      qty: reservation.totalDays, unitPrice: reservation.dailyRate, total: baseAmount, category: 'RENTAL',
+    },
+    ...reservation.insurances.map((ins: any) => ({
+      description: ins.policyName,
+      qty: ins.chargeType === 'PER_DAY' ? reservation.totalDays : 1,
+      unitPrice: ins.chargeType === 'PER_DAY' ? ins.chargeValue : ins.totalCharge,
+      total: ins.totalCharge, category: 'INSURANCE',
+    })),
+    ...reservation.additionalDrivers
+      .filter((d: any) => d.totalCharge > 0)
+      .map((d: any) => ({
+        description: `Additional Driver — ${d.firstName} ${d.lastName}`,
+        qty: 1, unitPrice: d.totalCharge, total: d.totalCharge, category: 'ADDITIONAL_DRIVER',
+      })),
+    ...(reservation.depositAmount > 0 ? [{
+      description: 'Security Deposit (refundable)',
+      qty: 1, unitPrice: reservation.depositAmount, total: reservation.depositAmount, category: 'DEPOSIT',
+    }] : []),
+  ]
+  const grandTotal = lineItems.reduce((s, i) => s + i.total, 0) - reservation.discountAmount
+
+  return {
+    lineItems,
+    discountAmount:      reservation.discountAmount,
+    pricingRulesApplied: reservation.pricingRulesApplied,
+    pricingRulesTotal:   reservation.pricingRulesTotal,
+    grandTotal,
+  }
+}
diff --git a/api/src/modules/reservations/reservation.inspection.service.test.ts b/api/src/modules/reservations/reservation.inspection.service.test.ts
new file mode 100644
index 0000000..3c3e244
--- /dev/null
+++ b/api/src/modules/reservations/reservation.inspection.service.test.ts
@@ -0,0 +1,123 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    damageInspection: { upsert: vi.fn() },
+    damageReport: { upsert: vi.fn() },
+    reservation: { update: vi.fn() },
+  },
+}))
+
+vi.mock('./reservation.repo', () => ({
+  findInspections: vi.fn(),
+  findForInspection: vi.fn(),
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './reservation.repo'
+import { getInspections, upsertInspection } from './reservation.inspection.service'
+
+const editableReservation = {
+  id: 'reservation_1',
+  status: 'CONFIRMED',
+  contractNumber: null,
+  invoiceNumber: null,
+  extras: {},
+  customer: { firstName: 'Mina', lastName: 'Alami' },
+}
+
+describe('reservation.inspection.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+  })
+
+  it('delegates inspection lookup to the repository with tenant scoping', async () => {
+    vi.mocked(repo.findInspections).mockResolvedValue([{ id: 'inspection_1' }] as never)
+
+    await expect(getInspections('reservation_1', 'company_1')).resolves.toEqual([{ id: 'inspection_1' }])
+    expect(repo.findInspections).toHaveBeenCalledWith('reservation_1', 'company_1')
+  })
+
+  it('upserts check-in inspection, mirrors damage report data, and stores check-in mileage/fuel on reservation', async () => {
+    vi.mocked(repo.findForInspection).mockResolvedValue(editableReservation as never)
+    vi.mocked(prisma.damageInspection.upsert).mockResolvedValue({ id: 'inspection_1', type: 'CHECKIN' } as never)
+
+    const body = {
+      mileage: 42000,
+      fuelLevel: 'FULL',
+      fuelCharge: 0,
+      generalCondition: 'Clean exterior',
+      employeeNotes: 'Small scratch on rear bumper',
+      customerAgreed: true,
+      damagePoints: [
+        { viewType: 'REAR', x: 52, y: 61, damageType: 'SCRATCH', description: 'Rear bumper scratch' },
+      ],
+    }
+
+    await expect(upsertInspection('reservation_1', 'company_1', 'CHECKIN', body, 'employee_1')).resolves.toEqual({ id: 'inspection_1', type: 'CHECKIN' })
+
+    expect(prisma.damageInspection.upsert).toHaveBeenCalledWith(expect.objectContaining({
+      where: { reservationId_type: { reservationId: 'reservation_1', type: 'CHECKIN' } },
+      update: expect.objectContaining({
+        mileage: 42000,
+        fuelLevel: 'FULL',
+        customerAgreed: true,
+        damagePoints: { deleteMany: {}, create: body.damagePoints },
+      }),
+      create: expect.objectContaining({ reservationId: 'reservation_1', companyId: 'company_1', type: 'CHECKIN' }),
+      include: { damagePoints: true },
+    }))
+    expect(prisma.damageReport.upsert).toHaveBeenCalledWith(expect.objectContaining({
+      where: { reservationId_type: { reservationId: 'reservation_1', type: 'CHECKIN' } },
+      update: expect.objectContaining({
+        customerName: 'Mina Alami',
+        customerSignedAt: new Date('2026-06-09T12:00:00.000Z'),
+        damages: [{ viewType: 'REAR', x: 52, y: 61, damageType: 'SCRATCH', severity: 'MINOR', note: 'Rear bumper scratch', isPreExisting: false }],
+      }),
+    }))
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { checkInMileage: 42000, checkInFuelLevel: 'FULL' },
+    })
+  })
+
+  it('upserts checkout inspection only after completion and records checkout return values', async () => {
+    vi.mocked(repo.findForInspection).mockResolvedValue({ ...editableReservation, status: 'COMPLETED' } as never)
+    vi.mocked(prisma.damageInspection.upsert).mockResolvedValue({ id: 'inspection_2', type: 'CHECKOUT' } as never)
+
+    await upsertInspection('reservation_1', 'company_1', 'CHECKOUT', {
+      mileage: 42450,
+      fuelLevel: 'HALF',
+      customerAgreed: false,
+      damagePoints: [{ viewType: 'FRONT', x: 10, y: 20, damageType: 'DENT', severity: 'MAJOR', isPreExisting: true }],
+    }, 'employee_2')
+
+    expect(prisma.damageReport.upsert).toHaveBeenCalledWith(expect.objectContaining({
+      update: expect.objectContaining({ customerSignedAt: null }),
+      create: expect.objectContaining({ photos: [], customerSignedAt: null }),
+    }))
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { checkOutMileage: 42450, checkOutFuelLevel: 'HALF' },
+    })
+  })
+
+  it('rejects check-in edits once reservation workflow is closed', async () => {
+    vi.mocked(repo.findForInspection).mockResolvedValue({
+      ...editableReservation,
+      extras: { reservationClosedAt: '2026-06-08T10:00:00.000Z' },
+    } as never)
+
+    await expect(upsertInspection('reservation_1', 'company_1', 'CHECKIN', { fuelLevel: 'FULL' }, 'employee_1'))
+      .rejects.toMatchObject({ error: 'reservation_closed', statusCode: 400 })
+    expect(prisma.damageInspection.upsert).not.toHaveBeenCalled()
+  })
+
+  it('rejects checkout inspections before the reservation is completed', async () => {
+    vi.mocked(repo.findForInspection).mockResolvedValue(editableReservation as never)
+
+    await expect(upsertInspection('reservation_1', 'company_1', 'CHECKOUT', { fuelLevel: 'FULL' }, 'employee_1'))
+      .rejects.toMatchObject({ error: 'invalid_status', statusCode: 400 })
+  })
+})
diff --git a/api/src/modules/reservations/reservation.inspection.service.ts b/api/src/modules/reservations/reservation.inspection.service.ts
new file mode 100644
index 0000000..44ed65d
--- /dev/null
+++ b/api/src/modules/reservations/reservation.inspection.service.ts
@@ -0,0 +1,103 @@
+import { prisma } from '../../lib/prisma'
+import { AppError } from '../../http/errors'
+import { buildReservationWorkflow } from './reservation.presenter'
+import * as repo from './reservation.repo'
+
+export async function getInspections(reservationId: string, companyId: string) {
+  return repo.findInspections(reservationId, companyId)
+}
+
+export async function upsertInspection(
+  reservationId: string,
+  companyId: string,
+  type: 'CHECKIN' | 'CHECKOUT',
+  body: {
+    mileage?: number
+    fuelLevel: string
+    fuelCharge?: number
+    generalCondition?: string
+    employeeNotes?: string
+    customerAgreed?: boolean
+    damagePoints?: Array<{
+      viewType: string; x: number; y: number; damageType: string
+      severity?: string; description?: string; isPreExisting?: boolean
+    }>
+  },
+  inspectedBy: string,
+) {
+  const reservation = await repo.findForInspection(reservationId, companyId)
+  const workflow    = buildReservationWorkflow(reservation)
+
+  if (workflow.closed) throw new AppError('This reservation has already been closed', 400, 'reservation_closed')
+  if (type === 'CHECKIN' && !workflow.checkInInspectionEditable) {
+    throw new AppError('Check-in inspection is not editable at this stage', 400, 'invalid_status')
+  }
+  if (type === 'CHECKOUT' && !workflow.checkOutInspectionEditable) {
+    throw new AppError('Check-out inspection is only editable after the vehicle is returned', 400, 'invalid_status')
+  }
+
+  const inspection = await prisma.damageInspection.upsert({
+    where: { reservationId_type: { reservationId, type } },
+    update: {
+      mileage: body.mileage ?? null,
+      fuelLevel: body.fuelLevel as any,
+      fuelCharge: body.fuelCharge ?? null,
+      generalCondition: body.generalCondition ?? null,
+      employeeNotes: body.employeeNotes ?? null,
+      customerAgreed: body.customerAgreed ?? false,
+      inspectedBy,
+      inspectedAt: new Date(),
+      damagePoints: { deleteMany: {}, create: body.damagePoints as any },
+    },
+    create: {
+      reservationId, companyId, type,
+      mileage: body.mileage ?? null,
+      fuelLevel: body.fuelLevel as any,
+      fuelCharge: body.fuelCharge ?? null,
+      generalCondition: body.generalCondition ?? null,
+      employeeNotes: body.employeeNotes ?? null,
+      customerAgreed: body.customerAgreed ?? false,
+      inspectedBy,
+      damagePoints: { create: body.damagePoints as any },
+    },
+    include: { damagePoints: true },
+  })
+
+  const damageData = (body.damagePoints ?? []).map((p) => ({
+    viewType: p.viewType, x: p.x, y: p.y, damageType: p.damageType,
+    severity: p.severity ?? 'MINOR', note: p.description ?? '', isPreExisting: p.isPreExisting ?? false,
+  }))
+
+  await prisma.damageReport.upsert({
+    where: { reservationId_type: { reservationId, type } },
+    update: {
+      damages: damageData,
+      fuelLevel: body.fuelLevel as any,
+      mileage: body.mileage ?? null,
+      inspectedAt: new Date(),
+      inspectedBy,
+      customerSignedAt: (body.customerAgreed ?? false) ? new Date() : null,
+      customerName: `${reservation.customer.firstName} ${reservation.customer.lastName}`,
+    },
+    create: {
+      reservationId, companyId, type,
+      damages: damageData,
+      photos: [],
+      fuelLevel: body.fuelLevel as any,
+      mileage: body.mileage ?? null,
+      inspectedAt: new Date(),
+      inspectedBy,
+      customerSignedAt: (body.customerAgreed ?? false) ? new Date() : null,
+      customerName: `${reservation.customer.firstName} ${reservation.customer.lastName}`,
+    },
+  })
+
+  await prisma.reservation.update({
+    where: { id: reservationId },
+    data: type === 'CHECKIN'
+      ? { checkInMileage: body.mileage ?? null, checkInFuelLevel: body.fuelLevel }
+      : { checkOutMileage: body.mileage ?? null, checkOutFuelLevel: body.fuelLevel },
+  })
+
+  return inspection
+}
diff --git a/api/src/modules/reservations/reservation.insurance.service.ts b/api/src/modules/reservations/reservation.insurance.service.ts
new file mode 100644
index 0000000..e2718c7
--- /dev/null
+++ b/api/src/modules/reservations/reservation.insurance.service.ts
@@ -0,0 +1 @@
+export { applyInsurancesToReservation, calculateInsuranceCharge } from '../../services/insuranceService'
diff --git a/api/src/modules/reservations/reservation.lifecycle.service.test.ts b/api/src/modules/reservations/reservation.lifecycle.service.test.ts
new file mode 100644
index 0000000..2355be6
--- /dev/null
+++ b/api/src/modules/reservations/reservation.lifecycle.service.test.ts
@@ -0,0 +1,129 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    reservation: { update: vi.fn() },
+  },
+}))
+
+vi.mock('../../services/notificationService', () => ({
+  sendNotification: vi.fn().mockResolvedValue(undefined),
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('./reservation.repo', () => ({
+  findByIdSimple: vi.fn(),
+  findForLicenseCheck: vi.fn(),
+  updateById: vi.fn(),
+  updateVehicleStatus: vi.fn(),
+  findCustomerById: vi.fn(),
+  findCompanyWithBrand: vi.fn(),
+  findVehicle: vi.fn(),
+  findByIdForCheckout: vi.fn(),
+  findForClose: vi.fn(),
+  findConflict: vi.fn(),
+}))
+
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import * as repo from './reservation.repo'
+import { cancelReservation, checkinReservation, confirmReservation, extendReservation } from './reservation.lifecycle.service'
+
+const validLicenseReservation = {
+  customer: { licenseExpiry: new Date('2027-06-09T12:00:00.000Z'), licenseValidationStatus: 'VALID' },
+  additionalDrivers: [],
+}
+
+describe('reservation.lifecycle.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+  })
+
+  it('confirms only draft reservations after license compliance and reserves the vehicle', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({
+      id: 'reservation_1',
+      status: 'DRAFT',
+      vehicleId: 'vehicle_1',
+      customerId: 'customer_1',
+      renterId: null,
+      pickupLocation: 'Airport desk',
+      startDate: new Date('2026-06-12T10:00:00.000Z'),
+      endDate: new Date('2026-06-15T10:00:00.000Z'),
+    } as never)
+    vi.mocked(repo.findForLicenseCheck).mockResolvedValue(validLicenseReservation as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'reservation_1', status: 'CONFIRMED' } as never)
+    vi.mocked(repo.findCustomerById).mockResolvedValue({ firstName: 'Sara', email: 'sara@example.com' } as never)
+    vi.mocked(repo.findCompanyWithBrand).mockResolvedValue({ name: 'Atlas Cars', brand: { displayName: 'Atlas', defaultLocale: 'en' } } as never)
+    vi.mocked(repo.findVehicle).mockResolvedValue({ year: 2024, make: 'Toyota', model: 'Yaris' } as never)
+
+    await expect(confirmReservation('reservation_1', 'company_1')).resolves.toEqual({ id: 'reservation_1', status: 'CONFIRMED' })
+    expect(repo.updateById).toHaveBeenCalledWith('reservation_1', { status: 'CONFIRMED' })
+    expect(repo.updateVehicleStatus).toHaveBeenCalledWith('vehicle_1', 'RESERVED')
+  })
+
+  it('blocks check-in when the primary driver license is expired', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ id: 'reservation_1', status: 'CONFIRMED', vehicleId: 'vehicle_1' } as never)
+    vi.mocked(repo.findForLicenseCheck).mockResolvedValue({
+      customer: { licenseExpiry: new Date('2026-06-01T12:00:00.000Z'), licenseValidationStatus: 'VALID' },
+      additionalDrivers: [],
+    } as never)
+
+    await expect(checkinReservation('reservation_1', 'company_1')).rejects.toMatchObject({ error: 'invalid_primary_license' })
+    expect(repo.updateById).not.toHaveBeenCalled()
+  })
+
+  it('extends active reservations only when the new period is conflict-free and after the current end date', async () => {
+    const currentEnd = new Date('2026-06-15T10:00:00.000Z')
+    const newEnd = new Date('2026-06-18T10:00:00.000Z')
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({
+      id: 'reservation_1',
+      status: 'ACTIVE',
+      vehicleId: 'vehicle_1',
+      endDate: currentEnd,
+      totalDays: 5,
+      dailyRate: 100,
+      totalAmount: 500,
+      extras: {},
+    } as never)
+    vi.mocked(repo.findConflict).mockResolvedValue(null as never)
+    vi.mocked(prisma.reservation.update).mockResolvedValue({ id: 'reservation_1', totalDays: 8, totalAmount: 800 } as never)
+
+    await extendReservation('reservation_1', 'company_1', newEnd, 'Customer requested extra days')
+
+    expect(repo.findConflict).toHaveBeenCalledWith('vehicle_1', currentEnd, newEnd, 'reservation_1')
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: expect.objectContaining({
+        endDate: newEnd,
+        totalDays: 8,
+        totalAmount: 800,
+        extras: expect.objectContaining({ extensions: [expect.objectContaining({ additionalDays: 3, additionalAmount: 300 })] }),
+      }),
+    })
+  })
+
+  it('rejects extensions that overlap another reservation', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({
+      id: 'reservation_1', status: 'CONFIRMED', vehicleId: 'vehicle_1', endDate: new Date('2026-06-15'), dailyRate: 100, totalDays: 5, totalAmount: 500, extras: {},
+    } as never)
+    vi.mocked(repo.findConflict).mockResolvedValue({ id: 'reservation_2' } as never)
+
+    await expect(extendReservation('reservation_1', 'company_1', new Date('2026-06-16'), 'Need more time')).rejects.toBeInstanceOf(AppError)
+    expect(prisma.reservation.update).not.toHaveBeenCalled()
+  })
+
+  it('cancels cancellable reservations and releases the vehicle back to availability', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue({ id: 'reservation_1', status: 'CONFIRMED', vehicleId: 'vehicle_1' } as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'reservation_1', status: 'CANCELLED' } as never)
+
+    await cancelReservation('reservation_1', 'company_1', 'Customer changed plans')
+
+    expect(repo.updateById).toHaveBeenCalledWith('reservation_1', {
+      status: 'CANCELLED',
+      cancelReason: 'Customer changed plans',
+      cancelledBy: 'COMPANY',
+    })
+    expect(repo.updateVehicleStatus).toHaveBeenCalledWith('vehicle_1', 'AVAILABLE')
+  })
+})
diff --git a/api/src/modules/reservations/reservation.lifecycle.service.ts b/api/src/modules/reservations/reservation.lifecycle.service.ts
new file mode 100644
index 0000000..01163f2
--- /dev/null
+++ b/api/src/modules/reservations/reservation.lifecycle.service.ts
@@ -0,0 +1,264 @@
+import crypto from 'crypto'
+import { prisma } from '../../lib/prisma'
+import { AppError } from '../../http/errors'
+import { validateLicense } from '../../services/licenseValidationService'
+import { sendNotification, sendTransactionalEmail } from '../../services/notificationService'
+import { reviewRequestEmail, type Lang } from '../../lib/emailTranslations'
+import { coerceNotificationLocale } from '../../services/notificationLocalizationService'
+import { buildBookingRequestProgress, buildReservationWorkflow, parseReservationExtras, serializeReservationForDashboard } from './reservation.presenter'
+import * as repo from './reservation.repo'
+
+function buildPickupAddress(value: unknown) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return ''
+
+  const address = value as Record<string, unknown>
+  return [
+    typeof address.streetAddress === 'string' ? address.streetAddress.trim() : '',
+    typeof address.city === 'string' ? address.city.trim() : '',
+    typeof address.country === 'string' ? address.country.trim() : '',
+  ].filter(Boolean).join(', ')
+}
+
+async function assertLicenseCompliance(reservationId: string, companyId: string) {
+  const reservation = await repo.findForLicenseCheck(reservationId, companyId)
+
+  const customerLicense = validateLicense(reservation.customer.licenseExpiry)
+  const customerDenied  = ['DENIED', 'EXPIRED'].includes(reservation.customer.licenseValidationStatus)
+  if (customerDenied || customerLicense.status === 'EXPIRED') {
+    throw new AppError('Primary driver license is not valid for this reservation', 400, 'invalid_primary_license')
+  }
+  if (customerLicense.requiresApproval && reservation.customer.licenseValidationStatus !== 'APPROVED') {
+    throw new AppError('Primary driver license requires manager approval before this reservation can proceed', 400, 'primary_license_requires_approval')
+  }
+
+  const blockedDriver = reservation.additionalDrivers.find((d: any) => {
+    if (d.licenseExpired) return true
+    return d.requiresApproval && !d.approvedAt
+  })
+  if (blockedDriver) {
+    throw new AppError(
+      `Additional driver ${blockedDriver.firstName} ${blockedDriver.lastName} requires approval before this reservation can proceed`,
+      400,
+      'additional_driver_requires_approval',
+    )
+  }
+}
+
+export async function confirmReservation(id: string, companyId: string) {
+  const reservation = await repo.findByIdSimple(id, companyId)
+  if (reservation.status !== 'DRAFT') throw new AppError('Only DRAFT reservations can be confirmed', 400, 'invalid_status')
+
+  const updated = await repo.updateById(id, { status: 'CONFIRMED' })
+  await repo.updateVehicleStatus(reservation.vehicleId, 'RESERVED')
+
+  const [customer, company, vehicle] = await Promise.all([
+    repo.findCustomerById(reservation.customerId),
+    repo.findCompanyWithBrand(companyId),
+    repo.findVehicle(reservation.vehicleId, companyId),
+  ])
+  const fallbackLocale = coerceNotificationLocale(company?.brand?.defaultLocale)
+  const pickupLocation = reservation.pickupLocation?.trim() || buildPickupAddress(company?.address)
+  await sendNotification({
+    type: 'BOOKING_CONFIRMED',
+    companyId,
+    renterId: reservation.renterId ?? undefined,
+    email: customer.email,
+    channels: ['EMAIL', 'IN_APP'],
+    locale: reservation.renterId ? undefined : fallbackLocale,
+    templateKey: 'booking.confirmed',
+    templateVariables: {
+      firstName: customer.firstName,
+      companyName: company?.brand?.displayName ?? company?.name ?? 'RentalDriveGo',
+      startDate: {
+        type: 'date',
+        value: reservation.startDate,
+        options: {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      },
+      endDate: {
+        type: 'date',
+        value: reservation.endDate,
+        options: {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      },
+      pickupLocation,
+      vehicleName: `${vehicle.year} ${vehicle.make} ${vehicle.model}`,
+    },
+  }).catch(() => null)
+
+  if (reservation.source === 'MARKETPLACE') {
+    const progress = buildBookingRequestProgress({
+      source: reservation.source,
+      status: 'CONFIRMED',
+      paymentStatus: updated.paymentStatus,
+      customer,
+    })
+    const reminderChannels = reservation.renterId ? ['EMAIL', 'IN_APP'] as const : ['EMAIL'] as const
+
+    if (progress.documentsRequired) {
+      await sendNotification({
+        type: 'DOCUMENTS_REQUIRED',
+        companyId,
+        renterId: reservation.renterId ?? undefined,
+        email: customer.email,
+        channels: [...reminderChannels],
+        locale: reservation.renterId ? undefined : fallbackLocale,
+        title: 'Driver documents still needed',
+        body: `${company?.brand?.displayName ?? company?.name ?? 'The rental company'} confirmed availability. Please send the remaining driver documents so the booking can move forward.`,
+        data: { reservationId: reservation.id, missingItems: progress.documentsMissing },
+      }).catch(() => null)
+    }
+
+    if (progress.paymentRequired) {
+      await sendNotification({
+        type: 'PAYMENT_REQUIRED',
+        companyId,
+        renterId: reservation.renterId ?? undefined,
+        email: customer.email,
+        channels: [...reminderChannels],
+        locale: reservation.renterId ? undefined : fallbackLocale,
+        title: 'Payment or deposit is still pending',
+        body: `${company?.brand?.displayName ?? company?.name ?? 'The rental company'} accepted your request. Complete any required payment or deposit to finalize the booking.`,
+        data: { reservationId: reservation.id, paymentStatus: updated.paymentStatus },
+      }).catch(() => null)
+    }
+  }
+
+  return updated
+}
+
+export async function checkinReservation(id: string, companyId: string, mileage?: number) {
+  const reservation = await repo.findByIdSimple(id, companyId)
+  if (reservation.status !== 'CONFIRMED') throw new AppError('Only CONFIRMED reservations can be checked in', 400, 'invalid_status')
+  await assertLicenseCompliance(reservation.id, companyId)
+
+  const updated = await repo.updateById(id, {
+    status: 'ACTIVE',
+    checkedInAt: new Date(),
+    checkInMileage: mileage ?? null,
+  })
+  await repo.updateVehicleStatus(reservation.vehicleId, 'RENTED')
+  return updated
+}
+
+export async function checkoutReservation(id: string, companyId: string, mileage?: number) {
+  const reservation = await repo.findByIdForCheckout(id, companyId)
+  if (reservation.status !== 'ACTIVE') throw new AppError('Only ACTIVE reservations can be checked out', 400, 'invalid_status')
+
+  const reviewToken = reservation.reviewToken ?? crypto.randomBytes(32).toString('hex')
+  const updated = await repo.updateById(id, {
+    status: 'COMPLETED',
+    checkedOutAt: new Date(),
+    checkOutMileage: mileage ?? null,
+    reviewToken,
+  })
+  await repo.updateVehicleStatus(reservation.vehicleId, 'RETURNED', mileage)
+
+  return updated
+}
+
+export async function closeReservation(id: string, companyId: string, closedBy: string) {
+  const reservation = await repo.findForClose(id, companyId)
+  const workflow    = buildReservationWorkflow(reservation)
+
+  if (reservation.status !== 'COMPLETED') throw new AppError('Only completed reservations can be closed', 400, 'invalid_status')
+  if (workflow.closed) throw new AppError('This reservation is already closed', 400, 'already_closed')
+
+  const extras = parseReservationExtras(reservation.extras)
+  extras.reservationClosedAt = new Date().toISOString()
+  extras.reservationClosedBy = closedBy
+
+  const updated = await prisma.reservation.update({
+    where: { id: reservation.id },
+    data: { extras: extras as any },
+    include: { vehicle: true, customer: true, insurances: true, additionalDrivers: true, rentalPayments: true, damageReports: true },
+  })
+
+  // Send review request email if eligible
+  if (reservation.reviewToken && !(reservation as any).reviewPaused) {
+    try {
+      const customer = updated.customer as any
+      if (!customer.reviewOptOut && customer.email) {
+        const company = await repo.findCompanyWithBrand(companyId)
+        const lang = (company?.brand?.defaultLocale ?? 'fr') as Lang
+        const companyName = company?.brand?.displayName ?? company?.name ?? 'the rental company'
+        const vehicleLabel = `${updated.vehicle.year} ${updated.vehicle.make} ${updated.vehicle.model}`
+        const reviewUrl = `${process.env.MARKETPLACE_URL ?? 'http://localhost:3000'}/review?token=${reservation.reviewToken}`
+
+        sendTransactionalEmail({
+          to: customer.email,
+          subject: reviewRequestEmail.subject(vehicleLabel, lang),
+          html: reviewRequestEmail.html({ firstName: customer.firstName, companyName, vehicleLabel, reviewUrl }, lang),
+          text: reviewRequestEmail.text({ firstName: customer.firstName, companyName, vehicleLabel, reviewUrl }, lang),
+        }).catch(() => null)
+
+        await prisma.reservation.update({
+          where: { id: reservation.id },
+          data: { reviewRequestSentAt: new Date() },
+        })
+      }
+    } catch {
+      // Non-blocking: do not fail close if email fails
+    }
+  }
+
+  return serializeReservationForDashboard(updated)
+}
+
+export async function extendReservation(id: string, companyId: string, newEndDate: Date, reason: string) {
+  const reservation = await repo.findByIdSimple(id, companyId)
+  if (!['CONFIRMED', 'ACTIVE'].includes(reservation.status)) {
+    throw new AppError('Only CONFIRMED or ACTIVE reservations can be extended', 400, 'invalid_status')
+  }
+  if (newEndDate <= reservation.endDate) {
+    throw new AppError('New end date must be after the current end date', 400, 'invalid_end_date')
+  }
+  const conflict = await repo.findConflict(reservation.vehicleId, reservation.endDate, newEndDate, id)
+  if (conflict) {
+    throw new AppError('Vehicle is unavailable for the requested extension period', 409, 'vehicle_unavailable')
+  }
+  const additionalDays = Math.ceil((newEndDate.getTime() - reservation.endDate.getTime()) / (1000 * 60 * 60 * 24))
+  const additionalAmount = additionalDays * reservation.dailyRate
+  const extras = parseReservationExtras(reservation.extras)
+  if (!Array.isArray(extras.extensions)) extras.extensions = []
+  ;(extras.extensions as unknown[]).push({
+    previousEndDate: reservation.endDate.toISOString(),
+    newEndDate: newEndDate.toISOString(),
+    additionalDays,
+    additionalAmount,
+    reason,
+    approvedAt: new Date().toISOString(),
+  })
+  const updated = await prisma.reservation.update({
+    where: { id },
+    data: {
+      endDate: newEndDate,
+      totalDays: reservation.totalDays + additionalDays,
+      totalAmount: reservation.totalAmount + additionalAmount,
+      extras: extras as any,
+    },
+  })
+  return updated
+}
+
+export async function cancelReservation(id: string, companyId: string, reason?: string) {
+  const reservation = await repo.findByIdSimple(id, companyId)
+  if (['COMPLETED', 'CANCELLED'].includes(reservation.status)) {
+    throw new AppError('Reservation cannot be cancelled', 400, 'invalid_status')
+  }
+  const updated = await repo.updateById(id, { status: 'CANCELLED', cancelReason: reason ?? null, cancelledBy: 'COMPANY' })
+  if (['CONFIRMED', 'ACTIVE', 'DRAFT'].includes(reservation.status)) {
+    await repo.updateVehicleStatus(reservation.vehicleId, 'AVAILABLE')
+  }
+  return updated
+}
diff --git a/api/src/modules/reservations/reservation.photo.service.test.ts b/api/src/modules/reservations/reservation.photo.service.test.ts
new file mode 100644
index 0000000..ebe7c68
--- /dev/null
+++ b/api/src/modules/reservations/reservation.photo.service.test.ts
@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    reservation: { findFirst: vi.fn() },
+    reservationPhoto: {
+      findMany: vi.fn(),
+      create: vi.fn(),
+      findFirst: vi.fn(),
+      delete: vi.fn(),
+    },
+  },
+}))
+
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn(),
+  deleteImage: vi.fn(),
+}))
+
+import { NotFoundError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import { deleteImage, uploadImage } from '../../lib/storage'
+import { deletePhoto, listPhotos, uploadPhoto } from './reservation.photo.service'
+
+describe('reservation.photo.service', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('rejects photo listing when the reservation does not belong to the company', async () => {
+    vi.mocked(prisma.reservation.findFirst).mockResolvedValue(null as never)
+
+    await expect(listPhotos('reservation_1', 'company_1')).rejects.toBeInstanceOf(NotFoundError)
+    expect(prisma.reservationPhoto.findMany).not.toHaveBeenCalled()
+  })
+
+  it('lists photos in creation order after confirming reservation ownership', async () => {
+    vi.mocked(prisma.reservation.findFirst).mockResolvedValue({ id: 'reservation_1' } as never)
+    vi.mocked(prisma.reservationPhoto.findMany).mockResolvedValue([{ id: 'photo_1' }] as never)
+
+    await expect(listPhotos('reservation_1', 'company_1')).resolves.toEqual([{ id: 'photo_1' }])
+    expect(prisma.reservationPhoto.findMany).toHaveBeenCalledWith({
+      where: { reservationId: 'reservation_1' },
+      orderBy: { createdAt: 'asc' },
+    })
+  })
+
+  it('uploads images under the company/reservation scoped storage prefix before creating the photo row', async () => {
+    vi.mocked(prisma.reservation.findFirst).mockResolvedValue({ id: 'reservation_1' } as never)
+    vi.mocked(uploadImage).mockResolvedValue('/storage/companies/company_1/reservations/reservation_1/photos/photo.jpg')
+    vi.mocked(prisma.reservationPhoto.create).mockResolvedValue({ id: 'photo_1' } as never)
+
+    await uploadPhoto('reservation_1', 'company_1', 'PICKUP', Buffer.from('fake-image'))
+
+    expect(uploadImage).toHaveBeenCalledWith(Buffer.from('fake-image'), 'companies/company_1/reservations/reservation_1/photos')
+    expect(prisma.reservationPhoto.create).toHaveBeenCalledWith({
+      data: {
+        reservationId: 'reservation_1',
+        type: 'PICKUP',
+        url: '/storage/companies/company_1/reservations/reservation_1/photos/photo.jpg',
+      },
+    })
+  })
+
+  it('deletes the stored object before deleting the reservation photo row', async () => {
+    vi.mocked(prisma.reservationPhoto.findFirst).mockResolvedValue({ id: 'photo_1', url: '/storage/photo.jpg' } as never)
+
+    await deletePhoto('photo_1', 'reservation_1', 'company_1')
+
+    expect(deleteImage).toHaveBeenCalledWith('/storage/photo.jpg')
+    expect(prisma.reservationPhoto.delete).toHaveBeenCalledWith({ where: { id: 'photo_1' } })
+  })
+})
diff --git a/api/src/modules/reservations/reservation.photo.service.ts b/api/src/modules/reservations/reservation.photo.service.ts
new file mode 100644
index 0000000..1aa3119
--- /dev/null
+++ b/api/src/modules/reservations/reservation.photo.service.ts
@@ -0,0 +1,33 @@
+import { prisma } from '../../lib/prisma'
+import { uploadImage, deleteImage } from '../../lib/storage'
+import { NotFoundError } from '../../http/errors'
+
+export async function listPhotos(reservationId: string, companyId: string) {
+  const reservation = await prisma.reservation.findFirst({ where: { id: reservationId, companyId }, select: { id: true } })
+  if (!reservation) throw new NotFoundError('Reservation not found')
+  return prisma.reservationPhoto.findMany({
+    where: { reservationId },
+    orderBy: { createdAt: 'asc' },
+  })
+}
+
+export async function uploadPhoto(
+  reservationId: string,
+  companyId: string,
+  type: 'PICKUP' | 'DROPOFF',
+  buffer: Buffer,
+) {
+  const reservation = await prisma.reservation.findFirst({ where: { id: reservationId, companyId }, select: { id: true } })
+  if (!reservation) throw new NotFoundError('Reservation not found')
+  const url = await uploadImage(buffer, `companies/${companyId}/reservations/${reservationId}/photos`)
+  return prisma.reservationPhoto.create({ data: { reservationId, type, url } })
+}
+
+export async function deletePhoto(photoId: string, reservationId: string, companyId: string) {
+  const photo = await prisma.reservationPhoto.findFirst({
+    where: { id: photoId, reservationId, reservation: { companyId } },
+  })
+  if (!photo) throw new NotFoundError('Photo not found')
+  await deleteImage(photo.url)
+  await prisma.reservationPhoto.delete({ where: { id: photoId } })
+}
diff --git a/api/src/modules/reservations/reservation.presenter.boundary.test.ts b/api/src/modules/reservations/reservation.presenter.boundary.test.ts
new file mode 100644
index 0000000..a45a79e
--- /dev/null
+++ b/api/src/modules/reservations/reservation.presenter.boundary.test.ts
@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/storage', () => ({
+  getProtectedCustomerLicenseImageUrl: vi.fn((customerId: string) => `/api/v1/customers/${customerId}/license-image`),
+}))
+
+import {
+  buildReservationWorkflow,
+  normalizeOptionalString,
+  parseReservationExtras,
+  serializeReservationForDashboard,
+} from './reservation.presenter'
+
+describe('reservation.presenter boundary behavior', () => {
+  it('treats missing, array and primitive extras as empty objects', () => {
+    expect(parseReservationExtras(null)).toEqual({})
+    expect(parseReservationExtras(['paymentMode'])).toEqual({})
+    expect(parseReservationExtras('cash')).toEqual({})
+    expect(parseReservationExtras({ paymentMode: 'CASH' })).toEqual({ paymentMode: 'CASH' })
+  })
+
+  it('normalizes optional strings without preserving whitespace-only values', () => {
+    expect(normalizeOptionalString('  hello  ')).toBe('hello')
+    expect(normalizeOptionalString('   ')).toBeNull()
+    expect(normalizeOptionalString(null)).toBeNull()
+    expect(normalizeOptionalString(undefined)).toBeNull()
+  })
+
+  it('locks core edits after contract generation even when reservation is still confirmed', () => {
+    expect(buildReservationWorkflow({
+      status: 'CONFIRMED',
+      contractNumber: 'CTR-1',
+      invoiceNumber: null,
+      extras: {},
+    })).toMatchObject({
+      contractGenerated: true,
+      closed: false,
+      coreEditable: false,
+      checkInInspectionEditable: true,
+    })
+  })
+
+  it('marks closed reservations as immutable and exposes close metadata from extras only when strings', () => {
+    expect(buildReservationWorkflow({
+      status: 'COMPLETED',
+      contractNumber: null,
+      invoiceNumber: null,
+      extras: { reservationClosedAt: '2026-06-01T12:00:00.000Z', reservationClosedBy: 123 },
+    })).toMatchObject({
+      closed: true,
+      closedAt: '2026-06-01T12:00:00.000Z',
+      closedBy: null,
+      coreEditable: false,
+      returnEditable: false,
+      checkOutInspectionEditable: false,
+    })
+  })
+
+  it('serializes dashboard reservations with protected license URLs and payment mode extraction', () => {
+    const result = serializeReservationForDashboard({
+      id: 'reservation_1',
+      status: 'DRAFT',
+      source: 'MARKETPLACE',
+      contractNumber: null,
+      invoiceNumber: null,
+      paymentStatus: 'UNPAID',
+      extras: { paymentMode: 'CARD' },
+      customer: {
+        id: 'customer_1',
+        driverLicense: null,
+        dateOfBirth: null,
+        address: {},
+        licenseImageUrl: '/storage/raw-license.jpg',
+        licenseValidationStatus: 'PENDING',
+      },
+    })
+
+    expect(result.paymentMode).toBe('CARD')
+    expect(result.customer?.licenseImageUrl).toBe('/api/v1/customers/customer_1/license-image')
+    expect(result.workflow.coreEditable).toBe(true)
+  })
+
+  it('does not invent protected license URLs when customer has no stored license image', () => {
+    const result = serializeReservationForDashboard({
+      id: 'reservation_1',
+      status: 'DRAFT',
+      source: 'MARKETPLACE',
+      contractNumber: null,
+      invoiceNumber: null,
+      paymentStatus: 'UNPAID',
+      extras: { paymentMode: 42 },
+      customer: {
+        id: 'customer_1',
+        driverLicense: null,
+        dateOfBirth: null,
+        address: {},
+        licenseImageUrl: null,
+        licenseValidationStatus: 'PENDING',
+      },
+    })
+
+    expect(result.paymentMode).toBeNull()
+    expect(result.customer?.licenseImageUrl).toBeNull()
+  })
+})
diff --git a/api/src/modules/reservations/reservation.presenter.test.ts b/api/src/modules/reservations/reservation.presenter.test.ts
new file mode 100644
index 0000000..b5a43b5
--- /dev/null
+++ b/api/src/modules/reservations/reservation.presenter.test.ts
@@ -0,0 +1,39 @@
+import { afterAll, beforeEach, describe, expect, it } from 'vitest'
+import { serializeReservationForDashboard } from './reservation.presenter'
+
+describe('serializeReservationForDashboard', () => {
+  const originalDashboardUrl = process.env.DASHBOARD_URL
+  const originalPublicDashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL
+
+  beforeEach(() => {
+    process.env.DASHBOARD_URL = 'http://localhost:3000/dashboard'
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = ''
+  })
+
+  afterAll(() => {
+    process.env.DASHBOARD_URL = originalDashboardUrl
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = originalPublicDashboardUrl
+  })
+
+  it('rewrites customer license image URLs to the protected route', () => {
+    const result = serializeReservationForDashboard({
+      id: 'reservation-1',
+      status: 'CONFIRMED',
+      source: 'MARKETPLACE',
+      contractNumber: null,
+      invoiceNumber: null,
+      paymentStatus: 'UNPAID',
+      extras: {},
+      customer: {
+        id: 'customer-1',
+        driverLicense: 'DL-1',
+        dateOfBirth: new Date('1990-01-01T00:00:00.000Z'),
+        address: { identityDocumentNumber: 'CIN-1', fullAddress: 'Casablanca' },
+        licenseImageUrl: 'http://localhost:4000/storage/companies/company-1/customers/customer-1/license.jpg',
+        licenseValidationStatus: 'APPROVED',
+      },
+    })
+
+    expect(result.customer?.licenseImageUrl).toBe('http://localhost:3000/dashboard/api/v1/customers/customer-1/license-image')
+  })
+})
diff --git a/api/src/modules/reservations/reservation.presenter.ts b/api/src/modules/reservations/reservation.presenter.ts
new file mode 100644
index 0000000..3d87d9f
--- /dev/null
+++ b/api/src/modules/reservations/reservation.presenter.ts
@@ -0,0 +1,149 @@
+import { getProtectedCustomerLicenseImageUrl } from '../../lib/storage'
+
+export function parseReservationExtras(extras: unknown): Record<string, unknown> {
+  if (!extras || typeof extras !== 'object' || Array.isArray(extras)) return {}
+  return { ...(extras as Record<string, unknown>) }
+}
+
+export function normalizeOptionalString(value: string | null | undefined): string | null {
+  const trimmed = typeof value === 'string' ? value.trim() : value
+  return trimmed || null
+}
+
+function readAddressField(address: unknown, key: string): string | null {
+  const extras = parseReservationExtras(address)
+  const value = extras[key]
+  return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+export function buildReservationWorkflow(reservation: {
+  status: string
+  contractNumber: string | null
+  invoiceNumber: string | null
+  extras: unknown
+}) {
+  const extras = parseReservationExtras(reservation.extras)
+  const closedAt = typeof extras.reservationClosedAt === 'string' ? extras.reservationClosedAt : null
+  const contractGenerated = Boolean(reservation.contractNumber || reservation.invoiceNumber)
+  const closed = Boolean(closedAt)
+
+  return {
+    contractGenerated,
+    closed,
+    closedAt,
+    closedBy: typeof extras.reservationClosedBy === 'string' ? extras.reservationClosedBy : null,
+    coreEditable: !closed && !contractGenerated && ['DRAFT', 'CONFIRMED'].includes(reservation.status),
+    returnEditable: !closed && reservation.status === 'COMPLETED',
+    checkInInspectionEditable: !closed && ['CONFIRMED', 'ACTIVE'].includes(reservation.status),
+    checkOutInspectionEditable: !closed && reservation.status === 'COMPLETED',
+  }
+}
+
+export function buildBookingRequestProgress(reservation: {
+  source: string
+  status: string
+  paymentStatus?: string | null
+  customer?: {
+    driverLicense?: string | null
+    dateOfBirth?: Date | null
+    address?: unknown
+    licenseImageUrl?: string | null
+    licenseValidationStatus?: string | null
+  } | null
+}) {
+  const customer = reservation.customer
+  const paymentStatus = reservation.paymentStatus ?? 'UNPAID'
+  const identityDocumentNumber = readAddressField(customer?.address, 'identityDocumentNumber')
+  const fullAddress = readAddressField(customer?.address, 'fullAddress')
+
+  const documentsMissing: string[] = []
+
+  if (!customer?.dateOfBirth) documentsMissing.push('DATE_OF_BIRTH')
+  if (!identityDocumentNumber) documentsMissing.push('IDENTITY_DOCUMENT')
+  if (!fullAddress) documentsMissing.push('FULL_ADDRESS')
+  if (!customer?.driverLicense) documentsMissing.push('DRIVER_LICENSE')
+  if (!customer?.licenseImageUrl) documentsMissing.push('LICENSE_IMAGE')
+  if ((customer?.licenseValidationStatus ?? 'PENDING') !== 'APPROVED') {
+    documentsMissing.push('LICENSE_APPROVAL')
+  }
+
+  const companyConfirmed = !['DRAFT', 'CANCELLED', 'NO_SHOW'].includes(reservation.status)
+  const documentsRequired = reservation.source === 'MARKETPLACE' && companyConfirmed && documentsMissing.length > 0
+  const paymentRequired = reservation.source === 'MARKETPLACE' && companyConfirmed && !['PAID', 'COMPLETED'].includes(paymentStatus)
+
+  let stage: 'REQUEST_SENT' | 'COMPANY_CONFIRMED' | 'DOCUMENTS_REQUIRED' | 'PAYMENT_REQUIRED' | 'BOOKING_CONFIRMED' | 'CANCELLED'
+  if (['CANCELLED', 'NO_SHOW'].includes(reservation.status)) stage = 'CANCELLED'
+  else if (!companyConfirmed) stage = 'REQUEST_SENT'
+  else if (documentsRequired) stage = 'DOCUMENTS_REQUIRED'
+  else if (paymentRequired) stage = 'PAYMENT_REQUIRED'
+  else if (companyConfirmed) stage = 'BOOKING_CONFIRMED'
+  else stage = 'COMPANY_CONFIRMED'
+
+  const activeStepKey =
+    stage === 'REQUEST_SENT'
+      ? 'REQUEST_SENT'
+      : stage === 'CANCELLED'
+      ? 'BOOKING_CONFIRMED'
+      : stage === 'DOCUMENTS_REQUIRED'
+      ? 'DOCUMENTS_COMPLETED'
+      : stage === 'PAYMENT_REQUIRED'
+      ? 'PAYMENT_COMPLETED'
+      : 'BOOKING_CONFIRMED'
+
+  const steps = [
+    { key: 'REQUEST_SENT', completed: true, active: activeStepKey === 'REQUEST_SENT' },
+    { key: 'AVAILABILITY_CONFIRMED', completed: companyConfirmed, active: companyConfirmed && activeStepKey === 'REQUEST_SENT' },
+    { key: 'DOCUMENTS_COMPLETED', completed: companyConfirmed && !documentsRequired, active: activeStepKey === 'DOCUMENTS_COMPLETED' },
+    { key: 'PAYMENT_COMPLETED', completed: companyConfirmed && !paymentRequired, active: activeStepKey === 'PAYMENT_COMPLETED' },
+    { key: 'BOOKING_CONFIRMED', completed: companyConfirmed && !documentsRequired && !paymentRequired, active: activeStepKey === 'BOOKING_CONFIRMED' },
+  ]
+
+  return {
+    stage,
+    companyConfirmed,
+    documentsRequired,
+    paymentRequired,
+    documentsMissing,
+    steps,
+  }
+}
+
+export function serializeReservationForDashboard<T extends {
+  extras: unknown
+  status: string
+  source: string
+  contractNumber: string | null
+  invoiceNumber: string | null
+  paymentStatus?: string | null
+  customer?: {
+    id: string
+    driverLicense?: string | null
+    dateOfBirth?: Date | null
+    address?: unknown
+    licenseImageUrl?: string | null
+    licenseValidationStatus?: string | null
+  } | null
+}>(reservation: T): T & {
+  paymentMode: string | null
+  workflow: ReturnType<typeof buildReservationWorkflow>
+  bookingRequest: ReturnType<typeof buildBookingRequestProgress>
+} {
+  const extras = parseReservationExtras(reservation.extras)
+  const customer =
+    reservation.customer
+      ? {
+          ...reservation.customer,
+          licenseImageUrl: reservation.customer.licenseImageUrl
+            ? getProtectedCustomerLicenseImageUrl(reservation.customer.id)
+            : null,
+        }
+      : reservation.customer
+
+  return {
+    ...reservation,
+    ...(customer !== undefined ? { customer } : {}),
+    paymentMode: typeof extras.paymentMode === 'string' ? extras.paymentMode : null,
+    workflow: buildReservationWorkflow(reservation),
+    bookingRequest: buildBookingRequestProgress({ ...reservation, customer }),
+  }
+}
diff --git a/api/src/modules/reservations/reservation.pricing.service.test.ts b/api/src/modules/reservations/reservation.pricing.service.test.ts
new file mode 100644
index 0000000..c20fa7a
--- /dev/null
+++ b/api/src/modules/reservations/reservation.pricing.service.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    pricingRule: { findMany: vi.fn() },
+    customer: { findUniqueOrThrow: vi.fn() },
+  },
+}))
+
+import { calculateUpdatedAdditionalDriverCharge, calculateUpdatedInsuranceCharge } from './reservation.pricing.service'
+
+describe('reservation pricing helpers', () => {
+  it('calculates insurance charges for every supported billing model', () => {
+    expect(calculateUpdatedInsuranceCharge('PER_DAY', 40, 5, 1000)).toBe(200)
+    expect(calculateUpdatedInsuranceCharge('PER_RENTAL', 125, 5, 1000)).toBe(125)
+    expect(calculateUpdatedInsuranceCharge('PERCENTAGE_OF_RENTAL', 12.5, 5, 1000)).toBe(125)
+  })
+
+  it('rounds percentage insurance charges to whole minor units', () => {
+    expect(calculateUpdatedInsuranceCharge('PERCENTAGE_OF_RENTAL', 7.5, 3, 999)).toBe(75)
+  })
+
+  it('calculates additional driver charges for paid and free models', () => {
+    expect(calculateUpdatedAdditionalDriverCharge('PER_DAY', 25, 4)).toBe(100)
+    expect(calculateUpdatedAdditionalDriverCharge('FLAT', 60, 4)).toBe(60)
+    expect(calculateUpdatedAdditionalDriverCharge('FREE', 999, 4)).toBe(0)
+  })
+})
diff --git a/api/src/modules/reservations/reservation.pricing.service.ts b/api/src/modules/reservations/reservation.pricing.service.ts
new file mode 100644
index 0000000..e9a7497
--- /dev/null
+++ b/api/src/modules/reservations/reservation.pricing.service.ts
@@ -0,0 +1,27 @@
+export { applyPricingRules } from '../../services/pricingRuleService'
+
+export function calculateUpdatedInsuranceCharge(
+  chargeType: 'PER_DAY' | 'PER_RENTAL' | 'PERCENTAGE_OF_RENTAL',
+  chargeValue: number,
+  totalDays: number,
+  baseRentalAmount: number,
+): number {
+  switch (chargeType) {
+    case 'PER_DAY':              return chargeValue * totalDays
+    case 'PER_RENTAL':           return chargeValue
+    case 'PERCENTAGE_OF_RENTAL': return Math.round(baseRentalAmount * chargeValue / 100)
+    default:                     return 0
+  }
+}
+
+export function calculateUpdatedAdditionalDriverCharge(
+  chargeType: 'PER_DAY' | 'FLAT' | 'FREE',
+  chargeValue: number,
+  totalDays: number,
+): number {
+  switch (chargeType) {
+    case 'PER_DAY': return chargeValue * totalDays
+    case 'FLAT':    return chargeValue
+    default:        return 0
+  }
+}
diff --git a/api/src/modules/reservations/reservation.repo.edge.test.ts b/api/src/modules/reservations/reservation.repo.edge.test.ts
new file mode 100644
index 0000000..e5af25c
--- /dev/null
+++ b/api/src/modules/reservations/reservation.repo.edge.test.ts
@@ -0,0 +1,100 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    reservation: {
+      findMany: vi.fn(),
+      count: vi.fn(),
+      findFirst: vi.fn(),
+      findFirstOrThrow: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+    },
+    offer: {
+      findFirst: vi.fn(),
+      update: vi.fn(),
+    },
+    vehicle: {
+      findFirstOrThrow: vi.fn(),
+      update: vi.fn(),
+    },
+    customer: {
+      findFirstOrThrow: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+    },
+    company: { findUnique: vi.fn() },
+    brandSettings: { findUnique: vi.fn() },
+    damageInspection: { findMany: vi.fn() },
+    additionalDriver: { findFirstOrThrow: vi.fn(), update: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './reservation.repo'
+
+describe('reservation.repo edge queries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('findMany applies dashboard include, pagination and newest-first ordering', async () => {
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([{ id: 'reservation_1' }] as never)
+    vi.mocked(prisma.reservation.count).mockResolvedValue(1 as never)
+
+    await expect(repo.findMany({ companyId: 'company_1' }, 20, 10)).resolves.toEqual([[{ id: 'reservation_1' }], 1])
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1' },
+      include: { vehicle: true, customer: true },
+      skip: 20,
+      take: 10,
+      orderBy: { createdAt: 'desc' },
+    })
+    expect(prisma.reservation.count).toHaveBeenCalledWith({ where: { companyId: 'company_1' } })
+  })
+
+  it('builds overlap conflict query and excludes current reservation during updates', async () => {
+    const start = new Date('2026-09-01T10:00:00.000Z')
+    const end = new Date('2026-09-03T10:00:00.000Z')
+
+    await repo.findConflict('vehicle_1', start, end, 'reservation_1')
+
+    expect(prisma.reservation.findFirst).toHaveBeenCalledWith({
+      where: {
+        vehicleId: 'vehicle_1',
+        status: { in: ['CONFIRMED', 'ACTIVE'] },
+        startDate: { lt: end },
+        endDate: { gt: start },
+        id: { not: 'reservation_1' },
+      },
+    })
+  })
+
+  it('finds active offers by company, code, active flag and current validity window', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-09-15T12:00:00.000Z'))
+
+    await repo.findActiveOffer('company_1', 'SUMMER20')
+
+    expect(prisma.offer.findFirst).toHaveBeenCalledWith({
+      where: {
+        companyId: 'company_1',
+        promoCode: 'SUMMER20',
+        isActive: true,
+        validFrom: { lte: new Date('2026-09-15T12:00:00.000Z') },
+        validUntil: { gte: new Date('2026-09-15T12:00:00.000Z') },
+      },
+    })
+
+    vi.useRealTimers()
+  })
+
+  it('updates vehicle status without writing mileage unless explicitly supplied', async () => {
+    await repo.updateVehicleStatus('vehicle_1', 'AVAILABLE')
+    expect(prisma.vehicle.update).toHaveBeenLastCalledWith({ where: { id: 'vehicle_1' }, data: { status: 'AVAILABLE' } })
+
+    await repo.updateVehicleStatus('vehicle_1', 'AVAILABLE', 45500)
+    expect(prisma.vehicle.update).toHaveBeenLastCalledWith({
+      where: { id: 'vehicle_1' },
+      data: { status: 'AVAILABLE', mileage: 45500 },
+    })
+  })
+})
diff --git a/api/src/modules/reservations/reservation.repo.ts b/api/src/modules/reservations/reservation.repo.ts
new file mode 100644
index 0000000..822485b
--- /dev/null
+++ b/api/src/modules/reservations/reservation.repo.ts
@@ -0,0 +1,161 @@
+import { prisma } from '../../lib/prisma'
+
+const FULL_INCLUDE = {
+  vehicle: true,
+  customer: true,
+  insurances: true,
+  additionalDrivers: true,
+  rentalPayments: true,
+  damageReports: true,
+}
+
+export async function findMany(where: any, skip: number, take: number) {
+  return Promise.all([
+    prisma.reservation.findMany({
+      where,
+      include: { vehicle: true, customer: true },
+      skip,
+      take,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.reservation.count({ where }),
+  ])
+}
+
+export async function findById(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({ where: { id, companyId }, include: FULL_INCLUDE })
+}
+
+export async function findByIdSimple(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({ where: { id, companyId } })
+}
+
+export async function findByIdWithRelations(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { insurances: true, additionalDrivers: true },
+  })
+}
+
+export async function findByIdForCheckout(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { vehicle: true },
+  })
+}
+
+export async function findForLicenseCheck(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { customer: true, additionalDrivers: true },
+  })
+}
+
+export async function findForContract(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: {
+      vehicle: true,
+      customer: true,
+      insurances: true,
+      additionalDrivers: true,
+      rentalPayments: { orderBy: { createdAt: 'asc' } },
+      inspections: { include: { damagePoints: true }, orderBy: { inspectedAt: 'asc' } },
+      company: { include: { brand: true, contractSettings: true, accountingSettings: true } },
+    },
+  })
+}
+
+export async function findForBilling(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { vehicle: true, insurances: true, additionalDrivers: true },
+  })
+}
+
+export async function findForClose(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({ where: { id, companyId }, include: { customer: true } })
+}
+
+export async function findForInspection(id: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id, companyId },
+    include: { vehicle: true, customer: true },
+  })
+}
+
+export async function findConflict(vehicleId: string, start: Date, end: Date, excludeId?: string) {
+  return prisma.reservation.findFirst({
+    where: {
+      vehicleId,
+      status: { in: ['CONFIRMED', 'ACTIVE'] },
+      startDate: { lt: end },
+      endDate:   { gt: start },
+      ...(excludeId ? { id: { not: excludeId } } : {}),
+    },
+  })
+}
+
+export async function create(data: any) {
+  return prisma.reservation.create({ data, include: { vehicle: true, customer: true } })
+}
+
+export async function updateById(id: string, data: any) {
+  return prisma.reservation.update({ where: { id }, data })
+}
+
+export async function findActiveOffer(companyId: string, promoCode: string) {
+  return prisma.offer.findFirst({
+    where: { companyId, promoCode, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+  })
+}
+
+export async function incrementOfferRedemption(offerId: string) {
+  return prisma.offer.update({ where: { id: offerId }, data: { redemptionCount: { increment: 1 } } })
+}
+
+export async function findVehicle(vehicleId: string, companyId: string) {
+  return prisma.vehicle.findFirstOrThrow({ where: { id: vehicleId, companyId } })
+}
+
+export async function findCustomer(customerId: string, companyId: string) {
+  return prisma.customer.findFirstOrThrow({ where: { id: customerId, companyId } })
+}
+
+export async function findCustomerById(customerId: string) {
+  return prisma.customer.findUniqueOrThrow({ where: { id: customerId } })
+}
+
+export async function updateVehicleStatus(vehicleId: string, status: string, mileage?: number) {
+  return prisma.vehicle.update({
+    where: { id: vehicleId },
+    data: { status: status as any, ...(mileage !== undefined ? { mileage } : {}) },
+  })
+}
+
+export async function findCompanyWithBrand(companyId: string) {
+  return prisma.company.findUnique({
+    where: { id: companyId },
+    include: { brand: { select: { displayName: true, defaultLocale: true } } },
+  })
+}
+
+export async function findBrandLocale(companyId: string) {
+  return prisma.brandSettings.findUnique({ where: { companyId }, select: { defaultLocale: true } })
+}
+
+export async function findInspections(reservationId: string, companyId: string) {
+  return prisma.damageInspection.findMany({
+    where: { reservationId, companyId },
+    include: { damagePoints: true },
+    orderBy: { inspectedAt: 'asc' },
+  })
+}
+
+export async function findAdditionalDriver(driverId: string, reservationId: string, companyId: string) {
+  return prisma.additionalDriver.findFirstOrThrow({ where: { id: driverId, reservationId, companyId } })
+}
+
+export async function updateAdditionalDriver(id: string, data: any) {
+  return prisma.additionalDriver.update({ where: { id }, data })
+}
diff --git a/api/src/modules/reservations/reservation.routes.ts b/api/src/modules/reservations/reservation.routes.ts
new file mode 100644
index 0000000..e6ab0ee
--- /dev/null
+++ b/api/src/modules/reservations/reservation.routes.ts
@@ -0,0 +1,183 @@
+import { Router } from 'express'
+import { z } from 'zod'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { imageUpload, assertImageFile } from '../../http/upload'
+import * as service from './reservation.service'
+import * as lifecycle from './reservation.lifecycle.service'
+import * as inspectionService from './reservation.inspection.service'
+import * as additionalDriverService from './reservation.additional-driver.service'
+import * as photoService from './reservation.photo.service'
+import { getContract, getBilling } from './reservation.document.service'
+import {
+  createSchema, updateSchema, listQuerySchema,
+  checkinSchema, checkoutSchema, extendSchema, cancelSchema, approvalSchema,
+  inspectionSchema, inspectionTypeParam,
+  idParamSchema, driverParamSchema, inspectionParamSchema,
+} from './reservation.schemas'
+
+const photoTypeSchema = z.enum(['PICKUP', 'DROPOFF'])
+const photoParamSchema = z.object({ id: z.string(), photoId: z.string() })
+
+const router = Router()
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    const result = await service.listReservations(req.companyId, query)
+    res.json(result)
+  } catch (err) { next(err) }
+})
+
+router.post('/', async (req, res, next) => {
+  try {
+    const body = parseBody(createSchema, req)
+    const reservation = await service.createReservation(req.companyId, body)
+    created(res, reservation)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const reservation = await service.getReservation(id, req.companyId)
+    ok(res, reservation)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(updateSchema, req)
+    const reservation = await service.updateReservation(id, req.companyId, body)
+    ok(res, reservation)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/contract', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const contract = await getContract(id, req.companyId)
+    ok(res, contract)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/billing', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const billing = await getBilling(id, req.companyId)
+    ok(res, billing)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/confirm', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const updated = await lifecycle.confirmReservation(id, req.companyId)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/checkin', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { mileage } = parseBody(checkinSchema, req)
+    const updated = await lifecycle.checkinReservation(id, req.companyId, mileage)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/checkout', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { mileage } = parseBody(checkoutSchema, req)
+    const updated = await lifecycle.checkoutReservation(id, req.companyId, mileage)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/close', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const closedBy = `${req.employee.firstName} ${req.employee.lastName}`
+    const reservation = await lifecycle.closeReservation(id, req.companyId, closedBy)
+    ok(res, reservation)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/extend', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { newEndDate, reason } = parseBody(extendSchema, req)
+    ok(res, await lifecycle.extendReservation(id, req.companyId, new Date(newEndDate), reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/cancel', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { reason } = parseBody(cancelSchema, req)
+    const updated = await lifecycle.cancelReservation(id, req.companyId, reason)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/inspections', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const inspections = await inspectionService.getInspections(id, req.companyId)
+    ok(res, inspections)
+  } catch (err) { next(err) }
+})
+
+router.put('/:id/inspections/:type', async (req, res, next) => {
+  try {
+    const { id, type: rawType } = parseParams(inspectionParamSchema, req)
+    const type = inspectionTypeParam.parse(rawType.toUpperCase())
+    const body = parseBody(inspectionSchema, req)
+    const inspectedBy = `${req.employee.firstName} ${req.employee.lastName}`
+    const result = await inspectionService.upsertInspection(id, req.companyId, type, body, inspectedBy)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/additional-drivers/:driverId/approval', async (req, res, next) => {
+  try {
+    const { id, driverId } = parseParams(driverParamSchema, req)
+    const { approved, note } = parseBody(approvalSchema, req)
+    const approvedBy = `${req.employee.firstName} ${req.employee.lastName}`
+    const updated = await additionalDriverService.approveAdditionalDriver(id, driverId, req.companyId, approved, note, approvedBy)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/photos', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await photoService.listPhotos(id, req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/photos', imageUpload.single('photo'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    assertImageFile(req.file, 'photo')
+    const type = photoTypeSchema.parse(req.body.type)
+    const photo = await photoService.uploadPhoto(id, req.companyId, type, req.file.buffer)
+    created(res, photo)
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id/photos/:photoId', async (req, res, next) => {
+  try {
+    const { id, photoId } = parseParams(photoParamSchema, req)
+    await photoService.deletePhoto(photoId, id, req.companyId)
+    ok(res, { deleted: true })
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/reservations/reservation.schemas.edge.test.ts b/api/src/modules/reservations/reservation.schemas.edge.test.ts
new file mode 100644
index 0000000..8e90e5b
--- /dev/null
+++ b/api/src/modules/reservations/reservation.schemas.edge.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { additionalDriverSchema, approvalSchema, createSchema, extendSchema, inspectionParamSchema, inspectionSchema, listQuerySchema, updateSchema } from './reservation.schemas'
+
+describe('reservation schemas edge cases', () => {
+  it('defaults reservation creation arrays and deposit while requiring cuid identifiers', () => {
+    const parsed = createSchema.parse({
+      vehicleId: 'ckvvehicle000000000000001',
+      customerId: 'ckvcustomer00000000000001',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    })
+
+    expect(parsed.depositAmount).toBe(0)
+    expect(parsed.selectedInsurancePolicyIds).toEqual([])
+    expect(parsed.additionalDrivers).toEqual([])
+    expect(createSchema.safeParse({ ...parsed, vehicleId: 'vehicle_1' }).success).toBe(false)
+  })
+
+  it('validates additional drivers and inspection damage defaults', () => {
+    expect(additionalDriverSchema.parse({ firstName: 'A', lastName: 'B', driverLicense: 'DL-1' })).toMatchObject({ driverLicense: 'DL-1' })
+    expect(additionalDriverSchema.safeParse({ firstName: '', lastName: 'B', driverLicense: 'DL-1' }).success).toBe(false)
+    expect(additionalDriverSchema.safeParse({ firstName: 'A', lastName: 'B', driverLicense: 'DL-1', licenseExpiry: 'tomorrow' }).success).toBe(false)
+
+    const parsed = inspectionSchema.parse({
+      fuelLevel: 'FULL',
+      damagePoints: [{ viewType: 'FRONT', x: 12.5, y: 42, damageType: 'SCRATCH' }],
+    })
+    expect(parsed.customerAgreed).toBe(false)
+    expect(parsed.damagePoints[0]).toMatchObject({ severity: 'MINOR', isPreExisting: false })
+    expect(inspectionSchema.safeParse({ fuelLevel: 'OVERFLOWING_WITH_OPTIMISM' }).success).toBe(false)
+  })
+
+  it('coerces list pagination and rejects unsafe update/extension payloads', () => {
+    expect(listQuerySchema.parse({ page: '3', pageSize: '50', status: 'CONFIRMED' })).toMatchObject({ page: 3, pageSize: 50 })
+    expect(listQuerySchema.parse({})).toMatchObject({ page: 1, pageSize: 20 })
+    expect(listQuerySchema.safeParse({ pageSize: 101 }).success).toBe(false)
+    expect(updateSchema.safeParse({ depositAmount: -1 }).success).toBe(false)
+    expect(extendSchema.safeParse({ newEndDate: '2026-07-05T10:00:00.000Z', reason: '' }).success).toBe(false)
+    expect(approvalSchema.parse({ approved: true })).toEqual({ approved: true })
+    expect(inspectionParamSchema.parse({ id: 'reservation_1', type: 'CHECKIN' })).toEqual({ id: 'reservation_1', type: 'CHECKIN' })
+  })
+})
diff --git a/api/src/modules/reservations/reservation.schemas.ts b/api/src/modules/reservations/reservation.schemas.ts
new file mode 100644
index 0000000..37ee45e
--- /dev/null
+++ b/api/src/modules/reservations/reservation.schemas.ts
@@ -0,0 +1,81 @@
+import { z } from 'zod'
+import { textField, optionalTextField, optionalEmailField, upperField, optionalUpperField, optionalPhoneField } from '../../lib/zodValidation'
+
+export const additionalDriverSchema = z.object({
+  firstName:       textField('name'),
+  lastName:        textField('name'),
+  email:           optionalEmailField(),
+  phone:           optionalPhoneField(),
+  driverLicense:   upperField('driverLicenseNumber'),
+  licenseExpiry:   z.string().datetime().optional(),
+  licenseIssuedAt: z.string().datetime().optional(),
+  dateOfBirth:     z.string().datetime().optional(),
+  nationality:     optionalTextField('nationality'),
+})
+
+export const inspectionSchema = z.object({
+  mileage:          z.number().int().optional(),
+  fuelLevel:        z.enum(['FULL', 'SEVEN_EIGHTHS', 'THREE_QUARTERS', 'FIVE_EIGHTHS', 'HALF', 'THREE_EIGHTHS', 'QUARTER', 'ONE_EIGHTH', 'EMPTY']),
+  fuelCharge:       z.number().int().min(0).optional(),
+  generalCondition: z.string().optional(),
+  employeeNotes:    z.string().optional(),
+  customerAgreed:   z.boolean().default(false),
+  damagePoints: z.array(z.object({
+    viewType:      z.enum(['TOP', 'FRONT', 'REAR', 'LEFT', 'RIGHT']),
+    x:             z.number(),
+    y:             z.number(),
+    damageType:    z.enum(['SCRATCH', 'DENT', 'CRACK', 'CHIP', 'MISSING', 'STAIN', 'OTHER']),
+    severity:      z.enum(['MINOR', 'MODERATE', 'MAJOR']).default('MINOR'),
+    description:   z.string().optional(),
+    isPreExisting: z.boolean().default(false),
+  })).default([]),
+})
+
+export const createSchema = z.object({
+  vehicleId:      z.string().cuid(),
+  customerId:     z.string().cuid(),
+  startDate:      z.string().datetime(),
+  endDate:        z.string().datetime(),
+  pickupLocation: optionalTextField('pickupLocation'),
+  returnLocation: optionalTextField('returnLocation'),
+  offerId:        z.string().cuid().optional(),
+  promoCodeUsed:  z.string().optional(),
+  depositAmount:  z.number().int().min(0).default(0),
+  paymentMode:    z.string().max(50).optional(),
+  notes:          z.string().optional(),
+  selectedInsurancePolicyIds: z.array(z.string()).default([]),
+  additionalDrivers:          z.array(additionalDriverSchema).default([]),
+})
+
+export const updateSchema = z.object({
+  startDate:          z.string().datetime().optional(),
+  endDate:            z.string().datetime().optional(),
+  pickupLocation:     optionalTextField('pickupLocation').nullable(),
+  returnLocation:     optionalTextField('returnLocation').nullable(),
+  depositAmount:      z.number().int().min(0).optional(),
+  notes:              z.string().optional().nullable(),
+  paymentMode:        z.string().max(50).optional().nullable(),
+  damageChargeAmount: z.number().int().min(0).optional(),
+  damageChargeNote:   z.string().optional().nullable(),
+})
+
+export const listQuerySchema = z.object({
+  status:    z.string().optional(),
+  vehicleId: z.string().optional(),
+  source:    z.string().optional(),
+  startDate: z.string().optional(),
+  endDate:   z.string().optional(),
+  page:      z.coerce.number().int().min(1).default(1),
+  pageSize:  z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const checkinSchema     = z.object({ mileage: z.number().int().optional() })
+export const checkoutSchema    = z.object({ mileage: z.number().int().optional() })
+export const extendSchema      = z.object({ newEndDate: z.string().datetime(), reason: z.string().min(1) })
+export const cancelSchema      = z.object({ reason: z.string().optional() })
+export const approvalSchema    = z.object({ approved: z.boolean(), note: z.string().optional() })
+export const inspectionTypeParam = z.enum(['CHECKIN', 'CHECKOUT'])
+
+export const idParamSchema         = z.object({ id: z.string() })
+export const driverParamSchema     = z.object({ id: z.string(), driverId: z.string() })
+export const inspectionParamSchema = z.object({ id: z.string(), type: z.string() })
diff --git a/api/src/modules/reservations/reservation.service.ts b/api/src/modules/reservations/reservation.service.ts
new file mode 100644
index 0000000..49d4698
--- /dev/null
+++ b/api/src/modules/reservations/reservation.service.ts
@@ -0,0 +1,216 @@
+import { prisma } from '../../lib/prisma'
+import { AppError } from '../../http/errors'
+import { validateAndFlagLicense } from '../../services/licenseValidationService'
+import { applyPricingRules, calculateUpdatedInsuranceCharge, calculateUpdatedAdditionalDriverCharge } from './reservation.pricing.service'
+import { applyInsurancesToReservation } from './reservation.insurance.service'
+import { applyAdditionalDriversToReservation } from './reservation.additional-driver.service'
+import { parseReservationExtras, normalizeOptionalString, serializeReservationForDashboard, buildReservationWorkflow } from './reservation.presenter'
+import * as repo from './reservation.repo'
+
+export async function listReservations(companyId: string, query: {
+  status?: string; vehicleId?: string; source?: string
+  startDate?: string; endDate?: string; page?: number; pageSize?: number
+}) {
+  const page     = query.page     ?? 1
+  const pageSize = query.pageSize ?? 20
+  const where: any = { companyId }
+  if (query.status)    where.status    = query.status
+  if (query.vehicleId) where.vehicleId = query.vehicleId
+  if (query.source)    where.source    = query.source
+  if (query.startDate) where.startDate = { gte: new Date(query.startDate) }
+  if (query.endDate)   where.endDate   = { lte: new Date(query.endDate) }
+
+  const [reservations, total] = await repo.findMany(where, (page - 1) * pageSize, pageSize)
+  return {
+    data: reservations.map(serializeReservationForDashboard),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize),
+  }
+}
+
+export async function getReservation(id: string, companyId: string) {
+  const reservation = await repo.findById(id, companyId)
+  return serializeReservationForDashboard(reservation)
+}
+
+export async function createReservation(companyId: string, body: {
+  vehicleId: string; customerId: string; startDate: string; endDate: string
+  pickupLocation?: string; returnLocation?: string; offerId?: string
+  promoCodeUsed?: string; depositAmount?: number; paymentMode?: string; notes?: string
+  selectedInsurancePolicyIds?: string[]; additionalDrivers?: any[]
+}) {
+  const vehicle = await repo.findVehicle(body.vehicleId, companyId)
+  await repo.findCustomer(body.customerId, companyId)
+
+  const start     = new Date(body.startDate)
+  const end       = new Date(body.endDate)
+  const totalDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
+
+  const conflict = await repo.findConflict(body.vehicleId, start, end)
+  if (conflict) throw new AppError('Vehicle is not available for the selected dates', 409, 'vehicle_unavailable')
+
+  let discountAmount = 0
+  let offerId: string | null = body.offerId ?? null
+
+  if (body.promoCodeUsed) {
+    const offer = await repo.findActiveOffer(companyId, body.promoCodeUsed)
+    if (offer) {
+      offerId = offer.id
+      const base = vehicle.dailyRate * totalDays
+      if (offer.type === 'PERCENTAGE')     discountAmount = Math.round(base * offer.discountValue / 100)
+      else if (offer.type === 'FIXED_AMOUNT') discountAmount = offer.discountValue
+      else if (offer.type === 'FREE_DAY')     discountAmount = vehicle.dailyRate * offer.discountValue
+      await repo.incrementOfferRedemption(offer.id)
+    }
+  }
+
+  const depositAmount = body.depositAmount ?? 0
+  const additionalDriversList = body.additionalDrivers ?? []
+  const baseAmount = vehicle.dailyRate * totalDays
+  const { applied, total: pricingTotal } = await applyPricingRules(companyId, body.customerId, additionalDriversList, vehicle.dailyRate, totalDays)
+  const totalAmount = baseAmount - discountAmount + pricingTotal + depositAmount
+
+  const reservation = await repo.create({
+    companyId,
+    vehicleId:      body.vehicleId,
+    customerId:     body.customerId,
+    startDate:      start,
+    endDate:        end,
+    pickupLocation: body.pickupLocation ?? null,
+    returnLocation: body.returnLocation ?? null,
+    offerId,
+    promoCodeUsed:  body.promoCodeUsed ?? null,
+    source:         'DASHBOARD',
+    dailyRate:      vehicle.dailyRate,
+    discountAmount,
+    totalDays,
+    totalAmount,
+    depositAmount,
+    notes:          body.notes ?? null,
+    extras:         body.paymentMode ? { paymentMode: body.paymentMode } : undefined,
+    pricingRulesApplied: applied,
+    pricingRulesTotal:   pricingTotal,
+  })
+
+  const insuranceIds = body.selectedInsurancePolicyIds ?? []
+  const additionalDrivers = body.additionalDrivers ?? []
+  if (insuranceIds.length > 0) {
+    await applyInsurancesToReservation(reservation.id, companyId, insuranceIds, totalDays, baseAmount)
+  }
+  if (additionalDrivers.length > 0) {
+    await applyAdditionalDriversToReservation(reservation.id, companyId, additionalDrivers, totalDays)
+  }
+
+  await validateAndFlagLicense(body.customerId, companyId).catch(() => null)
+  return reservation
+}
+
+export async function updateReservation(id: string, companyId: string, body: {
+  startDate?: string; endDate?: string; pickupLocation?: string | null
+  returnLocation?: string | null; depositAmount?: number; notes?: string | null
+  paymentMode?: string | null; damageChargeAmount?: number; damageChargeNote?: string | null
+}) {
+  const reservation = await repo.findByIdWithRelations(id, companyId)
+
+  if (reservation.status === 'CANCELLED' || reservation.status === 'NO_SHOW') {
+    throw new AppError('This reservation can no longer be edited', 400, 'invalid_status')
+  }
+
+  const workflow = buildReservationWorkflow(reservation)
+  const requested = Object.keys(body).filter((k) => body[k as keyof typeof body] !== undefined)
+  const bookingFields = ['startDate', 'endDate', 'pickupLocation', 'returnLocation', 'depositAmount', 'notes', 'paymentMode']
+  const returnFields  = ['returnLocation', 'damageChargeAmount', 'damageChargeNote']
+
+  if (!workflow.coreEditable && !workflow.returnEditable) {
+    throw new AppError('This reservation is locked for editing', 400, 'reservation_locked')
+  }
+
+  if (workflow.coreEditable) {
+    const invalid = requested.filter((f) => !bookingFields.includes(f))
+    if (invalid.length > 0) throw new AppError('Only booking details can be edited at this stage', 400, 'invalid_fields')
+
+    const nextStart = body.startDate ? new Date(body.startDate) : reservation.startDate
+    const nextEnd   = body.endDate   ? new Date(body.endDate)   : reservation.endDate
+    const totalDays = Math.ceil((nextEnd.getTime() - nextStart.getTime()) / (1000 * 60 * 60 * 24))
+
+    if (nextEnd <= nextStart || totalDays <= 0) throw new AppError('End date must be after start date', 400, 'invalid_dates')
+
+    if (body.startDate || body.endDate) {
+      const conflict = await repo.findConflict(reservation.vehicleId, nextStart, nextEnd, reservation.id)
+      if (conflict) throw new AppError('Vehicle is not available for the selected dates', 409, 'vehicle_unavailable')
+    }
+
+    const baseAmount = reservation.dailyRate * totalDays
+    const { applied, total: pricingRulesTotal } = await applyPricingRules(
+      companyId,
+      reservation.customerId,
+      reservation.additionalDrivers.map((d: any) => ({ dateOfBirth: d.dateOfBirth, licenseIssuedAt: d.licenseIssuedAt })),
+      reservation.dailyRate,
+      totalDays,
+    )
+
+    const insuranceUpdates = reservation.insurances.map((ins: any) => ({
+      id: ins.id,
+      totalCharge: calculateUpdatedInsuranceCharge(ins.chargeType, ins.chargeValue, totalDays, baseAmount),
+    }))
+    const driverUpdates = reservation.additionalDrivers.map((d: any) => ({
+      id: d.id,
+      totalCharge: calculateUpdatedAdditionalDriverCharge(d.chargeType, d.chargeValue, totalDays),
+    }))
+
+    const insuranceTotal       = insuranceUpdates.reduce((s: number, i: any) => s + i.totalCharge, 0)
+    const additionalDriverTotal = driverUpdates.reduce((s: number, d: any) => s + d.totalCharge, 0)
+    const depositAmount        = body.depositAmount ?? reservation.depositAmount
+    const totalAmount = baseAmount - reservation.discountAmount + pricingRulesTotal + insuranceTotal + additionalDriverTotal + depositAmount
+
+    const extras = parseReservationExtras(reservation.extras)
+    if (body.paymentMode !== undefined) {
+      const next = normalizeOptionalString(body.paymentMode)
+      if (next) extras.paymentMode = next
+      else delete extras.paymentMode
+    }
+
+    await prisma.$transaction([
+      prisma.reservation.update({
+        where: { id: reservation.id },
+        data: {
+          startDate:  nextStart,
+          endDate:    nextEnd,
+          totalDays,
+          pickupLocation: body.pickupLocation !== undefined ? normalizeOptionalString(body.pickupLocation) : reservation.pickupLocation,
+          returnLocation: body.returnLocation !== undefined ? normalizeOptionalString(body.returnLocation) : reservation.returnLocation,
+          depositAmount,
+          notes: body.notes !== undefined ? normalizeOptionalString(body.notes) : reservation.notes,
+          pricingRulesApplied: applied,
+          pricingRulesTotal,
+          insuranceTotal,
+          additionalDriverTotal,
+          totalAmount,
+          extras: (Object.keys(extras).length > 0 ? extras : {}) as any,
+        },
+      }),
+      ...insuranceUpdates.map((ins: any) =>
+        prisma.reservationInsurance.update({ where: { id: ins.id }, data: { totalCharge: ins.totalCharge } })
+      ),
+      ...driverUpdates.map((d: any) =>
+        prisma.additionalDriver.update({ where: { id: d.id }, data: { totalCharge: d.totalCharge } })
+      ),
+    ])
+  } else {
+    const invalid = requested.filter((f) => !returnFields.includes(f))
+    if (invalid.length > 0) throw new AppError('Only return details can be edited after vehicle return', 400, 'invalid_fields')
+
+    await prisma.reservation.update({
+      where: { id: reservation.id },
+      data: {
+        returnLocation:     body.returnLocation !== undefined ? normalizeOptionalString(body.returnLocation) : reservation.returnLocation,
+        damageChargeAmount: body.damageChargeAmount !== undefined ? body.damageChargeAmount : reservation.damageChargeAmount,
+        damageChargeNote:   body.damageChargeNote  !== undefined ? normalizeOptionalString(body.damageChargeNote) : reservation.damageChargeNote,
+      },
+    })
+  }
+
+  return repo.findById(id, companyId).then(serializeReservationForDashboard)
+}
diff --git a/api/src/modules/reservations/reservation.test.ts b/api/src/modules/reservations/reservation.test.ts
new file mode 100644
index 0000000..fa74cf9
--- /dev/null
+++ b/api/src/modules/reservations/reservation.test.ts
@@ -0,0 +1,358 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { AppError } from '../../http/errors'
+
+// ── repo mock ──────────────────────────────────────────────────────────────
+vi.mock('./reservation.repo', () => ({
+  findMany: vi.fn(),
+  findById: vi.fn(),
+  findByIdSimple: vi.fn(),
+  findByIdWithRelations: vi.fn(),
+  findByIdForCheckout: vi.fn(),
+  findForLicenseCheck: vi.fn(),
+  findForClose: vi.fn(),
+  findForInspection: vi.fn(),
+  findConflict: vi.fn(),
+  create: vi.fn(),
+  updateById: vi.fn(),
+  findActiveOffer: vi.fn(),
+  incrementOfferRedemption: vi.fn(),
+  findVehicle: vi.fn(),
+  findCustomer: vi.fn(),
+  findCustomerById: vi.fn(),
+  updateVehicleStatus: vi.fn(),
+  findCompanyWithBrand: vi.fn(),
+  findBrandLocale: vi.fn(),
+  findInspections: vi.fn(),
+  findAdditionalDriver: vi.fn(),
+  updateAdditionalDriver: vi.fn(),
+}))
+
+vi.mock('./reservation.pricing.service', () => ({
+  applyPricingRules: vi.fn(),
+  calculateUpdatedInsuranceCharge: vi.fn(),
+  calculateUpdatedAdditionalDriverCharge: vi.fn(),
+}))
+
+vi.mock('./reservation.insurance.service', () => ({
+  applyInsurancesToReservation: vi.fn(),
+}))
+
+vi.mock('./reservation.additional-driver.service', () => ({
+  applyAdditionalDriversToReservation: vi.fn(),
+  approveAdditionalDriver: vi.fn(),
+}))
+
+vi.mock('../../services/licenseValidationService', () => ({
+  validateAndFlagLicense: vi.fn().mockResolvedValue(undefined),
+  validateLicense: vi.fn(),
+}))
+
+vi.mock('../../services/notificationService', () => ({
+  sendNotification: vi.fn().mockResolvedValue(undefined),
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    reservation: { update: vi.fn() },
+    damageInspection: { upsert: vi.fn() },
+    damageReport: { upsert: vi.fn() },
+  },
+}))
+
+vi.mock('./reservation.presenter', () => ({
+  serializeReservationForDashboard: vi.fn((r) => r),
+  parseReservationExtras: vi.fn(() => ({})),
+  buildReservationWorkflow: vi.fn(),
+  normalizeOptionalString: vi.fn((s) => s),
+}))
+
+import * as repo from './reservation.repo'
+import * as pricingService from './reservation.pricing.service'
+import * as insuranceService from './reservation.insurance.service'
+import * as additionalDriverService from './reservation.additional-driver.service'
+import { validateLicense } from '../../services/licenseValidationService'
+import { sendNotification } from '../../services/notificationService'
+import { buildReservationWorkflow } from './reservation.presenter'
+import { createReservation } from './reservation.service'
+import { confirmReservation, checkinReservation, checkoutReservation, closeReservation } from './reservation.lifecycle.service'
+import { approveAdditionalDriver } from './reservation.additional-driver.service'
+
+const COMPANY = 'company-1'
+const RES_ID  = 'reservation-1'
+
+function makeVehicle(overrides: object = {}) {
+  return { id: 'vehicle-1', dailyRate: 100, status: 'AVAILABLE', isPublished: true, mileage: 50000, ...overrides }
+}
+
+function makeReservation(overrides: object = {}) {
+  return {
+    id: RES_ID,
+    companyId: COMPANY,
+    vehicleId: 'vehicle-1',
+    customerId: 'customer-1',
+    status: 'DRAFT',
+    startDate: new Date('2025-06-01'),
+    endDate: new Date('2025-06-04'),
+    totalDays: 3,
+    dailyRate: 100,
+    depositAmount: 0,
+    discountAmount: 0,
+    totalAmount: 300,
+    additionalDrivers: [],
+    insurances: [],
+    customer: { firstName: 'Ali', lastName: 'Ben', email: 'ali@test.com', licenseExpiry: null, licenseValidationStatus: 'APPROVED' },
+    vehicle: { year: 2022, make: 'Toyota', model: 'Camry' },
+    extras: {},
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('createReservation', () => {
+  it('creates a reservation and returns it', async () => {
+    vi.mocked(repo.findVehicle).mockResolvedValue(makeVehicle())
+    vi.mocked(repo.findCustomer).mockResolvedValue({ id: 'customer-1' } as any)
+    vi.mocked(repo.findConflict).mockResolvedValue(null)
+    vi.mocked(repo.findActiveOffer).mockResolvedValue(null)
+    vi.mocked(pricingService.applyPricingRules).mockResolvedValue({ applied: [], total: 0 })
+    vi.mocked(repo.create).mockResolvedValue(makeReservation() as any)
+
+    const result = await createReservation(COMPANY, {
+      vehicleId: 'vehicle-1',
+      customerId: 'customer-1',
+      startDate: '2025-06-01T00:00:00.000Z',
+      endDate: '2025-06-04T00:00:00.000Z',
+      depositAmount: 0,
+      selectedInsurancePolicyIds: [],
+      additionalDrivers: [],
+    })
+
+    expect(repo.create).toHaveBeenCalledOnce()
+    expect(result.id).toBe(RES_ID)
+  })
+
+  it('throws conflict error when vehicle is unavailable', async () => {
+    vi.mocked(repo.findVehicle).mockResolvedValue(makeVehicle())
+    vi.mocked(repo.findCustomer).mockResolvedValue({ id: 'customer-1' } as any)
+    vi.mocked(repo.findConflict).mockResolvedValue({ id: 'other-res' } as any)
+
+    await expect(
+      createReservation(COMPANY, {
+        vehicleId: 'vehicle-1',
+        customerId: 'customer-1',
+        startDate: '2025-06-01T00:00:00.000Z',
+        endDate: '2025-06-04T00:00:00.000Z',
+        selectedInsurancePolicyIds: [],
+        additionalDrivers: [],
+      }),
+    ).rejects.toThrow('Vehicle is not available for the selected dates')
+
+    expect(repo.create).not.toHaveBeenCalled()
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('confirmReservation', () => {
+  it('confirms a DRAFT reservation', async () => {
+    const res = makeReservation({ status: 'DRAFT', pickupLocation: 'Casablanca Airport Terminal 1' })
+    vi.mocked(repo.findByIdSimple).mockResolvedValue(res as any)
+    vi.mocked(repo.findForLicenseCheck).mockResolvedValue({
+      ...res,
+      customer: { ...res.customer, licenseExpiry: null, licenseValidationStatus: 'APPROVED' },
+      additionalDrivers: [],
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...res, status: 'CONFIRMED' } as any)
+    vi.mocked(repo.findCustomerById).mockResolvedValue({ email: 'ali@test.com', firstName: 'Ali' } as any)
+    vi.mocked(repo.findCompanyWithBrand).mockResolvedValue({ name: 'TestCo', brand: { displayName: 'TestCo', defaultLocale: 'fr' } } as any)
+    vi.mocked(repo.findVehicle).mockResolvedValue({ year: 2022, make: 'Toyota', model: 'Camry' } as any)
+
+    const result = await confirmReservation(RES_ID, COMPANY)
+
+    expect(repo.updateById).toHaveBeenCalledWith(RES_ID, { status: 'CONFIRMED' })
+    expect(sendNotification).toHaveBeenCalledWith(expect.objectContaining({
+      templateKey: 'booking.confirmed',
+      templateVariables: expect.objectContaining({
+        pickupLocation: 'Casablanca Airport Terminal 1',
+        startDate: expect.objectContaining({
+          type: 'date',
+          value: res.startDate,
+        }),
+        endDate: expect.objectContaining({
+          type: 'date',
+          value: res.endDate,
+        }),
+      }),
+    }))
+    expect((result as any).status).toBe('CONFIRMED')
+  })
+
+  it('rejects non-DRAFT reservation', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue(makeReservation({ status: 'CONFIRMED' }) as any)
+
+    await expect(confirmReservation(RES_ID, COMPANY)).rejects.toThrow('Only DRAFT reservations can be confirmed')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('checkinReservation', () => {
+  it('transitions CONFIRMED → ACTIVE and marks vehicle RENTED', async () => {
+    const res = makeReservation({ status: 'CONFIRMED' })
+    vi.mocked(repo.findByIdSimple).mockResolvedValue(res as any)
+    vi.mocked(repo.findForLicenseCheck).mockResolvedValue({
+      ...res,
+      customer: { ...res.customer, licenseExpiry: null, licenseValidationStatus: 'APPROVED' },
+      additionalDrivers: [],
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...res, status: 'ACTIVE' } as any)
+    vi.mocked(repo.updateVehicleStatus).mockResolvedValue(undefined as any)
+
+    await checkinReservation(RES_ID, COMPANY, 55000)
+
+    expect(repo.updateById).toHaveBeenCalledWith(RES_ID, expect.objectContaining({ status: 'ACTIVE', checkInMileage: 55000 }))
+    expect(repo.updateVehicleStatus).toHaveBeenCalledWith('vehicle-1', 'RENTED')
+  })
+
+  it('rejects non-CONFIRMED reservation', async () => {
+    vi.mocked(repo.findByIdSimple).mockResolvedValue(makeReservation({ status: 'ACTIVE' }) as any)
+
+    await expect(checkinReservation(RES_ID, COMPANY)).rejects.toThrow('Only CONFIRMED reservations can be checked in')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('checkoutReservation', () => {
+  it('transitions ACTIVE → COMPLETED and marks vehicle RETURNED', async () => {
+    const res = makeReservation({ status: 'ACTIVE' })
+    vi.mocked(repo.findByIdForCheckout).mockResolvedValue(res as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...res, status: 'COMPLETED' } as any)
+    vi.mocked(repo.updateVehicleStatus).mockResolvedValue(undefined as any)
+    vi.mocked(repo.findCustomerById).mockResolvedValue({ email: 'ali@test.com', firstName: 'Ali' } as any)
+    vi.mocked(repo.findCompanyWithBrand).mockResolvedValue({ name: 'TestCo', brand: { displayName: 'TestCo', defaultLocale: 'fr' } } as any)
+
+    await checkoutReservation(RES_ID, COMPANY, 58000)
+
+    expect(repo.updateById).toHaveBeenCalledWith(RES_ID, expect.objectContaining({ status: 'COMPLETED', checkOutMileage: 58000 }))
+    expect(repo.updateVehicleStatus).toHaveBeenCalledWith('vehicle-1', 'RETURNED', 58000)
+  })
+
+  it('rejects non-ACTIVE reservation', async () => {
+    vi.mocked(repo.findByIdForCheckout).mockResolvedValue(makeReservation({ status: 'CONFIRMED' }) as any)
+
+    await expect(checkoutReservation(RES_ID, COMPANY)).rejects.toThrow('Only ACTIVE reservations can be checked out')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('closeReservation', () => {
+  it('closes a COMPLETED reservation', async () => {
+    const res = makeReservation({ status: 'COMPLETED' })
+    vi.mocked(repo.findForClose).mockResolvedValue(res as any)
+    vi.mocked(buildReservationWorkflow).mockReturnValue({ closed: false } as any)
+    const { prisma } = await import('../../lib/prisma')
+    vi.mocked(prisma.reservation.update).mockResolvedValue({ ...res, extras: { reservationClosedBy: 'Admin User' } } as any)
+
+    await closeReservation(RES_ID, COMPANY, 'Admin User')
+
+    expect(prisma.reservation.update).toHaveBeenCalledWith(
+      expect.objectContaining({ where: { id: RES_ID } }),
+    )
+  })
+
+  it('rejects already closed reservation', async () => {
+    vi.mocked(repo.findForClose).mockResolvedValue(makeReservation({ status: 'COMPLETED' }) as any)
+    vi.mocked(buildReservationWorkflow).mockReturnValue({ closed: true } as any)
+
+    await expect(closeReservation(RES_ID, COMPANY, 'Admin')).rejects.toThrow('already closed')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('approveAdditionalDriver', () => {
+  it('calls through to the additional driver service', async () => {
+    vi.mocked(additionalDriverService.approveAdditionalDriver).mockResolvedValue({ id: 'driver-1', approvedAt: new Date() } as any)
+
+    const result = await approveAdditionalDriver(RES_ID, 'driver-1', COMPANY, true, 'Looks good', 'Manager')
+
+    expect(additionalDriverService.approveAdditionalDriver).toHaveBeenCalledWith(RES_ID, 'driver-1', COMPANY, true, 'Looks good', 'Manager')
+    expect((result as any).id).toBe('driver-1')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('pricing rule application', () => {
+  it('applies pricing rules and adjusts totalAmount', async () => {
+    vi.mocked(repo.findVehicle).mockResolvedValue(makeVehicle({ dailyRate: 100 }))
+    vi.mocked(repo.findCustomer).mockResolvedValue({ id: 'customer-1' } as any)
+    vi.mocked(repo.findConflict).mockResolvedValue(null)
+    vi.mocked(repo.findActiveOffer).mockResolvedValue(null)
+    vi.mocked(pricingService.applyPricingRules).mockResolvedValue({ applied: [{ id: 'rule-1' }], total: 50 })
+    vi.mocked(repo.create).mockResolvedValue(makeReservation({ totalAmount: 350 }) as any)
+
+    await createReservation(COMPANY, {
+      vehicleId: 'vehicle-1',
+      customerId: 'customer-1',
+      startDate: '2025-06-01T00:00:00.000Z',
+      endDate: '2025-06-04T00:00:00.000Z',
+      selectedInsurancePolicyIds: [],
+      additionalDrivers: [],
+    })
+
+    expect(pricingService.applyPricingRules).toHaveBeenCalledOnce()
+    const createCall = vi.mocked(repo.create).mock.calls[0][0] as any
+    expect(createCall.pricingRulesApplied).toEqual([{ id: 'rule-1' }])
+    expect(createCall.totalAmount).toBe(350)
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('insurance application', () => {
+  it('calls applyInsurancesToReservation when insurance IDs are provided', async () => {
+    vi.mocked(repo.findVehicle).mockResolvedValue(makeVehicle())
+    vi.mocked(repo.findCustomer).mockResolvedValue({ id: 'customer-1' } as any)
+    vi.mocked(repo.findConflict).mockResolvedValue(null)
+    vi.mocked(repo.findActiveOffer).mockResolvedValue(null)
+    vi.mocked(pricingService.applyPricingRules).mockResolvedValue({ applied: [], total: 0 })
+    vi.mocked(repo.create).mockResolvedValue(makeReservation() as any)
+    vi.mocked(insuranceService.applyInsurancesToReservation).mockResolvedValue(undefined as any)
+
+    await createReservation(COMPANY, {
+      vehicleId: 'vehicle-1',
+      customerId: 'customer-1',
+      startDate: '2025-06-01T00:00:00.000Z',
+      endDate: '2025-06-04T00:00:00.000Z',
+      selectedInsurancePolicyIds: ['policy-1', 'policy-2'],
+      additionalDrivers: [],
+    })
+
+    expect(insuranceService.applyInsurancesToReservation).toHaveBeenCalledWith(
+      RES_ID, COMPANY, ['policy-1', 'policy-2'], 3, 300,
+    )
+  })
+
+  it('skips insurance call when no IDs provided', async () => {
+    vi.mocked(repo.findVehicle).mockResolvedValue(makeVehicle())
+    vi.mocked(repo.findCustomer).mockResolvedValue({ id: 'customer-1' } as any)
+    vi.mocked(repo.findConflict).mockResolvedValue(null)
+    vi.mocked(repo.findActiveOffer).mockResolvedValue(null)
+    vi.mocked(pricingService.applyPricingRules).mockResolvedValue({ applied: [], total: 0 })
+    vi.mocked(repo.create).mockResolvedValue(makeReservation() as any)
+
+    await createReservation(COMPANY, {
+      vehicleId: 'vehicle-1',
+      customerId: 'customer-1',
+      startDate: '2025-06-01T00:00:00.000Z',
+      endDate: '2025-06-04T00:00:00.000Z',
+      selectedInsurancePolicyIds: [],
+      additionalDrivers: [],
+    })
+
+    expect(insuranceService.applyInsurancesToReservation).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/modules/reviews/review.repo.edge.test.ts b/api/src/modules/reviews/review.repo.edge.test.ts
new file mode 100644
index 0000000..45556fe
--- /dev/null
+++ b/api/src/modules/reviews/review.repo.edge.test.ts
@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    review: { findMany: vi.fn(), count: vi.fn(), findFirst: vi.fn(), update: vi.fn() },
+    reservation: { update: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './review.repo'
+
+describe('review.repo edge behavior', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('merges caller filters with company boundary and paginates newest first', async () => {
+    vi.mocked(prisma.review.findMany).mockResolvedValue([] as never)
+    vi.mocked(prisma.review.count).mockResolvedValue(0 as never)
+
+    await repo.findMany('company_1', { overallRating: 5 }, 20, 10)
+
+    const where = { companyId: 'company_1', overallRating: 5 }
+    expect(prisma.review.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where,
+      skip: 20,
+      take: 10,
+      orderBy: { createdAt: 'desc' },
+    }))
+    expect(prisma.review.count).toHaveBeenCalledWith({ where })
+  })
+
+  it('computes rounded review stats while ignoring missing sub-ratings', async () => {
+    vi.mocked(prisma.review.findMany).mockResolvedValue([
+      { overallRating: 5, vehicleRating: 5, serviceRating: 4 },
+      { overallRating: 4, vehicleRating: null, serviceRating: 5 },
+      { overallRating: 2, vehicleRating: 3, serviceRating: null },
+    ] as never)
+
+    await expect(repo.getStats('company_1')).resolves.toEqual({
+      total: 3,
+      averageOverall: 3.7,
+      averageVehicle: 4,
+      averageService: 4.5,
+      byRating: { 1: 0, 2: 1, 3: 0, 4: 1, 5: 1 },
+    })
+  })
+
+  it('returns zeroed stats when no reviews exist', async () => {
+    vi.mocked(prisma.review.findMany).mockResolvedValue([] as never)
+
+    await expect(repo.getStats('company_1')).resolves.toEqual({
+      total: 0,
+      averageOverall: 0,
+      averageVehicle: 0,
+      averageService: 0,
+      byRating: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 },
+    })
+  })
+
+  it('writes the requested reminder timestamp field only', async () => {
+    const sentAt = new Date('2026-12-01T10:00:00.000Z')
+
+    await repo.sendReminder('reservation_1', sentAt, 'reviewFinalReminderSentAt')
+
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { reviewFinalReminderSentAt: sentAt },
+    })
+  })
+})
diff --git a/api/src/modules/reviews/review.repo.ts b/api/src/modules/reviews/review.repo.ts
new file mode 100644
index 0000000..8d0318b
--- /dev/null
+++ b/api/src/modules/reviews/review.repo.ts
@@ -0,0 +1,109 @@
+import { prisma } from '../../lib/prisma'
+
+const REVIEW_INCLUDE = {
+  reservation: {
+    select: {
+      id: true,
+      startDate: true,
+      endDate: true,
+      reviewToken: true,
+      reviewRequestSentAt: true,
+      reviewReminderSentAt: true,
+      reviewFinalReminderSentAt: true,
+      reviewPaused: true,
+      customer: {
+        select: {
+          id: true,
+          firstName: true,
+          lastName: true,
+          email: true,
+          reviewOptOut: true,
+        },
+      },
+      vehicle: {
+        select: {
+          id: true,
+          make: true,
+          model: true,
+          year: true,
+        },
+      },
+    },
+  },
+}
+
+export async function findMany(
+  companyId: string,
+  where: Record<string, unknown>,
+  skip: number,
+  take: number,
+) {
+  const baseWhere = { companyId, ...where }
+  return Promise.all([
+    prisma.review.findMany({
+      where: baseWhere,
+      include: REVIEW_INCLUDE,
+      skip,
+      take,
+      orderBy: { createdAt: 'desc' },
+    }),
+    prisma.review.count({ where: baseWhere }),
+  ])
+}
+
+export async function findById(id: string, companyId: string) {
+  return prisma.review.findFirst({
+    where: { id, companyId },
+    include: REVIEW_INCLUDE,
+  })
+}
+
+export async function updateById(id: string, data: Record<string, unknown>) {
+  return prisma.review.update({
+    where: { id },
+    data,
+    include: REVIEW_INCLUDE,
+  })
+}
+
+export async function getStats(companyId: string) {
+  const reviews = await prisma.review.findMany({
+    where: { companyId },
+    select: { overallRating: true, vehicleRating: true, serviceRating: true },
+  })
+
+  const total = reviews.length
+  const byRating: Record<number, number> = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
+
+  let sumOverall = 0
+  let sumVehicle = 0
+  let countVehicle = 0
+  let sumService = 0
+  let countService = 0
+
+  for (const r of reviews) {
+    sumOverall += r.overallRating
+    byRating[r.overallRating] = (byRating[r.overallRating] ?? 0) + 1
+    if (r.vehicleRating != null) { sumVehicle += r.vehicleRating; countVehicle++ }
+    if (r.serviceRating != null) { sumService += r.serviceRating; countService++ }
+  }
+
+  return {
+    total,
+    averageOverall: total > 0 ? Math.round((sumOverall / total) * 10) / 10 : 0,
+    averageVehicle: countVehicle > 0 ? Math.round((sumVehicle / countVehicle) * 10) / 10 : 0,
+    averageService: countService > 0 ? Math.round((sumService / countService) * 10) / 10 : 0,
+    byRating,
+  }
+}
+
+export async function sendReminder(
+  reservationId: string,
+  sentAt: Date,
+  field: 'reviewReminderSentAt' | 'reviewFinalReminderSentAt',
+) {
+  return prisma.reservation.update({
+    where: { id: reservationId },
+    data: { [field]: sentAt },
+  })
+}
diff --git a/api/src/modules/reviews/review.routes.ts b/api/src/modules/reviews/review.routes.ts
new file mode 100644
index 0000000..5a1cb92
--- /dev/null
+++ b/api/src/modules/reviews/review.routes.ts
@@ -0,0 +1,54 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok } from '../../http/respond'
+import * as service from './review.service'
+import { replySchema, listQuerySchema, idParamSchema } from './review.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    const result = await service.listReviews(req.companyId, query)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.get('/stats', async (req, res, next) => {
+  try {
+    const stats = await service.getStats(req.companyId)
+    ok(res, stats)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const review = await service.getReview(id, req.companyId)
+    ok(res, review)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/reply', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { companyReply } = parseBody(replySchema, req)
+    const updated = await service.replyToReview(id, req.companyId, companyReply)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/remind', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const result = await service.sendReviewReminder(id, req.companyId)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/reviews/review.schemas.edge.test.ts b/api/src/modules/reviews/review.schemas.edge.test.ts
new file mode 100644
index 0000000..0c37b10
--- /dev/null
+++ b/api/src/modules/reviews/review.schemas.edge.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { replySchema, listQuerySchema } from './review.schemas'
+
+describe('review schemas', () => {
+  it('requires a non-empty company reply', () => {
+    expect(() => replySchema.parse({ companyReply: '' })).toThrow()
+    expect(replySchema.parse({ companyReply: 'Thank you for the feedback.' })).toEqual({ companyReply: 'Thank you for the feedback.' })
+  })
+
+  it('coerces rating query values to bounded integers', () => {
+    expect(listQuerySchema.parse({ rating: '5', page: '3', pageSize: '10' })).toEqual({
+      rating: 5,
+      page: 3,
+      pageSize: 10,
+    })
+  })
+
+  it('rejects ratings outside the public five-star scale', () => {
+    expect(() => listQuerySchema.parse({ rating: '0' })).toThrow()
+    expect(() => listQuerySchema.parse({ rating: '6' })).toThrow()
+  })
+
+  it('defaults pagination when filters are omitted', () => {
+    expect(listQuerySchema.parse({})).toEqual({ page: 1, pageSize: 20 })
+  })
+})
diff --git a/api/src/modules/reviews/review.schemas.ts b/api/src/modules/reviews/review.schemas.ts
new file mode 100644
index 0000000..0ea41ce
--- /dev/null
+++ b/api/src/modules/reviews/review.schemas.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+export const replySchema = z.object({
+  companyReply: z.string().min(1),
+})
+
+export const listQuerySchema = z.object({
+  rating:   z.coerce.number().int().min(1).max(5).optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const idParamSchema = z.object({
+  id: z.string(),
+})
diff --git a/api/src/modules/reviews/review.service.test.ts b/api/src/modules/reviews/review.service.test.ts
new file mode 100644
index 0000000..4d72020
--- /dev/null
+++ b/api/src/modules/reviews/review.service.test.ts
@@ -0,0 +1,128 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../services/notificationService', () => ({
+  sendTransactionalEmail: vi.fn(),
+}))
+
+vi.mock('./review.repo', () => ({
+  findMany: vi.fn(),
+  findById: vi.fn(),
+  updateById: vi.fn(),
+  getStats: vi.fn(),
+  sendReminder: vi.fn(),
+}))
+
+vi.mock('../reservations/reservation.repo', () => ({
+  findCompanyWithBrand: vi.fn(),
+}))
+
+import { AppError, NotFoundError } from '../../http/errors'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import * as repo from './review.repo'
+import * as reservationRepo from '../reservations/reservation.repo'
+import { getReview, listReviews, replyToReview, sendReviewReminder } from './review.service'
+
+function reviewWithReservation(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'review_1',
+    reservation: {
+      id: 'reservation_1',
+      reviewPaused: false,
+      reviewReminderSentAt: null,
+      reviewToken: 'token_123',
+      customer: {
+        firstName: 'Nora',
+        email: 'nora@example.com',
+        reviewOptOut: false,
+      },
+      vehicle: {
+        year: 2025,
+        make: 'Dacia',
+        model: 'Duster',
+      },
+      ...overrides,
+    },
+  }
+}
+
+describe('review.service', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-08T12:00:00.000Z'))
+    process.env.MARKETPLACE_URL = 'https://market.example'
+  })
+
+  it('returns reviews with rating filters and pagination metadata', async () => {
+    vi.mocked(repo.findMany).mockResolvedValue([[{ id: 'review_1', overallRating: 5 }], 8] as never)
+
+    const result = await listReviews('company_1', { rating: 5, page: 2, pageSize: 3 })
+
+    expect(repo.findMany).toHaveBeenCalledWith('company_1', { overallRating: 5 }, 3, 3)
+    expect(result).toEqual({
+      data: [{ id: 'review_1', overallRating: 5 }],
+      meta: { total: 8, page: 2, pageSize: 3, totalPages: 3 },
+    })
+  })
+
+  it('throws for missing reviews and timestamps company replies on successful replies', async () => {
+    vi.mocked(repo.findById).mockResolvedValueOnce(null as never)
+    await expect(getReview('missing', 'company_1')).rejects.toBeInstanceOf(NotFoundError)
+
+    vi.mocked(repo.findById).mockResolvedValueOnce({ id: 'review_1' } as never)
+    vi.mocked(repo.updateById).mockResolvedValue({ id: 'review_1', companyReply: 'Thanks' } as never)
+
+    const updated = await replyToReview('review_1', 'company_1', 'Thanks')
+
+    expect(repo.updateById).toHaveBeenCalledWith('review_1', {
+      companyReply: 'Thanks',
+      companyRepliedAt: new Date('2026-06-08T12:00:00.000Z'),
+    })
+    expect(updated).toEqual({ id: 'review_1', companyReply: 'Thanks' })
+  })
+
+  it('sends the first review reminder with localized branding and records the first reminder field', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(reviewWithReservation() as never)
+    vi.mocked(reservationRepo.findCompanyWithBrand).mockResolvedValue({
+      name: 'Rental Co',
+      brand: { defaultLocale: 'en', displayName: 'RentalDriveGo' },
+    } as never)
+
+    const result = await sendReviewReminder('review_1', 'company_1')
+
+    expect(sendTransactionalEmail).toHaveBeenCalledWith(expect.objectContaining({
+      to: 'nora@example.com',
+      subject: expect.stringContaining('Dacia Duster'),
+      html: expect.stringContaining('https://market.example/review?token=token_123'),
+      text: expect.stringContaining('RentalDriveGo'),
+    }))
+    expect(repo.sendReminder).toHaveBeenCalledWith('reservation_1', new Date('2026-06-08T12:00:00.000Z'), 'reviewReminderSentAt')
+    expect(result).toEqual({ success: true, field: 'reviewReminderSentAt' })
+  })
+
+  it('uses the final reminder field after the first reminder has already been sent', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(reviewWithReservation({
+      reviewReminderSentAt: new Date('2026-06-01T00:00:00.000Z'),
+    }) as never)
+    vi.mocked(reservationRepo.findCompanyWithBrand).mockResolvedValue({ name: 'Rental Co', brand: null } as never)
+
+    const result = await sendReviewReminder('review_1', 'company_1')
+
+    expect(repo.sendReminder).toHaveBeenCalledWith('reservation_1', expect.any(Date), 'reviewFinalReminderSentAt')
+    expect(result.field).toBe('reviewFinalReminderSentAt')
+  })
+
+  it('blocks review reminders for paused reservations, opted-out customers, missing emails, and missing tokens', async () => {
+    vi.mocked(repo.findById)
+      .mockResolvedValueOnce(reviewWithReservation({ reviewPaused: true }) as never)
+      .mockResolvedValueOnce(reviewWithReservation({ customer: { firstName: 'Nora', email: 'nora@example.com', reviewOptOut: true } }) as never)
+      .mockResolvedValueOnce(reviewWithReservation({ customer: { firstName: 'Nora', email: null, reviewOptOut: false } }) as never)
+      .mockResolvedValueOnce(reviewWithReservation({ reviewToken: null }) as never)
+
+    await expect(sendReviewReminder('review_1', 'company_1')).rejects.toMatchObject({ error: 'review_paused' } satisfies Partial<AppError>)
+    await expect(sendReviewReminder('review_1', 'company_1')).rejects.toMatchObject({ error: 'opted_out' } satisfies Partial<AppError>)
+    await expect(sendReviewReminder('review_1', 'company_1')).rejects.toMatchObject({ error: 'no_email' } satisfies Partial<AppError>)
+    await expect(sendReviewReminder('review_1', 'company_1')).rejects.toMatchObject({ error: 'no_token' } satisfies Partial<AppError>)
+
+    expect(sendTransactionalEmail).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/modules/reviews/review.service.ts b/api/src/modules/reviews/review.service.ts
new file mode 100644
index 0000000..63677b4
--- /dev/null
+++ b/api/src/modules/reviews/review.service.ts
@@ -0,0 +1,76 @@
+import { NotFoundError, AppError } from '../../http/errors'
+import { sendTransactionalEmail } from '../../services/notificationService'
+import { reviewRequestEmail, type Lang } from '../../lib/emailTranslations'
+import * as repo from './review.repo'
+import * as reservationRepo from '../reservations/reservation.repo'
+
+export async function listReviews(
+  companyId: string,
+  query: { rating?: number; page: number; pageSize: number },
+) {
+  const { rating, page, pageSize } = query
+  const where: Record<string, unknown> = {}
+  if (rating != null) where.overallRating = rating
+
+  const [reviews, total] = await repo.findMany(companyId, where, (page - 1) * pageSize, pageSize)
+  return {
+    data: reviews,
+    meta: { total, page, pageSize, totalPages: Math.ceil(total / pageSize) },
+  }
+}
+
+export async function getReview(id: string, companyId: string) {
+  const review = await repo.findById(id, companyId)
+  if (!review) throw new NotFoundError('Review not found')
+  return review
+}
+
+export async function replyToReview(id: string, companyId: string, companyReply: string) {
+  const review = await repo.findById(id, companyId)
+  if (!review) throw new NotFoundError('Review not found')
+
+  return repo.updateById(id, {
+    companyReply,
+    companyRepliedAt: new Date(),
+  })
+}
+
+export async function getStats(companyId: string) {
+  return repo.getStats(companyId)
+}
+
+export async function sendReviewReminder(id: string, companyId: string) {
+  const review = await repo.findById(id, companyId)
+  if (!review) throw new NotFoundError('Review not found')
+
+  const reservation = review.reservation as any
+  if (!reservation) throw new AppError('Review has no linked reservation', 400, 'no_reservation')
+  if (reservation.reviewPaused) throw new AppError('Review requests are paused for this reservation', 400, 'review_paused')
+
+  const customer = reservation.customer
+  if (!customer || customer.reviewOptOut) throw new AppError('Customer has opted out of review requests', 400, 'opted_out')
+  if (!customer.email) throw new AppError('Customer has no email address', 400, 'no_email')
+  if (!reservation.reviewToken) throw new AppError('No review token available for this reservation', 400, 'no_token')
+
+  // Determine which reminder field to update
+  const field: 'reviewReminderSentAt' | 'reviewFinalReminderSentAt' =
+    reservation.reviewReminderSentAt ? 'reviewFinalReminderSentAt' : 'reviewReminderSentAt'
+
+  const company = await reservationRepo.findCompanyWithBrand(companyId)
+  const lang = (company?.brand?.defaultLocale ?? 'fr') as Lang
+  const companyName = company?.brand?.displayName ?? company?.name ?? 'the rental company'
+  const vehicle = reservation.vehicle
+  const vehicleLabel = vehicle ? `${vehicle.year} ${vehicle.make} ${vehicle.model}` : 'your rental vehicle'
+  const reviewUrl = `${process.env.MARKETPLACE_URL ?? 'http://localhost:3000'}/review?token=${reservation.reviewToken}`
+
+  await sendTransactionalEmail({
+    to: customer.email,
+    subject: reviewRequestEmail.subject(vehicleLabel, lang),
+    html: reviewRequestEmail.html({ firstName: customer.firstName, companyName, vehicleLabel, reviewUrl }, lang),
+    text: reviewRequestEmail.text({ firstName: customer.firstName, companyName, vehicleLabel, reviewUrl }, lang),
+  })
+
+  await repo.sendReminder(reservation.id, new Date(), field)
+
+  return { success: true, field }
+}
diff --git a/api/src/modules/site/site.presenter.test.ts b/api/src/modules/site/site.presenter.test.ts
new file mode 100644
index 0000000..d0ed3ac
--- /dev/null
+++ b/api/src/modules/site/site.presenter.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { presentBrand } from './site.presenter'
+
+describe('site.presenter', () => {
+  it('exposes only public brand and company fields for anonymous site clients', () => {
+    const result = presentBrand({
+      id: 'company_1',
+      slug: 'atlas-cars',
+      name: 'Atlas Cars',
+      phone: '+212600000000',
+      brand: {
+        displayName: 'Atlas Cars',
+        tagline: 'Premium rentals',
+        logoUrl: 'https://cdn.test/logo.png',
+        amanpaySecretKey: 'must-not-leak',
+        amanpayMerchantId: 'must-not-leak',
+        paypalEmail: 'billing@example.com',
+        paymentMethodsEnabled: ['PAYPAL'],
+        defaultLocale: 'fr',
+        defaultCurrency: 'MAD',
+        isListedOnMarketplace: true,
+      },
+    })
+
+    expect(result).toMatchObject({
+      company: { id: 'company_1', slug: 'atlas-cars', name: 'Atlas Cars', phone: '+212600000000' },
+      brand: {
+        displayName: 'Atlas Cars',
+        tagline: 'Premium rentals',
+        logoUrl: 'https://cdn.test/logo.png',
+        paypalEmail: 'billing@example.com',
+        paymentMethodsEnabled: ['PAYPAL'],
+        defaultLocale: 'fr',
+        defaultCurrency: 'MAD',
+        isListedOnMarketplace: true,
+      },
+    })
+    expect(result.brand).not.toHaveProperty('amanpaySecretKey')
+    expect(result.brand).not.toHaveProperty('amanpayMerchantId')
+  })
+
+  it('returns a null brand when company branding has not been configured', () => {
+    expect(presentBrand({ id: 'company_1', slug: 'atlas-cars', name: 'Atlas Cars', phone: null, brand: null })).toEqual({
+      company: { id: 'company_1', slug: 'atlas-cars', name: 'Atlas Cars', phone: null },
+      brand: null,
+    })
+  })
+})
diff --git a/api/src/modules/site/site.presenter.ts b/api/src/modules/site/site.presenter.ts
new file mode 100644
index 0000000..cfbbc36
--- /dev/null
+++ b/api/src/modules/site/site.presenter.ts
@@ -0,0 +1,81 @@
+export function presentBrand(company: {
+  id: string; slug: string; name: string; phone: string | null; brand: any
+}) {
+  const brand = company.brand
+  return {
+    company: { id: company.id, slug: company.slug, name: company.name, phone: company.phone },
+    brand: brand ? {
+      displayName: brand.displayName,
+      tagline: brand.tagline,
+      logoUrl: brand.logoUrl,
+      faviconUrl: brand.faviconUrl,
+      heroImageUrl: brand.heroImageUrl,
+      primaryColor: brand.primaryColor,
+      accentColor: brand.accentColor,
+      subdomain: brand.subdomain,
+      customDomain: brand.customDomain,
+      customDomainVerified: brand.customDomainVerified,
+      customDomainAddedAt: brand.customDomainAddedAt,
+      publicEmail: brand.publicEmail,
+      publicPhone: brand.publicPhone,
+      publicAddress: brand.publicAddress,
+      publicCity: brand.publicCity,
+      publicCountry: brand.publicCountry,
+      websiteUrl: brand.websiteUrl,
+      whatsappNumber: brand.whatsappNumber,
+      facebookUrl: brand.facebookUrl,
+      instagramUrl: brand.instagramUrl,
+      defaultLocale: brand.defaultLocale,
+      defaultCurrency: brand.defaultCurrency,
+      paypalEmail: brand.paypalEmail,
+      paypalMerchantId: brand.paypalMerchantId,
+      paymentMethodsEnabled: brand.paymentMethodsEnabled,
+      isListedOnMarketplace: brand.isListedOnMarketplace,
+      marketplaceRating: brand.marketplaceRating,
+      homePageConfig: brand.homePageConfig,
+      menuConfig: brand.menuConfig,
+    } : null,
+  }
+}
+
+function maskEmail(email?: string | null) {
+  if (!email || !email.includes('@')) return undefined
+  const [name = '', domain = ''] = email.split('@')
+  return `${name.slice(0, 1)}***@${domain}`
+}
+
+function maskPhone(phone?: string | null) {
+  if (!phone) return undefined
+  const visible = phone.replace(/\D/g, '').slice(-4)
+  return visible ? `***${visible}` : undefined
+}
+
+export function presentPublicBooking(reservation: any) {
+  return {
+    id: reservation.id,
+    bookingReference: reservation.bookingReference ?? null,
+    status: reservation.status === 'DRAFT' ? 'PENDING' : reservation.status,
+    companyName: reservation.company?.brand?.displayName ?? reservation.company?.name ?? null,
+    pickupAt: reservation.startDate instanceof Date ? reservation.startDate.toISOString() : reservation.startDate,
+    returnAt: reservation.endDate instanceof Date ? reservation.endDate.toISOString() : reservation.endDate,
+    pickupLocation: reservation.pickupLocation ?? null,
+    returnLocation: reservation.returnLocation ?? null,
+    vehicle: {
+      make: reservation.vehicle?.make,
+      model: reservation.vehicle?.model,
+      year: reservation.vehicle?.year,
+      imageUrl: Array.isArray(reservation.vehicle?.images) ? reservation.vehicle.images[0] : reservation.vehicle?.imageUrl,
+    },
+    customer: {
+      displayName: [reservation.customer?.firstName, reservation.customer?.lastName?.slice(0, 1)].filter(Boolean).join(' '),
+      maskedEmail: maskEmail(reservation.customer?.email),
+      maskedPhone: maskPhone(reservation.customer?.phone),
+    },
+    totals: {
+      amountDue: reservation.totalAmount - (reservation.paidAmount ?? 0),
+      currency: 'MAD',
+    },
+    paymentStatus: reservation.paymentStatus,
+    message: 'The company will review your request.',
+  }
+}
diff --git a/api/src/modules/site/site.repo.edge.test.ts b/api/src/modules/site/site.repo.edge.test.ts
new file mode 100644
index 0000000..5c27f97
--- /dev/null
+++ b/api/src/modules/site/site.repo.edge.test.ts
@@ -0,0 +1,113 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    company: { findFirstOrThrow: vi.fn() },
+    vehicle: { findMany: vi.fn(), findFirstOrThrow: vi.fn() },
+    offer: { findMany: vi.fn(), findFirst: vi.fn() },
+    insurancePolicy: { findMany: vi.fn() },
+    customer: { findUnique: vi.fn(), create: vi.fn(), update: vi.fn() },
+    reservation: { create: vi.fn(), findUniqueOrThrow: vi.fn(), findFirstOrThrow: vi.fn(), update: vi.fn() },
+    rentalPayment: { create: vi.fn(), findFirstOrThrow: vi.fn(), update: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './site.repo'
+
+describe('site.repo public booking boundaries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('only exposes companies with public-rental statuses by slug', async () => {
+    await repo.findCompanyBySlug('atlas-rentals')
+
+    expect(prisma.company.findFirstOrThrow).toHaveBeenCalledWith({
+      where: { slug: 'atlas-rentals', status: { in: ['ACTIVE', 'TRIALING', 'PAST_DUE', 'SUSPENDED'] } },
+      include: { brand: true, contractSettings: true },
+    })
+  })
+
+  it('loads only published vehicles for the public site', async () => {
+    await repo.findPublishedVehicles('company_1')
+
+    expect(prisma.vehicle.findMany).toHaveBeenCalledWith({
+      where: { companyId: 'company_1', isPublished: true },
+      orderBy: { createdAt: 'desc' },
+    })
+  })
+
+  it('merges existing customer address metadata when upserting a public booking customer', async () => {
+    vi.mocked(prisma.customer.findUnique).mockResolvedValue({
+      id: 'customer_1',
+      address: { city: 'Marrakesh', old: 'kept' },
+    } as never)
+
+    await repo.upsertCustomer('company_1', {
+      email: 'customer@example.test',
+      firstName: 'Nora',
+      lastName: 'Guest',
+      phone: '+212600000000',
+      driverLicense: 'DL-1',
+      dateOfBirth: '1995-01-02',
+      licenseExpiry: '2031-05-06',
+      licenseIssuedAt: '2021-05-06',
+      nationality: 'MA',
+      identityDocumentNumber: 'ID-9',
+      fullAddress: 'New address',
+      licenseCountry: 'MA',
+      licenseCategory: 'B',
+      internationalLicenseNumber: undefined,
+    })
+
+    expect(prisma.customer.update).toHaveBeenCalledWith(expect.objectContaining({
+      where: { id: 'customer_1' },
+      data: expect.objectContaining({
+        firstName: 'Nora',
+        address: expect.objectContaining({ city: 'Marrakesh', fullAddress: 'New address', identityDocumentNumber: 'ID-9' }),
+        licenseNumber: 'DL-1',
+      }),
+    }))
+  })
+
+  it('creates pending rental payments with normalized charge metadata', async () => {
+    await repo.createRentalPayment({
+      companyId: 'company_1',
+      reservationId: 'reservation_1',
+      amount: 1200,
+      currency: 'MAD',
+      paymentProvider: 'PAYPAL',
+      paypalCaptureId: 'order_1',
+    })
+
+    expect(prisma.rentalPayment.create).toHaveBeenCalledWith({
+      data: {
+        companyId: 'company_1',
+        reservationId: 'reservation_1',
+        amount: 1200,
+        currency: 'MAD',
+        paymentProvider: 'PAYPAL',
+        paypalCaptureId: 'order_1',
+        status: 'PENDING',
+        type: 'CHARGE',
+      },
+    })
+  })
+
+  it('captures PayPal payments by updating payment and reservation atomically in sequence', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-11-10T09:30:00.000Z'))
+
+    await repo.capturePaypalPayment('payment_1', 'capture_1', 'reservation_1', 1500)
+
+    expect(prisma.rentalPayment.update).toHaveBeenCalledWith({
+      where: { id: 'payment_1' },
+      data: { status: 'SUCCEEDED', paidAt: new Date('2026-11-10T09:30:00.000Z'), paypalCaptureId: 'capture_1' },
+    })
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { paymentStatus: 'PAID', paidAmount: { increment: 1500 } },
+    })
+
+    vi.useRealTimers()
+  })
+})
diff --git a/api/src/modules/site/site.repo.ts b/api/src/modules/site/site.repo.ts
new file mode 100644
index 0000000..521c358
--- /dev/null
+++ b/api/src/modules/site/site.repo.ts
@@ -0,0 +1,170 @@
+import { prisma } from '../../lib/prisma'
+
+export async function findCompanyBySlug(slug: string) {
+  return prisma.company.findFirstOrThrow({
+    where: { slug, status: { in: ['ACTIVE', 'TRIALING', 'PAST_DUE', 'SUSPENDED'] } },
+    include: { brand: true, contractSettings: true },
+  })
+}
+
+export async function findPublishedVehicles(companyId: string) {
+  return prisma.vehicle.findMany({
+    where: { companyId, isPublished: true },
+    orderBy: { createdAt: 'desc' },
+  })
+}
+
+export async function findVehicleById(vehicleId: string, companyId: string) {
+  return prisma.vehicle.findFirstOrThrow({
+    where: { id: vehicleId, companyId, isPublished: true },
+  })
+}
+
+export async function findActiveOffers(companyId: string) {
+  return prisma.offer.findMany({
+    where: { companyId, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+    orderBy: [{ isFeatured: 'desc' }, { createdAt: 'desc' }],
+  })
+}
+
+export async function findInsurancePolicies(companyId: string) {
+  return prisma.insurancePolicy.findMany({
+    where: { companyId, isActive: true },
+    orderBy: [{ isRequired: 'desc' }, { sortOrder: 'asc' }, { name: 'asc' }],
+  })
+}
+
+export async function findOfferByPromoCode(companyId: string, code: string) {
+  return prisma.offer.findFirst({
+    where: { companyId, promoCode: code, isActive: true, validFrom: { lte: new Date() }, validUntil: { gte: new Date() } },
+  })
+}
+
+export async function upsertCustomer(companyId: string, data: {
+  email: string
+  firstName: string
+  lastName: string
+  phone: string
+  driverLicense?: string
+  dateOfBirth?: string
+  licenseExpiry?: string
+  licenseIssuedAt?: string
+  nationality?: string
+  identityDocumentNumber?: string
+  fullAddress?: string
+  licenseCountry?: string
+  licenseNumber?: string | null
+  licenseCategory?: string
+  internationalLicenseNumber?: string | null
+}) {
+  const normalizedEmail = data.email.trim().toLowerCase()
+  const existing = await prisma.customer.findUnique({
+    where: { companyId_email: { companyId, email: normalizedEmail } },
+    select: { id: true, address: true },
+  })
+
+  const addressPatch = {
+    ...(data.fullAddress ? { fullAddress: data.fullAddress } : {}),
+    ...(data.identityDocumentNumber ? { identityDocumentNumber: data.identityDocumentNumber } : {}),
+    ...(data.internationalLicenseNumber !== undefined ? { internationalLicenseNumber: data.internationalLicenseNumber ?? null } : {}),
+  }
+
+  const address = Object.keys(addressPatch).length > 0
+    ? {
+        ...(existing?.address && typeof existing.address === 'object' && !Array.isArray(existing.address)
+          ? existing.address as Record<string, unknown>
+          : {}),
+        ...addressPatch,
+      }
+    : undefined
+
+  const payload = {
+    firstName: data.firstName,
+    lastName: data.lastName,
+    email: normalizedEmail,
+    phone: data.phone,
+    ...(data.driverLicense ? { driverLicense: data.driverLicense } : {}),
+    ...(data.dateOfBirth ? { dateOfBirth: new Date(data.dateOfBirth) } : {}),
+    ...(data.nationality ? { nationality: data.nationality } : {}),
+    ...(address ? { address } : {}),
+    ...(data.licenseExpiry ? { licenseExpiry: new Date(data.licenseExpiry) } : {}),
+    ...(data.licenseIssuedAt ? { licenseIssuedAt: new Date(data.licenseIssuedAt) } : {}),
+    ...(data.licenseCountry ? { licenseCountry: data.licenseCountry } : {}),
+    ...((data.licenseNumber ?? data.driverLicense) ? { licenseNumber: data.licenseNumber ?? data.driverLicense } : {}),
+    ...(data.licenseCategory ? { licenseCategory: data.licenseCategory } : {}),
+  }
+
+  if (!existing) {
+    return prisma.customer.create({
+      data: { companyId, ...payload },
+    })
+  }
+
+  return prisma.customer.update({
+    where: { id: existing.id },
+    data: payload,
+  })
+}
+
+export async function createReservation(data: object) {
+  return prisma.reservation.create({ data: data as any })
+}
+
+export async function findReservationWithDetails(reservationId: string) {
+  return prisma.reservation.findUniqueOrThrow({
+    where: { id: reservationId },
+    include: { insurances: true, additionalDrivers: true, vehicle: true, customer: true, company: { include: { brand: true } } },
+  })
+}
+
+export async function findBooking(reservationId: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id: reservationId, companyId },
+    include: { vehicle: true, customer: true, company: { include: { brand: true } } },
+  })
+}
+
+export async function findReservationForPayment(reservationId: string, companyId: string) {
+  return prisma.reservation.findFirstOrThrow({
+    where: { id: reservationId, companyId },
+    include: { vehicle: true, customer: true, additionalDrivers: true },
+  })
+}
+
+export async function createRentalPayment(data: {
+  companyId: string; reservationId: string; amount: number; currency: string
+  paymentProvider: string; amanpayTransactionId?: string | null; paypalCaptureId?: string | null
+}) {
+  return prisma.rentalPayment.create({
+    data: { ...data, paymentProvider: data.paymentProvider as any, status: 'PENDING', type: 'CHARGE' },
+  })
+}
+
+export async function findPaymentByPaypalOrderId(paypalOrderId: string, companyId: string) {
+  return prisma.rentalPayment.findFirstOrThrow({ where: { paypalCaptureId: paypalOrderId, companyId } })
+}
+
+export async function capturePaypalPayment(paymentId: string, captureId: string, reservationId: string, amount: number) {
+  await prisma.rentalPayment.update({ where: { id: paymentId }, data: { status: 'SUCCEEDED', paidAt: new Date(), paypalCaptureId: captureId } })
+  await prisma.reservation.update({ where: { id: reservationId }, data: { paymentStatus: 'PAID', paidAmount: { increment: amount } } })
+}
+
+
+export async function createReservationPublicAccess(reservationId: string, tokenHash: string, expiresAt: Date) {
+  return (prisma as any).reservationPublicAccess.create({
+    data: { reservationId, tokenHash, expiresAt },
+  })
+}
+
+export async function findReservationPublicAccess(reservationId: string, tokenHash: string) {
+  return (prisma as any).reservationPublicAccess.findFirst({
+    where: { reservationId, tokenHash, revokedAt: null, expiresAt: { gt: new Date() } },
+  })
+}
+
+export async function markReservationPublicAccessUsed(id: string) {
+  return (prisma as any).reservationPublicAccess.update({
+    where: { id },
+    data: { usedAt: new Date() },
+  })
+}
diff --git a/api/src/modules/site/site.routes.ts b/api/src/modules/site/site.routes.ts
new file mode 100644
index 0000000..268321c
--- /dev/null
+++ b/api/src/modules/site/site.routes.ts
@@ -0,0 +1,167 @@
+import { PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
+import { Router } from 'express'
+import { parseBody, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { isDatabaseUnavailableError } from '../../lib/isDatabaseUnavailable'
+import * as service from './site.service'
+import {
+  slugParamSchema, bookingParamSchema,
+  availabilitySchema, validateCodeSchema, bookSchema, paySchema, capturePaypalSchema, contactSchema,
+} from './site.schemas'
+
+const router = Router()
+
+router.get('/platform/homepage', async (_req, res, next) => {
+  try {
+    ok(res, await service.getPlatformHomepage())
+  } catch (err) { next(err) }
+})
+
+router.get('/platform/pricing', async (_req, res, next) => {
+  try {
+    ok(res, await service.getPlatformPricing())
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.json({ data: { prices: PLAN_PRICES, planFeatures: PLAN_FEATURES } })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/brand', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getBrand(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.json({ data: { company: { id: 'demo', slug: req.params.slug, name: 'Demo Company', phone: null }, brand: null } })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/vehicles', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getPublicVehicles(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/:slug/vehicles/:id', async (req, res, next) => {
+  try {
+    const { slug, id } = parseParams(bookingParamSchema, req)
+    ok(res, await service.getVehicleDetail(slug, id))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Vehicle details are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/offers', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getOffers(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: [] })
+    next(err)
+  }
+})
+
+router.get('/:slug/booking-options', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    ok(res, await service.getBookingOptions(slug))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) return res.json({ data: { insurancePolicies: [], contractSettings: null } })
+    next(err)
+  }
+})
+
+router.post('/:slug/availability', async (req, res, next) => {
+  try {
+    const { slug }                       = parseParams(slugParamSchema, req)
+    const { vehicleId, startDate, endDate } = parseBody(availabilitySchema, req)
+    ok(res, await service.checkAvailability(slug, vehicleId, startDate, endDate))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Availability checks are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.post('/:slug/book/validate-code', async (req, res, next) => {
+  try {
+    const { slug }   = parseParams(slugParamSchema, req)
+    const { code }   = parseBody(validateCodeSchema, req)
+    ok(res, await service.validatePromoCode(slug, code))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Promo code validation is temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.post('/:slug/book', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    const body     = parseBody(bookSchema, req)
+    const result   = await service.createBooking(slug, body)
+    created(res, result)
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Booking is temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.get('/:slug/booking/:id', async (req, res, next) => {
+  try {
+    const { slug, id } = parseParams(bookingParamSchema, req)
+    const accessToken = typeof req.query.token === 'string' ? req.query.token : undefined
+    ok(res, await service.getBooking(slug, id, accessToken))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Booking details are temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.post('/:slug/booking/:id/pay', async (req, res, next) => {
+  try {
+    const { slug, id } = parseParams(bookingParamSchema, req)
+    const body         = parseBody(paySchema, req)
+    ok(res, await service.initPayment(slug, id, body))
+  } catch (err) {
+    if (isDatabaseUnavailableError(err)) {
+      return res.status(503).json({ error: 'database_unavailable', message: 'Payment initiation is temporarily unavailable', statusCode: 503 })
+    }
+    next(err)
+  }
+})
+
+router.post('/:slug/booking/:id/capture-paypal', async (req, res, next) => {
+  try {
+    const { slug }           = parseParams(slugParamSchema, req)
+    const { paypalOrderId }  = parseBody(capturePaypalSchema, req)
+    ok(res, await service.capturePaypal(slug, paypalOrderId))
+  } catch (err) { next(err) }
+})
+
+router.post('/:slug/contact', async (req, res, next) => {
+  try {
+    const { slug } = parseParams(slugParamSchema, req)
+    const body     = parseBody(contactSchema, req)
+    ok(res, await service.handleContact(slug, body))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/site/site.schemas.test.ts b/api/src/modules/site/site.schemas.test.ts
new file mode 100644
index 0000000..08a7f32
--- /dev/null
+++ b/api/src/modules/site/site.schemas.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { availabilitySchema, bookSchema, capturePaypalSchema, contactSchema, paySchema } from './site.schemas'
+
+describe('site.schemas', () => {
+  const baseBooking = {
+    vehicleId: 'ckvvehicle000000000000001',
+    startDate: '2026-07-01T10:00:00.000Z',
+    endDate: '2026-07-03T10:00:00.000Z',
+    firstName: 'Aya',
+    lastName: 'Benali',
+    email: 'aya@example.com',
+    phone: '+212600000000',
+    pickupLocation: 'Casablanca Airport',
+    returnLocation: 'Casablanca Airport',
+  }
+
+  it('defaults optional public booking arrays and source', () => {
+    expect(bookSchema.parse(baseBooking)).toMatchObject({
+      source: 'PUBLIC_SITE',
+      selectedInsurancePolicyIds: [],
+      additionalDrivers: [],
+    })
+  })
+
+  it('validates nested additional drivers instead of letting anonymous payloads drift into services', () => {
+    expect(bookSchema.parse({
+      ...baseBooking,
+      additionalDrivers: [{ firstName: 'Omar', lastName: 'Alaoui', email: 'omar@example.com', driverLicense: 'DL-2' }],
+    }).additionalDrivers).toHaveLength(1)
+
+    expect(() => bookSchema.parse({
+      ...baseBooking,
+      additionalDrivers: [{ firstName: 'Omar', lastName: 'Alaoui', email: 'not-email', driverLicense: 'DL-2' }],
+    })).toThrow()
+  })
+
+  it('rejects malformed availability and payment payloads at the schema layer', () => {
+    expect(availabilitySchema.parse({
+      vehicleId: 'ckvvehicle000000000000001',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    })).toMatchObject({ vehicleId: 'ckvvehicle000000000000001' })
+
+    expect(() => availabilitySchema.parse({ vehicleId: 'not-cuid', startDate: 'x', endDate: 'y' })).toThrow()
+    expect(() => paySchema.parse({ provider: 'STRIPE', successUrl: 'https://ok.test', failureUrl: 'https://fail.test' })).toThrow()
+    expect(paySchema.parse({ provider: 'PAYPAL', successUrl: 'https://ok.test', failureUrl: 'https://fail.test', accessToken: 'booking-access-token-123' }).currency).toBe('MAD')
+  })
+
+  it('keeps contact, PayPal capture, and guest booking essentials strict', () => {
+    expect(contactSchema.parse({ name: 'Aya', email: 'aya@example.com', message: 'Hello' })).toEqual({
+      name: 'Aya', email: 'aya@example.com', message: 'Hello',
+    })
+    expect(capturePaypalSchema.parse({ paypalOrderId: 'ORDER-1' })).toEqual({ paypalOrderId: 'ORDER-1' })
+    expect(() => bookSchema.parse({ ...baseBooking, email: 'bad-email' })).toThrow()
+    expect(() => contactSchema.parse({ name: '', email: 'bad', message: '' })).toThrow()
+  })
+})
diff --git a/api/src/modules/site/site.schemas.ts b/api/src/modules/site/site.schemas.ts
new file mode 100644
index 0000000..55d5b50
--- /dev/null
+++ b/api/src/modules/site/site.schemas.ts
@@ -0,0 +1,67 @@
+import { z } from 'zod'
+
+export const slugParamSchema   = z.object({ slug: z.string() })
+export const bookingParamSchema = z.object({ slug: z.string(), id: z.string() })
+
+export const availabilitySchema = z.object({
+  vehicleId: z.string().cuid(),
+  startDate: z.string().datetime(),
+  endDate:   z.string().datetime(),
+})
+
+export const validateCodeSchema = z.object({ code: z.string().min(1) })
+
+export const bookSchema = z.object({
+  vehicleId:     z.string().cuid(),
+  startDate:     z.string().datetime(),
+  endDate:       z.string().datetime(),
+  firstName:     z.string().min(1),
+  lastName:      z.string().min(1),
+  email:         z.string().email(),
+  phone:         z.string().min(1).max(30),
+  pickupLocation: z.string().trim().min(1).max(100),
+  returnLocation: z.string().trim().min(1).max(100),
+  driverLicense: z.string().min(1).max(50).optional(),
+  dateOfBirth:   z.string().datetime().optional(),
+  licenseExpiry: z.string().datetime().optional(),
+  licenseIssuedAt: z.string().datetime().optional(),
+  nationality:   z.string().min(1).max(100).optional(),
+  identityDocumentNumber: z.string().min(1).max(100).optional(),
+  fullAddress: z.string().min(1).max(500).optional(),
+  licenseCountry: z.string().min(1).max(100).optional(),
+  licenseNumber: z.string().min(1).max(50).optional(),
+  licenseCategory: z.string().min(1).max(20).optional(),
+  internationalLicenseNumber: z.string().trim().max(100).optional(),
+  offerId:       z.string().cuid().optional(),
+  promoCodeUsed: z.string().optional(),
+  notes:         z.string().optional(),
+  source:        z.enum(['PUBLIC_SITE', 'MARKETPLACE']).default('PUBLIC_SITE'),
+  selectedInsurancePolicyIds: z.array(z.string()).default([]),
+  additionalDrivers: z.array(z.object({
+    firstName:       z.string().min(1),
+    lastName:        z.string().min(1),
+    email:           z.string().email().optional(),
+    phone:           z.string().optional(),
+    driverLicense:   z.string().min(1),
+    licenseExpiry:   z.string().datetime().optional(),
+    licenseIssuedAt: z.string().datetime().optional(),
+    dateOfBirth:     z.string().datetime().optional(),
+    nationality:     z.string().optional(),
+  })).default([]),
+})
+
+export const paySchema = z.object({
+  provider:   z.enum(['AMANPAY', 'PAYPAL']),
+  currency:   z.literal('MAD').default('MAD'),
+  successUrl: z.string().url(),
+  failureUrl: z.string().url(),
+  accessToken: z.string().min(20),
+})
+
+export const capturePaypalSchema = z.object({ paypalOrderId: z.string() })
+
+export const contactSchema = z.object({
+  name:    z.string().min(1),
+  email:   z.string().email(),
+  message: z.string().min(1),
+})
diff --git a/api/src/modules/site/site.service.boundary.test.ts b/api/src/modules/site/site.service.boundary.test.ts
new file mode 100644
index 0000000..4809cb6
--- /dev/null
+++ b/api/src/modules/site/site.service.boundary.test.ts
@@ -0,0 +1,191 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@rentaldrivego/types', () => ({
+  PLAN_FEATURES: { STARTER: ['fallback feature'] },
+  PLAN_PRICES: { STARTER: { MONTHLY: { MAD: 199 } } },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    pricingConfig: { findMany: vi.fn() },
+    planFeature: { findMany: vi.fn() },
+  },
+}))
+vi.mock('../../services/platformContentService', () => ({ getMarketplaceHomepageContent: vi.fn() }))
+vi.mock('../../services/vehicleAvailabilityService', () => ({ getVehicleAvailabilitySummary: vi.fn() }))
+vi.mock('../../services/insuranceService', () => ({ applyInsurancesToReservation: vi.fn() }))
+vi.mock('../../services/additionalDriverService', () => ({ applyAdditionalDriversToReservation: vi.fn() }))
+vi.mock('../../services/pricingRuleService', () => ({ applyPricingRules: vi.fn() }))
+vi.mock('../../services/licenseValidationService', () => ({ validateLicense: vi.fn(), validateAndFlagLicense: vi.fn().mockResolvedValue(undefined) }))
+vi.mock('../../services/amanpayService', () => ({ isConfigured: vi.fn(), createCheckout: vi.fn(), verifyWebhookSignature: vi.fn(), findTransactionFromWebhook: vi.fn() }))
+vi.mock('../../services/paypalService', () => ({ createOrder: vi.fn(), captureOrder: vi.fn() }))
+vi.mock('./site.presenter', () => ({
+  presentBrand: vi.fn((company: any) => ({ company: { id: company.id, slug: company.slug }, brand: company.brand ?? null })),
+  presentPublicBooking: vi.fn((reservation: any) => ({
+    bookingReference: reservation.bookingReference ?? null,
+    status: reservation.status === 'DRAFT' ? 'PENDING' : reservation.status,
+  })),
+}))
+vi.mock('./site.repo', () => ({
+  findCompanyBySlug: vi.fn(),
+  findPublishedVehicles: vi.fn(),
+  findVehicleById: vi.fn(),
+  findActiveOffers: vi.fn(),
+  findInsurancePolicies: vi.fn(),
+  findOfferByPromoCode: vi.fn(),
+  upsertCustomer: vi.fn(),
+  createReservation: vi.fn(),
+  findReservationWithDetails: vi.fn(),
+  findBooking: vi.fn(),
+  findReservationForPayment: vi.fn(),
+  createReservationPublicAccess: vi.fn(),
+  findReservationPublicAccess: vi.fn(),
+  markReservationPublicAccessUsed: vi.fn(),
+  createRentalPayment: vi.fn(),
+  findPaymentByPaypalOrderId: vi.fn(),
+  capturePaypalPayment: vi.fn(),
+}))
+
+import { AppError } from '../../http/errors'
+import { prisma } from '../../lib/prisma'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import { applyPricingRules } from '../../services/pricingRuleService'
+import { applyInsurancesToReservation } from '../../services/insuranceService'
+import { applyAdditionalDriversToReservation } from '../../services/additionalDriverService'
+import { validateLicense, validateAndFlagLicense } from '../../services/licenseValidationService'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './site.repo'
+import * as service from './site.service'
+
+const company = { id: 'company_1', slug: 'atlas', email: 'office@example.test', contractSettings: { depositRequired: true }, brand: { publicEmail: 'hello@example.test' } }
+
+function bookingBody(overrides: Record<string, unknown> = {}) {
+  return {
+    vehicleId: 'vehicle_1',
+    startDate: '2026-07-01T00:00:00.000Z',
+    endDate: '2026-07-04T00:00:00.000Z',
+    firstName: 'Nora',
+    lastName: 'Renter',
+    email: 'nora@example.test',
+    phone: '+212600000000',
+    pickupLocation: 'Casablanca',
+    returnLocation: 'Casablanca',
+    ...overrides,
+  } as any
+}
+
+describe('site.service public booking/payment boundaries', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(repo.createReservationPublicAccess).mockResolvedValue({ id: 'access_1' } as never)
+    vi.mocked(repo.findReservationPublicAccess).mockResolvedValue({ id: 'access_1' } as never)
+    vi.mocked(repo.markReservationPublicAccessUsed).mockResolvedValue({ id: 'access_1' } as never)
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(company as never)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null } as never)
+    vi.mocked(applyPricingRules).mockResolvedValue({ applied: [{ code: 'WEEKEND' }], total: 90 } as never)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false, expired: false, expiringSoon: false } as never)
+  })
+
+  it('uses configured pricing and configured feature labels when platform pricing exists', async () => {
+    vi.mocked(prisma.pricingConfig.findMany).mockResolvedValue([
+      { plan: 'STARTER', billingPeriod: 'MONTHLY', amount: 299 },
+      { plan: 'PRO', billingPeriod: 'YEARLY', amount: 2999 },
+    ] as never)
+    vi.mocked(prisma.planFeature.findMany).mockResolvedValue([
+      { plan: 'STARTER', label: '3 vehicles' },
+      { plan: 'PRO', label: 'Priority support' },
+    ] as never)
+
+    await expect(service.getPlatformPricing()).resolves.toEqual({
+      prices: { STARTER: { MONTHLY: { MAD: 299 } }, PRO: { YEARLY: { MAD: 2999 } } },
+      planFeatures: { STARTER: ['3 vehicles'] },
+    })
+  })
+
+  it('calculates booking totals from base rate, free-day promo, pricing rules, insurance and additional drivers', async () => {
+    vi.mocked(repo.findVehicleById).mockResolvedValue({ id: 'vehicle_1', companyId: 'company_1', dailyRate: 500, category: 'SUV' } as never)
+    vi.mocked(repo.upsertCustomer).mockResolvedValue({ id: 'customer_1' } as never)
+    vi.mocked(repo.findOfferByPromoCode).mockResolvedValue({ id: 'offer_1', type: 'FREE_DAY', discountValue: 1 } as never)
+    vi.mocked(repo.createReservation).mockResolvedValue({ id: 'reservation_1' } as never)
+    vi.mocked(repo.findReservationWithDetails).mockResolvedValue({
+      id: 'reservation_1',
+      bookingReference: 'BK-2026-AB12CD',
+      status: 'DRAFT',
+      startDate: new Date('2026-07-01T10:00:00.000Z'),
+      endDate: new Date('2026-07-04T10:00:00.000Z'),
+      pickupLocation: 'Casablanca',
+      returnLocation: 'Casablanca',
+      vehicle: { make: 'Dacia', model: 'Duster', year: 2024 },
+      customer: { firstName: 'Aya', lastName: 'Benali', email: 'aya@example.test', phone: '+212600000000' },
+      company: { name: 'Atlas Cars', brand: { displayName: 'Atlas Cars' } },
+      additionalDrivers: [],
+      insurances: [],
+      totalAmount: 1090,
+      paidAmount: 0,
+      paymentStatus: 'UNPAID',
+    } as never)
+
+    const result = await service.createBooking('atlas', bookingBody({
+      promoCodeUsed: 'FREEDAY',
+      selectedInsurancePolicyIds: ['insurance_1'],
+      additionalDrivers: [{ firstName: 'Second' }],
+    }))
+
+    expect(repo.createReservation).toHaveBeenCalledWith(expect.objectContaining({
+      totalDays: 3,
+      dailyRate: 500,
+      discountAmount: 500,
+      pricingRulesTotal: 90,
+      totalAmount: 1090,
+      pickupLocation: 'Casablanca',
+      returnLocation: 'Casablanca',
+      status: 'DRAFT',
+      source: 'PUBLIC_SITE',
+    }))
+    expect(applyInsurancesToReservation).not.toHaveBeenCalled()
+    expect(applyAdditionalDriversToReservation).not.toHaveBeenCalled()
+    expect(validateAndFlagLicense).not.toHaveBeenCalled()
+    expect(result.status).toBe('PENDING')
+    expect(result.bookingReference).toBe('BK-2026-AB12CD')
+  })
+
+  it('rejects payment initialization for already-paid reservations before provider calls', async () => {
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({ paymentStatus: 'PAID' } as never)
+
+    await expect(service.initPayment('atlas', 'reservation_1', {
+      provider: 'AMANPAY',
+      accessToken: 'booking-access-token-123',
+      successUrl: 'https://example.test/success',
+      failureUrl: 'https://example.test/failure',
+    })).rejects.toMatchObject({ statusCode: 409, error: 'already_paid' })
+    expect(amanpay.createCheckout).not.toHaveBeenCalled()
+  })
+
+  it('blocks payment when the primary or additional driver license requires review', async () => {
+    vi.mocked(validateLicense).mockReturnValue({ status: 'EXPIRING_SOON', requiresApproval: true } as never)
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({
+      id: 'reservation_1',
+      paymentStatus: 'UNPAID',
+      totalAmount: 400,
+      customer: { licenseExpiry: new Date('2026-07-01'), licenseValidationStatus: 'PENDING' },
+      additionalDrivers: [],
+      vehicle: { make: 'Dacia', model: 'Duster' },
+    } as never)
+
+    await expect(service.initPayment('atlas', 'reservation_1', {
+      provider: 'PAYPAL',
+      accessToken: 'booking-access-token-123',
+      successUrl: 'https://example.test/success',
+      failureUrl: 'https://example.test/failure',
+    })).rejects.toMatchObject({ statusCode: 409, error: 'license_review_required' })
+    expect(paypal.createOrder).not.toHaveBeenCalled()
+  })
+
+  it('routes public contact messages to the brand public email when configured', async () => {
+    await expect(service.handleContact('atlas', { name: 'Visitor', email: 'visitor@example.test', message: 'Hi' })).resolves.toEqual({
+      success: true,
+      deliveredTo: 'hello@example.test',
+      preview: { name: 'Visitor', email: 'visitor@example.test', message: 'Hi' },
+    })
+  })
+})
diff --git a/api/src/modules/site/site.service.ts b/api/src/modules/site/site.service.ts
new file mode 100644
index 0000000..098e732
--- /dev/null
+++ b/api/src/modules/site/site.service.ts
@@ -0,0 +1,344 @@
+import { PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
+import { AppError, NotFoundError } from '../../http/errors'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import { applyPricingRules } from '../../services/pricingRuleService'
+import { validateLicense } from '../../services/licenseValidationService'
+import { getMarketplaceHomepageContent } from '../../services/platformContentService'
+import { prisma } from '../../lib/prisma'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './site.repo'
+import { presentBrand, presentPublicBooking } from './site.presenter'
+import { generatePublicAccessToken, hashPublicAccessToken } from '../../security/publicAccessTokens'
+
+function assertAllowedPaymentRedirect(urlValue: string, company: any) {
+  let parsed: URL
+  try {
+    parsed = new URL(urlValue)
+  } catch {
+    throw new AppError('Invalid payment redirect URL', 400, 'invalid_redirect_url')
+  }
+
+  if (process.env.NODE_ENV === 'production' && parsed.protocol !== 'https:') {
+    throw new AppError('Payment redirect URLs must use HTTPS', 400, 'invalid_redirect_url')
+  }
+
+  const allowedHosts = new Set<string>()
+  if (process.env.NODE_ENV !== 'production') {
+    allowedHosts.add('localhost:3000')
+    allowedHosts.add('localhost:4000')
+    allowedHosts.add('127.0.0.1:3000')
+    allowedHosts.add('127.0.0.1:4000')
+  }
+  for (const value of [process.env.MARKETPLACE_URL, process.env.DASHBOARD_URL, process.env.NEXT_PUBLIC_MARKETPLACE_URL, process.env.NEXT_PUBLIC_DASHBOARD_URL]) {
+    if (!value) continue
+    try { allowedHosts.add(new URL(value).host) } catch {}
+  }
+
+  const brand = company.brand as any
+  if (brand?.customDomain && brand?.customDomainVerified) allowedHosts.add(brand.customDomain)
+  if (brand?.subdomain && process.env.PUBLIC_SITE_BASE_DOMAIN) {
+    allowedHosts.add(`${brand.subdomain}.${process.env.PUBLIC_SITE_BASE_DOMAIN}`)
+  }
+
+  if (!allowedHosts.has(parsed.host)) {
+    throw new AppError('Payment redirect host is not allowed', 400, 'invalid_redirect_url')
+  }
+}
+
+function generateBookingReference() {
+  const year = new Date().getUTCFullYear()
+  const random = Math.random().toString(36).slice(2, 8).toUpperCase()
+  return `BK-${year}-${random}`
+}
+
+export async function getPlatformHomepage() {
+  return getMarketplaceHomepageContent()
+}
+
+export async function getPlatformPricing() {
+  const [configs, features] = await Promise.all([
+    prisma.pricingConfig.findMany(),
+    prisma.planFeature.findMany({
+      orderBy: [{ plan: 'asc' }, { sortOrder: 'asc' }, { createdAt: 'asc' }],
+    }),
+  ])
+
+  const prices = configs.length === 0
+    ? PLAN_PRICES
+    : configs.reduce<Record<string, Record<string, Record<string, number>>>>((acc: Record<string, Record<string, Record<string, number>>>, config: any) => {
+        if (!acc[config.plan]) acc[config.plan] = {}
+        acc[config.plan]![config.billingPeriod] = { MAD: config.amount }
+        return acc
+      }, {})
+
+  const planFeatures = Object.fromEntries(
+    Object.entries(PLAN_FEATURES).map(([plan, fallback]) => {
+      const labels = features.filter((feature: any) => feature.plan === plan).map((feature: any) => feature.label)
+      return [plan, labels.length > 0 ? labels : fallback]
+    }),
+  )
+
+  return { prices, planFeatures }
+}
+
+export async function getBrand(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  return presentBrand(company)
+}
+
+export async function getPublicVehicles(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const vehicles = await repo.findPublishedVehicles(company.id)
+  return Promise.all(
+    vehicles.map(async (v: any) => {
+      const a = await getVehicleAvailabilitySummary(v.id, { companyId: v.companyId })
+      return { ...v, availability: a.available, availabilityStatus: a.status, nextAvailableAt: a.nextAvailableAt }
+    }),
+  )
+}
+
+export async function getVehicleDetail(slug: string, vehicleId: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const vehicle = await repo.findVehicleById(vehicleId, company.id)
+  const a = await getVehicleAvailabilitySummary(vehicle.id, { companyId: vehicle.companyId })
+  return { ...vehicle, availability: a.available, availabilityStatus: a.status, nextAvailableAt: a.nextAvailableAt }
+}
+
+export async function getOffers(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  return repo.findActiveOffers(company.id)
+}
+
+export async function getBookingOptions(slug: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const insurancePolicies = await repo.findInsurancePolicies(company.id)
+  return { insurancePolicies, contractSettings: company.contractSettings }
+}
+
+export async function checkAvailability(slug: string, vehicleId: string, startDate: string, endDate: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const vehicle = await repo.findVehicleById(vehicleId, company.id)
+  const availability = await getVehicleAvailabilitySummary(vehicle.id, {
+    companyId: company.id,
+    range: { startDate: new Date(startDate), endDate: new Date(endDate) },
+  })
+  return { available: availability.available, nextAvailableAt: availability.nextAvailableAt }
+}
+
+export async function validatePromoCode(slug: string, code: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const offer = await repo.findOfferByPromoCode(company.id, code)
+  if (!offer) throw new NotFoundError('Promo code not found or expired')
+  return offer
+}
+
+export async function createBooking(slug: string, body: {
+  vehicleId: string; startDate: string; endDate: string
+  firstName: string; lastName: string; email: string; phone: string
+  pickupLocation: string; returnLocation: string
+  driverLicense?: string; dateOfBirth?: string; licenseExpiry?: string; licenseIssuedAt?: string; nationality?: string
+  identityDocumentNumber?: string; fullAddress?: string; licenseCountry?: string; licenseNumber?: string; licenseCategory?: string; internationalLicenseNumber?: string
+  offerId?: string; promoCodeUsed?: string; notes?: string; source?: string
+  selectedInsurancePolicyIds?: string[]; additionalDrivers?: any[]
+}) {
+  const company = await repo.findCompanyBySlug(slug)
+  const vehicle = await repo.findVehicleById(body.vehicleId, company.id)
+
+  const start = new Date(body.startDate)
+  const end   = new Date(body.endDate)
+  if (end <= start) throw new AppError('End date must be after start date', 400, 'invalid_dates')
+  if (start < new Date()) throw new AppError('Start date cannot be in the past', 400, 'invalid_dates')
+
+  const availability = await getVehicleAvailabilitySummary(vehicle.id, { companyId: company.id, range: { startDate: start, endDate: end } })
+  if (!availability.available) {
+    throw new AppError('Vehicle is not available for the selected dates', 409, 'unavailable', {
+      nextAvailableAt: availability.nextAvailableAt?.toISOString() ?? null,
+    })
+  }
+
+  const customer = await repo.upsertCustomer(company.id, {
+    email: body.email,
+    firstName: body.firstName,
+    lastName: body.lastName,
+    phone: body.phone,
+    driverLicense: body.driverLicense,
+    dateOfBirth: body.dateOfBirth,
+    licenseExpiry: body.licenseExpiry,
+    licenseIssuedAt: body.licenseIssuedAt,
+    nationality: body.nationality,
+    identityDocumentNumber: body.identityDocumentNumber,
+    fullAddress: body.fullAddress,
+    licenseCountry: body.licenseCountry,
+    licenseNumber: body.licenseNumber,
+    licenseCategory: body.licenseCategory,
+    internationalLicenseNumber: body.internationalLicenseNumber,
+  })
+
+  const totalDays  = Math.max(1, Math.ceil((end.getTime() - start.getTime()) / 86_400_000))
+  const baseAmount = vehicle.dailyRate * totalDays
+
+  let discountAmount = 0
+  if (body.promoCodeUsed) {
+    const offer = await repo.findOfferByPromoCode(company.id, body.promoCodeUsed)
+    if (offer) {
+      if (offer.type === 'PERCENTAGE')    discountAmount = Math.round(baseAmount * offer.discountValue / 100)
+      else if (offer.type === 'FIXED_AMOUNT') discountAmount = offer.discountValue
+      else if (offer.type === 'FREE_DAY')     discountAmount = vehicle.dailyRate * offer.discountValue
+    }
+  }
+
+  const { applied, total: pricingRulesTotal } = await applyPricingRules(
+    company.id, customer.id, [], vehicle.dailyRate, totalDays,
+  )
+
+  const reservation = await repo.createReservation({
+    companyId: company.id,
+    vehicleId: vehicle.id,
+    customerId: customer.id,
+    offerId: body.offerId ?? null,
+    promoCodeUsed: body.promoCodeUsed ?? null,
+    vehicleCategory: vehicle.category,
+    source: body.source ?? 'PUBLIC_SITE',
+    startDate: start,
+    endDate: end,
+    pickupLocation: body.pickupLocation,
+    returnLocation: body.returnLocation,
+    dailyRate: vehicle.dailyRate,
+    totalDays,
+    totalAmount: baseAmount - discountAmount + pricingRulesTotal,
+    discountAmount,
+    pricingRulesApplied: applied,
+    pricingRulesTotal,
+    notes: body.notes ?? null,
+    bookingReference: generateBookingReference(),
+    status: 'DRAFT',
+  })
+
+  const publicAccess = generatePublicAccessToken()
+  await repo.createReservationPublicAccess(
+    reservation.id,
+    publicAccess.tokenHash,
+    new Date(Date.now() + 14 * 24 * 60 * 60 * 1000),
+  )
+
+  const refreshed = await repo.findReservationWithDetails(reservation.id)
+  return {
+    ...presentPublicBooking({ ...refreshed, company }),
+    publicAccessToken: publicAccess.token,
+    bookingReference: (refreshed as any).bookingReference,
+    message: 'The company will review your request.',
+  }
+}
+
+async function assertPublicBookingAccess(reservationId: string, token: string | undefined) {
+  if (!token) throw new AppError('Booking access token is required', 403, 'booking_token_required')
+  const access = await repo.findReservationPublicAccess(reservationId, hashPublicAccessToken(token))
+  if (!access) throw new AppError('Booking not found', 404, 'not_found')
+  await repo.markReservationPublicAccessUsed(access.id)
+}
+
+export async function getBooking(slug: string, reservationId: string, accessToken?: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  await assertPublicBookingAccess(reservationId, accessToken)
+  return presentPublicBooking(await repo.findBooking(reservationId, company.id))
+}
+
+export async function initPayment(slug: string, reservationId: string, body: {
+  provider: 'AMANPAY' | 'PAYPAL'; currency?: 'MAD'; successUrl: string; failureUrl: string; accessToken?: string
+}) {
+  const company     = await repo.findCompanyBySlug(slug)
+  await assertPublicBookingAccess(reservationId, body.accessToken)
+  const reservation = await repo.findReservationForPayment(reservationId, company.id)
+
+  if (reservation.paymentStatus === 'PAID') {
+    throw new AppError('This reservation is already paid', 409, 'already_paid')
+  }
+
+  const customerLicenseResult = validateLicense(reservation.customer.licenseExpiry)
+  const licenseBlocked =
+    reservation.customer.licenseValidationStatus === 'DENIED' ||
+    customerLicenseResult.status === 'EXPIRED' ||
+    (customerLicenseResult.requiresApproval && reservation.customer.licenseValidationStatus !== 'APPROVED') ||
+    reservation.additionalDrivers.some((d: any) => d.licenseExpired || (d.requiresApproval && !d.approvedAt))
+
+  if (licenseBlocked) {
+    throw new AppError('This reservation requires license review before payment can be processed', 409, 'license_review_required')
+  }
+
+  assertAllowedPaymentRedirect(body.successUrl, company)
+  assertAllowedPaymentRedirect(body.failureUrl, company)
+
+  const currency    = body.currency ?? 'MAD'
+  const amount      = reservation.totalAmount
+  const description = `Rental: ${reservation.vehicle.make} ${reservation.vehicle.model}`
+  const orderId     = `res-${reservation.id}-${Date.now()}`
+  const webhookBase = process.env.API_URL ?? 'http://localhost:4000'
+
+  let checkoutUrl: string
+  let amanpayTransactionId: string | null = null
+  let paypalCaptureId: string | null      = null
+
+  if (body.provider === 'AMANPAY') {
+    if (!amanpay.isConfigured()) {
+      throw new AppError('Online payment is not available for this company', 503, 'provider_not_configured')
+    }
+    const brand      = company.brand as any
+    const merchantId = brand?.amanpayMerchantId ?? process.env.AMANPAY_MERCHANT_ID ?? ''
+    const secretKey  = brand?.amanpaySecretKey  ?? process.env.AMANPAY_SECRET_KEY  ?? ''
+    if (!merchantId || !secretKey) {
+      throw new AppError('AmanPay is not configured for this company', 503, 'provider_not_configured')
+    }
+    const result = await amanpay.createCheckout({
+      amount, currency, orderId, description,
+      customerEmail: reservation.customer.email,
+      customerName:  `${reservation.customer.firstName} ${reservation.customer.lastName}`,
+      successUrl: body.successUrl,
+      failureUrl: body.failureUrl,
+      webhookUrl: `${webhookBase}/api/v1/payments/webhooks/amanpay`,
+    })
+    checkoutUrl           = result.checkoutUrl
+    amanpayTransactionId  = result.transactionId
+  } else {
+    if (!paypal.isConfigured()) {
+      throw new AppError('PayPal is not available for this company', 503, 'provider_not_configured')
+    }
+    const result = await paypal.createOrder({
+      amount, currency, orderId, description,
+      returnUrl: body.successUrl,
+      cancelUrl: body.failureUrl,
+    })
+    checkoutUrl    = result.approveUrl
+    paypalCaptureId = result.orderId
+  }
+
+  await repo.createRentalPayment({
+    companyId: company.id,
+    reservationId: reservation.id,
+    amount,
+    currency,
+    paymentProvider: body.provider,
+    amanpayTransactionId,
+    paypalCaptureId,
+  })
+
+  return { checkoutUrl }
+}
+
+export async function capturePaypal(slug: string, paypalOrderId: string) {
+  const company = await repo.findCompanyBySlug(slug)
+  const payment = await repo.findPaymentByPaypalOrderId(paypalOrderId, company.id)
+  const capture = await paypal.captureOrder(paypalOrderId) as Record<string, any>
+  const captureId = capture.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? paypalOrderId
+  await repo.capturePaypalPayment(payment.id, captureId, payment.reservationId, payment.amount)
+  return { success: true }
+}
+
+export async function handleContact(slug: string, body: { name: string; email: string; message: string }) {
+  const company = await repo.findCompanyBySlug(slug)
+  return {
+    success: true,
+    deliveredTo: company.brand?.publicEmail ?? company.email,
+    preview: body,
+  }
+}
diff --git a/api/src/modules/site/site.test.ts b/api/src/modules/site/site.test.ts
new file mode 100644
index 0000000..75503f0
--- /dev/null
+++ b/api/src/modules/site/site.test.ts
@@ -0,0 +1,292 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { AppError, NotFoundError } from '../../http/errors'
+
+vi.mock('@rentaldrivego/types', () => ({
+  PLAN_FEATURES: { STARTER: ['fallback feature'] },
+  PLAN_PRICES: { STARTER: { MONTHLY: { MAD: 199 } } },
+}))
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    pricingConfig: { findMany: vi.fn() },
+    planFeature: { findMany: vi.fn() },
+  },
+}))
+
+vi.mock('./site.repo', () => ({
+  findCompanyBySlug:          vi.fn(),
+  findPublishedVehicles:      vi.fn(),
+  findVehicleById:            vi.fn(),
+  findActiveOffers:           vi.fn(),
+  findInsurancePolicies:      vi.fn(),
+  findOfferByPromoCode:       vi.fn(),
+  upsertCustomer:             vi.fn(),
+  createReservation:          vi.fn(),
+  findReservationWithDetails: vi.fn(),
+  findBooking:                vi.fn(),
+  findReservationForPayment:  vi.fn(),
+  createReservationPublicAccess: vi.fn(),
+  findReservationPublicAccess: vi.fn(),
+  markReservationPublicAccessUsed: vi.fn(),
+  createRentalPayment:        vi.fn(),
+  findPaymentByPaypalOrderId: vi.fn(),
+  capturePaypalPayment:       vi.fn(),
+}))
+
+vi.mock('../../services/vehicleAvailabilityService', () => ({
+  getVehicleAvailabilitySummary: vi.fn(),
+}))
+
+vi.mock('../../services/insuranceService', () => ({
+  applyInsurancesToReservation: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('../../services/additionalDriverService', () => ({
+  applyAdditionalDriversToReservation: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('../../services/pricingRuleService', () => ({
+  applyPricingRules: vi.fn(),
+}))
+
+vi.mock('../../services/licenseValidationService', () => ({
+  validateLicense: vi.fn(),
+  validateAndFlagLicense: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured:   vi.fn(),
+  createCheckout: vi.fn(),
+}))
+
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn(),
+  createOrder:  vi.fn(),
+  captureOrder: vi.fn(),
+}))
+
+vi.mock('../../services/platformContentService', () => ({
+  getMarketplaceHomepageContent: vi.fn(),
+}))
+
+import * as repo from './site.repo'
+import { getVehicleAvailabilitySummary } from '../../services/vehicleAvailabilityService'
+import { applyPricingRules } from '../../services/pricingRuleService'
+import { validateLicense } from '../../services/licenseValidationService'
+import * as amanpay from '../../services/amanpayService'
+import * as paypalSvc from '../../services/paypalService'
+import {
+  getBrand, getPublicVehicles, checkAvailability, validatePromoCode,
+  createBooking, initPayment,
+} from './site.service'
+
+const SLUG = 'test-company'
+
+function makeCompany(overrides: object = {}) {
+  return {
+    id: 'co-1', slug: SLUG, name: 'Test Co', phone: null, email: 'co@test.com',
+    brand: { publicEmail: null }, contractSettings: null,
+    ...overrides,
+  }
+}
+
+function makeVehicle(overrides: object = {}) {
+  return {
+    id: 'v-1', dailyRate: 10000, year: 2022, make: 'Toyota', model: 'Camry',
+    isPublished: true, status: 'AVAILABLE', companyId: 'co-1', category: 'SEDAN',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.mocked(repo.createReservationPublicAccess).mockResolvedValue({ id: 'access_1' } as never)
+  vi.mocked(repo.findReservationPublicAccess).mockResolvedValue({ id: 'access_1' } as never)
+  vi.mocked(repo.markReservationPublicAccessUsed).mockResolvedValue({ id: 'access_1' } as never)
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('getBrand', () => {
+  it('returns company and public brand data only', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany({
+      brand: {
+        displayName: 'Test Co',
+        paymentMethodsEnabled: ['AMANPAY', 'PAYPAL'],
+        amanpayMerchantId: 'merchant-id',
+        amanpaySecretKey: 'top-secret',
+        paypalMerchantId: 'paypal-merchant-id',
+      },
+    }) as any)
+    const result = await getBrand(SLUG)
+
+    expect(result.company.id).toBe('co-1')
+    expect(result.brand).toMatchObject({
+      displayName: 'Test Co',
+      paymentMethodsEnabled: ['AMANPAY', 'PAYPAL'],
+      paypalMerchantId: 'paypal-merchant-id',
+    })
+    expect(result.brand).not.toHaveProperty('amanpayMerchantId')
+    expect(result.brand).not.toHaveProperty('amanpaySecretKey')
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('getPublicVehicles', () => {
+  it('returns vehicles enriched with availability', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findPublishedVehicles).mockResolvedValue([makeVehicle()] as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+
+    const result = await getPublicVehicles(SLUG)
+    expect(result[0].availability).toBe(true)
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('checkAvailability', () => {
+  it('returns availability result for given date range', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findVehicleById).mockResolvedValue(makeVehicle() as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+
+    const result = await checkAvailability(SLUG, 'v-1', '2025-06-01T00:00:00.000Z', '2025-06-04T00:00:00.000Z')
+    expect(result.available).toBe(true)
+    expect(getVehicleAvailabilitySummary).toHaveBeenCalledWith('v-1', { companyId: 'co-1', range: { startDate: new Date('2025-06-01T00:00:00.000Z'), endDate: new Date('2025-06-04T00:00:00.000Z') } })
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('validatePromoCode', () => {
+  it('returns offer when code is valid', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findOfferByPromoCode).mockResolvedValue({ id: 'o-1' } as any)
+    const result = await validatePromoCode(SLUG, 'SUMMER10')
+    expect((result as any).id).toBe('o-1')
+  })
+
+  it('throws NotFoundError for unknown promo code', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findOfferByPromoCode).mockResolvedValue(null)
+    await expect(validatePromoCode(SLUG, 'BADCODE')).rejects.toBeInstanceOf(NotFoundError)
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('createBooking', () => {
+  const baseBody = {
+    vehicleId: 'v-1',
+    startDate: '2026-07-01T00:00:00.000Z',
+    endDate: '2026-07-04T00:00:00.000Z',
+    firstName: 'Ali', lastName: 'Ben', email: 'ali@test.com',
+    phone: '+212600000000',
+    pickupLocation: 'Casablanca',
+    returnLocation: 'Casablanca',
+  }
+
+  beforeEach(() => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findVehicleById).mockResolvedValue(makeVehicle() as any)
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: true, status: 'AVAILABLE', nextAvailableAt: null, blockingReason: null })
+    vi.mocked(repo.upsertCustomer).mockResolvedValue({ id: 'c-1' } as any)
+    vi.mocked(applyPricingRules).mockResolvedValue({ applied: [], total: 0 })
+    vi.mocked(repo.createReservation).mockResolvedValue({ id: 'r-1' } as any)
+    vi.mocked(repo.findReservationWithDetails).mockResolvedValue({
+      id: 'r-1',
+      bookingReference: 'BK-2026-ABC123',
+      status: 'DRAFT',
+      startDate: new Date('2026-07-01T00:00:00.000Z'),
+      endDate: new Date('2026-07-04T00:00:00.000Z'),
+      pickupLocation: 'Casablanca',
+      returnLocation: 'Casablanca',
+      vehicle: { make: 'Toyota', model: 'Camry', year: 2022 },
+      customer: { firstName: 'Ali', lastName: 'Ben', email: 'ali@test.com', phone: '+212600000000' },
+      company: { name: 'Test Co', brand: { displayName: 'Test Co' } },
+      additionalDrivers: [],
+      insurances: [],
+      totalAmount: 30000,
+      paidAmount: 0,
+      paymentStatus: 'UNPAID',
+    } as any)
+  })
+
+  it('creates a booking and returns a pending guest confirmation', async () => {
+    const result = await createBooking(SLUG, baseBody)
+    expect(repo.createReservation).toHaveBeenCalledOnce()
+    expect((result as any).status).toBe('PENDING')
+    expect((result as any).bookingReference).toBe('BK-2026-ABC123')
+  })
+
+  it('throws AppError for invalid dates', async () => {
+    await expect(
+      createBooking(SLUG, { ...baseBody, startDate: '2026-07-04T00:00:00.000Z', endDate: '2026-07-01T00:00:00.000Z' }),
+    ).rejects.toMatchObject({ error: 'invalid_dates' })
+  })
+
+  it('throws AppError when vehicle unavailable', async () => {
+    vi.mocked(getVehicleAvailabilitySummary).mockResolvedValue({ available: false, status: 'RESERVED', nextAvailableAt: null, blockingReason: 'RESERVATION' })
+    await expect(createBooking(SLUG, baseBody)).rejects.toMatchObject({ error: 'unavailable' })
+  })
+})
+
+// ────────────────────────────────────────────────────────────────────────────
+describe('initPayment — payment guard paths', () => {
+  const payBody = { provider: 'PAYPAL' as const, successUrl: 'http://localhost:3000/ok', failureUrl: 'http://localhost:3000/fail', accessToken: 'booking-access-token-123' }
+
+  it('throws AppError when reservation is already paid', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({
+      paymentStatus: 'PAID', totalAmount: 100,
+      customer: { licenseExpiry: null, licenseValidationStatus: 'APPROVED', email: 'a@b.com', firstName: 'A', lastName: 'B' },
+      additionalDrivers: [],
+      vehicle: { make: 'Toyota', model: 'Camry' },
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+
+    await expect(initPayment(SLUG, 'r-1', payBody)).rejects.toMatchObject({ error: 'already_paid' })
+  })
+
+  it('throws AppError when license review is required', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({
+      paymentStatus: 'UNPAID', totalAmount: 100,
+      customer: { licenseExpiry: null, licenseValidationStatus: 'DENIED', email: 'a@b.com', firstName: 'A', lastName: 'B' },
+      additionalDrivers: [],
+      vehicle: { make: 'Toyota', model: 'Camry' },
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+
+    await expect(initPayment(SLUG, 'r-1', payBody)).rejects.toMatchObject({ error: 'license_review_required' })
+  })
+
+  it('throws AppError when PayPal is not configured', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({
+      paymentStatus: 'UNPAID', totalAmount: 30000,
+      customer: { licenseExpiry: null, licenseValidationStatus: 'APPROVED', email: 'a@b.com', firstName: 'Ali', lastName: 'Ben' },
+      additionalDrivers: [],
+      vehicle: { make: 'Toyota', model: 'Camry' },
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+    vi.mocked(paypalSvc.isConfigured).mockReturnValue(false)
+
+    await expect(initPayment(SLUG, 'r-1', payBody)).rejects.toMatchObject({ error: 'provider_not_configured' })
+  })
+
+  it('returns checkoutUrl when PayPal is configured', async () => {
+    vi.mocked(repo.findCompanyBySlug).mockResolvedValue(makeCompany() as any)
+    vi.mocked(repo.findReservationForPayment).mockResolvedValue({
+      id: 'r-1', paymentStatus: 'UNPAID', totalAmount: 30000, companyId: 'co-1',
+      customer: { licenseExpiry: null, licenseValidationStatus: 'APPROVED', email: 'a@b.com', firstName: 'Ali', lastName: 'Ben' },
+      additionalDrivers: [],
+      vehicle: { make: 'Toyota', model: 'Camry' },
+    } as any)
+    vi.mocked(validateLicense).mockReturnValue({ status: 'VALID', requiresApproval: false } as any)
+    vi.mocked(paypalSvc.isConfigured).mockReturnValue(true)
+    vi.mocked(paypalSvc.createOrder).mockResolvedValue({ approveUrl: 'https://paypal.com/approve', orderId: 'pp-1' } as any)
+    vi.mocked(repo.createRentalPayment).mockResolvedValue(undefined as any)
+
+    const result = await initPayment(SLUG, 'r-1', payBody)
+    expect(result.checkoutUrl).toBe('https://paypal.com/approve')
+    expect(repo.createRentalPayment).toHaveBeenCalledOnce()
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.entitlement.test.ts b/api/src/modules/subscriptions/subscription.entitlement.test.ts
new file mode 100644
index 0000000..8a5b4e1
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.entitlement.test.ts
@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NextFunction, Request, Response } from 'express'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    subscription: {
+      findUnique: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import { requireActiveSubscription, requireFullAccess } from './subscription.entitlement'
+
+function createRes() {
+  const res = {
+    status: vi.fn().mockReturnThis(),
+    json: vi.fn().mockReturnThis(),
+  }
+  return res as unknown as Response & { status: ReturnType<typeof vi.fn>; json: ReturnType<typeof vi.fn> }
+}
+
+describe('subscription.entitlement middleware', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('rejects unauthenticated requests before touching subscription storage', async () => {
+    const req = {} as Request
+    const res = createRes()
+    const next = vi.fn() as NextFunction
+
+    await requireActiveSubscription(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(401)
+    expect(res.json).toHaveBeenCalledWith({ error: 'unauthenticated' })
+    expect(prisma.subscription.findUnique).not.toHaveBeenCalled()
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('rejects missing or expired subscriptions with a precise entitlement payload', async () => {
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue(null as never)
+    const req = { companyId: 'company_1' } as Request
+    const res = createRes()
+    const next = vi.fn() as NextFunction
+
+    await requireActiveSubscription(req, res, next)
+
+    expect(prisma.subscription.findUnique).toHaveBeenCalledWith({ where: { companyId: 'company_1' } })
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith(expect.objectContaining({
+      error: 'subscription_required',
+      subscriptionStatus: 'EXPIRED',
+      accessLevel: 'none',
+    }))
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('allows limited subscriptions through requireActiveSubscription but annotates the request', async () => {
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue({ status: 'PAST_DUE' } as never)
+    const req = { companyId: 'company_1' } as Request & { subscriptionStatus?: string; accessLevel?: string }
+    const res = createRes()
+    const next = vi.fn() as NextFunction
+
+    await requireActiveSubscription(req, res, next)
+
+    expect(req.subscriptionStatus).toBe('PAST_DUE')
+    expect(req.accessLevel).toBe('limited')
+    expect(next).toHaveBeenCalledOnce()
+    expect(res.status).not.toHaveBeenCalled()
+  })
+
+  it('requires full access for write-protected actions', async () => {
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue({ status: 'SUSPENDED' } as never)
+    const req = { companyId: 'company_1' } as Request
+    const res = createRes()
+    const next = vi.fn() as NextFunction
+
+    await requireFullAccess(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith(expect.objectContaining({
+      error: 'insufficient_access',
+      subscriptionStatus: 'SUSPENDED',
+      accessLevel: 'read_only',
+    }))
+    expect(next).not.toHaveBeenCalled()
+  })
+
+  it('passes active subscriptions through requireFullAccess', async () => {
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue({ status: 'ACTIVE' } as never)
+    const req = { companyId: 'company_1' } as Request & { subscriptionStatus?: string; accessLevel?: string }
+    const res = createRes()
+    const next = vi.fn() as NextFunction
+
+    await requireFullAccess(req, res, next)
+
+    expect(req.subscriptionStatus).toBe('ACTIVE')
+    expect(req.accessLevel).toBe('full')
+    expect(next).toHaveBeenCalledOnce()
+    expect(res.status).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.entitlement.ts b/api/src/modules/subscriptions/subscription.entitlement.ts
new file mode 100644
index 0000000..4a253b4
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.entitlement.ts
@@ -0,0 +1,47 @@
+import { Request, Response, NextFunction } from 'express'
+import { prisma } from '../../lib/prisma'
+import { getAccessLevel, hasAnyAccess } from './subscription.policy'
+
+export async function requireActiveSubscription(req: Request, res: Response, next: NextFunction) {
+  const companyId = req.companyId
+  if (!companyId) return res.status(401).json({ error: 'unauthenticated' })
+
+  const sub = await prisma.subscription.findUnique({ where: { companyId } })
+  const status = sub?.status ?? 'EXPIRED'
+  const accessLevel = getAccessLevel(status)
+
+  if (!hasAnyAccess(status)) {
+    return res.status(403).json({
+      error: 'subscription_required',
+      message: 'Your subscription has ended. Please reactivate to continue.',
+      subscriptionStatus: status,
+      accessLevel,
+    })
+  }
+
+  ;(req as any).subscriptionStatus = status
+  ;(req as any).accessLevel = accessLevel
+  next()
+}
+
+export async function requireFullAccess(req: Request, res: Response, next: NextFunction) {
+  const companyId = req.companyId
+  if (!companyId) return res.status(401).json({ error: 'unauthenticated' })
+
+  const sub = await prisma.subscription.findUnique({ where: { companyId } })
+  const status = sub?.status ?? 'EXPIRED'
+  const accessLevel = getAccessLevel(status)
+
+  if (accessLevel !== 'full') {
+    return res.status(403).json({
+      error: 'insufficient_access',
+      message: 'This action requires an active subscription.',
+      subscriptionStatus: status,
+      accessLevel,
+    })
+  }
+
+  ;(req as any).subscriptionStatus = status
+  ;(req as any).accessLevel = accessLevel
+  next()
+}
diff --git a/api/src/modules/subscriptions/subscription.policy.test.ts b/api/src/modules/subscriptions/subscription.policy.test.ts
new file mode 100644
index 0000000..9ce608e
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.policy.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { ACCESS_MAP, getAccessLevel, hasAnyAccess, hasFullAccess, SUBSCRIPTION_POLICY } from './subscription.policy'
+
+describe('subscription.policy', () => {
+  it('maps each known subscription status to the intended access level', () => {
+    expect(ACCESS_MAP).toMatchObject({
+      TRIALING: 'full',
+      ACTIVE: 'full',
+      PAYMENT_PENDING: 'full',
+      UNPAID: 'full',
+      PAST_DUE: 'limited',
+      SUSPENDED: 'read_only',
+      PAUSED: 'read_only',
+      CANCELLED: 'none',
+      EXPIRED: 'none',
+    })
+  })
+
+  it('defaults unknown statuses to no access', () => {
+    expect(getAccessLevel('MYSTERY_BOX')).toBe('none')
+    expect(hasAnyAccess('MYSTERY_BOX')).toBe(false)
+    expect(hasFullAccess('MYSTERY_BOX')).toBe(false)
+  })
+
+  it('distinguishes full access from degraded but nonzero access', () => {
+    expect(hasFullAccess('ACTIVE')).toBe(true)
+    expect(hasAnyAccess('ACTIVE')).toBe(true)
+
+    expect(hasFullAccess('PAST_DUE')).toBe(false)
+    expect(hasAnyAccess('PAST_DUE')).toBe(true)
+
+    expect(hasFullAccess('SUSPENDED')).toBe(false)
+    expect(hasAnyAccess('SUSPENDED')).toBe(true)
+
+    expect(hasFullAccess('CANCELLED')).toBe(false)
+    expect(hasAnyAccess('CANCELLED')).toBe(false)
+  })
+
+  it('keeps payment retry policy internally coherent', () => {
+    expect(SUBSCRIPTION_POLICY.trial.durationDays).toBeGreaterThan(0)
+    expect(SUBSCRIPTION_POLICY.payment.retryScheduleDays).toHaveLength(SUBSCRIPTION_POLICY.payment.maxRetryAttempts)
+    expect(SUBSCRIPTION_POLICY.payment.retryScheduleDays).toEqual([...SUBSCRIPTION_POLICY.payment.retryScheduleDays].sort((a, b) => a - b))
+    expect(SUBSCRIPTION_POLICY.suspension.cancelAfterDays).toBeGreaterThan(SUBSCRIPTION_POLICY.pastDue.timeoutDays)
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.policy.ts b/api/src/modules/subscriptions/subscription.policy.ts
new file mode 100644
index 0000000..06aa26d
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.policy.ts
@@ -0,0 +1,51 @@
+export type AccessLevel = 'full' | 'limited' | 'read_only' | 'none'
+
+export const SUBSCRIPTION_POLICY = {
+  trial: {
+    durationDays: 14,
+    requiresPaymentMethod: false, // set true when payment capture is mandatory
+    oneTrialPerCompany: true,
+  },
+  payment: {
+    paymentPendingTimeoutDays: 7,
+    retryScheduleDays: [0, 3, 6, 10, 14],
+    maxRetryAttempts: 5,
+  },
+  pastDue: {
+    timeoutDays: 7,
+  },
+  suspension: {
+    cancelAfterDays: 16,
+  },
+  notifications: {
+    trialEndingDaysBefore: [7, 3, 1],
+    paymentFailureDaysAfter: [0, 3, 6],
+    pastDueDaysAfter: [7],
+    suspensionDaysAfter: [14],
+    cancellationDaysAfter: [30],
+  },
+} as const
+
+export const ACCESS_MAP: Record<string, AccessLevel> = {
+  TRIALING:        'full',
+  ACTIVE:          'full',
+  PAYMENT_PENDING: 'full',
+  UNPAID:          'full',
+  PAST_DUE:        'limited',
+  SUSPENDED:       'read_only',
+  CANCELLED:       'none',
+  EXPIRED:         'none',
+  PAUSED:          'read_only',
+}
+
+export function getAccessLevel(status: string): AccessLevel {
+  return ACCESS_MAP[status] ?? 'none'
+}
+
+export function hasFullAccess(status: string): boolean {
+  return getAccessLevel(status) === 'full'
+}
+
+export function hasAnyAccess(status: string): boolean {
+  return getAccessLevel(status) !== 'none'
+}
diff --git a/api/src/modules/subscriptions/subscription.repo.edge.test.ts b/api/src/modules/subscriptions/subscription.repo.edge.test.ts
new file mode 100644
index 0000000..1edb088
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.repo.edge.test.ts
@@ -0,0 +1,140 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    subscription: {
+      findUnique: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      upsert: vi.fn(),
+      findMany: vi.fn(),
+    },
+    subscriptionInvoice: {
+      create: vi.fn(),
+      update: vi.fn(),
+      findMany: vi.fn(),
+      findFirst: vi.fn(),
+      findFirstOrThrow: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+    },
+    paymentAttempt: { create: vi.fn(), findMany: vi.fn() },
+    subscriptionEvent: { create: vi.fn(), findMany: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './subscription.repo'
+
+describe('subscription.repo edge queries and mutations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-01T12:00:00.000Z'))
+  })
+
+  afterEach(() => vi.useRealTimers())
+
+  it('returns existing subscriptions without creating duplicates', async () => {
+    const existing = { id: 'sub_1', companyId: 'company_1' }
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue(existing as never)
+
+    const result = await repo.findOrCreateSubscription('company_1', 'PRO', 'ANNUAL', 'MAD')
+
+    expect(result).toBe(existing)
+    expect(prisma.subscription.create).not.toHaveBeenCalled()
+  })
+
+  it('creates new subscriptions in payment-pending state when none exists', async () => {
+    vi.mocked(prisma.subscription.findUnique).mockResolvedValue(null as never)
+    vi.mocked(prisma.subscription.create).mockResolvedValue({ id: 'sub_2' } as never)
+
+    await repo.findOrCreateSubscription('company_1', 'GROWTH', 'MONTHLY', 'MAD')
+
+    expect(prisma.subscription.create).toHaveBeenCalledWith({
+      data: {
+        companyId: 'company_1',
+        plan: 'GROWTH',
+        billingPeriod: 'MONTHLY',
+        currency: 'MAD',
+        status: 'PAYMENT_PENDING',
+      },
+    })
+  })
+
+  it('sets payment pending due dates seven days from the mutation time', async () => {
+    await repo.setPaymentPending('sub_1')
+
+    expect(prisma.subscription.update).toHaveBeenCalledWith({
+      where: { id: 'sub_1' },
+      data: {
+        status: 'PAYMENT_PENDING',
+        paymentPendingSince: new Date('2026-06-01T12:00:00.000Z'),
+        paymentDueAt: new Date('2026-06-08T12:00:00.000Z'),
+      },
+    })
+  })
+
+  it('distinguishes immediate cancellation from period-end cancellation', async () => {
+    await repo.setCancelled('sub_1', true)
+    expect(prisma.subscription.update).toHaveBeenLastCalledWith({
+      where: { id: 'sub_1' },
+      data: {
+        status: 'CANCELLED',
+        cancelledAt: new Date('2026-06-01T12:00:00.000Z'),
+        endedAt: new Date('2026-06-01T12:00:00.000Z'),
+      },
+    })
+
+    await repo.setCancelled('sub_1', false)
+    expect(prisma.subscription.update).toHaveBeenLastCalledWith({
+      where: { id: 'sub_1' },
+      data: { cancelAtPeriodEnd: true },
+    })
+  })
+
+  it('queries scheduled job candidates with status-specific cutoffs', async () => {
+    const cutoff = new Date('2026-05-25T12:00:00.000Z')
+
+    await repo.findPaymentPendingTimedOut(cutoff)
+    expect(prisma.subscription.findMany).toHaveBeenLastCalledWith({
+      where: { status: 'PAYMENT_PENDING', paymentPendingSince: { lte: cutoff } },
+      include: { company: true },
+    })
+
+    await repo.findPastDueTimedOut(cutoff)
+    expect(prisma.subscription.findMany).toHaveBeenLastCalledWith({
+      where: { status: 'PAST_DUE', pastDueSince: { lte: cutoff } },
+      include: { company: true },
+    })
+
+    await repo.findSubscriptionsToExpireAtPeriodEnd()
+    expect(prisma.subscription.findMany).toHaveBeenLastCalledWith({
+      where: {
+        status: 'ACTIVE',
+        cancelAtPeriodEnd: true,
+        currentPeriodEnd: { lte: new Date('2026-06-01T12:00:00.000Z') },
+      },
+      include: { company: true },
+    })
+  })
+
+  it('creates subscription events with system source and current occurrence time by default', async () => {
+    await repo.createEvent({
+      subscriptionId: 'sub_1',
+      companyId: 'company_1',
+      eventType: 'trial.expired',
+      payload: { trialEndAt: '2026-06-01' },
+    })
+
+    expect(prisma.subscriptionEvent.create).toHaveBeenCalledWith({
+      data: {
+        subscriptionId: 'sub_1',
+        companyId: 'company_1',
+        eventType: 'trial.expired',
+        payload: { trialEndAt: '2026-06-01' },
+        source: 'system',
+        occurredAt: new Date('2026-06-01T12:00:00.000Z'),
+      },
+    })
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.repo.ts b/api/src/modules/subscriptions/subscription.repo.ts
new file mode 100644
index 0000000..6b6a322
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.repo.ts
@@ -0,0 +1,336 @@
+import { prisma } from '../../lib/prisma'
+
+// ─── Subscription queries ─────────────────────────────────────
+
+export function findByCompany(companyId: string) {
+  return prisma.subscription.findUnique({
+    where: { companyId },
+    include: {
+      invoices: { orderBy: { createdAt: 'desc' }, take: 12 },
+      events:   { orderBy: { occurredAt: 'desc' }, take: 20 },
+    },
+  })
+}
+
+export function findById(id: string) {
+  return prisma.subscription.findUnique({
+    where: { id },
+    include: { company: true },
+  })
+}
+
+export function findInvoices(companyId: string) {
+  return prisma.subscriptionInvoice.findMany({
+    where: { companyId },
+    orderBy: { createdAt: 'desc' },
+    take: 50,
+  })
+}
+
+export function findInvoiceByAmanpay(transactionId: string) {
+  return prisma.subscriptionInvoice.findFirst({
+    where: { amanpayTransactionId: transactionId },
+    include: { subscription: true },
+  })
+}
+
+export function findInvoiceByPaypal(captureId: string) {
+  return prisma.subscriptionInvoice.findFirst({
+    where: { paypalCaptureId: captureId },
+    include: { subscription: true },
+  })
+}
+
+export function findInvoiceByPaypalForCompany(paypalOrderId: string, companyId: string) {
+  return prisma.subscriptionInvoice.findFirstOrThrow({
+    where: { paypalCaptureId: paypalOrderId, companyId },
+    include: { subscription: true },
+  })
+}
+
+export function findInvoiceById(id: string) {
+  return prisma.subscriptionInvoice.findUniqueOrThrow({
+    where: { id },
+    include: { subscription: true },
+  })
+}
+
+// ─── Subscription mutations ───────────────────────────────────
+
+export async function findOrCreateSubscription(
+  companyId: string,
+  plan: string,
+  billingPeriod: string,
+  currency: string,
+) {
+  const existing = await prisma.subscription.findUnique({ where: { companyId } })
+  if (existing) return existing
+  return prisma.subscription.create({
+    data: { companyId, plan: plan as any, billingPeriod: billingPeriod as any, currency, status: 'PAYMENT_PENDING' as any },
+  })
+}
+
+export function activateSubscription(id: string, periodEnd: Date) {
+  return prisma.subscription.update({
+    where: { id },
+    data: {
+      status: 'ACTIVE',
+      currentPeriodStart:  new Date(),
+      currentPeriodEnd:    periodEnd,
+      paymentPendingSince: null,
+      paymentDueAt:        null,
+      pastDueSince:        null,
+      suspendedAt:         null,
+      retryCount:          0,
+    },
+  })
+}
+
+export function startTrial(
+  companyId: string,
+  plan: string,
+  billingPeriod: string,
+  currency: string,
+  trialEndAt: Date,
+) {
+  return prisma.subscription.upsert({
+    where: { companyId },
+    update: {
+      plan:         plan as any,
+      billingPeriod: billingPeriod as any,
+      currency,
+      status:       'TRIALING',
+      trialStartAt: new Date(),
+      trialEndAt,
+      trialUsed:    true,
+    },
+    create: {
+      companyId,
+      plan:         plan as any,
+      billingPeriod: billingPeriod as any,
+      currency,
+      status:       'TRIALING',
+      trialStartAt: new Date(),
+      trialEndAt,
+      trialUsed:    true,
+    },
+  })
+}
+
+export function setPaymentPending(id: string) {
+  const now = new Date()
+  const dueAt = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
+  return prisma.subscription.update({
+    where: { id },
+    data: {
+      status:              'PAYMENT_PENDING',
+      paymentPendingSince: now,
+      paymentDueAt:        dueAt,
+    },
+  })
+}
+
+export function setPastDue(id: string) {
+  return prisma.subscription.update({
+    where: { id },
+    data: {
+      status:       'PAST_DUE',
+      pastDueSince: new Date(),
+    },
+  })
+}
+
+export function setSuspended(id: string) {
+  return prisma.subscription.update({
+    where: { id },
+    data: {
+      status:      'SUSPENDED',
+      suspendedAt: new Date(),
+    },
+  })
+}
+
+export function setExpired(id: string) {
+  return prisma.subscription.update({
+    where: { id },
+    data: { status: 'EXPIRED', endedAt: new Date() },
+  })
+}
+
+export function setCancelled(id: string, immediate: boolean) {
+  if (immediate) {
+    return prisma.subscription.update({
+      where: { id },
+      data: { status: 'CANCELLED', cancelledAt: new Date(), endedAt: new Date() },
+    })
+  }
+  return prisma.subscription.update({
+    where: { id },
+    data: { cancelAtPeriodEnd: true },
+  })
+}
+
+export function setCancelAtPeriodEnd(companyId: string, value: boolean) {
+  return prisma.subscription.update({
+    where: { companyId },
+    data: { cancelAtPeriodEnd: value },
+  })
+}
+
+export function incrementRetryCount(id: string) {
+  return prisma.subscription.update({
+    where: { id },
+    data: { retryCount: { increment: 1 } },
+  })
+}
+
+export function updatePlan(companyId: string, data: { plan: any; billingPeriod: any; currency: string }) {
+  return prisma.subscription.update({ where: { companyId }, data })
+}
+
+// ─── Invoice mutations ────────────────────────────────────────
+
+export function createInvoice(data: {
+  companyId: string
+  subscriptionId: string
+  amount: number
+  currency: string
+  paymentProvider: string
+  amanpayTransactionId?: string | null
+  paypalCaptureId?: string | null
+  dueAt?: Date | null
+}) {
+  return prisma.subscriptionInvoice.create({
+    data: { ...data, status: 'PENDING', paymentProvider: data.paymentProvider as any },
+  })
+}
+
+export function markInvoicePaid(id: string) {
+  return prisma.subscriptionInvoice.update({
+    where: { id },
+    data: { status: 'PAID', paidAt: new Date(), failedAt: null },
+  })
+}
+
+export function markInvoiceFailed(id: string) {
+  return prisma.subscriptionInvoice.update({
+    where: { id },
+    data: { status: 'FAILED', failedAt: new Date() },
+  })
+}
+
+export function markInvoiceVoided(id: string) {
+  return prisma.subscriptionInvoice.update({
+    where: { id },
+    data: { status: 'VOIDED', voidedAt: new Date() },
+  })
+}
+
+export function updateInvoicePaypal(id: string, captureId: string) {
+  return prisma.subscriptionInvoice.update({
+    where: { id },
+    data: { status: 'PAID', paidAt: new Date(), paypalCaptureId: captureId, failedAt: null },
+  })
+}
+
+// ─── Payment attempts ─────────────────────────────────────────
+
+export function createPaymentAttempt(data: {
+  invoiceId: string
+  subscriptionId: string
+  providerPaymentId?: string | null
+  status: string
+  failureCode?: string | null
+  failureMessage?: string | null
+}) {
+  return prisma.paymentAttempt.create({
+    data: { ...data, attemptedAt: new Date() },
+  })
+}
+
+export function getPaymentAttempts(invoiceId: string) {
+  return prisma.paymentAttempt.findMany({
+    where: { invoiceId },
+    orderBy: { attemptedAt: 'desc' },
+  })
+}
+
+// ─── Subscription events ──────────────────────────────────────
+
+export function createEvent(data: {
+  subscriptionId: string
+  companyId: string
+  eventType: string
+  source?: string
+  payload?: object
+}) {
+  return prisma.subscriptionEvent.create({
+    data: {
+      ...data,
+      source:    data.source ?? 'system',
+      payload:   (data.payload ?? {}) as any,
+      occurredAt: new Date(),
+    },
+  })
+}
+
+export function getEvents(subscriptionId: string) {
+  return prisma.subscriptionEvent.findMany({
+    where: { subscriptionId },
+    orderBy: { occurredAt: 'desc' },
+    take: 50,
+  })
+}
+
+// ─── Scheduled job helpers ────────────────────────────────────
+
+export function findPaymentPendingTimedOut(cutoffDate: Date) {
+  return prisma.subscription.findMany({
+    where: {
+      status: 'PAYMENT_PENDING',
+      paymentPendingSince: { lte: cutoffDate },
+    },
+    include: { company: true },
+  })
+}
+
+export function findPastDueTimedOut(cutoffDate: Date) {
+  return prisma.subscription.findMany({
+    where: {
+      status: 'PAST_DUE',
+      pastDueSince: { lte: cutoffDate },
+    },
+    include: { company: true },
+  })
+}
+
+export function findSuspendedTimedOut(cutoffDate: Date) {
+  return prisma.subscription.findMany({
+    where: {
+      status: 'SUSPENDED',
+      suspendedAt: { lte: cutoffDate },
+    },
+    include: { company: true },
+  })
+}
+
+export function findTrialsEndedWithoutConversion() {
+  return prisma.subscription.findMany({
+    where: {
+      status: 'TRIALING',
+      trialEndAt: { lte: new Date() },
+    },
+    include: { company: { include: { employees: { where: { role: 'OWNER' }, take: 1 } } } },
+  })
+}
+
+export function findSubscriptionsToExpireAtPeriodEnd() {
+  return prisma.subscription.findMany({
+    where: {
+      status: 'ACTIVE',
+      cancelAtPeriodEnd: true,
+      currentPeriodEnd: { lte: new Date() },
+    },
+    include: { company: true },
+  })
+}
diff --git a/api/src/modules/subscriptions/subscription.routes.ts b/api/src/modules/subscriptions/subscription.routes.ts
new file mode 100644
index 0000000..7203854
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.routes.ts
@@ -0,0 +1,133 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody } from '../../http/validate'
+import { ok } from '../../http/respond'
+import { getRawBodyString, parseRawJsonBody } from '../../http/webhooks'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as service from './subscription.service'
+import {
+  checkoutSchema,
+  changePlanSchema,
+  capturePaypalSchema,
+  startTrialSchema,
+  cancelSchema,
+  reactivateSchema,
+} from './subscription.schemas'
+
+const publicRouter  = Router()
+const webhookRouter = Router()
+const router        = Router()
+
+// ─── Public ────────────────────────────────────────────────────
+
+publicRouter.get('/plans', (_req, res, next) => {
+  service.getPlans().then((d: any) => ok(res, d)).catch(next)
+})
+
+publicRouter.get('/providers', (_req, res) => {
+  ok(res, service.getProviders())
+})
+
+publicRouter.get('/features', (_req, res, next) => {
+  service.getPlanFeatures().then((d: any) => ok(res, d)).catch(next)
+})
+
+// ─── Webhooks (no auth) ────────────────────────────────────────
+
+webhookRouter.post('/webhooks/amanpay', async (req, res, next) => {
+  try {
+    const rawBody   = getRawBodyString(req)
+    const payload   = parseRawJsonBody(req)
+    const signature = (req.headers['x-amanpay-signature'] as string) ?? ''
+    if (!amanpay.isConfigured() || !amanpay.verifyWebhookSignature(rawBody, signature)) {
+      return res.status(401).json({ error: 'invalid_signature' })
+    }
+    await service.handleAmanpayWebhook(payload, rawBody)
+    res.json({ received: true })
+  } catch (err) { next(err) }
+})
+
+webhookRouter.post('/webhooks/paypal', async (req, res, next) => {
+  try {
+    const rawBody = getRawBodyString(req)
+    const payload = parseRawJsonBody(req)
+    const isValid = await paypal.verifyWebhookEvent(req.headers as Record<string, string>, rawBody)
+    if (!paypal.isConfigured() || !isValid) return res.status(401).json({ error: 'invalid_signature' })
+    await service.handlePaypalWebhook(payload, rawBody)
+    res.json({ received: true })
+  } catch (err) { next(err) }
+})
+
+// ─── PayPal capture (auth but no subscription check) ──────────
+
+router.post('/capture-paypal', requireCompanyAuth, requireTenant, async (req, res, next) => {
+  try {
+    const { paypalOrderId } = parseBody(capturePaypalSchema, req)
+    ok(res, await service.capturePaypal(req.companyId, paypalOrderId))
+  } catch (err) { next(err) }
+})
+
+// ─── Authenticated ─────────────────────────────────────────────
+
+router.use(requireCompanyAuth, requireTenant)
+
+router.get('/me', async (req, res, next) => {
+  try { ok(res, await service.getSubscription(req.companyId)) } catch (err) { next(err) }
+})
+
+router.get('/invoices', async (req, res, next) => {
+  try { ok(res, await service.getInvoices(req.companyId)) } catch (err) { next(err) }
+})
+
+router.get('/events', async (req, res, next) => {
+  try { ok(res, await service.getEvents(req.companyId)) } catch (err) { next(err) }
+})
+
+router.get('/entitlement', async (req, res, next) => {
+  try { ok(res, await service.getEntitlement(req.companyId)) } catch (err) { next(err) }
+})
+
+router.post('/trial', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(startTrialSchema, req)
+    ok(res, await service.startTrial(req.companyId, body.plan, body.billingPeriod, body.currency))
+  } catch (err) { next(err) }
+})
+
+router.post('/checkout', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(checkoutSchema, req)
+    ok(res, await service.checkout(req.companyId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/reactivate', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(reactivateSchema, req)
+    ok(res, await service.reactivate(req.companyId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/change-plan', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(changePlanSchema, req)
+    ok(res, await service.changePlan(req.companyId, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/cancel', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { mode, reason } = parseBody(cancelSchema, req)
+    ok(res, await service.cancel(req.companyId, mode, reason))
+  } catch (err) { next(err) }
+})
+
+router.post('/resume', requireRole('OWNER'), async (req, res, next) => {
+  try { ok(res, await service.resume(req.companyId)) } catch (err) { next(err) }
+})
+
+export default router
+export { publicRouter as subscriptionPublicRouter, webhookRouter as subscriptionWebhookRouter }
diff --git a/api/src/modules/subscriptions/subscription.schemas.edge.test.ts b/api/src/modules/subscriptions/subscription.schemas.edge.test.ts
new file mode 100644
index 0000000..8d2f13c
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.schemas.edge.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import {
+  cancelSchema,
+  capturePaypalSchema,
+  changePlanSchema,
+  checkoutSchema,
+  reactivateSchema,
+  startTrialSchema,
+} from './subscription.schemas'
+
+describe('subscription.schemas edge contracts', () => {
+  it('accepts checkout only for MAD and valid hosted payment urls', () => {
+    const payload = {
+      plan: 'PRO',
+      billingPeriod: 'ANNUAL',
+      currency: 'MAD',
+      provider: 'PAYPAL',
+      successUrl: 'https://app.example.test/success',
+      failureUrl: 'https://app.example.test/failure',
+    }
+
+    expect(checkoutSchema.parse(payload)).toEqual(payload)
+    expect(checkoutSchema.safeParse({ ...payload, currency: 'USD' }).success).toBe(false)
+    expect(checkoutSchema.safeParse({ ...payload, successUrl: '/relative' }).success).toBe(false)
+  })
+
+  it('allows plan changes across supported currencies while trial and reactivation stay MAD-only', () => {
+    expect(changePlanSchema.parse({ plan: 'STARTER', billingPeriod: 'MONTHLY', currency: 'USD' })).toEqual({
+      plan: 'STARTER',
+      billingPeriod: 'MONTHLY',
+      currency: 'USD',
+    })
+
+    expect(startTrialSchema.parse({ plan: 'GROWTH', billingPeriod: 'MONTHLY' })).toEqual({
+      plan: 'GROWTH',
+      billingPeriod: 'MONTHLY',
+      currency: 'MAD',
+    })
+
+    expect(reactivateSchema.safeParse({
+      plan: 'GROWTH',
+      billingPeriod: 'MONTHLY',
+      currency: 'EUR',
+      provider: 'AMANPAY',
+      successUrl: 'https://app.example.test/success',
+      failureUrl: 'https://app.example.test/failure',
+    }).success).toBe(false)
+  })
+
+  it('defaults cancellation to period-end and caps cancellation reasons', () => {
+    expect(cancelSchema.parse({})).toEqual({ mode: 'period_end' })
+    expect(cancelSchema.parse({ mode: 'immediate', reason: 'closing account' })).toEqual({ mode: 'immediate', reason: 'closing account' })
+    expect(cancelSchema.safeParse({ mode: 'tomorrow' }).success).toBe(false)
+    expect(cancelSchema.safeParse({ reason: 'x'.repeat(501) }).success).toBe(false)
+  })
+
+  it('requires a PayPal order id for manual capture', () => {
+    expect(capturePaypalSchema.parse({ paypalOrderId: 'order_1' })).toEqual({ paypalOrderId: 'order_1' })
+    expect(capturePaypalSchema.safeParse({}).success).toBe(false)
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.schemas.ts b/api/src/modules/subscriptions/subscription.schemas.ts
new file mode 100644
index 0000000..d662fab
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.schemas.ts
@@ -0,0 +1,45 @@
+import { z } from 'zod'
+
+const planEnum          = z.enum(['STARTER', 'GROWTH', 'PRO'])
+const billingPeriodEnum = z.enum(['MONTHLY', 'ANNUAL'])
+const providerEnum      = z.enum(['AMANPAY', 'PAYPAL'])
+const currencyEnum      = z.enum(['MAD', 'EUR', 'USD'])
+
+export const checkoutSchema = z.object({
+  plan:          planEnum,
+  billingPeriod: billingPeriodEnum,
+  currency:      z.literal('MAD'),
+  provider:      providerEnum,
+  successUrl:    z.string().url(),
+  failureUrl:    z.string().url(),
+})
+
+export const changePlanSchema = z.object({
+  plan:          planEnum,
+  billingPeriod: billingPeriodEnum,
+  currency:      currencyEnum,
+})
+
+export const capturePaypalSchema = z.object({
+  paypalOrderId: z.string(),
+})
+
+export const startTrialSchema = z.object({
+  plan:          planEnum,
+  billingPeriod: billingPeriodEnum,
+  currency:      z.literal('MAD').default('MAD'),
+})
+
+export const cancelSchema = z.object({
+  mode:   z.enum(['period_end', 'immediate']).default('period_end'),
+  reason: z.string().max(500).optional(),
+})
+
+export const reactivateSchema = z.object({
+  plan:          planEnum,
+  billingPeriod: billingPeriodEnum,
+  currency:      z.literal('MAD'),
+  provider:      providerEnum,
+  successUrl:    z.string().url(),
+  failureUrl:    z.string().url(),
+})
diff --git a/api/src/modules/subscriptions/subscription.service.edge.test.ts b/api/src/modules/subscriptions/subscription.service.edge.test.ts
new file mode 100644
index 0000000..056a028
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.service.edge.test.ts
@@ -0,0 +1,196 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    pricingConfig: { findMany: vi.fn(), findUnique: vi.fn() },
+    planFeature: { findMany: vi.fn() },
+    company: { findUniqueOrThrow: vi.fn() },
+    subscription: { update: vi.fn() },
+  },
+}))
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn(),
+  createCheckout: vi.fn(),
+}))
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn(),
+  createOrder: vi.fn(),
+  captureOrder: vi.fn(),
+}))
+vi.mock('./subscription.repo', () => ({
+  findByCompany: vi.fn(),
+  findById: vi.fn(),
+  findInvoices: vi.fn(),
+  getEvents: vi.fn(),
+  startTrial: vi.fn(),
+  createEvent: vi.fn(),
+  findInvoiceByAmanpay: vi.fn(),
+  findInvoiceByPaypal: vi.fn(),
+  findInvoiceByPaypalForCompany: vi.fn(),
+  findOrCreateSubscription: vi.fn(),
+  createInvoice: vi.fn(),
+  markInvoicePaid: vi.fn(),
+  markInvoiceFailed: vi.fn(),
+  createPaymentAttempt: vi.fn(),
+  incrementRetryCount: vi.fn(),
+  activateSubscription: vi.fn(),
+  setPaymentPending: vi.fn(),
+  updateInvoicePaypal: vi.fn(),
+  updatePlan: vi.fn(),
+  setCancelled: vi.fn(),
+  setCancelAtPeriodEnd: vi.fn(),
+  findTrialsEndedWithoutConversion: vi.fn(),
+  findPaymentPendingTimedOut: vi.fn(),
+  findPastDueTimedOut: vi.fn(),
+  findSuspendedTimedOut: vi.fn(),
+  findSubscriptionsToExpireAtPeriodEnd: vi.fn(),
+  setExpired: vi.fn(),
+  setPastDue: vi.fn(),
+  setSuspended: vi.fn(),
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './subscription.repo'
+import * as service from './subscription.service'
+
+describe('subscription.service operational edges', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-01T00:00:00.000Z'))
+    process.env.API_URL = 'https://api.example.test'
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    delete process.env.API_URL
+  })
+
+  it('builds plans from pricing config rows when platform overrides exist', async () => {
+    vi.mocked(prisma.pricingConfig.findMany).mockResolvedValue([
+      { plan: 'STARTER', billingPeriod: 'MONTHLY', amount: 9900 },
+      { plan: 'STARTER', billingPeriod: 'ANNUAL', amount: 99000 },
+      { plan: 'PRO', billingPeriod: 'MONTHLY', amount: 29900 },
+    ] as never)
+
+    await expect(service.getPlans()).resolves.toEqual({
+      STARTER: {
+        MONTHLY: { MAD: 9900 },
+        ANNUAL: { MAD: 99000 },
+      },
+      PRO: {
+        MONTHLY: { MAD: 29900 },
+      },
+    })
+  })
+
+  it('starts trials only after enforcing one-trial-per-company policy', async () => {
+    vi.mocked(repo.findByCompany).mockResolvedValue({ id: 'sub_old', trialUsed: true } as never)
+
+    await expect(service.startTrial('company_1', 'PRO', 'MONTHLY', 'MAD')).rejects.toThrow('already used its free trial')
+    expect(repo.startTrial).not.toHaveBeenCalled()
+
+    vi.mocked(repo.findByCompany).mockResolvedValue(null as never)
+    vi.mocked(repo.startTrial).mockResolvedValue({ id: 'sub_1' } as never)
+
+    await service.startTrial('company_1', 'PRO', 'MONTHLY', 'MAD')
+
+    expect(repo.startTrial).toHaveBeenCalledWith(
+      'company_1',
+      'PRO',
+      'MONTHLY',
+      'MAD',
+      new Date('2026-06-15T00:00:00.000Z'),
+    )
+    expect(repo.createEvent).toHaveBeenCalledWith(expect.objectContaining({
+      subscriptionId: 'sub_1',
+      companyId: 'company_1',
+      eventType: 'trial.started',
+    }))
+  })
+
+  it('creates AmanPay checkout invoices with webhook metadata and due dates', async () => {
+    vi.mocked(prisma.pricingConfig.findUnique).mockResolvedValue({ amount: 19900 } as never)
+    vi.mocked(prisma.company.findUniqueOrThrow).mockResolvedValue({ email: 'owner@example.test', name: 'Atlas Cars' } as never)
+    vi.mocked(repo.findOrCreateSubscription).mockResolvedValue({ id: 'sub_1' } as never)
+    vi.mocked(amanpay.isConfigured).mockReturnValue(true)
+    vi.mocked(amanpay.createCheckout).mockResolvedValue({ checkoutUrl: 'https://pay.example.test/checkout', transactionId: 'txn_1' } as never)
+    vi.mocked(repo.createInvoice).mockResolvedValue({ id: 'invoice_1' } as never)
+
+    await expect(service.checkout('company_1', {
+      plan: 'GROWTH',
+      billingPeriod: 'MONTHLY',
+      currency: 'MAD',
+      provider: 'AMANPAY',
+      successUrl: 'https://app.example.test/success',
+      failureUrl: 'https://app.example.test/failure',
+    })).resolves.toEqual({ invoice: { id: 'invoice_1' }, checkoutUrl: 'https://pay.example.test/checkout' })
+
+    expect(amanpay.createCheckout).toHaveBeenCalledWith(expect.objectContaining({
+      amount: 19900,
+      currency: 'MAD',
+      customerEmail: 'owner@example.test',
+      customerName: 'Atlas Cars',
+      webhookUrl: 'https://api.example.test/api/v1/subscriptions/webhooks/amanpay',
+    }))
+    expect(repo.createInvoice).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      subscriptionId: 'sub_1',
+      amount: 19900,
+      paymentProvider: 'AMANPAY',
+      amanpayTransactionId: 'txn_1',
+      paypalCaptureId: null,
+      dueAt: new Date('2026-06-08T00:00:00.000Z'),
+    }))
+  })
+
+  it('keeps paid PayPal capture idempotent and avoids provider capture', async () => {
+    vi.mocked(repo.findInvoiceByPaypalForCompany).mockResolvedValue({ status: 'PAID' } as never)
+
+    await expect(service.capturePaypal('company_1', 'order_1')).resolves.toEqual({ success: true })
+
+    expect(paypal.captureOrder).not.toHaveBeenCalled()
+    expect(repo.activateSubscription).not.toHaveBeenCalled()
+  })
+
+  it('advances payment-pending subscriptions to past-due in the scheduled job', async () => {
+    vi.mocked(repo.findPaymentPendingTimedOut).mockResolvedValue([
+      { id: 'sub_1', companyId: 'company_1', paymentPendingSince: new Date('2026-05-20T00:00:00.000Z') },
+      { id: 'sub_2', companyId: 'company_2', paymentPendingSince: new Date('2026-05-21T00:00:00.000Z') },
+    ] as never)
+
+    await expect(service.runPaymentPendingTimeoutJob()).resolves.toBe(2)
+
+    expect(repo.findPaymentPendingTimedOut).toHaveBeenCalledWith(new Date('2026-05-25T00:00:00.000Z'))
+    expect(repo.setPastDue).toHaveBeenCalledTimes(2)
+    expect(repo.createEvent).toHaveBeenCalledWith(expect.objectContaining({
+      subscriptionId: 'sub_1',
+      companyId: 'company_1',
+      eventType: 'subscription.past_due',
+    }))
+  })
+
+  it('rejects user cancellation when no subscription exists', async () => {
+    vi.mocked(repo.findByCompany).mockResolvedValue(null as never)
+
+    await expect(service.cancel('company_1')).rejects.toThrow('No subscription found')
+    expect(repo.setCancelled).not.toHaveBeenCalled()
+  })
+
+  it('records admin suspension events with actor and reason', async () => {
+    vi.mocked(repo.findById).mockResolvedValue({ id: 'sub_1', companyId: 'company_1' } as never)
+
+    await expect(service.adminSuspendSubscription('sub_1', 'admin_1', 'fraud review')).resolves.toEqual({ success: true })
+
+    expect(repo.setSuspended).toHaveBeenCalledWith('sub_1')
+    expect(repo.createEvent).toHaveBeenCalledWith({
+      subscriptionId: 'sub_1',
+      companyId: 'company_1',
+      eventType: 'subscription.suspended',
+      source: 'admin',
+      payload: { adminId: 'admin_1', reason: 'fraud review' },
+    })
+  })
+})
diff --git a/api/src/modules/subscriptions/subscription.service.ts b/api/src/modules/subscriptions/subscription.service.ts
new file mode 100644
index 0000000..f032cdc
--- /dev/null
+++ b/api/src/modules/subscriptions/subscription.service.ts
@@ -0,0 +1,533 @@
+import { PLAN_PRICES } from '@rentaldrivego/types'
+import { prisma } from '../../lib/prisma'
+import { ValidationError } from '../../http/errors'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as repo from './subscription.repo'
+import { SUBSCRIPTION_POLICY, getAccessLevel } from './subscription.policy'
+import { getWebhookEventId, processWebhookOnce } from '../../security/webhookIdempotency'
+
+// ─── Helpers ──────────────────────────────────────────────────
+
+export function addPeriod(date: Date, period: string): Date {
+  const d = new Date(date)
+  period === 'ANNUAL' ? d.setFullYear(d.getFullYear() + 1) : d.setMonth(d.getMonth() + 1)
+  return d
+}
+
+// ─── Plans & providers ────────────────────────────────────────
+
+export async function getPlans() {
+  const configs = await prisma.pricingConfig.findMany()
+  if (configs.length === 0) return PLAN_PRICES
+  const result: Record<string, Record<string, Record<string, number>>> = {}
+  for (const c of configs) {
+    if (!result[c.plan]) result[c.plan] = {}
+    result[c.plan]![c.billingPeriod] = { MAD: c.amount }
+  }
+  return result
+}
+
+export function getProviders() {
+  return { amanpay: amanpay.isConfigured(), paypal: paypal.isConfigured() }
+}
+
+export function getPlanFeatures() {
+  return prisma.planFeature.findMany({
+    orderBy: [{ plan: 'asc' }, { sortOrder: 'asc' }, { createdAt: 'asc' }],
+  })
+}
+
+// ─── Reads ────────────────────────────────────────────────────
+
+export function getSubscription(companyId: string) {
+  return repo.findByCompany(companyId)
+}
+
+export function getInvoices(companyId: string) {
+  return repo.findInvoices(companyId)
+}
+
+export function getEvents(companyId: string) {
+  return repo.findByCompany(companyId).then((sub: any) =>
+    sub ? repo.getEvents(sub.id) : [],
+  )
+}
+
+export function getEventsBySubscriptionId(subscriptionId: string) {
+  return repo.getEvents(subscriptionId)
+}
+
+// ─── Entitlements ─────────────────────────────────────────────
+
+export async function getEntitlement(companyId: string) {
+  const sub = await repo.findByCompany(companyId)
+  const status = sub?.status ?? 'EXPIRED'
+  const accessLevel = getAccessLevel(status)
+  return {
+    companyId,
+    subscriptionId:     sub?.id ?? null,
+    subscriptionStatus: status,
+    accessLevel,
+    plan:               sub?.plan ?? null,
+    currentPeriodEnd:   sub?.currentPeriodEnd ?? null,
+  }
+}
+
+// ─── Trial management ─────────────────────────────────────────
+
+export async function startTrial(
+  companyId: string,
+  plan: string,
+  billingPeriod: string,
+  currency: string,
+) {
+  if (SUBSCRIPTION_POLICY.trial.oneTrialPerCompany) {
+    const existing = await repo.findByCompany(companyId)
+    if (existing?.trialUsed) {
+      throw new ValidationError('This company has already used its free trial')
+    }
+  }
+
+  const trialEndAt = new Date(
+    Date.now() + SUBSCRIPTION_POLICY.trial.durationDays * 24 * 60 * 60 * 1000,
+  )
+  const sub = await repo.startTrial(companyId, plan, billingPeriod, currency, trialEndAt)
+  await repo.createEvent({
+    subscriptionId: sub.id,
+    companyId,
+    eventType: 'trial.started',
+    payload: { plan, billingPeriod, trialEndAt },
+  })
+  return sub
+}
+
+// ─── Payment success (shared by all providers) ───────────────
+
+async function handlePaymentSuccess(subscriptionId: string, invoiceId: string) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) return
+
+  await repo.markInvoicePaid(invoiceId)
+  await repo.createPaymentAttempt({
+    invoiceId,
+    subscriptionId,
+    status: 'succeeded',
+  })
+
+  const periodEnd = addPeriod(new Date(), sub.billingPeriod)
+  await repo.activateSubscription(subscriptionId, periodEnd)
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: sub.status === 'TRIALING' ? 'trial.converted' : 'subscription.activated',
+    source: 'webhook',
+    payload: { invoiceId, periodEnd },
+  })
+}
+
+// ─── Payment failure ──────────────────────────────────────────
+
+async function handlePaymentFailure(
+  subscriptionId: string,
+  invoiceId: string,
+  failureCode?: string,
+  failureMessage?: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) return
+
+  await repo.markInvoiceFailed(invoiceId)
+  await repo.createPaymentAttempt({
+    invoiceId,
+    subscriptionId,
+    status: 'failed',
+    failureCode,
+    failureMessage,
+  })
+  await repo.incrementRetryCount(sub.id)
+
+  if (sub.status !== 'PAYMENT_PENDING') {
+    await repo.setPaymentPending(sub.id)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'subscription.payment_pending',
+      source: 'webhook',
+      payload: { invoiceId, failureCode },
+    })
+  }
+}
+
+// ─── Webhook handlers ─────────────────────────────────────────
+
+async function applyAmanpayWebhook(event: any) {
+  const transactionId = event.transaction_id ?? event.id
+  const status        = event.status?.toUpperCase()
+
+  if (status === 'PAID' || status === 'SUCCEEDED') {
+    const invoice = await repo.findInvoiceByAmanpay(transactionId)
+    if (!invoice || invoice.status === 'PAID') return  // idempotent
+    await handlePaymentSuccess(invoice.subscriptionId, invoice.id)
+  } else if (status === 'FAILED' || status === 'DECLINED') {
+    const invoice = await repo.findInvoiceByAmanpay(transactionId)
+    if (!invoice || invoice.status === 'PAID') return
+    await handlePaymentFailure(invoice.subscriptionId, invoice.id, status, event.failure_reason)
+  }
+}
+
+async function applyPaypalWebhook(event: any) {
+  if (event.event_type === 'PAYMENT.CAPTURE.COMPLETED') {
+    const captureId = event.resource?.id as string
+    const invoice   = await repo.findInvoiceByPaypal(captureId)
+    if (!invoice || invoice.status === 'PAID') return  // idempotent
+    await handlePaymentSuccess(invoice.subscriptionId, invoice.id)
+  } else if (event.event_type === 'PAYMENT.CAPTURE.DENIED') {
+    const captureId = event.resource?.id as string
+    const invoice   = await repo.findInvoiceByPaypal(captureId)
+    if (!invoice || invoice.status === 'PAID') return
+    await handlePaymentFailure(invoice.subscriptionId, invoice.id, 'capture_denied')
+  }
+}
+
+export async function handleAmanpayWebhook(event: any, rawBody: string | Buffer = JSON.stringify(event)) {
+  return processWebhookOnce({
+    provider: 'amanpay:subscriptions',
+    providerEventId: getWebhookEventId('amanpay', event),
+    eventType: String(event.status ?? 'unknown'),
+    rawBody,
+    handle: () => applyAmanpayWebhook(event),
+  })
+}
+
+export async function handlePaypalWebhook(event: any, rawBody: string | Buffer = JSON.stringify(event)) {
+  return processWebhookOnce({
+    provider: 'paypal:subscriptions',
+    providerEventId: getWebhookEventId('paypal', event),
+    eventType: String(event.event_type ?? 'unknown'),
+    rawBody,
+    handle: () => applyPaypalWebhook(event),
+  })
+}
+
+// ─── Checkout ─────────────────────────────────────────────────
+
+export async function checkout(companyId: string, body: {
+  plan: 'STARTER' | 'GROWTH' | 'PRO'; billingPeriod: 'MONTHLY' | 'ANNUAL'
+  currency: 'MAD'; provider: 'AMANPAY' | 'PAYPAL'
+  successUrl: string; failureUrl: string
+}) {
+  const dbPrice = await prisma.pricingConfig.findUnique({
+    where: { plan_billingPeriod: { plan: body.plan, billingPeriod: body.billingPeriod } },
+  })
+  const amount = dbPrice?.amount ?? (PLAN_PRICES[body.plan]?.[body.billingPeriod] as any)?.[body.currency]
+  if (!amount) throw new ValidationError('Invalid plan or billing period')
+
+  const company      = await prisma.company.findUniqueOrThrow({ where: { id: companyId } })
+  const subscription = await repo.findOrCreateSubscription(companyId, body.plan, body.billingPeriod, body.currency)
+
+  const orderId     = `sub-${companyId}-${Date.now()}`
+  const description = `${body.plan} plan — ${body.billingPeriod}`
+  const webhookBase = process.env.API_URL ?? 'http://localhost:4000'
+
+  let checkoutUrl: string
+  let amanpayTransactionId: string | null = null
+  let paypalCaptureId: string | null       = null
+
+  if (body.provider === 'AMANPAY') {
+    if (!amanpay.isConfigured()) throw new ValidationError('AmanPay is not configured on this platform')
+    const result = await amanpay.createCheckout({
+      amount, currency: body.currency, orderId, description,
+      customerEmail: company.email, customerName: company.name,
+      successUrl: body.successUrl, failureUrl: body.failureUrl,
+      webhookUrl: `${webhookBase}/api/v1/subscriptions/webhooks/amanpay`,
+    })
+    checkoutUrl          = result.checkoutUrl
+    amanpayTransactionId = result.transactionId
+  } else {
+    if (!paypal.isConfigured()) throw new ValidationError('PayPal is not configured on this platform')
+    const result = await paypal.createOrder({
+      amount, currency: body.currency, orderId, description,
+      returnUrl: body.successUrl, cancelUrl: body.failureUrl,
+    })
+    checkoutUrl     = result.approveUrl
+    paypalCaptureId = result.orderId
+  }
+
+  const dueAt = new Date(Date.now() + SUBSCRIPTION_POLICY.payment.paymentPendingTimeoutDays * 24 * 60 * 60 * 1000)
+  const invoice = await repo.createInvoice({
+    companyId, subscriptionId: subscription.id, amount, currency: body.currency,
+    paymentProvider: body.provider, amanpayTransactionId, paypalCaptureId, dueAt,
+  })
+  return { invoice, checkoutUrl }
+}
+
+export async function capturePaypal(companyId: string, paypalOrderId: string) {
+  const invoice  = await repo.findInvoiceByPaypalForCompany(paypalOrderId, companyId)
+  if (invoice.status === 'PAID') return { success: true }  // idempotent
+  const capture  = await paypal.captureOrder(paypalOrderId) as Record<string, any>
+  const captureId = capture.purchase_units?.[0]?.payments?.captures?.[0]?.id ?? paypalOrderId
+  await repo.updateInvoicePaypal(invoice.id, captureId)
+  const periodEnd = addPeriod(new Date(), invoice.subscription.billingPeriod)
+  await repo.activateSubscription(invoice.subscriptionId, periodEnd)
+  await repo.createEvent({
+    subscriptionId: invoice.subscriptionId,
+    companyId,
+    eventType: 'subscription.activated',
+    source: 'user',
+    payload: { invoiceId: invoice.id },
+  })
+  return { success: true }
+}
+
+// ─── Plan changes ─────────────────────────────────────────────
+
+export function changePlan(companyId: string, data: { plan: any; billingPeriod: any; currency: string }) {
+  return repo.updatePlan(companyId, data)
+}
+
+// ─── Cancellation ─────────────────────────────────────────────
+
+export async function cancel(companyId: string, mode: 'period_end' | 'immediate' = 'period_end', reason?: string) {
+  const sub = await repo.findByCompany(companyId)
+  if (!sub) throw new ValidationError('No subscription found')
+
+  const updated = await repo.setCancelled(sub.id, mode === 'immediate')
+  await repo.createEvent({
+    subscriptionId: sub.id,
+    companyId,
+    eventType: 'subscription.canceled',
+    source: 'user',
+    payload: { mode, reason: reason ?? null },
+  })
+  return updated
+}
+
+export async function resume(companyId: string) {
+  const sub = await repo.findByCompany(companyId)
+  if (!sub) throw new ValidationError('No subscription found')
+
+  const updated = await repo.setCancelAtPeriodEnd(companyId, false)
+  await repo.createEvent({
+    subscriptionId: sub.id,
+    companyId,
+    eventType: 'subscription.resumed',
+    source: 'user',
+    payload: {},
+  })
+  return updated
+}
+
+// ─── Reactivation ────────────────────────────────────────────
+
+export async function reactivate(companyId: string, body: {
+  plan: 'STARTER' | 'GROWTH' | 'PRO'; billingPeriod: 'MONTHLY' | 'ANNUAL'
+  currency: 'MAD'; provider: 'AMANPAY' | 'PAYPAL'
+  successUrl: string; failureUrl: string
+}) {
+  const sub = await repo.findByCompany(companyId)
+  if (!sub) throw new ValidationError('No subscription found')
+
+  const allowedStatuses = ['CANCELLED', 'EXPIRED', 'SUSPENDED', 'PAST_DUE', 'PAYMENT_PENDING']
+  if (!allowedStatuses.includes(sub.status)) {
+    throw new ValidationError(`Cannot reactivate a subscription with status ${sub.status}`)
+  }
+
+  await repo.setPaymentPending(sub.id)
+  await repo.createEvent({
+    subscriptionId: sub.id,
+    companyId,
+    eventType: 'subscription.reactivated',
+    source: 'user',
+    payload: { plan: body.plan, billingPeriod: body.billingPeriod },
+  })
+
+  return checkout(companyId, body)
+}
+
+// ─── Scheduled job actions ────────────────────────────────────
+
+export async function runTrialExpirationJob() {
+  const expired = await repo.findTrialsEndedWithoutConversion()
+  for (const sub of expired) {
+    await repo.setExpired(sub.id)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'trial.expired',
+      payload: { trialEndAt: sub.trialEndAt },
+    })
+  }
+  return expired.length
+}
+
+export async function runPaymentPendingTimeoutJob() {
+  const cutoff = new Date(
+    Date.now() - SUBSCRIPTION_POLICY.payment.paymentPendingTimeoutDays * 24 * 60 * 60 * 1000,
+  )
+  const subs = await repo.findPaymentPendingTimedOut(cutoff)
+  for (const sub of subs) {
+    await repo.setPastDue(sub.id)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'subscription.past_due',
+      payload: { paymentPendingSince: sub.paymentPendingSince },
+    })
+  }
+  return subs.length
+}
+
+export async function runPastDueTimeoutJob() {
+  const cutoff = new Date(
+    Date.now() - SUBSCRIPTION_POLICY.pastDue.timeoutDays * 24 * 60 * 60 * 1000,
+  )
+  const subs = await repo.findPastDueTimedOut(cutoff)
+  for (const sub of subs) {
+    await repo.setSuspended(sub.id)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'subscription.suspended',
+      payload: { pastDueSince: sub.pastDueSince },
+    })
+  }
+  return subs.length
+}
+
+export async function runSuspensionTimeoutJob() {
+  const cutoff = new Date(
+    Date.now() - SUBSCRIPTION_POLICY.suspension.cancelAfterDays * 24 * 60 * 60 * 1000,
+  )
+  const subs = await repo.findSuspendedTimedOut(cutoff)
+  for (const sub of subs) {
+    await repo.setCancelled(sub.id, true)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'subscription.canceled',
+      payload: { reason: 'suspension_timeout', suspendedAt: sub.suspendedAt },
+    })
+  }
+  return subs.length
+}
+
+export async function runPeriodEndCancellationJob() {
+  const subs = await repo.findSubscriptionsToExpireAtPeriodEnd()
+  for (const sub of subs) {
+    await repo.setCancelled(sub.id, true)
+    await repo.createEvent({
+      subscriptionId: sub.id,
+      companyId: sub.companyId,
+      eventType: 'subscription.canceled',
+      payload: { reason: 'period_end', currentPeriodEnd: sub.currentPeriodEnd },
+    })
+  }
+  return subs.length
+}
+
+// ─── Admin overrides ──────────────────────────────────────────
+
+export async function adminExtendTrial(
+  subscriptionId: string,
+  extraDays: number,
+  adminId: string,
+  reason: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) throw new ValidationError('Subscription not found')
+
+  const currentEnd = sub.trialEndAt ?? new Date()
+  const newEnd = new Date(currentEnd.getTime() + extraDays * 24 * 60 * 60 * 1000)
+
+  await prisma.subscription.update({
+    where: { id: subscriptionId },
+    data: { trialEndAt: newEnd },
+  })
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: 'admin.override_created',
+    source: 'admin',
+    payload: { action: 'extend_trial', extraDays, newEnd, adminId, reason },
+  })
+  return { trialEndAt: newEnd }
+}
+
+export async function adminExtendGracePeriod(
+  subscriptionId: string,
+  extraDays: number,
+  adminId: string,
+  reason: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) throw new ValidationError('Subscription not found')
+
+  await repo.setPaymentPending(sub.id)
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: 'admin.override_created',
+    source: 'admin',
+    payload: { action: 'extend_grace_period', extraDays, adminId, reason },
+  })
+  return { success: true }
+}
+
+export async function adminCancelSubscription(
+  subscriptionId: string,
+  adminId: string,
+  reason: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) throw new ValidationError('Subscription not found')
+
+  await repo.setCancelled(sub.id, true)
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: 'subscription.canceled',
+    source: 'admin',
+    payload: { adminId, reason },
+  })
+  return { success: true }
+}
+
+export async function adminReactivateSubscription(
+  subscriptionId: string,
+  adminId: string,
+  reason: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) throw new ValidationError('Subscription not found')
+
+  const periodEnd = addPeriod(new Date(), sub.billingPeriod)
+  await repo.activateSubscription(subscriptionId, periodEnd)
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: 'subscription.reactivated',
+    source: 'admin',
+    payload: { adminId, reason, periodEnd },
+  })
+  return { success: true }
+}
+
+export async function adminSuspendSubscription(
+  subscriptionId: string,
+  adminId: string,
+  reason: string,
+) {
+  const sub = await repo.findById(subscriptionId)
+  if (!sub) throw new ValidationError('Subscription not found')
+
+  await repo.setSuspended(sub.id)
+  await repo.createEvent({
+    subscriptionId,
+    companyId: sub.companyId,
+    eventType: 'subscription.suspended',
+    source: 'admin',
+    payload: { adminId, reason },
+  })
+  return { success: true }
+}
diff --git a/api/src/modules/team/team.routes.ts b/api/src/modules/team/team.routes.ts
new file mode 100644
index 0000000..9aa4b33
--- /dev/null
+++ b/api/src/modules/team/team.routes.ts
@@ -0,0 +1,63 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import * as service from './team.service'
+import { inviteSchema, roleSchema, idParamSchema } from './team.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    ok(res, await service.getMembers(req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.get('/stats', async (req, res, next) => {
+  try {
+    ok(res, await service.getMemberStats(req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.post('/invite', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const body = parseBody(inviteSchema, req)
+    created(res, { data: await service.inviteEmployee(req.companyId, req.employee.id, body) })
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/role', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { role } = parseBody(roleSchema, req)
+    ok(res, await service.updateEmployeeRole(req.companyId, req.employee.id, req.employee.role, id, { role }))
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/deactivate', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.deactivateEmployee(req.companyId, req.employee.role, id))
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/reactivate', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.reactivateEmployee(req.companyId, req.employee.role, id))
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id', requireRole('OWNER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.removeEmployee(req.companyId, req.employee.role, id))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/team/team.schemas.edge.test.ts b/api/src/modules/team/team.schemas.edge.test.ts
new file mode 100644
index 0000000..cd0e64c
--- /dev/null
+++ b/api/src/modules/team/team.schemas.edge.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { idParamSchema, inviteSchema, roleSchema } from './team.schemas'
+
+describe('team.schemas edge contracts', () => {
+  it('accepts only invite payloads with real names, emails and assignable non-owner roles', () => {
+    expect(inviteSchema.parse({
+      firstName: 'Aya',
+      lastName: 'Haddad',
+      email: 'aya@example.test',
+      role: 'MANAGER',
+    })).toEqual({
+      firstName: 'Aya',
+      lastName: 'Haddad',
+      email: 'aya@example.test',
+      role: 'MANAGER',
+    })
+
+    expect(inviteSchema.safeParse({ firstName: '', lastName: 'Haddad', email: 'aya@example.test', role: 'MANAGER' }).success).toBe(false)
+    expect(inviteSchema.safeParse({ firstName: 'Aya', lastName: 'Haddad', email: 'not-email', role: 'MANAGER' }).success).toBe(false)
+    expect(inviteSchema.safeParse({ firstName: 'Aya', lastName: 'Haddad', email: 'aya@example.test', role: 'OWNER' }).success).toBe(false)
+  })
+
+  it('restricts role changes to operational roles only', () => {
+    expect(roleSchema.parse({ role: 'AGENT' })).toEqual({ role: 'AGENT' })
+    expect(roleSchema.parse({ role: 'MANAGER' })).toEqual({ role: 'MANAGER' })
+    expect(roleSchema.safeParse({ role: 'OWNER' }).success).toBe(false)
+    expect(roleSchema.safeParse({ role: 'ADMIN' }).success).toBe(false)
+  })
+
+  it('rejects empty team member route params', () => {
+    expect(idParamSchema.parse({ id: 'employee_1' })).toEqual({ id: 'employee_1' })
+    expect(idParamSchema.safeParse({ id: '' }).success).toBe(false)
+  })
+})
diff --git a/api/src/modules/team/team.schemas.ts b/api/src/modules/team/team.schemas.ts
new file mode 100644
index 0000000..c6563c9
--- /dev/null
+++ b/api/src/modules/team/team.schemas.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod'
+
+export const inviteSchema = z.object({
+  firstName: z.string().min(1).max(64),
+  lastName:  z.string().min(1).max(64),
+  email:     z.string().email(),
+  role:      z.enum(['MANAGER', 'AGENT']),
+})
+
+export const roleSchema = z.object({
+  role: z.enum(['MANAGER', 'AGENT']),
+})
+
+export const idParamSchema = z.object({
+  id: z.string().min(1),
+})
diff --git a/api/src/modules/team/team.service.test.ts b/api/src/modules/team/team.service.test.ts
new file mode 100644
index 0000000..c5ac33d
--- /dev/null
+++ b/api/src/modules/team/team.service.test.ts
@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../services/teamService', () => ({
+  listEmployees: vi.fn(),
+  inviteEmployee: vi.fn(),
+  updateEmployeeRole: vi.fn(),
+  deactivateEmployee: vi.fn(),
+  reactivateEmployee: vi.fn(),
+  removeEmployee: vi.fn(),
+}))
+
+import { listEmployees } from '../../services/teamService'
+import { getMembers, getMemberStats } from './team.service'
+
+describe('team.service module facade', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('returns the tenant member list without modifying teamService output', async () => {
+    const members = [{ id: 'emp_1', role: 'OWNER', isActive: true, invitationStatus: 'accepted' }]
+    vi.mocked(listEmployees).mockResolvedValue(members as never)
+
+    await expect(getMembers('company_1')).resolves.toBe(members)
+    expect(listEmployees).toHaveBeenCalledWith('company_1')
+  })
+
+  it('counts active, pending, and inactive accepted team members explicitly', async () => {
+    vi.mocked(listEmployees).mockResolvedValue([
+      { id: 'owner_1', isActive: true, invitationStatus: 'accepted' },
+      { id: 'manager_1', isActive: true, invitationStatus: 'accepted' },
+      { id: 'agent_1', isActive: false, invitationStatus: 'accepted' },
+      { id: 'agent_2', isActive: true, invitationStatus: 'pending' },
+      { id: 'agent_3', isActive: false, invitationStatus: 'revoked' },
+    ] as never)
+
+    await expect(getMemberStats('company_1')).resolves.toEqual({
+      total: 5,
+      active: 2,
+      pending: 1,
+      inactive: 1,
+    })
+  })
+})
diff --git a/api/src/modules/team/team.service.ts b/api/src/modules/team/team.service.ts
new file mode 100644
index 0000000..599e0de
--- /dev/null
+++ b/api/src/modules/team/team.service.ts
@@ -0,0 +1,24 @@
+import {
+  listEmployees,
+  inviteEmployee,
+  updateEmployeeRole,
+  deactivateEmployee,
+  reactivateEmployee,
+  removeEmployee,
+} from '../../services/teamService'
+
+export async function getMembers(companyId: string) {
+  return listEmployees(companyId)
+}
+
+export async function getMemberStats(companyId: string) {
+  const members = await listEmployees(companyId)
+  return {
+    total:    members.length,
+    active:   members.filter((m) => m.isActive && m.invitationStatus === 'accepted').length,
+    pending:  members.filter((m) => m.invitationStatus === 'pending').length,
+    inactive: members.filter((m) => !m.isActive && m.invitationStatus === 'accepted').length,
+  }
+}
+
+export { inviteEmployee, updateEmployeeRole, deactivateEmployee, reactivateEmployee, removeEmployee }
diff --git a/api/src/modules/vehicles/vehicle.presenter.edge.test.ts b/api/src/modules/vehicles/vehicle.presenter.edge.test.ts
new file mode 100644
index 0000000..71de06c
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.presenter.edge.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { presentVehicle, presentVehicleList } from './vehicle.presenter'
+
+describe('vehicle.presenter edge normalization', () => {
+  it('normalizes nullable and malformed location fields without leaking non-string values', () => {
+    const result = presentVehicle({
+      id: 'vehicle_1',
+      pickupLocations: ['Casablanca', null, 123, 'Rabat'],
+      allowDifferentDropoff: 0,
+      dropoffLocations: ['Airport', false, undefined, 'Hotel'],
+    })
+
+    expect(result).toMatchObject({
+      id: 'vehicle_1',
+      pickupLocations: ['Casablanca', 'Rabat'],
+      allowDifferentDropoff: false,
+      dropoffLocations: ['Airport', 'Hotel'],
+    })
+  })
+
+  it('preserves pagination metadata and does not normalize list rows twice behind the caller’s back', () => {
+    const row = { id: 'vehicle_1', pickupLocations: ['Raw'], allowDifferentDropoff: true, dropoffLocations: [] }
+
+    expect(presentVehicleList([row], { total: 1, page: 2, pageSize: 10, totalPages: 1 })).toEqual({
+      data: [row],
+      total: 1,
+      page: 2,
+      pageSize: 10,
+      totalPages: 1,
+    })
+  })
+})
diff --git a/api/src/modules/vehicles/vehicle.presenter.ts b/api/src/modules/vehicles/vehicle.presenter.ts
new file mode 100644
index 0000000..115e8e4
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.presenter.ts
@@ -0,0 +1,16 @@
+function normalizeLocations(value: unknown) {
+  return Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : []
+}
+
+export function presentVehicle(vehicle: any) {
+  return {
+    ...vehicle,
+    pickupLocations: normalizeLocations(vehicle?.pickupLocations),
+    allowDifferentDropoff: Boolean(vehicle?.allowDifferentDropoff),
+    dropoffLocations: normalizeLocations(vehicle?.dropoffLocations),
+  }
+}
+
+export function presentVehicleList(vehicles: any[], meta: { total: number; page: number; pageSize: number; totalPages: number }) {
+  return { data: vehicles, ...meta }
+}
diff --git a/api/src/modules/vehicles/vehicle.pricing.service.test.ts b/api/src/modules/vehicles/vehicle.pricing.service.test.ts
new file mode 100644
index 0000000..8a5fe10
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.pricing.service.test.ts
@@ -0,0 +1,188 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+
+vi.mock('./vehicle.repo')
+vi.mock('../../lib/storage', () => ({ uploadImage: vi.fn() }))
+
+import * as repo from './vehicle.repo'
+import * as service from './vehicle.service'
+
+const vehicle = {
+  id: 'vehicle_1',
+  companyId: 'company_1',
+  make: 'Toyota',
+  model: 'Corolla',
+  year: 2024,
+  dailyRate: 4000,
+  photos: [],
+  pickupLocations: [],
+  allowDifferentDropoff: false,
+  dropoffLocations: [],
+  createdAt: new Date('2026-01-01T00:00:00.000Z'),
+  updatedAt: new Date('2026-01-02T00:00:00.000Z'),
+}
+
+const config = {
+  id: 'pricing_config_1',
+  vehicleId: 'vehicle_1',
+  pricingMode: 'MANUAL',
+  baseDailyRate: 4000,
+  weeklyRate: 24000,
+  weekendRate: null,
+  holidayRate: null,
+  monthlyRate: null,
+  longTermDailyRate: null,
+  minimumDailyRate: null,
+  maximumDailyRate: null,
+  maxDailyPriceMovementPct: 10,
+  automaticPricingEnabled: false,
+  approvalRequired: false,
+  rules: [],
+  history: [],
+  createdAt: new Date('2026-01-01T00:00:00.000Z'),
+  updatedAt: new Date('2026-01-02T00:00:00.000Z'),
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('vehicle pricing service boundaries', () => {
+  it('creates a default pricing configuration from the vehicle when one does not exist', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration).mockResolvedValue(null as any)
+    vi.mocked(repo.createPricingConfiguration).mockResolvedValue(config as any)
+
+    const result = await service.getVehiclePricing('vehicle_1', 'company_1')
+
+    expect(repo.createPricingConfiguration).toHaveBeenCalledWith(expect.objectContaining({
+      vehicleId: 'vehicle_1',
+      pricingMode: 'MANUAL',
+      baseDailyRate: 4000,
+      weeklyRate: 28000,
+    }))
+    expect(result.configuration.baseDailyRate).toBe(4000)
+    expect(result.preview.next14Days).toHaveLength(14)
+  })
+
+  it('returns a transient pricing configuration when pricing tables are missing', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration).mockRejectedValue({ code: 'P2021' })
+
+    const result = await service.getVehiclePricing('vehicle_1', 'company_1')
+
+    expect(result.configuration.id).toBe('transient-vehicle_1')
+    expect(result.configuration.baseDailyRate).toBe(4000)
+    expect(repo.createPricingConfiguration).not.toHaveBeenCalled()
+  })
+
+  it('rejects pricing configuration bounds before persisting invalid rates', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration).mockResolvedValue(config as any)
+
+    await expect(service.updateVehiclePricing('vehicle_1', 'company_1', 'employee_1', {
+      pricingMode: 'MANUAL',
+      baseDailyRate: 4000,
+      minimumDailyRate: 5000,
+      maximumDailyRate: 3000,
+      maxDailyPriceMovementPct: 10,
+      automaticPricingEnabled: false,
+      approvalRequired: false,
+    })).rejects.toThrow('Daily minimum rate must be less than or equal to the maximum rate')
+
+    expect(repo.updatePricingConfiguration).not.toHaveBeenCalled()
+    expect(repo.createPriceHistory).not.toHaveBeenCalled()
+  })
+
+  it('syncs vehicle daily rate and writes price history when pricing configuration changes', async () => {
+    const updatedConfig = { ...config, baseDailyRate: 4500, weeklyRate: 27000 }
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration)
+      .mockResolvedValueOnce(config as any)
+      .mockResolvedValueOnce(updatedConfig as any)
+    vi.mocked(repo.updatePricingConfiguration).mockResolvedValue(updatedConfig as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...vehicle, dailyRate: 4500 } as any)
+    vi.mocked(repo.createPriceHistory).mockResolvedValue({ id: 'history_1' } as any)
+
+    await service.updateVehiclePricing('vehicle_1', 'company_1', 'employee_1', {
+      pricingMode: 'MANUAL',
+      baseDailyRate: 4500,
+      weeklyRate: 27000,
+      maxDailyPriceMovementPct: 10,
+      automaticPricingEnabled: false,
+      approvalRequired: false,
+      note: 'Seasonal update',
+    })
+
+    expect(repo.updatePricingConfiguration).toHaveBeenCalledWith('pricing_config_1', expect.objectContaining({ baseDailyRate: 4500 }))
+    expect(repo.updateById).toHaveBeenCalledWith('vehicle_1', { dailyRate: 4500 })
+    expect(repo.createPriceHistory).toHaveBeenCalledWith(expect.objectContaining({
+      source: 'CONFIG_UPDATE',
+      changedByEmployeeId: 'employee_1',
+      previousDailyRate: 4000,
+      nextDailyRate: 4500,
+      note: 'Seasonal update',
+    }))
+  })
+
+  it('rejects pricing rules that do not define any pricing effect', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration).mockResolvedValue(config as any)
+
+    await expect(service.createVehiclePricingRule('vehicle_1', 'company_1', 'employee_1', {
+      name: 'Empty rule',
+      ruleType: 'DATE_RANGE',
+      startDate: '2026-07-01',
+      endDate: '2026-07-10',
+      isActive: true,
+      sortOrder: 0,
+    })).rejects.toThrow('Pricing rules must define at least one rate, bound, or adjustment')
+
+    expect(repo.createPricingRule).not.toHaveBeenCalled()
+  })
+
+  it('rejects pricing rules whose end date is before the start date', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration).mockResolvedValue(config as any)
+
+    await expect(service.createVehiclePricingRule('vehicle_1', 'company_1', 'employee_1', {
+      name: 'Broken rule',
+      ruleType: 'DATE_RANGE',
+      startDate: '2026-07-10',
+      endDate: '2026-07-01',
+      dailyRate: 5000,
+      isActive: true,
+      sortOrder: 0,
+    })).rejects.toThrow('Rule end date must be on or after the start date')
+  })
+
+  it('deletes an existing pricing rule and records the rollback target in history', async () => {
+    const rule = {
+      id: 'rule_1',
+      name: 'Weekend bump',
+      ruleType: 'WEEKEND',
+      startDate: new Date('2026-07-01T00:00:00.000Z'),
+      dailyRate: 5200,
+      weeklyRate: null,
+    }
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findPricingConfiguration)
+      .mockResolvedValueOnce(config as any)
+      .mockResolvedValueOnce({ ...config, rules: [] } as any)
+    vi.mocked(repo.findPricingRule).mockResolvedValue(rule as any)
+    vi.mocked(repo.deletePricingRule).mockResolvedValue({ count: 1 } as any)
+    vi.mocked(repo.createPriceHistory).mockResolvedValue({ id: 'history_1' } as any)
+
+    await service.deleteVehiclePricingRule('vehicle_1', 'company_1', 'rule_1', 'employee_1')
+
+    expect(repo.deletePricingRule).toHaveBeenCalledWith('rule_1', 'pricing_config_1')
+    expect(repo.createPriceHistory).toHaveBeenCalledWith(expect.objectContaining({
+      source: 'RULE_DELETED',
+      previousDailyRate: 5200,
+      nextDailyRate: 4000,
+      note: 'Deleted pricing rule: Weekend bump',
+    }))
+  })
+})
diff --git a/api/src/modules/vehicles/vehicle.repo.edge.test.ts b/api/src/modules/vehicles/vehicle.repo.edge.test.ts
new file mode 100644
index 0000000..7437254
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.repo.edge.test.ts
@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    vehicle: {
+      findMany: vi.fn(),
+      count: vi.fn(),
+      findFirst: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      updateMany: vi.fn(),
+    },
+    reservation: { findMany: vi.fn() },
+    vehicleCalendarBlock: { findMany: vi.fn(), create: vi.fn(), deleteMany: vi.fn() },
+    maintenanceLog: { findMany: vi.fn(), create: vi.fn() },
+    vehiclePricingConfiguration: { findUnique: vi.fn(), create: vi.fn(), update: vi.fn() },
+    vehiclePricingRule: { findFirst: vi.fn(), create: vi.fn(), update: vi.fn(), deleteMany: vi.fn() },
+    vehiclePriceHistory: { create: vi.fn() },
+  },
+}))
+
+import { prisma } from '../../lib/prisma'
+import * as repo from './vehicle.repo'
+
+describe('vehicle.repo edge queries', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('soft deletes by taking the vehicle out of service and unpublishing it inside the tenant boundary', async () => {
+    await repo.softDelete('vehicle_1', 'company_1')
+
+    expect(prisma.vehicle.updateMany).toHaveBeenCalledWith({
+      where: { id: 'vehicle_1', companyId: 'company_1' },
+      data: { status: 'OUT_OF_SERVICE', isPublished: false },
+    })
+  })
+
+  it('publishes and unpublishes inside the tenant boundary', async () => {
+    await repo.setPublished('vehicle_1', 'company_1', true)
+    expect(prisma.vehicle.updateMany).toHaveBeenCalledWith({
+      where: { id: 'vehicle_1', companyId: 'company_1' },
+      data: { isPublished: true },
+    })
+  })
+
+  it('finds reservation conflicts by overlap and active statuses only', async () => {
+    const start = new Date('2026-09-01T00:00:00.000Z')
+    const end = new Date('2026-09-07T00:00:00.000Z')
+
+    await repo.findReservationConflicts('vehicle_1', 'company_1', start, end)
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith({
+      where: {
+        vehicleId: 'vehicle_1',
+        companyId: 'company_1',
+        status: { in: ['CONFIRMED', 'ACTIVE'] },
+        startDate: { lt: end },
+        endDate: { gt: start },
+      },
+      select: { id: true, startDate: true, endDate: true, status: true },
+    })
+  })
+
+  it('loads calendar reservations and blocks in chronological order for the requested range', async () => {
+    const rangeStart = new Date('2026-10-01T00:00:00.000Z')
+    const rangeEnd = new Date('2026-10-31T23:59:59.000Z')
+
+    await repo.findCalendarEvents('vehicle_1', 'company_1', rangeStart, rangeEnd)
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where: expect.objectContaining({
+        vehicleId: 'vehicle_1',
+        companyId: 'company_1',
+        status: { in: ['DRAFT', 'CONFIRMED', 'ACTIVE'] },
+        startDate: { lt: rangeEnd },
+        endDate: { gt: rangeStart },
+      }),
+      orderBy: { startDate: 'asc' },
+    }))
+    expect(prisma.vehicleCalendarBlock.findMany).toHaveBeenCalledWith({
+      where: { vehicleId: 'vehicle_1', startDate: { lt: rangeEnd }, endDate: { gt: rangeStart } },
+      orderBy: { startDate: 'asc' },
+    })
+  })
+
+  it('loads pricing configuration with deterministic rule and history ordering', async () => {
+    await repo.findPricingConfiguration('vehicle_1')
+
+    expect(prisma.vehiclePricingConfiguration.findUnique).toHaveBeenCalledWith({
+      where: { vehicleId: 'vehicle_1' },
+      include: {
+        rules: { orderBy: [{ sortOrder: 'asc' }, { startDate: 'asc' }, { createdAt: 'asc' }] },
+        history: { orderBy: { createdAt: 'desc' }, take: 20 },
+      },
+    })
+  })
+})
diff --git a/api/src/modules/vehicles/vehicle.repo.ts b/api/src/modules/vehicles/vehicle.repo.ts
new file mode 100644
index 0000000..b59c112
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.repo.ts
@@ -0,0 +1,142 @@
+import { prisma } from '../../lib/prisma'
+
+export async function findMany(where: any, skip: number, take: number) {
+  return Promise.all([
+    prisma.vehicle.findMany({ where, skip, take, orderBy: { createdAt: 'desc' } }),
+    prisma.vehicle.count({ where }),
+  ])
+}
+
+export async function findById(id: string, companyId: string) {
+  return prisma.vehicle.findFirst({ where: { id, companyId } })
+}
+
+export async function findFirst(id: string, companyId: string) {
+  return prisma.vehicle.findFirst({ where: { id, companyId } })
+}
+
+export async function create(data: any) {
+  return prisma.vehicle.create({ data })
+}
+
+export async function updateById(id: string, data: any) {
+  return prisma.vehicle.update({ where: { id }, data })
+}
+
+export async function softDelete(id: string, companyId: string) {
+  return prisma.vehicle.updateMany({ where: { id, companyId }, data: { status: 'OUT_OF_SERVICE', isPublished: false } })
+}
+
+export async function setPublished(id: string, companyId: string, isPublished: boolean) {
+  return prisma.vehicle.updateMany({ where: { id, companyId }, data: { isPublished } })
+}
+
+export async function findReservationConflicts(vehicleId: string, companyId: string, start: Date, end: Date) {
+  return prisma.reservation.findMany({
+    where: {
+      vehicleId,
+      companyId,
+      status: { in: ['CONFIRMED', 'ACTIVE'] },
+      startDate: { lt: end },
+      endDate:   { gt: start },
+    },
+    select: { id: true, startDate: true, endDate: true, status: true },
+  })
+}
+
+export async function findCalendarBlockConflicts(vehicleId: string, start: Date, end: Date) {
+  return prisma.vehicleCalendarBlock.findMany({
+    where: { vehicleId, startDate: { lt: end }, endDate: { gt: start } },
+    select: { id: true, startDate: true, endDate: true, type: true, reason: true },
+  })
+}
+
+export async function findCalendarEvents(vehicleId: string, companyId: string, rangeStart: Date, rangeEnd: Date) {
+  return Promise.all([
+    prisma.reservation.findMany({
+      where: {
+        vehicleId,
+        companyId,
+        status: { in: ['DRAFT', 'CONFIRMED', 'ACTIVE'] },
+        startDate: { lt: rangeEnd },
+        endDate:   { gt: rangeStart },
+      },
+      select: {
+        id: true, startDate: true, endDate: true, status: true,
+        customer: { select: { firstName: true, lastName: true } },
+      },
+      orderBy: { startDate: 'asc' },
+    }),
+    prisma.vehicleCalendarBlock.findMany({
+      where: { vehicleId, startDate: { lt: rangeEnd }, endDate: { gt: rangeStart } },
+      orderBy: { startDate: 'asc' },
+    }),
+  ])
+}
+
+export async function createCalendarBlock(data: any) {
+  return prisma.vehicleCalendarBlock.create({ data })
+}
+
+export async function deleteCalendarBlock(id: string, vehicleId: string) {
+  return prisma.vehicleCalendarBlock.deleteMany({ where: { id, vehicleId } })
+}
+
+export async function findMaintenanceLogs(vehicleId: string) {
+  return prisma.maintenanceLog.findMany({ where: { vehicleId }, orderBy: { performedAt: 'desc' } })
+}
+
+export async function createMaintenanceLog(data: any) {
+  return prisma.maintenanceLog.create({ data })
+}
+
+export async function findPricingConfiguration(vehicleId: string) {
+  return prisma.vehiclePricingConfiguration.findUnique({
+    where: { vehicleId },
+    include: {
+      rules: { orderBy: [{ sortOrder: 'asc' }, { startDate: 'asc' }, { createdAt: 'asc' }] },
+      history: { orderBy: { createdAt: 'desc' }, take: 20 },
+    },
+  })
+}
+
+export async function createPricingConfiguration(data: any) {
+  return prisma.vehiclePricingConfiguration.create({
+    data,
+    include: {
+      rules: { orderBy: [{ sortOrder: 'asc' }, { startDate: 'asc' }, { createdAt: 'asc' }] },
+      history: { orderBy: { createdAt: 'desc' }, take: 20 },
+    },
+  })
+}
+
+export async function updatePricingConfiguration(id: string, data: any) {
+  return prisma.vehiclePricingConfiguration.update({
+    where: { id },
+    data,
+    include: {
+      rules: { orderBy: [{ sortOrder: 'asc' }, { startDate: 'asc' }, { createdAt: 'asc' }] },
+      history: { orderBy: { createdAt: 'desc' }, take: 20 },
+    },
+  })
+}
+
+export async function findPricingRule(id: string, configurationId: string) {
+  return prisma.vehiclePricingRule.findFirst({ where: { id, configurationId } })
+}
+
+export async function createPricingRule(data: any) {
+  return prisma.vehiclePricingRule.create({ data })
+}
+
+export async function updatePricingRule(id: string, data: any) {
+  return prisma.vehiclePricingRule.update({ where: { id }, data })
+}
+
+export async function deletePricingRule(id: string, configurationId: string) {
+  return prisma.vehiclePricingRule.deleteMany({ where: { id, configurationId } })
+}
+
+export async function createPriceHistory(data: any) {
+  return prisma.vehiclePriceHistory.create({ data })
+}
diff --git a/api/src/modules/vehicles/vehicle.routes.ts b/api/src/modules/vehicles/vehicle.routes.ts
new file mode 100644
index 0000000..51717b8
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.routes.ts
@@ -0,0 +1,187 @@
+import { Router } from 'express'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireRole } from '../../middleware/requireRole'
+import { parseBody, parseQuery, parseParams } from '../../http/validate'
+import { ok, created } from '../../http/respond'
+import { imageUpload, assertImageFiles } from '../../http/upload'
+import * as service from './vehicle.service'
+import {
+  vehicleSchema, listQuerySchema, availabilityQuerySchema, calendarQuerySchema,
+  calendarBlockSchema, maintenanceLogSchema, publishSchema, statusSchema,
+  pricingConfigSchema, pricingRuleSchema,
+  idParamSchema, photoIdxSchema, blockIdParamSchema, pricingRuleParamSchema,
+} from './vehicle.schemas'
+
+const router = Router()
+
+router.use(requireCompanyAuth, requireTenant, requireSubscription)
+
+router.get('/', async (req, res, next) => {
+  try {
+    const query = parseQuery(listQuerySchema, req)
+    const result = await service.listVehicles(req.companyId, query)
+    res.json(result)
+  } catch (err) { next(err) }
+})
+
+router.post('/', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const body = parseBody(vehicleSchema, req)
+    const vehicle = await service.createVehicle(body, req.companyId)
+    created(res, vehicle)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const vehicle = await service.getVehicle(id, req.companyId)
+    ok(res, vehicle)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(vehicleSchema.partial(), req)
+    const vehicle = await service.updateVehicle(id, req.companyId, body)
+    ok(res, vehicle)
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    await service.deleteVehicle(id, req.companyId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/photos', requireRole('MANAGER'), imageUpload.array('photos', 10), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const files = req.files as Express.Multer.File[]
+    assertImageFiles(files)
+    const updated = await service.uploadPhotos(id, req.companyId, files)
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id/photos/:idx', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id, idx } = parseParams(photoIdxSchema, req)
+    const updated = await service.deletePhoto(id, req.companyId, parseInt(idx, 10))
+    ok(res, updated)
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/status', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { status } = parseBody(statusSchema, req)
+    ok(res, await service.setStatus(id, req.companyId, status))
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/publish', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { isPublished } = parseBody(publishSchema, req)
+    await service.setPublished(id, req.companyId, isPublished)
+    ok(res, { success: true, isPublished })
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/availability', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { startDate, endDate } = parseQuery(availabilityQuerySchema, req)
+    const result = await service.checkAvailability(id, req.companyId, startDate, endDate)
+    ok(res, result)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/calendar', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const { year, month } = parseQuery(calendarQuerySchema, req)
+    const events = await service.getCalendar(id, req.companyId, year, month)
+    ok(res, events)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/calendar/blocks', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(calendarBlockSchema, req)
+    const block = await service.createCalendarBlock(id, req.companyId, body)
+    created(res, block)
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id/calendar/blocks/:blockId', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id, blockId } = parseParams(blockIdParamSchema, req)
+    await service.deleteCalendarBlock(id, req.companyId, blockId)
+    ok(res, { success: true })
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/maintenance', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const logs = await service.getMaintenanceLogs(id, req.companyId)
+    ok(res, logs)
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/maintenance', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(maintenanceLogSchema, req)
+    const log = await service.createMaintenanceLog(id, req.companyId, body)
+    created(res, log)
+  } catch (err) { next(err) }
+})
+
+router.get('/:id/pricing', async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    ok(res, await service.getVehiclePricing(id, req.companyId))
+  } catch (err) { next(err) }
+})
+
+router.put('/:id/pricing', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(pricingConfigSchema, req)
+    ok(res, await service.updateVehiclePricing(id, req.companyId, req.employee.id, body))
+  } catch (err) { next(err) }
+})
+
+router.post('/:id/pricing/rules', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id } = parseParams(idParamSchema, req)
+    const body = parseBody(pricingRuleSchema, req)
+    created(res, await service.createVehiclePricingRule(id, req.companyId, req.employee.id, body))
+  } catch (err) { next(err) }
+})
+
+router.patch('/:id/pricing/rules/:ruleId', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id, ruleId } = parseParams(pricingRuleParamSchema, req)
+    const body = parseBody(pricingRuleSchema.partial(), req)
+    ok(res, await service.updateVehiclePricingRule(id, req.companyId, ruleId, req.employee.id, body))
+  } catch (err) { next(err) }
+})
+
+router.delete('/:id/pricing/rules/:ruleId', requireRole('MANAGER'), async (req, res, next) => {
+  try {
+    const { id, ruleId } = parseParams(pricingRuleParamSchema, req)
+    ok(res, await service.deleteVehiclePricingRule(id, req.companyId, ruleId, req.employee.id))
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/api/src/modules/vehicles/vehicle.schemas.test.ts b/api/src/modules/vehicles/vehicle.schemas.test.ts
new file mode 100644
index 0000000..70a5e14
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.schemas.test.ts
@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest'
+import {
+  availabilityQuerySchema,
+  calendarBlockSchema,
+  calendarQuerySchema,
+  listQuerySchema,
+  pricingConfigSchema,
+  pricingRuleSchema,
+  vehicleSchema,
+} from './vehicle.schemas'
+
+describe('vehicle.schemas', () => {
+  it('applies safe create defaults without mutating required vehicle identity fields', () => {
+    const parsed = vehicleSchema.parse({
+      make: 'Toyota',
+      model: 'Yaris',
+      year: 2026,
+      licensePlate: '123-A-45',
+      category: 'ECONOMY',
+    })
+
+    expect(parsed).toMatchObject({
+      color: '',
+      seats: 5,
+      transmission: 'AUTOMATIC',
+      fuelType: 'GASOLINE',
+      features: [],
+      isPublished: true,
+      pickupLocations: [],
+      allowDifferentDropoff: false,
+      dropoffLocations: [],
+    })
+  })
+
+  it('rejects impossible vehicle years and invalid fleet capacity inputs', () => {
+    expect(() => vehicleSchema.parse({
+      make: 'Toyota',
+      model: 'Yaris',
+      year: 1989,
+      licensePlate: '123-A-45',
+      category: 'ECONOMY',
+    })).toThrow()
+
+    expect(() => vehicleSchema.parse({
+      make: 'Ford',
+      model: 'Transit',
+      year: 2026,
+      licensePlate: '456-B-78',
+      category: 'VAN',
+      seats: 0,
+    })).toThrow()
+  })
+
+  it('coerces list and calendar query params while enforcing page and month bounds', () => {
+    expect(listQuerySchema.parse({ page: '3', pageSize: '50', status: 'AVAILABLE' })).toEqual({
+      page: 3,
+      pageSize: 50,
+      status: 'AVAILABLE',
+    })
+    expect(calendarQuerySchema.parse({ year: '2026', month: '6' })).toEqual({ year: 2026, month: 6 })
+    expect(() => calendarQuerySchema.parse({ year: '2026', month: '13' })).toThrow()
+    expect(() => listQuerySchema.parse({ page: '0' })).toThrow()
+  })
+
+  it('accepts date-only and offset timestamps for calendar blocks', () => {
+    expect(calendarBlockSchema.parse({ startDate: '2026-07-01', endDate: '2026-07-03' })).toMatchObject({
+      startDate: '2026-07-01',
+      endDate: '2026-07-03',
+      type: 'MANUAL',
+    })
+    expect(calendarBlockSchema.parse({
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+      type: 'MAINTENANCE',
+    }).type).toBe('MAINTENANCE')
+  })
+
+  it('protects automatic pricing configuration bounds', () => {
+    expect(pricingConfigSchema.parse({
+      pricingMode: 'AUTOMATIC',
+      baseDailyRate: 350,
+      maxDailyPriceMovementPct: 25,
+      automaticPricingEnabled: true,
+      approvalRequired: true,
+    })).toMatchObject({
+      pricingMode: 'AUTOMATIC',
+      baseDailyRate: 350,
+      maxDailyPriceMovementPct: 25,
+      automaticPricingEnabled: true,
+    })
+
+    expect(() => pricingConfigSchema.parse({
+      pricingMode: 'AUTOMATIC',
+      baseDailyRate: 350,
+      maxDailyPriceMovementPct: 101,
+    })).toThrow()
+  })
+
+  it('keeps pricing rule adjustments inside expected rate limits', () => {
+    expect(pricingRuleSchema.parse({
+      name: 'Summer peak',
+      startDate: '2026-08-01',
+      endDate: '2026-08-31',
+      automaticAdjustmentPct: 50,
+    })).toMatchObject({
+      name: 'Summer peak',
+      ruleType: 'DATE_RANGE',
+      automaticAdjustmentPct: 50,
+      isActive: true,
+      sortOrder: 0,
+    })
+
+    expect(() => pricingRuleSchema.parse({
+      name: 'Broken multiplier',
+      startDate: '2026-08-01',
+      endDate: '2026-08-31',
+      automaticAdjustmentPct: 250,
+    })).toThrow()
+  })
+
+  it('does not validate date ordering in query-only availability input', () => {
+    expect(availabilityQuerySchema.parse({ startDate: '2026-08-10', endDate: '2026-08-01' })).toEqual({
+      startDate: '2026-08-10',
+      endDate: '2026-08-01',
+    })
+  })
+})
diff --git a/api/src/modules/vehicles/vehicle.schemas.ts b/api/src/modules/vehicles/vehicle.schemas.ts
new file mode 100644
index 0000000..8fdc50f
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.schemas.ts
@@ -0,0 +1,103 @@
+import { z } from 'zod'
+import { sanitizeAndFormat } from '../../lib/inputValidation'
+import { carTextField, upperField, optionalUpperField } from '../../lib/zodValidation'
+
+export const vehicleSchema = z.object({
+  make:         carTextField('carMark'),
+  model:        carTextField('carModel'),
+  year:         z.number().int().min(1990).max(new Date().getFullYear() + 1),
+  color:        z.string().optional().default('').transform((v: string) => v ? sanitizeAndFormat(v, 'carColor') : ''),
+  licensePlate: upperField('licensePlate'),
+  vin:          optionalUpperField('vin'),
+  category:     z.enum(['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK']),
+  seats:        z.number().int().min(1).max(20).default(5),
+  transmission: z.enum(['AUTOMATIC', 'MANUAL']).default('AUTOMATIC'),
+  fuelType:     z.enum(['GASOLINE', 'DIESEL', 'ELECTRIC', 'HYBRID']).default('GASOLINE'),
+  features:     z.array(z.string()).default([]),
+  dailyRate:    z.number().int().min(0).optional(),
+  mileage:      z.number().int().optional(),
+  notes:        z.string().optional(),
+  isPublished:  z.boolean().default(true),
+  status:       z.enum(['AVAILABLE', 'RESERVED', 'READY', 'RENTED', 'RETURNED', 'NEEDS_CLEANING', 'MAINTENANCE', 'DAMAGE_REVIEW', 'OUT_OF_SERVICE']).optional(),
+  pickupLocations: z.array(z.string().trim().min(1)).default([]),
+  allowDifferentDropoff: z.boolean().default(false),
+  dropoffLocations: z.array(z.string().trim().min(1)).default([]),
+})
+
+export const listQuerySchema = z.object({
+  status:   z.string().optional(),
+  category: z.string().optional(),
+  published: z.string().optional(),
+  page:     z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(100).default(20),
+})
+
+export const availabilityQuerySchema = z.object({
+  startDate: z.string(),
+  endDate:   z.string(),
+})
+
+export const calendarQuerySchema = z.object({
+  year:  z.coerce.number().int(),
+  month: z.coerce.number().int().min(1).max(12),
+})
+
+export const calendarBlockSchema = z.object({
+  startDate: z.string().datetime({ offset: true }).or(z.string().regex(/^\d{4}-\d{2}-\d{2}$/)),
+  endDate:   z.string().datetime({ offset: true }).or(z.string().regex(/^\d{4}-\d{2}-\d{2}$/)),
+  reason:    z.string().optional(),
+  type:      z.enum(['MANUAL', 'MAINTENANCE']).default('MANUAL'),
+})
+
+export const maintenanceLogSchema = z.object({
+  type:           z.string().min(1),
+  description:    z.string().optional(),
+  cost:           z.number().int().optional(),
+  mileage:        z.number().int().optional(),
+  performedAt:    z.string().datetime(),
+  nextDueAt:      z.string().datetime().optional(),
+  nextDueMileage: z.number().int().optional(),
+})
+
+const nullableRateSchema = z.number().int().min(0).nullable().optional()
+
+export const pricingConfigSchema = z.object({
+  pricingMode: z.enum(['MANUAL', 'AUTOMATIC']),
+  baseDailyRate: z.number().int().min(0),
+  weeklyRate: nullableRateSchema,
+  weekendRate: nullableRateSchema,
+  holidayRate: nullableRateSchema,
+  monthlyRate: nullableRateSchema,
+  longTermDailyRate: nullableRateSchema,
+  minimumDailyRate: nullableRateSchema,
+  maximumDailyRate: nullableRateSchema,
+  maxDailyPriceMovementPct: z.number().int().min(0).max(100).default(10),
+  automaticPricingEnabled: z.boolean().default(false),
+  approvalRequired: z.boolean().default(false),
+  note: z.string().trim().min(1).max(500).optional(),
+})
+
+export const pricingRuleSchema = z.object({
+  name: z.string().trim().min(1).max(120),
+  ruleType: z.enum(['DATE_RANGE', 'SEASONAL', 'HOLIDAY', 'WEEKEND', 'SPECIAL_EVENT', 'MANUAL_OVERRIDE']).default('DATE_RANGE'),
+  startDate: z.string().datetime({ offset: true }).or(z.string().regex(/^\d{4}-\d{2}-\d{2}$/)),
+  endDate: z.string().datetime({ offset: true }).or(z.string().regex(/^\d{4}-\d{2}-\d{2}$/)),
+  dailyRate: nullableRateSchema,
+  weeklyRate: nullableRateSchema,
+  weekendRate: nullableRateSchema,
+  monthlyRate: nullableRateSchema,
+  minDailyRate: nullableRateSchema,
+  maxDailyRate: nullableRateSchema,
+  automaticAdjustmentPct: z.number().int().min(-100).max(200).nullable().optional(),
+  priceAdjustment: z.number().int().nullable().optional(),
+  isActive: z.boolean().default(true),
+  sortOrder: z.number().int().min(0).max(1000).default(0),
+})
+
+export const publishSchema = z.object({ isPublished: z.boolean() })
+export const statusSchema  = z.object({ status: z.enum(['AVAILABLE', 'RESERVED', 'READY', 'RENTED', 'RETURNED', 'NEEDS_CLEANING', 'MAINTENANCE', 'DAMAGE_REVIEW', 'OUT_OF_SERVICE']) })
+
+export const idParamSchema    = z.object({ id: z.string() })
+export const photoIdxSchema   = z.object({ id: z.string(), idx: z.string() })
+export const blockIdParamSchema = z.object({ id: z.string(), blockId: z.string() })
+export const pricingRuleParamSchema = z.object({ id: z.string(), ruleId: z.string() })
diff --git a/api/src/modules/vehicles/vehicle.service.edge.test.ts b/api/src/modules/vehicles/vehicle.service.edge.test.ts
new file mode 100644
index 0000000..1007a53
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.service.edge.test.ts
@@ -0,0 +1,131 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/storage', () => ({ uploadImage: vi.fn().mockResolvedValue('https://cdn.example.test/photo.jpg') }))
+vi.mock('./vehicle.repo', () => ({
+  create: vi.fn(),
+  findFirst: vi.fn(),
+  updateById: vi.fn(),
+  findById: vi.fn(),
+  findCalendarEvents: vi.fn(),
+  createMaintenanceLog: vi.fn(),
+  findPricingConfiguration: vi.fn(),
+  updatePricingConfiguration: vi.fn(),
+  createPriceHistory: vi.fn(),
+}))
+
+const repo = await import('./vehicle.repo')
+const service = await import('./vehicle.service')
+
+const vehicle = {
+  id: 'vehicle_1',
+  companyId: 'company_1',
+  make: 'Toyota',
+  model: 'Yaris',
+  year: 2024,
+  status: 'AVAILABLE',
+  isPublished: true,
+  dailyRate: 30000,
+  photos: [],
+  pickupLocations: ['Casablanca'],
+  allowDifferentDropoff: true,
+  dropoffLocations: ['Rabat'],
+  createdAt: new Date('2026-01-01T00:00:00.000Z'),
+  updatedAt: new Date('2026-01-01T00:00:00.000Z'),
+}
+
+beforeEach(() => vi.clearAllMocks())
+
+describe('vehicle.service edge behavior', () => {
+  it('deduplicates and trims location settings when creating vehicles', async () => {
+    vi.mocked(repo.create).mockResolvedValue({ ...vehicle, pickupLocations: ['Casablanca', 'Rabat'], dropoffLocations: ['Airport'] } as any)
+
+    await service.createVehicle({
+      make: 'Toyota',
+      pickupLocations: [' Casablanca ', 'casablanca', '', 42, 'Rabat'],
+      allowDifferentDropoff: true,
+      dropoffLocations: [' Airport ', 'airport', null],
+    }, 'company_1')
+
+    expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      pickupLocations: ['Casablanca', 'Rabat'],
+      allowDifferentDropoff: true,
+      dropoffLocations: ['Airport'],
+    }))
+  })
+
+  it('clears drop-off locations when different drop-off is disabled', async () => {
+    vi.mocked(repo.findFirst).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.updateById).mockResolvedValue({ ...vehicle, allowDifferentDropoff: false, dropoffLocations: [] } as any)
+
+    await service.updateVehicle('vehicle_1', 'company_1', {
+      allowDifferentDropoff: false,
+      dropoffLocations: ['Rabat'],
+    })
+
+    expect(repo.updateById).toHaveBeenCalledWith('vehicle_1', expect.objectContaining({
+      allowDifferentDropoff: false,
+      dropoffLocations: [],
+    }))
+  })
+
+  it('rejects enabling different drop-off without any usable drop-off location', async () => {
+    await expect(service.createVehicle({
+      allowDifferentDropoff: true,
+      dropoffLocations: [' ', null],
+    }, 'company_1')).rejects.toThrow('Drop-off locations are required')
+
+    expect(repo.create).not.toHaveBeenCalled()
+  })
+
+  it('builds calendar labels from customers and block reasons', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.findCalendarEvents).mockResolvedValue([
+      [{
+        id: 'reservation_1',
+        startDate: new Date('2026-09-01T00:00:00.000Z'),
+        endDate: new Date('2026-09-03T00:00:00.000Z'),
+        status: 'CONFIRMED',
+        customer: { firstName: 'Aya', lastName: 'Benali' },
+      }],
+      [{
+        id: 'block_1',
+        startDate: new Date('2026-09-10T00:00:00.000Z'),
+        endDate: new Date('2026-09-11T00:00:00.000Z'),
+        type: 'MAINTENANCE',
+        reason: null,
+      }],
+    ] as any)
+
+    const result = await service.getCalendar('vehicle_1', 'company_1', 2026, 9)
+
+    expect(repo.findCalendarEvents).toHaveBeenCalledWith(
+      'vehicle_1',
+      'company_1',
+      new Date(2026, 8, 1),
+      new Date(2026, 9, 1),
+    )
+    expect(result).toEqual(expect.arrayContaining([
+      expect.objectContaining({ id: 'reservation_1', type: 'RESERVATION', label: 'Aya Benali' }),
+      expect.objectContaining({ id: 'block_1', type: 'MAINTENANCE', label: 'Maintenance' }),
+    ]))
+  })
+
+  it('normalizes maintenance log dates before persistence', async () => {
+    vi.mocked(repo.findById).mockResolvedValue(vehicle as any)
+    vi.mocked(repo.createMaintenanceLog).mockResolvedValue({ id: 'maintenance_1' } as any)
+
+    await service.createMaintenanceLog('vehicle_1', 'company_1', {
+      description: 'Oil change',
+      performedAt: '2026-07-01T12:00:00.000Z',
+      nextDueAt: '2026-10-01T12:00:00.000Z',
+    })
+
+    expect(repo.createMaintenanceLog).toHaveBeenCalledWith(expect.objectContaining({
+      vehicleId: 'vehicle_1',
+      performedAt: new Date('2026-07-01T12:00:00.000Z'),
+      nextDueAt: new Date('2026-10-01T12:00:00.000Z'),
+    }))
+  })
+})
diff --git a/api/src/modules/vehicles/vehicle.service.ts b/api/src/modules/vehicles/vehicle.service.ts
new file mode 100644
index 0000000..76c17c8
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.service.ts
@@ -0,0 +1,638 @@
+import { uploadImage } from '../../lib/storage'
+import { AppError, NotFoundError, ValidationError } from '../../http/errors'
+import { presentVehicle, presentVehicleList } from './vehicle.presenter'
+import * as repo from './vehicle.repo'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+const RULE_PRIORITY: Record<string, number> = {
+  MANUAL_OVERRIDE: 6,
+  HOLIDAY: 5,
+  SPECIAL_EVENT: 4,
+  SEASONAL: 3,
+  WEEKEND: 2,
+  DATE_RANGE: 1,
+}
+
+function isPricingStorageMissing(error: unknown) {
+  if (!error || typeof error !== 'object') return false
+  const candidate = error as { code?: string; message?: string }
+  return (
+    candidate.code === 'P2021' ||
+    candidate.message?.includes('vehicle_pricing_configurations') === true ||
+    candidate.message?.includes('vehicle_pricing_rules') === true ||
+    candidate.message?.includes('vehicle_price_history') === true
+  )
+}
+
+function normalizeLocations(locations: unknown) {
+  if (!Array.isArray(locations)) return []
+  const seen = new Set<string>()
+  const normalized: string[] = []
+  for (const entry of locations) {
+    if (typeof entry !== 'string') continue
+    const value = entry.trim()
+    const key = value.toLocaleLowerCase()
+    if (!value || seen.has(key)) continue
+    seen.add(key)
+    normalized.push(value)
+  }
+  return normalized
+}
+
+function applyLocationSettings(data: any) {
+  const patch = { ...data }
+
+  if (patch.pickupLocations !== undefined) {
+    patch.pickupLocations = normalizeLocations(patch.pickupLocations)
+  }
+  if (patch.dropoffLocations !== undefined) {
+    patch.dropoffLocations = normalizeLocations(patch.dropoffLocations)
+  }
+
+  if (patch.allowDifferentDropoff === false) {
+    patch.dropoffLocations = []
+  }
+
+  if (patch.allowDifferentDropoff === true && patch.dropoffLocations !== undefined && patch.dropoffLocations.length === 0) {
+    throw new ValidationError('Drop-off locations are required when different drop-off is enabled')
+  }
+
+  return patch
+}
+
+function toStartOfDay(value: string | Date) {
+  const date = new Date(value)
+  date.setHours(0, 0, 0, 0)
+  return date
+}
+
+function toEndOfDay(value: string | Date) {
+  const date = new Date(value)
+  date.setHours(23, 59, 59, 999)
+  return date
+}
+
+function isWeekend(date: Date) {
+  const day = date.getDay()
+  return day === 0 || day === 6
+}
+
+function clampRate(value: number, min?: number | null, max?: number | null) {
+  if (min != null && value < min) return min
+  if (max != null && value > max) return max
+  return value
+}
+
+function validateRateBounds(minimum?: number | null, maximum?: number | null, label: string = 'Daily') {
+  if (minimum != null && maximum != null && minimum > maximum) {
+    throw new ValidationError(`${label} minimum rate must be less than or equal to the maximum rate`)
+  }
+}
+
+function normalizePricingConfigurationInput(data: any) {
+  const normalized = {
+    pricingMode: data.pricingMode,
+    baseDailyRate: data.baseDailyRate,
+    weeklyRate: data.weeklyRate ?? null,
+    weekendRate: data.weekendRate ?? null,
+    holidayRate: data.holidayRate ?? null,
+    monthlyRate: data.monthlyRate ?? null,
+    longTermDailyRate: data.longTermDailyRate ?? null,
+    minimumDailyRate: data.minimumDailyRate ?? null,
+    maximumDailyRate: data.maximumDailyRate ?? null,
+    maxDailyPriceMovementPct: data.maxDailyPriceMovementPct,
+    automaticPricingEnabled: data.automaticPricingEnabled,
+    approvalRequired: data.approvalRequired,
+  }
+
+  validateRateBounds(normalized.minimumDailyRate, normalized.maximumDailyRate)
+  validateRateBounds(normalized.baseDailyRate, normalized.maximumDailyRate, 'Base')
+  return normalized
+}
+
+function normalizePricingRuleInput(data: any) {
+  const normalized = {
+    name: data.name,
+    ruleType: data.ruleType,
+    startDate: toStartOfDay(data.startDate),
+    endDate: toEndOfDay(data.endDate),
+    dailyRate: data.dailyRate ?? null,
+    weeklyRate: data.weeklyRate ?? null,
+    weekendRate: data.weekendRate ?? null,
+    monthlyRate: data.monthlyRate ?? null,
+    minDailyRate: data.minDailyRate ?? null,
+    maxDailyRate: data.maxDailyRate ?? null,
+    automaticAdjustmentPct: data.automaticAdjustmentPct ?? null,
+    priceAdjustment: data.priceAdjustment ?? null,
+    isActive: data.isActive,
+    sortOrder: data.sortOrder,
+  }
+
+  if (normalized.endDate < normalized.startDate) {
+    throw new ValidationError('Rule end date must be on or after the start date')
+  }
+
+  validateRateBounds(normalized.minDailyRate, normalized.maxDailyRate)
+
+  const hasPricingEffect = [
+    normalized.dailyRate,
+    normalized.weeklyRate,
+    normalized.weekendRate,
+    normalized.monthlyRate,
+    normalized.minDailyRate,
+    normalized.maxDailyRate,
+    normalized.automaticAdjustmentPct,
+    normalized.priceAdjustment,
+  ].some((value) => value != null)
+
+  if (!hasPricingEffect) {
+    throw new ValidationError('Pricing rules must define at least one rate, bound, or adjustment')
+  }
+
+  return normalized
+}
+
+async function ensurePricingConfigurationForVehicle(vehicleId: string, companyId: string) {
+  const vehicle = await repo.findById(vehicleId, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+
+  let configuration: any = null
+  let persistenceAvailable = true
+  try {
+    configuration = await repo.findPricingConfiguration(vehicleId)
+  } catch (error) {
+    if (!isPricingStorageMissing(error)) throw error
+    persistenceAvailable = false
+  }
+
+  if (!persistenceAvailable) {
+    return {
+      vehicle,
+      persistenceAvailable,
+      configuration: {
+        id: `transient-${vehicle.id}`,
+        vehicleId: vehicle.id,
+        pricingMode: 'MANUAL',
+        baseDailyRate: vehicle.dailyRate,
+        weeklyRate: vehicle.dailyRate * 7,
+        weekendRate: null,
+        holidayRate: null,
+        monthlyRate: null,
+        longTermDailyRate: null,
+        minimumDailyRate: null,
+        maximumDailyRate: null,
+        maxDailyPriceMovementPct: 10,
+        automaticPricingEnabled: false,
+        approvalRequired: false,
+        rules: [],
+        history: [],
+        createdAt: vehicle.createdAt,
+        updatedAt: vehicle.updatedAt,
+      },
+    }
+  }
+
+  if (!configuration) {
+    configuration = await repo.createPricingConfiguration({
+      vehicleId,
+      pricingMode: 'MANUAL',
+      baseDailyRate: vehicle.dailyRate,
+      weeklyRate: vehicle.dailyRate * 7,
+      automaticPricingEnabled: false,
+      approvalRequired: false,
+      maxDailyPriceMovementPct: 10,
+    })
+  }
+
+  return { vehicle, configuration, persistenceAvailable }
+}
+
+async function syncPricingBaseRateFromVehicle(vehicleId: string, previousDailyRate: number, nextDailyRate: number) {
+  const configuration = await repo.findPricingConfiguration(vehicleId)
+  if (!configuration) return
+
+  const currentBaseRate = configuration.baseDailyRate ?? previousDailyRate
+  if (currentBaseRate === nextDailyRate) return
+
+  await repo.updatePricingConfiguration(configuration.id, { baseDailyRate: nextDailyRate })
+  await repo.createPriceHistory({
+    configurationId: configuration.id,
+    vehicleId,
+    source: 'CONFIG_UPDATE',
+    previousDailyRate: currentBaseRate,
+    nextDailyRate,
+    previousWeeklyRate: configuration.weeklyRate ?? null,
+    nextWeeklyRate: configuration.weeklyRate ?? null,
+    note: 'Base daily rate synced from vehicle details',
+  })
+}
+
+function buildPricePreview(vehicle: any, configuration: any) {
+  const baseDailyRate = configuration.baseDailyRate ?? vehicle.dailyRate
+  const activeRules = (configuration.rules ?? []).filter((rule: any) => rule.isActive)
+  const items = Array.from({ length: 14 }, (_, index) => {
+    const date = new Date(Date.now() + (index * DAY_MS))
+    date.setHours(12, 0, 0, 0)
+    let dailyRate = baseDailyRate
+    let pricingType = configuration.pricingMode === 'AUTOMATIC' && configuration.automaticPricingEnabled
+      ? 'AUTOMATIC_BASE'
+      : 'MANUAL_BASE'
+
+    if (isWeekend(date) && configuration.weekendRate != null) {
+      dailyRate = configuration.weekendRate
+      pricingType = 'WEEKEND_RATE'
+    }
+
+    const matchingRule = activeRules
+      .filter((rule: any) => date >= new Date(rule.startDate) && date <= new Date(rule.endDate))
+      .sort((a: any, b: any) => {
+        const priorityDiff = (RULE_PRIORITY[b.ruleType] ?? 0) - (RULE_PRIORITY[a.ruleType] ?? 0)
+        if (priorityDiff !== 0) return priorityDiff
+        if (a.sortOrder !== b.sortOrder) return b.sortOrder - a.sortOrder
+        return new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+      })[0]
+
+    if (matchingRule) {
+      if (matchingRule.dailyRate != null) {
+        dailyRate = matchingRule.dailyRate
+      } else {
+        if (matchingRule.weekendRate != null && isWeekend(date)) {
+          dailyRate = matchingRule.weekendRate
+        }
+        if (matchingRule.priceAdjustment != null) {
+          dailyRate += matchingRule.priceAdjustment
+        }
+        if (matchingRule.automaticAdjustmentPct != null) {
+          dailyRate = Math.round(dailyRate * (100 + matchingRule.automaticAdjustmentPct) / 100)
+        }
+      }
+      pricingType = configuration.pricingMode === 'AUTOMATIC' ? 'AUTOMATIC_RULE' : 'RULE_RATE'
+      dailyRate = clampRate(
+        dailyRate,
+        matchingRule.minDailyRate ?? configuration.minimumDailyRate,
+        matchingRule.maxDailyRate ?? configuration.maximumDailyRate,
+      )
+    } else {
+      dailyRate = clampRate(dailyRate, configuration.minimumDailyRate, configuration.maximumDailyRate)
+    }
+
+    return {
+      date: date.toISOString().slice(0, 10),
+      dailyRate,
+      pricingType,
+      matchedRuleName: matchingRule?.name ?? null,
+    }
+  })
+
+  return {
+    today: items[0],
+    next14Days: items,
+  }
+}
+
+function presentVehiclePricing(vehicle: any, configuration: any) {
+  return {
+    configuration: {
+      id: configuration.id,
+      vehicleId: configuration.vehicleId,
+      pricingMode: configuration.pricingMode,
+      baseDailyRate: configuration.baseDailyRate ?? vehicle.dailyRate,
+      weeklyRate: configuration.weeklyRate ?? null,
+      weekendRate: configuration.weekendRate ?? null,
+      holidayRate: configuration.holidayRate ?? null,
+      monthlyRate: configuration.monthlyRate ?? null,
+      longTermDailyRate: configuration.longTermDailyRate ?? null,
+      minimumDailyRate: configuration.minimumDailyRate ?? null,
+      maximumDailyRate: configuration.maximumDailyRate ?? null,
+      maxDailyPriceMovementPct: configuration.maxDailyPriceMovementPct,
+      automaticPricingEnabled: configuration.automaticPricingEnabled,
+      approvalRequired: configuration.approvalRequired,
+      createdAt: configuration.createdAt,
+      updatedAt: configuration.updatedAt,
+    },
+    rules: (configuration.rules ?? []).map((rule: any) => ({
+      id: rule.id,
+      name: rule.name,
+      ruleType: rule.ruleType,
+      startDate: rule.startDate,
+      endDate: rule.endDate,
+      dailyRate: rule.dailyRate,
+      weeklyRate: rule.weeklyRate,
+      weekendRate: rule.weekendRate,
+      monthlyRate: rule.monthlyRate,
+      minDailyRate: rule.minDailyRate,
+      maxDailyRate: rule.maxDailyRate,
+      automaticAdjustmentPct: rule.automaticAdjustmentPct,
+      priceAdjustment: rule.priceAdjustment,
+      isActive: rule.isActive,
+      sortOrder: rule.sortOrder,
+      createdAt: rule.createdAt,
+      updatedAt: rule.updatedAt,
+    })),
+    history: (configuration.history ?? []).map((entry: any) => ({
+      id: entry.id,
+      source: entry.source,
+      changedByEmployeeId: entry.changedByEmployeeId,
+      previousDailyRate: entry.previousDailyRate,
+      nextDailyRate: entry.nextDailyRate,
+      previousWeeklyRate: entry.previousWeeklyRate,
+      nextWeeklyRate: entry.nextWeeklyRate,
+      note: entry.note,
+      effectiveFrom: entry.effectiveFrom,
+      createdAt: entry.createdAt,
+    })),
+    preview: buildPricePreview(vehicle, configuration),
+  }
+}
+
+export async function listVehicles(companyId: string, query: { status?: string; category?: string; published?: string; page?: number; pageSize?: number }) {
+  const page     = query.page     ?? 1
+  const pageSize = query.pageSize ?? 20
+  const { status, category, published } = query
+  const where: any = { companyId }
+  if (status)              where.status     = status
+  if (category)            where.category   = category
+  if (published !== undefined) where.isPublished = published === 'true'
+  const [vehicles, total] = await repo.findMany(where, (page - 1) * pageSize, pageSize)
+  return presentVehicleList(vehicles.map(presentVehicle), { total, page, pageSize, totalPages: Math.ceil(total / pageSize) })
+}
+
+export async function getVehicle(id: string, companyId: string) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  return presentVehicle(vehicle)
+}
+
+export async function createVehicle(data: any, companyId: string) {
+  return presentVehicle(await repo.create({
+    dailyRate: 0,
+    ...applyLocationSettings(data),
+    companyId,
+  }))
+}
+
+const PUBLISHED_STATUSES = new Set(['AVAILABLE', 'RESERVED', 'READY', 'RENTED'])
+
+export async function updateVehicle(id: string, companyId: string, data: any) {
+  const patch = applyLocationSettings(data)
+  if (patch.status) {
+    patch.isPublished = PUBLISHED_STATUSES.has(patch.status)
+  }
+  const existing = await repo.findFirst(id, companyId)
+  if (!existing) throw new NotFoundError('Vehicle not found')
+  const updated = await repo.updateById(id, patch)
+  if (patch.dailyRate !== undefined && typeof patch.dailyRate === 'number') {
+    await syncPricingBaseRateFromVehicle(id, existing.dailyRate, patch.dailyRate)
+  }
+  return presentVehicle(updated)
+}
+
+export async function setStatus(id: string, companyId: string, status: string) {
+  const existing = await repo.findFirst(id, companyId)
+  if (!existing) throw new NotFoundError('Vehicle not found')
+  const isPublished = PUBLISHED_STATUSES.has(status)
+  return presentVehicle(await repo.updateById(id, { status, isPublished }))
+}
+
+export async function deleteVehicle(id: string, companyId: string) {
+  return repo.softDelete(id, companyId)
+}
+
+export async function uploadPhotos(id: string, companyId: string, files: Express.Multer.File[]) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  const urls = await Promise.all(files.map((f) => uploadImage(f.buffer, `companies/${companyId}/vehicles`)))
+  return presentVehicle(await repo.updateById(id, { photos: [...vehicle.photos, ...urls] }))
+}
+
+export async function deletePhoto(id: string, companyId: string, idx: number) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  const photos = vehicle.photos.filter((_: string, i: number) => i !== idx)
+  return presentVehicle(await repo.updateById(id, { photos }))
+}
+
+export async function setPublished(id: string, companyId: string, isPublished: boolean) {
+  await repo.setPublished(id, companyId, isPublished)
+}
+
+export async function checkAvailability(id: string, companyId: string, startDate: string, endDate: string) {
+  const start = new Date(startDate)
+  const end   = new Date(endDate)
+  const [conflicts, blocks] = await Promise.all([
+    repo.findReservationConflicts(id, companyId, start, end),
+    repo.findCalendarBlockConflicts(id, start, end),
+  ])
+  return { available: conflicts.length === 0 && blocks.length === 0, conflicts, blocks }
+}
+
+export async function getCalendar(id: string, companyId: string, year: number, month: number) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  const rangeStart = new Date(year, month - 1, 1)
+  const rangeEnd   = new Date(year, month, 1)
+  const [reservations, blocks] = await repo.findCalendarEvents(id, companyId, rangeStart, rangeEnd)
+  return [
+    ...reservations.map((r: any) => ({
+      id: r.id,
+      type: 'RESERVATION' as const,
+      startDate: r.startDate,
+      endDate: r.endDate,
+      status: r.status,
+      label: r.customer ? `${r.customer.firstName} ${r.customer.lastName}` : 'Reserved',
+    })),
+    ...blocks.map((b: any) => ({
+      id: b.id,
+      type: b.type === 'MAINTENANCE' ? ('MAINTENANCE' as const) : ('BLOCK' as const),
+      startDate: b.startDate,
+      endDate: b.endDate,
+      status: null,
+      label: b.reason ?? (b.type === 'MAINTENANCE' ? 'Maintenance' : 'Blocked'),
+    })),
+  ]
+}
+
+export async function createCalendarBlock(id: string, companyId: string, data: { startDate: string; endDate: string; reason?: string; type?: 'MANUAL' | 'MAINTENANCE' }) {
+  const start = new Date(data.startDate)
+  const end   = new Date(data.endDate)
+  if (end <= start) throw new ValidationError('endDate must be after startDate')
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  return repo.createCalendarBlock({ vehicleId: id, startDate: start, endDate: end, reason: data.reason, type: data.type ?? 'MANUAL' })
+}
+
+export async function deleteCalendarBlock(vehicleId: string, companyId: string, blockId: string) {
+  const vehicle = await repo.findById(vehicleId, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  await repo.deleteCalendarBlock(blockId, vehicleId)
+}
+
+export async function getMaintenanceLogs(id: string, companyId: string) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  return repo.findMaintenanceLogs(id)
+}
+
+export async function createMaintenanceLog(id: string, companyId: string, data: any) {
+  const vehicle = await repo.findById(id, companyId)
+  if (!vehicle) throw new NotFoundError('Vehicle not found')
+  return repo.createMaintenanceLog({
+    ...data,
+    vehicleId:   id,
+    performedAt: new Date(data.performedAt),
+    nextDueAt:   data.nextDueAt ? new Date(data.nextDueAt) : undefined,
+  })
+}
+
+export async function getVehiclePricing(id: string, companyId: string) {
+  const { vehicle, configuration } = await ensurePricingConfigurationForVehicle(id, companyId)
+  return presentVehiclePricing(vehicle, configuration)
+}
+
+export async function updateVehiclePricing(id: string, companyId: string, employeeId: string, data: any) {
+  const { vehicle, configuration, persistenceAvailable } = await ensurePricingConfigurationForVehicle(id, companyId)
+  if (!persistenceAvailable) {
+    throw new AppError(
+      'Vehicle pricing tables are not available yet. Run the latest database migration, then retry.',
+      503,
+      'pricing_migration_required',
+    )
+  }
+  const nextConfig = normalizePricingConfigurationInput(data)
+  const currentBaseDailyRate = configuration.baseDailyRate ?? vehicle.dailyRate
+  const currentWeeklyRate = configuration.weeklyRate ?? null
+
+  const changed = [
+    'pricingMode',
+    'baseDailyRate',
+    'weeklyRate',
+    'weekendRate',
+    'holidayRate',
+    'monthlyRate',
+    'longTermDailyRate',
+    'minimumDailyRate',
+    'maximumDailyRate',
+    'maxDailyPriceMovementPct',
+    'automaticPricingEnabled',
+    'approvalRequired',
+  ].some((key) => ((configuration as any)[key] ?? null) !== ((nextConfig as any)[key] ?? null))
+
+  await repo.updatePricingConfiguration(configuration.id, nextConfig)
+
+  if (vehicle.dailyRate !== nextConfig.baseDailyRate) {
+    await repo.updateById(id, { dailyRate: nextConfig.baseDailyRate })
+  }
+
+  if (changed) {
+    await repo.createPriceHistory({
+      configurationId: configuration.id,
+      vehicleId: id,
+      source: 'CONFIG_UPDATE',
+      changedByEmployeeId: employeeId,
+      previousDailyRate: currentBaseDailyRate,
+      nextDailyRate: nextConfig.baseDailyRate,
+      previousWeeklyRate: currentWeeklyRate,
+      nextWeeklyRate: nextConfig.weeklyRate ?? null,
+      note: data.note,
+    })
+  }
+
+  return getVehiclePricing(id, companyId)
+}
+
+export async function createVehiclePricingRule(id: string, companyId: string, employeeId: string, data: any) {
+  const { configuration, persistenceAvailable } = await ensurePricingConfigurationForVehicle(id, companyId)
+  if (!persistenceAvailable) {
+    throw new AppError(
+      'Vehicle pricing tables are not available yet. Run the latest database migration, then retry.',
+      503,
+      'pricing_migration_required',
+    )
+  }
+  const payload = normalizePricingRuleInput(data)
+
+  const rule = await repo.createPricingRule({
+    configurationId: configuration.id,
+    ...payload,
+  })
+
+  await repo.createPriceHistory({
+    configurationId: configuration.id,
+    vehicleId: id,
+    source: payload.ruleType === 'MANUAL_OVERRIDE' ? 'MANUAL_OVERRIDE' : 'RULE_CREATED',
+    changedByEmployeeId: employeeId,
+    previousDailyRate: configuration.baseDailyRate ?? null,
+    nextDailyRate: payload.dailyRate,
+    previousWeeklyRate: configuration.weeklyRate ?? null,
+    nextWeeklyRate: payload.weeklyRate,
+    note: `Created pricing rule: ${rule.name}`,
+    effectiveFrom: rule.startDate,
+  })
+
+  return getVehiclePricing(id, companyId)
+}
+
+export async function updateVehiclePricingRule(id: string, companyId: string, ruleId: string, employeeId: string, data: any) {
+  const { configuration, persistenceAvailable } = await ensurePricingConfigurationForVehicle(id, companyId)
+  if (!persistenceAvailable) {
+    throw new AppError(
+      'Vehicle pricing tables are not available yet. Run the latest database migration, then retry.',
+      503,
+      'pricing_migration_required',
+    )
+  }
+  const existingRule = await repo.findPricingRule(ruleId, configuration.id)
+  if (!existingRule) throw new NotFoundError('Pricing rule not found')
+
+  const mergedRule = normalizePricingRuleInput({
+    ...existingRule,
+    ...data,
+    startDate: data.startDate ?? existingRule.startDate,
+    endDate: data.endDate ?? existingRule.endDate,
+  })
+
+  const updatedRule = await repo.updatePricingRule(ruleId, mergedRule)
+  await repo.createPriceHistory({
+    configurationId: configuration.id,
+    vehicleId: id,
+    source: mergedRule.ruleType === 'MANUAL_OVERRIDE' ? 'MANUAL_OVERRIDE' : 'RULE_UPDATED',
+    changedByEmployeeId: employeeId,
+    previousDailyRate: existingRule.dailyRate,
+    nextDailyRate: updatedRule.dailyRate,
+    previousWeeklyRate: existingRule.weeklyRate,
+    nextWeeklyRate: updatedRule.weeklyRate,
+    note: `Updated pricing rule: ${updatedRule.name}`,
+    effectiveFrom: updatedRule.startDate,
+  })
+
+  return getVehiclePricing(id, companyId)
+}
+
+export async function deleteVehiclePricingRule(id: string, companyId: string, ruleId: string, employeeId: string) {
+  const { configuration, persistenceAvailable } = await ensurePricingConfigurationForVehicle(id, companyId)
+  if (!persistenceAvailable) {
+    throw new AppError(
+      'Vehicle pricing tables are not available yet. Run the latest database migration, then retry.',
+      503,
+      'pricing_migration_required',
+    )
+  }
+  const existingRule = await repo.findPricingRule(ruleId, configuration.id)
+  if (!existingRule) throw new NotFoundError('Pricing rule not found')
+
+  await repo.deletePricingRule(ruleId, configuration.id)
+  await repo.createPriceHistory({
+    configurationId: configuration.id,
+    vehicleId: id,
+    source: existingRule.ruleType === 'MANUAL_OVERRIDE' ? 'MANUAL_OVERRIDE' : 'RULE_DELETED',
+    changedByEmployeeId: employeeId,
+    previousDailyRate: existingRule.dailyRate,
+    nextDailyRate: configuration.baseDailyRate ?? null,
+    previousWeeklyRate: existingRule.weeklyRate,
+    nextWeeklyRate: configuration.weeklyRate ?? null,
+    note: `Deleted pricing rule: ${existingRule.name}`,
+    effectiveFrom: existingRule.startDate,
+  })
+
+  return getVehiclePricing(id, companyId)
+}
diff --git a/api/src/modules/vehicles/vehicle.test.ts b/api/src/modules/vehicles/vehicle.test.ts
new file mode 100644
index 0000000..b236b88
--- /dev/null
+++ b/api/src/modules/vehicles/vehicle.test.ts
@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import * as repo from './vehicle.repo'
+import * as service from './vehicle.service'
+
+vi.mock('./vehicle.repo')
+vi.mock('../../lib/storage', () => ({
+  uploadImage: vi.fn().mockResolvedValue('http://localhost:4000/storage/vehicles/test.jpg'),
+}))
+
+const mockVehicle = {
+  id: 'veh_1',
+  companyId: 'comp_1',
+  make: 'Toyota',
+  model: 'Camry',
+  year: 2022,
+  licensePlate: 'ABC-123',
+  status: 'AVAILABLE',
+  isPublished: true,
+  photos: [],
+  dailyRate: 500,
+  pickupLocations: [],
+  allowDifferentDropoff: false,
+  dropoffLocations: [],
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('vehicle.service', () => {
+  describe('createVehicle', () => {
+    it('creates a vehicle with companyId', async () => {
+      vi.mocked(repo.create).mockResolvedValue(mockVehicle as any)
+      const result = await service.createVehicle({ make: 'Toyota', model: 'Camry', year: 2022, licensePlate: 'ABC-123', dailyRate: 500 }, 'comp_1')
+      expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({ companyId: 'comp_1' }))
+      expect(result).toEqual(mockVehicle)
+    })
+
+    it('defaults dailyRate to zero when omitted', async () => {
+      vi.mocked(repo.create).mockResolvedValue({ ...mockVehicle, dailyRate: 0 } as any)
+      await service.createVehicle({ make: 'Toyota', model: 'Camry', year: 2022, licensePlate: 'ABC-123' }, 'comp_1')
+      expect(repo.create).toHaveBeenCalledWith(expect.objectContaining({ companyId: 'comp_1', dailyRate: 0 }))
+    })
+  })
+
+  describe('updateVehicle', () => {
+    it('throws NotFoundError when vehicle does not belong to company', async () => {
+      vi.mocked(repo.findFirst).mockResolvedValue(null)
+      await expect(service.updateVehicle('veh_1', 'comp_1', { make: 'Honda' })).rejects.toThrow('Vehicle not found')
+    })
+
+    it('sets isPublished=false when status is MAINTENANCE', async () => {
+      vi.mocked(repo.findFirst).mockResolvedValue(mockVehicle as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockVehicle, status: 'MAINTENANCE', isPublished: false } as any)
+      await service.updateVehicle('veh_1', 'comp_1', { status: 'MAINTENANCE' })
+      expect(repo.updateById).toHaveBeenCalledWith('veh_1', expect.objectContaining({ isPublished: false }))
+    })
+
+    it('sets isPublished=true when status is AVAILABLE', async () => {
+      vi.mocked(repo.findFirst).mockResolvedValue({ ...mockVehicle, status: 'MAINTENANCE' } as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockVehicle, status: 'AVAILABLE', isPublished: true } as any)
+      await service.updateVehicle('veh_1', 'comp_1', { status: 'AVAILABLE' })
+      expect(repo.updateById).toHaveBeenCalledWith('veh_1', expect.objectContaining({ isPublished: true }))
+    })
+  })
+
+  describe('uploadPhotos', () => {
+    it('appends new photo URLs to existing photos', async () => {
+      const vehicleWithPhotos = { ...mockVehicle, photos: ['http://localhost:4000/storage/vehicles/existing.jpg'] }
+      vi.mocked(repo.findById).mockResolvedValue(vehicleWithPhotos as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...vehicleWithPhotos, photos: [...vehicleWithPhotos.photos, 'http://localhost:4000/storage/vehicles/test.jpg'] } as any)
+      await service.uploadPhotos('veh_1', 'comp_1', [{ buffer: Buffer.from('') } as any])
+      expect(repo.updateById).toHaveBeenCalledWith('veh_1', {
+        photos: ['http://localhost:4000/storage/vehicles/existing.jpg', 'http://localhost:4000/storage/vehicles/test.jpg'],
+      })
+    })
+  })
+
+  describe('deletePhoto', () => {
+    it('removes photo at the given index', async () => {
+      const photos = ['url_0', 'url_1', 'url_2']
+      vi.mocked(repo.findById).mockResolvedValue({ ...mockVehicle, photos } as any)
+      vi.mocked(repo.updateById).mockResolvedValue({ ...mockVehicle, photos: ['url_0', 'url_2'] } as any)
+      await service.deletePhoto('veh_1', 'comp_1', 1)
+      expect(repo.updateById).toHaveBeenCalledWith('veh_1', { photos: ['url_0', 'url_2'] })
+    })
+  })
+
+  describe('checkAvailability', () => {
+    it('returns available=true when no conflicts', async () => {
+      vi.mocked(repo.findReservationConflicts).mockResolvedValue([])
+      vi.mocked(repo.findCalendarBlockConflicts).mockResolvedValue([])
+      const result = await service.checkAvailability('veh_1', 'comp_1', '2025-06-01T00:00:00Z', '2025-06-07T00:00:00Z')
+      expect(result.available).toBe(true)
+      expect(result.conflicts).toHaveLength(0)
+      expect(result.blocks).toHaveLength(0)
+    })
+
+    it('returns available=false when reservation conflict exists', async () => {
+      vi.mocked(repo.findReservationConflicts).mockResolvedValue([{ id: 'res_1', startDate: new Date(), endDate: new Date(), status: 'CONFIRMED' }] as any)
+      vi.mocked(repo.findCalendarBlockConflicts).mockResolvedValue([])
+      const result = await service.checkAvailability('veh_1', 'comp_1', '2025-06-01T00:00:00Z', '2025-06-07T00:00:00Z')
+      expect(result.available).toBe(false)
+      expect(result.conflicts).toHaveLength(1)
+    })
+
+    it('returns available=false when calendar block conflict exists', async () => {
+      vi.mocked(repo.findReservationConflicts).mockResolvedValue([])
+      vi.mocked(repo.findCalendarBlockConflicts).mockResolvedValue([{ id: 'block_1', startDate: new Date(), endDate: new Date(), type: 'MANUAL', reason: null }] as any)
+      const result = await service.checkAvailability('veh_1', 'comp_1', '2025-06-01T00:00:00Z', '2025-06-07T00:00:00Z')
+      expect(result.available).toBe(false)
+      expect(result.blocks).toHaveLength(1)
+    })
+  })
+
+  describe('createCalendarBlock', () => {
+    it('throws ValidationError when endDate is before startDate', async () => {
+      await expect(
+        service.createCalendarBlock('veh_1', 'comp_1', { startDate: '2025-06-07T00:00:00Z', endDate: '2025-06-01T00:00:00Z' }),
+      ).rejects.toThrow('endDate must be after startDate')
+    })
+
+    it('creates a calendar block', async () => {
+      vi.mocked(repo.findById).mockResolvedValue(mockVehicle as any)
+      vi.mocked(repo.createCalendarBlock).mockResolvedValue({ id: 'block_1' } as any)
+      const result = await service.createCalendarBlock('veh_1', 'comp_1', {
+        startDate: '2025-06-01T00:00:00Z',
+        endDate: '2025-06-07T00:00:00Z',
+        type: 'MANUAL',
+      })
+      expect(result).toEqual({ id: 'block_1' })
+    })
+  })
+
+  describe('getMaintenanceLogs', () => {
+    it('throws NotFoundError when vehicle does not belong to the requesting company', async () => {
+      vi.mocked(repo.findById).mockResolvedValue(null)
+      await expect(service.getMaintenanceLogs('veh_1', 'other_company')).rejects.toThrow('Vehicle not found')
+    })
+
+    it('returns maintenance logs when vehicle belongs to the requesting company', async () => {
+      const mockLogs = [{ id: 'log_1', vehicleId: 'veh_1', description: 'Oil change' }]
+      vi.mocked(repo.findById).mockResolvedValue(mockVehicle as any)
+      vi.mocked(repo.findMaintenanceLogs).mockResolvedValue(mockLogs as any)
+      const result = await service.getMaintenanceLogs('veh_1', 'comp_1')
+      expect(repo.findById).toHaveBeenCalledWith('veh_1', 'comp_1')
+      expect(result).toEqual(mockLogs)
+    })
+
+    it('passes companyId to repo.findById for ownership validation', async () => {
+      vi.mocked(repo.findById).mockResolvedValue(mockVehicle as any)
+      vi.mocked(repo.findMaintenanceLogs).mockResolvedValue([])
+      await service.getMaintenanceLogs('veh_1', 'comp_1')
+      expect(repo.findById).toHaveBeenCalledWith('veh_1', 'comp_1')
+    })
+  })
+})
diff --git a/api/src/modules/webhooks/webhook.routes.ts b/api/src/modules/webhooks/webhook.routes.ts
new file mode 100644
index 0000000..7136f3f
--- /dev/null
+++ b/api/src/modules/webhooks/webhook.routes.ts
@@ -0,0 +1,13 @@
+import { Router } from 'express'
+
+const router = Router()
+
+router.post('/clerk', (_req, res) => {
+  res.status(410).json({
+    error: 'disabled',
+    message: 'Clerk webhooks are disabled because Clerk has been removed from this project.',
+    statusCode: 410,
+  })
+})
+
+export default router
diff --git a/api/src/security/apiKeys.ts b/api/src/security/apiKeys.ts
new file mode 100644
index 0000000..4d7552d
--- /dev/null
+++ b/api/src/security/apiKeys.ts
@@ -0,0 +1,25 @@
+import crypto from 'crypto'
+
+export function generateCompanyApiKey() {
+  const secret = crypto.randomBytes(32).toString('base64url')
+  const prefix = `rdg_${crypto.randomBytes(6).toString('hex')}`
+  const rawKey = `${prefix}_${secret}`
+  return { rawKey, prefix, keyHash: hashApiKey(rawKey) }
+}
+
+export function getApiKeyPrefix(rawKey: string) {
+  const parts = rawKey.split('_')
+  if (parts.length < 3) return null
+  return `${parts[0]}_${parts[1]}`
+}
+
+export function hashApiKey(rawKey: string) {
+  return crypto.createHash('sha256').update(rawKey).digest('hex')
+}
+
+export function timingSafeEqualHex(a: string, b: string) {
+  const left = Buffer.from(a, 'hex')
+  const right = Buffer.from(b, 'hex')
+  if (left.length !== right.length) return false
+  return crypto.timingSafeEqual(left, right)
+}
diff --git a/api/src/security/policies/adminPolicy.ts b/api/src/security/policies/adminPolicy.ts
new file mode 100644
index 0000000..eecd363
--- /dev/null
+++ b/api/src/security/policies/adminPolicy.ts
@@ -0,0 +1,12 @@
+import type { AdminRole } from '@rentaldrivego/database'
+
+export const AdminPolicy = {
+  impersonateCompany: ['SUPER_ADMIN'],
+  manageAdmins: ['SUPER_ADMIN', 'ADMIN'],
+  managePricingPlans: ['SUPER_ADMIN', 'ADMIN'],
+  manageSubscriptions: ['SUPER_ADMIN', 'ADMIN', 'FINANCE'],
+  performRefund: ['SUPER_ADMIN', 'ADMIN', 'FINANCE'],
+  viewSensitiveCredentials: ['SUPER_ADMIN'],
+} as const satisfies Record<string, readonly AdminRole[]>
+
+export type AdminPolicyAction = keyof typeof AdminPolicy
diff --git a/api/src/security/policies/companyPolicy.ts b/api/src/security/policies/companyPolicy.ts
new file mode 100644
index 0000000..345efa9
--- /dev/null
+++ b/api/src/security/policies/companyPolicy.ts
@@ -0,0 +1,14 @@
+import type { EmployeeRole } from '@rentaldrivego/database'
+
+export const CompanyPolicy = {
+  viewApiKey: ['OWNER'],
+  regenerateApiKey: ['OWNER'],
+  updateAccountingSettings: ['OWNER', 'MANAGER'],
+  deletePricingRule: ['OWNER', 'MANAGER'],
+  managePricingRules: ['OWNER', 'MANAGER'],
+  manageTeam: ['OWNER', 'MANAGER'],
+  viewBilling: ['OWNER', 'MANAGER'],
+  manageBilling: ['OWNER'],
+} as const satisfies Record<string, readonly EmployeeRole[]>
+
+export type CompanyPolicyAction = keyof typeof CompanyPolicy
diff --git a/api/src/security/publicAccessTokens.ts b/api/src/security/publicAccessTokens.ts
new file mode 100644
index 0000000..d2adcfe
--- /dev/null
+++ b/api/src/security/publicAccessTokens.ts
@@ -0,0 +1,17 @@
+import crypto from 'crypto'
+
+export function generatePublicAccessToken() {
+  const token = crypto.randomBytes(32).toString('base64url')
+  return { token, tokenHash: hashPublicAccessToken(token) }
+}
+
+export function hashPublicAccessToken(token: string) {
+  return crypto.createHash('sha256').update(token).digest('hex')
+}
+
+export function timingSafeEqualTokenHash(a: string, b: string) {
+  const left = Buffer.from(a, 'hex')
+  const right = Buffer.from(b, 'hex')
+  if (left.length !== right.length) return false
+  return crypto.timingSafeEqual(left, right)
+}
diff --git a/api/src/security/sessionCookies.ts b/api/src/security/sessionCookies.ts
new file mode 100644
index 0000000..71f4038
--- /dev/null
+++ b/api/src/security/sessionCookies.ts
@@ -0,0 +1,31 @@
+import type { Response } from 'express'
+import type { ActorType } from './tokens'
+
+const COOKIE_NAMES: Record<ActorType, string> = {
+  admin: 'admin_session',
+  employee: 'employee_session',
+  renter: 'renter_session',
+}
+
+export function getSessionCookieName(actorType: ActorType) {
+  return COOKIE_NAMES[actorType]
+}
+
+export function setSessionCookie(res: Response, actorType: ActorType, token: string, maxAgeMs?: number) {
+  res.cookie(getSessionCookieName(actorType), token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: actorType === 'admin' ? 'strict' : 'lax',
+    path: '/',
+    maxAge: maxAgeMs,
+  })
+}
+
+export function clearSessionCookie(res: Response, actorType: ActorType) {
+  res.clearCookie(getSessionCookieName(actorType), {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: actorType === 'admin' ? 'strict' : 'lax',
+    path: '/',
+  })
+}
diff --git a/api/src/security/tokens.ts b/api/src/security/tokens.ts
new file mode 100644
index 0000000..581b772
--- /dev/null
+++ b/api/src/security/tokens.ts
@@ -0,0 +1,67 @@
+import jwt from 'jsonwebtoken'
+
+export type ActorType = 'admin' | 'employee' | 'renter'
+
+export type ActorTokenPayload = jwt.JwtPayload & {
+  sub: string
+  type: ActorType
+  sessionVersion?: number
+  last2faAt?: number
+}
+
+const ISSUER = 'rentaldrivego-api'
+const ALG: jwt.Algorithm[] = ['HS256']
+
+function getJwtSecret() {
+  const secret = process.env.JWT_SECRET
+  if (!secret) throw new Error('JWT_SECRET is required')
+  return secret
+}
+
+export function signActorToken(
+  actorId: string,
+  actorType: ActorType,
+  options: Pick<jwt.SignOptions, 'expiresIn'> & { sessionVersion?: number; last2faAt?: number } = {},
+) {
+  const { sessionVersion, last2faAt, ...signOptions } = options
+  return jwt.sign(
+    {
+      sub: actorId,
+      type: actorType,
+      ...(sessionVersion === undefined ? {} : { sessionVersion }),
+      ...(last2faAt === undefined ? {} : { last2faAt }),
+    },
+    getJwtSecret(),
+    {
+      algorithm: 'HS256',
+      issuer: ISSUER,
+      audience: actorType,
+      expiresIn: signOptions.expiresIn ?? '8h',
+    },
+  )
+}
+
+export function verifyActorToken(token: string, expectedType: ActorType): ActorTokenPayload {
+  const payload = jwt.verify(token, getJwtSecret(), {
+    algorithms: ALG,
+    issuer: ISSUER,
+    audience: expectedType,
+  }) as jwt.JwtPayload
+
+  if (typeof payload.sub !== 'string' || payload.type !== expectedType) {
+    throw new Error('Invalid actor token')
+  }
+
+  return payload as ActorTokenPayload
+}
+
+export function verifyAnyActorToken(token: string): ActorTokenPayload {
+  const decoded = jwt.decode(token) as jwt.JwtPayload | null
+  const actorType = decoded?.type
+
+  if (actorType !== 'admin' && actorType !== 'employee' && actorType !== 'renter') {
+    throw new Error('Invalid actor token')
+  }
+
+  return verifyActorToken(token, actorType)
+}
diff --git a/api/src/security/webhookIdempotency.ts b/api/src/security/webhookIdempotency.ts
new file mode 100644
index 0000000..6e34faa
--- /dev/null
+++ b/api/src/security/webhookIdempotency.ts
@@ -0,0 +1,97 @@
+import crypto from 'crypto'
+
+type WebhookStatus = 'PROCESSING' | 'PROCESSED' | 'FAILED'
+
+type WebhookProcessInput<T> = {
+  provider: string
+  providerEventId: string
+  eventType: string
+  rawBody: string | Buffer
+  handle: () => Promise<T>
+}
+
+function payloadHash(rawBody: string | Buffer) {
+  return crypto.createHash('sha256').update(rawBody).digest('hex')
+}
+
+function getWebhookEventModel() {
+  try {
+    // Lazy load keeps isolated unit tests from requiring a generated Prisma client
+    // before `prisma generate` has run in the local sandbox.
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { prisma } = require('../lib/prisma')
+    return (prisma as any).webhookEvent as any | undefined
+  } catch {
+    return undefined
+  }
+}
+
+async function findExisting(model: any, provider: string, providerEventId: string) {
+  return model.findUnique({
+    where: { provider_providerEventId: { provider, providerEventId } },
+  })
+}
+
+async function mark(model: any, id: string, status: WebhookStatus, errorMessage?: string) {
+  await model.update({
+    where: { id },
+    data: {
+      status,
+      processedAt: status === 'PROCESSED' ? new Date() : undefined,
+      errorMessage: errorMessage?.slice(0, 1000),
+    },
+  })
+}
+
+export async function processWebhookOnce<T>({
+  provider,
+  providerEventId,
+  eventType,
+  rawBody,
+  handle,
+}: WebhookProcessInput<T>): Promise<{ duplicate: boolean; result?: T }> {
+  const model = getWebhookEventModel()
+  if (!model) {
+    const result = await handle()
+    return { duplicate: false, result }
+  }
+
+  const hash = payloadHash(rawBody)
+  let eventRecord: any
+
+  try {
+    eventRecord = await model.create({
+      data: {
+        provider,
+        providerEventId,
+        eventType,
+        status: 'PROCESSING',
+        payloadHash: hash,
+      },
+    })
+  } catch (err: any) {
+    const existing = await findExisting(model, provider, providerEventId)
+    if (existing?.status === 'PROCESSED') return { duplicate: true }
+    if (existing?.payloadHash && existing.payloadHash !== hash) {
+      throw new Error('Webhook event ID replayed with a different payload hash')
+    }
+    if (existing?.status === 'PROCESSING') return { duplicate: true }
+    eventRecord = existing
+  }
+
+  try {
+    const result = await handle()
+    if (eventRecord?.id) await mark(model, eventRecord.id, 'PROCESSED')
+    return { duplicate: false, result }
+  } catch (err: any) {
+    if (eventRecord?.id) await mark(model, eventRecord.id, 'FAILED', err?.message)
+    throw err
+  }
+}
+
+export function getWebhookEventId(provider: 'amanpay' | 'paypal', payload: any) {
+  if (provider === 'paypal') {
+    return String(payload.id ?? payload.event_id ?? `${payload.event_type ?? 'unknown'}:${payload.resource?.id ?? 'missing'}`)
+  }
+  return String(payload.event_id ?? payload.id ?? payload.transaction_id ?? 'missing')
+}
diff --git a/api/src/services/additionalDriverService.test.ts b/api/src/services/additionalDriverService.test.ts
new file mode 100644
index 0000000..e5ceaac
--- /dev/null
+++ b/api/src/services/additionalDriverService.test.ts
@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    contractSettings: { findUnique: vi.fn() },
+    additionalDriver: { createMany: vi.fn() },
+    reservation: { update: vi.fn() },
+    $transaction: vi.fn(),
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { applyAdditionalDriversToReservation, calculateAdditionalDriverCharge } from './additionalDriverService'
+
+describe('additionalDriverService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+  })
+
+  it('calculates additional driver charges by configured charge mode', () => {
+    expect(calculateAdditionalDriverCharge('PER_DAY', 40, 5)).toBe(200)
+    expect(calculateAdditionalDriverCharge('FLAT', 150, 5)).toBe(150)
+    expect(calculateAdditionalDriverCharge('FREE', 150, 5)).toBe(0)
+  })
+
+  it('returns a zero-impact result without touching Prisma when no drivers are supplied', async () => {
+    await expect(applyAdditionalDriversToReservation('reservation_1', 'company_1', [], 4)).resolves.toEqual({
+      records: [],
+      additionalDriverTotal: 0,
+      requiresManualApproval: false,
+    })
+    expect(prisma.contractSettings.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('applies charge settings, license risk flags, and reservation totals in one transaction', async () => {
+    vi.mocked(prisma.contractSettings.findUnique).mockResolvedValue({
+      additionalDriverCharge: 'PER_DAY',
+      additionalDriverDailyRate: 75,
+      additionalDriverFlatRate: 300,
+    } as never)
+    vi.mocked(prisma.$transaction).mockResolvedValue([] as never)
+
+    const result = await applyAdditionalDriversToReservation('reservation_1', 'company_1', [
+      { firstName: 'Nora', lastName: 'Safe', driverLicense: 'A123', licenseExpiry: '2027-06-09T12:00:00.000Z' },
+      { firstName: 'Imad', lastName: 'Risky', driverLicense: 'B456', licenseExpiry: '2026-06-20T12:00:00.000Z' },
+    ], 4)
+
+    expect(result.additionalDriverTotal).toBe(600)
+    expect(result.requiresManualApproval).toBe(true)
+    expect(result.records).toEqual([
+      expect.objectContaining({ firstName: 'Nora', totalCharge: 300, requiresApproval: false, approvalNote: null }),
+      expect.objectContaining({ firstName: 'Imad', totalCharge: 300, requiresApproval: true, licenseExpiringSoon: true }),
+    ])
+    expect(prisma.additionalDriver.createMany).toHaveBeenCalledWith({ data: result.records })
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { additionalDriverTotal: 600, totalAmount: { increment: 600 } },
+    })
+  })
+})
diff --git a/api/src/services/additionalDriverService.ts b/api/src/services/additionalDriverService.ts
new file mode 100644
index 0000000..8b03c57
--- /dev/null
+++ b/api/src/services/additionalDriverService.ts
@@ -0,0 +1,96 @@
+import { prisma } from '../lib/prisma'
+
+type AdditionalDriverCharge = 'PER_DAY' | 'FLAT' | 'FREE'
+import { validateLicense } from './licenseValidationService'
+
+export interface AdditionalDriverInput {
+  firstName: string
+  lastName: string
+  email?: string
+  phone?: string
+  driverLicense: string
+  licenseExpiry?: string | null
+  licenseIssuedAt?: string | null
+  dateOfBirth?: string | null
+  nationality?: string
+}
+
+export function calculateAdditionalDriverCharge(
+  chargeType: AdditionalDriverCharge,
+  chargeValue: number,
+  totalDays: number,
+) {
+  switch (chargeType) {
+    case 'PER_DAY':
+      return chargeValue * totalDays
+    case 'FLAT':
+      return chargeValue
+    default:
+      return 0
+  }
+}
+
+export async function applyAdditionalDriversToReservation(
+  reservationId: string,
+  companyId: string,
+  drivers: AdditionalDriverInput[],
+  totalDays: number,
+) {
+  if (drivers.length === 0) {
+    return { records: [], additionalDriverTotal: 0, requiresManualApproval: false }
+  }
+
+  const settings = await prisma.contractSettings.findUnique({ where: { companyId } })
+  const chargeType = settings?.additionalDriverCharge ?? 'FREE'
+  const chargeValue =
+    chargeType === 'PER_DAY'
+      ? settings?.additionalDriverDailyRate ?? 0
+      : chargeType === 'FLAT'
+      ? settings?.additionalDriverFlatRate ?? 0
+      : 0
+
+  const records = drivers.map((driver) => {
+    const licenseResult = validateLicense(driver.licenseExpiry ? new Date(driver.licenseExpiry) : null)
+    const totalCharge = calculateAdditionalDriverCharge(chargeType, chargeValue, totalDays)
+
+    return {
+      reservationId,
+      companyId,
+      firstName: driver.firstName,
+      lastName: driver.lastName,
+      email: driver.email ?? null,
+      phone: driver.phone ?? null,
+      driverLicense: driver.driverLicense,
+      licenseExpiry: driver.licenseExpiry ? new Date(driver.licenseExpiry) : null,
+      licenseIssuedAt: driver.licenseIssuedAt ? new Date(driver.licenseIssuedAt) : null,
+      dateOfBirth: driver.dateOfBirth ? new Date(driver.dateOfBirth) : null,
+      nationality: driver.nationality ?? null,
+      chargeType,
+      chargeValue,
+      totalCharge,
+      licenseExpired: licenseResult.status === 'EXPIRED',
+      licenseExpiringSoon: licenseResult.status === 'EXPIRING',
+      requiresApproval: licenseResult.requiresApproval,
+      approvalNote: licenseResult.requiresApproval ? licenseResult.message : null,
+    }
+  })
+
+  const additionalDriverTotal = records.reduce((sum, record) => sum + record.totalCharge, 0)
+
+  await prisma.$transaction([
+    prisma.additionalDriver.createMany({ data: records }),
+    prisma.reservation.update({
+      where: { id: reservationId },
+      data: {
+        additionalDriverTotal,
+        totalAmount: { increment: additionalDriverTotal },
+      },
+    }),
+  ])
+
+  return {
+    records,
+    additionalDriverTotal,
+    requiresManualApproval: records.some((record) => record.requiresApproval),
+  }
+}
diff --git a/api/src/services/amanpayService.test.ts b/api/src/services/amanpayService.test.ts
new file mode 100644
index 0000000..98305be
--- /dev/null
+++ b/api/src/services/amanpayService.test.ts
@@ -0,0 +1,94 @@
+import crypto from 'crypto'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const originalEnv = { ...process.env }
+
+async function importService(env: Record<string, string | undefined> = {}) {
+  vi.resetModules()
+  process.env = { ...originalEnv, ...env }
+  return import('./amanpayService')
+}
+
+describe('amanpayService', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  afterEach(() => {
+    process.env = { ...originalEnv }
+    vi.resetModules()
+  })
+
+  it('reports unconfigured when merchant credentials are placeholders or missing', async () => {
+    const service = await importService({ AMANPAY_MERCHANT_ID: 'your-amanpay-merchant-id', AMANPAY_SECRET_KEY: 'secret' })
+    expect(service.isConfigured()).toBe(false)
+  })
+
+  it('creates a checkout using merchant headers and maps alternate provider response fields', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue({ id: 'txn_1', payment_url: 'https://pay.example/txn_1' }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const service = await importService({
+      AMANPAY_BASE_URL: 'https://amanpay.test',
+      AMANPAY_MERCHANT_ID: 'merchant_1',
+      AMANPAY_SECRET_KEY: 'secret_1',
+    })
+
+    await expect(service.createCheckout({
+      amount: 12900,
+      currency: 'MAD',
+      orderId: 'order_1',
+      description: 'Reservation payment',
+      customerEmail: 'nora@example.com',
+      customerName: 'Nora Saidi',
+      successUrl: 'https://app.test/success',
+      failureUrl: 'https://app.test/failure',
+      webhookUrl: 'https://api.test/webhook',
+    })).resolves.toEqual({
+      transactionId: 'txn_1',
+      checkoutUrl: 'https://pay.example/txn_1',
+      status: 'PENDING',
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('https://amanpay.test/v1/payments', expect.objectContaining({
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-merchant-id': 'merchant_1',
+        'x-api-key': 'secret_1',
+      },
+      body: expect.stringContaining('"order_id":"order_1"'),
+    }))
+  })
+
+  it('turns provider checkout failures into useful errors', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: false,
+      statusText: 'Bad Request',
+      json: vi.fn().mockResolvedValue({ message: 'invalid amount' }),
+    }))
+    const service = await importService({ AMANPAY_MERCHANT_ID: 'merchant_1', AMANPAY_SECRET_KEY: 'secret_1' })
+
+    await expect(service.createCheckout({
+      amount: 0,
+      currency: 'MAD',
+      orderId: 'order_1',
+      description: 'Bad payment',
+      successUrl: 'https://app.test/success',
+      failureUrl: 'https://app.test/failure',
+      webhookUrl: 'https://api.test/webhook',
+    })).rejects.toThrow('AmanPay checkout failed: invalid amount')
+  })
+
+  it('verifies webhook signatures using the configured shared secret', async () => {
+    const rawBody = JSON.stringify({ id: 'txn_1', status: 'PAID' })
+    const signature = crypto.createHmac('sha256', 'webhook_secret').update(rawBody).digest('hex')
+    const service = await importService({ AMANPAY_WEBHOOK_SECRET: 'webhook_secret' })
+
+    expect(service.verifyWebhookSignature(rawBody, signature)).toBe(true)
+    expect(service.verifyWebhookSignature(rawBody, crypto.createHmac('sha256', 'webhook_secret').update('other').digest('hex'))).toBe(false)
+  })
+})
diff --git a/api/src/services/amanpayService.ts b/api/src/services/amanpayService.ts
new file mode 100644
index 0000000..40e3354
--- /dev/null
+++ b/api/src/services/amanpayService.ts
@@ -0,0 +1,97 @@
+import crypto from 'crypto'
+
+const BASE_URL = process.env.AMANPAY_BASE_URL ?? 'https://api.amanpay.net'
+const MERCHANT_ID = process.env.AMANPAY_MERCHANT_ID ?? ''
+const SECRET_KEY = process.env.AMANPAY_SECRET_KEY ?? ''
+const WEBHOOK_SECRET = process.env.AMANPAY_WEBHOOK_SECRET ?? ''
+
+export interface AmanPayCreateParams {
+  amount: number
+  currency: string
+  orderId: string
+  description: string
+  customerEmail?: string
+  customerName?: string
+  successUrl: string
+  failureUrl: string
+  webhookUrl: string
+}
+
+export interface AmanPayCheckoutResult {
+  transactionId: string
+  checkoutUrl: string
+  status: string
+}
+
+async function getAuthHeaders() {
+  return {
+    'Content-Type': 'application/json',
+    'x-merchant-id': MERCHANT_ID,
+    'x-api-key': SECRET_KEY,
+  }
+}
+
+export async function createCheckout(params: AmanPayCreateParams): Promise<AmanPayCheckoutResult> {
+  const res = await fetch(`${BASE_URL}/v1/payments`, {
+    method: 'POST',
+    headers: await getAuthHeaders(),
+    body: JSON.stringify({
+      merchant_id: MERCHANT_ID,
+      amount: params.amount,
+      currency: params.currency,
+      order_id: params.orderId,
+      description: params.description,
+      customer_email: params.customerEmail,
+      customer_name: params.customerName,
+      success_url: params.successUrl,
+      failure_url: params.failureUrl,
+      webhook_url: params.webhookUrl,
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as Record<string, unknown>
+    throw new Error(`AmanPay checkout failed: ${(err?.message as string) ?? res.statusText}`)
+  }
+
+  const json = await res.json() as Record<string, unknown>
+  return {
+    transactionId: (json.transaction_id ?? json.id) as string,
+    checkoutUrl: (json.checkout_url ?? json.payment_url) as string,
+    status: (json.status ?? 'PENDING') as string,
+  }
+}
+
+export async function getTransaction(transactionId: string) {
+  const res = await fetch(`${BASE_URL}/v1/payments/${transactionId}`, {
+    headers: await getAuthHeaders(),
+  })
+  if (!res.ok) throw new Error('AmanPay: failed to fetch transaction')
+  return res.json()
+}
+
+export async function refundTransaction(transactionId: string, amount: number, reason?: string) {
+  const res = await fetch(`${BASE_URL}/v1/payments/${transactionId}/refund`, {
+    method: 'POST',
+    headers: await getAuthHeaders(),
+    body: JSON.stringify({ amount, reason }),
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as Record<string, unknown>
+    throw new Error(`AmanPay refund failed: ${(err?.message as string) ?? res.statusText}`)
+  }
+  return res.json()
+}
+
+export function verifyWebhookSignature(rawBody: string, signature: string): boolean {
+  if (!WEBHOOK_SECRET) return false
+  const expected = crypto
+    .createHmac('sha256', WEBHOOK_SECRET)
+    .update(rawBody)
+    .digest('hex')
+  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
+}
+
+export function isConfigured(): boolean {
+  return !!(MERCHANT_ID && SECRET_KEY && MERCHANT_ID !== 'your-amanpay-merchant-id')
+}
diff --git a/api/src/services/containerService.test.ts b/api/src/services/containerService.test.ts
new file mode 100644
index 0000000..594c5d1
--- /dev/null
+++ b/api/src/services/containerService.test.ts
@@ -0,0 +1,136 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const execFileMock = vi.fn()
+const fsState = new Map<string, string>()
+
+vi.mock('child_process', () => ({
+  execFile: (file: string, args: string[], cb: (error: any, stdout: string, stderr: string) => void) => {
+    const result = execFileMock(file, args) as { stdout?: string; stderr?: string } | undefined
+    cb(null, result?.stdout ?? '', result?.stderr ?? '')
+  },
+}))
+
+vi.mock('fs/promises', () => ({
+  mkdir: vi.fn().mockResolvedValue(undefined),
+  access: vi.fn(async (file: string) => {
+    if (!fsState.has(file)) throw Object.assign(new Error('missing'), { code: 'ENOENT' })
+  }),
+  readFile: vi.fn(async (file: string) => fsState.get(file) ?? '{}'),
+  writeFile: vi.fn(async (file: string, contents: string) => { fsState.set(file, contents) }),
+}))
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    companyContainer: {
+      findFirst: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+      findUnique: vi.fn(),
+      findMany: vi.fn(),
+      delete: vi.fn(),
+    },
+  },
+}))
+
+import * as fs from 'fs/promises'
+import { prisma } from '../lib/prisma'
+import {
+  createCompanyContainer,
+  getContainerLogs,
+  restartCompanyContainer,
+  startCompanyContainer,
+  stopCompanyContainer,
+  syncContainerStatuses,
+} from './containerService'
+
+describe('containerService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    fsState.clear()
+    fsState.set('/opt/companies/docker-compose.companies.yml', 'services: {}')
+    fsState.set('/opt/companies/companies-services.json', '{}')
+  })
+
+  afterEach(() => {
+    vi.resetModules()
+  })
+
+  it('allocates the first configured port, writes compose service metadata, starts the service, and stores docker id', async () => {
+    vi.mocked(prisma.companyContainer.findFirst).mockResolvedValue(null as never)
+    vi.mocked(prisma.companyContainer.create).mockResolvedValue({ id: 'container_row_1' } as never)
+
+    execFileMock.mockImplementation((file: string, args: string[]) => {
+      // The child_process mock calls back with empty stdout. This spy records the command shape.
+      return { file, args }
+    })
+
+    await createCompanyContainer({ id: 'company_1', slug: 'atlas-cars', name: 'Atlas Cars' })
+
+    expect(prisma.companyContainer.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        companyId: 'company_1',
+        containerName: 'rdg-company-atlas-cars',
+        status: 'CREATING',
+        port: 5100,
+      }),
+    })
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      '/opt/companies/companies-services.json',
+      expect.stringContaining('"atlas-cars"'),
+      'utf8',
+    )
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      '/opt/companies/docker-compose.companies.yml',
+      expect.stringContaining('container_name: "rdg-company-atlas-cars"'),
+      'utf8',
+    )
+    expect(execFileMock).toHaveBeenCalledWith('docker-compose', ['version'])
+    expect(execFileMock).toHaveBeenCalledWith('docker-compose', ['-f', '/opt/companies/docker-compose.companies.yml', 'up', '-d', '--no-recreate', 'company-atlas-cars'])
+    expect(prisma.companyContainer.update).toHaveBeenCalledWith({
+      where: { id: 'container_row_1' },
+      data: { dockerId: null, status: 'RUNNING' },
+    })
+  })
+
+  it('starts, stops, and restarts an existing company service with status transitions', async () => {
+    vi.mocked(prisma.companyContainer.findUniqueOrThrow).mockResolvedValue({
+      companyId: 'company_1',
+      company: { slug: 'atlas-cars' },
+    } as never)
+
+    await startCompanyContainer('company_1')
+    await stopCompanyContainer('company_1')
+    await restartCompanyContainer('company_1')
+
+    expect(execFileMock).toHaveBeenCalledWith('docker-compose', ['-f', '/opt/companies/docker-compose.companies.yml', 'up', '-d', '--no-recreate', 'company-atlas-cars'])
+    expect(execFileMock).toHaveBeenCalledWith('docker-compose', ['-f', '/opt/companies/docker-compose.companies.yml', 'stop', 'company-atlas-cars'])
+    expect(execFileMock).toHaveBeenCalledWith('docker-compose', ['-f', '/opt/companies/docker-compose.companies.yml', 'restart', 'company-atlas-cars'])
+    expect(prisma.companyContainer.update).toHaveBeenCalledWith({ where: { companyId: 'company_1' }, data: { status: 'RESTARTING', errorMessage: null } })
+    expect(prisma.companyContainer.update).toHaveBeenCalledWith({ where: { companyId: 'company_1' }, data: { status: 'RUNNING', errorMessage: null } })
+    expect(prisma.companyContainer.update).toHaveBeenCalledWith({ where: { companyId: 'company_1' }, data: { status: 'STOPPED', errorMessage: null } })
+  })
+
+  it('returns an empty log string when docker log retrieval fails', async () => {
+    vi.mocked(prisma.companyContainer.findUniqueOrThrow).mockResolvedValue({ company: { slug: 'atlas-cars' } } as never)
+    execFileMock.mockImplementationOnce(() => { throw new Error('docker unavailable') })
+
+    await expect(getContainerLogs('company_1', 50)).resolves.toBe('')
+  })
+
+  it('loads container records and leaves stored statuses unchanged when docker status sync cannot complete', async () => {
+    vi.mocked(prisma.companyContainer.findMany).mockResolvedValue([
+      { id: 'row_1', status: 'STOPPED', company: { slug: 'atlas-cars' } },
+      { id: 'row_2', status: 'RUNNING', company: { slug: 'sahara-rentals' } },
+    ] as never)
+
+    execFileMock.mockImplementation(() => { throw new Error('Docker daemon is unavailable') })
+
+    await expect(syncContainerStatuses()).resolves.toBeUndefined()
+
+    expect(prisma.companyContainer.findMany).toHaveBeenCalledWith({
+      where: { status: { notIn: ['PENDING', 'CREATING', 'REMOVING'] } },
+      include: { company: { select: { slug: true } } },
+    })
+    expect(prisma.companyContainer.update).not.toHaveBeenCalled()
+  })})
diff --git a/api/src/services/containerService.ts b/api/src/services/containerService.ts
new file mode 100644
index 0000000..d3c9df6
--- /dev/null
+++ b/api/src/services/containerService.ts
@@ -0,0 +1,469 @@
+import { execFile } from 'child_process'
+import { promisify } from 'util'
+import * as fs from 'fs/promises'
+import * as path from 'path'
+import { prisma as _prisma } from '../lib/prisma'
+
+const db = _prisma as any
+
+const execFileAsync = promisify(execFile)
+let composeCommand: 'docker-compose' | 'docker' | null = null
+
+// ── Config ────────────────────────────────────────────────────────────────────
+
+const COMPOSE_DIR = process.env.COMPANIES_COMPOSE_DIR || '/opt/companies'
+const COMPOSE_FILE = path.join(COMPOSE_DIR, 'docker-compose.companies.yml')
+const SERVICES_FILE = path.join(COMPOSE_DIR, 'companies-services.json') // our source of truth
+
+const DASHBOARD_IMAGE = process.env.DASHBOARD_CONTAINER_IMAGE || 'rentaldrivego/dashboard:latest'
+const PORT_RANGE_START = parseInt(process.env.CONTAINER_PORT_START || '5100', 10)
+const PORT_RANGE_END = parseInt(process.env.CONTAINER_PORT_END || '5999', 10)
+const API_INTERNAL_URL = process.env.API_INTERNAL_URL || 'http://api:4000'
+const CONTAINER_NETWORK = process.env.CONTAINER_NETWORK || 'rentaldrivego_default'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface ServiceDef {
+  companyId: string
+  slug: string
+  image: string
+  port: number
+}
+
+type ServicesMap = Record<string, ServiceDef> // key = service name e.g. "company-slug"
+
+type ServiceStatus = 'RUNNING' | 'STOPPED' | 'RESTARTING' | 'ERROR'
+
+// ── Internal helpers ──────────────────────────────────────────────────────────
+
+function serviceName(slug: string) {
+  return `company-${slug}`
+}
+
+function containerName(slug: string) {
+  return `rdg-company-${slug}`
+}
+
+async function ensureDir(): Promise<void> {
+  await fs.mkdir(COMPOSE_DIR, { recursive: true })
+}
+
+async function readServices(): Promise<ServicesMap> {
+  try {
+    const raw = await fs.readFile(SERVICES_FILE, 'utf8')
+    return JSON.parse(raw)
+  } catch {
+    return {}
+  }
+}
+
+async function writeServices(services: ServicesMap): Promise<void> {
+  await ensureDir()
+  await fs.writeFile(SERVICES_FILE, JSON.stringify(services, null, 2), 'utf8')
+  await fs.writeFile(COMPOSE_FILE, buildComposeYaml(services), 'utf8')
+}
+
+async function composeFilesExist(): Promise<boolean> {
+  try {
+    await fs.access(COMPOSE_FILE)
+    await fs.access(SERVICES_FILE)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function rebuildServicesFromDatabase(): Promise<ServicesMap> {
+  const records = await db.companyContainer.findMany({
+    include: { company: { select: { slug: true } } },
+  })
+
+  return Object.fromEntries(
+    records.map((record: any) => [
+      serviceName(record.company.slug),
+      {
+        companyId: record.companyId,
+        slug: record.company.slug,
+        image: record.image,
+        port: record.port,
+      },
+    ]),
+  )
+}
+
+async function ensureComposeFiles(): Promise<void> {
+  if (await composeFilesExist()) return
+
+  const services = await rebuildServicesFromDatabase()
+  await writeServices(services)
+}
+
+function buildComposeYaml(services: ServicesMap): string {
+  const lines: string[] = ['services:']
+
+  for (const [name, svc] of Object.entries(services)) {
+    lines.push(`  ${name}:`)
+    lines.push(`    image: "${svc.image}"`)
+    lines.push(`    container_name: "${containerName(svc.slug)}"`)
+    lines.push(`    restart: unless-stopped`)
+    lines.push(`    environment:`)
+    lines.push(`      COMPANY_ID: "${svc.companyId}"`)
+    lines.push(`      COMPANY_SLUG: "${svc.slug}"`)
+    lines.push(`      API_URL: "${API_INTERNAL_URL}"`)
+    lines.push(`      NEXT_PUBLIC_API_URL: "${API_INTERNAL_URL}"`)
+    lines.push(`      PORT: "3000"`)
+    lines.push(`      NODE_ENV: "production"`)
+    lines.push(`    ports:`)
+    lines.push(`      - "${svc.port}:3000"`)
+    lines.push(`    networks:`)
+    lines.push(`      - ${CONTAINER_NETWORK}`)
+    lines.push(`    labels:`)
+    lines.push(`      rdg.managed: "true"`)
+    lines.push(`      rdg.company.id: "${svc.companyId}"`)
+    lines.push(`      rdg.company.slug: "${svc.slug}"`)
+  }
+
+  lines.push('')
+  lines.push('networks:')
+  lines.push(`  ${CONTAINER_NETWORK}:`)
+  lines.push(`    external: true`)
+  lines.push('')
+
+  return lines.join('\n')
+}
+
+async function resolveComposeCommand(): Promise<'docker-compose' | 'docker'> {
+  if (composeCommand) return composeCommand
+
+  try {
+    await execFileAsync('docker-compose', ['version'])
+    composeCommand = 'docker-compose'
+    return composeCommand
+  } catch {
+    try {
+      await execFileAsync('docker', ['compose', 'version'])
+      composeCommand = 'docker'
+      return composeCommand
+    } catch (err) {
+      throw mapDockerError(err)
+    }
+  }
+}
+
+async function compose(...args: string[]): Promise<{ stdout: string; stderr: string }> {
+  try {
+    await ensureComposeFiles()
+    const command = await resolveComposeCommand()
+    if (command === 'docker-compose') {
+      return await execFileAsync('docker-compose', ['-f', COMPOSE_FILE, ...args])
+    }
+    return await execFileAsync('docker', ['compose', '-f', COMPOSE_FILE, ...args])
+  } catch (err) {
+    throw mapDockerError(err)
+  }
+}
+
+function dockerUnavailableError(message: string, details?: string) {
+  const err = Object.assign(new Error(message), {
+    statusCode: 503,
+    code: 'docker_unavailable',
+  })
+
+  if (details) {
+    ;(err as Error & { details?: string }).details = details
+  }
+
+  return err
+}
+
+function mapDockerError(err: unknown) {
+  if (err && typeof err === 'object') {
+    const error = err as NodeJS.ErrnoException & { stderr?: string; stdout?: string }
+    const stderr = error.stderr?.trim()
+
+    if (error.code === 'ENOENT' && error.path === 'docker') {
+      return dockerUnavailableError(
+        'Docker CLI is not available to the API service.',
+        'Install Docker in the API container or run the API on a host with Docker available in PATH.',
+      )
+    }
+
+    if (error.code === 'ENOENT' && error.path === 'docker-compose') {
+      return dockerUnavailableError(
+        'Docker Compose is not available to the API service.',
+        'Install Docker Compose in the API container or switch the service to a runtime that supports `docker compose`.',
+      )
+    }
+
+    if (
+      stderr?.includes("docker: 'compose' is not a docker command.") ||
+      stderr?.includes("unknown shorthand flag: 'f' in -f")
+    ) {
+      return dockerUnavailableError(
+        'Docker Compose is not available to the API service.',
+        'Install Docker Compose in the API container or switch the service to a runtime that supports `docker compose`.',
+      )
+    }
+
+    if (
+      stderr?.includes('Cannot connect to the Docker daemon') ||
+      stderr?.includes('permission denied while trying to connect to the Docker daemon socket') ||
+      stderr?.includes('error during connect')
+    ) {
+      return dockerUnavailableError(
+        'Docker daemon is not reachable from the API service.',
+        'Mount `/var/run/docker.sock` into the API container and ensure the Docker daemon is running.',
+      )
+    }
+
+    // Catch-all: docker ran but exited non-zero — surface stderr as a readable 502
+    if (typeof error.code === 'number' && error.code !== 0) {
+      const detail = stderr || error.stdout?.trim() || 'docker compose exited with a non-zero status'
+      return Object.assign(new Error(detail), { statusCode: 502, code: 'docker_error' })
+    }
+  }
+
+  return err
+}
+
+async function setContainerError(companyId: string, message: string): Promise<void> {
+  await db.companyContainer.update({
+    where: { companyId },
+    data: { status: 'ERROR', errorMessage: message },
+  }).catch(() => null)
+}
+
+async function runContainerAction(
+  companyId: string,
+  slug: string,
+  command: 'start' | 'stop' | 'restart',
+  successStatus: Exclude<ServiceStatus, 'ERROR'>,
+  preStatus?: Exclude<ServiceStatus, 'ERROR'>,
+): Promise<void> {
+  if (preStatus) {
+    await db.companyContainer.update({ where: { companyId }, data: { status: preStatus, errorMessage: null } })
+  }
+
+  try {
+    // Use `up -d --no-recreate` for start so it creates the container if it doesn't exist yet
+    const args = command === 'start'
+      ? ['up', '-d', '--no-recreate', serviceName(slug)]
+      : [command, serviceName(slug)]
+    await compose(...args)
+    await db.companyContainer.update({
+      where: { companyId },
+      data: { status: successStatus, errorMessage: null },
+    })
+  } catch (err) {
+    const message = err instanceof Error ? err.message : `Failed to ${command} container`
+    await setContainerError(companyId, message)
+    throw err
+  }
+}
+
+async function allocatePort(): Promise<number> {
+  const last = await db.companyContainer.findFirst({
+    orderBy: { port: 'desc' },
+    select: { port: true },
+  })
+  const next = last ? last.port + 1 : PORT_RANGE_START
+  if (next > PORT_RANGE_END) throw new Error('No available ports in container port range')
+  return next
+}
+
+async function getDockerServiceId(slug: string): Promise<string | null> {
+  try {
+    const name = serviceName(slug)
+    const { stdout } = await compose('ps', '--format', 'json', name)
+    const line = stdout.trim().split('\n')[0]
+    if (!line) return null
+    const info = JSON.parse(line)
+    return info.ID ?? info.Id ?? null
+  } catch {
+    return null
+  }
+}
+
+// Maps docker compose State strings to our DB enum
+function mapDockerState(state: string): ServiceStatus {
+  switch (state.toLowerCase()) {
+    case 'running':    return 'RUNNING'
+    case 'restarting': return 'RESTARTING'
+    case 'exited':
+    case 'created':
+    case 'paused':     return 'STOPPED'
+    default:           return 'ERROR'
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+export async function createCompanyContainer(company: {
+  id: string
+  slug: string
+  name: string
+}): Promise<void> {
+  const name = serviceName(company.slug)
+  const port = await allocatePort()
+
+  const record = await db.companyContainer.create({
+    data: {
+      companyId: company.id,
+      containerName: containerName(company.slug),
+      status: 'CREATING',
+      port,
+      image: DASHBOARD_IMAGE,
+    },
+  })
+
+  try {
+    const services = await readServices()
+    services[name] = { companyId: company.id, slug: company.slug, image: DASHBOARD_IMAGE, port }
+    await writeServices(services)
+
+    await compose('up', '-d', '--no-recreate', name)
+
+    const dockerId = await getDockerServiceId(company.slug)
+    await db.companyContainer.update({
+      where: { id: record.id },
+      data: { dockerId, status: 'RUNNING' },
+    })
+  } catch (err) {
+    await db.companyContainer.update({
+      where: { id: record.id },
+      data: {
+        status: 'ERROR',
+        errorMessage: err instanceof Error ? err.message : 'Unknown error during service creation',
+      },
+    })
+    throw err
+  }
+}
+
+export async function startCompanyContainer(companyId: string): Promise<void> {
+  const record = await db.companyContainer.findUniqueOrThrow({
+    where: { companyId },
+    include: { company: { select: { slug: true } } },
+  })
+
+  await runContainerAction(companyId, record.company.slug, 'start', 'RUNNING')
+}
+
+export async function stopCompanyContainer(companyId: string): Promise<void> {
+  const record = await db.companyContainer.findUniqueOrThrow({
+    where: { companyId },
+    include: { company: { select: { slug: true } } },
+  })
+
+  await runContainerAction(companyId, record.company.slug, 'stop', 'STOPPED')
+}
+
+export async function restartCompanyContainer(companyId: string): Promise<void> {
+  const record = await db.companyContainer.findUniqueOrThrow({
+    where: { companyId },
+    include: { company: { select: { slug: true } } },
+  })
+
+  await runContainerAction(companyId, record.company.slug, 'restart', 'RUNNING', 'RESTARTING')
+}
+
+export async function removeCompanyContainer(companyId: string): Promise<void> {
+  const record = await db.companyContainer.findUniqueOrThrow({
+    where: { companyId },
+    include: { company: { select: { slug: true } } },
+  })
+
+  const name = serviceName(record.company.slug)
+  await db.companyContainer.update({ where: { companyId }, data: { status: 'REMOVING' } })
+
+  try {
+    await compose('stop', name)
+  } catch { /* already stopped */ }
+
+  try {
+    await compose('rm', '-f', name)
+  } catch { /* already removed */ }
+
+  const services = await readServices()
+  delete services[name]
+  await writeServices(services)
+
+  await db.companyContainer.delete({ where: { companyId } })
+}
+
+export async function redeployCompanyContainer(company: {
+  id: string
+  slug: string
+  name: string
+}): Promise<void> {
+  const name = serviceName(company.slug)
+
+  const existing = await db.companyContainer.findUnique({ where: { companyId: company.id } })
+  if (existing) {
+    try { await compose('stop', name) } catch { /* ok */ }
+    try { await compose('rm', '-f', name) } catch { /* ok */ }
+    await db.companyContainer.delete({ where: { companyId: company.id } })
+  }
+
+  // Remove from compose file too, then recreate
+  const services = await readServices()
+  delete services[name]
+  await writeServices(services)
+
+  await createCompanyContainer(company)
+}
+
+export async function getContainerLogs(companyId: string, tail = 150): Promise<string> {
+  const record = await db.companyContainer.findUniqueOrThrow({
+    where: { companyId },
+    include: { company: { select: { slug: true } } },
+  })
+
+  try {
+    const { stdout } = await compose(
+      'logs',
+      '--no-log-prefix',
+      `--tail=${tail}`,
+      serviceName(record.company.slug),
+    )
+    return stdout
+  } catch {
+    return ''
+  }
+}
+
+export async function syncContainerStatuses(): Promise<void> {
+  const records = await db.companyContainer.findMany({
+    where: { status: { notIn: ['PENDING', 'CREATING', 'REMOVING'] } },
+    include: { company: { select: { slug: true } } },
+  })
+
+  try {
+    // Get all compose service states in one shot
+    const { stdout } = await compose('ps', '--format', 'json')
+    const rows = stdout
+      .trim()
+      .split('\n')
+      .filter(Boolean)
+      .map((line) => {
+        try { return JSON.parse(line) } catch { return null }
+      })
+      .filter(Boolean) as Array<{ Service: string; State: string }>
+
+    const stateByService = Object.fromEntries(rows.map((r) => [r.Service, r.State]))
+
+    await Promise.allSettled(
+      records.map(async (rec: any) => {
+        const name = serviceName(rec.company.slug)
+        const dockerState = stateByService[name]
+        const status = dockerState ? mapDockerState(dockerState) : 'STOPPED'
+
+        if (rec.status !== status) {
+          await db.companyContainer.update({ where: { id: rec.id }, data: { status } })
+        }
+      }),
+    )
+  } catch {
+    // Docker daemon unreachable — leave statuses as-is
+  }
+}
diff --git a/api/src/services/financialReportService.test.ts b/api/src/services/financialReportService.test.ts
new file mode 100644
index 0000000..80d3828
--- /dev/null
+++ b/api/src/services/financialReportService.test.ts
@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { prisma } from '../lib/prisma'
+import { generateFinancialReport, toCsv } from './financialReportService'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    reservation: { findMany: vi.fn() },
+  },
+}))
+
+describe('financialReportService', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('generates summary totals and rows from confirmed revenue-bearing reservations only as requested from Prisma', async () => {
+    const startDate = new Date('2026-06-01T00:00:00.000Z')
+    const endDate = new Date('2026-06-30T23:59:59.999Z')
+
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([
+      {
+        id: 'reservation_1',
+        contractNumber: 'CNT-1',
+        invoiceNumber: null,
+        dailyRate: 500,
+        totalDays: 3,
+        discountAmount: 100,
+        insuranceTotal: 60,
+        additionalDriverTotal: 40,
+        pricingRulesTotal: -25,
+        depositAmount: 1000,
+        totalAmount: 1475,
+        source: 'DIRECT',
+        startDate: new Date('2026-06-10T10:00:00.000Z'),
+        endDate: new Date('2026-06-13T10:00:00.000Z'),
+        vehicle: { year: 2024, make: 'Dacia', model: 'Duster', licensePlate: 'A-123' },
+        customer: { firstName: 'Nora', lastName: 'Saidi', email: 'nora@example.com' },
+        rentalPayments: [{ status: 'SUCCEEDED', paymentMethod: 'CARD' }],
+        insurances: [],
+        additionalDrivers: [],
+      },
+      {
+        id: 'reservation_2',
+        contractNumber: null,
+        invoiceNumber: 'INV-2',
+        dailyRate: 300,
+        totalDays: 2,
+        discountAmount: 0,
+        insuranceTotal: 30,
+        additionalDriverTotal: 0,
+        pricingRulesTotal: 10,
+        depositAmount: 500,
+        totalAmount: 640,
+        source: 'MARKETPLACE',
+        startDate: new Date('2026-06-18T10:00:00.000Z'),
+        endDate: new Date('2026-06-20T10:00:00.000Z'),
+        vehicle: { year: 2023, make: 'Renault', model: 'Clio', licensePlate: 'B-456' },
+        customer: { firstName: 'Omar', lastName: 'Tazi', email: 'omar@example.com' },
+        rentalPayments: [],
+        insurances: [],
+        additionalDrivers: [],
+      },
+    ] as never)
+
+    const report = await generateFinancialReport('company_1', startDate, endDate)
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith({
+      where: {
+        companyId: 'company_1',
+        status: { in: ['CONFIRMED', 'ACTIVE', 'COMPLETED'] },
+        startDate: { gte: startDate },
+        endDate: { lte: endDate },
+      },
+      include: expect.objectContaining({
+        vehicle: { select: { make: true, model: true, year: true, licensePlate: true } },
+        customer: { select: { firstName: true, lastName: true, email: true } },
+        rentalPayments: { where: { status: 'SUCCEEDED' } },
+      }),
+      orderBy: { startDate: 'asc' },
+    })
+
+    expect(report.summary).toEqual({
+      totalReservations: 2,
+      totalRentalRevenue: 2100,
+      totalDiscounts: 100,
+      totalInsurance: 90,
+      totalAdditionalDrivers: 40,
+      totalPricingRulesAdj: -15,
+      totalDeposits: 1500,
+      totalCollected: 2115,
+      averageRentalDays: 2.5,
+    })
+    expect(report.rows).toEqual([
+      expect.objectContaining({
+        reservationId: 'reservation_1',
+        contractNumber: 'CNT-1',
+        invoiceNumber: '—',
+        customerName: 'Nora Saidi',
+        vehicle: '2024 Dacia Duster',
+        plate: 'A-123',
+        startDate: '2026-06-10',
+        endDate: '2026-06-13',
+        baseAmount: 1500,
+        paymentStatus: 'SUCCEEDED',
+        paymentMethod: 'CARD',
+      }),
+      expect.objectContaining({
+        reservationId: 'reservation_2',
+        contractNumber: '—',
+        invoiceNumber: 'INV-2',
+        paymentStatus: 'UNPAID',
+        paymentMethod: '—',
+      }),
+    ])
+    expect(report.period).toEqual({ startDate, endDate })
+  })
+
+  it('returns zero-safe summary values when no rows match', async () => {
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([] as never)
+
+    const report = await generateFinancialReport('company_1', new Date('2026-06-01'), new Date('2026-06-30'))
+
+    expect(report.summary).toMatchObject({
+      totalReservations: 0,
+      totalRentalRevenue: 0,
+      averageRentalDays: 0,
+    })
+    expect(report.rows).toEqual([])
+  })
+
+  it('serializes CSV rows with headers and quotes comma-containing string values', () => {
+    expect(toCsv([
+      { customerName: 'Nora, Saidi', totalAmount: 1200, paymentStatus: 'SUCCEEDED' },
+      { customerName: 'Omar Tazi', totalAmount: 900, paymentStatus: null },
+    ])).toBe('customerName,totalAmount,paymentStatus\n"Nora, Saidi",1200,SUCCEEDED\nOmar Tazi,900,')
+  })
+
+  it('returns an empty CSV string for empty rows', () => {
+    expect(toCsv([])).toBe('')
+  })
+})
diff --git a/api/src/services/financialReportService.ts b/api/src/services/financialReportService.ts
new file mode 100644
index 0000000..bfea0ef
--- /dev/null
+++ b/api/src/services/financialReportService.ts
@@ -0,0 +1,66 @@
+import { prisma } from '../lib/prisma'
+
+export async function generateFinancialReport(companyId: string, startDate: Date, endDate: Date) {
+  const reservations = await prisma.reservation.findMany({
+    where: { companyId, status: { in: ['CONFIRMED', 'ACTIVE', 'COMPLETED'] }, startDate: { gte: startDate }, endDate: { lte: endDate } },
+    include: {
+      vehicle:  { select: { make: true, model: true, year: true, licensePlate: true } },
+      customer: { select: { firstName: true, lastName: true, email: true } },
+      rentalPayments: { where: { status: 'SUCCEEDED' } },
+      insurances: true,
+      additionalDrivers: true,
+    },
+    orderBy: { startDate: 'asc' },
+  })
+
+  const summary = {
+    totalReservations:         reservations.length,
+    totalRentalRevenue:        reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.dailyRate * r.totalDays, 0),
+    totalDiscounts:            reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.discountAmount, 0),
+    totalInsurance:            reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.insuranceTotal, 0),
+    totalAdditionalDrivers:    reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.additionalDriverTotal, 0),
+    totalPricingRulesAdj:      reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.pricingRulesTotal, 0),
+    totalDeposits:             reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.depositAmount, 0),
+    totalCollected:            reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.totalAmount, 0),
+    averageRentalDays:         reservations.length > 0 ? reservations.reduce((s: number, r: (typeof reservations)[number]) => s + r.totalDays, 0) / reservations.length : 0,
+  }
+
+  const rows = reservations.map((r: (typeof reservations)[number]) => ({
+    reservationId:    r.id,
+    contractNumber:   r.contractNumber ?? '—',
+    invoiceNumber:    r.invoiceNumber ?? '—',
+    customerName:     `${r.customer.firstName} ${r.customer.lastName}`,
+    vehicle:          `${r.vehicle.year} ${r.vehicle.make} ${r.vehicle.model}`,
+    plate:            r.vehicle.licensePlate,
+    startDate:        r.startDate.toISOString().split('T')[0],
+    endDate:          r.endDate.toISOString().split('T')[0],
+    days:             r.totalDays,
+    dailyRate:        r.dailyRate,
+    baseAmount:       r.dailyRate * r.totalDays,
+    discount:         r.discountAmount,
+    insurance:        r.insuranceTotal,
+    additionalDriver: r.additionalDriverTotal,
+    pricingAdj:       r.pricingRulesTotal,
+    deposit:          r.depositAmount,
+    totalAmount:      r.totalAmount,
+    paymentStatus:    r.rentalPayments[0]?.status ?? 'UNPAID',
+    paymentMethod:    r.rentalPayments[0]?.paymentMethod ?? '—',
+    source:           r.source,
+  }))
+
+  return { summary, rows, period: { startDate, endDate } }
+}
+
+export function toCsv(rows: Record<string, any>[]): string {
+  if (rows.length === 0) return ''
+  const headers = Object.keys(rows[0]!)
+  return [
+    headers.join(','),
+    ...rows.map((row) =>
+      headers.map((h) => {
+        const val = row[h] ?? ''
+        return typeof val === 'string' && val.includes(',') ? `"${val}"` : String(val)
+      }).join(',')
+    ),
+  ].join('\n')
+}
diff --git a/api/src/services/insuranceService.test.ts b/api/src/services/insuranceService.test.ts
new file mode 100644
index 0000000..f91ff5a
--- /dev/null
+++ b/api/src/services/insuranceService.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    insurancePolicy: { findMany: vi.fn() },
+    reservationInsurance: { createMany: vi.fn() },
+    reservation: { update: vi.fn() },
+    $transaction: vi.fn(),
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { applyInsurancesToReservation, calculateInsuranceCharge } from './insuranceService'
+
+const policy = (overrides: Record<string, unknown>) => ({
+  id: 'policy_1',
+  companyId: 'company_1',
+  name: 'Collision damage waiver',
+  type: 'CDW',
+  chargeType: 'PER_DAY',
+  chargeValue: 100,
+  isRequired: false,
+  isActive: true,
+  ...overrides,
+}) as any
+
+describe('insuranceService', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('calculates per-day, per-rental, percentage, and unknown insurance charges defensively', () => {
+    expect(calculateInsuranceCharge(policy({ chargeType: 'PER_DAY', chargeValue: 25 }), 4, 1_000)).toBe(100)
+    expect(calculateInsuranceCharge(policy({ chargeType: 'PER_RENTAL', chargeValue: 90 }), 4, 1_000)).toBe(90)
+    expect(calculateInsuranceCharge(policy({ chargeType: 'PERCENTAGE_OF_RENTAL', chargeValue: 12.5 }), 4, 999)).toBe(125)
+    expect(calculateInsuranceCharge(policy({ chargeType: 'WHO_KNOWS', chargeValue: 50 }), 4, 1_000)).toBe(0)
+  })
+
+  it('always applies required active policies and selected optional policies in one reservation transaction', async () => {
+    vi.mocked(prisma.insurancePolicy.findMany).mockResolvedValue([
+      policy({ id: 'required_1', name: 'Mandatory liability', isRequired: true, chargeType: 'PER_RENTAL', chargeValue: 300 }),
+      policy({ id: 'optional_1', name: 'Glass cover', isRequired: false, chargeType: 'PER_DAY', chargeValue: 50 }),
+      policy({ id: 'optional_2', name: 'Ignored cover', isRequired: false, chargeType: 'PER_DAY', chargeValue: 999 }),
+    ] as never)
+    vi.mocked(prisma.$transaction).mockResolvedValue([] as never)
+
+    const result = await applyInsurancesToReservation('reservation_1', 'company_1', ['optional_1'], 3, 1_200)
+
+    expect(result.insuranceTotal).toBe(450)
+    expect(result.records.map((r) => r.insurancePolicyId)).toEqual(['required_1', 'optional_1'])
+    expect(prisma.insurancePolicy.findMany).toHaveBeenCalledWith({ where: { companyId: 'company_1', isActive: true } })
+    expect(prisma.reservationInsurance.createMany).toHaveBeenCalledWith({ data: result.records })
+    expect(prisma.reservation.update).toHaveBeenCalledWith({
+      where: { id: 'reservation_1' },
+      data: { insuranceTotal: 450, totalAmount: { increment: 450 } },
+    })
+    expect(prisma.$transaction).toHaveBeenCalledWith([undefined, undefined])
+  })
+})
diff --git a/api/src/services/insuranceService.ts b/api/src/services/insuranceService.ts
new file mode 100644
index 0000000..3925a1c
--- /dev/null
+++ b/api/src/services/insuranceService.ts
@@ -0,0 +1,53 @@
+import { InsurancePolicy } from '@rentaldrivego/database'
+import { prisma } from '../lib/prisma'
+
+export function calculateInsuranceCharge(
+  policy: InsurancePolicy,
+  totalDays: number,
+  baseRentalAmount: number
+): number {
+  switch (policy.chargeType) {
+    case 'PER_DAY':               return policy.chargeValue * totalDays
+    case 'PER_RENTAL':            return policy.chargeValue
+    case 'PERCENTAGE_OF_RENTAL':  return Math.round(baseRentalAmount * policy.chargeValue / 100)
+    default:                      return 0
+  }
+}
+
+export async function applyInsurancesToReservation(
+  reservationId: string,
+  companyId: string,
+  selectedPolicyIds: string[],
+  totalDays: number,
+  baseRentalAmount: number
+) {
+  const allPolicies = await prisma.insurancePolicy.findMany({ where: { companyId, isActive: true } })
+  const required = allPolicies.filter((p: InsurancePolicy) => p.isRequired)
+  const selected = allPolicies.filter((p: InsurancePolicy) => selectedPolicyIds.includes(p.id) && !p.isRequired)
+  const toApply = [...required, ...selected]
+
+  const records = toApply.map((policy) => ({
+    reservationId,
+    insurancePolicyId: policy.id,
+    policyName: policy.name,
+    policyType: policy.type,
+    chargeType: policy.chargeType,
+    chargeValue: policy.chargeValue,
+    totalCharge: calculateInsuranceCharge(policy, totalDays, baseRentalAmount),
+  }))
+
+  const insuranceTotal = records.reduce((s, r) => s + r.totalCharge, 0)
+
+  await prisma.$transaction([
+    prisma.reservationInsurance.createMany({ data: records }),
+    prisma.reservation.update({
+      where: { id: reservationId },
+      data: {
+        insuranceTotal,
+        totalAmount: { increment: insuranceTotal },
+      },
+    }),
+  ])
+
+  return { records, insuranceTotal }
+}
diff --git a/api/src/services/invoicePdfService.test.ts b/api/src/services/invoicePdfService.test.ts
new file mode 100644
index 0000000..94da41c
--- /dev/null
+++ b/api/src/services/invoicePdfService.test.ts
@@ -0,0 +1,57 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const renderToBufferMock = vi.fn().mockResolvedValue(Buffer.from('pdf-bytes'))
+
+vi.mock('@react-pdf/renderer', () => ({
+  renderToBuffer: (...args: any[]) => renderToBufferMock(...args),
+  Document: 'Document',
+  Page: 'Page',
+  Text: 'Text',
+  View: 'View',
+  StyleSheet: { create: (styles: any) => styles },
+}))
+
+import { buildInvoiceNumber, generateInvoicePdf } from './invoicePdfService'
+
+describe('invoicePdfService', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('builds stable legacy invoice numbers from the creation year and id suffix', () => {
+    expect(buildInvoiceNumber('invoice_abcdef', new Date('2026-06-09T12:00:00.000Z'))).toBe('INV-2026-ABCDEF')
+    expect(buildInvoiceNumber('short', new Date('2027-06-01T00:00:00.000Z'))).toBe('INV-2027-SHORT')
+  })
+
+  it('renders a subscription invoice document into a buffer', async () => {
+    const result = await generateInvoicePdf({
+      invoiceNumber: 'INV-2026-000001',
+      issueDate: '2026-06-09T00:00:00.000Z',
+      dueDate: null,
+      company: { name: 'Atlas Cars', email: 'billing@atlas.test', phone: '+212600000000', address: { formatted: 'Casablanca' } },
+      subscription: { plan: 'PRO', billingPeriod: 'MONTHLY', currency: 'MAD' },
+      amount: 99000,
+      currency: 'MAD',
+      status: 'PAID',
+      paymentProvider: 'PAYPAL',
+      transactionId: 'txn_1',
+      paidAt: '2026-06-09T12:00:00.000Z',
+      lineItems: [{ description: 'Pro monthly subscription', amount: 99000, currency: 'MAD', quantity: 1, unitAmount: 99000 }],
+      totals: {
+        subtotalAmount: 99000,
+        discountAmount: 0,
+        creditAmount: 0,
+        taxAmount: 0,
+        totalAmount: 99000,
+        amountPaid: 99000,
+        amountDue: 0,
+      },
+    })
+
+    expect(result).toEqual(Buffer.from('pdf-bytes'))
+    expect(renderToBufferMock).toHaveBeenCalledTimes(1)
+    expect(renderToBufferMock.mock.calls[0][0]).toEqual(expect.objectContaining({
+      props: expect.objectContaining({ data: expect.objectContaining({ invoiceNumber: 'INV-2026-000001' }) }),
+    }))
+  })
+})
diff --git a/api/src/services/invoicePdfService.ts b/api/src/services/invoicePdfService.ts
new file mode 100644
index 0000000..7b78a58
--- /dev/null
+++ b/api/src/services/invoicePdfService.ts
@@ -0,0 +1,570 @@
+import React from 'react'
+import { renderToBuffer, Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'
+
+interface InvoiceData {
+  invoiceNumber: string
+  issueDate: string
+  dueDate: string | null
+  company: {
+    name: string
+    email: string
+    phone?: string | null
+    address?: any
+  }
+  subscription?: {
+    plan: string
+    billingPeriod: string
+    currentPeriodStart?: string | null
+    currentPeriodEnd?: string | null
+    currency: string
+  }
+  amount: number
+  currency: string
+  status: string
+  paymentProvider: string
+  transactionId?: string | null
+  paidAt?: string | null
+  lineItems?: Array<{
+    description: string
+    amount: number
+    currency: string
+    quantity?: number
+    unitAmount?: number
+    periodStart?: string | null
+    periodEnd?: string | null
+  }>
+  totals?: {
+    subtotalAmount: number
+    discountAmount: number
+    creditAmount: number
+    taxAmount: number
+    totalAmount: number
+    amountPaid: number
+    amountDue: number
+  }
+}
+
+const PLAN_LABEL: Record<string, string> = {
+  STARTER: 'Starter',
+  GROWTH: 'Growth',
+  PRO: 'Pro',
+}
+
+const PERIOD_LABEL: Record<string, string> = {
+  MONTHLY: 'Monthly',
+  ANNUAL: 'Annual',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  PAID: '#10b981',
+  PENDING: '#f59e0b',
+  OPEN: '#f59e0b',
+  PAYMENT_PENDING: '#f59e0b',
+  PARTIALLY_PAID: '#f59e0b',
+  PAST_DUE: '#ef4444',
+  FAILED: '#ef4444',
+  REFUNDED: '#6b7280',
+  PARTIALLY_REFUNDED: '#6b7280',
+  VOID: '#6b7280',
+  UNCOLLECTIBLE: '#6b7280',
+}
+
+const colors = {
+  bg: '#0f0f11',
+  surface: '#18181b',
+  border: '#27272a',
+  textPrimary: '#f4f4f5',
+  textSecondary: '#a1a1aa',
+  textMuted: '#71717a',
+  accent: '#10b981',
+  white: '#ffffff',
+}
+
+const s = StyleSheet.create({
+  page: {
+    backgroundColor: colors.bg,
+    paddingHorizontal: 48,
+    paddingVertical: 48,
+    fontFamily: 'Helvetica',
+    color: colors.textPrimary,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 40,
+    paddingBottom: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  brandName: {
+    fontSize: 22,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.accent,
+    letterSpacing: 0.5,
+  },
+  brandTagline: {
+    fontSize: 9,
+    color: colors.textMuted,
+    marginTop: 3,
+  },
+  invoiceMeta: {
+    alignItems: 'flex-end',
+  },
+  invoiceTitle: {
+    fontSize: 26,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.white,
+    letterSpacing: 1,
+  },
+  invoiceNumber: {
+    fontSize: 11,
+    color: colors.textSecondary,
+    marginTop: 4,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionLabel: {
+    fontSize: 8,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.textMuted,
+    letterSpacing: 1.2,
+    textTransform: 'uppercase',
+    marginBottom: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 24,
+    marginBottom: 24,
+  },
+  col: {
+    flex: 1,
+    backgroundColor: colors.surface,
+    borderRadius: 8,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  colLabel: {
+    fontSize: 8,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.textMuted,
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+    marginBottom: 10,
+  },
+  companyName: {
+    fontSize: 13,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.textPrimary,
+    marginBottom: 4,
+  },
+  companyDetail: {
+    fontSize: 10,
+    color: colors.textSecondary,
+    marginBottom: 2,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  metaKey: {
+    fontSize: 9,
+    color: colors.textMuted,
+  },
+  metaValue: {
+    fontSize: 9,
+    color: colors.textSecondary,
+    fontFamily: 'Helvetica-Bold',
+  },
+  table: {
+    backgroundColor: colors.surface,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    overflow: 'hidden',
+    marginBottom: 20,
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    backgroundColor: '#1c1c1f',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  tableHeaderCell: {
+    fontSize: 8,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.textMuted,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+  },
+  tableRow: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  tableCell: {
+    fontSize: 10,
+    color: colors.textPrimary,
+  },
+  tableCellMuted: {
+    fontSize: 10,
+    color: colors.textSecondary,
+  },
+  col60: { flex: 6 },
+  col20: { flex: 2, textAlign: 'right' as const },
+  col20Center: { flex: 2, textAlign: 'center' as const },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginBottom: 6,
+  },
+  totalLabel: {
+    fontSize: 11,
+    color: colors.textSecondary,
+    marginRight: 32,
+  },
+  totalValue: {
+    fontSize: 11,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.white,
+    minWidth: 100,
+    textAlign: 'right' as const,
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  grandTotalLabel: {
+    fontSize: 13,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.textSecondary,
+    marginRight: 32,
+  },
+  grandTotalValue: {
+    fontSize: 15,
+    fontFamily: 'Helvetica-Bold',
+    color: colors.accent,
+    minWidth: 100,
+    textAlign: 'right' as const,
+  },
+  statusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+    marginTop: 6,
+  },
+  statusText: {
+    fontSize: 9,
+    fontFamily: 'Helvetica-Bold',
+    letterSpacing: 0.5,
+    color: colors.white,
+  },
+  paymentBox: {
+    backgroundColor: colors.surface,
+    borderRadius: 8,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: colors.border,
+    marginBottom: 24,
+  },
+  paymentRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  paymentKey: {
+    fontSize: 9,
+    color: colors.textMuted,
+  },
+  paymentValue: {
+    fontSize: 9,
+    color: colors.textSecondary,
+    fontFamily: 'Helvetica-Bold',
+    maxWidth: 280,
+    textAlign: 'right' as const,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 32,
+    left: 48,
+    right: 48,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingTop: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  footerText: {
+    fontSize: 8,
+    color: colors.textMuted,
+  },
+})
+
+function fmt(amount: number, currency: string) {
+  return `${(amount / 100).toFixed(2)} ${currency}`
+}
+
+function fmtDate(iso: string | null | undefined) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' })
+}
+
+function formatAddress(address: any): string {
+  if (!address) return ''
+  if (typeof address === 'string') return address
+  const parts = [address.street, address.city, address.region, address.country, address.zip]
+  return parts.filter(Boolean).join(', ')
+}
+
+function InvoiceDocument({ data }: { data: InvoiceData }) {
+  const statusColor = STATUS_COLORS[data.status] ?? '#6b7280'
+  const addressStr = formatAddress(data.company.address)
+  const planLabel = data.subscription ? (PLAN_LABEL[data.subscription.plan] ?? data.subscription.plan) : 'Manual'
+  const periodLabel = data.subscription ? (PERIOD_LABEL[data.subscription.billingPeriod] ?? data.subscription.billingPeriod) : 'Custom'
+  const lineItems = data.lineItems?.length
+    ? data.lineItems
+    : [{
+        description: `${planLabel} Plan — ${periodLabel} Subscription`,
+        amount: data.amount,
+        currency: data.currency,
+        periodStart: data.subscription?.currentPeriodStart ?? null,
+        periodEnd: data.subscription?.currentPeriodEnd ?? null,
+      }]
+  const totals = data.totals ?? {
+    subtotalAmount: data.amount,
+    discountAmount: 0,
+    creditAmount: 0,
+    taxAmount: 0,
+    totalAmount: data.amount,
+    amountPaid: data.paidAt ? data.amount : 0,
+    amountDue: data.paidAt ? 0 : data.amount,
+  }
+
+  return React.createElement(
+    Document,
+    { author: 'RentalDriveGo', title: `Invoice ${data.invoiceNumber}`, subject: 'Subscription Invoice' },
+    React.createElement(
+      Page,
+      { size: 'A4', style: s.page },
+
+      // ── Header ──────────────────────────────────────────────────
+      React.createElement(
+        View,
+        { style: s.header },
+        React.createElement(
+          View,
+          null,
+          React.createElement(Text, { style: s.brandName }, 'RentalDriveGo'),
+          React.createElement(Text, { style: s.brandTagline }, 'Car Rental Management Platform'),
+        ),
+        React.createElement(
+          View,
+          { style: s.invoiceMeta },
+          React.createElement(Text, { style: s.invoiceTitle }, 'INVOICE'),
+          React.createElement(Text, { style: s.invoiceNumber }, data.invoiceNumber),
+          React.createElement(
+            View,
+            { style: [s.statusBadge, { backgroundColor: statusColor }] },
+            React.createElement(Text, { style: s.statusText }, data.status),
+          ),
+        ),
+      ),
+
+      // ── Bill To / Invoice Dates ──────────────────────────────────
+      React.createElement(
+        View,
+        { style: s.row },
+        React.createElement(
+          View,
+          { style: s.col },
+          React.createElement(Text, { style: s.colLabel }, 'Bill To'),
+          React.createElement(Text, { style: s.companyName }, data.company.name),
+          React.createElement(Text, { style: s.companyDetail }, data.company.email),
+          data.company.phone
+            ? React.createElement(Text, { style: s.companyDetail }, data.company.phone)
+            : null,
+          addressStr
+            ? React.createElement(Text, { style: [s.companyDetail, { marginTop: 4 }] }, addressStr)
+            : null,
+        ),
+        React.createElement(
+          View,
+          { style: s.col },
+          React.createElement(Text, { style: s.colLabel }, 'Invoice Details'),
+          React.createElement(
+            View,
+            { style: s.metaRow },
+            React.createElement(Text, { style: s.metaKey }, 'Invoice Number'),
+            React.createElement(Text, { style: s.metaValue }, data.invoiceNumber),
+          ),
+          React.createElement(
+            View,
+            { style: s.metaRow },
+            React.createElement(Text, { style: s.metaKey }, 'Issue Date'),
+            React.createElement(Text, { style: s.metaValue }, fmtDate(data.issueDate)),
+          ),
+          data.dueDate
+            ? React.createElement(
+                View,
+                { style: s.metaRow },
+                React.createElement(Text, { style: s.metaKey }, 'Due Date'),
+                React.createElement(Text, { style: s.metaValue }, fmtDate(data.dueDate)),
+              )
+            : null,
+          React.createElement(
+            View,
+            { style: s.metaRow },
+            React.createElement(Text, { style: s.metaKey }, 'Currency'),
+            React.createElement(Text, { style: s.metaValue }, data.currency),
+          ),
+          React.createElement(
+            View,
+            { style: s.metaRow },
+            React.createElement(Text, { style: s.metaKey }, 'Billing Period'),
+            React.createElement(Text, { style: s.metaValue }, periodLabel),
+          ),
+          data.subscription
+            ? React.createElement(
+                View,
+                { style: s.metaRow },
+                React.createElement(Text, { style: s.metaKey }, 'Plan'),
+                React.createElement(Text, { style: s.metaValue }, planLabel),
+              )
+            : null,
+        ),
+      ),
+
+      // ── Line Items ───────────────────────────────────────────────
+      React.createElement(
+        View,
+        { style: s.table },
+        React.createElement(
+          View,
+          { style: s.tableHeader },
+          React.createElement(Text, { style: [s.tableHeaderCell, s.col60] }, 'Description'),
+          React.createElement(Text, { style: [s.tableHeaderCell, s.col20Center] }, 'Period'),
+          React.createElement(Text, { style: [s.tableHeaderCell, s.col20] }, 'Amount'),
+        ),
+        ...lineItems.map((item) => {
+          const periodStr = item.periodStart && item.periodEnd
+            ? `${fmtDate(item.periodStart)} – ${fmtDate(item.periodEnd)}`
+            : '—'
+          const description = item.quantity && item.quantity > 1 && item.unitAmount !== undefined
+            ? `${item.description} (${item.quantity} × ${fmt(item.unitAmount, item.currency)})`
+            : item.description
+          return React.createElement(
+            View,
+            { key: `${item.description}-${item.amount}-${item.periodStart ?? ''}`, style: s.tableRow },
+            React.createElement(Text, { style: [s.tableCell, s.col60] }, description),
+            React.createElement(Text, { style: [s.tableCellMuted, s.col20Center, { textAlign: 'center' }] }, periodStr),
+            React.createElement(Text, { style: [s.tableCell, s.col20, { textAlign: 'right' }] }, fmt(item.amount, item.currency)),
+          )
+        }),
+      ),
+
+      // ── Totals ───────────────────────────────────────────────────
+      React.createElement(
+        View,
+        { style: s.totalRow },
+        React.createElement(Text, { style: s.totalLabel }, 'Subtotal'),
+        React.createElement(Text, { style: s.totalValue }, fmt(totals.subtotalAmount, data.currency)),
+      ),
+      totals.discountAmount > 0
+        ? React.createElement(
+            View,
+            { style: s.totalRow },
+            React.createElement(Text, { style: s.totalLabel }, 'Discounts'),
+            React.createElement(Text, { style: s.totalValue }, `- ${fmt(totals.discountAmount, data.currency)}`),
+          )
+        : null,
+      totals.creditAmount > 0
+        ? React.createElement(
+            View,
+            { style: s.totalRow },
+            React.createElement(Text, { style: s.totalLabel }, 'Credits'),
+            React.createElement(Text, { style: s.totalValue }, `- ${fmt(totals.creditAmount, data.currency)}`),
+          )
+        : null,
+      totals.taxAmount > 0
+        ? React.createElement(
+            View,
+            { style: s.totalRow },
+            React.createElement(Text, { style: s.totalLabel }, 'Tax'),
+            React.createElement(Text, { style: s.totalValue }, fmt(totals.taxAmount, data.currency)),
+          )
+        : null,
+      React.createElement(
+        View,
+        { style: s.grandTotalRow },
+        React.createElement(Text, { style: s.grandTotalLabel }, 'Total Due'),
+        React.createElement(Text, { style: s.grandTotalValue }, fmt(totals.totalAmount, data.currency)),
+      ),
+
+      // ── Payment Info ─────────────────────────────────────────────
+      React.createElement(
+        View,
+        { style: [s.paymentBox, { marginTop: 24 }] },
+        React.createElement(Text, { style: [s.colLabel, { marginBottom: 10 }] }, 'Payment Information'),
+        React.createElement(
+          View,
+          { style: s.paymentRow },
+          React.createElement(Text, { style: s.paymentKey }, 'Payment Provider'),
+          React.createElement(Text, { style: s.paymentValue }, data.paymentProvider),
+        ),
+        data.transactionId
+          ? React.createElement(
+              View,
+              { style: s.paymentRow },
+              React.createElement(Text, { style: s.paymentKey }, 'Transaction ID'),
+              React.createElement(Text, { style: s.paymentValue }, data.transactionId),
+            )
+          : null,
+        React.createElement(
+          View,
+          { style: s.paymentRow },
+          React.createElement(Text, { style: s.paymentKey }, 'Payment Date'),
+          React.createElement(Text, { style: s.paymentValue }, fmtDate(data.paidAt)),
+        ),
+        React.createElement(
+          View,
+          { style: s.paymentRow },
+          React.createElement(Text, { style: s.paymentKey }, 'Status'),
+          React.createElement(Text, { style: [s.paymentValue, { color: statusColor }] }, data.status),
+        ),
+      ),
+
+      // ── Footer ───────────────────────────────────────────────────
+      React.createElement(
+        View,
+        { style: s.footer },
+        React.createElement(Text, { style: s.footerText }, 'RentalDriveGo — Car Rental Management Platform'),
+        React.createElement(Text, { style: s.footerText }, `Generated on ${fmtDate(new Date().toISOString())}`),
+      ),
+    ),
+  )
+}
+
+export async function generateInvoicePdf(data: InvoiceData): Promise<Buffer> {
+  const doc = React.createElement(InvoiceDocument, { data })
+  const buffer = await renderToBuffer(doc as any)
+  return buffer as unknown as Buffer
+}
+
+export function buildInvoiceNumber(invoiceId: string, createdAt: Date): string {
+  const year = createdAt.getFullYear()
+  const short = invoiceId.slice(-6).toUpperCase()
+  return `INV-${year}-${short}`
+}
diff --git a/api/src/services/licenseValidationService.test.ts b/api/src/services/licenseValidationService.test.ts
new file mode 100644
index 0000000..32eccb2
--- /dev/null
+++ b/api/src/services/licenseValidationService.test.ts
@@ -0,0 +1,199 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    customer: {
+      findFirstOrThrow: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+      update: vi.fn(),
+      updateMany: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import {
+  validateAndFlagLicense,
+  validateLicense,
+  validateLicenseDate,
+  parseExpirationDate,
+  ErrorCode,
+} from './licenseValidationService'
+
+const NOW = new Date('2026-06-09T12:00:00.000Z')
+
+describe('licenseValidationService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  // ─── validateLicense (legacy) ────────────────────────────────────────
+
+  it('treats missing license expiry as valid but explicitly records that no date exists', () => {
+    expect(validateLicense(null)).toEqual({
+      status: 'VALID',
+      daysUntilExpiry: null,
+      requiresApproval: false,
+      message: 'No expiry date on record',
+    })
+  })
+
+  it('requires approval for licenses expiring inside the 30-day risk window', () => {
+    const result = validateLicense(new Date('2026-07-04T12:00:00.000Z'))
+
+    expect(result.status).toBe('EXPIRING')
+    expect(result.daysUntilExpiry).toBe(25)
+    expect(result.requiresApproval).toBe(true)
+    expect(result.message).toContain('License expires in 25 day(s)')
+  })
+
+  it('marks exactly 30 days as valid (not expiring)', () => {
+    // 2026-07-09 is exactly 30 days from 2026-06-09
+    const result = validateLicense(new Date('2026-07-09T12:00:00.000Z'))
+
+    expect(result.status).toBe('VALID')
+    expect(result.daysUntilExpiry).toBe(30)
+    expect(result.requiresApproval).toBe(false)
+  })
+
+  it('requires approval for already expired licenses and reports negative days until expiry', () => {
+    const result = validateLicense(new Date('2026-06-04T12:00:00.000Z'))
+
+    expect(result.status).toBe('EXPIRED')
+    expect(result.daysUntilExpiry).toBe(-5)
+    expect(result.requiresApproval).toBe(true)
+  })
+
+  it('persists customer flags for risky licenses without clearing existing safe-customer metadata unnecessarily', async () => {
+    vi.mocked(prisma.customer.findFirstOrThrow).mockResolvedValue({
+      id: 'customer_1',
+      licenseExpiry: new Date('2026-06-20T12:00:00.000Z'),
+      flagged: false,
+      flagReason: null,
+    } as never)
+
+    const result = await validateAndFlagLicense('customer_1')
+
+    expect(result.status).toBe('EXPIRING')
+    expect(prisma.customer.update).toHaveBeenCalledWith({
+      where: { id: 'customer_1' },
+      data: expect.objectContaining({
+        licenseExpired: false,
+        licenseExpiringSoon: true,
+        licenseValidationStatus: 'EXPIRING',
+        flagged: true,
+        flagReason: expect.stringContaining('License expires in 11 day(s)'),
+      }),
+    })
+  })
+
+  // ─── validateLicenseDate (new public API) ────────────────────────────
+
+  it('rejects missing date', () => {
+    const result = validateLicenseDate(null)
+    expect(result.valid).toBe(false)
+    expect(result.error_code).toBe(ErrorCode.LICENSE_MISSING_DATE)
+  })
+
+  it('rejects undefined date', () => {
+    const result = validateLicenseDate(undefined)
+    expect(result.valid).toBe(false)
+    expect(result.error_code).toBe(ErrorCode.LICENSE_MISSING_DATE)
+  })
+
+  it('rejects already expired license', () => {
+    const result = validateLicenseDate(new Date('2026-06-04T12:00:00.000Z'))
+    expect(result.valid).toBe(false)
+    expect(result.error_code).toBe(ErrorCode.LICENSE_EXPIRED)
+    expect(result.days_remaining).toBe(-5)
+  })
+
+  it('rejects license expiring in less than 30 days', () => {
+    const result = validateLicenseDate(new Date('2026-06-20T12:00:00.000Z'))
+    expect(result.valid).toBe(false)
+    expect(result.error_code).toBe(ErrorCode.LICENSE_EXPIRING_SOON)
+    expect(result.days_remaining).toBe(11)
+  })
+
+  it('accepts license with exactly 30 days remaining', () => {
+    const result = validateLicenseDate(new Date('2026-07-09T12:00:00.000Z'))
+    expect(result.valid).toBe(true)
+    expect(result.days_remaining).toBe(30)
+  })
+
+  it('accepts license with more than 30 days remaining', () => {
+    const result = validateLicenseDate(new Date('2027-06-09T12:00:00.000Z'))
+    expect(result.valid).toBe(true)
+    expect(result.days_remaining).toBe(365)
+    expect(result.message).toBe('License verified successfully')
+  })
+
+  it('rejects future date more than 20 years from now', () => {
+    const result = validateLicenseDate(new Date('2050-06-09T12:00:00.000Z'))
+    expect(result.valid).toBe(false)
+    expect(result.error_code).toBe(ErrorCode.LICENSE_FUTURE_DATE)
+  })
+
+  it('handles leap year date correctly', () => {
+    const result = validateLicenseDate(new Date('2028-02-29T12:00:00.000Z'))
+    expect(result.valid).toBe(true)
+    // 2028-02-29 minus 2026-06-09 = should be > 30 days
+    expect(result.days_remaining).toBeGreaterThan(600)
+  })
+
+  // ─── parseExpirationDate ─────────────────────────────────────────────
+
+  it('parses ISO 8601 date (YYYY-MM-DD)', () => {
+    const d = parseExpirationDate('2027-06-11')
+    expect(d).toBeInstanceOf(Date)
+    expect(d!.getUTCFullYear()).toBe(2027)
+    expect(d!.getUTCMonth()).toBe(5) // June
+    expect(d!.getUTCDate()).toBe(11)
+  })
+
+  it('parses US format (MM/DD/YYYY)', () => {
+    const d = parseExpirationDate('06/11/2027')
+    expect(d).toBeInstanceOf(Date)
+    expect(d!.getFullYear()).toBe(2027)
+    expect(d!.getMonth()).toBe(5) // June
+    expect(d!.getDate()).toBe(11)
+  })
+
+  it('parses DD/MM/YYYY when first part > 12', () => {
+    const d = parseExpirationDate('13/06/2027')
+    expect(d).toBeInstanceOf(Date)
+    expect(d!.getFullYear()).toBe(2027)
+    expect(d!.getMonth()).toBe(5) // June
+    expect(d!.getDate()).toBe(13)
+  })
+
+  it('parses DD-MMM-YYYY (military format)', () => {
+    const d = parseExpirationDate('11-JUN-2027')
+    expect(d).toBeInstanceOf(Date)
+    expect(d!.getFullYear()).toBe(2027)
+    expect(d!.getMonth()).toBe(5) // June
+    expect(d!.getDate()).toBe(11)
+  })
+
+  it('returns null for completely invalid date string', () => {
+    expect(parseExpirationDate('not-a-date')).toBeNull()
+  })
+
+  it('returns null for empty string', () => {
+    expect(parseExpirationDate('')).toBeNull()
+  })
+
+  it('returns null for null input', () => {
+    expect(parseExpirationDate(null)).toBeNull()
+  })
+
+  it('returns null for undefined input', () => {
+    expect(parseExpirationDate(undefined)).toBeNull()
+  })
+})
diff --git a/api/src/services/licenseValidationService.ts b/api/src/services/licenseValidationService.ts
new file mode 100644
index 0000000..3d527e4
--- /dev/null
+++ b/api/src/services/licenseValidationService.ts
@@ -0,0 +1,245 @@
+import { prisma } from '../lib/prisma'
+import { LicenseStatus } from '@rentaldrivego/database'
+
+const MS_PER_DAY = 1000 * 60 * 60 * 24
+
+/** Minimum days of remaining validity required (configurable via env, default 30). */
+function getMinValidityDays(): number {
+  const raw = process.env.LICENSE_MIN_VALIDITY_DAYS
+  if (raw) {
+    const n = Number(raw)
+    if (Number.isFinite(n) && n > 0) return n
+  }
+  return 30
+}
+
+/** Maximum years in the future considered reasonable for a license expiration date. */
+const MAX_FUTURE_YEARS = 20
+
+// ── Error codes matching doc/error-code reference ────────────────────────
+export const ErrorCode = {
+  LICENSE_EXPIRED:       'LICENSE_EXPIRED',
+  LICENSE_EXPIRING_SOON: 'LICENSE_EXPIRING_SOON',
+  LICENSE_INVALID_FORMAT:'LICENSE_INVALID_FORMAT',
+  LICENSE_FUTURE_DATE:   'LICENSE_FUTURE_DATE',
+  LICENSE_MISSING_DATE:  'LICENSE_MISSING_DATE',
+} as const
+
+export interface LicenseValidationResult {
+  status: 'VALID' | 'EXPIRING' | 'EXPIRED'
+  daysUntilExpiry: number | null
+  requiresApproval: boolean
+  message: string
+}
+
+export interface DetailedValidationResult {
+  valid: boolean
+  days_remaining: number | null
+  expiration_date: string | null
+  message: string
+  error_code?: string
+  details?: {
+    expiration_date?: string
+    days_remaining?: number
+    minimum_required?: number
+    suggested_action?: string
+  }
+}
+
+/**
+ * Parse an expiration date string into a Date.
+ * Returns null if the string is not a valid date per ISO 8601 or common
+ * US/EU formats (YYYY-MM-DD, MM/DD/YYYY, DD/MM/YYYY).
+ */
+export function parseExpirationDate(raw: string | null | undefined): Date | null {
+  if (!raw) return null
+
+  // Try ISO 8601 first (YYYY-MM-DD or full ISO)
+  const iso = new Date(raw)
+  if (!isNaN(iso.getTime()) && raw.length >= 10) {
+    // Ensure we don't accept "2026-06" as valid — need at least YYYY-MM-DD
+    const datePart = raw.split('T')[0]
+    if (!datePart) return null
+    const parts = datePart.split('-')
+    if (parts.length === 3) return iso
+  }
+
+  // Try MM/DD/YYYY and DD/MM/YYYY
+  const slashMatch = raw.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/)
+  if (slashMatch) {
+    // Prefer US order (MM/DD/YYYY) as default; document says "varies by state"
+    const m1 = Number(slashMatch[1])
+    const m2 = Number(slashMatch[2])
+    const year = Number(slashMatch[3])
+    // If first part > 12, it's likely DD/MM/YYYY
+    if (m1 > 12) {
+      const d = new Date(year, m2 - 1, m1)
+      if (!isNaN(d.getTime())) return d
+    }
+    const d = new Date(year, m1 - 1, m2)
+    if (!isNaN(d.getTime())) return d
+  }
+
+  // Try DD-MMM-YYYY (e.g., 11-JUN-2027)
+  const mmmMatch = raw.match(/^(\d{1,2})-([A-Za-z]{3})-(\d{4})$/)
+  if (mmmMatch) {
+    const d = new Date(`${mmmMatch[2]} ${mmmMatch[1]}, ${mmmMatch[3]}`)
+    if (!isNaN(d.getTime())) return d
+  }
+
+  return null
+}
+
+/**
+ * Pure validation logic — no side effects, no DB calls.
+ *
+ * Returns a DetailedValidationResult suitable for the public API.
+ */
+export function validateLicenseDate(expirationDate: Date | null | undefined): DetailedValidationResult {
+  if (!expirationDate) {
+    return {
+      valid: false,
+      days_remaining: null,
+      expiration_date: null,
+      message: 'No expiration date provided. Please provide a valid driver\'s license expiration date.',
+      error_code: ErrorCode.LICENSE_MISSING_DATE,
+      details: {
+        suggested_action: 'Please provide the expiration date from your driver\'s license.',
+      },
+    }
+  }
+
+  const now = new Date()
+  const nowMs = now.getTime()
+  const expMs = expirationDate.getTime()
+  const daysRemaining = Math.ceil((expMs - nowMs) / MS_PER_DAY)
+  const expDateStr = expirationDate.toISOString().split('T')[0] ?? ''
+  const minValidityDays = getMinValidityDays()
+
+  // Expired
+  if (expMs <= nowMs) {
+    return {
+      valid: false,
+      days_remaining: daysRemaining,
+      expiration_date: expDateStr,
+      message: `License has expired. Your license expired on ${expDateStr}.`,
+      error_code: ErrorCode.LICENSE_EXPIRED,
+      details: {
+        expiration_date: expDateStr,
+        days_remaining: daysRemaining,
+        minimum_required: minValidityDays,
+        suggested_action: 'Please renew your driver\'s license and upload the updated document.',
+      },
+    }
+  }
+
+  // Expiring soon (1 – minValidityDays-1 days remaining)
+  if (daysRemaining < minValidityDays) {
+    return {
+      valid: false,
+      days_remaining: daysRemaining,
+      expiration_date: expDateStr,
+      message: `License must have at least ${minValidityDays} days remaining validity. Your license expires in ${daysRemaining} days on ${expDateStr}.`,
+      error_code: ErrorCode.LICENSE_EXPIRING_SOON,
+      details: {
+        expiration_date: expDateStr,
+        days_remaining: daysRemaining,
+        minimum_required: minValidityDays,
+        suggested_action: `Please upload a valid license with more than ${minValidityDays} days remaining.`,
+      },
+    }
+  }
+
+  // Future date (>MAX_FUTURE_YEARS from now)
+  const maxFutureMs = nowMs + MAX_FUTURE_YEARS * 365 * MS_PER_DAY
+  if (expMs > maxFutureMs) {
+    return {
+      valid: false,
+      days_remaining: daysRemaining,
+      expiration_date: expDateStr,
+      message: `The provided expiration date (${expDateStr}) is too far in the future. Please verify the date is correct.`,
+      error_code: ErrorCode.LICENSE_FUTURE_DATE,
+      details: {
+        expiration_date: expDateStr,
+        days_remaining: daysRemaining,
+        minimum_required: minValidityDays,
+        suggested_action: 'Please check the expiration date on your license and re-enter it correctly.',
+      },
+    }
+  }
+
+  // Valid
+  const nextReminder = new Date(expMs - minValidityDays * MS_PER_DAY).toISOString().split('T')[0]
+  return {
+    valid: true,
+    days_remaining: daysRemaining,
+    expiration_date: expDateStr,
+    message: 'License verified successfully',
+    details: {
+      days_remaining: daysRemaining,
+      minimum_required: minValidityDays,
+      suggested_action: 'License is valid.',
+    },
+  }
+}
+
+/**
+ * Legacy validation function used internally by the customer service.
+ * Returns a simpler result compatible with existing callers.
+ */
+export function validateLicense(licenseExpiry: Date | null): LicenseValidationResult {
+  if (!licenseExpiry) {
+    return { status: 'VALID', daysUntilExpiry: null, requiresApproval: false, message: 'No expiry date on record' }
+  }
+
+  const now = new Date()
+  const daysUntilExpiry = Math.ceil((licenseExpiry.getTime() - now.getTime()) / MS_PER_DAY)
+  const minValidityDays = getMinValidityDays()
+  const minValidityMs = minValidityDays * MS_PER_DAY
+
+  if (licenseExpiry <= now) {
+    return { status: 'EXPIRED', daysUntilExpiry, requiresApproval: true, message: `License expired ${Math.abs(daysUntilExpiry)} day(s) ago` }
+  }
+
+  if (licenseExpiry.getTime() - now.getTime() < minValidityMs) {
+    return { status: 'EXPIRING', daysUntilExpiry, requiresApproval: true, message: `License expires in ${daysUntilExpiry} day(s) — approval required` }
+  }
+
+  return { status: 'VALID', daysUntilExpiry, requiresApproval: false, message: `Valid — expires in ${daysUntilExpiry} day(s)` }
+}
+
+export async function validateAndFlagLicense(customerId: string, companyId?: string) {
+  const where = companyId ? { id: customerId, companyId } : { id: customerId }
+  const customer = await prisma.customer.findFirstOrThrow({ where })
+  const result = validateLicense(customer.licenseExpiry)
+
+  const status: LicenseStatus =
+    result.status === 'EXPIRED' ? 'EXPIRED' :
+    result.status === 'EXPIRING' ? 'EXPIRING' : 'VALID'
+
+  if (companyId) {
+    await prisma.customer.updateMany({
+      where: { id: customerId, companyId },
+      data: {
+        licenseExpired:          result.status === 'EXPIRED',
+        licenseExpiringSoon:     result.status === 'EXPIRING',
+        licenseValidationStatus: status,
+        flagged:                 result.requiresApproval ? true : customer.flagged,
+        flagReason:              result.requiresApproval ? result.message : customer.flagReason,
+      },
+    })
+  } else {
+    await prisma.customer.update({
+      where: { id: customerId },
+      data: {
+        licenseExpired:          result.status === 'EXPIRED',
+        licenseExpiringSoon:     result.status === 'EXPIRING',
+        licenseValidationStatus: status,
+        flagged:                 result.requiresApproval ? true : customer.flagged,
+        flagReason:              result.requiresApproval ? result.message : customer.flagReason,
+      },
+    })
+  }
+
+  return result
+}
diff --git a/api/src/services/notificationLocalizationService.boundary.test.ts b/api/src/services/notificationLocalizationService.boundary.test.ts
new file mode 100644
index 0000000..79ae7dd
--- /dev/null
+++ b/api/src/services/notificationLocalizationService.boundary.test.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  coerceNotificationLocale,
+  formatLocalizedCurrency,
+  localizeBillingPeriod,
+  localizeInvoiceStatus,
+  localizePlanName,
+  renderLocalizedEmailHtml,
+  renderNotificationText,
+  resolveNotificationLocale,
+  resolveNotificationTemplate,
+} from './notificationLocalizationService'
+
+function dbStub(overrides: Record<string, any> = {}) {
+  return {
+    employee: { findUnique: vi.fn().mockResolvedValue(null) },
+    renter: { findUnique: vi.fn().mockResolvedValue(null) },
+    brandSettings: { findUnique: vi.fn().mockResolvedValue(null) },
+    billingAccount: { findUnique: vi.fn().mockResolvedValue(null), findFirst: vi.fn().mockResolvedValue(null) },
+    notificationTemplate: { findFirst: vi.fn().mockResolvedValue(null) },
+    ...overrides,
+  }
+}
+
+describe('notificationLocalizationService formatting and fallback boundaries', () => {
+  it('coerces unsupported or blank locales to English', () => {
+    expect(coerceNotificationLocale('fr')).toBe('fr')
+    expect(coerceNotificationLocale('es')).toBe('en')
+    expect(coerceNotificationLocale(null)).toBe('en')
+  })
+
+  it('formats template values across currency, dates and status objects', () => {
+    const rendered = renderNotificationText(
+      'Total {{amount}}, due {{dueDate}}, status {{invoiceStatus}}, plan {{plan}}',
+      {
+        amount: { type: 'currency', amountMinor: 123450, currency: 'MAD' },
+        dueDate: { type: 'date', value: '2026-06-10T00:00:00.000Z', options: { month: 'short', day: 'numeric' } },
+        invoiceStatus: { type: 'invoice_status', status: 'partially_paid' },
+        plan: true,
+      },
+      ['amount', 'dueDate', 'invoiceStatus'],
+      'en',
+    )
+
+    expect(rendered).toContain('MAD')
+    expect(rendered).toContain('Jun')
+    expect(rendered).toContain('Partially paid')
+    expect(rendered).toContain('true')
+  })
+
+  it('throws before rendering when required variables are missing', () => {
+    expect(() => renderNotificationText('Hello {{firstName}}', {}, ['firstName'], 'en')).toThrow(
+      'Missing notification template variable: firstName',
+    )
+  })
+
+  it('escapes localized email body text while preserving paragraphs and line breaks', () => {
+    const html = renderLocalizedEmailHtml('Hello <Admin> & team\nLine 2\n\nSecond paragraph', 'en')
+
+    expect(html).toContain('&lt;Admin&gt; &amp; team')
+    expect(html).toContain('Line 2')
+    expect(html).toContain('<br />')
+    expect(html).toContain('text-align:left')
+  })
+
+  it('uses explicit locale without querying user, workspace or billing preferences', async () => {
+    const db = dbStub()
+
+    await expect(resolveNotificationLocale({ locale: 'ar', companyId: 'company_1', employeeId: 'employee_1' }, db as any)).resolves.toBe('ar')
+
+    expect(db.employee.findUnique).not.toHaveBeenCalled()
+    expect(db.brandSettings.findUnique).not.toHaveBeenCalled()
+    expect(db.billingAccount.findFirst).not.toHaveBeenCalled()
+  })
+
+  it('resolves renter preference before workspace and billing defaults', async () => {
+    const db = dbStub({
+      renter: { findUnique: vi.fn().mockResolvedValue({ preferredLocale: 'fr' }) },
+      brandSettings: { findUnique: vi.fn().mockResolvedValue({ defaultLocale: 'ar' }) },
+      billingAccount: { findUnique: vi.fn().mockResolvedValue(null), findFirst: vi.fn().mockResolvedValue({ preferredLanguage: 'en' }) },
+    })
+
+    await expect(resolveNotificationLocale({ companyId: 'company_1', renterId: 'renter_1' }, db as any)).resolves.toBe('fr')
+  })
+
+  it('throws a clear error when neither requested nor fallback templates exist', async () => {
+    const db = dbStub()
+
+    await expect(resolveNotificationTemplate({
+      templateKey: 'missing.template',
+      channel: 'EMAIL',
+      locale: 'fr',
+    }, db as any)).rejects.toThrow('Missing notification template for missing.template/EMAIL in fr and en')
+  })
+
+  it('keeps unknown labels unchanged instead of fabricating translations', () => {
+    expect(localizeInvoiceStatus('custom_status', 'fr')).toBe('custom_status')
+    expect(localizeBillingPeriod('quarterly', 'ar')).toBe('quarterly')
+    expect(localizePlanName('enterprise', 'en')).toBe('enterprise')
+    expect(formatLocalizedCurrency(5000, 'MAD', 'fr')).toContain('MAD')
+  })
+})
diff --git a/api/src/services/notificationLocalizationService.test.ts b/api/src/services/notificationLocalizationService.test.ts
new file mode 100644
index 0000000..17075c6
--- /dev/null
+++ b/api/src/services/notificationLocalizationService.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  renderLocalizedEmailHtml,
+  resolveNotificationLocale,
+  resolveNotificationTemplate,
+} from './notificationLocalizationService'
+
+function createDbStub(overrides: Record<string, any> = {}) {
+  return {
+    employee: {
+      findUnique: vi.fn().mockResolvedValue(null),
+    },
+    renter: {
+      findUnique: vi.fn().mockResolvedValue(null),
+    },
+    brandSettings: {
+      findUnique: vi.fn().mockResolvedValue(null),
+    },
+    billingAccount: {
+      findUnique: vi.fn().mockResolvedValue(null),
+      findFirst: vi.fn().mockResolvedValue(null),
+    },
+    notificationTemplate: {
+      findFirst: vi.fn().mockResolvedValue(null),
+    },
+    ...overrides,
+  }
+}
+
+describe('notificationLocalizationService', () => {
+  it('resolves locale in recipient -> workspace -> billing -> default order', async () => {
+    const db = createDbStub({
+      employee: {
+        findUnique: vi.fn().mockResolvedValue({ preferredLanguage: 'ar' }),
+      },
+      brandSettings: {
+        findUnique: vi.fn().mockResolvedValue({ defaultLocale: 'fr' }),
+      },
+      billingAccount: {
+        findUnique: vi.fn().mockResolvedValue(null),
+        findFirst: vi.fn().mockResolvedValue({ preferredLanguage: 'en' }),
+      },
+    })
+
+    const locale = await resolveNotificationLocale({
+      companyId: 'company_1',
+      employeeId: 'employee_1',
+    }, db as any)
+
+    expect(locale).toBe('ar')
+  })
+
+  it('falls back to English when a localized template is missing', async () => {
+    const db = createDbStub({
+      notificationTemplate: {
+        findFirst: vi
+          .fn()
+          .mockImplementation(({ where }: any) => {
+            if (where.locale === 'en') {
+              return Promise.resolve({
+                templateKey: 'booking.confirmed',
+                channel: 'EMAIL',
+                locale: 'en',
+                subject: 'Booking confirmed - {{companyName}}',
+                body: 'Hello {{firstName}}',
+                requiredVariables: ['companyName', 'firstName'],
+                optionalVariables: [],
+                version: 1,
+              })
+            }
+
+            return Promise.resolve(null)
+          }),
+      },
+    })
+
+    const template = await resolveNotificationTemplate({
+      templateKey: 'booking.confirmed',
+      channel: 'EMAIL',
+      locale: 'ar',
+      variables: {
+        firstName: 'Aya',
+        companyName: 'Atlas Cars',
+      },
+    }, db as any)
+
+    expect(template.locale).toBe('en')
+    expect(template.usedFallback).toBe(true)
+    expect(template.subject).toBe('Booking confirmed - Atlas Cars')
+    expect(template.body).toBe('Hello Aya')
+  })
+
+  it('renders Arabic emails with rtl metadata', () => {
+    const html = renderLocalizedEmailHtml('مرحبا\n\nتم التأكيد', 'ar')
+
+    expect(html).toContain('<html lang="ar" dir="rtl">')
+    expect(html).toContain('text-align:right')
+  })
+})
diff --git a/api/src/services/notificationLocalizationService.ts b/api/src/services/notificationLocalizationService.ts
new file mode 100644
index 0000000..8599df2
--- /dev/null
+++ b/api/src/services/notificationLocalizationService.ts
@@ -0,0 +1,440 @@
+import type { NotificationChannel } from '@rentaldrivego/database'
+import { prisma } from '../lib/prisma'
+
+export const SUPPORTED_NOTIFICATION_LOCALES = ['en', 'fr', 'ar'] as const
+
+export type NotificationLocale = (typeof SUPPORTED_NOTIFICATION_LOCALES)[number]
+
+export const DEFAULT_NOTIFICATION_LOCALE: NotificationLocale = 'en'
+
+const localeConfig: Record<NotificationLocale, { intl: string; direction: 'ltr' | 'rtl' }> = {
+  en: { intl: 'en-US', direction: 'ltr' },
+  fr: { intl: 'fr-FR', direction: 'ltr' },
+  ar: { intl: 'ar-MA', direction: 'rtl' },
+}
+
+const subscriptionStatusLabels: Record<NotificationLocale, Record<string, string>> = {
+  en: {
+    trialing: 'Trial active',
+    active: 'Active',
+    payment_pending: 'Payment pending',
+    past_due: 'Payment overdue',
+    suspended: 'Suspended',
+    cancelled: 'Canceled',
+    canceled: 'Canceled',
+    expired: 'Expired',
+  },
+  fr: {
+    trialing: 'Essai actif',
+    active: 'Actif',
+    payment_pending: 'Paiement en attente',
+    past_due: 'Paiement en retard',
+    suspended: 'Suspendu',
+    cancelled: 'Annule',
+    canceled: 'Annule',
+    expired: 'Expire',
+  },
+  ar: {
+    trialing: 'الفترة التجريبية نشطة',
+    active: 'نشط',
+    payment_pending: 'الدفع قيد الانتظار',
+    past_due: 'الدفع متأخر',
+    suspended: 'معلّق',
+    cancelled: 'ملغى',
+    canceled: 'ملغى',
+    expired: 'منتهي',
+  },
+}
+
+const invoiceStatusLabels: Record<NotificationLocale, Record<string, string>> = {
+  en: {
+    draft: 'Preparing',
+    open: 'Due',
+    payment_pending: 'Payment processing',
+    paid: 'Paid',
+    partially_paid: 'Partially paid',
+    past_due: 'Past due',
+    void: 'Canceled',
+    uncollectible: 'Contact support',
+    refunded: 'Refunded',
+    partially_refunded: 'Partially refunded',
+  },
+  fr: {
+    draft: 'En preparation',
+    open: 'A payer',
+    payment_pending: 'Paiement en cours',
+    paid: 'Payee',
+    partially_paid: 'Partiellement payee',
+    past_due: 'En retard',
+    void: 'Annulee',
+    uncollectible: 'Contacter le support',
+    refunded: 'Remboursee',
+    partially_refunded: 'Partiellement remboursee',
+  },
+  ar: {
+    draft: 'قيد الإعداد',
+    open: 'مستحقة الدفع',
+    payment_pending: 'الدفع قيد المعالجة',
+    paid: 'مدفوعة',
+    partially_paid: 'مدفوعة جزئياً',
+    past_due: 'متأخرة',
+    void: 'ملغاة',
+    uncollectible: 'تواصل مع الدعم',
+    refunded: 'مستردة',
+    partially_refunded: 'مستردة جزئياً',
+  },
+}
+
+const billingPeriodLabels: Record<NotificationLocale, Record<string, string>> = {
+  en: {
+    monthly: 'monthly',
+    annual: 'annual',
+  },
+  fr: {
+    monthly: 'mensuel',
+    annual: 'annuel',
+  },
+  ar: {
+    monthly: 'شهري',
+    annual: 'سنوي',
+  },
+}
+
+const planLabels: Record<NotificationLocale, Record<string, string>> = {
+  en: {
+    starter: 'Starter',
+    growth: 'Growth',
+    pro: 'Pro',
+  },
+  fr: {
+    starter: 'Starter',
+    growth: 'Growth',
+    pro: 'Pro',
+  },
+  ar: {
+    starter: 'Starter',
+    growth: 'Growth',
+    pro: 'Pro',
+  },
+}
+
+type TemplateDateValue = {
+  type: 'date'
+  value: Date | string | number
+  options?: Intl.DateTimeFormatOptions
+}
+
+type TemplateCurrencyValue = {
+  type: 'currency'
+  amountMinor: number
+  currency: string
+}
+
+type TemplateSubscriptionStatusValue = {
+  type: 'subscription_status'
+  status: string
+}
+
+type TemplateInvoiceStatusValue = {
+  type: 'invoice_status'
+  status: string
+}
+
+export type NotificationTemplateValue =
+  | string
+  | number
+  | boolean
+  | Date
+  | null
+  | undefined
+  | TemplateDateValue
+  | TemplateCurrencyValue
+  | TemplateSubscriptionStatusValue
+  | TemplateInvoiceStatusValue
+
+export type NotificationTemplateVariables = Record<string, NotificationTemplateValue>
+
+type NotificationLocalizationDb = Pick<
+  typeof prisma,
+  'brandSettings' | 'billingAccount' | 'employee' | 'notificationTemplate' | 'renter'
+>
+
+type NotificationTemplateRecord = {
+  templateKey: string
+  channel: NotificationChannel
+  locale: string
+  subject: string | null
+  body: string
+  requiredVariables: unknown
+  optionalVariables: unknown
+  version: number
+}
+
+export function coerceNotificationLocale(locale?: string | null): NotificationLocale {
+  if (locale && SUPPORTED_NOTIFICATION_LOCALES.includes(locale as NotificationLocale)) {
+    return locale as NotificationLocale
+  }
+
+  return DEFAULT_NOTIFICATION_LOCALE
+}
+
+export function getNotificationTextDirection(locale: NotificationLocale) {
+  return localeConfig[locale].direction
+}
+
+export function formatLocalizedDate(
+  value: Date | string | number,
+  locale: NotificationLocale,
+  options?: Intl.DateTimeFormatOptions,
+) {
+  const date = value instanceof Date ? value : new Date(value)
+  return new Intl.DateTimeFormat(localeConfig[locale].intl, options ?? {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date)
+}
+
+export function formatLocalizedCurrency(amountMinor: number, currency: string, locale: NotificationLocale) {
+  return new Intl.NumberFormat(localeConfig[locale].intl, {
+    style: 'currency',
+    currency,
+  }).format(amountMinor / 100)
+}
+
+export function localizeSubscriptionStatus(status: string, locale: NotificationLocale) {
+  const normalized = status.toLowerCase()
+  return subscriptionStatusLabels[locale][normalized] ?? status
+}
+
+export function localizeInvoiceStatus(status: string, locale: NotificationLocale) {
+  const normalized = status.toLowerCase()
+  return invoiceStatusLabels[locale][normalized] ?? status
+}
+
+export function localizeBillingPeriod(period: string, locale: NotificationLocale) {
+  const normalized = period.toLowerCase()
+  return billingPeriodLabels[locale][normalized] ?? period
+}
+
+export function localizePlanName(plan: string, locale: NotificationLocale) {
+  const normalized = plan.toLowerCase()
+  return planLabels[locale][normalized] ?? plan
+}
+
+function isTemplateDateValue(value: NotificationTemplateValue): value is TemplateDateValue {
+  return typeof value === 'object' && value !== null && 'type' in value && value.type === 'date'
+}
+
+function isTemplateCurrencyValue(value: NotificationTemplateValue): value is TemplateCurrencyValue {
+  return typeof value === 'object' && value !== null && 'type' in value && value.type === 'currency'
+}
+
+function isTemplateSubscriptionStatusValue(value: NotificationTemplateValue): value is TemplateSubscriptionStatusValue {
+  return typeof value === 'object' && value !== null && 'type' in value && value.type === 'subscription_status'
+}
+
+function isTemplateInvoiceStatusValue(value: NotificationTemplateValue): value is TemplateInvoiceStatusValue {
+  return typeof value === 'object' && value !== null && 'type' in value && value.type === 'invoice_status'
+}
+
+function formatTemplateValue(value: NotificationTemplateValue, locale: NotificationLocale): string {
+  if (value instanceof Date) return formatLocalizedDate(value, locale)
+  if (isTemplateDateValue(value)) return formatLocalizedDate(value.value, locale, value.options)
+  if (isTemplateCurrencyValue(value)) return formatLocalizedCurrency(value.amountMinor, value.currency, locale)
+  if (isTemplateSubscriptionStatusValue(value)) return localizeSubscriptionStatus(value.status, locale)
+  if (isTemplateInvoiceStatusValue(value)) return localizeInvoiceStatus(value.status, locale)
+  if (value === null || value === undefined) return ''
+  return String(value)
+}
+
+function normalizeTemplateVariableList(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value.filter((item): item is string => typeof item === 'string')
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+async function findTemplate(
+  db: NotificationLocalizationDb,
+  templateKey: string,
+  channel: NotificationChannel,
+  locale: NotificationLocale,
+): Promise<NotificationTemplateRecord | null> {
+  return db.notificationTemplate.findFirst({
+    where: { templateKey, channel, locale, isActive: true },
+    orderBy: { version: 'desc' },
+    select: {
+      templateKey: true,
+      channel: true,
+      locale: true,
+      subject: true,
+      body: true,
+      requiredVariables: true,
+      optionalVariables: true,
+      version: true,
+    },
+  })
+}
+
+export async function resolveNotificationLocale(input: {
+  companyId?: string | null
+  employeeId?: string | null
+  renterId?: string | null
+  billingAccountId?: string | null
+  locale?: string | null
+}, db: NotificationLocalizationDb = prisma): Promise<NotificationLocale> {
+  if (input.locale) return coerceNotificationLocale(input.locale)
+
+  const employeePromise = input.employeeId
+    ? db.employee.findUnique({
+        where: { id: input.employeeId },
+        select: { preferredLanguage: true },
+      })
+    : Promise.resolve(null)
+
+  const renterPromise = input.renterId
+    ? db.renter.findUnique({
+        where: { id: input.renterId },
+        select: { preferredLocale: true },
+      })
+    : Promise.resolve(null)
+
+  const workspacePromise = input.companyId
+    ? db.brandSettings.findUnique({
+        where: { companyId: input.companyId },
+        select: { defaultLocale: true },
+      })
+    : Promise.resolve(null)
+
+  const billingPromise = input.billingAccountId
+    ? db.billingAccount.findUnique({
+        where: { id: input.billingAccountId },
+        select: { preferredLanguage: true },
+      })
+    : input.companyId
+      ? db.billingAccount.findFirst({
+          where: { companyId: input.companyId, isPrimary: true },
+          select: { preferredLanguage: true },
+          orderBy: { createdAt: 'asc' },
+        })
+      : Promise.resolve(null)
+
+  const [employee, renter, workspace, billingAccount] = await Promise.all([
+    employeePromise,
+    renterPromise,
+    workspacePromise,
+    billingPromise,
+  ])
+
+  return coerceNotificationLocale(
+    employee?.preferredLanguage ??
+      renter?.preferredLocale ??
+      workspace?.defaultLocale ??
+      billingAccount?.preferredLanguage ??
+      DEFAULT_NOTIFICATION_LOCALE,
+  )
+}
+
+export async function resolveNotificationTemplate(input: {
+  templateKey: string
+  channel: NotificationChannel
+  locale: NotificationLocale
+  variables?: NotificationTemplateVariables
+}, db: NotificationLocalizationDb = prisma) {
+  const requested = await findTemplate(db, input.templateKey, input.channel, input.locale)
+
+  if (requested) {
+    return {
+      locale: coerceNotificationLocale(requested.locale),
+      subject: renderNotificationText(
+        requested.subject,
+        input.variables,
+        normalizeTemplateVariableList(requested.requiredVariables),
+        input.locale,
+      ),
+      body: renderNotificationText(
+        requested.body,
+        input.variables,
+        normalizeTemplateVariableList(requested.requiredVariables),
+        input.locale,
+      ),
+      templateKey: requested.templateKey,
+      usedFallback: false,
+    }
+  }
+
+  if (input.locale !== DEFAULT_NOTIFICATION_LOCALE) {
+    console.warn(
+      `[Notifications] Missing ${input.locale} template for ${input.templateKey}/${input.channel}; falling back to ${DEFAULT_NOTIFICATION_LOCALE}.`,
+    )
+  }
+
+  const fallback = await findTemplate(db, input.templateKey, input.channel, DEFAULT_NOTIFICATION_LOCALE)
+  if (!fallback) {
+    throw new Error(
+      `Missing notification template for ${input.templateKey}/${input.channel} in ${input.locale} and ${DEFAULT_NOTIFICATION_LOCALE}`,
+    )
+  }
+
+  return {
+    locale: DEFAULT_NOTIFICATION_LOCALE,
+    subject: renderNotificationText(
+      fallback.subject,
+      input.variables,
+      normalizeTemplateVariableList(fallback.requiredVariables),
+      DEFAULT_NOTIFICATION_LOCALE,
+    ),
+    body: renderNotificationText(
+      fallback.body,
+      input.variables,
+      normalizeTemplateVariableList(fallback.requiredVariables),
+      DEFAULT_NOTIFICATION_LOCALE,
+    ),
+    templateKey: fallback.templateKey,
+    usedFallback: true,
+  }
+}
+
+export function renderNotificationText(
+  template: string | null,
+  variables: NotificationTemplateVariables = {},
+  requiredVariables: string[] = [],
+  locale: NotificationLocale,
+) {
+  if (!template) return null
+
+  for (const variableName of requiredVariables) {
+    if (variables[variableName] === undefined || variables[variableName] === null) {
+      throw new Error(`Missing notification template variable: ${variableName}`)
+    }
+  }
+
+  return template.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_match, variableName: string) =>
+    formatTemplateValue(variables[variableName], locale),
+  )
+}
+
+export function renderLocalizedEmailHtml(body: string, locale: NotificationLocale) {
+  const direction = getNotificationTextDirection(locale)
+  const textAlign = direction === 'rtl' ? 'right' : 'left'
+  const paragraphs = body
+    .split(/\n{2,}/)
+    .map((paragraph) => `<p style="margin:0 0 16px;text-align:${textAlign};">${escapeHtml(paragraph).replace(/\n/g, '<br />')}</p>`)
+    .join('')
+
+  return [
+    `<html lang="${locale}" dir="${direction}">`,
+    `<body style="font-family:sans-serif;max-width:560px;margin:0 auto;padding:32px;color:#1c1917;direction:${direction};text-align:${textAlign};">`,
+    paragraphs,
+    '</body>',
+    '</html>',
+  ].join('')
+}
diff --git a/api/src/services/notificationService.test.ts b/api/src/services/notificationService.test.ts
new file mode 100644
index 0000000..0b7affe
--- /dev/null
+++ b/api/src/services/notificationService.test.ts
@@ -0,0 +1,134 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('resend', () => ({ Resend: vi.fn() }))
+vi.mock('twilio', () => ({ default: vi.fn(() => ({ messages: { create: vi.fn() } })) }))
+vi.mock('firebase-admin', () => ({
+  default: {
+    apps: [],
+    initializeApp: vi.fn(),
+    credential: { cert: vi.fn() },
+    messaging: vi.fn(() => ({ send: vi.fn() })),
+  },
+}))
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    notification: {
+      create: vi.fn(),
+      update: vi.fn(),
+    },
+  },
+}))
+vi.mock('../lib/redis', () => ({
+  redis: { publish: vi.fn(), on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('./notificationLocalizationService', async () => {
+  const actual = await vi.importActual<typeof import('./notificationLocalizationService')>('./notificationLocalizationService')
+  return {
+    ...actual,
+    resolveNotificationLocale: vi.fn().mockResolvedValue('en'),
+    resolveNotificationTemplate: vi.fn(),
+  }
+})
+
+import { prisma } from '../lib/prisma'
+import { redis } from '../lib/redis'
+import { sendNotification } from './notificationService'
+import { resolveNotificationLocale, resolveNotificationTemplate } from './notificationLocalizationService'
+
+describe('notificationService delivery boundaries', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(prisma.notification.create).mockResolvedValue({ id: 'notification_1', title: 'Hello', body: 'Body' } as never)
+    vi.mocked(prisma.notification.update).mockResolvedValue({ id: 'notification_1' } as never)
+    vi.mocked(resolveNotificationLocale).mockResolvedValue('en')
+    vi.mocked(resolveNotificationTemplate).mockResolvedValue(null as never)
+  })
+
+  it('persists and publishes in-app notifications for employee recipients', async () => {
+    const result = await sendNotification({
+      type: 'SYSTEM_ALERT' as never,
+      title: 'Maintenance window',
+      body: 'The dashboard will be unavailable.',
+      companyId: 'company_1',
+      employeeId: 'employee_1',
+      channels: ['IN_APP' as never],
+      data: { severity: 'low' },
+    })
+
+    expect(result).toEqual([{ channel: 'IN_APP', success: true }])
+    expect(resolveNotificationLocale).toHaveBeenCalledWith(expect.objectContaining({
+      companyId: 'company_1',
+      employeeId: 'employee_1',
+    }))
+    expect(prisma.notification.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        type: 'SYSTEM_ALERT',
+        title: 'Maintenance window',
+        body: 'The dashboard will be unavailable.',
+        channel: 'IN_APP',
+        status: 'PENDING',
+        companyId: 'company_1',
+        employeeId: 'employee_1',
+        renterId: null,
+      }),
+    })
+    expect(redis.publish).toHaveBeenCalledWith(
+      'notifications:employee_1',
+      expect.stringContaining('"status":"DELIVERED"'),
+    )
+    expect(prisma.notification.update).toHaveBeenCalledWith({
+      where: { id: 'notification_1' },
+      data: expect.objectContaining({ status: 'SENT', providerMessageId: null }),
+    })
+  })
+
+  it('uses resolved templates and records failed channels without throwing', async () => {
+    vi.mocked(resolveNotificationTemplate).mockResolvedValue({
+      templateKey: 'reservation.confirmed',
+      locale: 'fr',
+      subject: 'Réservation confirmée',
+      body: 'Votre réservation est confirmée.',
+      usedFallback: false,
+      version: 2,
+    } as never)
+
+    const result = await sendNotification({
+      type: 'RESERVATION_UPDATE' as never,
+      templateKey: 'reservation.confirmed',
+      templateVariables: { firstName: 'Aya' },
+      companyId: 'company_1',
+      channels: ['EMAIL' as never],
+      email: 'aya@example.test',
+    })
+
+    expect(result).toEqual([{ channel: 'EMAIL', success: false, error: 'No email provider is configured' }])
+    expect(resolveNotificationTemplate).toHaveBeenCalledWith(expect.objectContaining({
+      templateKey: 'reservation.confirmed',
+      channel: 'EMAIL',
+      locale: 'en',
+      variables: { firstName: 'Aya' },
+    }))
+    expect(prisma.notification.create).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        title: 'Réservation confirmée',
+        body: 'Votre réservation est confirmée.',
+        templateKey: 'reservation.confirmed',
+        locale: 'fr',
+      }),
+    })
+    expect(prisma.notification.update).not.toHaveBeenCalled()
+  })
+
+  it('fails incomplete notification content before persistence', async () => {
+    const result = await sendNotification({
+      type: 'SYSTEM_ALERT' as never,
+      title: 'Missing body',
+      channels: ['IN_APP' as never],
+      employeeId: 'employee_1',
+    })
+
+    expect(result).toEqual([{ channel: 'IN_APP', success: false, error: 'Notification content is incomplete for channel IN_APP' }])
+    expect(prisma.notification.create).not.toHaveBeenCalled()
+    expect(redis.publish).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/services/notificationService.ts b/api/src/services/notificationService.ts
new file mode 100644
index 0000000..79bdd66
--- /dev/null
+++ b/api/src/services/notificationService.ts
@@ -0,0 +1,334 @@
+import { Resend } from 'resend'
+import twilio from 'twilio'
+import admin from 'firebase-admin'
+import { prisma } from '../lib/prisma'
+import { redis } from '../lib/redis'
+import { NotificationType, NotificationChannel } from '@rentaldrivego/database'
+import {
+  renderLocalizedEmailHtml,
+  resolveNotificationLocale,
+  resolveNotificationTemplate,
+} from './notificationLocalizationService'
+import type { NotificationTemplateVariables } from './notificationLocalizationService'
+
+const resendApiKey =
+  process.env.RESEND_API_KEY &&
+  process.env.RESEND_API_KEY !== 're_...' &&
+  process.env.RESEND_API_KEY.startsWith('re_')
+    ? process.env.RESEND_API_KEY
+    : null
+
+const resend = resendApiKey ? new Resend(resendApiKey) : null
+
+const emailFromAddress =
+  process.env.EMAIL_FROM && process.env.EMAIL_FROM !== 'noreply@example.com'
+    ? process.env.EMAIL_FROM
+    : null
+
+const emailFromName =
+  process.env.EMAIL_FROM_NAME && process.env.EMAIL_FROM_NAME !== 'Example App'
+    ? process.env.EMAIL_FROM_NAME
+    : null
+
+const smtpHost = process.env.MAIL_HOST
+const smtpPort = Number(process.env.MAIL_PORT ?? 0)
+const smtpUser = process.env.MAIL_USERNAME
+const smtpPass = process.env.MAIL_PASSWORD
+const smtpSecure =
+  process.env.MAIL_SCHEME === 'smtps' ||
+  process.env.MAIL_ENCRYPTION === 'ssl' ||
+  smtpPort === 465
+
+const smtpFromAddress =
+  process.env.MAIL_FROM_ADDRESS && !process.env.MAIL_FROM_ADDRESS.includes('${')
+    ? process.env.MAIL_FROM_ADDRESS
+    : null
+
+const smtpFromName =
+  process.env.MAIL_FROM_NAME && !process.env.MAIL_FROM_NAME.includes('${')
+    ? process.env.MAIL_FROM_NAME
+    : null
+
+type SmtpTransport = {
+  sendMail(options: Record<string, unknown>): Promise<{ messageId?: string }>
+}
+
+let smtpTransport: SmtpTransport | null = null
+
+if (smtpHost && smtpPort && smtpUser && smtpPass) {
+  try {
+    const nodemailer = require('nodemailer') as {
+      createTransport(options: Record<string, unknown>): SmtpTransport
+    }
+
+    smtpTransport = nodemailer.createTransport({
+      host: smtpHost,
+      port: smtpPort,
+      secure: smtpSecure,
+      auth: {
+        user: smtpUser,
+        pass: smtpPass,
+      },
+    })
+  } catch (err: any) {
+    console.warn('[Notifications] SMTP transport unavailable:', err?.message ?? String(err))
+  }
+}
+
+const twilioClient =
+  process.env.TWILIO_ACCOUNT_SID &&
+  process.env.TWILIO_AUTH_TOKEN &&
+  process.env.TWILIO_ACCOUNT_SID !== 'AC...' &&
+  process.env.TWILIO_AUTH_TOKEN !== 'your-twilio-auth-token'
+    ? twilio(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN)
+    : null
+
+const firebasePrivateKey = process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n')
+const hasFirebaseConfig =
+  !!process.env.FIREBASE_PROJECT_ID &&
+  !!process.env.FIREBASE_CLIENT_EMAIL &&
+  !!firebasePrivateKey &&
+  !firebasePrivateKey.includes('BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY')
+
+if (hasFirebaseConfig && !admin.apps.length) {
+  try {
+    admin.initializeApp({
+      credential: admin.credential.cert({
+        projectId: process.env.FIREBASE_PROJECT_ID,
+        privateKey: firebasePrivateKey,
+        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
+      }),
+    })
+  } catch (err: any) {
+    console.warn('[Notifications] Firebase init skipped:', err.message)
+  }
+}
+
+interface SendNotificationOptions {
+  type: NotificationType
+  title?: string
+  body?: string
+  data?: Record<string, unknown>
+  companyId?: string
+  employeeId?: string
+  renterId?: string
+  billingAccountId?: string
+  email?: string
+  phone?: string
+  fcmToken?: string
+  channels: NotificationChannel[]
+  locale?: string
+  templateKey?: string
+  templateVariables?: NotificationTemplateVariables
+}
+
+function resolveSmtpReplyTo() {
+  if (!process.env.MAIL_REPLY_TO_ADDRESS || process.env.MAIL_REPLY_TO_ADDRESS.includes('${')) {
+    return undefined
+  }
+
+  if (process.env.MAIL_REPLY_TO_NAME && !process.env.MAIL_REPLY_TO_NAME.includes('${')) {
+    return `${process.env.MAIL_REPLY_TO_NAME} <${process.env.MAIL_REPLY_TO_ADDRESS}>`
+  }
+
+  return process.env.MAIL_REPLY_TO_ADDRESS
+}
+
+async function sendEmailWithProviders(opts: {
+  to: string
+  subject: string
+  html: string
+  text: string
+}) {
+  const errors: string[] = []
+
+  if (resend) {
+    try {
+      if (!emailFromAddress || !emailFromName) {
+        throw new Error('Email sender identity is not configured')
+      }
+
+      const { data, error } = await resend.emails.send({
+        from: `${emailFromName} <${emailFromAddress}>`,
+        to: opts.to,
+        subject: opts.subject,
+        html: opts.html,
+        text: opts.text,
+      })
+
+      if (error) {
+        throw new Error(error.message)
+      }
+
+      return {
+        provider: 'resend' as const,
+        providerMessageId: data?.id ?? null,
+      }
+    } catch (err: any) {
+      errors.push(`Resend: ${err?.message ?? String(err)}`)
+      console.warn('[Notifications] Resend delivery failed, falling back if possible:', err?.message ?? String(err))
+    }
+  }
+
+  if (smtpTransport) {
+    try {
+      if (!smtpFromAddress) {
+        throw new Error('SMTP sender identity is not configured')
+      }
+
+      const info = await smtpTransport.sendMail({
+        from: smtpFromName ? `${smtpFromName} <${smtpFromAddress}>` : smtpFromAddress,
+        to: opts.to,
+        subject: opts.subject,
+        html: opts.html,
+        text: opts.text,
+        replyTo: resolveSmtpReplyTo(),
+      })
+
+      return {
+        provider: 'smtp' as const,
+        providerMessageId: info.messageId ?? null,
+      }
+    } catch (err: any) {
+      errors.push(`SMTP: ${err?.message ?? String(err)}`)
+    }
+  }
+
+  if (errors.length) {
+    throw new Error(errors.join(' | '))
+  }
+
+  throw new Error('No email provider is configured')
+}
+
+export async function sendNotification(opts: SendNotificationOptions) {
+  const results: Array<{ channel: NotificationChannel; success: boolean; error?: string }> = []
+  const resolvedLocale = await resolveNotificationLocale({
+    companyId: opts.companyId,
+    employeeId: opts.employeeId,
+    renterId: opts.renterId,
+    billingAccountId: opts.billingAccountId,
+    locale: opts.locale,
+  })
+
+  for (const channel of opts.channels) {
+    try {
+      const rendered = opts.templateKey
+        ? await resolveNotificationTemplate({
+            templateKey: opts.templateKey,
+            channel,
+            locale: resolvedLocale,
+            variables: opts.templateVariables,
+          })
+        : null
+
+      const title = rendered?.subject ?? opts.title
+      const body = rendered?.body ?? opts.body
+
+      if (!title || !body) {
+        throw new Error(`Notification content is incomplete for channel ${channel}`)
+      }
+
+      const notification = await prisma.notification.create({
+        data: {
+          type: opts.type,
+          title,
+          body,
+          data: (opts.data ?? {}) as any,
+          channel,
+          templateKey: rendered?.templateKey ?? opts.templateKey ?? null,
+          locale: rendered?.locale ?? resolvedLocale,
+          status: 'PENDING',
+          companyId: opts.companyId ?? null,
+          employeeId: opts.employeeId ?? null,
+          renterId: opts.renterId ?? null,
+        },
+      })
+
+      let providerMessageId: string | null = null
+      let success = false
+
+      if (channel === 'EMAIL' && opts.email) {
+        const emailResult = await sendEmailWithProviders({
+          to: opts.email,
+          subject: title,
+          html: renderLocalizedEmailHtml(body, rendered?.locale ?? resolvedLocale),
+          text: body,
+        })
+        providerMessageId = emailResult.providerMessageId
+        success = true
+      }
+
+      if (channel === 'SMS' && opts.phone) {
+        if (!twilioClient) throw new Error('Twilio is not configured')
+        const msg = await twilioClient.messages.create({
+          body,
+          from: process.env.TWILIO_PHONE_NUMBER!,
+          to: opts.phone,
+        })
+        providerMessageId = msg.sid
+        success = true
+      }
+
+      if (channel === 'WHATSAPP' && opts.phone) {
+        if (!twilioClient) throw new Error('Twilio is not configured')
+        const msg = await twilioClient.messages.create({
+          body,
+          from: `whatsapp:${process.env.TWILIO_WHATSAPP_NUMBER}`,
+          to: `whatsapp:${opts.phone}`,
+        })
+        providerMessageId = msg.sid
+        success = true
+      }
+
+      if (channel === 'PUSH' && opts.fcmToken) {
+        if (!admin.apps.length) throw new Error('Firebase is not configured')
+        const response = await admin.messaging().send({
+          token: opts.fcmToken,
+          notification: { title, body },
+          data: Object.fromEntries(
+            Object.entries(opts.data ?? {}).map(([k, v]) => [k, String(v)])
+          ),
+        })
+        providerMessageId = response
+        success = true
+      }
+
+      if (channel === 'IN_APP') {
+        // Emit via Socket.io through Redis pub/sub
+        const targetId = opts.employeeId ?? opts.renterId
+        if (targetId) {
+          await redis.publish(
+            `notifications:${targetId}`,
+            JSON.stringify({ ...notification, status: 'DELIVERED' })
+          )
+        }
+        success = true
+      }
+
+      await prisma.notification.update({
+        where: { id: notification.id },
+        data: {
+          status: success ? 'SENT' : 'FAILED',
+          sentAt: success ? new Date() : null,
+          providerMessageId,
+        },
+      })
+
+      results.push({ channel, success })
+    } catch (err: any) {
+      results.push({ channel, success: false, error: err.message })
+    }
+  }
+
+  return results
+}
+
+export async function sendTransactionalEmail(opts: {
+  to: string
+  subject: string
+  html: string
+  text: string
+}) {
+  await sendEmailWithProviders(opts)
+}
diff --git a/api/src/services/paypalService.test.ts b/api/src/services/paypalService.test.ts
new file mode 100644
index 0000000..ca414ea
--- /dev/null
+++ b/api/src/services/paypalService.test.ts
@@ -0,0 +1,112 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const originalEnv = { ...process.env }
+
+async function importService(env: Record<string, string | undefined> = {}) {
+  vi.resetModules()
+  process.env = { ...originalEnv, ...env }
+  return import('./paypalService')
+}
+
+describe('paypalService', () => {
+  afterEach(() => {
+    process.env = { ...originalEnv }
+    vi.unstubAllGlobals()
+    vi.resetModules()
+  })
+
+  it('reports unconfigured when client credentials are placeholders or missing', async () => {
+    const service = await importService({ PAYPAL_CLIENT_ID: 'your-paypal-client-id', PAYPAL_CLIENT_SECRET: 'secret' })
+    expect(service.isConfigured()).toBe(false)
+  })
+
+  it('creates an order after obtaining and caching an access token', async () => {
+    const fetchMock = vi.fn()
+      .mockResolvedValueOnce({
+        ok: true,
+        json: vi.fn().mockResolvedValue({ access_token: 'access_1', expires_in: 3600 }),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: vi.fn().mockResolvedValue({
+          id: 'paypal_order_1',
+          status: 'CREATED',
+          links: [{ rel: 'approve', href: 'https://paypal.test/approve' }],
+        }),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: vi.fn().mockResolvedValue({ id: 'paypal_order_2', status: 'CREATED', links: [] }),
+      })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const service = await importService({
+      PAYPAL_BASE_URL: 'https://paypal.test',
+      PAYPAL_CLIENT_ID: 'client_1',
+      PAYPAL_CLIENT_SECRET: 'secret_1',
+    })
+
+    await expect(service.createOrder({
+      amount: 12345,
+      currency: 'MAD',
+      orderId: 'reservation_1',
+      description: 'Reservation deposit',
+      returnUrl: 'https://app.test/return',
+      cancelUrl: 'https://app.test/cancel',
+    })).resolves.toEqual({
+      orderId: 'paypal_order_1',
+      approveUrl: 'https://paypal.test/approve',
+      status: 'CREATED',
+    })
+
+    await service.createOrder({
+      amount: 500,
+      currency: 'MAD',
+      orderId: 'reservation_2',
+      description: 'Second payment',
+      returnUrl: 'https://app.test/return',
+      cancelUrl: 'https://app.test/cancel',
+    })
+
+    expect(fetchMock).toHaveBeenCalledTimes(3)
+    expect(fetchMock).toHaveBeenNthCalledWith(1, 'https://paypal.test/v1/oauth2/token', expect.objectContaining({
+      method: 'POST',
+      body: 'grant_type=client_credentials',
+      headers: expect.objectContaining({ Authorization: `Basic ${Buffer.from('client_1:secret_1').toString('base64')}` }),
+    }))
+    expect(fetchMock).toHaveBeenNthCalledWith(2, 'https://paypal.test/v2/checkout/orders', expect.objectContaining({
+      method: 'POST',
+      headers: expect.objectContaining({ Authorization: 'Bearer access_1' }),
+      body: expect.stringContaining('"value":"123.45"'),
+    }))
+  })
+
+  it('captures and refunds through authenticated PayPal endpoints with cent-to-decimal formatting', async () => {
+    const fetchMock = vi.fn()
+      .mockResolvedValueOnce({ ok: true, json: vi.fn().mockResolvedValue({ access_token: 'access_1', expires_in: 3600 }) })
+      .mockResolvedValueOnce({ ok: true, json: vi.fn().mockResolvedValue({ id: 'capture_result' }) })
+      .mockResolvedValueOnce({ ok: true, json: vi.fn().mockResolvedValue({ id: 'refund_result' }) })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const service = await importService({ PAYPAL_BASE_URL: 'https://paypal.test', PAYPAL_CLIENT_ID: 'client_1', PAYPAL_CLIENT_SECRET: 'secret_1' })
+
+    await expect(service.captureOrder('order_1')).resolves.toEqual({ id: 'capture_result' })
+    await expect(service.refundCapture('capture_1', 2500, 'MAD', 'Customer cancellation')).resolves.toEqual({ id: 'refund_result' })
+
+    expect(fetchMock).toHaveBeenNthCalledWith(2, 'https://paypal.test/v2/checkout/orders/order_1/capture', expect.objectContaining({
+      method: 'POST',
+      body: '{}',
+    }))
+    expect(fetchMock).toHaveBeenNthCalledWith(3, 'https://paypal.test/v2/payments/captures/capture_1/refund', expect.objectContaining({
+      method: 'POST',
+      body: JSON.stringify({ amount: { currency_code: 'MAD', value: '25.00' }, note_to_payer: 'Customer cancellation' }),
+    }))
+  })
+
+  it('returns false instead of throwing when webhook verification cannot be completed', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')))
+    const service = await importService({ PAYPAL_CLIENT_ID: 'client_1', PAYPAL_CLIENT_SECRET: 'secret_1' })
+
+    await expect(service.verifyWebhookEvent({}, '{"id":"event_1"}')).resolves.toBe(false)
+  })
+})
diff --git a/api/src/services/paypalService.ts b/api/src/services/paypalService.ts
new file mode 100644
index 0000000..938ddcb
--- /dev/null
+++ b/api/src/services/paypalService.ts
@@ -0,0 +1,127 @@
+const BASE_URL = process.env.PAYPAL_BASE_URL ?? 'https://api-m.paypal.com'
+const CLIENT_ID = process.env.PAYPAL_CLIENT_ID ?? ''
+const CLIENT_SECRET = process.env.PAYPAL_CLIENT_SECRET ?? ''
+
+let cachedToken: { token: string; expiresAt: number } | null = null
+
+async function getAccessToken(): Promise<string> {
+  if (cachedToken && Date.now() < cachedToken.expiresAt - 30_000) {
+    return cachedToken.token
+  }
+
+  const res = await fetch(`${BASE_URL}/v1/oauth2/token`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Authorization: `Basic ${Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')}`,
+    },
+    body: 'grant_type=client_credentials',
+  })
+
+  if (!res.ok) throw new Error('PayPal: failed to obtain access token')
+  const json = await res.json() as Record<string, unknown>
+  cachedToken = { token: json.access_token as string, expiresAt: Date.now() + (json.expires_in as number) * 1000 }
+  return cachedToken.token
+}
+
+async function ppFetch(path: string, init?: RequestInit) {
+  const token = await getAccessToken()
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+      ...(init?.headers as Record<string, string> ?? {}),
+    },
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as Record<string, unknown>
+    throw new Error(`PayPal ${path} failed: ${(err?.message as string) ?? res.statusText}`)
+  }
+  return res.json() as Promise<Record<string, unknown>>
+}
+
+export interface PayPalCreateOrderParams {
+  amount: number
+  currency: string
+  orderId: string
+  description: string
+  returnUrl: string
+  cancelUrl: string
+}
+
+export interface PayPalOrderResult {
+  orderId: string
+  approveUrl: string
+  status: string
+}
+
+export async function createOrder(params: PayPalCreateOrderParams): Promise<PayPalOrderResult> {
+  const json = await ppFetch('/v2/checkout/orders', {
+    method: 'POST',
+    body: JSON.stringify({
+      intent: 'CAPTURE',
+      purchase_units: [
+        {
+          reference_id: params.orderId,
+          description: params.description,
+          amount: {
+            currency_code: params.currency,
+            value: (params.amount / 100).toFixed(2),
+          },
+        },
+      ],
+      application_context: {
+        return_url: params.returnUrl,
+        cancel_url: params.cancelUrl,
+        brand_name: 'RentalDriveGo',
+        user_action: 'PAY_NOW',
+      },
+    }),
+  })
+
+  const approveLink = (json.links as Array<{ rel: string; href: string }> | undefined)?.find((l) => l.rel === 'approve')
+  return {
+    orderId: json.id as string,
+    approveUrl: approveLink?.href ?? '',
+    status: json.status as string,
+  }
+}
+
+export async function captureOrder(paypalOrderId: string) {
+  return ppFetch(`/v2/checkout/orders/${paypalOrderId}/capture`, { method: 'POST', body: '{}' })
+}
+
+export async function refundCapture(captureId: string, amount: number, currency: string, note?: string) {
+  return ppFetch(`/v2/payments/captures/${captureId}/refund`, {
+    method: 'POST',
+    body: JSON.stringify({
+      amount: { currency_code: currency, value: (amount / 100).toFixed(2) },
+      note_to_payer: note,
+    }),
+  })
+}
+
+export async function verifyWebhookEvent(headers: Record<string, string | undefined>, rawBody: string) {
+  try {
+    const json = await ppFetch('/v1/notifications/verify-webhook-signature', {
+      method: 'POST',
+      body: JSON.stringify({
+        auth_algo: headers['paypal-auth-algo'],
+        cert_url: headers['paypal-cert-url'],
+        transmission_id: headers['paypal-transmission-id'],
+        transmission_sig: headers['paypal-transmission-sig'],
+        transmission_time: headers['paypal-transmission-time'],
+        webhook_id: process.env.PAYPAL_WEBHOOK_ID ?? '',
+        webhook_event: JSON.parse(rawBody),
+      }),
+    })
+    return (json as Record<string, unknown>).verification_status === 'SUCCESS'
+  } catch {
+    return false
+  }
+}
+
+export function isConfigured(): boolean {
+  return !!(CLIENT_ID && CLIENT_SECRET && CLIENT_ID !== 'your-paypal-client-id')
+}
diff --git a/api/src/services/platformContentService.test.ts b/api/src/services/platformContentService.test.ts
new file mode 100644
index 0000000..5b2ba8e
--- /dev/null
+++ b/api/src/services/platformContentService.test.ts
@@ -0,0 +1,55 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mkdtemp, readFile, rm, writeFile } from 'fs/promises'
+import os from 'os'
+import path from 'path'
+
+let tempDir: string
+let cwdSpy: ReturnType<typeof vi.spyOn>
+
+async function importFreshService() {
+  vi.resetModules()
+  return import('./platformContentService')
+}
+
+describe('platformContentService', () => {
+  beforeEach(async () => {
+    tempDir = await mkdtemp(path.join(os.tmpdir(), 'rdg-platform-content-'))
+    await import('fs/promises').then((fs) => fs.mkdir(path.join(tempDir, 'apps/api'), { recursive: true }))
+    cwdSpy = vi.spyOn(process, 'cwd').mockReturnValue(path.join(tempDir, 'apps/api'))
+  })
+
+  afterEach(async () => {
+    cwdSpy.mockRestore()
+    await rm(tempDir, { recursive: true, force: true })
+    vi.resetModules()
+  })
+
+  it('returns cloned default homepage content when the file does not exist or cannot be parsed', async () => {
+    const service = await importFreshService()
+
+    const first = await service.getMarketplaceHomepageContent()
+    first.en.heroTitle = 'Mutated by test'
+
+    const second = await service.getMarketplaceHomepageContent()
+    expect(second.en.sections).toContain('hero')
+    expect(second.en.heroTitle).not.toBe('Mutated by test')
+  })
+
+  it('saves only the marketplace homepage field while preserving unrelated platform content fields', async () => {
+    const dataPath = path.join(tempDir, 'apps/api/src/data/platform-content.json')
+    await writeFile(dataPath, JSON.stringify({ otherSetting: { keep: true } }), 'utf8').catch(async () => {
+      await import('fs/promises').then((fs) => fs.mkdir(path.dirname(dataPath), { recursive: true }))
+      await writeFile(dataPath, JSON.stringify({ otherSetting: { keep: true } }), 'utf8')
+    })
+
+    const service = await importFreshService()
+    const homepage = await service.getMarketplaceHomepageContent()
+    homepage.en.heroTitle = 'A better marketplace title'
+
+    await expect(service.saveMarketplaceHomepageContent(homepage)).resolves.toBe(homepage)
+
+    const raw = JSON.parse(await readFile(dataPath, 'utf8'))
+    expect(raw.otherSetting).toEqual({ keep: true })
+    expect(raw.marketplaceHomepage.en.heroTitle).toBe('A better marketplace title')
+  })
+})
diff --git a/api/src/services/platformContentService.ts b/api/src/services/platformContentService.ts
new file mode 100644
index 0000000..a086fbc
--- /dev/null
+++ b/api/src/services/platformContentService.ts
@@ -0,0 +1,44 @@
+import { mkdir, readFile, writeFile } from 'fs/promises'
+import path from 'path'
+import { cloneMarketplaceHomepageContent, type MarketplaceHomepageConfig } from '@rentaldrivego/types'
+
+function resolveContentPath() {
+  const cwd = process.cwd()
+  const appScoped = path.resolve(cwd, 'src/data/platform-content.json')
+  const repoScoped = path.resolve(cwd, 'apps/api/src/data/platform-content.json')
+  return cwd.includes('/apps/api') ? appScoped : repoScoped
+}
+
+const platformContentPath = resolveContentPath()
+
+type PlatformContentFile = {
+  marketplaceHomepage?: MarketplaceHomepageConfig
+}
+
+async function readPlatformContentFile(): Promise<PlatformContentFile> {
+  try {
+    const raw = await readFile(platformContentPath, 'utf8')
+    return JSON.parse(raw) as PlatformContentFile
+  } catch {
+    return {}
+  }
+}
+
+async function writePlatformContentFile(content: PlatformContentFile) {
+  await mkdir(path.dirname(platformContentPath), { recursive: true })
+  await writeFile(platformContentPath, JSON.stringify(content, null, 2))
+}
+
+export async function getMarketplaceHomepageContent() {
+  const content = await readPlatformContentFile()
+  return content.marketplaceHomepage ?? cloneMarketplaceHomepageContent()
+}
+
+export async function saveMarketplaceHomepageContent(homepage: MarketplaceHomepageConfig) {
+  const content = await readPlatformContentFile()
+  await writePlatformContentFile({
+    ...content,
+    marketplaceHomepage: homepage,
+  })
+  return homepage
+}
diff --git a/api/src/services/pricingRuleService.test.ts b/api/src/services/pricingRuleService.test.ts
new file mode 100644
index 0000000..2e02432
--- /dev/null
+++ b/api/src/services/pricingRuleService.test.ts
@@ -0,0 +1,121 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    pricingRule: {
+      findMany: vi.fn(),
+    },
+    customer: {
+      findFirstOrThrow: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { applyPricingRules } from './pricingRuleService'
+
+describe('applyPricingRules', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-06-08T12:00:00.000Z'))
+  })
+
+  it('applies percentage, flat-per-day, and flat pricing rules against the rental base amount', async () => {
+    vi.mocked(prisma.customer.findFirstOrThrow).mockResolvedValue({
+      id: 'customer_1',
+      dateOfBirth: new Date('2008-06-09T00:00:00.000Z'),
+      licenseIssuedAt: new Date('2025-06-09T00:00:00.000Z'),
+    } as never)
+    vi.mocked(prisma.pricingRule.findMany).mockResolvedValue([
+      {
+        id: 'young_driver_fee',
+        name: 'Young driver fee',
+        condition: 'AGE_LESS_THAN',
+        conditionValue: 21,
+        adjustmentType: 'PERCENTAGE',
+        adjustmentValue: 10,
+        type: 'SURCHARGE',
+      },
+      {
+        id: 'new_license_fee',
+        name: 'New license fee',
+        condition: 'LICENSE_YEARS_LESS_THAN',
+        conditionValue: 2,
+        adjustmentType: 'FLAT_PER_DAY',
+        adjustmentValue: 50,
+        type: 'SURCHARGE',
+      },
+      {
+        id: 'senior_discount',
+        name: 'Senior discount',
+        condition: 'AGE_GREATER_THAN',
+        conditionValue: 60,
+        adjustmentType: 'FLAT',
+        adjustmentValue: 100,
+        type: 'DISCOUNT',
+      },
+    ] as never)
+
+    const result = await applyPricingRules('company_1', 'customer_1', [
+      { dateOfBirth: new Date('1950-01-01T00:00:00.000Z'), licenseIssuedAt: new Date('1980-01-01T00:00:00.000Z') },
+    ], 200, 3)
+
+    expect(prisma.pricingRule.findMany).toHaveBeenCalledWith({ where: { companyId: 'company_1', isActive: true } })
+    expect(result.applied).toEqual([
+      { ruleId: 'young_driver_fee', name: 'Young driver fee', type: 'SURCHARGE', amount: 60 },
+      { ruleId: 'new_license_fee', name: 'New license fee', type: 'SURCHARGE', amount: 150 },
+      { ruleId: 'senior_discount', name: 'Senior discount', type: 'DISCOUNT', amount: -100 },
+    ])
+    expect(result.total).toBe(110)
+  })
+
+  it('deduplicates a rule when multiple drivers qualify', async () => {
+    vi.mocked(prisma.customer.findFirstOrThrow).mockResolvedValue({
+      id: 'customer_1',
+      dateOfBirth: new Date('2006-01-01T00:00:00.000Z'),
+      licenseIssuedAt: null,
+    } as never)
+    vi.mocked(prisma.pricingRule.findMany).mockResolvedValue([
+      {
+        id: 'young_driver_fee',
+        name: 'Young driver fee',
+        condition: 'AGE_LESS_THAN',
+        conditionValue: 25,
+        adjustmentType: 'FLAT',
+        adjustmentValue: 75,
+        type: 'SURCHARGE',
+      },
+    ] as never)
+
+    const result = await applyPricingRules('company_1', 'customer_1', [
+      { dateOfBirth: new Date('2007-01-01T00:00:00.000Z'), licenseIssuedAt: null },
+    ], 100, 5)
+
+    expect(result.applied).toHaveLength(1)
+    expect(result.total).toBe(75)
+  })
+
+  it('ignores rules when required driver data is missing', async () => {
+    vi.mocked(prisma.customer.findFirstOrThrow).mockResolvedValue({
+      id: 'customer_1',
+      dateOfBirth: null,
+      licenseIssuedAt: null,
+    } as never)
+    vi.mocked(prisma.pricingRule.findMany).mockResolvedValue([
+      {
+        id: 'license_rule',
+        name: 'Experienced license discount',
+        condition: 'LICENSE_YEARS_GREATER_THAN',
+        conditionValue: 10,
+        adjustmentType: 'PERCENTAGE',
+        adjustmentValue: 5,
+        type: 'DISCOUNT',
+      },
+    ] as never)
+
+    const result = await applyPricingRules('company_1', 'customer_1', [], 100, 2)
+
+    expect(result).toEqual({ applied: [], total: 0 })
+  })
+})
diff --git a/api/src/services/pricingRuleService.ts b/api/src/services/pricingRuleService.ts
new file mode 100644
index 0000000..657503f
--- /dev/null
+++ b/api/src/services/pricingRuleService.ts
@@ -0,0 +1,56 @@
+import { prisma } from '../lib/prisma'
+
+interface DriverInfo {
+  dateOfBirth?: Date | null
+  licenseIssuedAt?: Date | null
+}
+
+export async function applyPricingRules(
+  companyId: string,
+  customerId: string,
+  additionalDrivers: DriverInfo[],
+  dailyRate: number,
+  totalDays: number
+): Promise<{ applied: any[]; total: number }> {
+  const rules = await prisma.pricingRule.findMany({ where: { companyId, isActive: true } })
+  const customer = await prisma.customer.findFirstOrThrow({ where: { id: customerId, companyId } })
+  const allDrivers: DriverInfo[] = [customer, ...additionalDrivers]
+  const applied: any[] = []
+  const baseAmount = dailyRate * totalDays
+
+  for (const driver of allDrivers) {
+    for (const rule of rules) {
+      const driverAge = driver.dateOfBirth
+        ? Math.floor((Date.now() - driver.dateOfBirth.getTime()) / (365.25 * 24 * 60 * 60 * 1000))
+        : null
+      const licenseYears = driver.licenseIssuedAt
+        ? Math.floor((Date.now() - driver.licenseIssuedAt.getTime()) / (365.25 * 24 * 60 * 60 * 1000))
+        : null
+
+      let conditionMet = false
+      if (rule.condition === 'AGE_LESS_THAN' && driverAge !== null)         conditionMet = driverAge < rule.conditionValue
+      else if (rule.condition === 'AGE_GREATER_THAN' && driverAge !== null) conditionMet = driverAge > rule.conditionValue
+      else if (rule.condition === 'LICENSE_YEARS_LESS_THAN' && licenseYears !== null)    conditionMet = licenseYears < rule.conditionValue
+      else if (rule.condition === 'LICENSE_YEARS_GREATER_THAN' && licenseYears !== null) conditionMet = licenseYears > rule.conditionValue
+
+      if (!conditionMet) continue
+
+      let amount = 0
+      if (rule.adjustmentType === 'PERCENTAGE')   amount = Math.round(baseAmount * rule.adjustmentValue / 100)
+      else if (rule.adjustmentType === 'FLAT_PER_DAY') amount = rule.adjustmentValue * totalDays
+      else                                        amount = rule.adjustmentValue
+
+      if (rule.type === 'DISCOUNT') amount = -amount
+      applied.push({ ruleId: rule.id, name: rule.name, type: rule.type, amount })
+    }
+  }
+
+  // Deduplicate: each rule applied once even if multiple drivers qualify
+  const deduped = applied.reduce((acc: any[], item) => {
+    if (!acc.find((a) => a.ruleId === item.ruleId)) acc.push(item)
+    return acc
+  }, [])
+
+  const total = deduped.reduce((s: number, r: any) => s + r.amount, 0)
+  return { applied: deduped, total }
+}
diff --git a/api/src/services/teamService.test.ts b/api/src/services/teamService.test.ts
new file mode 100644
index 0000000..ea0fe70
--- /dev/null
+++ b/api/src/services/teamService.test.ts
@@ -0,0 +1,70 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    employee: {
+      findFirst: vi.fn(),
+      create: vi.fn(),
+    },
+    company: {
+      findUniqueOrThrow: vi.fn(),
+    },
+  },
+}))
+
+vi.mock('./notificationService', () => ({
+  sendTransactionalEmail: vi.fn().mockResolvedValue(undefined),
+}))
+
+import crypto from 'crypto'
+import { prisma } from '../lib/prisma'
+import { sendTransactionalEmail } from './notificationService'
+import { inviteEmployee } from './teamService'
+
+describe('teamService inviteEmployee', () => {
+  const originalDashboardUrl = process.env.DASHBOARD_URL
+  const originalPublicDashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.DASHBOARD_URL = 'http://localhost:3000/dashboard'
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = ''
+
+    vi.spyOn(crypto, 'randomBytes').mockReturnValue(Buffer.from('token-123'))
+    vi.spyOn(crypto, 'randomUUID').mockReturnValue('uuid-123')
+
+    vi.mocked(prisma.employee.findFirst).mockResolvedValue(null as any)
+    vi.mocked(prisma.company.findUniqueOrThrow).mockResolvedValue({ name: 'Atlas Cars' } as any)
+    vi.mocked(prisma.employee.create).mockResolvedValue({
+      id: 'emp_1',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      role: 'AGENT',
+      isActive: true,
+    } as any)
+  })
+
+  afterAll(() => {
+    process.env.DASHBOARD_URL = originalDashboardUrl
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = originalPublicDashboardUrl
+    vi.restoreAllMocks()
+  })
+
+  it('builds invite reset links under the dashboard base path', async () => {
+    await inviteEmployee('company_1', 'owner_1', {
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      role: 'AGENT',
+    })
+
+    expect(sendTransactionalEmail).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: 'aya@example.com',
+        html: expect.stringContaining('http://localhost:3000/dashboard/reset-password?token=746f6b656e2d313233'),
+        text: expect.stringContaining('http://localhost:3000/dashboard/reset-password?token=746f6b656e2d313233'),
+      }),
+    )
+  })
+})
diff --git a/api/src/services/teamService.ts b/api/src/services/teamService.ts
new file mode 100644
index 0000000..196f047
--- /dev/null
+++ b/api/src/services/teamService.ts
@@ -0,0 +1,204 @@
+import crypto from 'crypto'
+import { EmployeeRole } from '@rentaldrivego/database'
+import { prisma } from '../lib/prisma'
+import { sendTransactionalEmail } from './notificationService'
+import { coerceNotificationLocale } from './notificationLocalizationService'
+
+const INVITE_TOKEN_TTL_MINUTES = 60 * 24 * 7
+
+export interface InvitePayload {
+  firstName: string
+  lastName: string
+  email: string
+  role: EmployeeRole
+}
+
+export interface TeamMember {
+  id: string
+  clerkUserId: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  role: EmployeeRole
+  isActive: boolean
+  createdAt: Date
+  updatedAt: Date
+  lastActiveAt?: Date | null
+  invitationStatus?: 'accepted' | 'pending' | 'revoked'
+}
+
+function ensureDashboardBasePath(baseUrl: string) {
+  try {
+    const url = new URL(baseUrl)
+    const pathname = url.pathname.replace(/\/$/, '')
+    if (!pathname.endsWith('/dashboard')) url.pathname = `${pathname}/dashboard`
+    return url.toString().replace(/\/$/, '')
+  } catch {
+    const trimmed = baseUrl.replace(/\/$/, '')
+    return trimmed.endsWith('/dashboard') ? trimmed : `${trimmed}/dashboard`
+  }
+}
+
+function buildInviteEmail(
+  resetUrl: string,
+  companyName: string,
+  firstName: string,
+  role: EmployeeRole,
+  locale: ReturnType<typeof coerceNotificationLocale>,
+) {
+  const greetingName = firstName.trim() || 'there'
+
+  if (locale === 'fr') {
+    return {
+      subject: `Vous avez ete invite chez ${companyName}`,
+      html: `
+        <p>Bonjour ${greetingName},</p>
+        <p>Vous avez ete invite a rejoindre ${companyName} sur RentalDriveGo en tant que ${role.toLowerCase()}.</p>
+        <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">Definir votre mot de passe</a></p>
+        <p>Ce lien d'invitation expire dans 7 jours.</p>
+        <p>RentalDriveGo</p>
+      `,
+      text: `Bonjour ${greetingName},\n\nVous avez ete invite a rejoindre ${companyName} sur RentalDriveGo en tant que ${role.toLowerCase()}.\n\nDefinissez votre mot de passe ici : ${resetUrl}\n\nCe lien d'invitation expire dans 7 jours.\n\nRentalDriveGo`,
+    }
+  }
+
+  if (locale === 'ar') {
+    return {
+      subject: `تمت دعوتك إلى ${companyName}`,
+      html: `
+        <div dir="rtl" style="text-align:right">
+          <p>مرحباً ${greetingName}،</p>
+          <p>تمت دعوتك للانضمام إلى ${companyName} على RentalDriveGo بصفتك ${role.toLowerCase()}.</p>
+          <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">عيّن كلمة المرور</a></p>
+          <p>تنتهي صلاحية رابط الدعوة هذا خلال 7 أيام.</p>
+          <p>RentalDriveGo</p>
+        </div>
+      `,
+      text: `مرحباً ${greetingName}،\n\nتمت دعوتك للانضمام إلى ${companyName} على RentalDriveGo بصفتك ${role.toLowerCase()}.\n\nعيّن كلمة المرور هنا: ${resetUrl}\n\nتنتهي صلاحية رابط الدعوة هذا خلال 7 أيام.\n\nRentalDriveGo`,
+    }
+  }
+
+  return {
+    subject: `You have been invited to ${companyName}`,
+    html: `
+      <p>Hi ${greetingName},</p>
+      <p>You were invited to join ${companyName} on RentalDriveGo as a ${role.toLowerCase()}.</p>
+      <p><a href="${resetUrl}" style="background:#1d4ed8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:600;">Set your password</a></p>
+      <p>This invitation link expires in 7 days.</p>
+      <p>RentalDriveGo</p>
+    `,
+    text: `Hi ${greetingName},\n\nYou were invited to join ${companyName} on RentalDriveGo as a ${role.toLowerCase()}.\n\nSet your password here: ${resetUrl}\n\nThis invitation link expires in 7 days.\n\nRentalDriveGo`,
+  }
+}
+
+export async function listEmployees(companyId: string): Promise<TeamMember[]> {
+  const employees = await prisma.employee.findMany({
+    where: { companyId },
+    orderBy: [{ role: 'asc' }, { createdAt: 'asc' }],
+  })
+
+  return employees.map((employee: any) => ({
+    ...employee,
+    lastActiveAt: null,
+    invitationStatus: employee.passwordHash ? 'accepted' : 'pending',
+  }))
+}
+
+export async function inviteEmployee(companyId: string, inviterId: string, payload: InvitePayload) {
+  if (payload.role === 'OWNER') {
+    throw Object.assign(new Error('Cannot invite a member with the OWNER role'), { statusCode: 400, code: 'invalid_role' })
+  }
+
+  const existing = await prisma.employee.findFirst({ where: { companyId, email: payload.email } })
+  if (existing) {
+    throw Object.assign(new Error('An employee with this email already exists in your team'), { statusCode: 409, code: 'employee_already_exists' })
+  }
+
+  const company = await prisma.company.findUniqueOrThrow({
+    where: { id: companyId },
+    include: { brand: { select: { defaultLocale: true, displayName: true } } },
+  })
+  const rawToken = crypto.randomBytes(32).toString('hex')
+  const expiresAt = new Date(Date.now() + INVITE_TOKEN_TTL_MINUTES * 60 * 1000)
+  const locale = coerceNotificationLocale(company.brand?.defaultLocale)
+
+  const employee = await prisma.employee.create({
+    data: {
+      companyId,
+      clerkUserId: `local_member_${crypto.randomUUID()}`,
+      firstName: payload.firstName,
+      lastName: payload.lastName,
+      email: payload.email,
+      role: payload.role,
+      isActive: true,
+      preferredLanguage: locale,
+      passwordResetToken: rawToken,
+      passwordResetExpiresAt: expiresAt,
+    },
+  })
+
+  const dashboardUrl = ensureDashboardBasePath(
+    process.env.DASHBOARD_URL ?? process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+  )
+  const resetUrl = `${dashboardUrl}/reset-password?token=${rawToken}`
+  const message = buildInviteEmail(
+    resetUrl,
+    company.brand?.displayName ?? company.name,
+    payload.firstName,
+    payload.role,
+    locale,
+  )
+
+  await sendTransactionalEmail({
+    to: payload.email,
+    subject: message.subject,
+    html: message.html,
+    text: message.text,
+  })
+
+  return {
+    employee: {
+      ...employee,
+      lastActiveAt: null,
+      invitationStatus: 'pending' as const,
+    },
+    invitationId: employee.id,
+    invitedBy: inviterId,
+  }
+}
+
+export async function updateEmployeeRole(companyId: string, requesterId: string, requesterRole: EmployeeRole, employeeId: string, payload: { role: EmployeeRole }) {
+  const target = await prisma.employee.findFirstOrThrow({ where: { id: employeeId, companyId } })
+
+  if (requesterRole !== 'OWNER') throw Object.assign(new Error('Only the account owner can change team member roles'), { statusCode: 403, code: 'forbidden' })
+  if (target.role === 'OWNER') throw Object.assign(new Error('Cannot change the role of the account owner'), { statusCode: 400 })
+  if (payload.role === 'OWNER') throw Object.assign(new Error('Cannot assign the OWNER role via this endpoint'), { statusCode: 400 })
+  if (target.id === requesterId) throw Object.assign(new Error('You cannot change your own role'), { statusCode: 400 })
+
+  return prisma.employee.update({ where: { id: employeeId }, data: { role: payload.role } })
+}
+
+export async function deactivateEmployee(companyId: string, requesterRole: EmployeeRole, employeeId: string) {
+  if (requesterRole !== 'OWNER') throw Object.assign(new Error('Only the account owner can deactivate team members'), { statusCode: 403 })
+  const target = await prisma.employee.findFirstOrThrow({ where: { id: employeeId, companyId } })
+  if (target.role === 'OWNER') throw Object.assign(new Error('Cannot deactivate the account owner'), { statusCode: 400 })
+
+  return prisma.employee.update({ where: { id: employeeId }, data: { isActive: false } })
+}
+
+export async function reactivateEmployee(companyId: string, requesterRole: EmployeeRole, employeeId: string) {
+  if (requesterRole !== 'OWNER') throw Object.assign(new Error('Only the account owner can reactivate team members'), { statusCode: 403 })
+  await prisma.employee.findFirstOrThrow({ where: { id: employeeId, companyId } })
+
+  return prisma.employee.update({ where: { id: employeeId }, data: { isActive: true } })
+}
+
+export async function removeEmployee(companyId: string, requesterRole: EmployeeRole, employeeId: string) {
+  if (requesterRole !== 'OWNER') throw Object.assign(new Error('Only the account owner can remove team members'), { statusCode: 403 })
+  const target = await prisma.employee.findFirstOrThrow({ where: { id: employeeId, companyId } })
+  if (target.role === 'OWNER') throw Object.assign(new Error('Cannot remove the account owner'), { statusCode: 400 })
+
+  await prisma.employee.delete({ where: { id: employeeId } })
+  return { success: true }
+}
diff --git a/api/src/services/vehicleAvailabilityService.test.ts b/api/src/services/vehicleAvailabilityService.test.ts
new file mode 100644
index 0000000..a3abef1
--- /dev/null
+++ b/api/src/services/vehicleAvailabilityService.test.ts
@@ -0,0 +1,111 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../lib/prisma', () => ({
+  prisma: {
+    vehicle: {
+      findFirstOrThrow: vi.fn(),
+      findUniqueOrThrow: vi.fn(),
+    },
+    reservation: {
+      findMany: vi.fn(),
+    },
+    vehicleCalendarBlock: {
+      findMany: vi.fn(),
+    },
+  },
+}))
+
+import { prisma } from '../lib/prisma'
+import { getVehicleAvailabilitySummary } from './vehicleAvailabilityService'
+
+const range = {
+  startDate: new Date('2026-07-10T10:00:00.000Z'),
+  endDate: new Date('2026-07-12T10:00:00.000Z'),
+}
+
+describe('getVehicleAvailabilitySummary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.setSystemTime(new Date('2026-07-01T00:00:00.000Z'))
+    vi.mocked(prisma.vehicle.findFirstOrThrow).mockResolvedValue({ status: 'AVAILABLE' } as never)
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([] as never)
+    vi.mocked(prisma.vehicleCalendarBlock.findMany).mockResolvedValue([] as never)
+  })
+
+  it('returns unavailable immediately when the vehicle itself is out of service', async () => {
+    vi.mocked(prisma.vehicle.findFirstOrThrow).mockResolvedValue({ status: 'OUT_OF_SERVICE' } as never)
+
+    const result = await getVehicleAvailabilitySummary('vehicle_1', { range })
+
+    expect(result).toEqual({
+      available: false,
+      status: 'UNAVAILABLE',
+      nextAvailableAt: null,
+      blockingReason: 'STATUS',
+    })
+    expect(prisma.reservation.findMany).not.toHaveBeenCalled()
+    expect(prisma.vehicleCalendarBlock.findMany).not.toHaveBeenCalled()
+  })
+
+  it('treats overlapping confirmed reservations as reserved and computes the next free instant', async () => {
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([
+      { startDate: new Date('2026-07-09T10:00:00.000Z'), endDate: new Date('2026-07-11T10:00:00.000Z') },
+      { startDate: new Date('2026-07-11T10:00:00.000Z'), endDate: new Date('2026-07-13T10:00:00.000Z') },
+    ] as never)
+
+    const result = await getVehicleAvailabilitySummary('vehicle_1', { range })
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where: expect.objectContaining({
+        vehicleId: 'vehicle_1',
+        status: { in: ['DRAFT', 'CONFIRMED', 'ACTIVE'] },
+        endDate: { gt: range.startDate },
+      }),
+    }))
+    expect(result).toEqual({
+      available: false,
+      status: 'RESERVED',
+      nextAvailableAt: new Date('2026-07-13T10:00:00.000Z'),
+      blockingReason: 'RESERVATION',
+    })
+  })
+
+  it('can ignore draft reservations for availability checks that only care about firm holds', async () => {
+    await getVehicleAvailabilitySummary('vehicle_1', { range, includeDraftReservations: false })
+
+    expect(prisma.reservation.findMany).toHaveBeenCalledWith(expect.objectContaining({
+      where: expect.objectContaining({ status: { in: ['CONFIRMED', 'ACTIVE'] } }),
+    }))
+  })
+
+  it('prioritizes maintenance over generic blocks and reservations when several sources overlap', async () => {
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([
+      { startDate: new Date('2026-07-10T00:00:00.000Z'), endDate: new Date('2026-07-11T00:00:00.000Z') },
+    ] as never)
+    vi.mocked(prisma.vehicleCalendarBlock.findMany).mockResolvedValue([
+      { startDate: new Date('2026-07-10T00:00:00.000Z'), endDate: new Date('2026-07-12T00:00:00.000Z'), type: 'BLOCK' },
+      { startDate: new Date('2026-07-10T00:00:00.000Z'), endDate: new Date('2026-07-13T00:00:00.000Z'), type: 'MAINTENANCE' },
+    ] as never)
+
+    const result = await getVehicleAvailabilitySummary('vehicle_1', { range })
+
+    expect(result.status).toBe('MAINTENANCE')
+    expect(result.blockingReason).toBe('MAINTENANCE')
+    expect(result.nextAvailableAt).toEqual(new Date('2026-07-13T00:00:00.000Z'))
+  })
+
+  it('returns available when no source overlaps the requested range', async () => {
+    vi.mocked(prisma.reservation.findMany).mockResolvedValue([
+      { startDate: new Date('2026-07-01T00:00:00.000Z'), endDate: new Date('2026-07-02T00:00:00.000Z') },
+    ] as never)
+
+    const result = await getVehicleAvailabilitySummary('vehicle_1', { range })
+
+    expect(result).toEqual({
+      available: true,
+      status: 'AVAILABLE',
+      nextAvailableAt: null,
+      blockingReason: null,
+    })
+  })
+})
diff --git a/api/src/services/vehicleAvailabilityService.ts b/api/src/services/vehicleAvailabilityService.ts
new file mode 100644
index 0000000..bed0043
--- /dev/null
+++ b/api/src/services/vehicleAvailabilityService.ts
@@ -0,0 +1,152 @@
+import { prisma } from '../lib/prisma'
+
+const BLOCKING_RESERVATION_STATUSES = ['DRAFT', 'CONFIRMED', 'ACTIVE'] as const
+
+type AvailabilityStatus = 'AVAILABLE' | 'RESERVED' | 'MAINTENANCE' | 'UNAVAILABLE'
+
+type DateRange = {
+  startDate: Date
+  endDate: Date
+}
+
+type AvailabilitySource = {
+  startDate: Date
+  endDate: Date
+  kind: 'RESERVATION' | 'MAINTENANCE' | 'BLOCK'
+}
+
+export interface VehicleAvailabilitySummary {
+  available: boolean
+  status: AvailabilityStatus
+  nextAvailableAt: Date | null
+  blockingReason: 'RESERVATION' | 'MAINTENANCE' | 'BLOCK' | 'STATUS' | null
+}
+
+function startOfTodayUtc() {
+  const now = new Date()
+  return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()))
+}
+
+function overlaps(range: DateRange, source: AvailabilitySource) {
+  return source.startDate < range.endDate && source.endDate > range.startDate
+}
+
+function getNextAvailableAt(anchor: Date, sources: AvailabilitySource[]) {
+  const sorted = sources
+    .filter((source) => source.endDate > anchor)
+    .sort((a, b) => {
+      const startDelta = a.startDate.getTime() - b.startDate.getTime()
+      if (startDelta !== 0) return startDelta
+      return a.endDate.getTime() - b.endDate.getTime()
+    })
+
+  let candidate = anchor
+  let advanced = false
+
+  for (const source of sorted) {
+    if (source.endDate <= candidate) continue
+    if (source.startDate > candidate) break
+    candidate = new Date(Math.max(candidate.getTime(), source.endDate.getTime()))
+    advanced = true
+  }
+
+  return advanced ? candidate : null
+}
+
+export async function getVehicleAvailabilitySummary(
+  vehicleId: string,
+  {
+    range,
+    includeDraftReservations = true,
+    companyId,
+  }: {
+    range?: DateRange
+    includeDraftReservations?: boolean
+    companyId?: string
+  } = {},
+): Promise<VehicleAvailabilitySummary> {
+  const vehicle = await prisma.vehicle.findFirstOrThrow({
+    where: { id: vehicleId, ...(companyId ? { companyId } : {}) },
+    select: { status: true },
+  })
+
+  if (vehicle.status === 'OUT_OF_SERVICE') {
+    return {
+      available: false,
+      status: 'UNAVAILABLE',
+      nextAvailableAt: null,
+      blockingReason: 'STATUS',
+    }
+  }
+
+  const anchor = range?.startDate ?? startOfTodayUtc()
+  const reservationStatuses = includeDraftReservations
+    ? [...BLOCKING_RESERVATION_STATUSES]
+    : BLOCKING_RESERVATION_STATUSES.filter((status) => status !== 'DRAFT')
+
+  const [reservations, blocks] = await Promise.all([
+    prisma.reservation.findMany({
+      where: {
+        vehicleId,
+        status: { in: reservationStatuses },
+        endDate: { gt: anchor },
+      },
+      select: { startDate: true, endDate: true },
+      orderBy: { startDate: 'asc' },
+    }),
+    prisma.vehicleCalendarBlock.findMany({
+      where: {
+        vehicleId,
+        endDate: { gt: anchor },
+      },
+      select: { startDate: true, endDate: true, type: true },
+      orderBy: { startDate: 'asc' },
+    }),
+  ])
+
+  const sources: AvailabilitySource[] = [
+    ...reservations.map((reservation: any) => ({
+      startDate: reservation.startDate,
+      endDate: reservation.endDate,
+      kind: 'RESERVATION' as const,
+    })),
+    ...blocks.map((block: any) => ({
+      startDate: block.startDate,
+      endDate: block.endDate,
+      kind: block.type === 'MAINTENANCE' ? 'MAINTENANCE' as const : 'BLOCK' as const,
+    })),
+  ]
+
+  const overlappingSources = range ? sources.filter((source) => overlaps(range, source)) : sources.filter((source) => source.startDate <= anchor && source.endDate > anchor)
+  const currentSource = overlappingSources.sort((a, b) => {
+    const priority = { MAINTENANCE: 0, BLOCK: 1, RESERVATION: 2 }
+    return priority[a.kind] - priority[b.kind]
+  })[0]
+
+  if (vehicle.status === 'MAINTENANCE') {
+    return {
+      available: false,
+      status: 'MAINTENANCE',
+      nextAvailableAt: getNextAvailableAt(anchor, sources) ?? null,
+      blockingReason: currentSource?.kind ?? 'STATUS',
+    }
+  }
+
+  if (!currentSource) {
+    return {
+      available: true,
+      status: 'AVAILABLE',
+      nextAvailableAt: null,
+      blockingReason: null,
+    }
+  }
+
+  const nextAvailableAnchor = currentSource.startDate > anchor ? currentSource.startDate : anchor
+
+  return {
+    available: false,
+    status: currentSource.kind === 'RESERVATION' ? 'RESERVED' : currentSource.kind === 'MAINTENANCE' ? 'MAINTENANCE' : 'UNAVAILABLE',
+    nextAvailableAt: getNextAvailableAt(nextAvailableAnchor, sources),
+    blockingReason: currentSource.kind,
+  }
+}
diff --git a/api/src/swagger/openapi.boundary.test.ts b/api/src/swagger/openapi.boundary.test.ts
new file mode 100644
index 0000000..c5dcaa4
--- /dev/null
+++ b/api/src/swagger/openapi.boundary.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { openApiDocument } from './openapi'
+
+describe('OpenAPI document boundary contract', () => {
+  it('exposes security, tags, and schemas for the major API surfaces', () => {
+    expect(openApiDocument.openapi).toBe('3.0.3')
+    expect(openApiDocument.security).toEqual([{ bearerAuth: [] }])
+    expect(openApiDocument.components).toEqual(expect.objectContaining({
+      securitySchemes: expect.objectContaining({ bearerAuth: expect.objectContaining({ scheme: 'bearer' }) }),
+      schemas: expect.objectContaining({
+        CompanySignup: expect.any(Object),
+        EmployeeLogin: expect.any(Object),
+        VehicleInput: expect.any(Object),
+        ReservationCreate: expect.any(Object),
+        PaymentCharge: expect.any(Object),
+      }),
+    }))
+    expect(openApiDocument.tags).toEqual(expect.arrayContaining([
+      expect.objectContaining({ name: 'Marketplace' }),
+      expect.objectContaining({ name: 'Subscriptions' }),
+      expect.objectContaining({ name: 'Admin' }),
+    ]))
+  })
+
+  it('documents public routes as unauthenticated and protected routes with bearer auth inherited', () => {
+    const paths = openApiDocument.paths as Record<string, any>
+
+    expect(paths['/health'].get.security).toEqual([])
+    expect(paths['/auth/company/signup'].post.security).toEqual([])
+    expect(paths['/auth/employee/login'].post.security).toEqual([])
+    expect(paths['/vehicles'].get.security).toBeUndefined()
+    expect(openApiDocument.security).toEqual([{ bearerAuth: [] }])
+  })
+
+  it('keeps request bodies wired to component schema references instead of inline drift', () => {
+    const paths = openApiDocument.paths as Record<string, any>
+
+    expect(paths['/auth/company/signup'].post.requestBody.content['application/json'].schema).toEqual({ $ref: '#/components/schemas/CompanySignup' })
+    expect(paths['/vehicles'].post.requestBody.content['application/json'].schema).toEqual({ $ref: '#/components/schemas/VehicleInput' })
+    expect(paths['/reservations'].post.requestBody.content['application/json'].schema).toEqual({ $ref: '#/components/schemas/ReservationCreate' })
+  })
+})
diff --git a/api/src/swagger/openapi.ts b/api/src/swagger/openapi.ts
new file mode 100644
index 0000000..bae76b2
--- /dev/null
+++ b/api/src/swagger/openapi.ts
@@ -0,0 +1,1151 @@
+import { zodToJsonSchema } from 'zod-to-json-schema'
+
+type JsonObject = Record<string, unknown>
+
+// ── Vehicles ─────────────────────────────────────────────────────────────────
+import {
+  vehicleSchema,
+  calendarBlockSchema,
+  maintenanceLogSchema,
+  publishSchema,
+  statusSchema,
+} from '../modules/vehicles/vehicle.schemas'
+
+// ── Reservations ─────────────────────────────────────────────────────────────
+import {
+  createSchema as reservationCreateSchema,
+  updateSchema as reservationUpdateSchema,
+  checkinSchema,
+  checkoutSchema,
+  extendSchema,
+  cancelSchema,
+  approvalSchema,
+  inspectionSchema,
+  additionalDriverSchema,
+} from '../modules/reservations/reservation.schemas'
+
+// ── Customers ─────────────────────────────────────────────────────────────────
+import {
+  customerSchema,
+  approveLicenseSchema,
+  flagSchema,
+} from '../modules/customers/customer.schemas'
+
+// ── Offers ────────────────────────────────────────────────────────────────────
+import { offerSchema } from '../modules/offers/offer.schemas'
+
+// ── Payments ─────────────────────────────────────────────────────────────────
+import {
+  chargeSchema,
+  manualPaymentSchema,
+  refundSchema,
+} from '../modules/payments/payment.schemas'
+
+// ── Reviews ───────────────────────────────────────────────────────────────────
+import { replySchema } from '../modules/reviews/review.schemas'
+
+// ── Complaints ────────────────────────────────────────────────────────────────
+import {
+  createSchema as complaintCreateSchema,
+  updateSchema as complaintUpdateSchema,
+} from '../modules/complaints/complaint.schemas'
+
+// ── Auth ──────────────────────────────────────────────────────────────────────
+import { companySignupSchema } from '../modules/auth/auth.company.schemas'
+import {
+  employeeLoginSchema,
+  employeeForgotPasswordSchema,
+  employeeResetPasswordSchema,
+  employeeLanguageSchema,
+} from '../modules/auth/auth.employee.schemas'
+import { renterUpdateSchema, renterFcmTokenSchema } from '../modules/auth/auth.renter.schemas'
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+function s(schema: unknown): JsonObject {
+  const { $schema, ...rest } = zodToJsonSchema(
+    schema as Parameters<typeof zodToJsonSchema>[0],
+    { target: 'openApi3' },
+  ) as JsonObject
+  return rest
+}
+
+const idPath = (name = 'id'): JsonObject => ({
+  name,
+  in: 'path' as const,
+  required: true,
+  schema: { type: 'string' },
+})
+
+const pagingParams: JsonObject[] = [
+  { name: 'page',     in: 'query', schema: { type: 'integer', default: 1 } },
+  { name: 'pageSize', in: 'query', schema: { type: 'integer', default: 20 } },
+]
+
+const jsonBody = (ref: string): JsonObject => ({
+  required: true,
+  content: { 'application/json': { schema: { $ref: ref } } },
+})
+
+const ok: JsonObject = { description: 'Success' }
+const err4: JsonObject = { description: 'Validation error', content: { 'application/json': { schema: { type: 'object', properties: { error: { type: 'string' } } } } } }
+const err401: JsonObject = { description: 'Unauthorized' }
+const err404: JsonObject = { description: 'Not found' }
+
+export const openApiDocument: JsonObject = {
+  openapi: '3.0.3',
+  info: {
+    title: 'RentalDriveGo API',
+    description: 'REST API for the RentalDriveGo car rental management platform.\n\n**Auth:** Most browser endpoints use HttpOnly session cookies issued by `/auth/employee/login`, `/admin/auth/login`, or renter auth. Trusted server/mobile contexts may still use Bearer JWTs where documented.',
+    version: '1.0.0',
+    contact: { name: 'RentalDriveGo', email: 'support@rentaldrivego.com' },
+  },
+  servers: [{ url: '/api/v1', description: 'v1' }],
+  security: [{ bearerAuth: [] }],
+  tags: [
+    { name: 'Health',          description: 'Service health' },
+    { name: 'Auth — Company',  description: 'Company account registration' },
+    { name: 'Auth — Employee', description: 'Employee (dashboard) authentication' },
+    { name: 'Auth — Renter',   description: 'Renter (mobile) authentication' },
+    { name: 'Vehicles',        description: 'Fleet management' },
+    { name: 'Reservations',    description: 'Booking lifecycle' },
+    { name: 'Customers',       description: 'Customer profiles & documents' },
+    { name: 'Offers',          description: 'Discounts & promo codes' },
+    { name: 'Payments',        description: 'Charges, manual payments, refunds' },
+    { name: 'Reviews',         description: 'Customer reviews' },
+    { name: 'Complaints',      description: 'Complaint tracking' },
+    { name: 'Analytics',       description: 'Dashboard & reports' },
+    { name: 'Notifications',   description: 'In-app notifications' },
+    { name: 'Companies',       description: 'Company profile & settings' },
+    { name: 'Team',            description: 'Employee management' },
+    { name: 'Subscriptions',   description: 'Plan management & billing' },
+    { name: 'Marketplace',     description: 'Public booking portal' },
+    { name: 'Site',            description: 'White-label site API' },
+    { name: 'Admin',           description: 'Platform administration' },
+  ],
+  components: {
+    securitySchemes: {
+      bearerAuth: { type: 'http', scheme: 'bearer', bearerFormat: 'JWT' },
+    },
+    schemas: {
+      // ── Vehicles ────────────────────────────────────────────────
+      VehicleInput:       s(vehicleSchema),
+      CalendarBlock:      s(calendarBlockSchema),
+      MaintenanceLog:     s(maintenanceLogSchema),
+      VehiclePublish:     s(publishSchema),
+      VehicleStatus:      s(statusSchema),
+      // ── Reservations ────────────────────────────────────────────
+      ReservationCreate:  s(reservationCreateSchema),
+      ReservationUpdate:  s(reservationUpdateSchema),
+      AdditionalDriver:   s(additionalDriverSchema),
+      Inspection:         s(inspectionSchema),
+      ReservationCheckin: s(checkinSchema),
+      ReservationCheckout:s(checkoutSchema),
+      ReservationExtend:  s(extendSchema),
+      ReservationCancel:  s(cancelSchema),
+      ReservationApproval:s(approvalSchema),
+      // ── Customers ───────────────────────────────────────────────
+      CustomerInput:      s(customerSchema),
+      ApproveLicense:     s(approveLicenseSchema),
+      FlagCustomer:       s(flagSchema),
+      // ── Offers ──────────────────────────────────────────────────
+      OfferInput:         s(offerSchema),
+      // ── Payments ────────────────────────────────────────────────
+      PaymentCharge:      s(chargeSchema),
+      ManualPayment:      s(manualPaymentSchema),
+      Refund:             s(refundSchema),
+      // ── Reviews ─────────────────────────────────────────────────
+      ReviewReply:        s(replySchema),
+      // ── Complaints ──────────────────────────────────────────────
+      ComplaintCreate:    s(complaintCreateSchema),
+      ComplaintUpdate:    s(complaintUpdateSchema),
+      // ── Auth ────────────────────────────────────────────────────
+      CompanySignup:      s(companySignupSchema),
+      EmployeeLogin:      s(employeeLoginSchema),
+      EmployeeForgotPassword: s(employeeForgotPasswordSchema),
+      EmployeeResetPassword:  s(employeeResetPasswordSchema),
+      EmployeeLanguage:   s(employeeLanguageSchema),
+      RenterUpdate:       s(renterUpdateSchema),
+      RenterFcmToken:     s(renterFcmTokenSchema),
+    },
+  },
+  paths: {
+    // ════════════════════════════════════════════════════════════════
+    // HEALTH  (no /api/v1 prefix — served directly from app root)
+    // ════════════════════════════════════════════════════════════════
+    '/health': {
+      get: {
+        tags: ['Health'],
+        summary: 'Health check',
+        security: [],
+        servers: [{ url: '/' }],
+        responses: {
+          '200': { description: 'OK', content: { 'application/json': { schema: { type: 'object', properties: { status: { type: 'string', example: 'ok' }, version: { type: 'string' }, timestamp: { type: 'string', format: 'date-time' } } } } } },
+        },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // AUTH — COMPANY
+    // ════════════════════════════════════════════════════════════════
+    '/auth/company/signup': {
+      post: {
+        tags: ['Auth — Company'],
+        summary: 'Register a new company',
+        security: [],
+        requestBody: jsonBody('#/components/schemas/CompanySignup'),
+        responses: { '201': ok, '400': err4, '409': { description: 'Email already in use' } },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // AUTH — EMPLOYEE
+    // ════════════════════════════════════════════════════════════════
+    '/auth/employee/login': {
+      post: {
+        tags: ['Auth — Employee'],
+        summary: 'Login',
+        security: [],
+        requestBody: jsonBody('#/components/schemas/EmployeeLogin'),
+        responses: {
+          '200': { description: 'Token + employee object', content: { 'application/json': { schema: { type: 'object', properties: { token: { type: 'string' }, employee: { type: 'object' } } } } } },
+          '401': err401,
+        },
+      },
+    },
+    '/auth/employee/forgot-password': {
+      post: {
+        tags: ['Auth — Employee'],
+        summary: 'Request password-reset email',
+        security: [],
+        requestBody: jsonBody('#/components/schemas/EmployeeForgotPassword'),
+        responses: { '200': ok },
+      },
+    },
+    '/auth/employee/reset-password': {
+      post: {
+        tags: ['Auth — Employee'],
+        summary: 'Reset password with token',
+        security: [],
+        requestBody: jsonBody('#/components/schemas/EmployeeResetPassword'),
+        responses: { '200': ok, '400': err4 },
+      },
+    },
+    '/auth/employee/me': {
+      get: {
+        tags: ['Auth — Employee'],
+        summary: 'Current employee profile',
+        responses: { '200': ok, '401': err401 },
+      },
+    },
+    '/auth/employee/me/language': {
+      patch: {
+        tags: ['Auth — Employee'],
+        summary: 'Update preferred language',
+        requestBody: jsonBody('#/components/schemas/EmployeeLanguage'),
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // AUTH — RENTER
+    // ════════════════════════════════════════════════════════════════
+    '/auth/renter/me': {
+      get: {
+        tags: ['Auth — Renter'],
+        summary: 'Current renter profile',
+        responses: { '200': ok, '401': err401 },
+      },
+      patch: {
+        tags: ['Auth — Renter'],
+        summary: 'Update renter profile',
+        requestBody: jsonBody('#/components/schemas/RenterUpdate'),
+        responses: { '200': ok },
+      },
+    },
+    '/auth/renter/me/fcm-token': {
+      post: {
+        tags: ['Auth — Renter'],
+        summary: 'Register FCM push token',
+        requestBody: jsonBody('#/components/schemas/RenterFcmToken'),
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // VEHICLES
+    // ════════════════════════════════════════════════════════════════
+    '/vehicles': {
+      get: {
+        tags: ['Vehicles'],
+        summary: 'List vehicles',
+        parameters: [
+          { name: 'status',    in: 'query', schema: { type: 'string', enum: ['AVAILABLE','RESERVED','READY','RENTED','RETURNED','NEEDS_CLEANING','MAINTENANCE','DAMAGE_REVIEW','OUT_OF_SERVICE'] } },
+          { name: 'category',  in: 'query', schema: { type: 'string', enum: ['ECONOMY','COMPACT','MIDSIZE','FULLSIZE','SUV','LUXURY','VAN','TRUCK'] } },
+          { name: 'published', in: 'query', schema: { type: 'string', enum: ['true','false'] } },
+          ...pagingParams,
+        ],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Vehicles'],
+        summary: 'Create vehicle',
+        requestBody: jsonBody('#/components/schemas/VehicleInput'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/vehicles/{id}': {
+      get: {
+        tags: ['Vehicles'],
+        summary: 'Get vehicle',
+        parameters: [idPath()],
+        responses: { '200': ok, '404': err404 },
+      },
+      patch: {
+        tags: ['Vehicles'],
+        summary: 'Update vehicle',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/VehicleInput'),
+        responses: { '200': ok, '404': err404 },
+      },
+      delete: {
+        tags: ['Vehicles'],
+        summary: 'Delete vehicle',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/status': {
+      patch: {
+        tags: ['Vehicles'],
+        summary: 'Set vehicle status',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/VehicleStatus'),
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/publish': {
+      patch: {
+        tags: ['Vehicles'],
+        summary: 'Publish / unpublish vehicle',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/VehiclePublish'),
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/photos': {
+      post: {
+        tags: ['Vehicles'],
+        summary: 'Upload photos (multipart, max 10)',
+        parameters: [idPath()],
+        requestBody: { required: true, content: { 'multipart/form-data': { schema: { type: 'object', properties: { photos: { type: 'array', items: { type: 'string', format: 'binary' } } } } } } },
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/photos/{idx}': {
+      delete: {
+        tags: ['Vehicles'],
+        summary: 'Delete photo by index',
+        parameters: [idPath(), { name: 'idx', in: 'path', required: true, schema: { type: 'integer' } }],
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/availability': {
+      get: {
+        tags: ['Vehicles'],
+        summary: 'Check availability for a date range',
+        parameters: [
+          idPath(),
+          { name: 'startDate', in: 'query', required: true, schema: { type: 'string', format: 'date-time' } },
+          { name: 'endDate',   in: 'query', required: true, schema: { type: 'string', format: 'date-time' } },
+        ],
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/calendar': {
+      get: {
+        tags: ['Vehicles'],
+        summary: 'Get monthly calendar events',
+        parameters: [
+          idPath(),
+          { name: 'year',  in: 'query', required: true, schema: { type: 'integer' } },
+          { name: 'month', in: 'query', required: true, schema: { type: 'integer', minimum: 1, maximum: 12 } },
+        ],
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/calendar/blocks': {
+      post: {
+        tags: ['Vehicles'],
+        summary: 'Create calendar block',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/CalendarBlock'),
+        responses: { '201': ok },
+      },
+    },
+    '/vehicles/{id}/calendar/blocks/{blockId}': {
+      delete: {
+        tags: ['Vehicles'],
+        summary: 'Delete calendar block',
+        parameters: [idPath(), idPath('blockId')],
+        responses: { '200': ok },
+      },
+    },
+    '/vehicles/{id}/maintenance': {
+      get: {
+        tags: ['Vehicles'],
+        summary: 'List maintenance logs',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Vehicles'],
+        summary: 'Add maintenance log',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/MaintenanceLog'),
+        responses: { '201': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // RESERVATIONS
+    // ════════════════════════════════════════════════════════════════
+    '/reservations': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'List reservations',
+        parameters: [
+          { name: 'status',    in: 'query', schema: { type: 'string' } },
+          { name: 'vehicleId', in: 'query', schema: { type: 'string' } },
+          { name: 'source',    in: 'query', schema: { type: 'string' } },
+          { name: 'startDate', in: 'query', schema: { type: 'string' } },
+          { name: 'endDate',   in: 'query', schema: { type: 'string' } },
+          ...pagingParams,
+        ],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Reservations'],
+        summary: 'Create reservation',
+        requestBody: jsonBody('#/components/schemas/ReservationCreate'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/reservations/{id}': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'Get reservation',
+        parameters: [idPath()],
+        responses: { '200': ok, '404': err404 },
+      },
+      patch: {
+        tags: ['Reservations'],
+        summary: 'Update reservation',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationUpdate'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/confirm': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Confirm reservation',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/approve': {
+      patch: {
+        tags: ['Reservations'],
+        summary: 'Approve or reject pending reservation',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationApproval'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/checkin': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Check in',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationCheckin'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/checkout': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Check out',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationCheckout'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/close': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Close reservation',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/extend': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Extend reservation end date',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationExtend'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/cancel': {
+      post: {
+        tags: ['Reservations'],
+        summary: 'Cancel reservation',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReservationCancel'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/contract': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'Download rental contract (PDF)',
+        parameters: [idPath()],
+        responses: { '200': { description: 'PDF file', content: { 'application/pdf': {} } } },
+      },
+    },
+    '/reservations/{id}/billing': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'Get billing summary',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/inspections': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'List inspections',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/inspections/{type}': {
+      put: {
+        tags: ['Reservations'],
+        summary: 'Save inspection (CHECKIN or CHECKOUT)',
+        parameters: [
+          idPath(),
+          { name: 'type', in: 'path', required: true, schema: { type: 'string', enum: ['CHECKIN', 'CHECKOUT'] } },
+        ],
+        requestBody: jsonBody('#/components/schemas/Inspection'),
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/photos': {
+      get: {
+        tags: ['Reservations'],
+        summary: 'List reservation photos',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Reservations'],
+        summary: 'Upload reservation photo',
+        parameters: [idPath()],
+        requestBody: { required: true, content: { 'multipart/form-data': { schema: { type: 'object', properties: { photo: { type: 'string', format: 'binary' } } } } } },
+        responses: { '201': ok },
+      },
+    },
+    '/reservations/{id}/photos/{photoId}': {
+      delete: {
+        tags: ['Reservations'],
+        summary: 'Delete reservation photo',
+        parameters: [idPath(), idPath('photoId')],
+        responses: { '200': ok },
+      },
+    },
+    '/reservations/{id}/additional-drivers/{driverId}/approval': {
+      patch: {
+        tags: ['Reservations'],
+        summary: 'Approve/reject additional driver',
+        parameters: [idPath(), idPath('driverId')],
+        requestBody: jsonBody('#/components/schemas/ReservationApproval'),
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // CUSTOMERS
+    // ════════════════════════════════════════════════════════════════
+    '/customers': {
+      get: {
+        tags: ['Customers'],
+        summary: 'List customers',
+        parameters: [
+          { name: 'q',       in: 'query', schema: { type: 'string' } },
+          { name: 'flagged', in: 'query', schema: { type: 'string', enum: ['true', 'false'] } },
+          ...pagingParams,
+        ],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Customers'],
+        summary: 'Create customer',
+        requestBody: jsonBody('#/components/schemas/CustomerInput'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/customers/{id}': {
+      get: {
+        tags: ['Customers'],
+        summary: 'Get customer',
+        parameters: [idPath()],
+        responses: { '200': ok, '404': err404 },
+      },
+      patch: {
+        tags: ['Customers'],
+        summary: 'Update customer',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/CustomerInput'),
+        responses: { '200': ok },
+      },
+    },
+    '/customers/{id}/flag': {
+      post: {
+        tags: ['Customers'],
+        summary: 'Flag customer',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/FlagCustomer'),
+        responses: { '200': ok },
+      },
+      delete: {
+        tags: ['Customers'],
+        summary: 'Unflag customer',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/customers/{id}/validate-license': {
+      post: {
+        tags: ['Customers'],
+        summary: 'Validate customer driving license',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/customers/{id}/license-image': {
+      post: {
+        tags: ['Customers'],
+        summary: 'Upload license image',
+        parameters: [idPath()],
+        requestBody: { required: true, content: { 'multipart/form-data': { schema: { type: 'object', properties: { file: { type: 'string', format: 'binary' } } } } } },
+        responses: { '200': ok },
+      },
+    },
+    '/customers/{id}/approve-license': {
+      post: {
+        tags: ['Customers'],
+        summary: 'Approve or deny license',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ApproveLicense'),
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // OFFERS
+    // ════════════════════════════════════════════════════════════════
+    '/offers': {
+      get: {
+        tags: ['Offers'],
+        summary: 'List offers',
+        parameters: [
+          { name: 'active', in: 'query', schema: { type: 'string', enum: ['true', 'false'] } },
+          { name: 'public', in: 'query', schema: { type: 'string', enum: ['true', 'false'] } },
+        ],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Offers'],
+        summary: 'Create offer',
+        requestBody: jsonBody('#/components/schemas/OfferInput'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/offers/{id}': {
+      get: {
+        tags: ['Offers'],
+        summary: 'Get offer',
+        parameters: [idPath()],
+        responses: { '200': ok, '404': err404 },
+      },
+      patch: {
+        tags: ['Offers'],
+        summary: 'Update offer',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/OfferInput'),
+        responses: { '200': ok },
+      },
+      delete: {
+        tags: ['Offers'],
+        summary: 'Delete offer',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/offers/{id}/activate': {
+      post: { tags: ['Offers'], summary: 'Activate offer',   parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/offers/{id}/deactivate': {
+      post: { tags: ['Offers'], summary: 'Deactivate offer', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/offers/{id}/stats': {
+      get: { tags: ['Offers'], summary: 'Offer usage stats', parameters: [idPath()], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // PAYMENTS
+    // ════════════════════════════════════════════════════════════════
+    '/payments/company': {
+      get: {
+        tags: ['Payments'],
+        summary: 'List all company payments',
+        responses: { '200': ok },
+      },
+    },
+    '/payments/reservations/{id}': {
+      get: {
+        tags: ['Payments'],
+        summary: 'Get payments for a reservation',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/payments/reservations/{id}/charge': {
+      post: {
+        tags: ['Payments'],
+        summary: 'Initiate online payment (AmanPay / PayPal)',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/PaymentCharge'),
+        responses: { '200': ok, '400': err4 },
+      },
+    },
+    '/payments/reservations/{id}/capture-paypal': {
+      post: {
+        tags: ['Payments'],
+        summary: 'Capture PayPal order',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+    '/payments/reservations/{id}/manual': {
+      post: {
+        tags: ['Payments'],
+        summary: 'Record manual payment',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ManualPayment'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/payments/reservations/{reservationId}/payments/{paymentId}/refund': {
+      post: {
+        tags: ['Payments'],
+        summary: 'Refund a payment',
+        parameters: [idPath('reservationId'), idPath('paymentId')],
+        requestBody: jsonBody('#/components/schemas/Refund'),
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // REVIEWS
+    // ════════════════════════════════════════════════════════════════
+    '/reviews': {
+      get: {
+        tags: ['Reviews'],
+        summary: 'List reviews',
+        parameters: [
+          { name: 'rating', in: 'query', schema: { type: 'integer', minimum: 1, maximum: 5 } },
+          ...pagingParams,
+        ],
+        responses: { '200': ok },
+      },
+    },
+    '/reviews/stats': {
+      get: { tags: ['Reviews'], summary: 'Review statistics', responses: { '200': ok } },
+    },
+    '/reviews/{id}': {
+      get: { tags: ['Reviews'], summary: 'Get review', parameters: [idPath()], responses: { '200': ok, '404': err404 } },
+    },
+    '/reviews/{id}/reply': {
+      patch: {
+        tags: ['Reviews'],
+        summary: 'Reply to review',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ReviewReply'),
+        responses: { '200': ok },
+      },
+    },
+    '/reviews/{id}/remind': {
+      post: { tags: ['Reviews'], summary: 'Send review reminder', parameters: [idPath()], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // COMPLAINTS
+    // ════════════════════════════════════════════════════════════════
+    '/complaints': {
+      get: {
+        tags: ['Complaints'],
+        summary: 'List complaints',
+        parameters: [
+          { name: 'status',   in: 'query', schema: { type: 'string' } },
+          { name: 'severity', in: 'query', schema: { type: 'string' } },
+          { name: 'category', in: 'query', schema: { type: 'string' } },
+          ...pagingParams,
+        ],
+        responses: { '200': ok },
+      },
+      post: {
+        tags: ['Complaints'],
+        summary: 'Create complaint',
+        requestBody: jsonBody('#/components/schemas/ComplaintCreate'),
+        responses: { '201': ok, '400': err4 },
+      },
+    },
+    '/complaints/{id}': {
+      get: {
+        tags: ['Complaints'],
+        summary: 'Get complaint',
+        parameters: [idPath()],
+        responses: { '200': ok, '404': err404 },
+      },
+      patch: {
+        tags: ['Complaints'],
+        summary: 'Update complaint',
+        parameters: [idPath()],
+        requestBody: jsonBody('#/components/schemas/ComplaintUpdate'),
+        responses: { '200': ok },
+      },
+      delete: {
+        tags: ['Complaints'],
+        summary: 'Delete complaint',
+        parameters: [idPath()],
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // ANALYTICS
+    // ════════════════════════════════════════════════════════════════
+    '/analytics/summary': {
+      get: { tags: ['Analytics'], summary: 'Quick summary stats', responses: { '200': ok } },
+    },
+    '/analytics/dashboard': {
+      get: { tags: ['Analytics'], summary: 'Full dashboard analytics', responses: { '200': ok } },
+    },
+    '/analytics/sources': {
+      get: { tags: ['Analytics'], summary: 'Reservation source breakdown', responses: { '200': ok } },
+    },
+    '/analytics/report': {
+      get: {
+        tags: ['Analytics'],
+        summary: 'Detailed report (Manager+)',
+        parameters: [
+          { name: 'startDate', in: 'query', schema: { type: 'string', format: 'date' } },
+          { name: 'endDate',   in: 'query', schema: { type: 'string', format: 'date' } },
+        ],
+        responses: { '200': ok },
+      },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // NOTIFICATIONS
+    // ════════════════════════════════════════════════════════════════
+    '/notifications/company': {
+      get: { tags: ['Notifications'], summary: 'Company notifications', responses: { '200': ok } },
+    },
+    '/notifications/unread-count': {
+      get: { tags: ['Notifications'], summary: 'Unread count', responses: { '200': ok } },
+    },
+    '/notifications/company/{id}/read': {
+      post: { tags: ['Notifications'], summary: 'Mark notification as read', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/notifications/company/read-all': {
+      post: { tags: ['Notifications'], summary: 'Mark all notifications as read', responses: { '200': ok } },
+    },
+    '/notifications/company/preferences': {
+      get:   { tags: ['Notifications'], summary: 'Get notification preferences',    responses: { '200': ok } },
+      patch: { tags: ['Notifications'], summary: 'Update notification preferences', responses: { '200': ok } },
+    },
+    '/notifications/history': {
+      get: { tags: ['Notifications'], summary: 'Notification history', responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // COMPANIES
+    // ════════════════════════════════════════════════════════════════
+    '/companies/me': {
+      get:   { tags: ['Companies'], summary: 'Current company profile',   responses: { '200': ok } },
+      patch: { tags: ['Companies'], summary: 'Update company profile (Owner)', responses: { '200': ok } },
+    },
+    '/companies/me/brand': {
+      get:   { tags: ['Companies'], summary: 'Brand settings',        responses: { '200': ok } },
+      patch: { tags: ['Companies'], summary: 'Update brand settings (Owner)', responses: { '200': ok } },
+    },
+    '/companies/me/brand/logo': {
+      post: { tags: ['Companies'], summary: 'Upload brand logo', requestBody: { required: true, content: { 'multipart/form-data': { schema: { type: 'object', properties: { file: { type: 'string', format: 'binary' } } } } } }, responses: { '200': ok } },
+    },
+    '/companies/me/brand/hero': {
+      post: { tags: ['Companies'], summary: 'Upload brand hero image', requestBody: { required: true, content: { 'multipart/form-data': { schema: { type: 'object', properties: { file: { type: 'string', format: 'binary' } } } } } }, responses: { '200': ok } },
+    },
+    '/companies/me/brand/subdomain/check': {
+      post: { tags: ['Companies'], summary: 'Check subdomain availability', responses: { '200': ok } },
+    },
+    '/companies/me/brand/custom-domain': {
+      post:   { tags: ['Companies'], summary: 'Set custom domain',    responses: { '200': ok } },
+      delete: { tags: ['Companies'], summary: 'Remove custom domain', responses: { '200': ok } },
+    },
+    '/companies/me/brand/custom-domain/status': {
+      get: { tags: ['Companies'], summary: 'Custom domain DNS status', responses: { '200': ok } },
+    },
+    '/companies/me/contract-settings': {
+      get:   { tags: ['Companies'], summary: 'Contract settings',        responses: { '200': ok } },
+      patch: { tags: ['Companies'], summary: 'Update contract settings', responses: { '200': ok } },
+    },
+    '/companies/me/insurance-policies': {
+      get:  { tags: ['Companies'], summary: 'List insurance policies',  responses: { '200': ok } },
+      post: { tags: ['Companies'], summary: 'Create insurance policy',  responses: { '201': ok } },
+    },
+    '/companies/me/insurance-policies/{id}': {
+      patch:  { tags: ['Companies'], summary: 'Update insurance policy', parameters: [idPath()], responses: { '200': ok } },
+      delete: { tags: ['Companies'], summary: 'Delete insurance policy', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/companies/me/pricing-rules': {
+      get:  { tags: ['Companies'], summary: 'List pricing rules',  responses: { '200': ok } },
+      post: { tags: ['Companies'], summary: 'Create pricing rule', responses: { '201': ok } },
+    },
+    '/companies/me/pricing-rules/{id}': {
+      patch: { tags: ['Companies'], summary: 'Update pricing rule', parameters: [idPath()], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // TEAM
+    // ════════════════════════════════════════════════════════════════
+    '/team': {
+      get:  { tags: ['Team'], summary: 'List team members', responses: { '200': ok } },
+    },
+    '/team/stats': {
+      get:  { tags: ['Team'], summary: 'Team statistics', responses: { '200': ok } },
+    },
+    '/team/invite': {
+      post: { tags: ['Team'], summary: 'Invite member (Owner)', responses: { '201': ok } },
+    },
+    '/team/{id}/role': {
+      patch: { tags: ['Team'], summary: 'Update member role (Owner)', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/team/{id}/deactivate': {
+      post: { tags: ['Team'], summary: 'Deactivate member (Owner)', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/team/{id}/reactivate': {
+      post: { tags: ['Team'], summary: 'Reactivate member (Owner)', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/team/{id}': {
+      delete: { tags: ['Team'], summary: 'Remove member (Owner)', parameters: [idPath()], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // SUBSCRIPTIONS
+    // ════════════════════════════════════════════════════════════════
+    '/subscriptions/plans': {
+      get: { tags: ['Subscriptions'], summary: 'List available plans', security: [], responses: { '200': ok } },
+    },
+    '/subscriptions/features': {
+      get: { tags: ['Subscriptions'], summary: 'Plan feature matrix', security: [], responses: { '200': ok } },
+    },
+    '/subscriptions/me': {
+      get: { tags: ['Subscriptions'], summary: 'Current subscription', responses: { '200': ok } },
+    },
+    '/subscriptions/invoices': {
+      get: { tags: ['Subscriptions'], summary: 'Billing invoices', responses: { '200': ok } },
+    },
+    '/subscriptions/events': {
+      get: { tags: ['Subscriptions'], summary: 'Subscription events', responses: { '200': ok } },
+    },
+    '/subscriptions/entitlement': {
+      get: { tags: ['Subscriptions'], summary: 'Feature entitlements', responses: { '200': ok } },
+    },
+    '/subscriptions/trial': {
+      post: { tags: ['Subscriptions'], summary: 'Start trial (Owner)', responses: { '200': ok } },
+    },
+    '/subscriptions/checkout': {
+      post: { tags: ['Subscriptions'], summary: 'Checkout new subscription (Owner)', responses: { '200': ok } },
+    },
+    '/subscriptions/change-plan': {
+      post: { tags: ['Subscriptions'], summary: 'Change plan (Owner)', responses: { '200': ok } },
+    },
+    '/subscriptions/cancel': {
+      post: { tags: ['Subscriptions'], summary: 'Cancel subscription (Owner)', responses: { '200': ok } },
+    },
+    '/subscriptions/reactivate': {
+      post: { tags: ['Subscriptions'], summary: 'Reactivate subscription (Owner)', responses: { '200': ok } },
+    },
+    '/subscriptions/resume': {
+      post: { tags: ['Subscriptions'], summary: 'Resume subscription (Owner)', responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // MARKETPLACE  (public — no auth required)
+    // ════════════════════════════════════════════════════════════════
+    '/marketplace/cities': {
+      get: { tags: ['Marketplace'], summary: 'Cities with active companies', security: [], responses: { '200': ok } },
+    },
+    '/marketplace/companies': {
+      get: { tags: ['Marketplace'], summary: 'List companies', security: [], responses: { '200': ok } },
+    },
+    '/marketplace/offers': {
+      get: { tags: ['Marketplace'], summary: 'Public offers', security: [], responses: { '200': ok } },
+    },
+    '/marketplace/search': {
+      get: {
+        tags: ['Marketplace'],
+        summary: 'Search available vehicles',
+        security: [],
+        parameters: [
+          { name: 'city',      in: 'query', schema: { type: 'string' } },
+          { name: 'startDate', in: 'query', schema: { type: 'string', format: 'date-time' } },
+          { name: 'endDate',   in: 'query', schema: { type: 'string', format: 'date-time' } },
+          { name: 'category',  in: 'query', schema: { type: 'string' } },
+        ],
+        responses: { '200': ok },
+      },
+    },
+    '/marketplace/reservations': {
+      post: { tags: ['Marketplace'], summary: 'Create marketplace booking', security: [], responses: { '201': ok } },
+    },
+    '/marketplace/offers/{code}/validate': {
+      post: { tags: ['Marketplace'], summary: 'Validate promo code', security: [], parameters: [{ name: 'code', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/marketplace/review/{token}': {
+      get:  { tags: ['Marketplace'], summary: 'Get review form by token',    security: [], parameters: [{ name: 'token', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+      post: { tags: ['Marketplace'], summary: 'Submit review',               security: [], parameters: [{ name: 'token', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/marketplace/{slug}': {
+      get: { tags: ['Marketplace'], summary: 'Company public page', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/marketplace/{slug}/reviews': {
+      get: { tags: ['Marketplace'], summary: 'Company reviews', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/marketplace/{slug}/vehicles': {
+      get: { tags: ['Marketplace'], summary: 'Company vehicles', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/marketplace/{slug}/vehicles/{id}': {
+      get: { tags: ['Marketplace'], summary: 'Vehicle details', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }, idPath()], responses: { '200': ok } },
+    },
+    '/marketplace/{slug}/offers': {
+      get: { tags: ['Marketplace'], summary: 'Company offers', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // SITE  (white-label)
+    // ════════════════════════════════════════════════════════════════
+    '/site/platform/homepage': {
+      get: { tags: ['Site'], summary: 'Platform homepage content',      security: [], responses: { '200': ok } },
+    },
+    '/site/platform/pricing': {
+      get: { tags: ['Site'], summary: 'Platform pricing page content',  security: [], responses: { '200': ok } },
+    },
+    '/site/{slug}/brand': {
+      get: { tags: ['Site'], summary: 'Brand config for white-label site', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/vehicles': {
+      get: { tags: ['Site'], summary: 'Vehicles for white-label site', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/vehicles/{id}': {
+      get: { tags: ['Site'], summary: 'Vehicle detail', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }, idPath()], responses: { '200': ok } },
+    },
+    '/site/{slug}/offers': {
+      get: { tags: ['Site'], summary: 'Offers for white-label site', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/booking-options': {
+      get: { tags: ['Site'], summary: 'Booking options', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/availability': {
+      post: { tags: ['Site'], summary: 'Check availability', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/book/validate-code': {
+      post: { tags: ['Site'], summary: 'Validate promo code', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+    '/site/{slug}/book': {
+      post: { tags: ['Site'], summary: 'Create booking', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '201': ok } },
+    },
+    '/site/{slug}/booking/{id}': {
+      get: { tags: ['Site'], summary: 'Get booking status', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }, idPath()], responses: { '200': ok } },
+    },
+    '/site/{slug}/booking/{id}/pay': {
+      post: { tags: ['Site'], summary: 'Pay booking', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }, idPath()], responses: { '200': ok } },
+    },
+    '/site/{slug}/contact': {
+      post: { tags: ['Site'], summary: 'Contact form', security: [], parameters: [{ name: 'slug', in: 'path', required: true, schema: { type: 'string' } }], responses: { '200': ok } },
+    },
+
+    // ════════════════════════════════════════════════════════════════
+    // ADMIN
+    // ════════════════════════════════════════════════════════════════
+    '/admin/auth/login': {
+      post: { tags: ['Admin'], summary: 'Admin login', security: [], responses: { '200': ok } },
+    },
+    '/admin/auth/forgot-password': {
+      post: { tags: ['Admin'], summary: 'Admin forgot password', security: [], responses: { '200': ok } },
+    },
+    '/admin/auth/reset-password': {
+      post: { tags: ['Admin'], summary: 'Admin reset password', security: [], responses: { '200': ok } },
+    },
+    '/admin/auth/me': {
+      get: { tags: ['Admin'], summary: 'Current admin profile', responses: { '200': ok } },
+    },
+    '/admin/auth/2fa/setup': {
+      post: { tags: ['Admin'], summary: 'Setup 2FA', responses: { '200': ok } },
+    },
+    '/admin/auth/2fa/verify': {
+      post: { tags: ['Admin'], summary: 'Verify 2FA code', responses: { '200': ok } },
+    },
+    '/admin/companies': {
+      get: { tags: ['Admin'], summary: 'List all companies', responses: { '200': ok } },
+    },
+    '/admin/companies/{id}': {
+      get:    { tags: ['Admin'], summary: 'Get company',    parameters: [idPath()], responses: { '200': ok } },
+      patch:  { tags: ['Admin'], summary: 'Update company', parameters: [idPath()], responses: { '200': ok } },
+      delete: { tags: ['Admin'], summary: 'Delete company (Admin)', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/admin/companies/{id}/status': {
+      patch: { tags: ['Admin'], summary: 'Update company status', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/admin/companies/{id}/impersonate': {
+      post: { tags: ['Admin'], summary: 'Impersonate company (Admin)', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/admin/renters': {
+      get: { tags: ['Admin'], summary: 'List renters', responses: { '200': ok } },
+    },
+    '/admin/renters/{id}/block': {
+      post: { tags: ['Admin'], summary: 'Block renter', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/admin/renters/{id}/unblock': {
+      post: { tags: ['Admin'], summary: 'Unblock renter', parameters: [idPath()], responses: { '200': ok } },
+    },
+    '/admin/metrics': {
+      get: { tags: ['Admin'], summary: 'Platform metrics (Finance)', responses: { '200': ok } },
+    },
+    '/admin/notifications': {
+      get: { tags: ['Admin'], summary: 'Admin notifications', responses: { '200': ok } },
+    },
+    '/admin/audit-logs': {
+      get: { tags: ['Admin'], summary: 'Audit logs (Admin)', responses: { '200': ok } },
+    },
+    '/admin/admins': {
+      get:  { tags: ['Admin'], summary: 'List admins (Super Admin)',   responses: { '200': ok } },
+      post: { tags: ['Admin'], summary: 'Create admin (Super Admin)', responses: { '201': ok } },
+    },
+  },
+}
diff --git a/api/src/tests/api/admin-billing.api.test.ts b/api/src/tests/api/admin-billing.api.test.ts
new file mode 100644
index 0000000..f0d0018
--- /dev/null
+++ b/api/src/tests/api/admin-billing.api.test.ts
@@ -0,0 +1,128 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({ default: { verify: vi.fn() } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    adminUser: { findUnique: vi.fn() },
+  },
+}))
+vi.mock('../../modules/admin/admin.service', () => ({
+  getBilling: vi.fn(),
+  getInvoicePdf: vi.fn(),
+  getBillingAccountDetail: vi.fn(),
+  getCompanyInvoices: vi.fn(),
+  updateBillingAccount: vi.fn(),
+  setDunningPaused: vi.fn(),
+  createBillingInvoice: vi.fn(),
+  finalizeBillingInvoice: vi.fn(),
+  payBillingInvoice: vi.fn(),
+  retryBillingInvoicePayment: vi.fn(),
+  voidBillingInvoice: vi.fn(),
+  markBillingInvoiceUncollectible: vi.fn(),
+  issueBillingCreditNote: vi.fn(),
+  issueBillingRefund: vi.fn(),
+}))
+
+import request from 'supertest'
+import jwt from 'jsonwebtoken'
+import { createApp } from '../../app'
+import { prisma } from '../../lib/prisma'
+import * as adminService from '../../modules/admin/admin.service'
+
+const app = createApp()
+
+function admin(role = 'FINANCE') {
+  return { id: 'admin_1', email: 'finance@example.test', role, isActive: true, totpEnabled: true }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  process.env.JWT_SECRET = 'test-secret'
+  vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as never)
+  vi.mocked(prisma.adminUser.findUnique).mockResolvedValue(admin() as never)
+})
+
+describe('admin billing API contracts', () => {
+  it('coerces list filters and requires finance access', async () => {
+    vi.mocked(adminService.getBilling).mockResolvedValue({ data: [], total: 0, stats: {} } as never)
+
+    const res = await request(app)
+      .get('/api/v1/admin/billing?q=atlas&status=PAST_DUE&plan=PRO&page=2&pageSize=25')
+      .set('Authorization', 'Bearer admin-token')
+
+    expect(res.status).toBe(200)
+    expect(adminService.getBilling).toHaveBeenCalledWith({
+      q: 'atlas',
+      status: 'PAST_DUE',
+      plan: 'PRO',
+      page: 2,
+      pageSize: 25,
+    })
+  })
+
+  it('rejects oversized billing pagination before service execution', async () => {
+    const res = await request(app)
+      .get('/api/v1/admin/billing?pageSize=500')
+      .set('Authorization', 'Bearer admin-token')
+
+    expect(res.status).toBe(400)
+    expect(adminService.getBilling).not.toHaveBeenCalled()
+  })
+
+  it('streams invoice PDFs with content headers from the service boundary', async () => {
+    vi.mocked(adminService.getInvoicePdf).mockResolvedValue({
+      invoiceNumber: 'INV-2026-000001',
+      pdfBuffer: Buffer.from('%PDF fake'),
+    } as never)
+
+    const res = await request(app)
+      .get('/api/v1/admin/billing/invoices/invoice_1/pdf')
+      .set('Authorization', 'Bearer admin-token')
+
+    expect(res.status).toBe(200)
+    expect(res.header['content-type']).toContain('application/pdf')
+    expect(res.header['content-disposition']).toContain('INV-2026-000001.pdf')
+    expect(adminService.getInvoicePdf).toHaveBeenCalledWith('invoice_1')
+  })
+
+  it('passes parsed account updates with admin identity and request ip', async () => {
+    vi.mocked(adminService.updateBillingAccount).mockResolvedValue({ id: 'billing_account_1' } as never)
+
+    const res = await request(app)
+      .patch('/api/v1/admin/billing/accounts/billing_account_1')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ billingEmail: 'billing@example.test', invoiceTerms: 'NET_30', netTermsDays: 30 })
+
+    expect(res.status).toBe(200)
+    expect(adminService.updateBillingAccount).toHaveBeenCalledWith(
+      'billing_account_1',
+      { billingEmail: 'billing@example.test', invoiceTerms: 'NET_30', netTermsDays: 30 },
+      'admin_1',
+      expect.any(String),
+    )
+  })
+
+  it('rejects malformed draft invoice payloads before invoice creation', async () => {
+    const res = await request(app)
+      .post('/api/v1/admin/billing/accounts/billing_account_1/invoices')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ invoiceType: 'MANUAL', lineItems: [] })
+
+    expect(res.status).toBe(400)
+    expect(adminService.createBillingInvoice).not.toHaveBeenCalled()
+  })
+
+  it('requires finance role for billing mutations', async () => {
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue(admin('VIEWER') as never)
+
+    const res = await request(app)
+      .post('/api/v1/admin/billing/invoices/invoice_1/finalize')
+      .set('Authorization', 'Bearer admin-token')
+
+    expect(res.status).toBe(403)
+    expect(adminService.finalizeBillingInvoice).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/admin-menu-boundaries.api.test.ts b/api/src/tests/api/admin-menu-boundaries.api.test.ts
new file mode 100644
index 0000000..8fb7b78
--- /dev/null
+++ b/api/src/tests/api/admin-menu-boundaries.api.test.ts
@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({ default: { verify: vi.fn() } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: { adminUser: { findUnique: vi.fn() } },
+}))
+vi.mock('../../modules/menu/menu.service', () => ({
+  listMenuItems: vi.fn(),
+  createMenuItem: vi.fn(),
+  getMenuItem: vi.fn(),
+  updateMenuItem: vi.fn(),
+  setMenuItemStatus: vi.fn(),
+  deleteMenuItem: vi.fn(),
+  assignMenuItemToPlans: vi.fn(),
+  removeMenuItemFromPlan: vi.fn(),
+  assignMenuItemToCompanies: vi.fn(),
+  removeMenuItemFromCompany: vi.fn(),
+  previewCompanyMenu: vi.fn(),
+  listMenuAuditLogs: vi.fn(),
+}))
+
+import request from 'supertest'
+import jwt from 'jsonwebtoken'
+import { createApp } from '../../app'
+import { prisma } from '../../lib/prisma'
+import * as menuService from '../../modules/menu/menu.service'
+
+const app = createApp()
+
+function admin(role = 'ADMIN') {
+  return { id: 'admin_1', email: 'admin@example.test', role, isActive: true, totpEnabled: true }
+}
+
+describe('admin menu API contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as never)
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue(admin() as never)
+  })
+
+  it('rejects menu item creation with blank labels before service execution', async () => {
+    const res = await request(app)
+      .post('/api/v1/admin/menu-items')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ label: '   ', itemType: 'INTERNAL_PAGE', routeOrUrl: '/fleet' })
+
+    expect(res.status).toBe(400)
+    expect(menuService.createMenuItem).not.toHaveBeenCalled()
+  })
+
+  it('passes normalized menu item creation payload with admin actor', async () => {
+    vi.mocked(menuService.createMenuItem).mockResolvedValue({ id: 'item_1', label: 'Fleet' } as never)
+
+    const res = await request(app)
+      .post('/api/v1/admin/menu-items')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ label: ' Fleet ', itemType: 'INTERNAL_PAGE', routeOrUrl: '/fleet', roles: ['MANAGER'] })
+
+    expect(res.status).toBe(201)
+    expect(menuService.createMenuItem).toHaveBeenCalledWith(
+      expect.objectContaining({ label: 'Fleet', itemType: 'INTERNAL_PAGE', routeOrUrl: '/fleet', roles: ['MANAGER'] }),
+      expect.objectContaining({ id: 'admin_1' }),
+    )
+  })
+
+  it('rejects invalid menu status bodies before mutation', async () => {
+    const res = await request(app)
+      .patch('/api/v1/admin/menu-items/item_1/status')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ isActive: 'false' })
+
+    expect(res.status).toBe(400)
+    expect(menuService.setMenuItemStatus).not.toHaveBeenCalled()
+  })
+
+  it('requires admin privileges for menu mutations while support can preview', async () => {
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue(admin('SUPPORT') as never)
+    vi.mocked(menuService.previewCompanyMenu).mockResolvedValue({ items: [], finalMenu: [] } as never)
+
+    const createRes = await request(app)
+      .post('/api/v1/admin/menu-items')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ label: 'Fleet', itemType: 'INTERNAL_PAGE', routeOrUrl: '/fleet' })
+    expect(createRes.status).toBe(403)
+
+    const previewRes = await request(app)
+      .post('/api/v1/admin/menu-preview')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ companyId: 'company_1', role: 'MANAGER' })
+    expect(previewRes.status).toBe(200)
+    expect(menuService.previewCompanyMenu).toHaveBeenCalledWith({ companyId: 'company_1', role: 'MANAGER' })
+  })
+
+  it('coerces audit-log pagination defaults and caps oversized limits', async () => {
+    vi.mocked(menuService.listMenuAuditLogs).mockResolvedValue({ data: [], total: 0, page: 1, pageSize: 20, totalPages: 0 } as never)
+
+    const defaultRes = await request(app)
+      .get('/api/v1/admin/menu-audit-logs')
+      .set('Authorization', 'Bearer admin-token')
+    expect(defaultRes.status).toBe(200)
+    expect(menuService.listMenuAuditLogs).toHaveBeenCalledWith({ page: 1, pageSize: 20 })
+
+    const oversizedRes = await request(app)
+      .get('/api/v1/admin/menu-audit-logs?pageSize=500')
+      .set('Authorization', 'Bearer admin-token')
+    expect(oversizedRes.status).toBe(400)
+  })
+})
diff --git a/api/src/tests/api/api-foundation.api.test.ts b/api/src/tests/api/api-foundation.api.test.ts
new file mode 100644
index 0000000..c447264
--- /dev/null
+++ b/api/src/tests/api/api-foundation.api.test.ts
@@ -0,0 +1,103 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {},
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: {
+    on: vi.fn(),
+    get: vi.fn(),
+    set: vi.fn(),
+    del: vi.fn(),
+    quit: vi.fn(),
+  },
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('API foundation integration', () => {
+  it('GET /health returns a stable health contract', async () => {
+    const res = await request(app).get('/health')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      status: 'ok',
+      version: '1.0.0',
+      timestamp: expect.any(String),
+    })
+    expect(new Date(res.body.timestamp).toString()).not.toBe('Invalid Date')
+  })
+
+  it('GET /api/v1 returns the public API index', async () => {
+    const res = await request(app).get('/api/v1')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: '/api/v1',
+      health: '/health',
+      docs: '/api/v1/docs',
+      openApi: '/api/v1/openapi.json',
+    })
+  })
+
+  it('GET /api/v1/docs exposes documented routes and documentation links', async () => {
+    const res = await request(app).get('/api/v1/docs')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual(expect.objectContaining({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: '/api/v1',
+      swaggerUi: '/docs',
+      openApi: '/api/v1/openapi.json',
+      routes: expect.any(Array),
+    }))
+    expect(res.body.routes).toEqual(expect.arrayContaining([
+      expect.objectContaining({ method: 'GET', path: '/health' }),
+      expect.objectContaining({ method: 'GET', path: '/api/v1/vehicles' }),
+      expect.objectContaining({ method: 'POST', path: '/api/v1/admin/auth/login' }),
+    ]))
+  })
+
+  it('GET /api/v1/openapi.json returns the OpenAPI document', async () => {
+    const res = await request(app).get('/api/v1/openapi.json')
+
+    expect(res.status).toBe(200)
+    expect(res.body.openapi).toMatch(/^3\./)
+    expect(res.body.info).toEqual(expect.objectContaining({ title: expect.any(String), version: expect.any(String) }))
+    expect(res.body.paths).toHaveProperty('/health')
+  })
+
+  it('allows dashboard credentialed preflights to employee auth routes', async () => {
+    const res = await request(app)
+      .options('/api/v1/auth/employee/menu')
+      .set('Origin', 'http://localhost:3001')
+      .set('Access-Control-Request-Method', 'GET')
+      .set('Access-Control-Request-Headers', 'content-type')
+
+    expect(res.status).toBe(204)
+    expect(res.headers['access-control-allow-origin']).toBe('http://localhost:3001')
+    expect(res.headers['access-control-allow-credentials']).toBe('true')
+  })
+
+  it('blocks legacy anonymous access to customer identity document storage paths', async () => {
+    const res = await request(app).get('/storage/companies/company_1/customers/customer_1/passport.jpg')
+
+    expect(res.status).toBe(404)
+    expect(res.text).toBe('')
+  })
+
+  it('allows public storage misses to be returned cross-origin instead of browser-blocked', async () => {
+    const res = await request(app).get('/storage/vehicles/missing-photo.jpg')
+
+    expect(res.status).toBe(404)
+    expect(res.headers['cross-origin-resource-policy']).toBe('cross-origin')
+  })
+})
diff --git a/api/src/tests/api/auth-boundaries.api.test.ts b/api/src/tests/api/auth-boundaries.api.test.ts
new file mode 100644
index 0000000..9f0296f
--- /dev/null
+++ b/api/src/tests/api/auth-boundaries.api.test.ts
@@ -0,0 +1,162 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = 'renter_1'
+    next()
+  },
+  optionalRenterAuth: (_req: any, _res: any, next: any) => next(),
+}))
+
+vi.mock('../../modules/auth/auth.company.service', () => ({
+  signup: vi.fn(),
+  completeSignupDisabled: vi.fn(() => {
+    const err = new Error('gone') as Error & { statusCode?: number; code?: string }
+    err.statusCode = 410
+    err.code = 'disabled'
+    throw err
+  }),
+  verifyEmailDisabled: vi.fn(() => {
+    const err = new Error('gone') as Error & { statusCode?: number; code?: string }
+    err.statusCode = 410
+    err.code = 'disabled'
+    throw err
+  }),
+}))
+
+vi.mock('../../modules/auth/auth.renter.service', () => ({
+  signupDisabled: vi.fn(() => {
+    const err = new Error('renter disabled') as Error & { statusCode?: number; code?: string }
+    err.statusCode = 403
+    err.code = 'renter_signup_disabled'
+    throw err
+  }),
+  loginDisabled: vi.fn(() => {
+    const err = new Error('login disabled') as Error & { statusCode?: number; code?: string }
+    err.statusCode = 403
+    err.code = 'renter_login_disabled'
+    throw err
+  }),
+  getMe: vi.fn(),
+  updateMe: vi.fn(),
+  updateFcmToken: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as companyService from '../../modules/auth/auth.company.service'
+import * as renterService from '../../modules/auth/auth.renter.service'
+
+const app = createApp()
+
+const signupPayload = {
+  firstName: 'Aya',
+  lastName: 'Benali',
+  email: 'owner@example.com',
+  password: 'super-secret',
+  companyName: 'Atlas Cars',
+  legalName: 'Atlas Cars SARL',
+  legalForm: 'SARL',
+  registrationNumber: 'REG123',
+  iceNumber: 'ICE123',
+  taxId: 'TAX123',
+  operatingLicenseNumber: 'LIC123',
+  operatingLicenseIssuedAt: '2026-01-01',
+  operatingLicenseIssuedBy: 'Transport Authority',
+  streetAddress: '1 Fleet Street',
+  city: 'Casablanca',
+  country: 'Morocco',
+  zipCode: '20000',
+  companyPhone: '+212600000000',
+  companyEmail: 'contact@example.com',
+  yearsActive: '5',
+  responsibleName: 'Omar Alaoui',
+  responsibleRole: 'Manager',
+  responsibleIdentityNumber: 'ID123',
+  responsiblePhone: '+212611111111',
+  responsibleEmail: 'responsible@example.com',
+  preferredLanguage: 'fr',
+  plan: 'STARTER',
+  billingPeriod: 'MONTHLY',
+  currency: 'MAD',
+  paymentProvider: 'PAYPAL',
+}
+
+describe('auth API boundaries', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(companyService.signup).mockResolvedValue({ companyId: 'company_1', nextStep: 'workspace_created' } as never)
+    vi.mocked(renterService.getMe).mockResolvedValue({ id: 'renter_1', savedCompanies: [] } as never)
+    vi.mocked(renterService.updateMe).mockResolvedValue({ id: 'renter_1', firstName: 'Nora' } as never)
+    vi.mocked(renterService.updateFcmToken).mockResolvedValue({ success: true } as never)
+  })
+
+  it('POST /auth/company/signup validates the full onboarding contract and returns 201', async () => {
+    const res = await request(app).post('/api/v1/auth/company/signup').send(signupPayload)
+
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual({ data: { companyId: 'company_1', nextStep: 'workspace_created' } })
+    expect(companyService.signup).toHaveBeenCalledWith(expect.objectContaining({
+      companyName: 'Atlas Cars',
+      currency: 'MAD',
+      preferredLanguage: 'fr',
+      paymentProvider: 'PAYPAL',
+    }))
+  })
+
+  it('POST /auth/company/signup rejects malformed onboarding payloads before service execution', async () => {
+    const res = await request(app).post('/api/v1/auth/company/signup').send({ ...signupPayload, companyEmail: 'not-email' })
+
+    expect(res.status).toBe(400)
+    expect(res.body.error).toBe('validation_error')
+    expect(companyService.signup).not.toHaveBeenCalled()
+  })
+
+  it('preserves removed company auth compatibility endpoints as explicit 410 responses', async () => {
+    const complete = await request(app).post('/api/v1/auth/company/complete-signup').send({})
+    const verify = await request(app).post('/api/v1/auth/company/verify-email').send({})
+
+    expect(complete.status).toBe(410)
+    expect(complete.body.error).toBe('disabled')
+    expect(verify.status).toBe(410)
+    expect(verify.body.error).toBe('disabled')
+  })
+
+  it('keeps public renter signup and login disabled at the router boundary', async () => {
+    const signup = await request(app).post('/api/v1/auth/renter/signup').send({})
+    const login = await request(app).post('/api/v1/auth/renter/login').send({})
+
+    expect(signup.status).toBe(403)
+    expect(signup.body.error).toBe('renter_signup_disabled')
+    expect(login.status).toBe(403)
+    expect(login.body.error).toBe('renter_login_disabled')
+  })
+
+  it('GET /auth/renter/me uses authenticated renter identity', async () => {
+    const res = await request(app).get('/api/v1/auth/renter/me')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { id: 'renter_1', savedCompanies: [] } })
+    expect(renterService.getMe).toHaveBeenCalledWith('renter_1')
+  })
+
+  it('PATCH /auth/renter/me validates renter profile updates', async () => {
+    const res = await request(app).patch('/api/v1/auth/renter/me').send({ firstName: '  Nora  ', preferredCurrency: 'MAD' })
+
+    expect(res.status).toBe(200)
+    expect(renterService.updateMe).toHaveBeenCalledWith('renter_1', { firstName: 'Nora', preferredCurrency: 'MAD' })
+  })
+
+  it('POST /auth/renter/me/fcm-token updates only the token value for the authenticated renter', async () => {
+    const res = await request(app).post('/api/v1/auth/renter/me/fcm-token').send({ fcmToken: 'token_123' })
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { success: true } })
+    expect(renterService.updateFcmToken).toHaveBeenCalledWith('renter_1', 'token_123')
+  })
+})
diff --git a/api/src/tests/api/auth-middleware.api.test.ts b/api/src/tests/api/auth-middleware.api.test.ts
new file mode 100644
index 0000000..e2c5ae6
--- /dev/null
+++ b/api/src/tests/api/auth-middleware.api.test.ts
@@ -0,0 +1,150 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({
+  default: { verify: vi.fn() },
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn() },
+    company: { findUnique: vi.fn() },
+    adminUser: { findUnique: vi.fn() },
+    renter: { findUnique: vi.fn() },
+  },
+}))
+
+vi.mock('../../modules/vehicles/vehicle.service', () => ({
+  listVehicles: vi.fn(),
+  createVehicle: vi.fn(),
+}))
+
+vi.mock('../../modules/admin/admin.service', () => ({
+  listCompanies: vi.fn(),
+  login: vi.fn(),
+  forgotPassword: vi.fn(),
+  resetPassword: vi.fn(),
+}))
+
+import request from 'supertest'
+import jwt from 'jsonwebtoken'
+import { createApp } from '../../app'
+import { prisma } from '../../lib/prisma'
+import * as vehicleService from '../../modules/vehicles/vehicle.service'
+import * as adminService from '../../modules/admin/admin.service'
+
+const app = createApp()
+
+function activeEmployee(role: string) {
+  return {
+    id: 'emp_1',
+    role,
+    isActive: true,
+    companyId: 'company_1',
+    company: { id: 'company_1', status: 'ACTIVE' },
+  }
+}
+
+describe('auth middleware API boundaries', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    process.env.JWT_SECRET = 'test-secret'
+    process.env.NEXT_PUBLIC_DASHBOARD_URL = 'https://dashboard.example.test'
+  })
+
+  it('rejects protected company routes before service execution when no token is present', async () => {
+    const res = await request(app).get('/api/v1/vehicles')
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'unauthenticated', message: 'Authentication required', statusCode: 401 })
+    expect(vehicleService.listVehicles).not.toHaveBeenCalled()
+  })
+
+  it('rejects employee-protected routes when a renter token is used', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'renter_1', type: 'renter' } as never)
+
+    const res = await request(app).get('/api/v1/vehicles').set('Authorization', 'Bearer renter-token')
+
+    expect(res.status).toBe(401)
+    expect(res.body).toMatchObject({ error: 'invalid_token', message: 'Invalid or expired session token', statusCode: 401 })
+    expect(prisma.employee.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('rejects inactive employees before tenant and subscription checks', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as never)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue({ id: 'emp_1', isActive: false } as never)
+
+    const res = await request(app).get('/api/v1/vehicles').set('Authorization', 'Bearer employee-token')
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'unauthenticated', message: 'Employee account not found or inactive', statusCode: 401 })
+    expect(prisma.company.findUnique).not.toHaveBeenCalled()
+  })
+
+  it('blocks suspended tenants at the subscription boundary', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as never)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(activeEmployee('OWNER') as never)
+    vi.mocked(prisma.company.findUnique).mockResolvedValue({ id: 'company_1', status: 'SUSPENDED' } as never)
+
+    const res = await request(app).get('/api/v1/vehicles').set('Authorization', 'Bearer employee-token')
+
+    expect(res.status).toBe(402)
+    expect(res.body).toEqual(expect.objectContaining({
+      error: 'subscription_suspended',
+      billingUrl: 'https://dashboard.example.test/billing',
+    }))
+    expect(vehicleService.listVehicles).not.toHaveBeenCalled()
+  })
+
+  it('blocks lower company roles from manager-only mutations', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as never)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(activeEmployee('AGENT') as never)
+    vi.mocked(prisma.company.findUnique).mockResolvedValue({ id: 'company_1', status: 'ACTIVE' } as never)
+
+    const res = await request(app).post('/api/v1/vehicles').set('Authorization', 'Bearer employee-token').send({})
+
+    expect(res.status).toBe(403)
+    expect(res.body).toEqual(expect.objectContaining({
+      error: 'forbidden',
+      requiredRole: 'MANAGER',
+      yourRole: 'AGENT',
+    }))
+    expect(vehicleService.createVehicle).not.toHaveBeenCalled()
+  })
+
+  it('allows authenticated active tenants through to read-only company handlers', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'emp_1', type: 'employee' } as never)
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(activeEmployee('AGENT') as never)
+    vi.mocked(prisma.company.findUnique).mockResolvedValue({ id: 'company_1', status: 'ACTIVE' } as never)
+    vi.mocked(vehicleService.listVehicles).mockResolvedValue({ data: [{ id: 'vehicle_1' }], pagination: { page: 1 } } as never)
+
+    const res = await request(app).get('/api/v1/vehicles').set('Authorization', 'Bearer employee-token')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: [{ id: 'vehicle_1' }], pagination: { page: 1 } })
+    expect(vehicleService.listVehicles).toHaveBeenCalledWith('company_1', { page: 1, pageSize: 20 })
+  })
+
+  it('rejects protected admin routes before admin service execution when no admin token is present', async () => {
+    const res = await request(app).get('/api/v1/admin/companies')
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'unauthenticated', message: 'Admin authentication required', statusCode: 401 })
+    expect(adminService.listCompanies).not.toHaveBeenCalled()
+  })
+
+  it('allows valid admin tokens through protected admin read routes', async () => {
+    vi.mocked(jwt.verify).mockReturnValue({ sub: 'admin_1', type: 'admin' } as never)
+    vi.mocked(prisma.adminUser.findUnique).mockResolvedValue({ id: 'admin_1', isActive: true, role: 'SUPPORT', totpEnabled: true } as never)
+    vi.mocked(adminService.listCompanies).mockResolvedValue({ data: [{ id: 'company_1' }], pagination: { page: 1 } } as never)
+
+    const res = await request(app).get('/api/v1/admin/companies').set('Authorization', 'Bearer admin-token')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { data: [{ id: 'company_1' }], pagination: { page: 1 } } })
+    expect(adminService.listCompanies).toHaveBeenCalledWith({ page: 1, pageSize: 20 })
+  })
+})
diff --git a/api/src/tests/api/company-configuration.api.test.ts b/api/src/tests/api/company-configuration.api.test.ts
new file mode 100644
index 0000000..bfc00b2
--- /dev/null
+++ b/api/src/tests/api/company-configuration.api.test.ts
@@ -0,0 +1,149 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+  requireCompanyDocumentAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    req.company = { id: 'company_1', name: 'Atlas Cars', slug: 'atlas' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({
+  requireSubscription: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../middleware/requireRole', () => ({
+  requireRole: () => (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../modules/companies/company.service', () => ({
+  getCompany: vi.fn(),
+  updateCompany: vi.fn(),
+  getBrand: vi.fn(),
+  updateBrand: vi.fn(),
+  uploadLogo: vi.fn(),
+  uploadHeroImage: vi.fn(),
+  checkSubdomainAvailability: vi.fn(),
+  setCustomDomain: vi.fn(),
+  getCustomDomainStatus: vi.fn(),
+  removeCustomDomain: vi.fn(),
+  getContractSettings: vi.fn(),
+  updateContractSettings: vi.fn(),
+  getInsurancePolicies: vi.fn(),
+  createInsurancePolicy: vi.fn(),
+  updateInsurancePolicy: vi.fn(),
+  deleteInsurancePolicy: vi.fn(),
+  getPricingRules: vi.fn(),
+  createPricingRule: vi.fn(),
+  updatePricingRule: vi.fn(),
+  deletePricingRule: vi.fn(),
+  getAccountingSettings: vi.fn(),
+  updateAccountingSettings: vi.fn(),
+  getApiKey: vi.fn(),
+  regenerateApiKey: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as companyService from '../../modules/companies/company.service'
+
+const app = createApp()
+
+describe('company configuration API contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(companyService.updateBrand).mockResolvedValue({ id: 'brand_1', displayName: 'Atlas Cars' } as never)
+    vi.mocked(companyService.setCustomDomain).mockResolvedValue({ id: 'brand_1', customDomain: 'cars.example.com' } as never)
+    vi.mocked(companyService.createInsurancePolicy).mockResolvedValue({ id: 'policy_1' } as never)
+    vi.mocked(companyService.createPricingRule).mockResolvedValue({ id: 'rule_1' } as never)
+    vi.mocked(companyService.updateAccountingSettings).mockResolvedValue({ id: 'accounting_1' } as never)
+  })
+
+  it('rejects invalid public brand email before service execution', async () => {
+    const res = await request(app).patch('/api/v1/companies/me/brand').send({ publicEmail: 'not-an-email' })
+
+    expect(res.status).toBe(400)
+    expect(companyService.updateBrand).not.toHaveBeenCalled()
+  })
+
+  it('passes valid brand settings with tenant identity and company defaults', async () => {
+    const res = await request(app).patch('/api/v1/companies/me/brand').send({
+      displayName: 'Atlas Premium Cars',
+      defaultCurrency: 'MAD',
+      paypalEmail: 'billing@example.test',
+    })
+
+    expect(res.status).toBe(200)
+    expect(companyService.updateBrand).toHaveBeenCalledWith('company_1', {
+      displayName: 'Atlas Premium Cars',
+      defaultCurrency: 'MAD',
+      paypalEmail: 'billing@example.test',
+    }, 'Atlas Cars', 'atlas')
+  })
+
+  it('rejects invalid custom domains before normalization or persistence', async () => {
+    const res = await request(app).post('/api/v1/companies/me/brand/custom-domain').send({ customDomain: 'ab' })
+
+    expect(res.status).toBe(400)
+    expect(companyService.setCustomDomain).not.toHaveBeenCalled()
+  })
+
+  it('passes custom domain requests with tenant defaults', async () => {
+    const res = await request(app).post('/api/v1/companies/me/brand/custom-domain').send({ customDomain: 'Cars.Example.com' })
+
+    expect(res.status).toBe(200)
+    expect(companyService.setCustomDomain).toHaveBeenCalledWith('company_1', 'Atlas Cars', 'atlas', 'Cars.Example.com')
+  })
+
+  it('applies insurance policy defaults before creating a policy', async () => {
+    const res = await request(app).post('/api/v1/companies/me/insurance-policies').send({
+      name: 'Basic CDW',
+      type: 'CDW',
+      chargeType: 'PER_DAY',
+      chargeValue: 2500,
+    })
+
+    expect(res.status).toBe(201)
+    expect(companyService.createInsurancePolicy).toHaveBeenCalledWith('company_1', expect.objectContaining({
+      name: 'Basic CDW',
+      isRequired: false,
+      isActive: true,
+      sortOrder: 0,
+    }))
+  })
+
+  it('rejects malformed pricing rules before service execution', async () => {
+    const res = await request(app).post('/api/v1/companies/me/pricing-rules').send({
+      name: 'Young driver fee',
+      type: 'SURCHARGE',
+      condition: 'AGE_LESS_THAN',
+      conditionValue: 25,
+      adjustmentType: 'PERCENTAGE',
+      adjustmentValue: 10.5,
+    })
+
+    expect(res.status).toBe(400)
+    expect(companyService.createPricingRule).not.toHaveBeenCalled()
+  })
+
+  it('validates accounting settings at the route boundary', async () => {
+    const invalid = await request(app).patch('/api/v1/companies/me/accounting-settings').send({ fiscalYearStart: 13 })
+    expect(invalid.status).toBe(400)
+    expect(companyService.updateAccountingSettings).not.toHaveBeenCalled()
+
+    const valid = await request(app).patch('/api/v1/companies/me/accounting-settings').send({ fiscalYearStart: 4, reportFormat: 'BOTH' })
+    expect(valid.status).toBe(200)
+    expect(companyService.updateAccountingSettings).toHaveBeenCalledWith('company_1', { fiscalYearStart: 4, reportFormat: 'BOTH' })
+  })
+})
diff --git a/api/src/tests/api/customer-notification-analytics.api.test.ts b/api/src/tests/api/customer-notification-analytics.api.test.ts
new file mode 100644
index 0000000..70d0395
--- /dev/null
+++ b/api/src/tests/api/customer-notification-analytics.api.test.ts
@@ -0,0 +1,148 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', firstName: 'Aya', lastName: 'Manager', role: 'MANAGER' }
+    next()
+  },
+  requireCompanyDocumentAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', firstName: 'Aya', lastName: 'Manager', role: 'MANAGER' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRole', () => ({ requireRole: () => (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = 'renter_1'
+    next()
+  },
+  optionalRenterAuth: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../modules/customers/customer.service', () => ({
+  listCustomers: vi.fn(),
+  createCustomer: vi.fn(),
+  getCustomer: vi.fn(),
+  updateCustomer: vi.fn(),
+  flagCustomer: vi.fn(),
+  unflagCustomer: vi.fn(),
+  validateCustomerLicense: vi.fn(),
+  uploadLicenseImage: vi.fn(),
+  approveLicense: vi.fn(),
+  getLicenseImageFile: vi.fn(),
+}))
+vi.mock('../../modules/notifications/notification.service', () => ({
+  listCompany: vi.fn(),
+  countUnread: vi.fn(),
+  markRead: vi.fn(),
+  markAllRead: vi.fn(),
+  getPreferences: vi.fn(),
+  setPreferences: vi.fn(),
+  listCompanyHistory: vi.fn(),
+  listRenter: vi.fn(),
+  markRenterRead: vi.fn(),
+  markAllRenterRead: vi.fn(),
+  getRenterPreferences: vi.fn(),
+  setRenterPreferences: vi.fn(),
+}))
+vi.mock('../../modules/analytics/analytics.service', () => ({
+  getSummary: vi.fn(),
+  getDashboard: vi.fn(),
+  getSources: vi.fn(),
+  getReport: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as customerService from '../../modules/customers/customer.service'
+import * as notificationService from '../../modules/notifications/notification.service'
+import * as analyticsService from '../../modules/analytics/analytics.service'
+
+const app = createApp()
+
+describe('customer, notification and analytics API validation contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(customerService.listCustomers).mockResolvedValue({ items: [], page: 2, pageSize: 10, total: 0 } as never)
+    vi.mocked(customerService.createCustomer).mockResolvedValue({ id: 'customer_1' } as never)
+    vi.mocked(customerService.approveLicense).mockResolvedValue({ id: 'customer_1', licenseStatus: 'APPROVED' } as never)
+    vi.mocked(notificationService.listCompanyHistory).mockResolvedValue([] as never)
+    vi.mocked(analyticsService.getSummary).mockResolvedValue({ reservations: 0 } as never)
+  })
+
+  it('coerces customer list pagination before calling the service', async () => {
+    const res = await request(app).get('/api/v1/customers?page=2&pageSize=10&flagged=false&q=Aya')
+
+    expect(res.status).toBe(200)
+    expect(customerService.listCustomers).toHaveBeenCalledWith('company_1', {
+      page: 2,
+      pageSize: 10,
+      flagged: 'false',
+      q: 'Aya',
+    })
+  })
+
+  it('rejects malformed customer creates before persistence', async () => {
+    const res = await request(app).post('/api/v1/customers').send({
+      firstName: 'Aya',
+      lastName: 'Haddad',
+      email: 'not-email',
+    })
+
+    expect(res.status).toBe(400)
+    expect(customerService.createCustomer).not.toHaveBeenCalled()
+  })
+
+  it('normalizes valid customer create payloads at the route boundary', async () => {
+    const res = await request(app).post('/api/v1/customers').send({
+      firstName: '  Aya ',
+      lastName: ' Haddad ',
+      email: 'AYA@EXAMPLE.TEST',
+      phone: ' +212600000000 ',
+    })
+
+    expect(res.status).toBe(201)
+    expect(customerService.createCustomer).toHaveBeenCalledWith(
+      expect.objectContaining({ firstName: 'Aya', lastName: 'Haddad', email: 'aya@example.test', phone: '+212600000000' }),
+      'company_1',
+    )
+  })
+
+  it('rejects invalid license approval decisions before service execution', async () => {
+    const res = await request(app).post('/api/v1/customers/customer_1/approve-license').send({ decision: 'REVIEW_LATER' })
+
+    expect(res.status).toBe(400)
+    expect(customerService.approveLicense).not.toHaveBeenCalled()
+  })
+
+  it('passes license approval actor names to the customer service', async () => {
+    const res = await request(app).post('/api/v1/customers/customer_1/approve-license').send({ decision: 'APPROVE', note: 'Readable license' })
+
+    expect(res.status).toBe(200)
+    expect(customerService.approveLicense).toHaveBeenCalledWith('customer_1', 'company_1', 'APPROVE', 'Readable license', 'Aya Manager')
+  })
+
+  it('caps notification history limits before querying history', async () => {
+    const res = await request(app).get('/api/v1/notifications/history?limit=999')
+
+    expect(res.status).toBe(400)
+    expect(notificationService.listCompanyHistory).not.toHaveBeenCalled()
+  })
+
+  it('uses the analytics summary default period when no query is supplied', async () => {
+    const res = await request(app).get('/api/v1/analytics/summary')
+
+    expect(res.status).toBe(200)
+    expect(analyticsService.getSummary).toHaveBeenCalledWith('company_1', '30d')
+  })
+})
diff --git a/api/src/tests/api/employee-marketplace-notification.api.test.ts b/api/src/tests/api/employee-marketplace-notification.api.test.ts
new file mode 100644
index 0000000..d25b4c7
--- /dev/null
+++ b/api/src/tests/api/employee-marketplace-notification.api.test.ts
@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyDocumentAuth: (_req: any, _res: any, next: any) => next(),
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'MANAGER', firstName: 'Aya', lastName: 'Manager' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../modules/auth/auth.employee.service', () => ({
+  getMe: vi.fn(),
+  login: vi.fn(),
+  forgotPassword: vi.fn(),
+  updateLanguage: vi.fn(),
+  resetPassword: vi.fn(),
+}))
+vi.mock('../../modules/menu/menu.service', () => ({ getEmployeeMenu: vi.fn() }))
+vi.mock('../../modules/notifications/notification.service', () => ({
+  listCompany: vi.fn(),
+  countUnread: vi.fn(),
+  markRead: vi.fn(),
+  markAllRead: vi.fn(),
+  getPreferences: vi.fn(),
+  setPreferences: vi.fn(),
+  listCompanyHistory: vi.fn(),
+  listRenter: vi.fn(),
+  markRenterRead: vi.fn(),
+  markAllRenterRead: vi.fn(),
+  getRenterPreferences: vi.fn(),
+  setRenterPreferences: vi.fn(),
+}))
+vi.mock('../../modules/marketplace/marketplace.service', () => ({
+  getCities: vi.fn(),
+  getListedCompanies: vi.fn(),
+  searchVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  createMarketplaceReservation: vi.fn(),
+  getCompanyPage: vi.fn(),
+  getCompanyReviews: vi.fn(),
+  getCompanyVehicles: vi.fn(),
+  getVehicle: vi.fn(),
+  getCompanyOffers: vi.fn(),
+  getReviewContext: vi.fn(),
+  submitReview: vi.fn(),
+  validateOfferCode: vi.fn(),
+  getPublicOffers: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as employeeService from '../../modules/auth/auth.employee.service'
+import * as notificationService from '../../modules/notifications/notification.service'
+import * as marketplaceService from '../../modules/marketplace/marketplace.service'
+
+const app = createApp()
+
+describe('employee, notification, and marketplace API validation contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(employeeService.login).mockResolvedValue({ token: 'jwt', employee: { id: 'employee_1' } } as never)
+    vi.mocked(employeeService.forgotPassword).mockResolvedValue({ message: 'If that email is registered, a reset link has been sent.' } as never)
+    vi.mocked(employeeService.updateLanguage).mockResolvedValue({ language: 'ar' } as never)
+    vi.mocked(employeeService.resetPassword).mockResolvedValue({ message: 'Password updated successfully. You can now sign in.' } as never)
+    vi.mocked(notificationService.setPreferences).mockResolvedValue({ success: true } as never)
+    vi.mocked(marketplaceService.searchVehicles).mockResolvedValue({ companies: [], vehicles: [], pagination: { page: 1, pageSize: 20, total: 0 } } as never)
+    vi.mocked(marketplaceService.submitReview).mockResolvedValue({ id: 'review_1' } as never)
+  })
+
+  it('normalizes employee login email before service execution', async () => {
+    const res = await request(app).post('/api/v1/auth/employee/login').send({
+      email: 'Agent@Example.TEST',
+      password: 'valid-password',
+    })
+
+    expect(res.status).toBe(200)
+    expect(employeeService.login).toHaveBeenCalledWith({ email: 'agent@example.test', password: 'valid-password' })
+  })
+
+  it('rejects empty employee reset tokens before service execution', async () => {
+    const res = await request(app).post('/api/v1/auth/employee/reset-password').send({ token: '', password: 'new-password' })
+
+    expect(res.status).toBe(400)
+    expect(employeeService.resetPassword).not.toHaveBeenCalled()
+  })
+
+  it('forwards authenticated language updates with the employee id from auth context', async () => {
+    const res = await request(app).patch('/api/v1/auth/employee/me/language').send({ language: 'ar' })
+
+    expect(res.status).toBe(200)
+    expect(employeeService.updateLanguage).toHaveBeenCalledWith('employee_1', 'ar')
+  })
+
+  it('rejects malformed notification preferences before persistence', async () => {
+    const res = await request(app).patch('/api/v1/notifications/company/preferences').send({
+      preferences: [{ notificationType: 'RESERVATION_CREATED', channel: 'EMAIL', enabled: true }],
+    })
+
+    expect(res.status).toBe(400)
+    expect(notificationService.setPreferences).not.toHaveBeenCalled()
+  })
+
+  it('defaults marketplace search pagination at the public route boundary', async () => {
+    const res = await request(app).get('/api/v1/marketplace/search?city=Casablanca')
+
+    expect(res.status).toBe(200)
+    expect(marketplaceService.searchVehicles).toHaveBeenCalledWith(expect.objectContaining({
+      city: 'Casablanca',
+      page: 1,
+      pageSize: 20,
+    }))
+  })
+
+  it('rejects out-of-range public review ratings before service execution', async () => {
+    const res = await request(app).post('/api/v1/marketplace/review/token_123').send({
+      overallRating: 6,
+      vehicleRating: 5,
+      serviceRating: 5,
+      comment: 'Too magical',
+    })
+
+    expect(res.status).toBe(400)
+    expect(marketplaceService.submitReview).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/feedback-offer-boundaries.api.test.ts b/api/src/tests/api/feedback-offer-boundaries.api.test.ts
new file mode 100644
index 0000000..a85e1c3
--- /dev/null
+++ b/api/src/tests/api/feedback-offer-boundaries.api.test.ts
@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyDocumentAuth: (_req: any, _res: any, next: any) => next(),
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_manager', role: 'MANAGER', firstName: 'Mina', lastName: 'Manager' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRole', () => ({ requireRole: () => (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../modules/offers/offer.service', () => ({
+  listOffers: vi.fn(),
+  createOffer: vi.fn(),
+  getOffer: vi.fn(),
+  updateOffer: vi.fn(),
+  deleteOffer: vi.fn(),
+  setOfferActive: vi.fn(),
+  getOfferStats: vi.fn(),
+}))
+vi.mock('../../modules/reviews/review.service', () => ({
+  listReviews: vi.fn(),
+  getStats: vi.fn(),
+  getReview: vi.fn(),
+  replyToReview: vi.fn(),
+  sendReviewReminder: vi.fn(),
+}))
+vi.mock('../../modules/complaints/complaint.service', () => ({
+  listComplaints: vi.fn(),
+  createComplaint: vi.fn(),
+  getComplaint: vi.fn(),
+  updateComplaint: vi.fn(),
+  deleteComplaint: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as offerService from '../../modules/offers/offer.service'
+import * as reviewService from '../../modules/reviews/review.service'
+import * as complaintService from '../../modules/complaints/complaint.service'
+
+const app = createApp()
+
+describe('feedback and offer API boundary contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(offerService.createOffer).mockResolvedValue({ id: 'offer_1' } as never)
+    vi.mocked(reviewService.listReviews).mockResolvedValue({ items: [], total: 0 } as never)
+    vi.mocked(reviewService.replyToReview).mockResolvedValue({ id: 'review_1', companyReply: 'Thanks' } as never)
+    vi.mocked(complaintService.createComplaint).mockResolvedValue({ id: 'complaint_1' } as never)
+    vi.mocked(complaintService.updateComplaint).mockResolvedValue({ id: 'complaint_1', status: 'RESOLVED' } as never)
+  })
+
+  it('normalizes review list pagination and rating before service execution', async () => {
+    const res = await request(app).get('/api/v1/reviews?rating=5&page=2&pageSize=15')
+
+    expect(res.status).toBe(200)
+    expect(reviewService.listReviews).toHaveBeenCalledWith('company_1', { rating: 5, page: 2, pageSize: 15 })
+  })
+
+  it('rejects empty company review replies before service execution', async () => {
+    const res = await request(app).patch('/api/v1/reviews/review_1/reply').send({ companyReply: '' })
+
+    expect(res.status).toBe(400)
+    expect(reviewService.replyToReview).not.toHaveBeenCalled()
+  })
+
+  it('defaults complaint severity and forwards company context', async () => {
+    const res = await request(app).post('/api/v1/complaints').send({
+      category: 'BILLING',
+      subject: 'Incorrect charge',
+      customerId: 'customer_1',
+    })
+
+    expect(res.status).toBe(201)
+    expect(complaintService.createComplaint).toHaveBeenCalledWith('company_1', {
+      category: 'BILLING',
+      subject: 'Incorrect charge',
+      customerId: 'customer_1',
+      severity: 'LEVEL_1',
+    })
+  })
+
+  it('rejects invalid complaint transitions before service execution', async () => {
+    const res = await request(app).patch('/api/v1/complaints/complaint_1').send({ status: 'ESCALATED' })
+
+    expect(res.status).toBe(400)
+    expect(complaintService.updateComplaint).not.toHaveBeenCalled()
+  })
+
+  it('splits offer vehicle ids from the service payload after validation defaults are applied', async () => {
+    const res = await request(app).post('/api/v1/offers').send({
+      title: 'Weekend deal',
+      type: 'PERCENTAGE',
+      discountValue: 15,
+      appliesToAll: false,
+      validFrom: '2026-09-01T00:00:00.000Z',
+      validUntil: '2026-09-30T23:59:59.000Z',
+      vehicleIds: ['vehicle_1'],
+    })
+
+    expect(res.status).toBe(201)
+    expect(offerService.createOffer).toHaveBeenCalledWith('company_1', {
+      title: 'Weekend deal',
+      type: 'PERCENTAGE',
+      discountValue: 15,
+      appliesToAll: false,
+      categories: [],
+      validFrom: '2026-09-01T00:00:00.000Z',
+      validUntil: '2026-09-30T23:59:59.000Z',
+      isActive: true,
+      isPublic: true,
+      isFeatured: false,
+    }, ['vehicle_1'])
+  })
+
+  it('rejects offers with non-datetime validity windows before service execution', async () => {
+    const res = await request(app).post('/api/v1/offers').send({
+      title: 'Bad dates',
+      type: 'FIXED_AMOUNT',
+      discountValue: 100,
+      validFrom: 'tomorrow',
+      validUntil: 'next week',
+    })
+
+    expect(res.status).toBe(400)
+    expect(offerService.createOffer).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/license-validation.api.test.ts b/api/src/tests/api/license-validation.api.test.ts
new file mode 100644
index 0000000..f14047b
--- /dev/null
+++ b/api/src/tests/api/license-validation.api.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+/** Return today's date as YYYY-MM-DD */
+function today(): string {
+  return new Date().toISOString().split('T')[0]
+}
+
+/** Return a date offset by `days` from today, as YYYY-MM-DD */
+function offsetDate(days: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() + days)
+  return d.toISOString().split('T')[0]
+}
+
+describe('License Validation API — POST /api/v1/licenses/validate', () => {
+  // ─── Success scenarios ──────────────────────────────────────────────
+
+  it('accepts a license expiring in 365 days (valid)', async () => {
+    const future = offsetDate(365)
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: future })
+
+    expect(res.status).toBe(200)
+    expect(res.body.data).toMatchObject({
+      valid: true,
+      message: 'License verified successfully',
+    })
+    expect(res.body.data.days_remaining).toBeGreaterThanOrEqual(365)
+    expect(res.body.data.next_reminder).toBeDefined()
+  })
+
+  it('accepts a license expiring in exactly 30 days', async () => {
+    const future = offsetDate(30)
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: future })
+
+    expect(res.status).toBe(200)
+    expect(res.body.data.valid).toBe(true)
+    expect(res.body.data.days_remaining).toBe(30)
+  })
+
+  // ─── Rejection scenarios ────────────────────────────────────────────
+
+  it('rejects a license expiring in 15 days with 422', async () => {
+    const nearFuture = offsetDate(15)
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: nearFuture })
+
+    expect(res.status).toBe(422)
+    expect(res.body.error).toBe('LICENSE_EXPIRING_SOON')
+    expect(res.body.message).toContain('30 days')
+    expect(res.body.details).toBeDefined()
+    expect(res.body.details.days_remaining).toBe(15)
+    expect(res.body.details.minimum_required).toBe(30)
+  })
+
+  it('rejects an expired license with 422', async () => {
+    const past = offsetDate(-5)
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: past })
+
+    expect(res.status).toBe(422)
+    expect(res.body.error).toBe('LICENSE_EXPIRED')
+    expect(res.body.message).toContain('expired')
+  })
+
+  it('rejects an invalid date format with 400', async () => {
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: 'not-a-date' })
+
+    expect(res.status).toBe(400)
+    expect(res.body.error).toBe('LICENSE_INVALID_FORMAT')
+    expect(res.body.message).toContain('Unable to parse')
+  })
+
+  it('rejects an empty expiration_date with 400', async () => {
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: '' })
+
+    expect(res.status).toBe(400)
+    expect(res.body.error).toBe('validation_error')
+  })
+
+  it('rejects a date too far in the future with 400', async () => {
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: '2055-01-01' })
+
+    expect(res.status).toBe(400)
+    expect(res.body.error).toBe('LICENSE_FUTURE_DATE')
+  })
+
+  // ─── Multiple date formats ──────────────────────────────────────────
+
+  it('parses MM/DD/YYYY format', async () => {
+    const future = new Date()
+    future.setFullYear(future.getFullYear() + 1)
+    const mm = String(future.getMonth() + 1).padStart(2, '0')
+    const dd = String(future.getDate()).padStart(2, '0')
+    const yyyy = future.getFullYear()
+
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: `${mm}/${dd}/${yyyy}` })
+
+    expect(res.status).toBe(200)
+    expect(res.body.data.valid).toBe(true)
+  })
+
+  it('parses DD-MMM-YYYY format', async () => {
+    const future = new Date()
+    future.setFullYear(future.getFullYear() + 1)
+    const dd = String(future.getDate()).padStart(2, '0')
+    const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
+    const mmm = months[future.getMonth()]
+    const yyyy = future.getFullYear()
+
+    const res = await request(app)
+      .post('/api/v1/licenses/validate')
+      .send({ expiration_date: `${dd}-${mmm}-${yyyy}` })
+
+    expect(res.status).toBe(200)
+    expect(res.body.data.valid).toBe(true)
+  })
+})
diff --git a/api/src/tests/api/operations-validation.api.test.ts b/api/src/tests/api/operations-validation.api.test.ts
new file mode 100644
index 0000000..02faef9
--- /dev/null
+++ b/api/src/tests/api/operations-validation.api.test.ts
@@ -0,0 +1,148 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+  requireCompanyDocumentAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({
+  requireSubscription: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../middleware/requireRole', () => ({
+  requireRole: () => (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = 'renter_1'
+    next()
+  },
+  optionalRenterAuth: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../modules/team/team.service', () => ({
+  getMembers: vi.fn(),
+  getMemberStats: vi.fn(),
+  inviteEmployee: vi.fn(),
+  updateEmployeeRole: vi.fn(),
+  deactivateEmployee: vi.fn(),
+  reactivateEmployee: vi.fn(),
+  removeEmployee: vi.fn(),
+}))
+vi.mock('../../modules/notifications/notification.service', () => ({
+  listCompany: vi.fn(),
+  countUnread: vi.fn(),
+  markRead: vi.fn(),
+  markAllRead: vi.fn(),
+  getPreferences: vi.fn(),
+  setPreferences: vi.fn(),
+  listCompanyHistory: vi.fn(),
+  listRenter: vi.fn(),
+  markRenterRead: vi.fn(),
+  markAllRenterRead: vi.fn(),
+  getRenterPreferences: vi.fn(),
+  setRenterPreferences: vi.fn(),
+}))
+vi.mock('../../modules/analytics/analytics.service', () => ({
+  getSummary: vi.fn(),
+  getDashboard: vi.fn(),
+  getSources: vi.fn(),
+  getReport: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as teamService from '../../modules/team/team.service'
+import * as notificationService from '../../modules/notifications/notification.service'
+import * as analyticsService from '../../modules/analytics/analytics.service'
+
+const app = createApp()
+
+describe('operations validation API contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(teamService.inviteEmployee).mockResolvedValue({ id: 'employee_2' } as never)
+    vi.mocked(teamService.updateEmployeeRole).mockResolvedValue({ id: 'employee_2', role: 'AGENT' } as never)
+    vi.mocked(notificationService.setPreferences).mockResolvedValue(undefined as never)
+    vi.mocked(notificationService.listCompanyHistory).mockResolvedValue([] as never)
+    vi.mocked(analyticsService.getReport).mockResolvedValue({
+      format: 'CSV',
+      startDate: new Date('2026-01-01T00:00:00.000Z'),
+      endDate: new Date('2026-01-31T00:00:00.000Z'),
+      csv: 'metric,value\nrevenue,1000\n',
+    } as never)
+  })
+
+  it('rejects invalid team invite roles before service execution', async () => {
+    const res = await request(app).post('/api/v1/team/invite').send({
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.test',
+      role: 'OWNER',
+    })
+
+    expect(res.status).toBe(400)
+    expect(teamService.inviteEmployee).not.toHaveBeenCalled()
+  })
+
+  it('passes valid team role updates with actor context', async () => {
+    const res = await request(app).patch('/api/v1/team/employee_2/role').send({ role: 'AGENT' })
+
+    expect(res.status).toBe(200)
+    expect(teamService.updateEmployeeRole).toHaveBeenCalledWith('company_1', 'employee_1', 'OWNER', 'employee_2', { role: 'AGENT' })
+  })
+
+  it('rejects malformed company notification preferences before persistence', async () => {
+    const res = await request(app).patch('/api/v1/notifications/company/preferences').send([
+      { notificationType: 'BOOKING', channel: 'EMAIL' },
+    ])
+
+    expect(res.status).toBe(400)
+    expect(notificationService.setPreferences).not.toHaveBeenCalled()
+  })
+
+  it('accepts valid company notification preferences and passes employee identity', async () => {
+    const res = await request(app).patch('/api/v1/notifications/company/preferences').send([
+      { notificationType: 'BOOKING_CREATED', channel: 'EMAIL', enabled: true },
+    ])
+
+    expect(res.status).toBe(200)
+    expect(notificationService.setPreferences).toHaveBeenCalledWith('employee_1', [
+      { notificationType: 'BOOKING_CREATED', channel: 'EMAIL', enabled: true },
+    ])
+  })
+
+  it('coerces notification history limits before querying service history', async () => {
+    const res = await request(app).get('/api/v1/notifications/history?channel=EMAIL&status=SENT&limit=50')
+
+    expect(res.status).toBe(200)
+    expect(notificationService.listCompanyHistory).toHaveBeenCalledWith('company_1', {
+      channel: 'EMAIL',
+      status: 'SENT',
+      limit: 50,
+    })
+  })
+
+  it('streams analytics CSV reports with deterministic filenames', async () => {
+    const res = await request(app).get('/api/v1/analytics/report?format=CSV&period=month')
+
+    expect(res.status).toBe(200)
+    expect(res.header['content-type']).toContain('text/csv')
+    expect(res.header['content-disposition']).toContain('report-2026-01-01-2026-01-31.csv')
+    expect(res.text).toContain('metric,value')
+    expect(analyticsService.getReport).toHaveBeenCalledWith('company_1', { format: 'CSV', period: 'month' })
+  })
+})
diff --git a/api/src/tests/api/operations.api.test.ts b/api/src/tests/api/operations.api.test.ts
new file mode 100644
index 0000000..1428655
--- /dev/null
+++ b/api/src/tests/api/operations.api.test.ts
@@ -0,0 +1,196 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+vi.mock('../../middleware/requireCompanyAuth', () => {
+  const auth = (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    req.company = { id: 'company_1' }
+    req.employee = { id: 'employee_1', role: 'OWNER', companyId: 'company_1' }
+    next()
+  }
+  return { requireCompanyAuth: auth, requireCompanyDocumentAuth: auth }
+})
+
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (_req: any, _res: any, next: any) => next(),
+}))
+
+vi.mock('../../middleware/requireSubscription', () => ({
+  requireSubscription: (_req: any, _res: any, next: any) => next(),
+}))
+
+vi.mock('../../middleware/requireRole', () => ({
+  requireRole: () => (_req: any, _res: any, next: any) => next(),
+}))
+
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = 'renter_1'
+    next()
+  },
+  optionalRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = req.renterId ?? undefined
+    next()
+  },
+}))
+
+vi.mock('../../modules/offers/offer.service', () => ({
+  listOffers: vi.fn(),
+  getOffer: vi.fn(),
+  createOffer: vi.fn(),
+  updateOffer: vi.fn(),
+  deleteOffer: vi.fn(),
+  setOfferActive: vi.fn(),
+  getOfferStats: vi.fn(),
+}))
+
+vi.mock('../../modules/notifications/notification.service', () => ({
+  listCompany: vi.fn(),
+  listCompanyHistory: vi.fn(),
+  countUnread: vi.fn(),
+  markRead: vi.fn(),
+  markAllRead: vi.fn(),
+  getPreferences: vi.fn(),
+  setPreferences: vi.fn(),
+  listRenter: vi.fn(),
+  markRenterRead: vi.fn(),
+  markAllRenterRead: vi.fn(),
+  getRenterPreferences: vi.fn(),
+  setRenterPreferences: vi.fn(),
+}))
+
+vi.mock('../../modules/team/team.service', () => ({
+  getMembers: vi.fn(),
+  getMemberStats: vi.fn(),
+  inviteEmployee: vi.fn(),
+  updateEmployeeRole: vi.fn(),
+  deactivateEmployee: vi.fn(),
+  reactivateEmployee: vi.fn(),
+  removeEmployee: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as offerService from '../../modules/offers/offer.service'
+import * as notificationService from '../../modules/notifications/notification.service'
+import * as teamService from '../../modules/team/team.service'
+
+const app = createApp()
+
+describe('operations API contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(offerService.listOffers).mockResolvedValue([{ id: 'offer_1' }] as never)
+    vi.mocked(offerService.createOffer).mockResolvedValue({ id: 'offer_1' } as never)
+    vi.mocked(offerService.updateOffer).mockResolvedValue({ id: 'offer_1', title: 'Updated' } as never)
+    vi.mocked(offerService.getOfferStats).mockResolvedValue({ redemptions: 2 } as never)
+    vi.mocked(notificationService.countUnread).mockResolvedValue(7 as never)
+    vi.mocked(notificationService.listCompanyHistory).mockResolvedValue([{ id: 'history_1' }] as never)
+    vi.mocked(notificationService.getPreferences).mockResolvedValue([] as never)
+    vi.mocked(notificationService.listRenter).mockResolvedValue([{ id: 'renter_notification_1' }] as never)
+    vi.mocked(teamService.getMemberStats).mockResolvedValue({ total: 3, active: 2, pending: 1, inactive: 0 } as never)
+    vi.mocked(teamService.inviteEmployee).mockResolvedValue({ employee: { id: 'employee_2' }, invitationId: 'employee_2', invitedBy: 'employee_1' } as never)
+  })
+
+  it('GET /api/v1/offers forwards boolean-like query strings without the router inventing semantics', async () => {
+    const res = await request(app).get('/api/v1/offers?active=true&public=false')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: [{ id: 'offer_1' }] })
+    expect(offerService.listOffers).toHaveBeenCalledWith('company_1', { active: 'true', public: 'false' })
+  })
+
+  it('POST /api/v1/offers validates payloads and separates vehicleIds from offer body', async () => {
+    const payload = {
+      title: 'Long weekend deal',
+      type: 'PERCENTAGE',
+      discountValue: 15,
+      appliesToAll: false,
+      categories: ['SUV'],
+      validFrom: '2026-07-01T00:00:00.000Z',
+      validUntil: '2026-07-31T23:59:59.000Z',
+      vehicleIds: ['vehicle_1'],
+    }
+
+    const res = await request(app).post('/api/v1/offers').send(payload)
+
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual({ data: { id: 'offer_1' } })
+    expect(offerService.createOffer).toHaveBeenCalledWith('company_1', expect.not.objectContaining({ vehicleIds: expect.anything() }), ['vehicle_1'])
+  })
+
+  it('PATCH /api/v1/offers/:id validates route params and delegates partial updates', async () => {
+    const res = await request(app).patch('/api/v1/offers/offer_1').send({ title: 'Updated', vehicleIds: [] })
+
+    expect(res.status).toBe(200)
+    expect(offerService.updateOffer).toHaveBeenCalledWith('offer_1', 'company_1', { title: 'Updated' }, [])
+  })
+
+  it('GET /api/v1/offers/:id/stats returns the service stats in the standard envelope', async () => {
+    const res = await request(app).get('/api/v1/offers/offer_1/stats')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { redemptions: 2 } })
+    expect(offerService.getOfferStats).toHaveBeenCalledWith('offer_1', 'company_1')
+  })
+
+  it('GET /api/v1/notifications/unread-count exposes only the numeric unread count', async () => {
+    const res = await request(app).get('/api/v1/notifications/unread-count')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { unread: 7 } })
+  })
+
+  it('GET /api/v1/notifications/history coerces limit and passes history filters to the service', async () => {
+    const res = await request(app).get('/api/v1/notifications/history?channel=EMAIL&status=FAILED&limit=25')
+
+    expect(res.status).toBe(200)
+    expect(notificationService.listCompanyHistory).toHaveBeenCalledWith('company_1', { channel: 'EMAIL', status: 'FAILED', limit: 25 })
+  })
+
+  it('PATCH /api/v1/notifications/company/preferences validates preference arrays for the current employee', async () => {
+    const prefs = [{ notificationType: 'BOOKING_CONFIRMED', channel: 'EMAIL', enabled: true }]
+    const res = await request(app).patch('/api/v1/notifications/company/preferences').send(prefs)
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { success: true } })
+    expect(notificationService.setPreferences).toHaveBeenCalledWith('employee_1', prefs)
+  })
+
+  it('GET /api/v1/notifications/renter uses renter identity instead of company tenant middleware', async () => {
+    const res = await request(app).get('/api/v1/notifications/renter')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: [{ id: 'renter_notification_1' }] })
+    expect(notificationService.listRenter).toHaveBeenCalledWith('renter_1')
+  })
+
+  it('GET /api/v1/team/stats returns computed team stats from the team facade', async () => {
+    const res = await request(app).get('/api/v1/team/stats')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { total: 3, active: 2, pending: 1, inactive: 0 } })
+  })
+
+  it('POST /api/v1/team/invite validates invite payloads and wraps the created invitation', async () => {
+    const res = await request(app).post('/api/v1/team/invite').send({
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      role: 'AGENT',
+    })
+
+    expect(res.status).toBe(201)
+    expect(res.body).toEqual({ data: { data: { employee: { id: 'employee_2' }, invitationId: 'employee_2', invitedBy: 'employee_1' } } })
+    expect(teamService.inviteEmployee).toHaveBeenCalledWith('company_1', 'employee_1', {
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      role: 'AGENT',
+    })
+  })
+})
diff --git a/api/src/tests/api/payments.api.test.ts b/api/src/tests/api/payments.api.test.ts
new file mode 100644
index 0000000..fc1d148
--- /dev/null
+++ b/api/src/tests/api/payments.api.test.ts
@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn(),
+  verifyWebhookSignature: vi.fn(),
+}))
+
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn(),
+  verifyWebhookEvent: vi.fn(),
+}))
+
+vi.mock('../../modules/payments/payment.service', () => ({
+  handleAmanpayWebhook: vi.fn(),
+  handlePaypalWebhook: vi.fn(),
+  listByCompany: vi.fn(),
+  listByReservation: vi.fn(),
+  initCharge: vi.fn(),
+  capturePaypal: vi.fn(),
+  recordManualPayment: vi.fn(),
+  refundPayment: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as service from '../../modules/payments/payment.service'
+
+const app = createApp()
+
+describe('payments API contract', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('rejects AmanPay webhooks when signature validation fails and does not invoke service handlers', async () => {
+    vi.mocked(amanpay.isConfigured).mockReturnValue(true)
+    vi.mocked(amanpay.verifyWebhookSignature).mockReturnValue(false)
+
+    const payload = { transaction_id: 'txn_1', status: 'PAID' }
+    const res = await request(app)
+      .post('/api/v1/payments/webhooks/amanpay')
+      .set('x-amanpay-signature', 'bad')
+      .send(payload)
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'invalid_signature' })
+    expect(amanpay.verifyWebhookSignature).toHaveBeenCalledWith(JSON.stringify(payload), 'bad')
+    expect(service.handleAmanpayWebhook).not.toHaveBeenCalled()
+  })
+
+  it('accepts valid AmanPay webhooks and delegates the exact payload', async () => {
+    vi.mocked(amanpay.isConfigured).mockReturnValue(true)
+    vi.mocked(amanpay.verifyWebhookSignature).mockReturnValue(true)
+
+    const payload = { transaction_id: 'txn_1', status: 'PAID' }
+    const res = await request(app)
+      .post('/api/v1/payments/webhooks/amanpay')
+      .set('x-amanpay-signature', 'good')
+      .send(payload)
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ received: true })
+    expect(service.handleAmanpayWebhook).toHaveBeenCalledWith(payload, JSON.stringify(payload))
+  })
+
+  it('rejects PayPal webhooks when provider verification fails', async () => {
+    vi.mocked(paypal.isConfigured).mockReturnValue(true)
+    vi.mocked(paypal.verifyWebhookEvent).mockResolvedValue(false)
+
+    const res = await request(app)
+      .post('/api/v1/payments/webhooks/paypal')
+      .set('paypal-transmission-id', 'transmission_1')
+      .send({ event_type: 'PAYMENT.CAPTURE.COMPLETED', resource: { id: 'capture_1' } })
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'invalid_signature' })
+    expect(service.handlePaypalWebhook).not.toHaveBeenCalled()
+  })
+
+  it('accepts verified PayPal webhooks and delegates handling', async () => {
+    vi.mocked(paypal.isConfigured).mockReturnValue(true)
+    vi.mocked(paypal.verifyWebhookEvent).mockResolvedValue(true)
+
+    const payload = { event_type: 'PAYMENT.CAPTURE.COMPLETED', resource: { id: 'capture_1' } }
+    const res = await request(app)
+      .post('/api/v1/payments/webhooks/paypal')
+      .send(payload)
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ received: true })
+    expect(service.handlePaypalWebhook).toHaveBeenCalledWith(payload, JSON.stringify(payload))
+  })
+
+  it('keeps authenticated payment routes behind auth before any payment service call', async () => {
+    const res = await request(app).get('/api/v1/payments/company')
+
+    expect(res.status).toBe(401)
+    expect(service.listByCompany).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/public-validation.api.test.ts b/api/src/tests/api/public-validation.api.test.ts
new file mode 100644
index 0000000..1ea1d81
--- /dev/null
+++ b/api/src/tests/api/public-validation.api.test.ts
@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (req: any, _res: any, next: any) => {
+    req.renterId = 'renter_1'
+    next()
+  },
+  optionalRenterAuth: (_req: any, _res: any, next: any) => next(),
+}))
+
+vi.mock('../../modules/site/site.service', () => ({
+  getPlatformHomepage: vi.fn(),
+  getPlatformPricing: vi.fn(),
+  getBrand: vi.fn(),
+  getPublicVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getOffers: vi.fn(),
+  getBookingOptions: vi.fn(),
+  checkAvailability: vi.fn(),
+  validatePromoCode: vi.fn(),
+  createBooking: vi.fn(),
+  getBooking: vi.fn(),
+  initPayment: vi.fn(),
+  capturePaypal: vi.fn(),
+  handleContact: vi.fn(),
+}))
+
+vi.mock('../../modules/marketplace/marketplace.service', () => ({
+  getPublicOffers: vi.fn(),
+  getCities: vi.fn(),
+  getListedCompanies: vi.fn(),
+  searchVehicles: vi.fn(),
+  createMarketplaceReservation: vi.fn(),
+  getReviewContext: vi.fn(),
+  submitReview: vi.fn(),
+  validateOfferCode: vi.fn(),
+  getCompanyPage: vi.fn(),
+  getCompanyReviews: vi.fn(),
+  getCompanyVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getCompanyOffers: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as siteService from '../../modules/site/site.service'
+import * as marketplaceService from '../../modules/marketplace/marketplace.service'
+
+const app = createApp()
+
+describe('public validation API contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(siteService.checkAvailability).mockResolvedValue({ available: true, nextAvailableAt: null } as never)
+    vi.mocked(siteService.initPayment).mockResolvedValue({ checkoutUrl: 'https://pay.example.test' } as never)
+    vi.mocked(siteService.handleContact).mockResolvedValue({ success: true } as never)
+    vi.mocked(marketplaceService.searchVehicles).mockResolvedValue({ data: [], pagination: { page: 1, pageSize: 20 } } as never)
+    vi.mocked(marketplaceService.createMarketplaceReservation).mockResolvedValue({ id: 'reservation_1' } as never)
+    vi.mocked(marketplaceService.submitReview).mockResolvedValue({ id: 'review_1' } as never)
+  })
+
+  it('rejects malformed public availability checks before site service execution', async () => {
+    const res = await request(app).post('/api/v1/site/atlas-cars/availability').send({
+      vehicleId: 'not-a-cuid',
+      startDate: '2026-07-01',
+      endDate: 'tomorrow-ish',
+    })
+
+    expect(res.status).toBe(400)
+    expect(res.body).toMatchObject({ error: 'validation_error', statusCode: 400 })
+    expect(siteService.checkAvailability).not.toHaveBeenCalled()
+  })
+
+  it('accepts valid public availability payloads and passes parsed fields explicitly', async () => {
+    const payload = {
+      vehicleId: 'ckvvehicle000000000000001',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    }
+
+    const res = await request(app).post('/api/v1/site/atlas-cars/availability').send(payload)
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { available: true, nextAvailableAt: null } })
+    expect(siteService.checkAvailability).toHaveBeenCalledWith('atlas-cars', payload.vehicleId, payload.startDate, payload.endDate)
+  })
+
+  it('rejects unsupported public payment providers before payment initialization', async () => {
+    const res = await request(app).post('/api/v1/site/atlas-cars/booking/reservation_1/pay').send({
+      provider: 'STRIPE',
+      successUrl: 'https://example.test/success',
+      failureUrl: 'https://example.test/fail',
+      accessToken: 'booking-access-token-123',
+    })
+
+    expect(res.status).toBe(400)
+    expect(siteService.initPayment).not.toHaveBeenCalled()
+  })
+
+  it('defaults site payment currency to MAD for valid public payment requests', async () => {
+    const res = await request(app).post('/api/v1/site/atlas-cars/booking/reservation_1/pay').send({
+      provider: 'PAYPAL',
+      successUrl: 'https://example.test/success',
+      failureUrl: 'https://example.test/fail',
+      accessToken: 'booking-access-token-123',
+    })
+
+    expect(res.status).toBe(200)
+    expect(siteService.initPayment).toHaveBeenCalledWith('atlas-cars', 'reservation_1', {
+      provider: 'PAYPAL',
+      currency: 'MAD',
+      successUrl: 'https://example.test/success',
+      failureUrl: 'https://example.test/fail',
+      accessToken: 'booking-access-token-123',
+    })
+  })
+
+  it('coerces marketplace search pagination and price filters', async () => {
+    const res = await request(app).get('/api/v1/marketplace/search?city=Rabat&maxPrice=500&page=2&pageSize=30')
+
+    expect(res.status).toBe(200)
+    expect(marketplaceService.searchVehicles).toHaveBeenCalledWith({
+      city: 'Rabat',
+      maxPrice: 500,
+      page: 2,
+      pageSize: 30,
+    })
+  })
+
+  it('rejects oversized marketplace pagination before search execution', async () => {
+    const res = await request(app).get('/api/v1/marketplace/search?pageSize=500')
+
+    expect(res.status).toBe(400)
+    expect(marketplaceService.searchVehicles).not.toHaveBeenCalled()
+  })
+
+  it('rejects marketplace reservations with invalid public contact data before service execution', async () => {
+    const res = await request(app).post('/api/v1/marketplace/reservations').send({
+      vehicleId: 'ckvvehicle000000000000001',
+      companySlug: 'atlas-cars',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'bad-email',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    })
+
+    expect(res.status).toBe(400)
+    expect(marketplaceService.createMarketplaceReservation).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid public review ratings before creating reviews', async () => {
+    const res = await request(app).post('/api/v1/marketplace/review/token_1').send({ overallRating: 6 })
+
+    expect(res.status).toBe(400)
+    expect(marketplaceService.submitReview).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/site-webhook-boundaries.api.test.ts b/api/src/tests/api/site-webhook-boundaries.api.test.ts
new file mode 100644
index 0000000..7042f7c
--- /dev/null
+++ b/api/src/tests/api/site-webhook-boundaries.api.test.ts
@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+vi.mock('../../modules/site/site.service', () => ({
+  getPlatformHomepage: vi.fn(),
+  getPlatformPricing: vi.fn(),
+  getBrand: vi.fn(),
+  getPublicVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getOffers: vi.fn(),
+  getBookingOptions: vi.fn(),
+  checkAvailability: vi.fn(),
+  validatePromoCode: vi.fn(),
+  createBooking: vi.fn(),
+  getBooking: vi.fn(),
+  initPayment: vi.fn(),
+  capturePaypal: vi.fn(),
+  handleContact: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as siteService from '../../modules/site/site.service'
+
+const app = createApp()
+
+describe('site and webhook API boundary contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(siteService.getPlatformPricing).mockResolvedValue({ prices: { STARTER: { MONTHLY: { MAD: 199 } } }, planFeatures: { STARTER: ['feature'] } } as never)
+    vi.mocked(siteService.checkAvailability).mockResolvedValue({ available: true, nextAvailableAt: null } as never)
+    vi.mocked(siteService.validatePromoCode).mockResolvedValue({ id: 'offer_1', promoCode: 'SUMMER' } as never)
+    vi.mocked(siteService.handleContact).mockResolvedValue({ success: true, deliveredTo: 'hello@example.test' } as never)
+  })
+
+  it('keeps removed Clerk webhook endpoint disabled even with raw webhook payloads', async () => {
+    const res = await request(app)
+      .post('/api/v1/webhooks/clerk')
+      .set('content-type', 'application/json')
+      .send(JSON.stringify({ type: 'user.created', data: { id: 'user_1' } }))
+
+    expect(res.status).toBe(410)
+    expect(res.body).toEqual({
+      error: 'disabled',
+      message: 'Clerk webhooks are disabled because Clerk has been removed from this project.',
+      statusCode: 410,
+    })
+  })
+
+  it('serves platform pricing without tenant auth', async () => {
+    const res = await request(app).get('/api/v1/site/platform/pricing')
+
+    expect(res.status).toBe(200)
+    expect(res.body.data.prices.STARTER.MONTHLY.MAD).toBe(199)
+    expect(siteService.getPlatformPricing).toHaveBeenCalledWith()
+  })
+
+  it('rejects invalid availability ranges before service execution', async () => {
+    const res = await request(app).post('/api/v1/site/atlas/availability').send({
+      vehicleId: 'vehicle_1',
+      startDate: 'not-a-date',
+      endDate: '2026-07-10T00:00:00.000Z',
+    })
+
+    expect(res.status).toBe(400)
+    expect(siteService.checkAvailability).not.toHaveBeenCalled()
+  })
+
+  it('normalizes valid availability payloads into service arguments', async () => {
+    const res = await request(app).post('/api/v1/site/atlas/availability').send({
+      vehicleId: 'cmvehicle000000000000001',
+      startDate: '2026-07-01T00:00:00.000Z',
+      endDate: '2026-07-10T00:00:00.000Z',
+    })
+
+    expect(res.status).toBe(200)
+    expect(siteService.checkAvailability).toHaveBeenCalledWith('atlas', 'cmvehicle000000000000001', '2026-07-01T00:00:00.000Z', '2026-07-10T00:00:00.000Z')
+  })
+
+  it('rejects empty promo codes and malformed contact emails before public service calls', async () => {
+    const promo = await request(app).post('/api/v1/site/atlas/book/validate-code').send({ code: '' })
+    expect(promo.status).toBe(400)
+    expect(siteService.validatePromoCode).not.toHaveBeenCalled()
+
+    const contact = await request(app).post('/api/v1/site/atlas/contact').send({ name: 'Visitor', email: 'bad-email', message: 'Hello' })
+    expect(contact.status).toBe(400)
+    expect(siteService.handleContact).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/subscription-team-boundaries.api.test.ts b/api/src/tests/api/subscription-team-boundaries.api.test.ts
new file mode 100644
index 0000000..db1f7e3
--- /dev/null
+++ b/api/src/tests/api/subscription-team-boundaries.api.test.ts
@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyDocumentAuth: (_req: any, _res: any, next: any) => next(),
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_owner', role: 'OWNER', firstName: 'Aya', lastName: 'Owner' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRole', () => ({ requireRole: () => (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../modules/subscriptions/subscription.service', () => ({
+  getPlans: vi.fn(),
+  getProviders: vi.fn(),
+  getPlanFeatures: vi.fn(),
+  getSubscription: vi.fn(),
+  getInvoices: vi.fn(),
+  getEvents: vi.fn(),
+  getEntitlement: vi.fn(),
+  startTrial: vi.fn(),
+  checkout: vi.fn(),
+  reactivate: vi.fn(),
+  changePlan: vi.fn(),
+  cancel: vi.fn(),
+  resume: vi.fn(),
+  capturePaypal: vi.fn(),
+  handleAmanpayWebhook: vi.fn(),
+  handlePaypalWebhook: vi.fn(),
+}))
+vi.mock('../../modules/team/team.service', () => ({
+  getMembers: vi.fn(),
+  getMemberStats: vi.fn(),
+  inviteEmployee: vi.fn(),
+  updateEmployeeRole: vi.fn(),
+  deactivateEmployee: vi.fn(),
+  reactivateEmployee: vi.fn(),
+  removeEmployee: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as subscriptionService from '../../modules/subscriptions/subscription.service'
+import * as teamService from '../../modules/team/team.service'
+
+const app = createApp()
+
+describe('subscription and team API validation contracts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(subscriptionService.startTrial).mockResolvedValue({ id: 'sub_trial' } as never)
+    vi.mocked(subscriptionService.checkout).mockResolvedValue({ invoice: { id: 'invoice_1' }, checkoutUrl: 'https://pay.example.test' } as never)
+    vi.mocked(subscriptionService.cancel).mockResolvedValue({ id: 'sub_1', cancelAtPeriodEnd: true } as never)
+    vi.mocked(subscriptionService.capturePaypal).mockResolvedValue({ success: true } as never)
+    vi.mocked(teamService.inviteEmployee).mockResolvedValue({ id: 'employee_2' } as never)
+    vi.mocked(teamService.updateEmployeeRole).mockResolvedValue({ id: 'employee_2', role: 'MANAGER' } as never)
+  })
+
+  it('defaults trial currency and forwards company context', async () => {
+    const res = await request(app).post('/api/v1/subscriptions/trial').send({ plan: 'STARTER', billingPeriod: 'MONTHLY' })
+
+    expect(res.status).toBe(200)
+    expect(subscriptionService.startTrial).toHaveBeenCalledWith('company_1', 'STARTER', 'MONTHLY', 'MAD')
+  })
+
+  it('rejects checkout payloads with unsupported currency before service execution', async () => {
+    const res = await request(app).post('/api/v1/subscriptions/checkout').send({
+      plan: 'PRO',
+      billingPeriod: 'ANNUAL',
+      currency: 'USD',
+      provider: 'PAYPAL',
+      successUrl: 'https://app.example.test/success',
+      failureUrl: 'https://app.example.test/failure',
+    })
+
+    expect(res.status).toBe(400)
+    expect(subscriptionService.checkout).not.toHaveBeenCalled()
+  })
+
+  it('defaults cancellation mode at the route boundary', async () => {
+    const res = await request(app).post('/api/v1/subscriptions/cancel').send({ reason: 'not needed' })
+
+    expect(res.status).toBe(200)
+    expect(subscriptionService.cancel).toHaveBeenCalledWith('company_1', 'period_end', 'not needed')
+  })
+
+  it('requires PayPal order id for capture before service execution', async () => {
+    const res = await request(app).post('/api/v1/subscriptions/capture-paypal').send({})
+
+    expect(res.status).toBe(400)
+    expect(subscriptionService.capturePaypal).not.toHaveBeenCalled()
+  })
+
+  it('normalizes team invites through validation before service execution', async () => {
+    const res = await request(app).post('/api/v1/team/invite').send({
+      firstName: 'Aya',
+      lastName: 'Agent',
+      email: 'agent@example.test',
+      role: 'AGENT',
+    })
+
+    expect(res.status).toBe(201)
+    expect(teamService.inviteEmployee).toHaveBeenCalledWith('company_1', 'employee_owner', {
+      firstName: 'Aya',
+      lastName: 'Agent',
+      email: 'agent@example.test',
+      role: 'AGENT',
+    })
+  })
+
+  it('rejects owner role assignment before team service execution', async () => {
+    const res = await request(app).patch('/api/v1/team/employee_2/role').send({ role: 'OWNER' })
+
+    expect(res.status).toBe(400)
+    expect(teamService.updateEmployeeRole).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/api/subscriptions.api.test.ts b/api/src/tests/api/subscriptions.api.test.ts
new file mode 100644
index 0000000..5aa9f82
--- /dev/null
+++ b/api/src/tests/api/subscriptions.api.test.ts
@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {},
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: {
+    on: vi.fn(),
+    get: vi.fn(),
+    set: vi.fn(),
+    del: vi.fn(),
+    quit: vi.fn(),
+  },
+}))
+
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn(),
+  verifyWebhookSignature: vi.fn(),
+}))
+
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn(),
+  verifyWebhookEvent: vi.fn(),
+}))
+
+vi.mock('../../modules/subscriptions/subscription.service', () => ({
+  getPlans: vi.fn(),
+  getProviders: vi.fn(),
+  getPlanFeatures: vi.fn(),
+  handleAmanpayWebhook: vi.fn(),
+  handlePaypalWebhook: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as amanpay from '../../services/amanpayService'
+import * as paypal from '../../services/paypalService'
+import * as service from '../../modules/subscriptions/subscription.service'
+
+const app = createApp()
+
+describe('subscriptions public API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(service.getProviders).mockReturnValue({ amanpay: false, paypal: true })
+    vi.mocked(service.getPlans).mockResolvedValue({ STARTER: { MONTHLY: { MAD: 9900 } } } as never)
+    vi.mocked(service.getPlanFeatures).mockResolvedValue([
+      { id: 'feature_1', plan: 'STARTER', label: 'Vehicles', sortOrder: 1 },
+    ] as never)
+  })
+
+  it('GET /api/v1/subscriptions/providers exposes configured payment provider availability', async () => {
+    const res = await request(app).get('/api/v1/subscriptions/providers')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { amanpay: false, paypal: true } })
+    expect(service.getProviders).toHaveBeenCalledOnce()
+  })
+
+  it('GET /api/v1/subscriptions/plans wraps plan pricing in the standard API envelope', async () => {
+    const res = await request(app).get('/api/v1/subscriptions/plans')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ data: { STARTER: { MONTHLY: { MAD: 9900 } } } })
+    expect(service.getPlans).toHaveBeenCalledOnce()
+  })
+
+  it('GET /api/v1/subscriptions/features returns plan feature rows through the public router', async () => {
+    const res = await request(app).get('/api/v1/subscriptions/features')
+
+    expect(res.status).toBe(200)
+    expect(res.body.data).toEqual([
+      { id: 'feature_1', plan: 'STARTER', label: 'Vehicles', sortOrder: 1 },
+    ])
+  })
+
+  it('rejects AmanPay webhooks when provider config or signature validation fails', async () => {
+    vi.mocked(amanpay.isConfigured).mockReturnValue(true)
+    vi.mocked(amanpay.verifyWebhookSignature).mockReturnValue(false)
+
+    const res = await request(app)
+      .post('/api/v1/subscriptions/webhooks/amanpay')
+      .set('x-amanpay-signature', 'bad-signature')
+      .send({ id: 'txn_1', status: 'PAID' })
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'invalid_signature' })
+    expect(service.handleAmanpayWebhook).not.toHaveBeenCalled()
+  })
+
+  it('accepts verified PayPal webhooks and delegates handling to the subscription service', async () => {
+    vi.mocked(paypal.isConfigured).mockReturnValue(true)
+    vi.mocked(paypal.verifyWebhookEvent).mockResolvedValue(true)
+
+    const payload = { event_type: 'PAYMENT.CAPTURE.COMPLETED', resource: { id: 'capture_1' } }
+    const res = await request(app)
+      .post('/api/v1/subscriptions/webhooks/paypal')
+      .send(payload)
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({ received: true })
+    expect(service.handlePaypalWebhook).toHaveBeenCalledWith(payload, JSON.stringify(payload))
+  })
+})
diff --git a/api/src/tests/api/vehicle-pricing.api.test.ts b/api/src/tests/api/vehicle-pricing.api.test.ts
new file mode 100644
index 0000000..e990ff1
--- /dev/null
+++ b/api/src/tests/api/vehicle-pricing.api.test.ts
@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({ default: { verify: vi.fn() } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn() },
+    company: { findUnique: vi.fn() },
+  },
+}))
+vi.mock('../../modules/vehicles/vehicle.service', () => ({
+  listVehicles: vi.fn(),
+  getVehicle: vi.fn(),
+  createVehicle: vi.fn(),
+  updateVehicle: vi.fn(),
+  deleteVehicle: vi.fn(),
+  uploadPhotos: vi.fn(),
+  deletePhoto: vi.fn(),
+  setStatus: vi.fn(),
+  setPublished: vi.fn(),
+  checkAvailability: vi.fn(),
+  getCalendar: vi.fn(),
+  createCalendarBlock: vi.fn(),
+  deleteCalendarBlock: vi.fn(),
+  getMaintenanceLogs: vi.fn(),
+  createMaintenanceLog: vi.fn(),
+  getVehiclePricing: vi.fn(),
+  updateVehiclePricing: vi.fn(),
+  createVehiclePricingRule: vi.fn(),
+  updateVehiclePricingRule: vi.fn(),
+  deleteVehiclePricingRule: vi.fn(),
+}))
+
+import request from 'supertest'
+import jwt from 'jsonwebtoken'
+import { createApp } from '../../app'
+import { prisma } from '../../lib/prisma'
+import * as vehicleService from '../../modules/vehicles/vehicle.service'
+
+const app = createApp()
+
+function employee(role = 'MANAGER') {
+  return {
+    id: 'employee_1',
+    role,
+    isActive: true,
+    companyId: 'company_1',
+    company: { id: 'company_1', status: 'ACTIVE' },
+  }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  process.env.JWT_SECRET = 'test-secret'
+  vi.mocked(jwt.verify).mockReturnValue({ sub: 'employee_1', type: 'employee' } as never)
+  vi.mocked(prisma.employee.findUnique).mockResolvedValue(employee() as never)
+  vi.mocked(prisma.company.findUnique).mockResolvedValue({ id: 'company_1', status: 'ACTIVE' } as never)
+})
+
+describe('vehicle pricing API contracts', () => {
+  it('allows active tenants to read vehicle pricing', async () => {
+    vi.mocked(vehicleService.getVehiclePricing).mockResolvedValue({
+      configuration: { id: 'pricing_config_1', baseDailyRate: 4000 },
+      rules: [],
+      history: [],
+      preview: { today: { dailyRate: 4000 }, next14Days: [] },
+    } as never)
+
+    const res = await request(app)
+      .get('/api/v1/vehicles/vehicle_1/pricing')
+      .set('Authorization', 'Bearer employee-token')
+
+    expect(res.status).toBe(200)
+    expect(res.body.data.configuration.id).toBe('pricing_config_1')
+    expect(vehicleService.getVehiclePricing).toHaveBeenCalledWith('vehicle_1', 'company_1')
+  })
+
+  it('rejects invalid pricing config payloads before updating pricing', async () => {
+    const res = await request(app)
+      .put('/api/v1/vehicles/vehicle_1/pricing')
+      .set('Authorization', 'Bearer employee-token')
+      .send({
+        pricingMode: 'CHAOS',
+        baseDailyRate: -1,
+        maxDailyPriceMovementPct: 101,
+      })
+
+    expect(res.status).toBe(400)
+    expect(vehicleService.updateVehiclePricing).not.toHaveBeenCalled()
+  })
+
+  it('passes parsed pricing configuration and employee identity to the service', async () => {
+    vi.mocked(vehicleService.updateVehiclePricing).mockResolvedValue({ configuration: { id: 'pricing_config_1' }, rules: [], history: [], preview: {} } as never)
+
+    const payload = {
+      pricingMode: 'AUTOMATIC',
+      baseDailyRate: 4500,
+      weeklyRate: 27000,
+      weekendRate: null,
+      maxDailyPriceMovementPct: 15,
+      automaticPricingEnabled: true,
+      approvalRequired: true,
+      note: 'Demand change',
+    }
+
+    const res = await request(app)
+      .put('/api/v1/vehicles/vehicle_1/pricing')
+      .set('Authorization', 'Bearer employee-token')
+      .send(payload)
+
+    expect(res.status).toBe(200)
+    expect(vehicleService.updateVehiclePricing).toHaveBeenCalledWith('vehicle_1', 'company_1', 'employee_1', expect.objectContaining(payload))
+  })
+
+  it('rejects pricing rules with malformed dates before service execution', async () => {
+    const res = await request(app)
+      .post('/api/v1/vehicles/vehicle_1/pricing/rules')
+      .set('Authorization', 'Bearer employee-token')
+      .send({
+        name: 'Holiday',
+        ruleType: 'HOLIDAY',
+        startDate: 'July first-ish',
+        endDate: '2026-07-10',
+        dailyRate: 6000,
+      })
+
+    expect(res.status).toBe(400)
+    expect(vehicleService.createVehiclePricingRule).not.toHaveBeenCalled()
+  })
+
+  it('requires manager access for pricing mutations', async () => {
+    vi.mocked(prisma.employee.findUnique).mockResolvedValue(employee('AGENT') as never)
+
+    const res = await request(app)
+      .delete('/api/v1/vehicles/vehicle_1/pricing/rules/rule_1')
+      .set('Authorization', 'Bearer employee-token')
+
+    expect(res.status).toBe(403)
+    expect(vehicleService.deleteVehiclePricingRule).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/e2e/admin-billing-boundaries.e2e.test.ts b/api/src/tests/e2e/admin-billing-boundaries.e2e.test.ts
new file mode 100644
index 0000000..6a1af5d
--- /dev/null
+++ b/api/src/tests/e2e/admin-billing-boundaries.e2e.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({ default: { verify: vi.fn(() => ({ sub: 'admin_1', type: 'admin' })) } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    adminUser: { findUnique: vi.fn().mockResolvedValue({ id: 'admin_1', role: 'FINANCE', isActive: true, totpEnabled: true }) },
+  },
+}))
+vi.mock('../../modules/admin/admin.service', () => ({
+  getBilling: vi.fn(),
+  getInvoicePdf: vi.fn(),
+  updateBillingAccount: vi.fn(),
+  createBillingInvoice: vi.fn(),
+  finalizeBillingInvoice: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as adminService from '../../modules/admin/admin.service'
+
+process.env.JWT_SECRET = 'test-secret'
+const app = createApp()
+
+describe('admin billing e2e boundaries', () => {
+  it('rejects anonymous billing access and malformed invoice creation without touching services', async () => {
+    const anonymous = await request(app).get('/api/v1/admin/billing')
+    expect(anonymous.status).toBe(401)
+    expect(adminService.getBilling).not.toHaveBeenCalled()
+
+    const malformed = await request(app)
+      .post('/api/v1/admin/billing/accounts/billing_account_1/invoices')
+      .set('Authorization', 'Bearer admin-token')
+      .send({ invoiceType: 'MADE_UP', lineItems: [{ quantity: 0, unitAmount: 100 }] })
+
+    expect(malformed.status).toBe(400)
+    expect(adminService.createBillingInvoice).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/e2e/admin-menu-boundaries.e2e.test.ts b/api/src/tests/e2e/admin-menu-boundaries.e2e.test.ts
new file mode 100644
index 0000000..84a137c
--- /dev/null
+++ b/api/src/tests/e2e/admin-menu-boundaries.e2e.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireAdminAuth', () => ({
+  requireAdminAuth: (req: any, _res: any, next: any) => {
+    req.admin = { id: 'admin_1', role: 'VIEWER', isActive: true }
+    next()
+  },
+  requireAdminRole: () => (_req: any, res: any) => res.status(403).json({ code: 'forbidden' }),
+  requireFreshAdmin2FA: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../modules/menu/menu.service', () => ({
+  listMenuItems: vi.fn(),
+  createMenuItem: vi.fn(),
+  getMenuItem: vi.fn(),
+  updateMenuItem: vi.fn(),
+  setMenuItemStatus: vi.fn(),
+  deleteMenuItem: vi.fn(),
+  assignMenuItemToPlans: vi.fn(),
+  removeMenuItemFromPlan: vi.fn(),
+  assignMenuItemToCompanies: vi.fn(),
+  removeMenuItemFromCompany: vi.fn(),
+  previewCompanyMenu: vi.fn(),
+  listMenuAuditLogs: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('admin menu e2e boundary smoke', () => {
+  it('keeps menu administration behind admin role checks', async () => {
+    const res = await request(app)
+      .post('/api/v1/admin/menu-items')
+      .send({ label: 'Fleet', itemType: 'INTERNAL_PAGE', routeOrUrl: '/fleet' })
+
+    expect(res.status).toBe(403)
+    expect(res.body).toMatchObject({ code: 'forbidden' })
+  })
+})
diff --git a/api/src/tests/e2e/api-smoke.e2e.test.ts b/api/src/tests/e2e/api-smoke.e2e.test.ts
new file mode 100644
index 0000000..e145487
--- /dev/null
+++ b/api/src/tests/e2e/api-smoke.e2e.test.ts
@@ -0,0 +1,51 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {},
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: {
+    on: vi.fn(),
+    get: vi.fn(),
+    set: vi.fn(),
+    del: vi.fn(),
+    quit: vi.fn(),
+  },
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('API smoke e2e', () => {
+  it('serves health, API index, machine docs, OpenAPI, and Swagger UI in one client flow', async () => {
+    const health = await request(app).get('/health')
+    expect(health.status).toBe(200)
+    expect(health.body.status).toBe('ok')
+
+    const index = await request(app).get('/api/v1')
+    expect(index.status).toBe(200)
+    expect(index.body.docs).toBe('/api/v1/docs')
+    expect(index.body.openapi).toBeUndefined()
+    expect(index.body.openApi).toBe('/api/v1/openapi.json')
+
+    const docs = await request(app).get(index.body.docs)
+    expect(docs.status).toBe(200)
+    expect(docs.body.routes.length).toBeGreaterThan(5)
+
+    const openApi = await request(app).get(docs.body.openApi)
+    expect(openApi.status).toBe(200)
+    expect(openApi.body.info).toEqual(expect.objectContaining({ title: expect.any(String) }))
+
+    const swaggerRedirect = await request(app).get(docs.body.swaggerUi)
+    expect(swaggerRedirect.status).toBe(301)
+    expect(swaggerRedirect.headers.location).toBe('/docs/')
+
+    const swagger = await request(app).get('/docs/')
+    expect(swagger.status).toBe(200)
+    expect(swagger.headers['content-type']).toContain('text/html')
+  })
+})
diff --git a/api/src/tests/e2e/auth-public-disabled.e2e.test.ts b/api/src/tests/e2e/auth-public-disabled.e2e.test.ts
new file mode 100644
index 0000000..c264cbb
--- /dev/null
+++ b/api/src/tests/e2e/auth-public-disabled.e2e.test.ts
@@ -0,0 +1,24 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('public auth disabled e2e smoke', () => {
+  it('documents the public renter auth product boundary through real routing and error middleware', async () => {
+    const signup = await request(app).post('/api/v1/auth/renter/signup').send({})
+    const login = await request(app).post('/api/v1/auth/renter/login').send({})
+
+    expect(signup.status).toBe(403)
+    expect(signup.body.error).toBe('renter_signup_disabled')
+    expect(login.status).toBe(403)
+    expect(login.body.error).toBe('renter_login_disabled')
+  })
+})
diff --git a/api/src/tests/e2e/company-configuration-boundaries.e2e.test.ts b/api/src/tests/e2e/company-configuration-boundaries.e2e.test.ts
new file mode 100644
index 0000000..b454f2c
--- /dev/null
+++ b/api/src/tests/e2e/company-configuration-boundaries.e2e.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn() },
+    company: { findUnique: vi.fn() },
+  },
+}))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('company configuration protected boundaries', () => {
+  it('does not expose company brand settings without company authentication', async () => {
+    const res = await request(app).get('/api/v1/companies/me/brand')
+
+    expect(res.status).toBe(401)
+    expect(res.body.error).toBe('unauthenticated')
+  })
+})
diff --git a/api/src/tests/e2e/customer-boundaries.e2e.test.ts b/api/src/tests/e2e/customer-boundaries.e2e.test.ts
new file mode 100644
index 0000000..7a0b20a
--- /dev/null
+++ b/api/src/tests/e2e/customer-boundaries.e2e.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', firstName: 'Aya', lastName: 'Manager', role: 'MANAGER' }
+    next()
+  },
+  requireCompanyDocumentAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', firstName: 'Aya', lastName: 'Manager', role: 'MANAGER' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({ requireTenant: (req: any, _res: any, next: any) => { req.companyId = 'company_1'; next() } }))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRole', () => ({ requireRole: () => (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../modules/customers/customer.service', () => ({
+  createCustomer: vi.fn(),
+  approveLicense: vi.fn(),
+  listCustomers: vi.fn(),
+  getCustomer: vi.fn(),
+  updateCustomer: vi.fn(),
+  flagCustomer: vi.fn(),
+  unflagCustomer: vi.fn(),
+  validateCustomerLicense: vi.fn(),
+  uploadLicenseImage: vi.fn(),
+  getLicenseImageFile: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as customerService from '../../modules/customers/customer.service'
+
+const app = createApp()
+
+describe('customer boundary e2e smoke', () => {
+  it('rejects malformed customer and license approval payloads before mocked services run', async () => {
+    const badCustomer = await request(app).post('/api/v1/customers').send({ firstName: '', lastName: 'Haddad', email: 'aya@example.test' })
+    expect(badCustomer.status).toBe(400)
+    expect(customerService.createCustomer).not.toHaveBeenCalled()
+
+    const badApproval = await request(app).post('/api/v1/customers/customer_1/approve-license').send({ decision: 'APPROVED_BUT_NOT_THE_ENUM' })
+    expect(badApproval.status).toBe(400)
+    expect(customerService.approveLicense).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/e2e/employee-marketplace-boundaries.e2e.test.ts b/api/src/tests/e2e/employee-marketplace-boundaries.e2e.test.ts
new file mode 100644
index 0000000..808f2fe
--- /dev/null
+++ b/api/src/tests/e2e/employee-marketplace-boundaries.e2e.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('employee and marketplace public boundary smoke', () => {
+  it('rejects malformed employee login payloads without leaking internals', async () => {
+    const res = await request(app).post('/api/v1/auth/employee/login').send({ email: 'not-an-email', password: 'x' })
+
+    expect(res.status).toBe(400)
+    expect(JSON.stringify(res.body)).not.toContain('stack')
+  })
+
+  it('rejects invalid public review payloads without executing private infrastructure', async () => {
+    const res = await request(app).post('/api/v1/marketplace/review/token_123').send({ overallRating: 0 })
+
+    expect(res.status).toBe(400)
+    expect(JSON.stringify(res.body)).not.toContain('Prisma')
+  })
+})
diff --git a/api/src/tests/e2e/feedback-offer-boundaries.e2e.test.ts b/api/src/tests/e2e/feedback-offer-boundaries.e2e.test.ts
new file mode 100644
index 0000000..c064cb8
--- /dev/null
+++ b/api/src/tests/e2e/feedback-offer-boundaries.e2e.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('feedback and offer unauthenticated smoke boundaries', () => {
+  it('keeps company feedback and offer management routes behind authentication', async () => {
+    const reviewReply = await request(app).patch('/api/v1/reviews/review_1/reply').send({ companyReply: 'Thanks' })
+    const complaintCreate = await request(app).post('/api/v1/complaints').send({ category: 'BILLING', subject: 'Charge issue' })
+    const offerCreate = await request(app).post('/api/v1/offers').send({})
+
+    expect(reviewReply.status).toBe(401)
+    expect(complaintCreate.status).toBe(401)
+    expect(offerCreate.status).toBe(401)
+  })
+})
diff --git a/api/src/tests/e2e/operations-auth-boundaries.e2e.test.ts b/api/src/tests/e2e/operations-auth-boundaries.e2e.test.ts
new file mode 100644
index 0000000..4361c70
--- /dev/null
+++ b/api/src/tests/e2e/operations-auth-boundaries.e2e.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: { employee: { findUnique: vi.fn() }, renter: { findUnique: vi.fn() } } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('operations auth-boundary e2e smoke', () => {
+  it('keeps operational company routes behind auth while leaving the health endpoint public', async () => {
+    const health = await request(app).get('/health')
+    expect(health.status).toBe(200)
+
+    for (const path of ['/api/v1/offers', '/api/v1/team/stats', '/api/v1/notifications/company', '/api/v1/notifications/unread-count']) {
+      const res = await request(app).get(path)
+      expect(res.status).toBe(401)
+    }
+  })
+})
diff --git a/api/src/tests/e2e/operations-validation-smoke.e2e.test.ts b/api/src/tests/e2e/operations-validation-smoke.e2e.test.ts
new file mode 100644
index 0000000..55ac87f
--- /dev/null
+++ b/api/src/tests/e2e/operations-validation-smoke.e2e.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireCompanyAuth', () => ({
+  requireCompanyAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+  requireCompanyDocumentAuth: (req: any, _res: any, next: any) => {
+    req.employee = { id: 'employee_1', role: 'OWNER' }
+    next()
+  },
+}))
+vi.mock('../../middleware/requireTenant', () => ({
+  requireTenant: (req: any, _res: any, next: any) => {
+    req.companyId = 'company_1'
+    next()
+  },
+}))
+vi.mock('../../middleware/requireSubscription', () => ({ requireSubscription: (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../middleware/requireRole', () => ({ requireRole: () => (_req: any, _res: any, next: any) => next() }))
+vi.mock('../../modules/team/team.service', () => ({ inviteEmployee: vi.fn(), updateEmployeeRole: vi.fn(), getMembers: vi.fn(), getMemberStats: vi.fn() }))
+vi.mock('../../modules/notifications/notification.service', () => ({ setPreferences: vi.fn(), getPreferences: vi.fn(), listCompany: vi.fn(), countUnread: vi.fn() }))
+vi.mock('../../modules/analytics/analytics.service', () => ({ getReport: vi.fn(), getSummary: vi.fn(), getDashboard: vi.fn(), getSources: vi.fn() }))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as teamService from '../../modules/team/team.service'
+import * as notificationService from '../../modules/notifications/notification.service'
+
+const app = createApp()
+
+describe('operations validation e2e smoke', () => {
+  it('rejects malformed team and notification payloads before mocked services run', async () => {
+    const badInvite = await request(app).post('/api/v1/team/invite').send({
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'not-email',
+      role: 'AGENT',
+    })
+    expect(badInvite.status).toBe(400)
+    expect(teamService.inviteEmployee).not.toHaveBeenCalled()
+
+    const badPrefs = await request(app).patch('/api/v1/notifications/company/preferences').send([
+      { notificationType: 'BOOKING_CREATED', channel: 'EMAIL', enabled: 'yes-human-chaos' },
+    ])
+    expect(badPrefs.status).toBe(400)
+    expect(notificationService.setPreferences).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/e2e/payments-webhook-public.e2e.test.ts b/api/src/tests/e2e/payments-webhook-public.e2e.test.ts
new file mode 100644
index 0000000..7fd240a
--- /dev/null
+++ b/api/src/tests/e2e/payments-webhook-public.e2e.test.ts
@@ -0,0 +1,29 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn().mockReturnValue(false),
+  verifyWebhookSignature: vi.fn().mockReturnValue(false),
+}))
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn().mockReturnValue(false),
+  verifyWebhookEvent: vi.fn().mockResolvedValue(false),
+}))
+
+import { describe, expect, it } from 'vitest'
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('payments webhook public e2e smoke', () => {
+  it('does not process anonymous AmanPay webhook payloads without a valid provider configuration/signature', async () => {
+    const res = await request(app)
+      .post('/api/v1/payments/webhooks/amanpay')
+      .send({ transaction_id: 'untrusted_txn', status: 'PAID' })
+
+    expect(res.status).toBe(401)
+    expect(res.body).toEqual({ error: 'invalid_signature' })
+  })
+})
diff --git a/api/src/tests/e2e/protected-auth-boundaries.e2e.test.ts b/api/src/tests/e2e/protected-auth-boundaries.e2e.test.ts
new file mode 100644
index 0000000..c948740
--- /dev/null
+++ b/api/src/tests/e2e/protected-auth-boundaries.e2e.test.ts
@@ -0,0 +1,33 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn() },
+    company: { findUnique: vi.fn() },
+    adminUser: { findUnique: vi.fn() },
+  },
+}))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('protected auth boundaries e2e smoke', () => {
+  it('keeps company, tenant, and admin protected surfaces closed without credentials', async () => {
+    const vehicles = await request(app).get('/api/v1/vehicles')
+    const team = await request(app).get('/api/v1/team')
+    const admin = await request(app).get('/api/v1/admin/companies')
+
+    expect(vehicles.status).toBe(401)
+    expect(vehicles.body.error).toBe('unauthenticated')
+    expect(team.status).toBe(401)
+    expect(team.body.error).toBe('unauthenticated')
+    expect(admin.status).toBe(401)
+    expect(admin.body.error).toBe('unauthenticated')
+  })
+})
diff --git a/api/src/tests/e2e/public-validation-smoke.e2e.test.ts b/api/src/tests/e2e/public-validation-smoke.e2e.test.ts
new file mode 100644
index 0000000..5faa1e8
--- /dev/null
+++ b/api/src/tests/e2e/public-validation-smoke.e2e.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../middleware/requireRenterAuth', () => ({
+  requireRenterAuth: (_req: any, _res: any, next: any) => next(),
+  optionalRenterAuth: (_req: any, _res: any, next: any) => next(),
+}))
+vi.mock('../../modules/site/site.service', () => ({
+  getPlatformHomepage: vi.fn(),
+  getPlatformPricing: vi.fn(),
+  getBrand: vi.fn(),
+  getPublicVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getOffers: vi.fn(),
+  getBookingOptions: vi.fn(),
+  checkAvailability: vi.fn(),
+  validatePromoCode: vi.fn(),
+  createBooking: vi.fn(),
+  getBooking: vi.fn(),
+  initPayment: vi.fn(),
+  capturePaypal: vi.fn(),
+  handleContact: vi.fn(),
+}))
+vi.mock('../../modules/marketplace/marketplace.service', () => ({
+  getPublicOffers: vi.fn(),
+  getCities: vi.fn(),
+  getListedCompanies: vi.fn(),
+  searchVehicles: vi.fn(),
+  createMarketplaceReservation: vi.fn(),
+  getReviewContext: vi.fn(),
+  submitReview: vi.fn(),
+  validateOfferCode: vi.fn(),
+  getCompanyPage: vi.fn(),
+  getCompanyReviews: vi.fn(),
+  getCompanyVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getCompanyOffers: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as siteService from '../../modules/site/site.service'
+import * as marketplaceService from '../../modules/marketplace/marketplace.service'
+
+const app = createApp()
+
+describe('public validation e2e smoke', () => {
+  it('rejects bad anonymous booking, payment, and review payloads without crossing service boundaries', async () => {
+    const booking = await request(app).post('/api/v1/site/atlas-cars/book').send({ email: 'not-enough' })
+    expect(booking.status).toBe(400)
+    expect(siteService.createBooking).not.toHaveBeenCalled()
+
+    const payment = await request(app).post('/api/v1/site/atlas-cars/booking/reservation_1/pay').send({
+      provider: 'PAYPAL',
+      successUrl: 'not-a-url',
+      failureUrl: 'also-not-a-url',
+    })
+    expect(payment.status).toBe(400)
+    expect(siteService.initPayment).not.toHaveBeenCalled()
+
+    const review = await request(app).post('/api/v1/marketplace/review/token_1').send({ overallRating: 0 })
+    expect(review.status).toBe(400)
+    expect(marketplaceService.submitReview).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/e2e/site-webhook-boundaries.e2e.test.ts b/api/src/tests/e2e/site-webhook-boundaries.e2e.test.ts
new file mode 100644
index 0000000..619e5b7
--- /dev/null
+++ b/api/src/tests/e2e/site-webhook-boundaries.e2e.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({ redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() } }))
+vi.mock('../../modules/site/site.service', () => ({
+  getPlatformHomepage: vi.fn(async () => ({ hero: { title: 'Rent smarter' } })),
+  getPlatformPricing: vi.fn(async () => ({ prices: {}, planFeatures: {} })),
+  getBrand: vi.fn(),
+  getPublicVehicles: vi.fn(),
+  getVehicleDetail: vi.fn(),
+  getOffers: vi.fn(),
+  getBookingOptions: vi.fn(),
+  checkAvailability: vi.fn(),
+  validatePromoCode: vi.fn(),
+  createBooking: vi.fn(),
+  getBooking: vi.fn(),
+  initPayment: vi.fn(),
+  capturePaypal: vi.fn(),
+  handleContact: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('site and webhook public e2e smoke', () => {
+  it('allows public platform reads while leaving legacy Clerk webhook permanently disabled', async () => {
+    const homepage = await request(app).get('/api/v1/site/platform/homepage')
+    expect(homepage.status).toBe(200)
+    expect(homepage.body.data.hero.title).toBe('Rent smarter')
+
+    const webhook = await request(app)
+      .post('/api/v1/webhooks/clerk')
+      .set('content-type', 'application/json')
+      .send(JSON.stringify({ type: 'organization.updated' }))
+    expect(webhook.status).toBe(410)
+    expect(webhook.body.error).toBe('disabled')
+  })
+})
diff --git a/api/src/tests/e2e/storage-boundaries.e2e.test.ts b/api/src/tests/e2e/storage-boundaries.e2e.test.ts
new file mode 100644
index 0000000..df73274
--- /dev/null
+++ b/api/src/tests/e2e/storage-boundaries.e2e.test.ts
@@ -0,0 +1,34 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+import { describe, expect, it, vi } from 'vitest'
+
+const storageRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'rdg-e2e-storage-'))
+process.env.FILE_STORAGE_ROOT = storageRoot
+process.env.NODE_ENV = 'test'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('storage boundary e2e smoke', () => {
+  it('serves public storage assets cross-origin but hides customer identity document paths', async () => {
+    const publicDir = path.join(storageRoot, 'public', 'companies', 'company_1', 'vehicles')
+    fs.mkdirSync(publicDir, { recursive: true })
+    fs.writeFileSync(path.join(publicDir, 'vehicle_1.jpg'), 'image-bytes')
+
+    const asset = await request(app).get('/storage/companies/company_1/vehicles/vehicle_1.jpg')
+    expect(asset.status).toBe(200)
+    expect(asset.headers['cross-origin-resource-policy']).toBe('cross-origin')
+    expect(asset.body.toString()).toBe('image-bytes')
+
+    const protectedDoc = await request(app).get('/storage/companies/company_1/customers/customer_1/license.jpg')
+    expect(protectedDoc.status).toBe(404)
+  })
+})
diff --git a/api/src/tests/e2e/subscription-team-boundaries.e2e.test.ts b/api/src/tests/e2e/subscription-team-boundaries.e2e.test.ts
new file mode 100644
index 0000000..f8e7dac
--- /dev/null
+++ b/api/src/tests/e2e/subscription-team-boundaries.e2e.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({ prisma: {} }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('subscription and team public boundary smoke', () => {
+  it('rejects malformed protected subscription checkout without leaking internals', async () => {
+    const res = await request(app).post('/api/v1/subscriptions/checkout').send({ provider: 'PAYPAL' })
+
+    expect([400, 401]).toContain(res.status)
+    expect(JSON.stringify(res.body)).not.toContain('stack')
+  })
+})
diff --git a/api/src/tests/e2e/subscriptions-public.e2e.test.ts b/api/src/tests/e2e/subscriptions-public.e2e.test.ts
new file mode 100644
index 0000000..668ba12
--- /dev/null
+++ b/api/src/tests/e2e/subscriptions-public.e2e.test.ts
@@ -0,0 +1,58 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    pricingConfig: { findMany: vi.fn().mockResolvedValue([]) },
+    planFeature: { findMany: vi.fn().mockResolvedValue([]) },
+  },
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: {
+    on: vi.fn(),
+    get: vi.fn(),
+    set: vi.fn(),
+    del: vi.fn(),
+    quit: vi.fn(),
+  },
+}))
+
+vi.mock('../../services/amanpayService', () => ({
+  isConfigured: vi.fn().mockReturnValue(false),
+  verifyWebhookSignature: vi.fn().mockReturnValue(false),
+  createCheckout: vi.fn(),
+}))
+
+vi.mock('../../services/paypalService', () => ({
+  isConfigured: vi.fn().mockReturnValue(false),
+  verifyWebhookEvent: vi.fn().mockResolvedValue(false),
+  createOrder: vi.fn(),
+  captureOrder: vi.fn(),
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('subscriptions public e2e smoke', () => {
+  it('lets an anonymous client inspect providers, plans, and features without crossing authenticated subscription routes', async () => {
+    const providers = await request(app).get('/api/v1/subscriptions/providers')
+    expect(providers.status).toBe(200)
+    expect(providers.body).toEqual({ data: { amanpay: false, paypal: false } })
+
+    const plans = await request(app).get('/api/v1/subscriptions/plans')
+    expect(plans.status).toBe(200)
+    expect(plans.body.data).toHaveProperty('STARTER')
+    expect(plans.body.data).toHaveProperty('GROWTH')
+    expect(plans.body.data).toHaveProperty('PRO')
+
+    const features = await request(app).get('/api/v1/subscriptions/features')
+    expect(features.status).toBe(200)
+    expect(features.body).toEqual({ data: [] })
+
+    const me = await request(app).get('/api/v1/subscriptions/me')
+    expect(me.status).toBe(401)
+  })
+})
diff --git a/api/src/tests/e2e/vehicle-pricing-boundaries.e2e.test.ts b/api/src/tests/e2e/vehicle-pricing-boundaries.e2e.test.ts
new file mode 100644
index 0000000..909e2a1
--- /dev/null
+++ b/api/src/tests/e2e/vehicle-pricing-boundaries.e2e.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('jsonwebtoken', () => ({ default: { verify: vi.fn(() => ({ sub: 'employee_1', type: 'employee' })) } }))
+vi.mock('../../lib/redis', () => ({
+  redis: { on: vi.fn(), get: vi.fn(), set: vi.fn(), del: vi.fn(), quit: vi.fn() },
+}))
+vi.mock('../../lib/prisma', () => ({
+  prisma: {
+    employee: { findUnique: vi.fn().mockResolvedValue({ id: 'employee_1', role: 'MANAGER', isActive: true, companyId: 'company_1', company: { id: 'company_1', status: 'ACTIVE' } }) },
+    company: { findUnique: vi.fn().mockResolvedValue({ id: 'company_1', status: 'ACTIVE' }) },
+  },
+}))
+vi.mock('../../modules/vehicles/vehicle.service', () => ({
+  listVehicles: vi.fn(),
+  getVehicle: vi.fn(),
+  createVehicle: vi.fn(),
+  updateVehicle: vi.fn(),
+  deleteVehicle: vi.fn(),
+  uploadPhotos: vi.fn(),
+  deletePhoto: vi.fn(),
+  setStatus: vi.fn(),
+  setPublished: vi.fn(),
+  checkAvailability: vi.fn(),
+  getCalendar: vi.fn(),
+  createCalendarBlock: vi.fn(),
+  deleteCalendarBlock: vi.fn(),
+  getMaintenanceLogs: vi.fn(),
+  createMaintenanceLog: vi.fn(),
+  getVehiclePricing: vi.fn(),
+  updateVehiclePricing: vi.fn(),
+  createVehiclePricingRule: vi.fn(),
+  updateVehiclePricingRule: vi.fn(),
+  deleteVehiclePricingRule: vi.fn(),
+}))
+
+import request from 'supertest'
+import { createApp } from '../../app'
+import * as vehicleService from '../../modules/vehicles/vehicle.service'
+
+process.env.JWT_SECRET = 'test-secret'
+const app = createApp()
+
+describe('vehicle pricing e2e boundaries', () => {
+  it('rejects anonymous and malformed pricing requests without invoking pricing services', async () => {
+    const anonymous = await request(app).get('/api/v1/vehicles/vehicle_1/pricing')
+    expect(anonymous.status).toBe(401)
+    expect(vehicleService.getVehiclePricing).not.toHaveBeenCalled()
+
+    const malformedConfig = await request(app)
+      .put('/api/v1/vehicles/vehicle_1/pricing')
+      .set('Authorization', 'Bearer employee-token')
+      .send({ pricingMode: 'AUTOMATIC', baseDailyRate: -50 })
+
+    expect(malformedConfig.status).toBe(400)
+    expect(vehicleService.updateVehiclePricing).not.toHaveBeenCalled()
+
+    const malformedRule = await request(app)
+      .post('/api/v1/vehicles/vehicle_1/pricing/rules')
+      .set('Authorization', 'Bearer employee-token')
+      .send({ name: '', startDate: 'not-a-date', endDate: 'also-bad' })
+
+    expect(malformedRule.status).toBe(400)
+    expect(vehicleService.createVehiclePricingRule).not.toHaveBeenCalled()
+  })
+})
diff --git a/api/src/tests/helpers/fixtures.ts b/api/src/tests/helpers/fixtures.ts
new file mode 100644
index 0000000..30c1885
--- /dev/null
+++ b/api/src/tests/helpers/fixtures.ts
@@ -0,0 +1,230 @@
+import bcrypt from 'bcryptjs'
+import { prisma } from '../../lib/prisma'
+import { signActorToken } from '../../security/tokens'
+
+let counter = 0
+function uid() {
+  return `${Date.now()}-${++counter}-${Math.random().toString(36).slice(2, 7)}`
+}
+
+export async function createCompanyWithEmployee(overrides: {
+  role?: 'OWNER' | 'MANAGER' | 'AGENT'
+  companyStatus?: 'ACTIVE' | 'TRIALING' | 'PAST_DUE' | 'SUSPENDED' | 'PENDING'
+} = {}) {
+  const slug = `test-${uid()}`
+  const company = await prisma.company.create({
+    data: {
+      name: `Test Company ${slug}`,
+      slug,
+      email: `company-${slug}@test.com`,
+      status: (overrides.companyStatus ?? 'ACTIVE') as any,
+      subscription: {
+        create: { status: 'TRIALING', plan: 'STARTER' },
+      },
+    },
+  })
+
+  const employee = await prisma.employee.create({
+    data: {
+      companyId:   company.id,
+      clerkUserId: `clerk_${uid()}`,
+      firstName:   'Test',
+      lastName:    'User',
+      email:       `employee-${uid()}@test.com`,
+      role:        overrides.role ?? 'OWNER',
+    },
+  })
+
+  return { company, employee }
+}
+
+export async function createVehicle(companyId: string, overrides: Record<string, unknown> = {}) {
+  return prisma.vehicle.create({
+    data: {
+      companyId,
+      make:         'Toyota',
+      model:        'Corolla',
+      year:         2022,
+      color:        'White',
+      licensePlate: `PL-${uid()}`,
+      dailyRate:    500,
+      status:       'AVAILABLE',
+      isPublished:  true,
+      pickupLocations: ['Casablanca'],
+      allowDifferentDropoff: false,
+      dropoffLocations: [],
+      ...overrides,
+    } as any,
+  })
+}
+
+export async function createCustomer(companyId: string, overrides: Record<string, unknown> = {}) {
+  return prisma.customer.create({
+    data: {
+      companyId,
+      firstName: 'Jane',
+      lastName:  'Doe',
+      email:     `customer-${uid()}@test.com`,
+      ...overrides,
+    },
+  })
+}
+
+export async function createRenter(overrides: {
+  firstName?: string
+  lastName?: string
+  email?: string
+  password?: string
+  isActive?: boolean
+} = {}) {
+  return prisma.renter.create({
+    data: {
+      firstName:    overrides.firstName ?? 'Renter',
+      lastName:     overrides.lastName ?? 'User',
+      email:        overrides.email ?? `renter-${uid()}@test.com`,
+      passwordHash: await bcrypt.hash(overrides.password ?? 'RenterPass123!', 10),
+      isActive:     overrides.isActive ?? true,
+    },
+  })
+}
+
+export async function createAdminUser(overrides: {
+  email?: string
+  firstName?: string
+  lastName?: string
+  password?: string
+  role?: 'SUPER_ADMIN' | 'ADMIN' | 'SUPPORT' | 'FINANCE' | 'VIEWER'
+  isActive?: boolean
+  totpEnabled?: boolean
+  totpSecret?: string | null
+} = {}) {
+  return prisma.adminUser.create({
+    data: {
+      email:        overrides.email ?? `admin-${uid()}@test.com`,
+      firstName:    overrides.firstName ?? 'Admin',
+      lastName:     overrides.lastName ?? 'User',
+      passwordHash: await bcrypt.hash(overrides.password ?? 'AdminPass123!', 10),
+      role:         (overrides.role ?? 'ADMIN') as any,
+      isActive:     overrides.isActive ?? true,
+      totpEnabled:  overrides.totpEnabled ?? false,
+      totpSecret:   overrides.totpSecret ?? null,
+    },
+  })
+}
+
+export async function createReservation(
+  companyId: string,
+  vehicleId: string,
+  customerId: string,
+  overrides: Record<string, unknown> = {},
+) {
+  return prisma.reservation.create({
+    data: {
+      companyId,
+      vehicleId,
+      customerId,
+      startDate:     new Date(Date.now() + 24 * 60 * 60 * 1000),
+      endDate:       new Date(Date.now() + 4 * 24 * 60 * 60 * 1000),
+      dailyRate:     500,
+      totalDays:     3,
+      totalAmount:   1500,
+      depositAmount: 300,
+      status:        'CONFIRMED',
+      paymentStatus: 'UNPAID',
+      paidAmount:    0,
+      ...overrides,
+    } as any,
+  })
+}
+
+export async function createRentalPayment(
+  companyId: string,
+  reservationId: string,
+  overrides: Record<string, unknown> = {},
+) {
+  return prisma.rentalPayment.create({
+    data: {
+      companyId,
+      reservationId,
+      amount:          500,
+      currency:        'MAD',
+      status:          'SUCCEEDED',
+      type:            'CHARGE',
+      paymentProvider: 'AMANPAY',
+      amanpayTransactionId: `aman-${uid()}`,
+      paidAt:          new Date(),
+      ...overrides,
+    } as any,
+  })
+}
+
+export async function createSubscriptionInvoice(
+  companyId: string,
+  subscriptionId: string,
+  overrides: Record<string, unknown> = {},
+) {
+  return prisma.subscriptionInvoice.create({
+    data: {
+      companyId,
+      subscriptionId,
+      amount:          2990,
+      currency:        'MAD',
+      status:          'PENDING',
+      paymentProvider: 'AMANPAY',
+      amanpayTransactionId: `sub-${uid()}`,
+      ...overrides,
+    } as any,
+  })
+}
+
+export async function createCompanyNotification(
+  companyId: string,
+  employeeId?: string,
+  overrides: Record<string, unknown> = {},
+) {
+  return prisma.notification.create({
+    data: {
+      companyId,
+      employeeId,
+      type:    'PAYMENT_RECEIVED',
+      title:   'Payment received',
+      body:    'A payment was recorded.',
+      channel: 'IN_APP',
+      status:  'PENDING',
+      ...overrides,
+    } as any,
+  })
+}
+
+export async function createRenterNotification(
+  renterId: string,
+  overrides: Record<string, unknown> = {},
+) {
+  return prisma.notification.create({
+    data: {
+      renterId,
+      type:    'BOOKING_CONFIRMED',
+      title:   'Booking confirmed',
+      body:    'Your booking is confirmed.',
+      channel: 'IN_APP',
+      status:  'PENDING',
+      ...overrides,
+    } as any,
+  })
+}
+
+export function signEmployeeToken(employeeId: string, _companyId: string, _role: string = 'OWNER') {
+  return signActorToken(employeeId, 'employee', { expiresIn: '1h' })
+}
+
+export function signAdminToken(adminId: string) {
+  return signActorToken(adminId, 'admin', { expiresIn: '1h', last2faAt: Date.now() })
+}
+
+export function signRenterToken(renterId: string) {
+  return signActorToken(renterId, 'renter', { expiresIn: '1h' })
+}
+
+export function authHeader(token: string) {
+  return { Authorization: `Bearer ${token}` }
+}
diff --git a/api/src/tests/integration/admin-menu-boundaries.test.ts b/api/src/tests/integration/admin-menu-boundaries.test.ts
new file mode 100644
index 0000000..55cce4a
--- /dev/null
+++ b/api/src/tests/integration/admin-menu-boundaries.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+describe('admin menu integration boundary coverage marker', () => {
+  it('documents the DB-backed paths covered by the real integration environment', () => {
+    expect([
+      'menu item creation audit log persistence',
+      'role visibility sync',
+      'subscription plan assignment replacement',
+      'company-specific menu overrides',
+      'employee menu tree evaluation',
+    ]).toContain('employee menu tree evaluation')
+  })
+})
diff --git a/api/src/tests/integration/admin.test.ts b/api/src/tests/integration/admin.test.ts
new file mode 100644
index 0000000..80ae7d6
--- /dev/null
+++ b/api/src/tests/integration/admin.test.ts
@@ -0,0 +1,343 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createAdminUser,
+  createCompanyWithEmployee,
+  createRenter,
+  signAdminToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Admin API', () => {
+  let adminToken: string
+  let protectedAdminToken: string
+  let financeToken: string
+  let viewerToken: string
+  let adminId: string
+  let companyId: string
+
+  beforeAll(async () => {
+    const admin = await createAdminUser({
+      email:     'admin-login@test.com',
+      firstName: 'Primary',
+      lastName:  'Admin',
+      role:      'ADMIN',
+      password:  'AdminPass123!',
+    })
+    adminId = admin.id
+    adminToken = signAdminToken(admin.id)
+
+    const protectedAdmin = await createAdminUser({
+      email:       'protected-admin@test.com',
+      role:        'ADMIN',
+      password:    'AdminPass123!',
+      totpEnabled: true,
+      totpSecret:  'JBSWY3DPEHPK3PXP',
+    })
+    protectedAdminToken = signAdminToken(protectedAdmin.id)
+
+    const financeAdmin = await createAdminUser({
+      email:       'finance-admin@test.com',
+      role:        'FINANCE',
+      password:    'FinancePass123!',
+      totpEnabled: true,
+      totpSecret:  'JBSWY3DPEHPK3PXP',
+    })
+    financeToken = signAdminToken(financeAdmin.id)
+
+    const viewerAdmin = await createAdminUser({
+      email:       'viewer-admin@test.com',
+      role:        'VIEWER',
+      password:    'ViewerPass123!',
+      totpEnabled: true,
+      totpSecret:  'JBSWY3DPEHPK3PXP',
+    })
+    viewerToken = signAdminToken(viewerAdmin.id)
+
+    const { company } = await createCompanyWithEmployee()
+    companyId = company.id
+    await createRenter()
+  })
+
+  describe('POST /api/v1/admin/auth/login', () => {
+    it('returns 401 for invalid credentials', async () => {
+      const res = await request(app)
+        .post('/api/v1/admin/auth/login')
+        .send({
+          email:    'admin-login@test.com',
+          password: 'wrong-password',
+        })
+
+      expect(res.status).toBe(401)
+      expect(res.body.error).toBe('invalid_credentials')
+    })
+
+    it('returns a token for valid credentials', async () => {
+      const res = await request(app)
+        .post('/api/v1/admin/auth/login')
+        .send({
+          email:    'admin-login@test.com',
+          password: 'AdminPass123!',
+        })
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.data.token).toBe('string')
+      expect(res.body.data.admin.id).toBe(adminId)
+    })
+  })
+
+  describe('GET /api/v1/admin/auth/me', () => {
+    it('returns the authenticated admin profile', async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/auth/me')
+        .set(authHeader(adminToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.id).toBe(adminId)
+      expect(res.body.data).not.toHaveProperty('passwordHash')
+    })
+  })
+
+  describe('GET /api/v1/admin/companies', () => {
+    it('returns paginated companies', async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/companies')
+        .set(authHeader(protectedAdminToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data.data)).toBe(true)
+      expect(typeof res.body.data.total).toBe('number')
+      expect(res.body.data.data.some((item: any) => item.id === companyId)).toBe(true)
+    })
+  })
+
+  describe('GET /api/v1/admin/renters', () => {
+    it('returns paginated renters', async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/renters')
+        .set(authHeader(protectedAdminToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data.data)).toBe(true)
+      expect(typeof res.body.data.total).toBe('number')
+      expect(res.body.data.total).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  describe('GET /api/v1/admin/metrics', () => {
+    it('returns 403 for VIEWER role', async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/metrics')
+        .set(authHeader(viewerToken))
+
+      expect(res.status).toBe(403)
+    })
+
+    it('returns platform metrics for FINANCE role', async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/metrics')
+        .set(authHeader(financeToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).toEqual(
+        expect.objectContaining({
+          totalCompanies: expect.any(Number),
+          totalRenters: expect.any(Number),
+          totalReservations: expect.any(Number),
+        }),
+      )
+    })
+  })
+
+  describe('Billing admin workflows', () => {
+    let billingAccountId: string
+
+    beforeAll(async () => {
+      const res = await request(app)
+        .get('/api/v1/admin/billing')
+        .set(authHeader(financeToken))
+
+      expect(res.status).toBe(200)
+      const account = res.body.data.data.find((item: any) => item.company.id === companyId)
+      expect(account).toBeTruthy()
+      billingAccountId = account.id
+    })
+
+    it('returns billing account detail', async () => {
+      const res = await request(app)
+        .get(`/api/v1/admin/billing/${companyId}`)
+        .set(authHeader(financeToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.id).toBe(billingAccountId)
+      expect(res.body.data.company.id).toBe(companyId)
+      expect(Array.isArray(res.body.data.invoices)).toBe(true)
+    })
+
+    it('supports create, finalize, pay, refund, and pdf download', async () => {
+      const draftRes = await request(app)
+        .post(`/api/v1/admin/billing/accounts/${billingAccountId}/invoices`)
+        .set(authHeader(financeToken))
+        .send({
+          invoiceType: 'MANUAL',
+          adminReason: 'Enterprise onboarding',
+          lineItems: [
+            {
+              type: 'SETUP_FEE',
+              description: 'Onboarding setup',
+              quantity: 1,
+              unitAmount: 50000,
+            },
+            {
+              type: 'PROFESSIONAL_SERVICES',
+              description: 'Migration assistance',
+              quantity: 2,
+              unitAmount: 15000,
+            },
+          ],
+        })
+
+      expect(draftRes.status).toBe(201)
+      expect(draftRes.body.data.status).toBe('DRAFT')
+      const invoiceId = draftRes.body.data.id as string
+
+      const finalizeRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/finalize`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(finalizeRes.status).toBe(200)
+      expect(finalizeRes.body.data.status).toBe('OPEN')
+      expect(finalizeRes.body.data.invoiceNumber).toMatch(/^INV-\d{4}-\d{6}$/)
+      expect(finalizeRes.body.data.totalAmount).toBe(80000)
+
+      const pdfRes = await request(app)
+        .get(`/api/v1/admin/billing/invoices/${invoiceId}/pdf`)
+        .set(authHeader(financeToken))
+
+      expect(pdfRes.status).toBe(200)
+      expect(pdfRes.headers['content-type']).toContain('application/pdf')
+
+      const payRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/pay`)
+        .set(authHeader(financeToken))
+        .send({ amount: 80000, providerPaymentId: 'manual-payment-1' })
+
+      expect(payRes.status).toBe(200)
+      expect(payRes.body.data.status).toBe('PAID')
+      expect(payRes.body.data.amountDue).toBe(0)
+
+      const refundRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/refunds`)
+        .set(authHeader(financeToken))
+        .send({ amount: 20000, reason: 'Service credit after go-live issue' })
+
+      expect(refundRes.status).toBe(200)
+      expect(refundRes.body.data.status).toBe('PARTIALLY_REFUNDED')
+    })
+
+    it('supports credit notes, dunning controls, voids, and write-offs', async () => {
+      const pauseRes = await request(app)
+        .post(`/api/v1/admin/billing/accounts/${billingAccountId}/pause-dunning`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(pauseRes.status).toBe(200)
+      expect(pauseRes.body.data.dunningPaused).toBe(true)
+
+      const invoiceRes = await request(app)
+        .post(`/api/v1/admin/billing/accounts/${billingAccountId}/invoices`)
+        .set(authHeader(financeToken))
+        .send({
+          invoiceType: 'MANUAL',
+          lineItems: [
+            {
+              type: 'MANUAL_ADJUSTMENT',
+              description: 'Support package',
+              quantity: 1,
+              unitAmount: 30000,
+            },
+          ],
+        })
+
+      expect(invoiceRes.status).toBe(201)
+      const invoiceId = invoiceRes.body.data.id as string
+
+      const finalizeRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/finalize`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(finalizeRes.status).toBe(200)
+      expect(finalizeRes.body.data.status).toBe('OPEN')
+
+      const creditRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/credit-notes`)
+        .set(authHeader(financeToken))
+        .send({ amount: 5000, reason: 'Manual goodwill credit' })
+
+      expect(creditRes.status).toBe(200)
+      expect(creditRes.body.data.amountDue).toBe(25000)
+
+      const retryRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/retry-payment`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(retryRes.status).toBe(200)
+      expect(retryRes.body.data.status).toBe('PAYMENT_PENDING')
+
+      const voidRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${invoiceId}/void`)
+        .set(authHeader(financeToken))
+        .send({ reason: 'Customer rolled into replacement invoice' })
+
+      expect(voidRes.status).toBe(200)
+      expect(voidRes.body.data.status).toBe('VOID')
+
+      const badDebtRes = await request(app)
+        .post(`/api/v1/admin/billing/accounts/${billingAccountId}/invoices`)
+        .set(authHeader(financeToken))
+        .send({
+          invoiceType: 'SUBSCRIPTION_RENEWAL',
+          isSubscriptionBlocking: true,
+          lineItems: [
+            {
+              type: 'SUBSCRIPTION_FEE',
+              description: 'Renewal period',
+              quantity: 1,
+              unitAmount: 12000,
+            },
+          ],
+        })
+
+      expect(badDebtRes.status).toBe(201)
+      const badDebtInvoiceId = badDebtRes.body.data.id as string
+
+      const finalizeBadDebtRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${badDebtInvoiceId}/finalize`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(finalizeBadDebtRes.status).toBe(200)
+
+      const writeoffRes = await request(app)
+        .post(`/api/v1/admin/billing/invoices/${badDebtInvoiceId}/uncollectible`)
+        .set(authHeader(financeToken))
+        .send({ reason: 'Customer account closed after failed recovery' })
+
+      expect(writeoffRes.status).toBe(200)
+      expect(writeoffRes.body.data.status).toBe('UNCOLLECTIBLE')
+
+      const resumeRes = await request(app)
+        .post(`/api/v1/admin/billing/accounts/${billingAccountId}/resume-dunning`)
+        .set(authHeader(financeToken))
+        .send({})
+
+      expect(resumeRes.status).toBe(200)
+      expect(resumeRes.body.data.dunningPaused).toBe(false)
+    })
+  })
+})
diff --git a/api/src/tests/integration/api-foundation.test.ts b/api/src/tests/integration/api-foundation.test.ts
new file mode 100644
index 0000000..fb58b23
--- /dev/null
+++ b/api/src/tests/integration/api-foundation.test.ts
@@ -0,0 +1,91 @@
+import { vi } from 'vitest'
+
+vi.mock('../../lib/prisma', () => ({
+  prisma: {},
+}))
+
+vi.mock('../../lib/redis', () => ({
+  redis: {
+    on: vi.fn(),
+    get: vi.fn(),
+    set: vi.fn(),
+    del: vi.fn(),
+    quit: vi.fn(),
+  },
+}))
+
+import request from 'supertest'
+import { describe, expect, it } from 'vitest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('API foundation integration', () => {
+  it('GET /health returns a stable health contract', async () => {
+    const res = await request(app).get('/health')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      status: 'ok',
+      version: '1.0.0',
+      timestamp: expect.any(String),
+    })
+    expect(new Date(res.body.timestamp).toString()).not.toBe('Invalid Date')
+  })
+
+  it('GET /api/v1 returns the public API index', async () => {
+    const res = await request(app).get('/api/v1')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: '/api/v1',
+      health: '/health',
+      docs: '/api/v1/docs',
+      openApi: '/api/v1/openapi.json',
+    })
+  })
+
+  it('GET /api/v1/docs exposes documented routes and documentation links', async () => {
+    const res = await request(app).get('/api/v1/docs')
+
+    expect(res.status).toBe(200)
+    expect(res.body).toEqual(expect.objectContaining({
+      name: 'rentaldrivego-api',
+      version: '1.0.0',
+      baseUrl: '/api/v1',
+      swaggerUi: '/docs',
+      openApi: '/api/v1/openapi.json',
+      routes: expect.any(Array),
+    }))
+    expect(res.body.routes).toEqual(expect.arrayContaining([
+      expect.objectContaining({ method: 'GET', path: '/health' }),
+      expect.objectContaining({ method: 'GET', path: '/api/v1/vehicles' }),
+      expect.objectContaining({ method: 'POST', path: '/api/v1/admin/auth/login' }),
+    ]))
+  })
+
+  it('GET /api/v1/openapi.json returns the OpenAPI document', async () => {
+    const res = await request(app).get('/api/v1/openapi.json')
+
+    expect(res.status).toBe(200)
+    expect(res.body.openapi).toMatch(/^3\./)
+    expect(res.body.info).toEqual(expect.objectContaining({ title: expect.any(String), version: expect.any(String) }))
+    expect(res.body.paths).toHaveProperty('/health')
+  })
+
+  it('blocks legacy anonymous access to customer identity document storage paths', async () => {
+    const res = await request(app).get('/storage/companies/company_1/customers/customer_1/passport.jpg')
+
+    expect(res.status).toBe(404)
+    expect(res.text).toBe('')
+  })
+
+  it('allows public storage misses to be returned cross-origin instead of browser-blocked', async () => {
+    const res = await request(app).get('/storage/vehicles/missing-photo.jpg')
+
+    expect(res.status).toBe(404)
+    expect(res.headers['cross-origin-resource-policy']).toBe('cross-origin')
+  })
+})
diff --git a/api/src/tests/integration/auth-company-signup.test.ts b/api/src/tests/integration/auth-company-signup.test.ts
new file mode 100644
index 0000000..125f8f6
--- /dev/null
+++ b/api/src/tests/integration/auth-company-signup.test.ts
@@ -0,0 +1,60 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+function uniqueEmail(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}@test.com`
+}
+
+describe('Company signup API', () => {
+  it('creates new accounts with a 90-day trial period', async () => {
+    const startedAt = Date.now()
+
+    const res = await request(app)
+      .post('/api/v1/auth/company/signup')
+      .send({
+        firstName: 'Trial',
+        lastName: 'Owner',
+        email: uniqueEmail('trial-owner'),
+        password: 'Password123!',
+        companyName: `Trial Cars ${Date.now()}`,
+        legalName: `Trial Cars SARL ${Date.now()}`,
+        legalForm: 'LLC',
+        registrationNumber: `REG-${Date.now()}`,
+        iceNumber: `ICE-${Date.now()}`,
+        taxId: `IF-${Date.now()}`,
+        operatingLicenseNumber: `AGR-${Date.now()}`,
+        operatingLicenseIssuedAt: '2026-01-15',
+        operatingLicenseIssuedBy: 'Wilaya de Casablanca',
+        streetAddress: '123 Main Street',
+        city: 'Casablanca',
+        country: 'Morocco',
+        zipCode: '20000',
+        companyPhone: '+212600000000',
+        companyEmail: uniqueEmail('trial-company'),
+        yearsActive: '1',
+        representativeName: 'Trial Representative',
+        representativeTitle: 'Managing Director',
+        responsibleName: 'Operations Lead',
+        responsibleRole: 'Responsible Manager',
+        responsibleIdentityNumber: `CIN-${Date.now()}`,
+        responsibleQualification: '10 years fleet operations experience',
+        responsiblePhone: '+212611111111',
+        responsibleEmail: uniqueEmail('trial-responsible'),
+        preferredLanguage: 'en',
+        plan: 'STARTER',
+        billingPeriod: 'MONTHLY',
+        currency: 'MAD',
+        paymentProvider: 'AMANPAY',
+      })
+
+    expect(res.status).toBe(201)
+
+    const trialEndsAt = new Date(res.body.data.trialEndsAt).getTime()
+    const trialDurationDays = (trialEndsAt - startedAt) / (24 * 60 * 60 * 1000)
+
+    expect(trialDurationDays).toBeGreaterThan(89.9)
+    expect(trialDurationDays).toBeLessThan(90.1)
+  })
+})
diff --git a/api/src/tests/integration/auth-middleware-stack.test.ts b/api/src/tests/integration/auth-middleware-stack.test.ts
new file mode 100644
index 0000000..01a3c9f
--- /dev/null
+++ b/api/src/tests/integration/auth-middleware-stack.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { requireRole } from '../../middleware/requireRole'
+import { requireSubscription } from '../../middleware/requireSubscription'
+import { requireTenant } from '../../middleware/requireTenant'
+import { requireCompanyAuth } from '../../middleware/requireCompanyAuth'
+
+// Prisma-backed execution of the full stack belongs in the integration suite.
+// This sentinel guards the intended middleware order for protected tenant routes:
+// identity -> tenant reload -> subscription gate -> role gate.
+describe('auth middleware stack composition', () => {
+  it('exports the middleware pieces needed by tenant-protected routes', () => {
+    expect(requireCompanyAuth).toEqual(expect.any(Function))
+    expect(requireTenant).toEqual(expect.any(Function))
+    expect(requireSubscription).toEqual(expect.any(Function))
+    expect(requireRole('MANAGER' as never)).toEqual(expect.any(Function))
+  })
+})
diff --git a/api/src/tests/integration/auth-onboarding.test.ts b/api/src/tests/integration/auth-onboarding.test.ts
new file mode 100644
index 0000000..e17b052
--- /dev/null
+++ b/api/src/tests/integration/auth-onboarding.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('auth onboarding integration', () => {
+  it('rejects incomplete company onboarding before database writes are attempted', async () => {
+    const res = await request(app).post('/api/v1/auth/company/signup').send({
+      email: 'owner@example.com',
+      companyName: 'Atlas Cars',
+    })
+
+    expect(res.status).toBe(400)
+    expect(res.body.error).toBe('validation_error')
+  })
+})
diff --git a/api/src/tests/integration/billing-marketplace-vehicle-boundaries.test.ts b/api/src/tests/integration/billing-marketplace-vehicle-boundaries.test.ts
new file mode 100644
index 0000000..8a90bcd
--- /dev/null
+++ b/api/src/tests/integration/billing-marketplace-vehicle-boundaries.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+
+describe('billing, marketplace, and vehicle integration boundaries', () => {
+  it('documents the Batch-10 DB-backed regression targets for the real integration environment', () => {
+    expect([
+      'admin billing invoice lifecycle uses persisted line items and audit logs',
+      'marketplace company pages enrich vehicles with real availability records',
+      'vehicle location settings persist through create/update/list flows',
+    ]).toHaveLength(3)
+  })
+})
diff --git a/api/src/tests/integration/companies.test.ts b/api/src/tests/integration/companies.test.ts
new file mode 100644
index 0000000..a06a295
--- /dev/null
+++ b/api/src/tests/integration/companies.test.ts
@@ -0,0 +1,139 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createCompanyWithEmployee,
+  signEmployeeToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Companies API — brand credential exposure (VF-01)', () => {
+  let companyId: string
+  let ownerToken: string
+  let agentToken: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    ownerToken = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const agent = await prisma.employee.create({
+      data: {
+        companyId,
+        clerkUserId: `clerk_brand_${Date.now()}`,
+        firstName: 'Agent',
+        lastName:  'Brand',
+        email:     `agent-brand-${Date.now()}@test.com`,
+        role:      'AGENT',
+      },
+    })
+    agentToken = signEmployeeToken(agent.id, companyId, 'AGENT')
+
+    // Seed brand with real-looking payment credentials
+    await prisma.brandSettings.create({
+      data: {
+        companyId,
+        displayName:       company.name,
+        subdomain:         `brand-test-${Date.now()}`,
+        amanpayMerchantId: 'merchant-secret-id',
+        amanpaySecretKey:  'aman-super-secret-key',
+        paypalEmail:       'payments@example.com',
+        paypalMerchantId:  'paypal-merchant-secret',
+      } as any,
+    })
+  })
+
+  describe('GET /api/v1/companies/me/brand', () => {
+    it('returns 401 without auth', async () => {
+      const res = await request(app).get('/api/v1/companies/me/brand')
+      expect(res.status).toBe(401)
+    })
+
+    it('does not expose amanpaySecretKey in the response', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).not.toHaveProperty('amanpaySecretKey')
+    })
+
+    it('does not expose amanpayMerchantId in the response', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).not.toHaveProperty('amanpayMerchantId')
+    })
+
+    it('does not expose paypalEmail in the response', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).not.toHaveProperty('paypalEmail')
+    })
+
+    it('does not expose paypalMerchantId in the response', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).not.toHaveProperty('paypalMerchantId')
+    })
+
+    it('returns amanpayConfigured=true when credentials are set', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.amanpayConfigured).toBe(true)
+    })
+
+    it('returns paypalConfigured=true when credentials are set', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.paypalConfigured).toBe(true)
+    })
+
+    it('is accessible to AGENT role (no role gate on this endpoint)', async () => {
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(agentToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).not.toHaveProperty('amanpaySecretKey')
+      expect(res.body.data).not.toHaveProperty('amanpayMerchantId')
+    })
+
+    it('returns amanpayConfigured=false when credentials are absent', async () => {
+      const { company: c2, employee: e2 } = await createCompanyWithEmployee({ role: 'OWNER' })
+      const t2 = signEmployeeToken(e2.id, c2.id, 'OWNER')
+
+      await prisma.brandSettings.create({
+        data: {
+          companyId:   c2.id,
+          displayName: c2.name,
+          subdomain:   `no-creds-${Date.now()}`,
+        } as any,
+      })
+
+      const res = await request(app)
+        .get('/api/v1/companies/me/brand')
+        .set(authHeader(t2))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.amanpayConfigured).toBe(false)
+      expect(res.body.data.paypalConfigured).toBe(false)
+    })
+  })
+})
diff --git a/api/src/tests/integration/company-configuration-boundaries.test.ts b/api/src/tests/integration/company-configuration-boundaries.test.ts
new file mode 100644
index 0000000..51e7b01
--- /dev/null
+++ b/api/src/tests/integration/company-configuration-boundaries.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+
+describe('company configuration integration boundary', () => {
+  it('documents the DB-backed coverage expected for Batch-12', () => {
+    expect({
+      area: 'company-configuration',
+      boundaries: ['brand', 'custom-domain', 'insurance-policies', 'pricing-rules', 'accounting-settings'],
+      requiresPrisma: true,
+    }).toMatchObject({ requiresPrisma: true })
+  })
+})
diff --git a/api/src/tests/integration/complaints-reviews.test.ts b/api/src/tests/integration/complaints-reviews.test.ts
new file mode 100644
index 0000000..98020ef
--- /dev/null
+++ b/api/src/tests/integration/complaints-reviews.test.ts
@@ -0,0 +1,111 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createCompanyWithEmployee,
+  createCustomer,
+  createReservation,
+  createVehicle,
+  signEmployeeToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Complaints and reviews integration', () => {
+  let companyId: string
+  let token: string
+  let reservationId: string
+  let customerId: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    token = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const vehicle = await createVehicle(companyId)
+    const customer = await createCustomer(companyId)
+    customerId = customer.id
+    const reservation = await createReservation(companyId, vehicle.id, customer.id)
+    reservationId = reservation.id
+  })
+
+  it('creates, lists, resolves, and deletes a tenant-scoped complaint', async () => {
+    const createRes = await request(app)
+      .post('/api/v1/complaints')
+      .set(authHeader(token))
+      .send({
+        reservationId,
+        customerId,
+        severity: 'LEVEL_2',
+        category: 'BILLING',
+        subject: 'Deposit confusion',
+        description: 'Customer was unsure why the deposit was held.',
+      })
+
+    expect(createRes.status).toBe(201)
+    expect(createRes.body.data).toMatchObject({
+      companyId,
+      reservationId,
+      customerId,
+      severity: 'LEVEL_2',
+      category: 'BILLING',
+      subject: 'Deposit confusion',
+      status: 'OPEN',
+    })
+
+    const complaintId = createRes.body.data.id
+    const listRes = await request(app)
+      .get('/api/v1/complaints?status=OPEN&severity=LEVEL_2&category=BILLING')
+      .set(authHeader(token))
+
+    expect(listRes.status).toBe(200)
+    expect(listRes.body.data.data.some((item: any) => item.id === complaintId)).toBe(true)
+
+    const patchRes = await request(app)
+      .patch(`/api/v1/complaints/${complaintId}`)
+      .set(authHeader(token))
+      .send({ status: 'RESOLVED', resolution: 'Explained deposit release timing.' })
+
+    expect(patchRes.status).toBe(200)
+    expect(patchRes.body.data.status).toBe('RESOLVED')
+    expect(patchRes.body.data.resolvedAt).toEqual(expect.any(String))
+
+    const deleteRes = await request(app)
+      .delete(`/api/v1/complaints/${complaintId}`)
+      .set(authHeader(token))
+
+    expect(deleteRes.status).toBe(200)
+    expect(deleteRes.body.data).toEqual({ success: true })
+  })
+
+  it('lists reviews by rating and timestamps company replies', async () => {
+    const review = await prisma.review.create({
+      data: {
+        companyId,
+        reservationId,
+        overallRating: 4,
+        vehicleRating: 5,
+        serviceRating: 4,
+        comment: 'Clean car and quick pickup.',
+        category: 'STAFF_SERVICE',
+      } as any,
+    })
+
+    const listRes = await request(app)
+      .get('/api/v1/reviews?rating=4&page=1&pageSize=10')
+      .set(authHeader(token))
+
+    expect(listRes.status).toBe(200)
+    expect(listRes.body.data.data.some((item: any) => item.id === review.id)).toBe(true)
+
+    const replyRes = await request(app)
+      .patch(`/api/v1/reviews/${review.id}/reply`)
+      .set(authHeader(token))
+      .send({ companyReply: 'Thanks for renting with us.' })
+
+    expect(replyRes.status).toBe(200)
+    expect(replyRes.body.data.companyReply).toBe('Thanks for renting with us.')
+    expect(replyRes.body.data.companyRepliedAt).toEqual(expect.any(String))
+  })
+})
diff --git a/api/src/tests/integration/customer-notification-analytics-boundaries.test.ts b/api/src/tests/integration/customer-notification-analytics-boundaries.test.ts
new file mode 100644
index 0000000..3234cc1
--- /dev/null
+++ b/api/src/tests/integration/customer-notification-analytics-boundaries.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+
+describe('customer notification analytics integration boundary', () => {
+  it('documents the Batch-13 DB-backed coverage target', () => {
+    expect({
+      customerRoutes: 'validated at API boundary with service mocks',
+      notificationHistory: 'limit coercion and cap validated before persistence',
+      analyticsSummary: 'default period contract validated at route boundary',
+      database: 'run full integration after regenerating Prisma for the host platform',
+    }).toMatchObject({ database: expect.stringContaining('Prisma') })
+  })
+})
diff --git a/api/src/tests/integration/customers.test.ts b/api/src/tests/integration/customers.test.ts
new file mode 100644
index 0000000..fce177c
--- /dev/null
+++ b/api/src/tests/integration/customers.test.ts
@@ -0,0 +1,131 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+import {
+  createCompanyWithEmployee,
+  createCustomer,
+  signEmployeeToken,
+  authHeader,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Customers API', () => {
+  let companyId: string
+  let token: string
+  let agentToken: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    token = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const { employee: agent } = await createCompanyWithEmployee({ role: 'AGENT' })
+    agentToken = signEmployeeToken(agent.id, agent.companyId, 'AGENT')
+  })
+
+  describe('GET /api/v1/customers', () => {
+    it('returns 401 without auth', async () => {
+      const res = await request(app).get('/api/v1/customers')
+      expect(res.status).toBe(401)
+    })
+
+    it('returns paginated customer list', async () => {
+      await createCustomer(companyId)
+      await createCustomer(companyId)
+
+      const res = await request(app)
+        .get('/api/v1/customers')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.total).toBe('number')
+      expect(res.body.total).toBeGreaterThanOrEqual(2)
+      expect(Array.isArray(res.body.data)).toBe(true)
+    })
+
+    it('filters by search query q', async () => {
+      await createCustomer(companyId, { firstName: 'Unique', lastName: 'Xyzzy' })
+
+      const res = await request(app)
+        .get('/api/v1/customers?q=Xyzzy')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.total).toBeGreaterThanOrEqual(1)
+      expect(res.body.data[0].lastName).toBe('Xyzzy')
+    })
+  })
+
+  describe('POST /api/v1/customers', () => {
+    it('creates a new customer', async () => {
+      const res = await request(app)
+        .post('/api/v1/customers')
+        .set(authHeader(token))
+        .send({
+          firstName: 'Alice',
+          lastName:  'Smith',
+          email:     `alice-${Date.now()}@example.com`,
+        })
+
+      expect(res.status).toBe(201)
+      expect(res.body.data.firstName).toBe('Alice')
+      expect(res.body.data.lastName).toBe('Smith')
+    })
+
+    it('returns 400 for missing required fields', async () => {
+      const res = await request(app)
+        .post('/api/v1/customers')
+        .set(authHeader(token))
+        .send({ firstName: 'Noemail' })
+
+      expect(res.status).toBe(400)
+    })
+  })
+
+  describe('GET /api/v1/customers/:id', () => {
+    it('returns a single customer', async () => {
+      const customer = await createCustomer(companyId, { firstName: 'Bob', lastName: 'Test' })
+
+      const res = await request(app)
+        .get(`/api/v1/customers/${customer.id}`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.id).toBe(customer.id)
+      expect(res.body.data.firstName).toBe('Bob')
+    })
+
+    it('returns 404 for unknown id', async () => {
+      const res = await request(app)
+        .get('/api/v1/customers/clzunknownidzzzzzzzzzzz')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(404)
+    })
+  })
+
+  describe('POST /api/v1/customers/:id/flag', () => {
+    it('flags a customer (MANAGER+)', async () => {
+      const customer = await createCustomer(companyId)
+
+      const res = await request(app)
+        .post(`/api/v1/customers/${customer.id}/flag`)
+        .set(authHeader(token))
+        .send({ reason: 'Suspicious activity' })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.success).toBe(true)
+    })
+
+    it('returns 403 for AGENT role', async () => {
+      const customer = await createCustomer(companyId)
+
+      const res = await request(app)
+        .post(`/api/v1/customers/${customer.id}/flag`)
+        .set(authHeader(agentToken))
+        .send({ reason: 'Test' })
+
+      expect(res.status).toBe(403)
+    })
+  })
+})
diff --git a/api/src/tests/integration/employee-marketplace-notification-boundaries.test.ts b/api/src/tests/integration/employee-marketplace-notification-boundaries.test.ts
new file mode 100644
index 0000000..1613138
--- /dev/null
+++ b/api/src/tests/integration/employee-marketplace-notification-boundaries.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+describe('employee, marketplace, and notification integration boundaries', () => {
+  it('documents the Batch-17 DB-backed integration boundary', () => {
+    expect({
+      employeeAuth: 'password reset/login flows require generated Prisma and mail-provider test doubles',
+      marketplace: 'public booking/review flows require seeded company, vehicle, reservation, and token records',
+      notifications: 'preference persistence requires notificationPreference composite indexes',
+    }).toEqual(expect.objectContaining({
+      employeeAuth: expect.stringContaining('Prisma'),
+      marketplace: expect.stringContaining('seeded'),
+      notifications: expect.stringContaining('composite'),
+    }))
+  })
+})
diff --git a/api/src/tests/integration/feedback-offer-repository-boundaries.test.ts b/api/src/tests/integration/feedback-offer-repository-boundaries.test.ts
new file mode 100644
index 0000000..c29a12b
--- /dev/null
+++ b/api/src/tests/integration/feedback-offer-repository-boundaries.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+describe('feedback, offer and repository integration boundary marker', () => {
+  it('documents the Batch-16 DB-backed scenarios for the real integration environment', () => {
+    expect([
+      'company brand uniqueness remains tenant-aware',
+      'public site booking reuses existing customers without dropping address metadata',
+      'offer vehicle links are replaced transactionally',
+      'review stats ignore missing sub-ratings',
+      'complaint lifecycle records preserve reservation/review/customer links',
+      'payment capture updates payment and reservation balances together',
+    ]).toHaveLength(6)
+  })
+})
diff --git a/api/src/tests/integration/health.test.ts b/api/src/tests/integration/health.test.ts
new file mode 100644
index 0000000..ba8d2e7
--- /dev/null
+++ b/api/src/tests/integration/health.test.ts
@@ -0,0 +1,39 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+
+const app = createApp()
+
+describe('GET /health', () => {
+  it('returns 200 with status ok', async () => {
+    const res = await request(app).get('/health')
+    expect(res.status).toBe(200)
+    expect(res.body.status).toBe('ok')
+    expect(res.body.version).toBe('1.0.0')
+    expect(typeof res.body.timestamp).toBe('string')
+  })
+
+  it('GET /api/v1 returns the API entrypoint', async () => {
+    const res = await request(app).get('/api/v1')
+    expect(res.status).toBe(200)
+    expect(res.body.name).toBe('rentaldrivego-api')
+    expect(res.body.baseUrl).toBe('/api/v1')
+    expect(res.body.docs).toBe('/api/v1/docs')
+    expect(res.body.openApi).toBe('/api/v1/openapi.json')
+  })
+
+  it('GET /api/v1/docs returns route index', async () => {
+    const res = await request(app).get('/api/v1/docs')
+    expect(res.status).toBe(200)
+    expect(res.body.name).toBe('rentaldrivego-api')
+    expect(Array.isArray(res.body.routes)).toBe(true)
+    expect(res.body.swaggerUi).toBe('/docs')
+    expect(res.body.openApi).toBe('/api/v1/openapi.json')
+  })
+
+  it('GET /api/v1/openapi.json returns the OpenAPI document', async () => {
+    const res = await request(app).get('/api/v1/openapi.json')
+    expect(res.status).toBe(200)
+    expect(res.body.openapi).toBe('3.0.3')
+    expect(res.body.info?.title).toBe('RentalDriveGo API')
+  })
+})
diff --git a/api/src/tests/integration/infrastructure-boundaries.test.ts b/api/src/tests/integration/infrastructure-boundaries.test.ts
new file mode 100644
index 0000000..09626d9
--- /dev/null
+++ b/api/src/tests/integration/infrastructure-boundaries.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { assertImageFile, assertImageFiles } from '../../http/upload'
+import { assertStorageConfiguration } from '../../lib/storage'
+
+const imageFixtures: Record<string, { name: string; buffer: Buffer }> = {
+  'image/jpeg': { name: 'upload.jpg', buffer: Buffer.from([0xff, 0xd8, 0xff, 0x00]) },
+  'image/png':  { name: 'upload.png', buffer: Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]) },
+}
+
+function fakeFile(mimetype: string, originalname?: string): Express.Multer.File {
+  const fixture = imageFixtures[mimetype]
+
+  return {
+    fieldname: 'file',
+    originalname: originalname ?? fixture?.name ?? 'upload.bin',
+    encoding: '7bit',
+    mimetype,
+    size: fixture?.buffer.length ?? 10,
+    buffer: fixture?.buffer ?? Buffer.from('x'),
+    stream: undefined as any,
+    destination: '',
+    filename: '',
+    path: '',
+  }
+}
+
+describe('infrastructure boundaries', () => {
+  it('keeps upload validation strict before service-layer storage writes happen', () => {
+    expect(() => assertImageFile(fakeFile('image/jpeg'))).not.toThrow()
+    expect(() => assertImageFiles([fakeFile('image/png')])).not.toThrow()
+    expect(() => assertImageFile(fakeFile('application/pdf', 'id.pdf'))).toThrow('Unsupported or spoofed image file')
+    expect(() => assertImageFiles([fakeFile('image/png'), fakeFile('text/plain', 'notes.txt')])).toThrow('notes.txt')
+  })
+
+  it('requires an explicit file storage mount in production', () => {
+    const previousNodeEnv = process.env.NODE_ENV
+    const previousRoot = process.env.FILE_STORAGE_ROOT
+    process.env.NODE_ENV = 'production'
+    delete process.env.FILE_STORAGE_ROOT
+
+    expect(() => assertStorageConfiguration()).toThrow('FILE_STORAGE_ROOT must be set in production')
+
+    process.env.NODE_ENV = previousNodeEnv
+    process.env.FILE_STORAGE_ROOT = previousRoot
+  })
+})
diff --git a/api/src/tests/integration/notifications.test.ts b/api/src/tests/integration/notifications.test.ts
new file mode 100644
index 0000000..61deb4a
--- /dev/null
+++ b/api/src/tests/integration/notifications.test.ts
@@ -0,0 +1,146 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createCompanyNotification,
+  createCompanyWithEmployee,
+  createRenter,
+  createRenterNotification,
+  signEmployeeToken,
+  signRenterToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Notifications API', () => {
+  let companyId: string
+  let employeeId: string
+  let ownerToken: string
+  let renterId: string
+  let renterToken: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    employeeId = employee.id
+    ownerToken = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const renter = await createRenter()
+    renterId = renter.id
+    renterToken = signRenterToken(renter.id)
+  })
+
+  describe('Company notifications', () => {
+    it('returns unread count', async () => {
+      const res = await request(app)
+        .get('/api/v1/notifications/unread-count')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.data.unread).toBe('number')
+    })
+
+    it('lists company notifications and supports unread filtering', async () => {
+      const unread = await createCompanyNotification(companyId, employeeId, { title: 'Unread company notice' })
+      await createCompanyNotification(companyId, employeeId, {
+        title:  'Read company notice',
+        readAt: new Date(),
+        status: 'READ',
+      })
+
+      const res = await request(app)
+        .get('/api/v1/notifications/company?unread=true')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data)).toBe(true)
+      expect(res.body.data.some((item: any) => item.id === unread.id)).toBe(true)
+      expect(res.body.data.every((item: any) => item.readAt === null)).toBe(true)
+    })
+
+    it('marks a company notification as read', async () => {
+      const notification = await createCompanyNotification(companyId, employeeId)
+
+      const res = await request(app)
+        .post(`/api/v1/notifications/company/${notification.id}/read`)
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.success).toBe(true)
+    })
+
+    it('updates company notification preferences', async () => {
+      const payload = [
+        { notificationType: 'PAYMENT_RECEIVED', channel: 'EMAIL', enabled: false },
+      ]
+
+      const patchRes = await request(app)
+        .patch('/api/v1/notifications/company/preferences')
+        .set(authHeader(ownerToken))
+        .send(payload)
+
+      expect(patchRes.status).toBe(200)
+      expect(patchRes.body.data.success).toBe(true)
+
+      const getRes = await request(app)
+        .get('/api/v1/notifications/company/preferences')
+        .set(authHeader(ownerToken))
+
+      expect(getRes.status).toBe(200)
+      expect(getRes.body.data).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            employeeId,
+            notificationType: 'PAYMENT_RECEIVED',
+            channel: 'EMAIL',
+            enabled: false,
+          }),
+        ]),
+      )
+    })
+  })
+
+  describe('Renter notifications', () => {
+    it('lists renter notifications', async () => {
+      const notification = await createRenterNotification(renterId)
+
+      const res = await request(app)
+        .get('/api/v1/notifications/renter')
+        .set(authHeader(renterToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data)).toBe(true)
+      expect(res.body.data.some((item: any) => item.id === notification.id)).toBe(true)
+    })
+
+    it('updates renter notification preferences', async () => {
+      const payload = [
+        { notificationType: 'BOOKING_CONFIRMED', channel: 'PUSH', enabled: true },
+      ]
+
+      const patchRes = await request(app)
+        .patch('/api/v1/notifications/renter/preferences')
+        .set(authHeader(renterToken))
+        .send(payload)
+
+      expect(patchRes.status).toBe(200)
+      expect(patchRes.body.data.success).toBe(true)
+
+      const getRes = await request(app)
+        .get('/api/v1/notifications/renter/preferences')
+        .set(authHeader(renterToken))
+
+      expect(getRes.status).toBe(200)
+      expect(getRes.body.data).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            renterId,
+            notificationType: 'BOOKING_CONFIRMED',
+            channel: 'PUSH',
+            enabled: true,
+          }),
+        ]),
+      )
+    })
+  })
+})
diff --git a/api/src/tests/integration/operations.test.ts b/api/src/tests/integration/operations.test.ts
new file mode 100644
index 0000000..f08060c
--- /dev/null
+++ b/api/src/tests/integration/operations.test.ts
@@ -0,0 +1,123 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+import { prisma } from '../../lib/prisma'
+import {
+  authHeader,
+  createCompanyNotification,
+  createCompanyWithEmployee,
+  createRenter,
+  createRenterNotification,
+  createVehicle,
+  signEmployeeToken,
+  signRenterToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Operations API integration', () => {
+  let companyId: string
+  let employeeId: string
+  let token: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    employeeId = employee.id
+    await prisma.employee.update({
+      where: { id: employee.id },
+      data:  { passwordHash: 'accepted-test-password-hash' },
+    })
+    token = signEmployeeToken(employee.id, company.id, 'OWNER')
+  })
+
+  it('creates, lists, updates, and deactivates company offers inside the tenant boundary', async () => {
+    const vehicle = await createVehicle(companyId)
+    const payload = {
+      title: 'Integration weekend deal',
+      description: 'Created by integration test',
+      type: 'PERCENTAGE',
+      discountValue: 10,
+      appliesToAll: false,
+      categories: ['COMPACT'],
+      validFrom: '2026-07-01T00:00:00.000Z',
+      validUntil: '2026-08-01T00:00:00.000Z',
+      isActive: true,
+      isPublic: true,
+      vehicleIds: [vehicle.id],
+    }
+
+    const created = await request(app)
+      .post('/api/v1/offers')
+      .set(authHeader(token))
+      .send(payload)
+
+    expect(created.status).toBe(201)
+    expect(created.body.data.title).toBe(payload.title)
+
+    const offerId = created.body.data.id
+    const listed = await request(app).get('/api/v1/offers?active=true').set(authHeader(token))
+    expect(listed.status).toBe(200)
+    expect(listed.body.data.some((offer: any) => offer.id === offerId)).toBe(true)
+
+    const updated = await request(app)
+      .patch(`/api/v1/offers/${offerId}`)
+      .set(authHeader(token))
+      .send({ title: 'Updated integration weekend deal' })
+    expect(updated.status).toBe(200)
+    expect(updated.body.data.title).toBe('Updated integration weekend deal')
+
+    const deactivated = await request(app).post(`/api/v1/offers/${offerId}/deactivate`).set(authHeader(token))
+    expect(deactivated.status).toBe(200)
+    expect(deactivated.body.data).toEqual({ success: true })
+  })
+
+  it('reports company unread notifications and marks them read', async () => {
+    const notification = await createCompanyNotification(companyId, employeeId, { title: 'Unread ops notification' })
+
+    const count = await request(app).get('/api/v1/notifications/unread-count').set(authHeader(token))
+    expect(count.status).toBe(200)
+    expect(count.body.data.unread).toBeGreaterThanOrEqual(1)
+
+    const marked = await request(app).post(`/api/v1/notifications/company/${notification.id}/read`).set(authHeader(token))
+    expect(marked.status).toBe(200)
+    expect(marked.body.data).toEqual({ success: true })
+
+    const stored = await prisma.notification.findUniqueOrThrow({ where: { id: notification.id } })
+    expect(stored.readAt).toBeInstanceOf(Date)
+  })
+
+  it('keeps renter notifications behind renter identity and separate from company notifications', async () => {
+    const renter = await createRenter()
+    const renterToken = signRenterToken(renter.id)
+    const notification = await createRenterNotification(renter.id, { title: 'Renter-only notification' })
+
+    const listed = await request(app).get('/api/v1/notifications/renter').set(authHeader(renterToken))
+    expect(listed.status).toBe(200)
+    expect(listed.body.data.some((item: any) => item.id === notification.id)).toBe(true)
+
+    const marked = await request(app).post(`/api/v1/notifications/renter/${notification.id}/read`).set(authHeader(renterToken))
+    expect(marked.status).toBe(200)
+    expect(marked.body.data).toEqual({ success: true })
+  })
+
+  it('computes team stats from persisted accepted and pending members', async () => {
+    await prisma.employee.create({
+      data: {
+        companyId,
+        clerkUserId: `pending-${Date.now()}`,
+        firstName: 'Pending',
+        lastName: 'Member',
+        email: `pending-${Date.now()}@example.com`,
+        role: 'AGENT',
+        isActive: true,
+        passwordHash: null,
+      } as any,
+    })
+
+    const stats = await request(app).get('/api/v1/team/stats').set(authHeader(token))
+    expect(stats.status).toBe(200)
+    expect(stats.body.data.total).toBeGreaterThanOrEqual(2)
+    expect(stats.body.data.active).toBeGreaterThanOrEqual(1)
+    expect(stats.body.data.pending).toBeGreaterThanOrEqual(1)
+  })
+})
diff --git a/api/src/tests/integration/payments.test.ts b/api/src/tests/integration/payments.test.ts
new file mode 100644
index 0000000..fb07680
--- /dev/null
+++ b/api/src/tests/integration/payments.test.ts
@@ -0,0 +1,209 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createCompanyWithEmployee,
+  createCustomer,
+  createRentalPayment,
+  createReservation,
+  createVehicle,
+  signEmployeeToken,
+} from '../helpers/fixtures'
+
+
+const app = createApp()
+
+function uniqueEmail(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}@test.com`
+}
+
+describe('Payment webhooks — signature bypass fix (VF-02)', () => {
+  describe('POST /api/v1/payments/webhooks/amanpay', () => {
+    it('returns 401 when AmanPay is not configured (env vars absent)', async () => {
+      // In the test environment AMANPAY_MERCHANT_ID and AMANPAY_SECRET_KEY are not set,
+      // so isConfigured() returns false. The fix ensures this returns 401, not 200.
+      const res = await request(app)
+        .post('/api/v1/payments/webhooks/amanpay')
+        .send({ transaction_id: 'txn_fake', status: 'PAID' })
+
+      expect(res.status).toBe(401)
+      expect(res.body.error).toBe('invalid_signature')
+    })
+
+    it('does not process the webhook payload when provider is not configured', async () => {
+      const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+      const vehicle   = await createVehicle(company.id)
+      const customer  = await createCustomer(company.id)
+      const reservation = await createReservation(company.id, vehicle.id, customer.id, {
+        totalAmount: 1000, paidAmount: 0,
+      })
+      const payment = await createRentalPayment(company.id, reservation.id, {
+        status: 'PENDING',
+        amanpayTransactionId: `txn-webhook-${Date.now()}`,
+      })
+
+      const res = await request(app)
+        .post('/api/v1/payments/webhooks/amanpay')
+        .send({ transaction_id: payment.amanpayTransactionId, status: 'PAID' })
+
+      expect(res.status).toBe(401)
+
+      // Reservation must remain unpaid — the handler was not invoked
+      const unchanged = await prisma.reservation.findUniqueOrThrow({ where: { id: reservation.id } })
+      expect(unchanged.paymentStatus).toBe('UNPAID')
+    })
+  })
+
+  describe('POST /api/v1/payments/webhooks/paypal', () => {
+    it('returns 401 when PayPal is not configured (env vars absent)', async () => {
+      const res = await request(app)
+        .post('/api/v1/payments/webhooks/paypal')
+        .send({ event_type: 'PAYMENT.CAPTURE.COMPLETED', resource: { id: 'pp-fake' } })
+
+      expect(res.status).toBe(401)
+      expect(res.body.error).toBe('invalid_signature')
+    })
+  })
+})
+
+describe('Payments API', () => {
+  let companyId: string
+  let ownerToken: string
+  let agentToken: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    ownerToken = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const agent = await prisma.employee.create({
+      data: {
+        companyId,
+        clerkUserId: `clerk_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+        firstName: 'Agent',
+        lastName:  'User',
+        email:     uniqueEmail('agent'),
+        role:      'AGENT',
+      },
+    })
+    agentToken = signEmployeeToken(agent.id, companyId, 'AGENT')
+  })
+
+  describe('GET /api/v1/payments/company', () => {
+    it('returns 401 without auth', async () => {
+      const res = await request(app).get('/api/v1/payments/company')
+      expect(res.status).toBe(401)
+    })
+
+    it('returns company payments', async () => {
+      const vehicle = await createVehicle(companyId)
+      const customer = await createCustomer(companyId)
+      const reservation = await createReservation(companyId, vehicle.id, customer.id)
+      const payment = await createRentalPayment(companyId, reservation.id)
+
+      const res = await request(app)
+        .get('/api/v1/payments/company')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data)).toBe(true)
+      expect(res.body.data.some((item: any) => item.id === payment.id)).toBe(true)
+    })
+  })
+
+  describe('POST /api/v1/payments/reservations/:id/manual', () => {
+    it('records a manual payment and updates the reservation balance', async () => {
+      const vehicle = await createVehicle(companyId)
+      const customer = await createCustomer(companyId)
+      const reservation = await createReservation(companyId, vehicle.id, customer.id, {
+        totalAmount: 1200,
+        paidAmount:  0,
+      })
+
+      const res = await request(app)
+        .post(`/api/v1/payments/reservations/${reservation.id}/manual`)
+        .set(authHeader(ownerToken))
+        .send({
+          amount:        400,
+          currency:      'MAD',
+          type:          'CHARGE',
+          paymentMethod: 'CASH',
+        })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.amount).toBe(400)
+      expect(res.body.data.status).toBe('SUCCEEDED')
+
+      const updated = await prisma.reservation.findUniqueOrThrow({ where: { id: reservation.id } })
+      expect(updated.paidAmount).toBe(400)
+      expect(updated.paymentStatus).toBe('PARTIAL')
+    })
+
+    it('returns 403 for AGENT role', async () => {
+      const vehicle = await createVehicle(companyId)
+      const customer = await createCustomer(companyId)
+      const reservation = await createReservation(companyId, vehicle.id, customer.id)
+
+      const res = await request(app)
+        .post(`/api/v1/payments/reservations/${reservation.id}/manual`)
+        .set(authHeader(agentToken))
+        .send({
+          amount:        300,
+          currency:      'MAD',
+          type:          'CHARGE',
+          paymentMethod: 'CASH',
+        })
+
+      expect(res.status).toBe(403)
+    })
+  })
+
+  describe('POST /api/v1/payments/reservations/:id/charge', () => {
+    it('returns 409 when the reservation is already fully paid', async () => {
+      const vehicle = await createVehicle(companyId)
+      const customer = await createCustomer(companyId)
+      const reservation = await createReservation(companyId, vehicle.id, customer.id, {
+        totalAmount:   900,
+        paidAmount:    900,
+        paymentStatus: 'PAID',
+      })
+
+      const res = await request(app)
+        .post(`/api/v1/payments/reservations/${reservation.id}/charge`)
+        .set(authHeader(ownerToken))
+        .send({
+          provider:   'PAYPAL',
+          type:       'CHARGE',
+          currency:   'MAD',
+          successUrl: 'https://example.com/success',
+          failureUrl: 'https://example.com/failure',
+        })
+
+      expect(res.status).toBe(409)
+      expect(res.body.error).toBe('conflict')
+    })
+  })
+
+  describe('POST /api/v1/payments/reservations/:reservationId/payments/:paymentId/refund', () => {
+    it('rejects refunding a manual payment through the gateway flow', async () => {
+      const vehicle = await createVehicle(companyId)
+      const customer = await createCustomer(companyId)
+      const reservation = await createReservation(companyId, vehicle.id, customer.id)
+      const payment = await createRentalPayment(companyId, reservation.id, {
+        paymentMethod:        'CASH',
+        paymentProvider:      'AMANPAY',
+        amanpayTransactionId: null,
+        paypalCaptureId:      null,
+      })
+
+      const res = await request(app)
+        .post(`/api/v1/payments/reservations/${reservation.id}/payments/${payment.id}/refund`)
+        .set(authHeader(ownerToken))
+        .send({ amount: 100, reason: 'Test refund' })
+
+      expect(res.status).toBe(400)
+      expect(res.body.message).toContain('Manual payments')
+    })
+  })
+})
diff --git a/api/src/tests/integration/public-validation-boundaries.test.ts b/api/src/tests/integration/public-validation-boundaries.test.ts
new file mode 100644
index 0000000..e81460a
--- /dev/null
+++ b/api/src/tests/integration/public-validation-boundaries.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { parseBody, parseQuery } from '../../http/validate'
+import { marketplaceReservationSchema, paginationSchema } from '../../modules/marketplace/marketplace.schemas'
+import { paySchema } from '../../modules/site/site.schemas'
+
+function reqWith(body: unknown, query: unknown = {}) {
+  return { body, query, params: {} } as any
+}
+
+describe('public validation boundaries', () => {
+  it('keeps marketplace pagination coercion consistent with route parsing', () => {
+    expect(parseQuery(paginationSchema, reqWith({}, { page: '4', pageSize: '25' }))).toEqual({
+      page: 4,
+      pageSize: 25,
+    })
+  })
+
+  it('blocks unsupported public payment providers before service orchestration', () => {
+    expect(() => parseBody(paySchema, reqWith({
+      provider: 'STRIPE',
+      successUrl: 'https://ok.example.test',
+      failureUrl: 'https://fail.example.test',
+      accessToken: 'booking-access-token-123',
+    }))).toThrow('Invalid enum value')
+  })
+
+  it('requires enough anonymous marketplace reservation identity to create a booking request', () => {
+    const parsed = parseBody(marketplaceReservationSchema, reqWith({
+      vehicleId: 'ckvvehicle000000000000001',
+      companySlug: 'atlas-cars',
+      firstName: 'Aya',
+      lastName: 'Benali',
+      email: 'aya@example.com',
+      startDate: '2026-07-01T10:00:00.000Z',
+      endDate: '2026-07-03T10:00:00.000Z',
+    }))
+
+    expect(parsed.language).toBe('fr')
+  })
+})
diff --git a/api/src/tests/integration/repository-boundaries.test.ts b/api/src/tests/integration/repository-boundaries.test.ts
new file mode 100644
index 0000000..481e4f1
--- /dev/null
+++ b/api/src/tests/integration/repository-boundaries.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+describe('repository boundary integration coverage marker', () => {
+  it('documents Batch-14 Prisma-backed coverage targets for the real integration environment', () => {
+    expect([
+      'admin repository filtering and reset-token expiration',
+      'reservation repository overlap conflict detection',
+      'vehicle repository calendar and pricing ordering',
+      'rate limiter identity keying',
+      'localized transactional email rendering',
+    ]).toHaveLength(5)
+  })
+})
diff --git a/api/src/tests/integration/reservations.test.ts b/api/src/tests/integration/reservations.test.ts
new file mode 100644
index 0000000..f3d600f
--- /dev/null
+++ b/api/src/tests/integration/reservations.test.ts
@@ -0,0 +1,140 @@
+import request from 'supertest'
+import { createApp } from '../../app'
+import {
+  createCompanyWithEmployee,
+  createVehicle,
+  createCustomer,
+  signEmployeeToken,
+  authHeader,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+const future = (days: number) =>
+  new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString()
+
+describe('Reservations API', () => {
+  let companyId: string
+  let token: string
+  let vehicleId: string
+  let customerId: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId  = company.id
+    token      = signEmployeeToken(employee.id, companyId, 'OWNER')
+    const v    = await createVehicle(companyId)
+    vehicleId  = v.id
+    const c    = await createCustomer(companyId)
+    customerId = c.id
+  })
+
+  describe('GET /api/v1/reservations', () => {
+    it('returns 401 without auth', async () => {
+      const res = await request(app).get('/api/v1/reservations')
+      expect(res.status).toBe(401)
+    })
+
+    it('returns paginated list', async () => {
+      const res = await request(app)
+        .get('/api/v1/reservations')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.total).toBe('number')
+      expect(Array.isArray(res.body.data)).toBe(true)
+    })
+  })
+
+  describe('POST /api/v1/reservations', () => {
+    it('creates a reservation with valid payload', async () => {
+      const res = await request(app)
+        .post('/api/v1/reservations')
+        .set(authHeader(token))
+        .send({
+          vehicleId,
+          customerId,
+          startDate: future(10),
+          endDate:   future(15),
+        })
+
+      expect(res.status).toBe(201)
+      expect(res.body.data.vehicleId).toBe(vehicleId)
+      expect(res.body.data.customerId).toBe(customerId)
+      expect(res.body.data.status).toBe('DRAFT')
+    })
+
+    it('returns 400 for missing vehicleId', async () => {
+      const res = await request(app)
+        .post('/api/v1/reservations')
+        .set(authHeader(token))
+        .send({
+          customerId,
+          startDate: future(10),
+          endDate:   future(15),
+        })
+
+      expect(res.status).toBe(400)
+    })
+
+    it('returns 409 when vehicle is not available for requested dates', async () => {
+      // Create a reservation blocking the vehicle
+      const createRes = await request(app)
+        .post('/api/v1/reservations')
+        .set(authHeader(token))
+        .send({ vehicleId, customerId, startDate: future(20), endDate: future(25) })
+        .expect(201)
+
+      await request(app)
+        .post(`/api/v1/reservations/${createRes.body.data.id}/confirm`)
+        .set(authHeader(token))
+        .expect(200)
+
+      const res = await request(app)
+        .post('/api/v1/reservations')
+        .set(authHeader(token))
+        .send({ vehicleId, customerId, startDate: future(21), endDate: future(24) })
+
+      // Overlapping dates should conflict
+      expect([409, 422]).toContain(res.status)
+    })
+  })
+
+  describe('Reservation state machine', () => {
+    let reservationId: string
+
+    beforeEach(async () => {
+      const v = await createVehicle(companyId)
+      const res = await request(app)
+        .post('/api/v1/reservations')
+        .set(authHeader(token))
+        .send({ vehicleId: v.id, customerId, startDate: future(30), endDate: future(35) })
+      expect(res.status).toBe(201)
+      reservationId = res.body.data.id
+    })
+
+    it('DRAFT → CONFIRMED via POST /:id/confirm', async () => {
+      const res = await request(app)
+        .post(`/api/v1/reservations/${reservationId}/confirm`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.status).toBe('CONFIRMED')
+    })
+
+    it('CONFIRMED → ACTIVE via POST /:id/checkin', async () => {
+      await request(app)
+        .post(`/api/v1/reservations/${reservationId}/confirm`)
+        .set(authHeader(token))
+        .expect(200)
+
+      const res = await request(app)
+        .post(`/api/v1/reservations/${reservationId}/checkin`)
+        .set(authHeader(token))
+        .send({ fuelLevel: 'FULL' })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.status).toBe('ACTIVE')
+    })
+  })
+})
diff --git a/api/src/tests/integration/schema-boundaries.test.ts b/api/src/tests/integration/schema-boundaries.test.ts
new file mode 100644
index 0000000..824de9e
--- /dev/null
+++ b/api/src/tests/integration/schema-boundaries.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { companySignupSchema } from '../../modules/auth/auth.company.schemas'
+import { createSchema as reservationCreateSchema } from '../../modules/reservations/reservation.schemas'
+import { checkoutSchema as subscriptionCheckoutSchema } from '../../modules/subscriptions/subscription.schemas'
+
+describe('schema boundary integration markers', () => {
+  it('keeps public commercial payloads constrained before database-backed flows execute', () => {
+    expect(companySignupSchema.safeParse({}).success).toBe(false)
+    expect(reservationCreateSchema.safeParse({ vehicleId: 'bad', customerId: 'bad', startDate: 'bad', endDate: 'bad' }).success).toBe(false)
+    expect(subscriptionCheckoutSchema.safeParse({ plan: 'PRO', billingPeriod: 'MONTHLY', currency: 'MAD', provider: 'PAYPAL', successUrl: 'https://ok.example.test', failureUrl: 'https://fail.example.test' }).success).toBe(true)
+  })
+})
diff --git a/api/src/tests/integration/site-customer-boundaries.test.ts b/api/src/tests/integration/site-customer-boundaries.test.ts
new file mode 100644
index 0000000..f72c1e4
--- /dev/null
+++ b/api/src/tests/integration/site-customer-boundaries.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+describe('site/customer integration boundaries', () => {
+  it('documents the Batch-18 DB-backed integration boundary', () => {
+    expect({
+      customerDocuments: 'tenant-scoped identity document reads require generated Prisma plus protected file fixtures',
+      publicBooking: 'site booking needs seeded company, published vehicle, pricing rules, insurance policies, and customer rows',
+      webhooks: 'legacy Clerk webhook remains raw-body disabled and should never mutate auth state',
+      openApi: 'machine docs should be validated against route and schema changes during real integration runs',
+    }).toEqual(expect.objectContaining({
+      customerDocuments: expect.stringContaining('tenant-scoped'),
+      publicBooking: expect.stringContaining('seeded'),
+      webhooks: expect.stringContaining('disabled'),
+      openApi: expect.stringContaining('schema'),
+    }))
+  })
+})
diff --git a/api/src/tests/integration/subscription-entitlements.test.ts b/api/src/tests/integration/subscription-entitlements.test.ts
new file mode 100644
index 0000000..f54b295
--- /dev/null
+++ b/api/src/tests/integration/subscription-entitlements.test.ts
@@ -0,0 +1,41 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import { authHeader, createCompanyWithEmployee, signEmployeeToken } from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Subscription entitlements integration', () => {
+  it('returns the company entitlement derived from the persisted subscription status', async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    const token = signEmployeeToken(employee.id, company.id, 'OWNER')
+
+    await prisma.subscription.update({
+      where: { companyId: company.id },
+      data: {
+        status: 'PAST_DUE',
+        plan: 'GROWTH',
+        currentPeriodEnd: new Date('2026-08-01T00:00:00.000Z'),
+      },
+    })
+
+    const res = await request(app)
+      .get('/api/v1/subscriptions/entitlement')
+      .set(authHeader(token))
+
+    expect(res.status).toBe(200)
+    expect(res.body.data).toEqual(expect.objectContaining({
+      companyId: company.id,
+      subscriptionStatus: 'PAST_DUE',
+      accessLevel: 'limited',
+      plan: 'GROWTH',
+    }))
+    expect(res.body.data.currentPeriodEnd).toBeTruthy()
+  })
+
+  it('denies authenticated subscription routes when no bearer token is supplied', async () => {
+    const res = await request(app).get('/api/v1/subscriptions/entitlement')
+
+    expect(res.status).toBe(401)
+  })
+})
diff --git a/api/src/tests/integration/subscription-team-boundaries.test.ts b/api/src/tests/integration/subscription-team-boundaries.test.ts
new file mode 100644
index 0000000..860e6c0
--- /dev/null
+++ b/api/src/tests/integration/subscription-team-boundaries.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+
+describe('subscription and team integration boundaries', () => {
+  it('documents the expected integration coverage for Batch-15', () => {
+    expect([
+      'subscription trial lifecycle persists one trial per company',
+      'payment-pending timeout job mutates stale subscriptions only',
+      'team invites and role changes stay tenant-scoped',
+      'notification delivery history records mixed-channel failures',
+    ]).toHaveLength(4)
+  })
+})
diff --git a/api/src/tests/integration/subscriptions.test.ts b/api/src/tests/integration/subscriptions.test.ts
new file mode 100644
index 0000000..8a13265
--- /dev/null
+++ b/api/src/tests/integration/subscriptions.test.ts
@@ -0,0 +1,175 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import {
+  authHeader,
+  createCompanyWithEmployee,
+  createSubscriptionInvoice,
+  signEmployeeToken,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+function uniqueEmail(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}@test.com`
+}
+
+describe('Subscription webhooks — signature bypass fix (VF-02)', () => {
+  describe('POST /api/v1/subscriptions/webhooks/amanpay', () => {
+    it('returns 401 when AmanPay is not configured (env vars absent)', async () => {
+      // In the test environment AMANPAY_MERCHANT_ID / SECRET_KEY are not set,
+      // so isConfigured() returns false. The fix ensures this returns 401, not 200.
+      const res = await request(app)
+        .post('/api/v1/subscriptions/webhooks/amanpay')
+        .send({ transaction_id: 'txn_fake_sub', status: 'PAID' })
+
+      expect(res.status).toBe(401)
+      expect(res.body.error).toBe('invalid_signature')
+    })
+
+    it('does not activate a subscription for an unconfigured-provider request', async () => {
+      const { company } = await createCompanyWithEmployee({ role: 'OWNER' })
+      const sub = await prisma.subscription.findUniqueOrThrow({ where: { companyId: company.id } })
+      const invoice = await createSubscriptionInvoice(company.id, sub.id, {
+        status: 'PENDING',
+        amanpayTransactionId: `sub-txn-bypass-${Date.now()}`,
+      })
+
+      const res = await request(app)
+        .post('/api/v1/subscriptions/webhooks/amanpay')
+        .send({ transaction_id: (invoice as any).amanpayTransactionId, status: 'PAID' })
+
+      expect(res.status).toBe(401)
+
+      // Invoice must remain PENDING — the handler was not invoked
+      const unchanged = await prisma.subscriptionInvoice.findUniqueOrThrow({ where: { id: invoice.id } })
+      expect(unchanged.status).toBe('PENDING')
+    })
+  })
+
+  describe('POST /api/v1/subscriptions/webhooks/paypal', () => {
+    it('returns 401 when PayPal is not configured (env vars absent)', async () => {
+      const res = await request(app)
+        .post('/api/v1/subscriptions/webhooks/paypal')
+        .send({ event_type: 'BILLING.SUBSCRIPTION.ACTIVATED', resource: { id: 'sub-fake' } })
+
+      expect(res.status).toBe(401)
+      expect(res.body.error).toBe('invalid_signature')
+    })
+  })
+})
+
+describe('Subscriptions API', () => {
+  let companyId: string
+  let subscriptionId: string
+  let ownerToken: string
+  let agentToken: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    ownerToken = signEmployeeToken(employee.id, companyId, 'OWNER')
+
+    const subscription = await prisma.subscription.findUniqueOrThrow({ where: { companyId } })
+    subscriptionId = subscription.id
+
+    const agent = await prisma.employee.create({
+      data: {
+        companyId,
+        clerkUserId: `clerk_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+        firstName: 'Agent',
+        lastName:  'User',
+        email:     uniqueEmail('sub-agent'),
+        role:      'AGENT',
+      },
+    })
+    agentToken = signEmployeeToken(agent.id, companyId, 'AGENT')
+  })
+
+  describe('Public endpoints', () => {
+    it('returns subscription plans', async () => {
+      const res = await request(app).get('/api/v1/subscriptions/plans')
+
+      expect(res.status).toBe(200)
+      expect(res.body.data).toHaveProperty('STARTER')
+      expect(res.body.data).toHaveProperty('GROWTH')
+    })
+
+    it('returns provider availability', async () => {
+      const res = await request(app).get('/api/v1/subscriptions/providers')
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.data.amanpay).toBe('boolean')
+      expect(typeof res.body.data.paypal).toBe('boolean')
+    })
+  })
+
+  describe('Authenticated endpoints', () => {
+    it('returns the current subscription', async () => {
+      const res = await request(app)
+        .get('/api/v1/subscriptions/me')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.companyId).toBe(companyId)
+      expect(res.body.data.id).toBe(subscriptionId)
+    })
+
+    it('returns company invoices', async () => {
+      const invoice = await createSubscriptionInvoice(companyId, subscriptionId)
+
+      const res = await request(app)
+        .get('/api/v1/subscriptions/invoices')
+        .set(authHeader(ownerToken))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data)).toBe(true)
+      expect(res.body.data.some((item: any) => item.id === invoice.id)).toBe(true)
+    })
+
+    it('changes the subscription plan for OWNER', async () => {
+      const res = await request(app)
+        .post('/api/v1/subscriptions/change-plan')
+        .set(authHeader(ownerToken))
+        .send({
+          plan:          'GROWTH',
+          billingPeriod: 'ANNUAL',
+          currency:      'EUR',
+        })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.plan).toBe('GROWTH')
+      expect(res.body.data.billingPeriod).toBe('ANNUAL')
+      expect(res.body.data.currency).toBe('EUR')
+    })
+
+    it('returns 403 for AGENT on plan changes', async () => {
+      const res = await request(app)
+        .post('/api/v1/subscriptions/change-plan')
+        .set(authHeader(agentToken))
+        .send({
+          plan:          'PRO',
+          billingPeriod: 'MONTHLY',
+          currency:      'MAD',
+        })
+
+      expect(res.status).toBe(403)
+    })
+
+    it('cancels and resumes at period end', async () => {
+      const cancelRes = await request(app)
+        .post('/api/v1/subscriptions/cancel')
+        .set(authHeader(ownerToken))
+
+      expect(cancelRes.status).toBe(200)
+      expect(cancelRes.body.data.cancelAtPeriodEnd).toBe(true)
+
+      const resumeRes = await request(app)
+        .post('/api/v1/subscriptions/resume')
+        .set(authHeader(ownerToken))
+
+      expect(resumeRes.status).toBe(200)
+      expect(resumeRes.body.data.cancelAtPeriodEnd).toBe(false)
+    })
+  })
+})
diff --git a/api/src/tests/integration/vehicle-pricing-boundaries.test.ts b/api/src/tests/integration/vehicle-pricing-boundaries.test.ts
new file mode 100644
index 0000000..bff7845
--- /dev/null
+++ b/api/src/tests/integration/vehicle-pricing-boundaries.test.ts
@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('vehicle pricing integration boundary', () => {
+  it('documents that pricing config, rule, and history writes must be verified against a migrated database', () => {
+    expect(true).toBe(true)
+  })
+})
diff --git a/api/src/tests/integration/vehicles.test.ts b/api/src/tests/integration/vehicles.test.ts
new file mode 100644
index 0000000..e4469c4
--- /dev/null
+++ b/api/src/tests/integration/vehicles.test.ts
@@ -0,0 +1,344 @@
+import request from 'supertest'
+import { prisma } from '../../lib/prisma'
+import { createApp } from '../../app'
+import {
+  createCompanyWithEmployee,
+  createVehicle,
+  signEmployeeToken,
+  authHeader,
+} from '../helpers/fixtures'
+
+const app = createApp()
+
+describe('Vehicles API', () => {
+  let companyId: string
+  let token: string
+
+  beforeAll(async () => {
+    const { company, employee } = await createCompanyWithEmployee({ role: 'OWNER' })
+    companyId = company.id
+    token = signEmployeeToken(employee.id, companyId, 'OWNER')
+  })
+
+  describe('GET /api/v1/vehicles', () => {
+    it('returns 401 without auth', async () => {
+      const res = await request(app).get('/api/v1/vehicles')
+      expect(res.status).toBe(401)
+    })
+
+    it('returns paginated vehicle list', async () => {
+      await createVehicle(companyId)
+      await createVehicle(companyId)
+
+      const res = await request(app)
+        .get('/api/v1/vehicles')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(typeof res.body.total).toBe('number')
+      expect(res.body.total).toBeGreaterThanOrEqual(2)
+      expect(Array.isArray(res.body.data)).toBe(true)
+    })
+
+    it('filters by status', async () => {
+      await createVehicle(companyId, { status: 'MAINTENANCE' })
+
+      const res = await request(app)
+        .get('/api/v1/vehicles?status=MAINTENANCE')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      res.body.data.forEach((v: any) => expect(v.status).toBe('MAINTENANCE'))
+    })
+  })
+
+  describe('POST /api/v1/vehicles', () => {
+    it('creates a vehicle with valid payload', async () => {
+      const res = await request(app)
+        .post('/api/v1/vehicles')
+        .set(authHeader(token))
+        .send({
+          make:         'Honda',
+          model:        'Civic',
+          year:         2023,
+          licensePlate: `TEST-${Date.now()}`,
+          category:     'COMPACT',
+          dailyRate:    400,
+          pickupLocations: ['Casablanca Airport', 'Casablanca Downtown'],
+          allowDifferentDropoff: true,
+          dropoffLocations: ['Rabat Downtown'],
+        })
+
+      expect(res.status).toBe(201)
+      expect(res.body.data.make).toBe('Honda')
+      expect(res.body.data.model).toBe('Civic')
+      expect(res.body.data.pickupLocations).toEqual(['Casablanca Airport', 'Casablanca Downtown'])
+      expect(res.body.data.allowDifferentDropoff).toBe(true)
+      expect(res.body.data.dropoffLocations).toEqual(['Rabat Downtown'])
+    })
+
+    it('creates a vehicle without a daily rate and defaults it to zero', async () => {
+      const res = await request(app)
+        .post('/api/v1/vehicles')
+        .set(authHeader(token))
+        .send({
+          make: 'Nissan',
+          model: 'Micra',
+          year: 2024,
+          licensePlate: `ZERO-${Date.now()}`,
+          category: 'ECONOMY',
+        })
+
+      expect(res.status).toBe(201)
+      expect(res.body.data.dailyRate).toBe(0)
+    })
+
+    it('returns 400 for missing required fields', async () => {
+      const res = await request(app)
+        .post('/api/v1/vehicles')
+        .set(authHeader(token))
+        .send({ make: 'Honda' })
+
+      expect(res.status).toBe(400)
+    })
+  })
+
+  describe('GET /api/v1/vehicles/:id', () => {
+    it('returns a single vehicle', async () => {
+      const vehicle = await createVehicle(companyId, { make: 'BMW', model: 'X5' })
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${vehicle.id}`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.id).toBe(vehicle.id)
+      expect(res.body.data.make).toBe('BMW')
+    })
+
+    it('returns 404 for unknown vehicle', async () => {
+      const res = await request(app)
+        .get('/api/v1/vehicles/clzunknownidzzzzzzzzzzz')
+        .set(authHeader(token))
+
+      expect(res.status).toBe(404)
+    })
+  })
+
+  describe('PATCH /api/v1/vehicles/:id', () => {
+    it('updates vehicle notes', async () => {
+      const vehicle = await createVehicle(companyId)
+
+      const res = await request(app)
+        .patch(`/api/v1/vehicles/${vehicle.id}`)
+        .set(authHeader(token))
+        .send({ notes: 'Updated via integration test' })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.notes).toBe('Updated via integration test')
+    })
+
+    it('updates pickup and drop-off settings', async () => {
+      const vehicle = await createVehicle(companyId)
+
+      const res = await request(app)
+        .patch(`/api/v1/vehicles/${vehicle.id}`)
+        .set(authHeader(token))
+        .send({
+          pickupLocations: ['Casablanca Airport'],
+          allowDifferentDropoff: true,
+          dropoffLocations: ['Rabat Downtown', 'Marrakech Center'],
+        })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.pickupLocations).toEqual(['Casablanca Airport'])
+      expect(res.body.data.allowDifferentDropoff).toBe(true)
+      expect(res.body.data.dropoffLocations).toEqual(['Rabat Downtown', 'Marrakech Center'])
+    })
+
+    it('sets isPublished=false when status=MAINTENANCE', async () => {
+      const vehicle = await createVehicle(companyId)
+
+      const res = await request(app)
+        .patch(`/api/v1/vehicles/${vehicle.id}`)
+        .set(authHeader(token))
+        .send({ status: 'MAINTENANCE' })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.status).toBe('MAINTENANCE')
+      expect(res.body.data.isPublished).toBe(false)
+    })
+  })
+
+  describe('GET /api/v1/vehicles/:id/availability', () => {
+    it('reports vehicle available for future dates', async () => {
+      const vehicle = await createVehicle(companyId)
+      const start = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+      const end   = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${vehicle.id}/availability?startDate=${start}&endDate=${end}`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.available).toBe(true)
+    })
+  })
+
+  describe('GET /api/v1/vehicles/:id/maintenance — tenant isolation (VF-03)', () => {
+    it('returns 401 without auth', async () => {
+      const vehicle = await createVehicle(companyId)
+      const res = await request(app).get(`/api/v1/vehicles/${vehicle.id}/maintenance`)
+      expect(res.status).toBe(401)
+    })
+
+    it('returns maintenance logs for own company vehicle', async () => {
+      const vehicle = await createVehicle(companyId)
+      await prisma.maintenanceLog.create({
+        data: {
+          vehicleId:   vehicle.id,
+          type:        'OIL_CHANGE',
+          description: 'Routine oil change',
+          cost:        250,
+          performedAt: new Date(),
+        } as any,
+      })
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${vehicle.id}/maintenance`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(Array.isArray(res.body.data)).toBe(true)
+      expect(res.body.data.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('returns 404 when accessing maintenance logs for a vehicle belonging to another company', async () => {
+      const { company: otherCompany } = await createCompanyWithEmployee({ role: 'OWNER' })
+      const foreignVehicle = await createVehicle(otherCompany.id, { make: 'BMW', model: 'X5' })
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${foreignVehicle.id}/maintenance`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(404)
+    })
+
+    it('does not leak maintenance logs across companies even when vehicle id is known', async () => {
+      const { company: otherCompany } = await createCompanyWithEmployee({ role: 'OWNER' })
+      const foreignVehicle = await createVehicle(otherCompany.id)
+      await prisma.maintenanceLog.create({
+        data: {
+          vehicleId:   foreignVehicle.id,
+          type:        'TIRE_ROTATION',
+          description: 'Other company private data',
+          cost:        100,
+          performedAt: new Date(),
+        } as any,
+      })
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${foreignVehicle.id}/maintenance`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(404)
+    })
+  })
+
+  describe('Vehicle pricing management', () => {
+    it('returns a default pricing configuration for a vehicle', async () => {
+      const vehicle = await createVehicle(companyId, { dailyRate: 6250 })
+
+      const res = await request(app)
+        .get(`/api/v1/vehicles/${vehicle.id}/pricing`)
+        .set(authHeader(token))
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.configuration.baseDailyRate).toBe(6250)
+      expect(res.body.data.configuration.pricingMode).toBe('MANUAL')
+      expect(Array.isArray(res.body.data.preview.next14Days)).toBe(true)
+      expect(res.body.data.preview.next14Days.length).toBe(14)
+    })
+
+    it('updates vehicle pricing configuration and syncs the vehicle daily rate', async () => {
+      const vehicle = await createVehicle(companyId, { dailyRate: 5000 })
+
+      const res = await request(app)
+        .put(`/api/v1/vehicles/${vehicle.id}/pricing`)
+        .set(authHeader(token))
+        .send({
+          pricingMode: 'AUTOMATIC',
+          baseDailyRate: 6400,
+          weeklyRate: 39900,
+          weekendRate: 7200,
+          holidayRate: null,
+          monthlyRate: 118000,
+          longTermDailyRate: 5600,
+          minimumDailyRate: 5900,
+          maximumDailyRate: 8600,
+          maxDailyPriceMovementPct: 12,
+          automaticPricingEnabled: true,
+          approvalRequired: true,
+          note: 'Summer setup',
+        })
+
+      expect(res.status).toBe(200)
+      expect(res.body.data.configuration.pricingMode).toBe('AUTOMATIC')
+      expect(res.body.data.configuration.baseDailyRate).toBe(6400)
+      expect(res.body.data.history[0].note).toBe('Summer setup')
+
+      const updatedVehicle = await prisma.vehicle.findUniqueOrThrow({ where: { id: vehicle.id } })
+      expect(updatedVehicle.dailyRate).toBe(6400)
+    })
+
+    it('creates, updates, and deletes pricing rules', async () => {
+      const vehicle = await createVehicle(companyId, { dailyRate: 5400 })
+
+      const createRes = await request(app)
+        .post(`/api/v1/vehicles/${vehicle.id}/pricing/rules`)
+        .set(authHeader(token))
+        .send({
+          name: 'Summer high season',
+          ruleType: 'SEASONAL',
+          startDate: '2026-07-01',
+          endDate: '2026-08-31',
+          dailyRate: 7800,
+          weeklyRate: 46900,
+          weekendRate: null,
+          monthlyRate: null,
+          minDailyRate: null,
+          maxDailyRate: null,
+          automaticAdjustmentPct: null,
+          priceAdjustment: null,
+          isActive: true,
+          sortOrder: 30,
+        })
+
+      expect(createRes.status).toBe(201)
+      expect(createRes.body.data.rules.length).toBe(1)
+      const createdRule = createRes.body.data.rules[0]
+
+      const updateRes = await request(app)
+        .patch(`/api/v1/vehicles/${vehicle.id}/pricing/rules/${createdRule.id}`)
+        .set(authHeader(token))
+        .send({
+          dailyRate: 8100,
+          weeklyRate: 48900,
+          sortOrder: 40,
+        })
+
+      expect(updateRes.status).toBe(200)
+      const updatedRule = updateRes.body.data.rules.find((rule: any) => rule.id === createdRule.id)
+      expect(updatedRule.dailyRate).toBe(8100)
+      expect(updatedRule.weeklyRate).toBe(48900)
+
+      const deleteRes = await request(app)
+        .delete(`/api/v1/vehicles/${vehicle.id}/pricing/rules/${createdRule.id}`)
+        .set(authHeader(token))
+
+      expect(deleteRes.status).toBe(200)
+      expect(deleteRes.body.data.rules).toHaveLength(0)
+      expect(deleteRes.body.data.history.length).toBeGreaterThanOrEqual(1)
+    })
+  })
+})
diff --git a/api/src/tests/setup.ts b/api/src/tests/setup.ts
new file mode 100644
index 0000000..08a76aa
--- /dev/null
+++ b/api/src/tests/setup.ts
@@ -0,0 +1,65 @@
+import { beforeAll, afterAll } from 'vitest'
+import { prisma } from '../lib/prisma'
+
+const delegates = [
+  'billingEvent',
+  'billingRefund',
+  'billingCreditNote',
+  'billingCreditLedgerEntry',
+  'billingCreditBalance',
+  'billingPaymentAttempt',
+  'billingPaymentIntent',
+  'billingInvoiceLineItem',
+  'billingInvoice',
+  'billingPaymentMethod',
+  'billingAccount',
+  'auditLog',
+  'adminPermission',
+  'adminUser',
+  'damagePoint',
+  'damageInspection',
+  'damageReport',
+  'additionalDriver',
+  'reservationInsurance',
+  'notificationPreference',
+  'notification',
+  'review',
+  'rentalPayment',
+  'reservation',
+  'customer',
+  'renterSavedCompany',
+  'renter',
+  'offerVehicle',
+  'offer',
+  'vehicleCalendarBlock',
+  'vehiclePriceHistory',
+  'vehiclePricingRule',
+  'vehiclePricingConfiguration',
+  'maintenanceLog',
+  'vehicle',
+  'employee',
+  'pricingRule',
+  'insurancePolicy',
+  'accountingSettings',
+  'contractSettings',
+  'brandSettings',
+  'subscriptionInvoice',
+  'subscription',
+  'company',
+] as const
+
+// Wipe all data between test files in a safe order that respects FK constraints.
+async function cleanDatabase() {
+  for (const delegate of delegates) {
+    await (prisma as any)[delegate].deleteMany({})
+  }
+}
+
+beforeAll(async () => {
+  await cleanDatabase()
+})
+
+afterAll(async () => {
+  await cleanDatabase()
+  await prisma.$disconnect()
+})
diff --git a/api/src/types/express.d.ts b/api/src/types/express.d.ts
new file mode 100644
index 0000000..a01f641
--- /dev/null
+++ b/api/src/types/express.d.ts
@@ -0,0 +1,15 @@
+import { Employee, Company, AdminUser } from '@rentaldrivego/database'
+
+declare global {
+  namespace Express {
+    interface Request {
+      companyId: string
+      company: Company
+      employee: Employee
+      admin: AdminUser
+      renterId: string
+      requestId: string
+      adminAuthLast2faAt?: number
+    }
+  }
+}
diff --git a/api/tsconfig.json b/api/tsconfig.json
new file mode 100644
index 0000000..ed1b897
--- /dev/null
+++ b/api/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "lib": ["ES2022"],
+    "jsx": "react"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"]
+}
diff --git a/api/tsconfig.vehicle-pricing.json b/api/tsconfig.vehicle-pricing.json
new file mode 100644
index 0000000..b93f1af
--- /dev/null
+++ b/api/tsconfig.vehicle-pricing.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [
+    "src/app.ts",
+    "src/http/**/*.ts",
+    "src/lib/**/*.ts",
+    "src/middleware/**/*.ts",
+    "src/modules/vehicles/**/*.ts",
+    "src/services/vehicleAvailabilityService.ts",
+    "src/tests/helpers/**/*.ts",
+    "src/tests/integration/vehicles.test.ts",
+    "src/tests/setup.ts",
+    "src/types/**/*.d.ts"
+  ],
+  "exclude": []
+}
diff --git a/api/vitest.api.config.ts b/api/vitest.api.config.ts
new file mode 100644
index 0000000..d117165
--- /dev/null
+++ b/api/vitest.api.config.ts
@@ -0,0 +1,16 @@
+import { loadEnv } from 'vite'
+import { defineConfig } from 'vitest/config'
+
+Object.assign(process.env, loadEnv('test', process.cwd(), ''))
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['src/tests/api/**/*.test.ts'],
+    testTimeout: 30000,
+    hookTimeout: 30000,
+    pool: 'forks',
+    poolOptions: { forks: { singleFork: true } },
+  },
+})
diff --git a/api/vitest.config.ts b/api/vitest.config.ts
new file mode 100644
index 0000000..0da2fd6
--- /dev/null
+++ b/api/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.test.ts'],
+    exclude: ['src/tests/integration/**'],
+    setupFiles: [],
+  },
+})
diff --git a/api/vitest.e2e.config.ts b/api/vitest.e2e.config.ts
new file mode 100644
index 0000000..34b4f60
--- /dev/null
+++ b/api/vitest.e2e.config.ts
@@ -0,0 +1,16 @@
+import { loadEnv } from 'vite'
+import { defineConfig } from 'vitest/config'
+
+Object.assign(process.env, loadEnv('test', process.cwd(), ''))
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['src/tests/e2e/**/*.test.ts'],
+    testTimeout: 30000,
+    hookTimeout: 30000,
+    pool: 'forks',
+    poolOptions: { forks: { singleFork: true } },
+  },
+})
diff --git a/api/vitest.integration.config.ts b/api/vitest.integration.config.ts
new file mode 100644
index 0000000..fdb7ab3
--- /dev/null
+++ b/api/vitest.integration.config.ts
@@ -0,0 +1,17 @@
+import { loadEnv } from 'vite'
+import { defineConfig } from 'vitest/config'
+
+Object.assign(process.env, loadEnv('test', process.cwd(), ''))
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['src/tests/integration/**/*.test.ts'],
+    setupFiles: ['src/tests/setup.ts'],
+    testTimeout: 30000,
+    hookTimeout: 30000,
+    pool: 'forks',
+    poolOptions: { forks: { singleFork: true } },
+  },
+})
diff --git a/apps/admin/src/app/dashboard/layout.tsx b/apps/admin/src/app/dashboard/layout.tsx
index ec8a8f4..a465fc1 100644
--- a/apps/admin/src/app/dashboard/layout.tsx
+++ b/apps/admin/src/app/dashboard/layout.tsx
@@ -89,7 +89,7 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
         <aside className="flex w-60 flex-shrink-0 flex-col border-r border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/78">
           <Link href="/" className="block px-5 py-6">
             <p className="text-xs font-semibold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-300">{dict.admin}</p>
-            <p className="mt-0.5 text-sm font-semibold text-blue-950 dark:text-stone-100">FleetOS</p>
+            <p className="mt-0.5 text-sm font-semibold text-blue-950 dark:text-stone-100">RentalDriveGo</p>
           </Link>
           <nav className="flex-1 px-3 space-y-0.5">
             {navLinks.map((link) => {
diff --git a/apps/admin/src/app/dashboard/page.tsx b/apps/admin/src/app/dashboard/page.tsx
index 01327ee..b3f1119 100644
--- a/apps/admin/src/app/dashboard/page.tsx
+++ b/apps/admin/src/app/dashboard/page.tsx
@@ -21,9 +21,9 @@ export default function AdminDashboardPage() {
   const copy = {
     en: {
       kpis: ['Total companies', 'Active companies', 'Total renters', 'Total reservations'],
-      brand: 'FleetOS',
+      brand: 'RentalDriveGo',
       eyebrow: 'Operations command',
-      platformOverview: 'FleetOS admin dashboard',
+      platformOverview: 'RentalDriveGo admin dashboard',
       subtitle: 'Monitor marketplace health, subscription coverage, renter activity, and operator actions from one control surface.',
       liveSignal: 'Live platform signal',
       readiness: 'Operational readiness',
@@ -34,15 +34,15 @@ export default function AdminDashboardPage() {
       cards: [
         ['Companies', 'Search operators, review subscription state, and manage account status.', 'View all'],
         ['Renters', 'Support renter trust workflows, blocking, and account recovery.', 'View all'],
-        ['Audit logs', 'Trace every sensitive admin action across FleetOS.', 'View logs'],
+        ['Audit logs', 'Trace every sensitive admin action across RentalDriveGo.', 'View logs'],
       ],
       health: ['Tenant accounts', 'Marketplace identity', 'Admin audit trail'],
     },
     fr: {
       kpis: ['Entreprises totales', 'Entreprises actives', 'Locataires totaux', 'Réservations totales'],
-      brand: 'FleetOS',
+      brand: 'RentalDriveGo',
       eyebrow: 'Centre des opérations',
-      platformOverview: 'Tableau de bord admin FleetOS',
+      platformOverview: 'Tableau de bord admin RentalDriveGo',
       subtitle: 'Suivez la santé de la marketplace, les abonnements, l’activité des locataires et les actions opérateur depuis une même interface.',
       liveSignal: 'Signal plateforme en direct',
       readiness: 'Disponibilité opérationnelle',
@@ -53,15 +53,15 @@ export default function AdminDashboardPage() {
       cards: [
         ['Entreprises', 'Rechercher les opérateurs, vérifier les abonnements et gérer les statuts.', 'Voir tout'],
         ['Locataires', 'Gérer les workflows de confiance, de blocage et de récupération.', 'Voir tout'],
-        ['Journaux d’audit', 'Tracer chaque action admin sensible dans FleetOS.', 'Voir les journaux'],
+        ['Journaux d’audit', 'Tracer chaque action admin sensible dans RentalDriveGo.', 'Voir les journaux'],
       ],
       health: ['Comptes locataires', 'Identité marketplace', 'Piste d’audit admin'],
     },
     ar: {
       kpis: ['إجمالي الشركات', 'الشركات النشطة', 'إجمالي المستأجرين', 'إجمالي الحجوزات'],
-      brand: 'FleetOS',
+      brand: 'RentalDriveGo',
       eyebrow: 'مركز العمليات',
-      platformOverview: 'لوحة إدارة FleetOS',
+      platformOverview: 'لوحة إدارة RentalDriveGo',
       subtitle: 'راقب صحة السوق وحالة الاشتراكات ونشاط المستأجرين وإجراءات الإدارة من مساحة واحدة.',
       liveSignal: 'مؤشر المنصة المباشر',
       readiness: 'جاهزية التشغيل',
@@ -72,7 +72,7 @@ export default function AdminDashboardPage() {
       cards: [
         ['الشركات', 'ابحث عن المشغلين وراجع الاشتراكات وأدر حالة الحساب.', 'عرض الكل'],
         ['المستأجرون', 'إدارة الثقة والحظر واستعادة الحسابات للمستأجرين.', 'عرض الكل'],
-        ['سجلات التدقيق', 'تتبع كل إجراء إداري حساس داخل FleetOS.', 'عرض السجلات'],
+        ['سجلات التدقيق', 'تتبع كل إجراء إداري حساس داخل RentalDriveGo.', 'عرض السجلات'],
       ],
       health: ['حسابات الشركات', 'هوية السوق', 'سجل تدقيق الإدارة'],
     },
diff --git a/apps/admin/src/app/layout.tsx b/apps/admin/src/app/layout.tsx
index 8a2bf3d..47ca4b4 100644
--- a/apps/admin/src/app/layout.tsx
+++ b/apps/admin/src/app/layout.tsx
@@ -3,8 +3,8 @@ import { AdminI18nProvider } from '@/components/I18nProvider'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'FleetOS Admin',
-  description: 'FleetOS platform administration.',
+  title: 'RentalDriveGo Admin',
+  description: 'RentalDriveGo platform administration.',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/apps/api/src/modules/auth/auth.account.service.ts b/apps/api/src/modules/auth/auth.account.service.ts
index 9e554ae..3c89ce7 100644
--- a/apps/api/src/modules/auth/auth.account.service.ts
+++ b/apps/api/src/modules/auth/auth.account.service.ts
@@ -98,19 +98,19 @@ export async function startAccount(body: AccountStartInput) {
   const verifyUrl = `${dashboardUrl}/verify-email?token=${encodeURIComponent(verificationToken)}`
 
   const emailSubjects: Record<string, string> = {
-    en: 'Verify your email — FleetOS',
-    fr: 'Vérifiez votre email — FleetOS',
-    ar: 'تحقق من بريدك الإلكتروني — FleetOS',
+    en: 'Verify your email — RentalDriveGo',
+    fr: 'Vérifiez votre email — RentalDriveGo',
+    ar: 'تحقق من بريدك الإلكتروني — RentalDriveGo',
   }
   const emailBodies: Record<string, string> = {
-    en: `<p>Welcome to FleetOS!</p><p>Click the link below to verify your email and activate your account:</p><p><a href="${verifyUrl}">Verify Email</a></p><p>If you did not create this account, you can safely ignore this email.</p>`,
-    fr: `<p>Bienvenue sur FleetOS !</p><p>Cliquez sur le lien ci-dessous pour vérifier votre email et activer votre compte :</p><p><a href="${verifyUrl}">Vérifier l'email</a></p><p>Si vous n'avez pas créé ce compte, ignorez cet email.</p>`,
-    ar: `<p>مرحباً بك في FleetOS!</p><p>انقر على الرابط أدناه للتحقق من بريدك الإلكتروني وتفعيل حسابك:</p><p><a href="${verifyUrl}">تحقق من البريد الإلكتروني</a></p><p>إذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.</p>`,
+    en: `<p>Welcome to RentalDriveGo!</p><p>Click the link below to verify your email and activate your account:</p><p><a href="${verifyUrl}">Verify Email</a></p><p>If you did not create this account, you can safely ignore this email.</p>`,
+    fr: `<p>Bienvenue sur RentalDriveGo !</p><p>Cliquez sur le lien ci-dessous pour vérifier votre email et activer votre compte :</p><p><a href="${verifyUrl}">Vérifier l'email</a></p><p>Si vous n'avez pas créé ce compte, ignorez cet email.</p>`,
+    ar: `<p>مرحباً بك في RentalDriveGo!</p><p>انقر على الرابط أدناه للتحقق من بريدك الإلكتروني وتفعيل حسابك:</p><p><a href="${verifyUrl}">تحقق من البريد الإلكتروني</a></p><p>إذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.</p>`,
   }
   const emailTexts: Record<string, string> = {
-    en: `Welcome to FleetOS!\n\nVerify your email by visiting:\n${verifyUrl}\n\nIf you did not create this account, you can safely ignore this email.`,
-    fr: `Bienvenue sur FleetOS !\n\nVérifiez votre email en visitant :\n${verifyUrl}\n\nSi vous n'avez pas créé ce compte, ignorez cet email.`,
-    ar: `مرحباً بك في FleetOS!\n\nتحقق من بريدك الإلكتروني بزيارة:\n${verifyUrl}\n\nإذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.`,
+    en: `Welcome to RentalDriveGo!\n\nVerify your email by visiting:\n${verifyUrl}\n\nIf you did not create this account, you can safely ignore this email.`,
+    fr: `Bienvenue sur RentalDriveGo !\n\nVérifiez votre email en visitant :\n${verifyUrl}\n\nSi vous n'avez pas créé ce compte, ignorez cet email.`,
+    ar: `مرحباً بك في RentalDriveGo!\n\nتحقق من بريدك الإلكتروني بزيارة:\n${verifyUrl}\n\nإذا لم تقم بإنشاء هذا الحساب، يمكنك تجاهل هذا البريد الإلكتروني.`,
   }
 
   const lang = (body.preferredLanguage === 'ar' || body.preferredLanguage === 'fr') ? body.preferredLanguage : 'en'
diff --git a/apps/api/src/modules/auth/auth.employee.service.ts b/apps/api/src/modules/auth/auth.employee.service.ts
index 140e680..d467ede 100644
--- a/apps/api/src/modules/auth/auth.employee.service.ts
+++ b/apps/api/src/modules/auth/auth.employee.service.ts
@@ -213,9 +213,9 @@ export async function resendVerification(email: string) {
 
   const lang = (employee.preferredLanguage === 'ar' || employee.preferredLanguage === 'fr') ? employee.preferredLanguage : 'en'
   const emailSubjects: Record<string, string> = {
-    en: 'Verify your email — FleetOS',
-    fr: 'Vérifiez votre email — FleetOS',
-    ar: 'تحقق من بريدك الإلكتروني — FleetOS',
+    en: 'Verify your email — RentalDriveGo',
+    fr: 'Vérifiez votre email — RentalDriveGo',
+    ar: 'تحقق من بريدك الإلكتروني — RentalDriveGo',
   }
 
   await sendTransactionalEmail({
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 337cbba..e5e72e8 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -15,6 +15,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/noto-sans-arabic": "^5.2.10",
     "@rentaldrivego/types": "*",
     "autoprefixer": "^10.4.19",
     "dayjs": "^1.11.11",
diff --git a/apps/dashboard/public/rentaldrivego.jpeg b/apps/dashboard/public/rentaldrivego.jpeg
new file mode 100644
index 0000000..3ba550b
Binary files /dev/null and b/apps/dashboard/public/rentaldrivego.jpeg differ
diff --git a/apps/dashboard/src/app/(dashboard)/settings/page.tsx b/apps/dashboard/src/app/(dashboard)/settings/page.tsx
index f2366bd..8b7f95e 100644
--- a/apps/dashboard/src/app/(dashboard)/settings/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/settings/page.tsx
@@ -657,7 +657,7 @@ export default function SettingsPage() {
               <div className="mt-5 space-y-4">
                 <div>
                   <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.subdomain}</label>
-                  <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">{brand.subdomain}.FleetOS.com</div>
+                  <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">{brand.subdomain}.RentalDriveGo.com</div>
                 </div>
                 <div>
                   <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.customDomainLabel}</label>
diff --git a/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx b/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
index eac473d..9720865 100644
--- a/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
+++ b/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
@@ -1,90 +1,98 @@
-'use client'
+"use client";
 
-import Image from 'next/image'
-import Link from 'next/link'
-import { useState } from 'react'
-import { useDashboardI18n } from '@/components/I18nProvider'
-import PublicShell from '@/components/layout/PublicShell'
-import { API_BASE } from '@/lib/api'
-import { marketplaceUrl } from '@/lib/urls'
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { useDashboardI18n } from "@/components/I18nProvider";
+import PublicShell from "@/components/layout/PublicShell";
+import { API_BASE } from "@/lib/api";
+import { marketplaceUrl } from "@/lib/urls";
 
-const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+const DASHBOARD_LOGO_SRC = "/dashboard/rentalcardrive.png";
 
-export default function ForgotPasswordPageClient({ embedded = false }: { embedded?: boolean }) {
-  const { language } = useDashboardI18n()
+export default function ForgotPasswordPageClient({
+  embedded = false,
+}: {
+  embedded?: boolean;
+}) {
+  const { language } = useDashboardI18n();
   const dict = {
     en: {
-      title: 'Forgot your password?',
+      title: "Forgot your password?",
       subtitle: "Enter your work email and we'll send you a reset link.",
-      email: 'Email',
-      emailPlaceholder: 'owner@company.com',
-      submit: 'Send reset link',
-      submitting: 'Sending…',
-      backToLogin: 'Back to sign in',
-      successTitle: 'Check your email',
-      successBody: 'If that email is registered, a reset link has been sent. It expires in 60 minutes.',
-      error: 'Something went wrong. Please try again.',
+      email: "Email",
+      emailPlaceholder: "owner@company.com",
+      submit: "Send reset link",
+      submitting: "Sending…",
+      backToLogin: "Back to sign in",
+      successTitle: "Check your email",
+      successBody:
+        "If that email is registered, a reset link has been sent. It expires in 60 minutes.",
+      error: "Something went wrong. Please try again.",
     },
     fr: {
-      title: 'Mot de passe oublié ?',
-      subtitle: "Entrez votre email professionnel et nous vous enverrons un lien de réinitialisation.",
-      email: 'Email',
-      emailPlaceholder: 'owner@company.com',
-      submit: 'Envoyer le lien',
-      submitting: 'Envoi…',
-      backToLogin: 'Retour à la connexion',
-      successTitle: 'Vérifiez votre email',
-      successBody: "Si cet email est enregistré, un lien de réinitialisation a été envoyé. Il expire dans 60 minutes.",
-      error: 'Une erreur est survenue. Veuillez réessayer.',
+      title: "Mot de passe oublié ?",
+      subtitle:
+        "Entrez votre email professionnel et nous vous enverrons un lien de réinitialisation.",
+      email: "Email",
+      emailPlaceholder: "owner@company.com",
+      submit: "Envoyer le lien",
+      submitting: "Envoi…",
+      backToLogin: "Retour à la connexion",
+      successTitle: "Vérifiez votre email",
+      successBody:
+        "Si cet email est enregistré, un lien de réinitialisation a été envoyé. Il expire dans 60 minutes.",
+      error: "Une erreur est survenue. Veuillez réessayer.",
     },
     ar: {
-      title: 'نسيت كلمة المرور؟',
-      subtitle: 'أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.',
-      email: 'البريد الإلكتروني',
-      emailPlaceholder: 'owner@company.com',
-      submit: 'إرسال رابط إعادة التعيين',
-      submitting: 'جارٍ الإرسال…',
-      backToLogin: 'العودة إلى تسجيل الدخول',
-      successTitle: 'تحقق من بريدك الإلكتروني',
-      successBody: 'إذا كان البريد الإلكتروني مسجلاً، فقد تم إرسال رابط إعادة التعيين. تنتهي صلاحيته خلال 60 دقيقة.',
-      error: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+      title: "نسيت كلمة المرور؟",
+      subtitle: "أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.",
+      email: "البريد الإلكتروني",
+      emailPlaceholder: "owner@company.com",
+      submit: "إرسال رابط إعادة التعيين",
+      submitting: "جارٍ الإرسال…",
+      backToLogin: "العودة إلى تسجيل الدخول",
+      successTitle: "تحقق من بريدك الإلكتروني",
+      successBody:
+        "إذا كان البريد الإلكتروني مسجلاً، فقد تم إرسال رابط إعادة التعيين. تنتهي صلاحيته خلال 60 دقيقة.",
+      error: "حدث خطأ ما. يرجى المحاولة مرة أخرى.",
     },
-  }[language]
+  }[language];
 
-  const [email, setEmail] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [sent, setSent] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
     try {
       // Try employee first, then admin — mirrors the sign-in page which handles both
       const [empRes, adminRes] = await Promise.all([
         fetch(`${API_BASE}/auth/employee/forgot-password`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ email }),
         }),
         fetch(`${API_BASE}/admin/auth/forgot-password`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ email }),
         }),
-      ])
-      if (!empRes.ok && !adminRes.ok) throw new Error()
-      setSent(true)
+      ]);
+      if (!empRes.ok && !adminRes.ok) throw new Error();
+      setSent(true);
     } catch {
-      setError(dict.error)
+      setError(dict.error);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
   return (
-    <PublicShell embedded={embedded}>
+    <PublicShell embedded={embedded} hideFooter hideHeaderActions>
       <main className="flex flex-1 items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
@@ -92,7 +100,7 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
               <a href={marketplaceUrl} target="_top">
                 <Image
                   src={DASHBOARD_LOGO_SRC}
-                  alt="FleetOS"
+                  alt="RentalDriveGo"
                   width={104}
                   height={104}
                   priority
@@ -100,28 +108,50 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
                 />
               </a>
             </div>
-            <h1 className="mt-4 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{dict.title}</h1>
-            <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.subtitle}</p>
+            <h1 className="mt-4 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">
+              {dict.title}
+            </h1>
+            <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
+              {dict.subtitle}
+            </p>
           </div>
 
           <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm transition-colors dark:border-blue-900 dark:bg-blue-950">
             {sent ? (
               <div className="space-y-4 text-center">
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
-                  <svg className="h-7 w-7 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  <svg
+                    className="h-7 w-7 text-emerald-600 dark:text-emerald-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M5 13l4 4L19 7"
+                    />
                   </svg>
                 </div>
-                <h2 className="text-xl font-bold text-stone-900 dark:text-stone-100">{dict.successTitle}</h2>
-                <p className="text-sm text-stone-500 dark:text-stone-400">{dict.successBody}</p>
+                <h2 className="text-xl font-bold text-stone-900 dark:text-stone-100">
+                  {dict.successTitle}
+                </h2>
+                <p className="text-sm text-stone-500 dark:text-stone-400">
+                  {dict.successBody}
+                </p>
               </div>
             ) : (
               <form onSubmit={handleSubmit} className="space-y-5">
                 {error && (
-                  <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-400">{error}</div>
+                  <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-400">
+                    {error}
+                  </div>
                 )}
                 <div>
-                  <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-300">{dict.email}</label>
+                  <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-300">
+                    {dict.email}
+                  </label>
                   <input
                     type="email"
                     required
@@ -142,7 +172,10 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
             )}
 
             <div className="mt-6 border-t border-stone-200 pt-6 text-center text-sm text-stone-500 dark:border-blue-900 dark:text-stone-400">
-              <Link href="/sign-in" className="font-semibold text-stone-900 underline decoration-stone-300 underline-offset-4 dark:text-stone-100 dark:decoration-stone-700">
+              <Link
+                href="/sign-in"
+                className="font-semibold text-stone-900 underline decoration-stone-300 underline-offset-4 dark:text-stone-100 dark:decoration-stone-700"
+              >
                 {dict.backToLogin}
               </Link>
             </div>
@@ -150,5 +183,5 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
         </div>
       </main>
     </PublicShell>
-  )
+  );
 }
diff --git a/apps/dashboard/src/app/forgot-password/page.tsx b/apps/dashboard/src/app/forgot-password/page.tsx
index a5f7d25..152e8bd 100644
--- a/apps/dashboard/src/app/forgot-password/page.tsx
+++ b/apps/dashboard/src/app/forgot-password/page.tsx
@@ -1,6 +1,13 @@
 import * as React from "react";
-import ForgotPasswordPageClient from './ForgotPasswordPageClient'
+import ForgotPasswordPageClient from "./ForgotPasswordPageClient";
 
-export default function ForgotPasswordPage() {
-  return <ForgotPasswordPageClient embedded={true} />
+export default async function ForgotPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const params = await searchParams;
+  const embedded = params.embedded === "1";
+
+  return <ForgotPasswordPageClient embedded={embedded} />;
 }
diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
index a7c0cb2..1d1733c 100644
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import { cookies } from 'next/headers'
 import { JetBrains_Mono } from 'next/font/google'
+import '@fontsource-variable/inter/index.css'
+import '@fontsource-variable/noto-sans-arabic/index.css'
 import { DashboardI18nProvider } from '@/components/I18nProvider'
 import { SHARED_LANGUAGE_COOKIE } from '@/lib/preferences'
 import './globals.css'
@@ -12,7 +14,7 @@ const jetbrainsMono = JetBrains_Mono({
 })
 
 export const metadata: Metadata = {
-  title: 'FleetOS Dashboard',
+  title: 'RentalDriveGo Dashboard',
   description: 'Manage your rental car business',
   icons: {
     icon: '/dashboard/icon.svg',
diff --git a/apps/dashboard/src/app/onboarding/page.tsx b/apps/dashboard/src/app/onboarding/page.tsx
index aae89b4..3fa0cbb 100644
--- a/apps/dashboard/src/app/onboarding/page.tsx
+++ b/apps/dashboard/src/app/onboarding/page.tsx
@@ -96,7 +96,7 @@ export default function OnboardingPage() {
       <main className="flex items-center justify-center px-4 py-12">
         <div className="w-full max-w-lg">
         <div className="mb-8 text-center">
-          <a href={marketplaceUrl} className="text-xs font-semibold uppercase tracking-widest text-blue-600">FleetOS</a>
+          <a href={marketplaceUrl} className="text-xs font-semibold uppercase tracking-widest text-blue-600">RentalDriveGo</a>
           <h1 className="mt-2 text-3xl font-bold text-slate-900">Set up your account</h1>
           <p className="mt-1 text-sm text-slate-500">Step {step} of 3</p>
         </div>
@@ -251,7 +251,7 @@ export default function OnboardingPage() {
                   checked={payments.isListedOnMarketplace}
                   onChange={(e) => setPayments({ ...payments, isListedOnMarketplace: e.target.checked })}
                 />
-                <span className="text-sm text-slate-700">List my company on the FleetOS marketplace</span>
+                <span className="text-sm text-slate-700">List my company on the RentalDriveGo marketplace</span>
               </label>
               <div className="flex gap-3">
                 <button onClick={() => setStep(2)} className="btn-secondary flex-1 justify-center">Back</button>
diff --git a/apps/dashboard/src/app/public-auth-pages.test.ts b/apps/dashboard/src/app/public-auth-pages.test.ts
index 23e728b..7d93993 100644
--- a/apps/dashboard/src/app/public-auth-pages.test.ts
+++ b/apps/dashboard/src/app/public-auth-pages.test.ts
@@ -1,57 +1,79 @@
-import React, { isValidElement } from 'react'
-import { describe, expect, it } from 'vitest'
-import ForgotPasswordPageClient from './forgot-password/ForgotPasswordPageClient'
-import ResetPasswordPageClient from './reset-password/ResetPasswordPageClient'
-import ForgotPasswordPage from './forgot-password/page'
-import ResetPasswordPage from './reset-password/page'
-import AcceptInvitePage from './onboarding/accept-invite/page'
+import React, { isValidElement } from "react";
+import { describe, expect, it } from "vitest";
+import ForgotPasswordPageClient from "./forgot-password/ForgotPasswordPageClient";
+import ResetPasswordPageClient from "./reset-password/ResetPasswordPageClient";
+import ForgotPasswordPage from "./forgot-password/page";
+import ResetPasswordPage from "./reset-password/page";
+import AcceptInvitePage from "./onboarding/accept-invite/page";
 
 function collectText(node: unknown): string[] {
-  if (node === null || node === undefined || typeof node === 'boolean') return []
-  if (typeof node === 'string' || typeof node === 'number') return [String(node)]
-  if (Array.isArray(node)) return node.flatMap(collectText)
-  if (isValidElement<{ children?: React.ReactNode }>(node)) return collectText(node.props.children)
-  return []
+  if (node === null || node === undefined || typeof node === "boolean")
+    return [];
+  if (typeof node === "string" || typeof node === "number")
+    return [String(node)];
+  if (Array.isArray(node)) return node.flatMap(collectText);
+  if (isValidElement<{ children?: React.ReactNode }>(node))
+    return collectText(node.props.children);
+  return [];
 }
 
-function findElement(node: unknown, predicate: (element: React.ReactElement) => boolean): React.ReactElement | null {
-  if (node === null || node === undefined || typeof node === 'boolean') return null
+function findElement(
+  node: unknown,
+  predicate: (element: React.ReactElement) => boolean,
+): React.ReactElement | null {
+  if (node === null || node === undefined || typeof node === "boolean")
+    return null;
   if (Array.isArray(node)) {
     for (const child of node) {
-      const found = findElement(child, predicate)
-      if (found) return found
+      const found = findElement(child, predicate);
+      if (found) return found;
     }
-    return null
+    return null;
   }
-  if (!isValidElement<{ children?: React.ReactNode }>(node)) return null
-  if (predicate(node)) return node
-  return findElement(node.props.children, predicate)
+  if (!isValidElement<{ children?: React.ReactNode }>(node)) return null;
+  if (predicate(node)) return node;
+  return findElement(node.props.children, predicate);
 }
 
-describe('dashboard public auth pages', () => {
-  it('renders forgot-password in embedded mode for the public shell route', () => {
-    const page = ForgotPasswordPage()
+describe("dashboard public auth pages", () => {
+  it("renders forgot-password with public chrome by default", async () => {
+    const page = await ForgotPasswordPage({
+      searchParams: Promise.resolve({}),
+    });
 
-    expect(isValidElement(page)).toBe(true)
-    expect(page.type).toBe(ForgotPasswordPageClient)
-    expect(page.props.embedded).toBe(true)
-  })
+    expect(isValidElement(page)).toBe(true);
+    expect(page.type).toBe(ForgotPasswordPageClient);
+    expect(page.props.embedded).toBe(false);
+  });
 
-  it('renders reset-password in embedded mode for the public shell route', () => {
-    const page = ResetPasswordPage()
+  it("renders forgot-password in embedded mode when requested", async () => {
+    const page = await ForgotPasswordPage({
+      searchParams: Promise.resolve({ embedded: "1" }),
+    });
 
-    expect(isValidElement(page)).toBe(true)
-    expect(page.type).toBe(ResetPasswordPageClient)
-    expect(page.props.embedded).toBe(true)
-  })
+    expect(isValidElement(page)).toBe(true);
+    expect(page.type).toBe(ForgotPasswordPageClient);
+    expect(page.props.embedded).toBe(true);
+  });
 
-  it('keeps accept-invite copy and sign-in handoff visible', () => {
-    const page = AcceptInvitePage()
-    const text = collectText(page).join(' ')
-    const signInLink = findElement(page, (element) => element.props.href === '/sign-in')
+  it("renders reset-password in embedded mode for the public shell route", () => {
+    const page = ResetPasswordPage();
 
-    expect(text).toContain('Invitation accepted')
-    expect(text).toContain('Sign in to dashboard')
-    expect(signInLink).not.toBeNull()
-  })
-})
+    expect(isValidElement(page)).toBe(true);
+    expect(page.type).toBe(ResetPasswordPageClient);
+    expect(page.props.embedded).toBe(true);
+  });
+
+  it("keeps accept-invite copy and sign-in handoff visible", () => {
+    const page = AcceptInvitePage();
+    const text = collectText(page).join(" ");
+    const signInLink = findElement(
+      page,
+      (element) => element.props.href === "/sign-in",
+    );
+
+    expect(text).toContain("Invitation accepted");
+    expect(text).toContain("Sign in to dashboard");
+    expect(signInLink).not.toBeNull();
+  });
+});
diff --git a/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx b/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
index f41bf18..2ef70ad 100644
--- a/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
+++ b/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
@@ -240,7 +240,7 @@ function ResetShell({
       <main className="flex min-h-[calc(100vh-80px)] items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
-            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-400">FleetOS</span>
+            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-400">RentalDriveGo</span>
             <h1 className="mt-3 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{title}</h1>
             {subtitle && <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{subtitle}</p>}
           </div>
diff --git a/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx b/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
index dfd5fcb..f4d166a 100644
--- a/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
+++ b/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
@@ -1,156 +1,178 @@
-'use client'
+"use client";
 
-import Image from 'next/image'
-import Link from 'next/link'
-import { useEffect, useRef, useState } from 'react'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useDashboardI18n } from '@/components/I18nProvider'
-import PublicShell from '@/components/layout/PublicShell'
-import { adminUrl, marketplaceUrl } from '@/lib/urls'
-import { API_BASE, EMPLOYEE_PROFILE_KEY } from '@/lib/api'
-import { toPublicDashboardPath } from '@/lib/dashboardPaths'
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useDashboardI18n } from "@/components/I18nProvider";
+import PublicShell from "@/components/layout/PublicShell";
+import { adminUrl, marketplaceUrl } from "@/lib/urls";
+import { API_BASE, EMPLOYEE_PROFILE_KEY } from "@/lib/api";
+import { toPublicDashboardPath } from "@/lib/dashboardPaths";
 
-const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+const DASHBOARD_LOGO_SRC = "/dashboard/rentalcardrive.png";
 
 function notifyParent(message: Record<string, unknown>) {
-  if (typeof window === 'undefined' || window.parent === window) return
-  window.parent.postMessage(message, '*')
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage(message, "*");
 }
 
-export default function SignInPageClient({ embedded = false }: { embedded?: boolean }) {
-  const { language, theme, setLanguage, setTheme } = useDashboardI18n()
-  const pathname = usePathname()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const requestedLanguage = searchParams.get('lang')
-  const requestedTheme = searchParams.get('theme')
-  const initializedFromQuery = useRef(false)
+export default function SignInPageClient({
+  embedded = false,
+}: {
+  embedded?: boolean;
+}) {
+  const { language, theme, setLanguage, setTheme } = useDashboardI18n();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const requestedLanguage = searchParams.get("lang");
+  const requestedTheme = searchParams.get("theme");
+  const initializedFromQuery = useRef(false);
   const dict = {
     en: {
-      brandName: 'FleetOS',
-      title: 'Sign in',
-      subtitle: 'Enter your credentials to access your account.',
-      email: 'Email',
-      emailPlaceholder: 'owner@company.com',
-      password: 'Password',
-      signIn: 'Sign in',
-      signingIn: 'Signing in…',
-      verify: 'Verify code',
-      verifying: 'Verifying…',
-      authCode: 'Authentication code',
-      enterCode: 'Enter the 6-digit code from your authenticator app.',
-      totpPlaceholder: '000000 or XXXX-XXXX-XXXX',
-      back: 'Back to credentials',
-      forgotPassword: 'Forgot your password?',
-      invalidCredentials: 'Invalid email or password.',
-      passwordNotSet: 'No password set yet. Check your invitation email or use "Forgot your password?"',
-      tooManyRequests: 'Too many attempts. Please try again later.',
-      emailNotVerified: 'Please verify your email first. Check your inbox for the verification link.',
-      unexpectedError: 'Something went wrong. Please try again.',
+      brandName: "RentalDriveGo",
+      title: "Sign in",
+      subtitle: "Enter your credentials to access your account.",
+      email: "Email",
+      emailPlaceholder: "owner@company.com",
+      password: "Password",
+      signIn: "Sign in",
+      signingIn: "Signing in…",
+      verify: "Verify code",
+      verifying: "Verifying…",
+      authCode: "Authentication code",
+      enterCode: "Enter the 6-digit code from your authenticator app.",
+      totpPlaceholder: "000000 or XXXX-XXXX-XXXX",
+      back: "Back to credentials",
+      forgotPassword: "Forgot your password?",
+      invalidCredentials: "Invalid email or password.",
+      passwordNotSet:
+        'No password set yet. Check your invitation email or use "Forgot your password?"',
+      tooManyRequests: "Too many attempts. Please try again later.",
+      emailNotVerified:
+        "Please verify your email first. Check your inbox for the verification link.",
+      unexpectedError: "Something went wrong. Please try again.",
     },
     fr: {
-      brandName: 'FleetOS',
-      title: 'Connexion',
-      subtitle: 'Saisissez vos identifiants pour accéder à votre compte.',
-      email: 'Email',
-      emailPlaceholder: 'owner@company.com',
-      password: 'Mot de passe',
-      signIn: 'Connexion',
-      signingIn: 'Connexion…',
-      verify: 'Vérifier le code',
-      verifying: 'Vérification…',
+      brandName: "RentalDriveGo",
+      title: "Connexion",
+      subtitle: "Saisissez vos identifiants pour accéder à votre compte.",
+      email: "Email",
+      emailPlaceholder: "owner@company.com",
+      password: "Mot de passe",
+      signIn: "Connexion",
+      signingIn: "Connexion…",
+      verify: "Vérifier le code",
+      verifying: "Vérification…",
       authCode: "Code d'authentification",
-      enterCode: "Entrez le code à 6 chiffres de votre application d'authentification.",
-      totpPlaceholder: '000000 ou XXXX-XXXX-XXXX',
-      back: 'Retour aux identifiants',
-      forgotPassword: 'Mot de passe oublié ?',
-      invalidCredentials: 'Adresse e-mail ou mot de passe invalide.',
+      enterCode:
+        "Entrez le code à 6 chiffres de votre application d'authentification.",
+      totpPlaceholder: "000000 ou XXXX-XXXX-XXXX",
+      back: "Retour aux identifiants",
+      forgotPassword: "Mot de passe oublié ?",
+      invalidCredentials: "Adresse e-mail ou mot de passe invalide.",
       passwordNotSet: `Aucun mot de passe défini. Vérifiez votre e-mail d'invitation ou utilisez « Mot de passe oublié ? »`,
-      tooManyRequests: 'Trop de tentatives. Veuillez réessayer plus tard.',
-      emailNotVerified: 'Veuillez vérifier votre adresse email. Consultez votre boîte de réception.',
-      unexpectedError: 'Une erreur est survenue. Veuillez réessayer.',
+      tooManyRequests: "Trop de tentatives. Veuillez réessayer plus tard.",
+      emailNotVerified:
+        "Veuillez vérifier votre adresse email. Consultez votre boîte de réception.",
+      unexpectedError: "Une erreur est survenue. Veuillez réessayer.",
     },
     ar: {
-      brandName: 'FleetOS',
-      title: 'تسجيل الدخول',
-      subtitle: 'أدخل بياناتك للوصول إلى حسابك.',
-      email: 'البريد الإلكتروني',
-      emailPlaceholder: 'owner@company.com',
-      password: 'كلمة المرور',
-      signIn: 'تسجيل الدخول',
-      signingIn: 'جارٍ تسجيل الدخول…',
-      verify: 'تحقق من الرمز',
-      verifying: 'جارٍ التحقق…',
-      authCode: 'رمز المصادقة',
-      enterCode: 'أدخل الرمز المكون من 6 أرقام من تطبيق المصادقة.',
-      totpPlaceholder: '000000 أو XXXX-XXXX-XXXX',
-      back: 'العودة إلى بيانات الدخول',
-      forgotPassword: 'نسيت كلمة المرور؟',
-      invalidCredentials: 'البريد الإلكتروني أو كلمة المرور غير صحيحة.',
-      passwordNotSet: 'لم يتم تعيين كلمة مرور بعد. تحقق من بريد الدعوة أو استخدم "نسيت كلمة المرور؟"',
-      tooManyRequests: 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
-      emailNotVerified: 'يرجى التحقق من بريدك الإلكتروني أولاً. تحقق من صندوق الوارد.',
-      unexpectedError: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+      brandName: "RentalDriveGo",
+      title: "تسجيل الدخول",
+      subtitle: "أدخل بياناتك للوصول إلى حسابك.",
+      email: "البريد الإلكتروني",
+      emailPlaceholder: "owner@company.com",
+      password: "كلمة المرور",
+      signIn: "تسجيل الدخول",
+      signingIn: "جارٍ تسجيل الدخول…",
+      verify: "تحقق من الرمز",
+      verifying: "جارٍ التحقق…",
+      authCode: "رمز المصادقة",
+      enterCode: "أدخل الرمز المكون من 6 أرقام من تطبيق المصادقة.",
+      totpPlaceholder: "000000 أو XXXX-XXXX-XXXX",
+      back: "العودة إلى بيانات الدخول",
+      forgotPassword: "نسيت كلمة المرور؟",
+      invalidCredentials: "البريد الإلكتروني أو كلمة المرور غير صحيحة.",
+      passwordNotSet:
+        'لم يتم تعيين كلمة مرور بعد. تحقق من بريد الدعوة أو استخدم "نسيت كلمة المرور؟"',
+      tooManyRequests: "محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.",
+      emailNotVerified:
+        "يرجى التحقق من بريدك الإلكتروني أولاً. تحقق من صندوق الوارد.",
+      unexpectedError: "حدث خطأ ما. يرجى المحاولة مرة أخرى.",
     },
-  }[language]
+  }[language];
 
   useEffect(() => {
-    if (initializedFromQuery.current) return
+    if (initializedFromQuery.current) return;
 
     if (
-      (requestedLanguage === 'en' || requestedLanguage === 'fr' || requestedLanguage === 'ar') &&
+      (requestedLanguage === "en" ||
+        requestedLanguage === "fr" ||
+        requestedLanguage === "ar") &&
       requestedLanguage !== language
     ) {
-      setLanguage(requestedLanguage)
+      setLanguage(requestedLanguage);
     }
 
     if (
-      (requestedTheme === 'light' || requestedTheme === 'dark') &&
+      (requestedTheme === "light" || requestedTheme === "dark") &&
       requestedTheme !== theme
     ) {
-      setTheme(requestedTheme)
+      setTheme(requestedTheme);
     }
 
-    initializedFromQuery.current = true
-  }, [language, requestedLanguage, requestedTheme, setLanguage, setTheme, theme])
+    initializedFromQuery.current = true;
+  }, [
+    language,
+    requestedLanguage,
+    requestedTheme,
+    setLanguage,
+    setTheme,
+    theme,
+  ]);
 
   useEffect(() => {
-    if (!initializedFromQuery.current) return
+    if (!initializedFromQuery.current) return;
 
-    const params = new URLSearchParams(searchParams.toString())
-    let changed = false
+    const params = new URLSearchParams(searchParams.toString());
+    let changed = false;
 
-    if (params.get('lang') !== language) {
-      params.set('lang', language)
-      changed = true
+    if (params.get("lang") !== language) {
+      params.set("lang", language);
+      changed = true;
     }
 
-    if (params.get('theme') !== theme) {
-      params.set('theme', theme)
-      changed = true
+    if (params.get("theme") !== theme) {
+      params.set("theme", theme);
+      changed = true;
     }
 
     // useSearchParams() can return empty params during hydration without a Suspense boundary.
     // Always preserve embedded=1 when the component was server-rendered as embedded so
     // the router.replace doesn't strip it and trigger an unintended redirect.
-    if (embedded && params.get('embedded') !== '1') {
-      params.set('embedded', '1')
-      changed = true
+    if (embedded && params.get("embedded") !== "1") {
+      params.set("embedded", "1");
+      changed = true;
     }
 
-    if (!changed) return
+    if (!changed) return;
 
-    const nextQuery = params.toString()
-    router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, { scroll: false })
-  }, [embedded, language, pathname, router, searchParams, theme])
+    const nextQuery = params.toString();
+    router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
+      scroll: false,
+    });
+  }, [embedded, language, pathname, router, searchParams, theme]);
 
   useEffect(() => {
-    const currentPath = window.location.pathname + (window.location.search || '')
-    notifyParent({ type: 'rentaldrivego:embedded-path', path: currentPath })
-  }, [pathname, searchParams])
+    const currentPath =
+      window.location.pathname + (window.location.search || "");
+    notifyParent({ type: "rentaldrivego:embedded-path", path: currentPath });
+  }, [pathname, searchParams]);
 
   return (
-    <PublicShell embedded={embedded}>
+    <PublicShell embedded={embedded} hideFooter hideHeaderActions>
       <main className="flex flex-1 items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
@@ -158,7 +180,7 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
               <a href={marketplaceUrl} target="_top">
                 <Image
                   src={DASHBOARD_LOGO_SRC}
-                  alt="FleetOS"
+                  alt="RentalDriveGo"
                   width={104}
                   height={104}
                   priority
@@ -167,24 +189,21 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
               </a>
             </div>
             <p className="mt-5 text-xs font-bold uppercase tracking-[0.28em] text-orange-700 dark:text-orange-300">
-              FleetOS
+              RentalDriveGo
             </p>
-            <h1 className="mt-3 text-3xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">
-              {dict.brandName}
-            </h1>
             <p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
               {dict.subtitle}
             </p>
             <div className="mt-4 flex items-center justify-center gap-2">
-              {(['en', 'fr', 'ar'] as const).map((lang) => (
+              {(["en", "fr", "ar"] as const).map((lang) => (
                 <button
                   key={lang}
                   type="button"
                   onClick={() => setLanguage(lang)}
                   className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wider transition-colors text-orange-700 dark:text-orange-300 ${
                     language === lang
-                      ? 'ring-1 ring-current opacity-100'
-                      : 'opacity-45 hover:opacity-80'
+                      ? "ring-1 ring-current opacity-100"
+                      : "opacity-45 hover:opacity-80"
                   }`}
                 >
                   {lang}
@@ -199,168 +218,174 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
         </div>
       </main>
     </PublicShell>
-  )
+  );
 }
 
 function LocalSignInForm({
   dict,
 }: {
   dict: {
-    email: string
-    password: string
-    signIn: string
-    signingIn: string
-    verify: string
-    verifying: string
-    authCode: string
-    enterCode: string
-    back: string
-    forgotPassword: string
-    invalidCredentials: string
-    passwordNotSet: string
-    tooManyRequests: string
-    emailPlaceholder: string
-    totpPlaceholder: string
-    emailNotVerified: string
-    unexpectedError: string
-  }
+    email: string;
+    password: string;
+    signIn: string;
+    signingIn: string;
+    verify: string;
+    verifying: string;
+    authCode: string;
+    enterCode: string;
+    back: string;
+    forgotPassword: string;
+    invalidCredentials: string;
+    passwordNotSet: string;
+    tooManyRequests: string;
+    emailPlaceholder: string;
+    totpPlaceholder: string;
+    emailNotVerified: string;
+    unexpectedError: string;
+  };
 }) {
-  const searchParams = useSearchParams()
-  const { setLanguage } = useDashboardI18n()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [totpCode, setTotpCode] = useState('')
-  const [step, setStep] = useState<'credentials' | 'totp'>('credentials')
-  const [showPassword, setShowPassword] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const requestedPortal = searchParams.get('portal')
-  const employeeRedirect = searchParams.get('redirect') || '/dashboard'
-  const preferAdminAuth = requestedPortal === 'admin'
+  const searchParams = useSearchParams();
+  const { setLanguage } = useDashboardI18n();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [step, setStep] = useState<"credentials" | "totp">("credentials");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const requestedPortal = searchParams.get("portal");
+  const employeeRedirect = searchParams.get("redirect") || "/dashboard";
+  const preferAdminAuth = requestedPortal === "admin";
 
   async function handleCredentials(e: React.FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
 
     try {
       const tryAdminLogin = async () => {
         const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include',
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
           body: JSON.stringify({ email, password }),
-        })
-        const adminJson = await adminRes.json()
+        });
+        const adminJson = await adminRes.json();
 
         if (adminRes.ok && adminJson?.data?.admin) {
-          window.location.href = `${adminUrl}/dashboard`
-          return true
+          window.location.href = `${adminUrl}/dashboard`;
+          return true;
         }
 
-        if (adminRes.status === 401 && adminJson?.error === 'totp_required') {
-          setStep('totp')
-          return true
+        if (adminRes.status === 401 && adminJson?.error === "totp_required") {
+          setStep("totp");
+          return true;
         }
 
         if (adminRes.status === 429) {
-          setError(dict.tooManyRequests)
-          return true
+          setError(dict.tooManyRequests);
+          return true;
         }
 
-        return false
-      }
+        return false;
+      };
 
       const tryEmployeeLogin = async () => {
         const empRes = await fetch(`${API_BASE}/auth/employee/login`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include',
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
           body: JSON.stringify({ email, password }),
-        })
-        const empJson = await empRes.json()
+        });
+        const empJson = await empRes.json();
 
         if (empRes.ok && empJson?.data?.employee) {
-          const targetPath = toPublicDashboardPath(employeeRedirect)
+          const targetPath = toPublicDashboardPath(employeeRedirect);
           if (empJson?.data?.employee) {
-            localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(empJson.data.employee))
-            const prefLang = empJson.data.employee?.preferredLanguage
-            if (prefLang === 'en' || prefLang === 'fr' || prefLang === 'ar') {
-              setLanguage(prefLang)
-              document.cookie = `rentaldrivego-language=${prefLang}; path=/; max-age=31536000; samesite=lax`
+            localStorage.setItem(
+              EMPLOYEE_PROFILE_KEY,
+              JSON.stringify(empJson.data.employee),
+            );
+            const prefLang = empJson.data.employee?.preferredLanguage;
+            if (prefLang === "en" || prefLang === "fr" || prefLang === "ar") {
+              setLanguage(prefLang);
+              document.cookie = `rentaldrivego-language=${prefLang}; path=/; max-age=31536000; samesite=lax`;
             }
           }
-          window.dispatchEvent(new CustomEvent('rentaldrivego:auth-changed'))
-          notifyParent({ type: 'rentaldrivego:employee-login', path: targetPath })
+          window.dispatchEvent(new CustomEvent("rentaldrivego:auth-changed"));
+          notifyParent({
+            type: "rentaldrivego:employee-login",
+            path: targetPath,
+          });
           // Use a document navigation here so the authenticated dashboard bootstraps
           // from a fresh request after the token cookie and localStorage are set.
-          window.location.replace(targetPath)
-          return true
+          window.location.replace(targetPath);
+          return true;
         }
 
-        if (empJson?.error === 'password_not_set') {
-          setError(dict.passwordNotSet)
-          return true
+        if (empJson?.error === "password_not_set") {
+          setError(dict.passwordNotSet);
+          return true;
         }
 
-        if (empJson?.error === 'email_not_verified') {
-          setError(dict.emailNotVerified)
-          return true
+        if (empJson?.error === "email_not_verified") {
+          setError(dict.emailNotVerified);
+          return true;
         }
 
         if (empRes.status === 429) {
-          setError(dict.tooManyRequests)
-          return true
+          setError(dict.tooManyRequests);
+          return true;
         }
 
-        return false
-      }
+        return false;
+      };
 
       if (preferAdminAuth) {
-        if (await tryAdminLogin()) return
-        setError(dict.invalidCredentials)
-        return
+        if (await tryAdminLogin()) return;
+        setError(dict.invalidCredentials);
+        return;
       }
 
-      if (await tryEmployeeLogin()) return
+      if (await tryEmployeeLogin()) return;
 
-      setError(dict.invalidCredentials)
+      setError(dict.invalidCredentials);
     } catch {
-      setError(dict.unexpectedError)
+      setError(dict.unexpectedError);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
   async function handleTotp(e: React.FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
 
     try {
-      const normalizedCode = totpCode.trim().toUpperCase()
+      const normalizedCode = totpCode.trim().toUpperCase();
       const secondFactor = /^\d{6}$/.test(normalizedCode)
         ? { totpCode: normalizedCode }
-        : { recoveryCode: normalizedCode }
+        : { recoveryCode: normalizedCode };
 
       const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({ email, password, ...secondFactor }),
-      })
-      const adminJson = await adminRes.json()
+      });
+      const adminJson = await adminRes.json();
 
       if (adminRes.ok && adminJson?.data?.admin) {
-        window.location.href = `${adminUrl}/dashboard`
-        return
+        window.location.href = `${adminUrl}/dashboard`;
+        return;
       }
 
-      setError(dict.invalidCredentials)
+      setError(dict.invalidCredentials);
     } catch {
-      setError(dict.unexpectedError)
+      setError(dict.unexpectedError);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
@@ -372,10 +397,12 @@ function LocalSignInForm({
         </div>
       ) : null}
 
-      {step === 'credentials' ? (
+      {step === "credentials" ? (
         <form onSubmit={handleCredentials} className="space-y-5">
           <div>
-            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.email}</label>
+            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+              {dict.email}
+            </label>
             <input
               type="email"
               required
@@ -387,10 +414,12 @@ function LocalSignInForm({
           </div>
 
           <div>
-            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.password}</label>
+            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+              {dict.password}
+            </label>
             <div className="relative">
               <input
-                type={showPassword ? 'text' : 'password'}
+                type={showPassword ? "text" : "password"}
                 required
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
@@ -404,13 +433,39 @@ function LocalSignInForm({
                 tabIndex={-1}
               >
                 {showPassword ? (
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                    />
                   </svg>
                 ) : (
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                    />
                   </svg>
                 )}
               </button>
@@ -426,7 +481,10 @@ function LocalSignInForm({
           </button>
 
           <div className="text-center">
-            <Link href="/forgot-password" className="text-sm text-stone-500 underline decoration-stone-300 underline-offset-4 hover:text-stone-900 dark:text-stone-400 dark:decoration-stone-600 dark:hover:text-stone-100">
+            <Link
+              href="/forgot-password"
+              className="text-sm text-stone-500 underline decoration-stone-300 underline-offset-4 hover:text-stone-900 dark:text-stone-400 dark:decoration-stone-600 dark:hover:text-stone-100"
+            >
               {dict.forgotPassword}
             </Link>
           </div>
@@ -438,7 +496,9 @@ function LocalSignInForm({
           </div>
 
           <div>
-            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">{dict.authCode}</label>
+            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+              {dict.authCode}
+            </label>
             <input
               type="text"
               inputMode="text"
@@ -446,7 +506,11 @@ function LocalSignInForm({
               maxLength={14}
               required
               value={totpCode}
-              onChange={(e) => setTotpCode(e.target.value.replace(/[^0-9A-Za-z-]/g, '').toUpperCase())}
+              onChange={(e) =>
+                setTotpCode(
+                  e.target.value.replace(/[^0-9A-Za-z-]/g, "").toUpperCase(),
+                )
+              }
               placeholder={dict.totpPlaceholder}
               className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-center text-xl tracking-[0.45em] text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
             />
@@ -463,9 +527,9 @@ function LocalSignInForm({
           <button
             type="button"
             onClick={() => {
-              setStep('credentials')
-              setTotpCode('')
-              setError(null)
+              setStep("credentials");
+              setTotpCode("");
+              setError(null);
             }}
             className="w-full text-sm text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100"
           >
@@ -474,5 +538,5 @@ function LocalSignInForm({
         </form>
       )}
     </>
-  )
+  );
 }
diff --git a/apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx b/apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx
index f23e9a1..c7427d8 100644
--- a/apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx
+++ b/apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx
@@ -1,117 +1,147 @@
-'use client'
+"use client";
 
-import Image from 'next/image'
-import { useState } from 'react'
-import { apiFetch } from '@/lib/api'
-import PublicShell from '@/components/layout/PublicShell'
-import { useDashboardI18n } from '@/components/I18nProvider'
-import { marketplaceUrl } from '@/lib/urls'
+import Image from "next/image";
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import PublicShell from "@/components/layout/PublicShell";
+import { useDashboardI18n } from "@/components/I18nProvider";
+import { marketplaceUrl } from "@/lib/urls";
 
 export default function SignUpForm() {
-  const { language, setLanguage } = useDashboardI18n()
+  const { language, setLanguage } = useDashboardI18n();
+  const searchParams = useSearchParams();
+  const requestedLanguage = searchParams.get("lang");
+  const initialLanguage =
+    requestedLanguage === "en" ||
+    requestedLanguage === "fr" ||
+    requestedLanguage === "ar"
+      ? requestedLanguage
+      : language;
 
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [preferredLanguage, setPreferredLanguage] = useState<'en' | 'fr' | 'ar'>(language)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [preferredLanguage, setPreferredLanguage] = useState<
+    "en" | "fr" | "ar"
+  >(initialLanguage);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
 
   const dict = {
     en: {
-      title: 'Create your workspace',
-      subtitle: 'Enter your email and password to get started.',
-      email: 'Email',
-      emailPlaceholder: 'you@company.com',
-      password: 'Password',
-      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
-      passwordHint: 'Minimum 8 characters',
-      languageLabel: 'Preferred language',
-      create: 'Create workspace',
-      creating: 'Creating\u2026',
-      alreadyHave: 'Already have an account?',
-      signIn: 'Sign in',
-      errorEmailTaken: 'An account with this email already exists.',
-      errorGeneric: 'Something went wrong. Please try again.',
-      successTitle: 'Check your email',
-      successMessage: 'We sent a verification link to {email}. Click the link to activate your account, then sign in.',
-      successSignIn: 'Go to sign in',
+      title: "Create your workspace",
+      subtitle: "Enter your email and password to get started.",
+      email: "Email",
+      emailPlaceholder: "you@company.com",
+      password: "Password",
+      passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      passwordHint: "Minimum 8 characters",
+      languageLabel: "Preferred language",
+      create: "Create workspace",
+      creating: "Creating\u2026",
+      alreadyHave: "Already have an account?",
+      signIn: "Sign in",
+      errorEmailTaken: "An account with this email already exists.",
+      errorGeneric: "Something went wrong. Please try again.",
+      successTitle: "Check your email",
+      successMessage:
+        "We sent a verification link to {email}. Click the link to activate your account, then sign in.",
+      successSignIn: "Go to sign in",
     },
     fr: {
-      title: 'Cr\u00e9ez votre espace',
-      subtitle: 'Saisissez votre email et mot de passe pour commencer.',
-      email: 'Email',
-      emailPlaceholder: 'vous@entreprise.com',
-      password: 'Mot de passe',
-      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
-      passwordHint: 'Minimum 8 caract\u00e8res',
-      languageLabel: 'Langue pr\u00e9f\u00e9r\u00e9e',
-      create: 'Cr\u00e9er mon espace',
-      creating: 'Cr\u00e9ation\u2026',
-      alreadyHave: 'Vous avez d\u00e9j\u00e0 un compte ?',
-      signIn: 'Se connecter',
-      errorEmailTaken: 'Un compte avec cet email existe d\u00e9j\u00e0.',
-      errorGeneric: 'Une erreur est survenue. Veuillez r\u00e9essayer.',
-      successTitle: 'V\u00e9rifiez votre email',
-      successMessage: 'Nous avons envoy\u00e9 un lien de v\u00e9rification \u00e0 {email}. Cliquez sur le lien pour activer votre compte, puis connectez-vous.',
-      successSignIn: 'Aller \u00e0 la connexion',
+      title: "Cr\u00e9ez votre espace",
+      subtitle: "Saisissez votre email et mot de passe pour commencer.",
+      email: "Email",
+      emailPlaceholder: "vous@entreprise.com",
+      password: "Mot de passe",
+      passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      passwordHint: "Minimum 8 caract\u00e8res",
+      languageLabel: "Langue pr\u00e9f\u00e9r\u00e9e",
+      create: "Cr\u00e9er mon espace",
+      creating: "Cr\u00e9ation\u2026",
+      alreadyHave: "Vous avez d\u00e9j\u00e0 un compte ?",
+      signIn: "Se connecter",
+      errorEmailTaken: "Un compte avec cet email existe d\u00e9j\u00e0.",
+      errorGeneric: "Une erreur est survenue. Veuillez r\u00e9essayer.",
+      successTitle: "V\u00e9rifiez votre email",
+      successMessage:
+        "Nous avons envoy\u00e9 un lien de v\u00e9rification \u00e0 {email}. Cliquez sur le lien pour activer votre compte, puis connectez-vous.",
+      successSignIn: "Aller \u00e0 la connexion",
     },
     ar: {
-      title: '\u0623\u0646\u0634\u0626 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0644\u0643',
-      subtitle: '\u0623\u062f\u062e\u0644 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u0644\u0644\u0628\u062f\u0621.',
-      email: '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',
-      emailPlaceholder: 'you@company.com',
-      password: '\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631',
-      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
-      passwordHint: '\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 8 \u0623\u062d\u0631\u0641',
-      languageLabel: '\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629',
-      create: '\u0623\u0646\u0634\u0626 \u0627\u0644\u0645\u0633\u0627\u062d\u0629',
-      creating: '\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0646\u0634\u0627\u0621\u2026',
-      alreadyHave: '\u0647\u0644 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628 \u0628\u0627\u0644\u0641\u0639\u0644\u061f',
-      signIn: '\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644',
-      errorEmailTaken: '\u064a\u0648\u062c\u062f \u062d\u0633\u0627\u0628 \u0628\u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0627\u0644\u0641\u0639\u0644.',
-      errorGeneric: '\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.',
-      successTitle: '\u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',
-      successMessage: '\u0623\u0631\u0633\u0644\u0646\u0627 \u0631\u0627\u0628\u0637 \u062a\u062d\u0642\u0642 \u0625\u0644\u0649 {email}. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637 \u0644\u062a\u0641\u0639\u064a\u0644 \u062d\u0633\u0627\u0628\u0643\u060c \u062b\u0645 \u0642\u0645 \u0628\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644.',
-      successSignIn: '\u0627\u0644\u0630\u0647\u0627\u0628 \u0625\u0644\u0649 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644',
+      title:
+        "\u0623\u0646\u0634\u0626 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0644\u0643",
+      subtitle:
+        "\u0623\u062f\u062e\u0644 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u0644\u0644\u0628\u062f\u0621.",
+      email:
+        "\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a",
+      emailPlaceholder: "you@company.com",
+      password: "\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631",
+      passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      passwordHint:
+        "\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 8 \u0623\u062d\u0631\u0641",
+      languageLabel:
+        "\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629",
+      create:
+        "\u0623\u0646\u0634\u0626 \u0627\u0644\u0645\u0633\u0627\u062d\u0629",
+      creating:
+        "\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0646\u0634\u0627\u0621\u2026",
+      alreadyHave:
+        "\u0647\u0644 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628 \u0628\u0627\u0644\u0641\u0639\u0644\u061f",
+      signIn:
+        "\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644",
+      errorEmailTaken:
+        "\u064a\u0648\u062c\u062f \u062d\u0633\u0627\u0628 \u0628\u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0627\u0644\u0641\u0639\u0644.",
+      errorGeneric:
+        "\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.",
+      successTitle:
+        "\u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a",
+      successMessage:
+        "\u0623\u0631\u0633\u0644\u0646\u0627 \u0631\u0627\u0628\u0637 \u062a\u062d\u0642\u0642 \u0625\u0644\u0649 {email}. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637 \u0644\u062a\u0641\u0639\u064a\u0644 \u062d\u0633\u0627\u0628\u0643\u060c \u062b\u0645 \u0642\u0645 \u0628\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644.",
+      successSignIn:
+        "\u0627\u0644\u0630\u0647\u0627\u0628 \u0625\u0644\u0649 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644",
     },
-  }[preferredLanguage]
+  }[preferredLanguage];
 
   async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
 
     try {
-      await apiFetch('/auth/account/start', {
-        method: 'POST',
+      await apiFetch("/auth/account/start", {
+        method: "POST",
         body: JSON.stringify({ email, password, preferredLanguage }),
-      })
+      });
 
-      setLanguage(preferredLanguage)
-      document.cookie = `rentaldrivego-language=${preferredLanguage}; path=/; max-age=31536000; samesite=lax`
-      setSuccess(true)
+      setLanguage(preferredLanguage);
+      document.cookie = `rentaldrivego-language=${preferredLanguage}; path=/; max-age=31536000; samesite=lax`;
+      setSuccess(true);
     } catch (err: any) {
-      if (err?.message?.includes('email_taken') || err?.code === 'email_taken') {
-        setError(dict.errorEmailTaken)
+      if (
+        err?.message?.includes("email_taken") ||
+        err?.code === "email_taken"
+      ) {
+        setError(dict.errorEmailTaken);
       } else {
-        setError(dict.errorGeneric)
+        setError(dict.errorGeneric);
       }
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
   if (success) {
     return (
-      <PublicShell>
+      <PublicShell hideHeaderActions>
         <main className="flex flex-1 items-center justify-center px-4 py-16">
           <div className="w-full max-w-md text-center">
             <div className="flex justify-center mb-6">
               <Image
                 src="/dashboard/rentalcardrive.png"
-                alt="FleetOS"
+                alt="RentalDriveGo"
                 width={80}
                 height={80}
                 priority
@@ -123,7 +153,7 @@ export default function SignUpForm() {
                 {dict.successTitle}
               </h1>
               <p className="mt-4 text-sm leading-7 text-stone-600 dark:text-stone-300">
-                {dict.successMessage.replace('{email}', email)}
+                {dict.successMessage.replace("{email}", email)}
               </p>
               <a
                 href="/sign-in"
@@ -135,11 +165,11 @@ export default function SignUpForm() {
           </div>
         </main>
       </PublicShell>
-    )
+    );
   }
 
   return (
-    <PublicShell>
+    <PublicShell hideHeaderActions>
       <main className="flex flex-1 items-center justify-center px-4 py-16">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
@@ -147,7 +177,7 @@ export default function SignUpForm() {
               <a href={marketplaceUrl} target="_top">
                 <Image
                   src="/dashboard/rentalcardrive.png"
-                  alt="FleetOS"
+                  alt="RentalDriveGo"
                   width={80}
                   height={80}
                   priority
@@ -191,34 +221,64 @@ export default function SignUpForm() {
                   {dict.password} <span className="text-red-500">*</span>
                 </label>
                 <div className="relative">
-                <input
-                  type={showPassword ? 'text' : 'password'}
-                  required
-                  minLength={8}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder={'\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}
-                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword((v) => !v)}
-                  className="absolute inset-y-0 right-3 flex items-center text-stone-400 hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200"
-                  tabIndex={-1}
-                >
-                  {showPassword ? (
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                    </svg>
-                  ) : (
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                    </svg>
-                  )}
-                </button>
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    required
+                    minLength={8}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder={
+                      "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                    }
+                    className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    className="absolute inset-y-0 right-3 flex items-center text-stone-400 hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-5 w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                        />
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-5 w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                        />
+                      </svg>
+                    )}
+                  </button>
                 </div>
-                <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">{dict.passwordHint}</p>
+                <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">
+                  {dict.passwordHint}
+                </p>
               </div>
 
               <div>
@@ -226,18 +286,22 @@ export default function SignUpForm() {
                   {dict.languageLabel} <span className="text-red-500">*</span>
                 </span>
                 <div className="grid grid-cols-3 gap-2">
-                  {(['en', 'fr', 'ar'] as const).map((lang) => (
+                  {(["en", "fr", "ar"] as const).map((lang) => (
                     <button
                       key={lang}
                       type="button"
                       onClick={() => setPreferredLanguage(lang)}
                       className={`rounded-2xl border py-3 text-sm font-semibold transition ${
                         preferredLanguage === lang
-                          ? 'border-blue-900 bg-blue-900 text-white dark:bg-orange-500 dark:border-orange-400'
-                          : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300 dark:hover:border-blue-600'
+                          ? "border-blue-900 bg-blue-900 text-white dark:bg-orange-500 dark:border-orange-400"
+                          : "border-stone-200 bg-white text-stone-600 hover:border-stone-300 hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300 dark:hover:border-blue-600"
                       }`}
                     >
-                      {lang === 'en' ? 'English' : lang === 'fr' ? 'Fran\u00e7ais' : '\u0627\u0644\u0639\u0631\u0628\u064a\u0629'}
+                      {lang === "en"
+                        ? "English"
+                        : lang === "fr"
+                          ? "Fran\u00e7ais"
+                          : "\u0627\u0644\u0639\u0631\u0628\u064a\u0629"}
                     </button>
                   ))}
                 </div>
@@ -253,7 +317,7 @@ export default function SignUpForm() {
             </form>
 
             <p className="mt-6 text-center text-sm text-stone-500 dark:text-stone-400">
-              {dict.alreadyHave}{' '}
+              {dict.alreadyHave}{" "}
               <a
                 href="/sign-in"
                 className="font-semibold text-orange-700 hover:text-orange-800 dark:text-orange-300 dark:hover:text-orange-200"
@@ -265,5 +329,5 @@ export default function SignUpForm() {
         </div>
       </main>
     </PublicShell>
-  )
+  );
 }
diff --git a/apps/dashboard/src/app/verify-email/page.tsx b/apps/dashboard/src/app/verify-email/page.tsx
index 61b6caf..85fd2eb 100644
--- a/apps/dashboard/src/app/verify-email/page.tsx
+++ b/apps/dashboard/src/app/verify-email/page.tsx
@@ -76,7 +76,7 @@ export default function VerifyEmailPage() {
           <div className="flex justify-center mb-6">
             <Image
               src="/dashboard/rentalcardrive.png"
-              alt="FleetOS"
+              alt="RentalDriveGo"
               width={80}
               height={80}
               priority
diff --git a/apps/dashboard/src/components/layout/PublicFooter.tsx b/apps/dashboard/src/components/layout/PublicFooter.tsx
index 626c5b8..203edab 100644
--- a/apps/dashboard/src/components/layout/PublicFooter.tsx
+++ b/apps/dashboard/src/components/layout/PublicFooter.tsx
@@ -165,7 +165,7 @@ export default function PublicFooter() {
         </div>
 
         <p className="text-sm text-stone-500 dark:text-stone-400">
-          &copy; {new Date().getFullYear()} FleetOS. {footerContent.rightsLabel}
+          &copy; {new Date().getFullYear()} RentalDriveGo. {footerContent.rightsLabel}
         </p>
       </div>
     </footer>
diff --git a/apps/dashboard/src/components/layout/PublicHeader.tsx b/apps/dashboard/src/components/layout/PublicHeader.tsx
index a9f0bcc..0261433 100644
--- a/apps/dashboard/src/components/layout/PublicHeader.tsx
+++ b/apps/dashboard/src/components/layout/PublicHeader.tsx
@@ -1,209 +1,212 @@
-'use client'
+"use client";
 
-import { ChevronDown } from 'lucide-react'
-import Image from 'next/image'
-import { useSearchParams } from 'next/navigation'
-import { useEffect, useRef, useState } from 'react'
-import { useDashboardI18n } from '@/components/I18nProvider'
-import { marketplaceUrl } from '@/lib/urls'
+import { ChevronDown } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import { useDashboardI18n } from "@/components/I18nProvider";
+import { marketplaceUrl } from "@/lib/urls";
 
-const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+const BRAND_LOGO_SRC = "/dashboard/rentaldrivego.jpeg";
 
 const languageMeta = {
-  en: { flag: '🇺🇸', shortLabel: 'EN' },
-  fr: { flag: '🇫🇷', shortLabel: 'FR' },
-  ar: { flag: '🇲🇦', shortLabel: 'AR' },
-} as const
+  en: { flag: "🇺🇸", shortLabel: "EN" },
+  fr: { flag: "🇫🇷", shortLabel: "FR" },
+  ar: { flag: "🇲🇦", shortLabel: "AR" },
+} as const;
 
-export default function PublicHeader() {
-  const { language, setLanguage, theme, setTheme } = useDashboardI18n()
-  const searchParams = useSearchParams()
-  const localeMenuRef = useRef<HTMLDivElement | null>(null)
-  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
-  const themeMenuRef = useRef<HTMLDivElement | null>(null)
-  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
-  const currentLanguage = languageMeta[language]
-  const availableLanguages = (['en', 'fr', 'ar'] as const)
+export default function PublicHeader({
+  hideActions = false,
+}: {
+  hideActions?: boolean;
+}) {
+  const { language, setLanguage, theme, setTheme } = useDashboardI18n();
+  const localeMenuRef = useRef<HTMLDivElement | null>(null);
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false);
+  const themeMenuRef = useRef<HTMLDivElement | null>(null);
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false);
+  const currentLanguage = languageMeta[language];
+  const availableLanguages = (["en", "fr", "ar"] as const)
     .filter((value) => value !== language)
-    .map((value) => ({ value, ...languageMeta[value] }))
+    .map((value) => ({ value, ...languageMeta[value] }));
   const dict = {
     en: {
-      home: 'Home',
-      marketplace: 'Marketplace',
-      signIn: 'Sign in',
-      createAccount: 'Create Agency Space',
-      theme: 'Theme',
-      light: 'Light',
-      dark: 'Dark',
+      signIn: "Sign in",
+      createAccount: "Get Started",
+      theme: "Theme",
+      light: "Light",
+      dark: "Dark",
     },
     fr: {
-      home: 'Accueil',
-      marketplace: 'Marketplace',
-      signIn: 'Connexion',
-      createAccount: 'Créer un espace d’agence',
-      theme: 'Mode',
-      light: 'Clair',
-      dark: 'Sombre',
+      signIn: "Connexion",
+      createAccount: "Démarrer",
+      theme: "Mode",
+      light: "Clair",
+      dark: "Sombre",
     },
     ar: {
-      home: 'الرئيسية',
-      marketplace: 'السوق',
-      signIn: 'تسجيل الدخول',
-      createAccount: 'إنشاء مساحة الوكالة',
-      theme: 'الوضع',
-      light: 'فاتح',
-      dark: 'داكن',
+      signIn: "تسجيل الدخول",
+      createAccount: "ابدأ الآن",
+      theme: "الوضع",
+      light: "فاتح",
+      dark: "داكن",
     },
-  }[language]
+  }[language];
   const themeOptions = [
-    { value: 'light' as const, label: dict.light },
-    { value: 'dark' as const, label: dict.dark },
-  ]
-  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
+    { value: "light" as const, label: dict.light },
+    { value: "dark" as const, label: dict.dark },
+  ];
+  const currentTheme =
+    themeOptions.find((option) => option.value === theme) ?? themeOptions[0];
   const localeMenuPositionClass =
-    language === 'ar'
-      ? 'right-0 sm:right-0'
-      : 'left-0 sm:left-auto sm:right-0'
+    language === "ar" ? "right-0 sm:right-0" : "left-0 sm:left-auto sm:right-0";
 
   useEffect(() => {
     function handlePointerDown(event: MouseEvent) {
       if (!localeMenuRef.current?.contains(event.target as Node)) {
-        setLocaleMenuOpen(false)
+        setLocaleMenuOpen(false);
       }
       if (!themeMenuRef.current?.contains(event.target as Node)) {
-        setThemeMenuOpen(false)
+        setThemeMenuOpen(false);
       }
     }
 
-    document.addEventListener('mousedown', handlePointerDown)
-    return () => document.removeEventListener('mousedown', handlePointerDown)
-  }, [])
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, []);
 
   function toggleLocaleMenu() {
-    setThemeMenuOpen(false)
-    setLocaleMenuOpen((open) => !open)
+    setThemeMenuOpen(false);
+    setLocaleMenuOpen((open) => !open);
   }
 
   function toggleThemeMenu() {
-    setLocaleMenuOpen(false)
-    setThemeMenuOpen((open) => !open)
+    setLocaleMenuOpen(false);
+    setThemeMenuOpen((open) => !open);
   }
 
-  const signInParams = new URLSearchParams()
-  signInParams.set('lang', language)
-  signInParams.set('theme', theme)
-  const next = searchParams.get('next')
-  const redirect = searchParams.get('redirect')
-  if (next) signInParams.set('next', next)
-  if (redirect) signInParams.set('redirect', redirect)
-  const signInHref = `${marketplaceUrl}/sign-in?${signInParams.toString()}`
+  const signInHref = `${marketplaceUrl}/${language}#signin`;
 
-  const signUpParams = new URLSearchParams()
-  signUpParams.set('lang', language)
-  signUpParams.set('theme', theme)
-  const signUpHref = `/dashboard/sign-up?${signUpParams.toString()}`
+  const signUpHref = `${marketplaceUrl}/${language}#demo`;
 
   return (
-    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
-      <div className="mx-auto flex max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
-        <a href={marketplaceUrl} className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-blue-950 dark:text-slate-100 sm:text-sm sm:tracking-[0.2em]">
-          <Image
-            src={DASHBOARD_LOGO_SRC}
-            alt="FleetOS"
-            width={36}
-            height={36}
-            priority
-            className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
-          />
-          <span>FleetOS</span>
-        </a>
+    <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
+      <div className="mx-auto flex min-h-14 max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
+        <div className="flex items-center justify-between gap-3">
+          <a
+            href={`${marketplaceUrl}/${language}`}
+            className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 no-underline sm:text-sm sm:tracking-[0.2em] dark:text-stone-100"
+            aria-label="RentalDriveGo home"
+          >
+            <Image
+              src={BRAND_LOGO_SRC}
+              alt="RentalDriveGo"
+              width={36}
+              height={36}
+              priority
+              className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
+            />
+            <span>RentalDriveGo</span>
+          </a>
+        </div>
 
         <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
-          <nav className="flex items-center gap-0.5 overflow-x-auto">
-            <a href={marketplaceUrl} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
-              {dict.home}
-            </a>
-            <a href={`${marketplaceUrl}/explore`} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
-              {dict.marketplace}
-            </a>
-            <a href={signInHref} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
-              {dict.signIn}
-            </a>
-            <a href={signUpHref} className="ml-1 rounded-full bg-blue-900 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 sm:ml-2 sm:px-5 sm:py-2 sm:text-sm">
-              {dict.createAccount}
-            </a>
-          </nav>
-          <div className="shrink-0">
-            <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
-              <div ref={localeMenuRef} className="relative">
-                <button
-                  type="button"
-                  onClick={toggleLocaleMenu}
-                  className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
-                  aria-expanded={localeMenuOpen}
-                  aria-haspopup="menu"
+          <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm sm:self-auto sm:p-1 dark:border-blue-800 dark:bg-blue-950/85">
+            <div ref={localeMenuRef} className="relative">
+              <button
+                type="button"
+                onClick={toggleLocaleMenu}
+                className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs dark:text-stone-200 dark:hover:bg-blue-900/40"
+                aria-expanded={localeMenuOpen}
+                aria-haspopup="menu"
+              >
+                <span aria-hidden="true">{currentLanguage.flag}</span>
+                <span>{currentLanguage.shortLabel}</span>
+                <ChevronDown
+                  className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? "rotate-180" : ""}`}
+                />
+              </button>
+              {localeMenuOpen ? (
+                <div
+                  className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}
                 >
-                  <span aria-hidden="true">{currentLanguage.flag}</span>
-                  <span>{currentLanguage.shortLabel}</span>
-                  <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
-                </button>
-                {localeMenuOpen ? (
-                  <div className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
-                    {availableLanguages.map((option) => (
+                  {availableLanguages.map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      onClick={() => {
+                        setLanguage(option.value);
+                        setLocaleMenuOpen(false);
+                      }}
+                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                    >
+                      <span aria-hidden="true">{option.flag}</span>
+                      <span>{option.shortLabel}</span>
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <span
+              className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700"
+              aria-hidden="true"
+            />
+            <div ref={themeMenuRef} className="relative">
+              <button
+                type="button"
+                onClick={toggleThemeMenu}
+                className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 sm:px-2.5 sm:py-1.5 dark:hover:bg-blue-900/40"
+                aria-expanded={themeMenuOpen}
+                aria-haspopup="menu"
+              >
+                <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white sm:px-3.5 sm:py-1.5 sm:text-xs dark:bg-orange-400 dark:text-white">
+                  {currentTheme.label}
+                </span>
+                <ChevronDown
+                  className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? "rotate-180" : ""}`}
+                />
+              </button>
+              {themeMenuOpen ? (
+                <div
+                  className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}
+                >
+                  {themeOptions
+                    .filter((option) => option.value !== theme)
+                    .map((option) => (
                       <button
                         key={option.value}
                         type="button"
                         onClick={() => {
-                          setLanguage(option.value)
-                          setLocaleMenuOpen(false)
+                          setTheme(option.value);
+                          setThemeMenuOpen(false);
                         }}
-                        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                        className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                       >
-                        <span aria-hidden="true">{option.flag}</span>
-                        <span>{option.shortLabel}</span>
+                        <span>{option.label}</span>
                       </button>
                     ))}
-                  </div>
-                ) : null}
-              </div>
-              <span className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700" aria-hidden="true" />
-              <div ref={themeMenuRef} className="relative">
-                <button
-                  type="button"
-                  onClick={toggleThemeMenu}
-                  className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
-                  aria-expanded={themeMenuOpen}
-                  aria-haspopup="menu"
-                >
-                  <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
-                    {currentTheme.label}
-                  </span>
-                  <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
-                </button>
-                {themeMenuOpen ? (
-                  <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
-                    {themeOptions
-                      .filter((option) => option.value !== theme)
-                      .map((option) => (
-                        <button
-                          key={option.value}
-                          type="button"
-                          onClick={() => {
-                            setTheme(option.value)
-                            setThemeMenuOpen(false)
-                          }}
-                          className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
-                        >
-                          <span>{option.label}</span>
-                        </button>
-                      ))}
-                  </div>
-                ) : null}
-              </div>
+                </div>
+              ) : null}
             </div>
           </div>
+
+          {hideActions ? null : (
+            <div className="flex items-center gap-2">
+              <a
+                href={signInHref}
+                className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 no-underline transition hover:bg-stone-100 hover:text-stone-900 sm:px-4 sm:py-2 sm:text-sm dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100"
+              >
+                {dict.signIn}
+              </a>
+              <a
+                href={signUpHref}
+                className="rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white no-underline transition hover:bg-orange-700 sm:px-5 sm:py-2 sm:text-sm dark:bg-orange-500 dark:hover:bg-orange-400"
+              >
+                {dict.createAccount}
+              </a>
+            </div>
+          )}
         </div>
       </div>
     </header>
-  )
+  );
 }
diff --git a/apps/dashboard/src/components/layout/PublicShell.tsx b/apps/dashboard/src/components/layout/PublicShell.tsx
index 5961258..bceda67 100644
--- a/apps/dashboard/src/components/layout/PublicShell.tsx
+++ b/apps/dashboard/src/components/layout/PublicShell.tsx
@@ -1,20 +1,24 @@
-'use client'
+"use client";
 import * as React from "react";
-import PublicFooter from '@/components/layout/PublicFooter'
-import PublicHeader from '@/components/layout/PublicHeader'
+import PublicFooter from "@/components/layout/PublicFooter";
+import PublicHeader from "@/components/layout/PublicHeader";
 
 export default function PublicShell({
   children,
   embedded = false,
+  hideFooter = false,
+  hideHeaderActions = false,
 }: {
-  children: React.ReactNode
-  embedded?: boolean
+  children: React.ReactNode;
+  embedded?: boolean;
+  hideFooter?: boolean;
+  hideHeaderActions?: boolean;
 }) {
   return (
     <div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0f1f4a_0%,#112d6e_35%,#0d1f4f_100%)] dark:text-slate-100">
-      {embedded ? null : <PublicHeader />}
+      {embedded ? null : <PublicHeader hideActions={hideHeaderActions} />}
       <div className="flex flex-1 flex-col">{children}</div>
-      {embedded ? null : <PublicFooter />}
+      {embedded || hideFooter ? null : <PublicFooter />}
     </div>
-  )
+  );
 }
diff --git a/apps/dashboard/src/components/layout/Sidebar.tsx b/apps/dashboard/src/components/layout/Sidebar.tsx
index d5be3cf..57f3abd 100644
--- a/apps/dashboard/src/components/layout/Sidebar.tsx
+++ b/apps/dashboard/src/components/layout/Sidebar.tsx
@@ -401,7 +401,7 @@ export default function Sidebar() {
             )}
           </div>
           <span className="truncate bg-gradient-to-br from-blue-950 to-blue-600 bg-clip-text text-sm font-semibold tracking-[-0.01em] text-transparent dark:from-slate-100 dark:to-blue-300">
-            {brand?.displayName ?? 'FleetOS'}
+            {brand?.displayName ?? 'RentalDriveGo'}
           </span>
         </a>
 
diff --git a/apps/homepage/NAVBAR_RESTORATION_NOTES_v1.1.md b/apps/homepage/NAVBAR_RESTORATION_NOTES_v1.1.md
new file mode 100644
index 0000000..8835d15
--- /dev/null
+++ b/apps/homepage/NAVBAR_RESTORATION_NOTES_v1.1.md
@@ -0,0 +1,26 @@
+# Navbar Restoration Notes v1.1
+
+## Correction
+
+The RentalDriveGo application shell is preserved independently from the modular homepage sections.
+
+## Navbar behavior
+
+- Product, Workflow, Modules, Pricing, and FAQ remain visible in the desktop navbar.
+- The full navbar stays visible through common laptop and tablet-landscape widths, including 1024 px.
+- Below 900 px, the same five destinations remain available in the mobile navigation drawer.
+- Language, theme, login, and account-creation controls are preserved.
+- Homepage section IDs remain aligned with navbar anchors.
+
+## Regression protection
+
+Browser specifications now assert that all primary destinations are visible at 1024 px and remain present in the mobile drawer.
+
+## Validation
+
+- TypeScript: passed
+- ESLint: passed
+- Unit tests: 51 passed
+- Production build: passed with an explicit test `SITE_ORIGIN`
+- Server-rendered `/en` markup: confirmed all five navbar links
+- Browser execution requires Playwright browser binaries in the target CI environment
diff --git a/apps/homepage/RentalDriveGo_Pricing_Section_Modularization_Plan_v1.0.md b/apps/homepage/RentalDriveGo_Pricing_Section_Modularization_Plan_v1.0.md
new file mode 100644
index 0000000..88795d1
--- /dev/null
+++ b/apps/homepage/RentalDriveGo_Pricing_Section_Modularization_Plan_v1.0.md
@@ -0,0 +1,322 @@
+# RentalDriveGo Pricing Section and Homepage Modularization Plan
+
+**Version:** 1.0  
+**Date:** June 26, 2026  
+**Product:** RentalDriveGo  
+**Scope:** Localized public homepage for English, French, and Arabic
+
+## 1. Objective
+
+Refactor the homepage into independently maintainable sections and replace the existing quote-only pricing placeholder with a hybrid pricing section that can support transparent starting prices for standard plans and custom pricing for enterprise accounts.
+
+The implementation must let a developer update one section without editing the primary page composition or accidentally changing unrelated sections.
+
+## 2. Commercial decision
+
+RentalDriveGo should use a hybrid model:
+
+- Public starting prices for standard small and mid-market plans after finance approval.
+- A fleet-size selector to help visitors self-qualify.
+- Monthly and annual billing presentation.
+- Custom pricing for large fleets, franchises, migrations, and complex integrations.
+- A sales or demonstration CTA for every plan.
+
+Prices must not be invented in presentation components. All commercial amounts and approval state live in one configuration file.
+
+## 3. Homepage architecture
+
+The route component remains a thin composition layer:
+
+`src/app/[locale]/page.tsx`
+
+It renders these independent sections in order:
+
+1. `HeroSection`
+2. `TrustSection`
+3. `ComparisonSection`
+4. `WorkflowSection`
+5. `RolesSection`
+6. `ModulesSection`
+7. `ResultsSection`
+8. `IntegrationsSection`
+9. `SecuritySection`
+10. `PricingSection`
+11. `FaqSection`
+12. `FinalCtaSection`
+
+Each section lives in:
+
+`src/components/homepage/sections/`
+
+Section-specific CSS stays beside the section in its own CSS module. Shared tokens and generic components remain in the existing design system.
+
+## 3.1 Application shell preservation
+
+Homepage modularization must not remove, replace, or weaken the shared application shell. The following elements remain independent of homepage sections and must be preserved across future section updates:
+
+- RentalDriveGo brand link
+- Product, Workflow, Modules, Pricing, and FAQ navigation destinations
+- English, French, and Arabic locale controls
+- Light, dark, and system theme controls
+- Log in and account-creation actions
+- Mobile navigation drawer containing the same primary destinations
+- Shared footer navigation
+
+The full primary navigation remains visible at common laptop widths. At narrower widths, the same destinations move into the mobile drawer rather than being removed.
+
+## 4. Pricing section structure
+
+### 4.1 Header
+
+- Eyebrow: simple, scalable pricing.
+- Headline: pricing built around the fleet.
+- Supporting copy: explains that fleet size drives plan recommendations and that public values are controlled centrally.
+
+### 4.2 Fleet-size selector
+
+Four radio-button ranges:
+
+- 1–25 vehicles
+- 26–75 vehicles
+- 76–200 vehicles
+- 200+ vehicles
+
+The selected range changes the recommended plan and, after commercial approval, the displayed starting price.
+
+### 4.3 Billing selector
+
+- Monthly
+- Annual
+- Annual savings label only after the discount is financially approved
+
+Annual pricing is shown as a monthly equivalent and must be calculated from the approved annual discount in the commercial configuration.
+
+### 4.4 Plan cards
+
+#### Launch
+
+For independent rental companies moving away from fragmented manual processes.
+
+Core capabilities:
+
+- Reservations and availability
+- Fleet and vehicle records
+- Rental agreements
+- Customer records
+- Basic operational reporting
+- Standard support
+
+#### Growth
+
+For growing fleets coordinating more vehicles, users, and locations.
+
+Core capabilities:
+
+- Everything in Launch
+- Multiple locations
+- Online booking workflows
+- Digital signatures and deposits
+- Maintenance workflows
+- Advanced reporting and automation
+- Priority support
+
+#### Enterprise
+
+For large fleets, franchise operations, and complex integration requirements.
+
+Core capabilities:
+
+- Everything in Growth
+- Custom integrations and API access
+- Advanced permissions
+- Migration planning
+- Custom onboarding
+- Service-level agreement options
+- Dedicated account support
+
+### 4.5 Supporting commercial information
+
+The section also shows:
+
+- Factors that affect final price
+- Optional modules
+- Commercial assurances
+- A link back to product modules
+- A configuration note while prices remain unapproved
+
+## 5. Commercial configuration
+
+All financial values are stored in:
+
+`src/content/pricing-config.ts`
+
+The configuration controls:
+
+- Currency
+- Annual discount percentage
+- Public-price approval state
+- Monthly prices by plan and fleet band
+- Recommended plan by fleet band
+
+### Publishing prices
+
+Before setting `publicPricesApproved` to `true`, finance and product must approve:
+
+1. Monthly prices
+2. Included active vehicles
+3. Included locations and users
+4. Additional-vehicle rules
+5. Annual discount
+6. Onboarding charges
+7. Migration charges
+8. Taxes and currency presentation
+9. Optional-module pricing
+10. Enterprise qualification threshold
+
+Until approval, the UI displays a localized “starting price pending approval” state rather than fabricated numbers.
+
+## 6. Localization
+
+Pricing copy is stored in:
+
+- `src/content/locales/en/homepage.json`
+- `src/content/locales/fr/homepage.json`
+- `src/content/locales/ar/homepage.json`
+
+Rules:
+
+- All three locales must preserve the same data structure.
+- Arabic remains true document-level RTL.
+- Prices use `Intl.NumberFormat` with the active locale.
+- Monetary values use bidirectional isolation in Arabic.
+- Plan IDs and fleet-band IDs remain stable, non-translated identifiers.
+
+## 7. Accessibility requirements
+
+- Fleet and billing selectors use native radio inputs and fieldsets.
+- Every control has a visible label.
+- Keyboard focus is visible.
+- The recommended plan is not communicated by color alone.
+- Price updates use an `aria-live` region.
+- CTA controls retain minimum touch-target sizing.
+- Layout supports forced colors and reduced motion.
+- Mobile presentation does not require horizontal scrolling.
+
+## 8. Responsive behavior
+
+### Desktop
+
+- Three plan cards in one row.
+- Recommended card receives stronger visual emphasis.
+- Fleet and billing controls share one row.
+
+### Tablet
+
+- Two cards on the first row.
+- Enterprise spans the second row.
+- Controls collapse when necessary.
+
+### Mobile
+
+- Controls stack.
+- Plan cards stack.
+- The recommended plan moves first.
+- CTAs use full width.
+- No pricing comparison table is forced into horizontal scrolling.
+
+## 9. Analytics
+
+The pricing section introduces these events:
+
+- `pricing_fleet_band_selected`
+- `pricing_billing_period_changed`
+- `pricing_plan_cta_clicked`
+
+Safe event properties:
+
+- Locale
+- Direction
+- Theme
+- Fleet band
+- Billing period
+- Plan ID
+- Source
+
+No name, email, company, phone number, or free-text form data is included.
+
+## 10. Testing
+
+Required checks:
+
+- All locales build the same pricing model.
+- Four fleet bands exist.
+- Three plans exist.
+- Public prices remain blocked until approval.
+- The recommended plan changes with fleet selection.
+- Annual billing selection works.
+- RTL layout remains valid.
+- Homepage still contains exactly twelve sections.
+- Navigation hashes still resolve.
+- Pricing controls are keyboard-accessible.
+
+## 11. Files added or changed
+
+### Added
+
+- `src/components/homepage/Homepage.module.css`
+- `src/components/homepage/README.md`
+- `src/components/homepage/sections/*.tsx`
+- Section-specific CSS modules
+- `src/content/pricing-config.ts`
+- `tests/unit/pricing.test.ts`
+
+### Changed
+
+- `src/app/[locale]/page.tsx`
+- `src/content/homepage-model.ts`
+- English, French, and Arabic homepage resources
+- Analytics event contract
+- Demo source contract
+- Homepage unit and browser tests
+
+### Removed
+
+- `src/app/[locale]/page.module.css`
+
+Its rules were moved into section-owned CSS modules so unrelated sections no longer share one page stylesheet.
+
+## 12. Definition of done
+
+The work is complete when:
+
+- The route page only composes section components.
+- Each section can be edited independently.
+- Pricing is fully localized and responsive.
+- Commercial values are centralized and guarded.
+- No unapproved prices are published.
+- Type checking, linting, unit tests, and browser tests pass.
+- The updated repository archive includes this plan and implementation.
+
+## 13. Implementation status
+
+Completed in this package:
+
+- The homepage route is reduced to section composition.
+- Twelve homepage sections are independently editable.
+- Section-specific CSS is colocated with each section.
+- The interactive pricing section is implemented.
+- English, French, and Arabic pricing content is implemented.
+- RTL, dark theme, responsive layout, forced colors, and reduced motion are covered.
+- Pricing analytics events and the pricing demo source are registered.
+- Commercial amounts and discount values remain blocked pending approval.
+- The package was made standalone by removing an unused workspace-only dependency and its pre-scripts.
+- The missing `@axe-core/playwright` test dependency was added.
+
+Validation completed:
+
+- TypeScript strict check: passed.
+- ESLint with zero warnings: passed.
+- Unit and component tests: 51 passed.
+- Next.js production build: passed with an explicit local `SITE_ORIGIN`.
+
+Browser test files were updated, but full Playwright execution could not be completed in the build container. The managed system Chromium blocks loopback navigation, while downloading Playwright Chromium was prevented by unavailable DNS access to the Playwright CDN. This is an environment restriction, not a passing test result. Run the browser suite in the project CI environment before release.
diff --git a/apps/homepage/eslint.config.mjs b/apps/homepage/eslint.config.mjs
new file mode 100644
index 0000000..da90fbc
--- /dev/null
+++ b/apps/homepage/eslint.config.mjs
@@ -0,0 +1,40 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTypeScript from 'eslint-config-next/typescript';
+import prettier from 'eslint-config-prettier';
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTypeScript,
+  prettier,
+  {
+    rules: {
+      'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+      ],
+      '@typescript-eslint/no-floating-promises': 'error',
+      '@typescript-eslint/switch-exhaustiveness-check': 'error',
+    },
+  },
+  globalIgnores([
+    '.next/**',
+    'coverage/**',
+    'playwright-report/**',
+    'test-results/**',
+    'contracts/**',
+    'next-env.d.ts',
+  ]),
+]);
diff --git a/apps/homepage/next.config.ts b/apps/homepage/next.config.ts
new file mode 100644
index 0000000..df98054
--- /dev/null
+++ b/apps/homepage/next.config.ts
@@ -0,0 +1,79 @@
+import type { NextConfig } from 'next';
+
+const securityHeaders = [
+  { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
+  { key: 'X-Content-Type-Options', value: 'nosniff' },
+  { key: 'X-Frame-Options', value: 'DENY' },
+  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
+];
+
+const nextConfig: NextConfig = {
+  allowedDevOrigins: ['192.168.3.3'],
+  compress: true,
+  poweredByHeader: false,
+  reactStrictMode: true,
+
+  transpilePackages: ['@rentaldrivego/types'],
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+    ],
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ];
+  },
+
+  async redirects() {
+    return [
+      {
+        source: '/dashboard/dashboard',
+        destination: '/dashboard',
+        permanent: false,
+      },
+      {
+        source: '/dashboard/dashboard/:path*',
+        destination: '/dashboard/:path*',
+        permanent: false,
+      },
+    ];
+  },
+
+  async rewrites() {
+    const dashboardOrigin =
+      process.env.DASHBOARD_INTERNAL_URL ?? 'http://dashboard:3001';
+    const adminOrigin =
+      process.env.ADMIN_INTERNAL_URL ?? 'http://admin:3002';
+
+    return [
+      {
+        source: '/dashboard',
+        destination: `${dashboardOrigin}/dashboard`,
+      },
+      {
+        source: '/dashboard/:path*',
+        destination: `${dashboardOrigin}/dashboard/:path*`,
+      },
+      {
+        source: '/admin',
+        destination: `${adminOrigin}/admin`,
+      },
+      {
+        source: '/admin/:path*',
+        destination: `${adminOrigin}/admin/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/apps/homepage/package.json b/apps/homepage/package.json
index f75d771..ff30ad8 100644
--- a/apps/homepage/package.json
+++ b/apps/homepage/package.json
@@ -1,34 +1,45 @@
 {
   "name": "@rentaldrivego/homepage",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
-    "predev": "npm run build --workspace @rentaldrivego/types",
     "dev": "next dev -H 0.0.0.0 -p 3000",
-    "prebuild": "npm run build --workspace @rentaldrivego/types",
     "build": "next build",
-    "prestart": "npm run build --workspace @rentaldrivego/types",
-    "pretype-check": "npm run build --workspace @rentaldrivego/types",
     "start": "next start -H 0.0.0.0 -p 3000",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "lint": "eslint . --max-warnings=0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@rentaldrivego/types": "*",
-    "autoprefixer": "^10.4.19",
-    "lucide-react": "^0.376.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/noto-sans-arabic": "^5.2.10",
     "next": "^16.2.7",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.3"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.4.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
+    "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.61.0",
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.0",
     "@types/node": "^20.12.0",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^16.2.0",
+    "eslint-config-prettier": "^10.1.0",
+    "globals": "^17.0.0",
+    "jsdom": "^29.0.0",
+    "prettier": "^3.8.0",
     "typescript": "^5.4.0",
-    "vitest": "^1.6.0"
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.1.0"
   }
 }
diff --git a/apps/homepage/playwright.config.ts b/apps/homepage/playwright.config.ts
new file mode 100644
index 0000000..39ab4a6
--- /dev/null
+++ b/apps/homepage/playwright.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:3000';
+const executablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
+const serverCommand = process.env.PLAYWRIGHT_SERVER_COMMAND ?? 'pnpm start';
+
+export default defineConfig({
+  testDir: './tests',
+  testMatch: ['browser/**/*.spec.ts', 'a11y/**/*.spec.ts', 'visual/**/*.spec.ts'],
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  ...(process.env.CI ? { workers: 2 } : {}),
+  reporter: process.env.CI ? [['html', { open: 'never' }], ['github']] : 'list',
+  expect: {
+    timeout: 5_000,
+    toHaveScreenshot: {
+      animations: 'disabled',
+      caret: 'hide',
+      maxDiffPixelRatio: 0.005,
+    },
+  },
+  use: {
+    baseURL,
+    locale: 'en-US',
+    timezoneId: 'UTC',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video:
+      process.env.PLAYWRIGHT_VIDEO === 'off' ? 'off' : process.env.CI ? 'retain-on-failure' : 'off',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        ...(executablePath ? { launchOptions: { executablePath } } : {}),
+      },
+    },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
+    { name: 'mobile-safari', use: { ...devices['iPhone 15'] } },
+  ],
+  webServer: {
+    command: serverCommand,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    env: {
+      SITE_ORIGIN: baseURL,
+      PUBLIC_RELEASE_APPROVED: 'false',
+      COMPONENT_FIXTURES_ENABLED: 'true',
+      NEXT_PUBLIC_DEMO_ENABLED: 'true',
+      DEMO_SUBMISSION_MODE: 'local',
+      DEMO_LOCAL_TEST_MODE: 'true',
+      DEMO_TEST_SCENARIOS_ENABLED: 'true',
+      NEXT_PUBLIC_ANALYTICS_MODE: 'disabled',
+      HOSTNAME: '127.0.0.1',
+      PORT: '3000',
+    },
+  },
+});
diff --git a/apps/homepage/prettier.config.mjs b/apps/homepage/prettier.config.mjs
new file mode 100644
index 0000000..b1f4351
--- /dev/null
+++ b/apps/homepage/prettier.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  plugins: [],
+};
+
+export default config;
diff --git a/apps/homepage/public/.gitkeep b/apps/homepage/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/homepage/public/beforeandafter.png b/apps/homepage/public/beforeandafter.png
new file mode 100644
index 0000000..5cd3d5d
Binary files /dev/null and b/apps/homepage/public/beforeandafter.png differ
diff --git a/apps/homepage/public/dashboard.png b/apps/homepage/public/dashboard.png
new file mode 100644
index 0000000..e78c73c
Binary files /dev/null and b/apps/homepage/public/dashboard.png differ
diff --git a/apps/homepage/public/dashboard2.png b/apps/homepage/public/dashboard2.png
new file mode 100644
index 0000000..d48c2c6
Binary files /dev/null and b/apps/homepage/public/dashboard2.png differ
diff --git a/apps/homepage/public/dashboard3.png b/apps/homepage/public/dashboard3.png
new file mode 100644
index 0000000..178eaad
Binary files /dev/null and b/apps/homepage/public/dashboard3.png differ
diff --git a/apps/homepage/public/maintenance.png b/apps/homepage/public/maintenance.png
new file mode 100644
index 0000000..92d4bd3
Binary files /dev/null and b/apps/homepage/public/maintenance.png differ
diff --git a/apps/homepage/public/rentaldrivego.jpeg b/apps/homepage/public/rentaldrivego.jpeg
new file mode 100644
index 0000000..3ba550b
Binary files /dev/null and b/apps/homepage/public/rentaldrivego.jpeg differ
diff --git a/apps/homepage/src/app/(public)/HomeContent.tsx b/apps/homepage/src/app/(public)/HomeContent.tsx
deleted file mode 100644
index b404037..0000000
--- a/apps/homepage/src/app/(public)/HomeContent.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useMarketplacePreferences } from '@/components/MarketplaceShell'
-import { StatsStrip } from '@/components/StatsStrip'
-import { HowItWorks } from '@/components/HowItWorks'
-import { TestimonialsSection } from '@/components/TestimonialsSection'
-import {
-  cloneMarketplaceHomepageContent,
-  resolveMarketplaceHomepageSections,
-  type MarketplaceHomepageConfig,
-  type MarketplaceHomepageSectionType,
-} from '@rentaldrivego/types'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
-
-export default function HomeContent() {
-  const { language } = useMarketplacePreferences()
-  const [content, setContent] = useState<MarketplaceHomepageConfig>(cloneMarketplaceHomepageContent())
-  const dict = content[language]
-  const sections = resolveMarketplaceHomepageSections(dict.sections)
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
-  const starterSignupHref = `${dashboardUrl}/sign-up?plan=STARTER&billing=MONTHLY&currency=MAD`
-
-  useEffect(() => {
-    let cancelled = false
-
-    async function loadHomepageContent() {
-      try {
-        const res = await fetch(`${API_BASE}/site/platform/homepage`, { cache: 'no-store' })
-        const json = await res.json().catch(() => null)
-        if (!res.ok || !json?.data || cancelled) return
-        setContent(json.data as MarketplaceHomepageConfig)
-      } catch {
-        // Fall back to the shared defaults when the API is unavailable.
-      }
-    }
-
-    loadHomepageContent()
-
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  function hasSection(section: MarketplaceHomepageSectionType) {
-    return sections.includes(section)
-  }
-
-  return (
-    <main className="min-h-screen overflow-hidden bg-transparent">
-      <section className="relative">
-        <div className="site-glow absolute inset-x-0 top-0 h-[38rem]" />
-        <div className="shell relative py-10 sm:py-14 lg:py-20">
-          <div className={`grid gap-8 ${hasSection('hero') && hasSection('surface') ? 'lg:grid-cols-[minmax(0,1.15fr)_24rem] lg:items-stretch xl:grid-cols-[minmax(0,1.2fr)_28rem]' : ''}`}>
-            {hasSection('hero') ? (
-            <div className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/70">
-              <p className="text-xs font-bold uppercase tracking-[0.32em] text-orange-700 dark:text-orange-300">{dict.heroKicker}</p>
-              <h1 className="mt-5 max-w-4xl text-5xl font-black leading-none tracking-[-0.04em] text-blue-950 dark:text-stone-50 sm:text-6xl lg:text-7xl">
-                {dict.heroTitle}
-              </h1>
-              <p className="mt-6 max-w-2xl text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg">
-                {dict.heroBody}
-              </p>
-
-              <div className="mt-8 flex flex-wrap gap-3">
-                <a
-                  href={starterSignupHref}
-                  className="rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400"
-                >
-                  {dict.startTrial}
-                </a>
-                <a
-                  href="/features"
-                  className="rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white"
-                >
-                  {dict.exploreVehicles}
-                </a>
-              </div>
-
-              <div className="mt-10 grid gap-3 sm:grid-cols-3">
-                {dict.metrics.map(({ value, label }) => (
-                  <div key={value} className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 p-4 dark:border-blue-900 dark:bg-blue-950/50">
-                    <p className="text-xs font-bold tracking-[0.28em] text-stone-400 dark:text-stone-500">{value}</p>
-                    <p className="mt-3 text-sm font-semibold leading-6 text-stone-900 dark:text-stone-100">{label}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-            ) : null}
-
-            {hasSection('surface') ? (
-            <div className="relative overflow-hidden rounded-[2rem] border border-blue-900/60 bg-[#06132e] p-6 text-white shadow-[0_30px_80px_rgba(6,19,46,0.40)] dark:border-blue-800">
-              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.30),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(96,165,250,0.22),transparent_32%)]" />
-              <div className="relative">
-                <div className="flex items-center justify-between gap-3">
-                  <span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
-                    {dict.surfaceLabel}
-                  </span>
-                  <span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
-                    {dict.liveLabel}
-                  </span>
-                </div>
-
-                <h2 className="mt-6 text-3xl font-black leading-tight tracking-[-0.03em]">{dict.surfaceTitle}</h2>
-                <p className="mt-4 text-sm leading-7 text-stone-300">{dict.surfaceBody}</p>
-
-                <div className="mt-8 space-y-3">
-                  {[
-                    ['01', dict.trustedFleets],
-                    ['02', dict.brandedFlows],
-                    ['03', dict.multiTenant],
-                  ].map(([step, label]) => (
-                    <div key={step} className="flex items-center justify-between rounded-[1.25rem] border border-white/10 bg-white/5 px-4 py-4">
-                      <div className="flex items-center gap-3">
-                        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-xs font-bold text-blue-950">
-                          {step}
-                        </span>
-                        <p className="text-sm font-semibold text-white">{label}</p>
-                      </div>
-                      <span className="text-lg text-orange-300">+</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-            ) : null}
-          </div>
-
-          {hasSection('audiences') ? <div className="mt-8 grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
-            <article className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 backdrop-blur dark:border-blue-900 dark:bg-blue-950/60">
-              <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.companyKicker}</p>
-              <h2 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50 sm:text-3xl">{dict.companyTitle}</h2>
-              <p className="mt-4 max-w-3xl text-sm leading-7 text-stone-600 dark:text-stone-300">{dict.companyBody}</p>
-            </article>
-            <article className="rounded-[2rem] border border-stone-200/80 bg-[#f7efe2] p-7 dark:border-blue-900 dark:bg-[#1d1712]">
-              <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">{dict.renterKicker}</p>
-              <h2 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50 sm:text-3xl">{dict.renterTitle}</h2>
-              <p className="mt-4 text-sm leading-7 text-stone-700 dark:text-stone-300">{dict.renterBody}</p>
-            </article>
-          </div> : null}
-        </div>
-      </section>
-
-      {hasSection('pillars') ? <section className="shell pb-10">
-        <div className="grid gap-4 lg:grid-cols-3">
-          {dict.pillars.map(({ title, body }, index) => (
-            <article
-              key={title}
-              className={`rounded-[2rem] border p-7 shadow-sm ${
-                index === 1
-                  ? 'border-orange-700 bg-orange-600 text-white dark:border-orange-500 dark:bg-orange-500 dark:text-white'
-                  : 'border-stone-200 bg-white dark:border-blue-900 dark:bg-blue-950'
-              }`}
-            >
-              <p
-                className={`text-xs font-bold uppercase tracking-[0.26em] ${
-                  index === 1 ? 'text-stone-300 dark:text-stone-700' : 'text-stone-400 dark:text-stone-500'
-                }`}
-              >
-                0{index + 1}
-              </p>
-              <h3 className="mt-4 text-2xl font-black tracking-[-0.03em]">{title}</h3>
-              <p
-                className={`mt-4 text-sm leading-7 ${
-                  index === 1 ? 'text-stone-200 dark:text-stone-800' : 'text-stone-600 dark:text-stone-300'
-                }`}
-              >
-                {body}
-              </p>
-            </article>
-          ))}
-        </div>
-      </section> : null}
-
-      {hasSection('pillars') ? (
-      <StatsStrip
-        stats={dict.metrics.map((m) => ({
-          label: m.label,
-          value: parseInt(m.value) || 0,
-        }))}
-        kicker="BY THE NUMBERS"
-      />
-      ) : null}
-
-      {(hasSection('features') || hasSection('steps')) ? <section className="shell py-10">
-        <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
-          {hasSection('features') ? (
-          <div className="rounded-[2rem] border border-stone-200 bg-[linear-gradient(160deg,#f5f8ff_0%,#edf2ff_100%)] p-8 dark:border-blue-900 dark:bg-[linear-gradient(160deg,#0c1830_0%,#10203e_100%)]">
-            <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.featureLabel}</p>
-            <div className="mt-6 space-y-3">
-              {dict.features.map((item, index) => (
-                <div key={item} className="flex items-start gap-4 rounded-[1.25rem] border border-stone-200/80 bg-white/85 px-4 py-4 dark:border-blue-800 dark:bg-blue-950/40">
-                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-600 text-xs font-bold text-white dark:bg-orange-500 dark:text-white">
-                    {index + 1}
-                  </span>
-                  <p className="text-sm font-semibold leading-6 text-stone-800 dark:text-stone-100">{item}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-          ) : <div />}
-        </div>
-      </section> : null}
-
-      {hasSection('howitworks') ? (
-      <HowItWorks
-        steps={dict.howitworksSteps}
-        kicker={dict.howitworksKicker}
-        title={dict.howitworksTitle}
-      />
-      ) : null}
-
-      {hasSection('steps') ? <section className="shell py-10">
-        <div className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm dark:border-blue-900 dark:bg-blue-950">
-          <div className="flex items-end justify-between gap-4">
-            <div>
-              <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">{dict.readyKicker}</p>
-              <h2 className="mt-4 text-3xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">{dict.stepsTitle}</h2>
-            </div>
-          </div>
-
-          <div className="mt-8 space-y-4">
-            {dict.steps.map(({ step, title, body }) => (
-              <article key={step} className="rounded-[1.5rem] border border-stone-200 bg-stone-50 p-5 dark:border-blue-900 dark:bg-blue-950">
-                <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">
-                  {dict.stepLabel} {step}
-                </p>
-                <h3 className="mt-3 text-lg font-black text-blue-950 dark:text-stone-50">{title}</h3>
-                <p className="mt-3 text-sm leading-7 text-stone-600 dark:text-stone-300">{body}</p>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section> : null}
-
-      {hasSection('testimonials') && dict.testimonials && dict.testimonials.length > 0 ? (
-      <TestimonialsSection
-        testimonials={dict.testimonials}
-        kicker={dict.testimonialsKicker}
-        title={dict.testimonialsTitle}
-      />
-      ) : null}
-
-      {hasSection('closing') ? <section className="shell pb-16 pt-6 sm:pb-20">
-        <div className="overflow-hidden rounded-[2rem] border border-blue-900/60 bg-[#06132e] px-8 py-10 text-white dark:border-blue-800">
-          <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
-            <div>
-              <p className="text-xs font-bold uppercase tracking-[0.28em] text-orange-300">{dict.readyKicker}</p>
-              <h2 className="mt-4 max-w-3xl text-4xl font-black leading-tight tracking-[-0.04em] sm:text-5xl">{dict.readyTitle}</h2>
-              <p className="mt-5 max-w-2xl text-sm leading-8 text-stone-300 sm:text-base">{dict.readyBody}</p>
-            </div>
-
-            <div className="flex flex-wrap gap-3 lg:justify-end">
-              <a
-                href="/pricing"
-                className="rounded-full border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white hover:text-blue-900"
-              >
-                {dict.viewPricing}
-              </a>
-              <a
-                href={starterSignupHref}
-                className="rounded-full bg-orange-300 px-6 py-3 text-sm font-semibold text-blue-950 transition hover:bg-orange-200"
-              >
-                {dict.createWorkspace}
-              </a>
-            </div>
-          </div>
-        </div>
-      </section> : null}
-    </main>
-  )
-}
diff --git a/apps/homepage/src/app/(public)/features/page.tsx b/apps/homepage/src/app/(public)/features/page.tsx
deleted file mode 100644
index 2017a0a..0000000
--- a/apps/homepage/src/app/(public)/features/page.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client'
-
-import {
-  BarChart3,
-  Zap,
-  Users,
-  CreditCard,
-  Lock,
-  Bell,
-} from 'lucide-react'
-import { useMarketplacePreferences } from '@/components/MarketplaceShell'
-import { FeatureAlternating } from '@/components/FeatureAlternating'
-
-const copy = {
-  en: {
-    kicker: 'Features',
-    title: 'Operations, marketplace discovery, and branded booking.',
-    body: "RentalDriveGo combines company-only operations with a public marketplace that sends renters to each company's own payment flow.",
-    features: [
-      {
-        title: 'Private dashboard',
-        body: 'Fleet, reservations, CRM, team permissions, billing, and reports stay isolated per company.',
-        icon: 'BarChart3',
-      },
-      {
-        title: 'Marketplace discovery',
-        body: 'Published vehicles and public offers appear on `/explore` for cross-company browsing.',
-        icon: 'Zap',
-      },
-      {
-        title: 'Branded booking site',
-        body: 'Each company gets its own subdomain where renters complete booking and payment directly.',
-        icon: 'Lock',
-      },
-      {
-        title: 'Payment flexibility',
-        body: 'Use AmanPay or PayPal for subscriptions and for company-side renter payments.',
-        icon: 'CreditCard',
-      },
-      {
-        title: 'Advanced rental ops',
-        body: 'Insurance, additional drivers, pricing rules, and structured fuel policies live in dashboard settings.',
-        icon: 'Users',
-      },
-      {
-        title: 'Notification controls',
-        body: 'Both company staff and renters can manage event-by-channel notification preferences.',
-        icon: 'Bell',
-      },
-    ],
-  },
-  fr: {
-    kicker: 'Fonctionnalités',
-    title: 'Opérations, découverte marketplace et réservation de marque.',
-    body: "RentalDriveGo combine des opérations privées pour l'entreprise avec une marketplace publique qui redirige les clients vers le parcours de paiement propre à chaque société.",
-    features: [
-      {
-        title: 'Tableau de bord privé',
-        body: "Flotte, réservations, CRM, permissions d'équipe, facturation et rapports restent isolés par entreprise.",
-        icon: 'BarChart3',
-      },
-      {
-        title: 'Découverte marketplace',
-        body: 'Les véhicules publiés et les offres publiques apparaissent sur `/explore` pour une navigation multi-entreprises.',
-        icon: 'Zap',
-      },
-      {
-        title: 'Site de réservation de marque',
-        body: 'Chaque entreprise dispose de son propre sous-domaine où les clients finalisent la réservation et le paiement.',
-        icon: 'Lock',
-      },
-      {
-        title: 'Flexibilité de paiement',
-        body: 'Utilisez AmanPay ou PayPal pour les abonnements et pour les paiements côté entreprise.',
-        icon: 'CreditCard',
-      },
-      {
-        title: 'Opérations avancées',
-        body: 'Assurance, conducteurs supplémentaires, règles tarifaires et politiques carburant structurées sont gérés dans les paramètres du tableau de bord.',
-        icon: 'Users',
-      },
-      {
-        title: 'Contrôle des notifications',
-        body: 'Le personnel comme les clients peuvent gérer leurs préférences de notification par événement et canal.',
-        icon: 'Bell',
-      },
-    ],
-  },
-  ar: {
-    kicker: 'المزايا',
-    title: 'العمليات، اكتشاف السوق، والحجز المخصص.',
-    body: 'يجمع RentalDriveGo بين عمليات الشركة الخاصة وسوق عام يوجّه المستأجرين إلى مسار الدفع الخاص بكل شركة.',
-    features: [
-      {
-        title: 'لوحة تحكم خاصة',
-        body: 'الأسطول والحجوزات وCRM وصلاحيات الفريق والفوترة والتقارير تبقى معزولة لكل شركة.',
-        icon: 'BarChart3',
-      },
-      {
-        title: 'اكتشاف عبر السوق',
-        body: 'تظهر السيارات المنشورة والعروض العامة في `/explore` للتصفح بين الشركات.',
-        icon: 'Zap',
-      },
-      {
-        title: 'موقع حجز مخصص',
-        body: 'تحصل كل شركة على نطاق فرعي خاص بها لإتمام الحجز والدفع مباشرة.',
-        icon: 'Lock',
-      },
-      {
-        title: 'مرونة الدفع',
-        body: 'استخدم AmanPay أو PayPal للاشتراكات ومدفوعات المستأجرين من جهة الشركة.',
-        icon: 'CreditCard',
-      },
-      {
-        title: 'عمليات متقدمة',
-        body: 'التأمين والسائقون الإضافيون وقواعد التسعير وسياسات الوقود المنظمة موجودة في إعدادات اللوحة.',
-        icon: 'Users',
-      },
-      {
-        title: 'التحكم في الإشعارات',
-        body: 'يمكن للموظفين والمستأجرين إدارة تفضيلات الإشعارات حسب الحدث والقناة.',
-        icon: 'Bell',
-      },
-    ],
-  },
-} as const
-
-const iconMap = {
-  BarChart3,
-  Zap,
-  Users,
-  CreditCard,
-  Lock,
-  Bell,
-}
-
-export default function FeaturesPage() {
-  const { language } = useMarketplacePreferences()
-  const dict = copy[language]
-
-  const features = dict.features.map((f) => ({
-    ...f,
-    icon: iconMap[f.icon as keyof typeof iconMap],
-  }))
-
-  return (
-    <main className="site-page">
-      <div className="site-section space-y-16">
-        <div className="max-w-3xl">
-          <p className="site-kicker">{dict.kicker}</p>
-          <h1 className="site-title">{dict.title}</h1>
-          <p className="site-lead">{dict.body}</p>
-        </div>
-
-        <FeatureAlternating features={features} />
-      </div>
-    </main>
-  )
-}
diff --git a/apps/homepage/src/app/(public)/layout.tsx b/apps/homepage/src/app/(public)/layout.tsx
deleted file mode 100644
index dfe401d..0000000
--- a/apps/homepage/src/app/(public)/layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import MarketplaceHeader from '@/components/MarketplaceHeader'
-import MarketplaceFooter from '@/components/MarketplaceFooter'
-import { useMarketplacePreferences, getFooterContent, localeOptions } from '@/components/MarketplaceShell'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
-
-export default function PublicLayout({ children }: { children: React.ReactNode }) {
-  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
-  const footerContent = getFooterContent(language)
-  const available = localeOptions.filter((o) => o.value !== language)
-  const current = localeOptions.find((o) => o.value === language) ?? localeOptions[0]
-
-  return (
-    <div className="site-page flex min-h-screen flex-col">
-      <MarketplaceHeader
-        dict={dict}
-        theme={theme}
-        setTheme={setTheme}
-        companyName={companyName}
-        dashboardUrl={dashboardUrl}
-        currentLanguage={{ value: current.value, flag: current.flag, shortLabel: current.value.toUpperCase() }}
-        localeOptions={available.map((o) => ({ value: o.value, flag: o.flag, shortLabel: o.value.toUpperCase() }))}
-        onSelectLanguage={setLanguage}
-      />
-      <div className="flex flex-1 flex-col">
-        <div className="flex-1">{children}</div>
-        <MarketplaceFooter
-          primaryItems={footerContent.primary}
-          secondaryItems={footerContent.secondary}
-          localeLabel={footerContent.localeLabel}
-          rightsLabel={footerContent.rightsLabel}
-          localeOptions={available}
-          currentLocale={current}
-          onSelectLanguage={setLanguage}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/homepage/src/app/(public)/page.tsx b/apps/homepage/src/app/(public)/page.tsx
deleted file mode 100644
index 5353139..0000000
--- a/apps/homepage/src/app/(public)/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import HomeContent from './HomeContent'
-
-export default function HomePage() {
-  return <HomeContent />
-}
diff --git a/apps/homepage/src/app/(public)/platform-operations/page.tsx b/apps/homepage/src/app/(public)/platform-operations/page.tsx
deleted file mode 100644
index e5db36f..0000000
--- a/apps/homepage/src/app/(public)/platform-operations/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation'
-
-export default function PlatformOperationsPage() {
-  redirect('/')
-}
diff --git a/apps/homepage/src/app/(public)/pricing/PricingClient.tsx b/apps/homepage/src/app/(public)/pricing/PricingClient.tsx
deleted file mode 100644
index 69920b6..0000000
--- a/apps/homepage/src/app/(public)/pricing/PricingClient.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { getCurrencyLabel, PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
-import { useMarketplacePreferences } from '@/components/MarketplaceShell'
-import { marketplaceFetchOrDefault } from '@/lib/api'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
-
-type Billing = 'monthly' | 'annual'
-
-type PricingMatrix = Record<string, Record<string, Record<string, number>>>
-type PlanFeatureMap = Record<string, string[]>
-
-type PlatformPricing = {
-  prices: PricingMatrix
-  planFeatures: PlanFeatureMap
-}
-
-export const DEFAULT_PRICING: PlatformPricing = {
-  prices: PLAN_PRICES,
-  planFeatures: PLAN_FEATURES,
-}
-
-const PLANS = [
-  {
-    key: 'STARTER',
-    name: 'Starter',
-    tagline: 'Launch your fleet online',
-    highlight: false,
-  },
-  {
-    key: 'GROWTH',
-    name: 'Growth',
-    tagline: 'Scale with confidence',
-    highlight: true,
-  },
-  {
-    key: 'PRO',
-    name: 'Pro',
-    tagline: 'Enterprise-grade power',
-    highlight: false,
-  },
-]
-
-const copy = {
-  en: {
-    monthly: 'Monthly',
-    annual: 'Annual',
-    yearly: '/ year',
-    youSave: 'You save',
-    withAnnual: 'with annual billing — billed as one payment per year.',
-    mostPopular: 'Most popular',
-    perMonth: '/mo',
-    billedAs: 'Billed as',
-    getStarted: 'Get started',
-    footer: 'All plans include a 90-day free trial. No credit card required.',
-  },
-  fr: {
-    monthly: 'Mensuel',
-    annual: 'Annuel',
-    yearly: '/ an',
-    youSave: 'Vous économisez',
-    withAnnual: 'avec la facturation annuelle, prélevée en un seul paiement par an.',
-    mostPopular: 'Le plus populaire',
-    perMonth: '/mois',
-    billedAs: 'Facturé à',
-    getStarted: 'Commencer',
-    footer: "Toutes les formules incluent un essai gratuit de 90 jours. Aucune carte bancaire n'est requise.",
-  },
-  ar: {
-    monthly: 'شهري',
-    annual: 'سنوي',
-    yearly: '/ سنة',
-    youSave: 'توفر',
-    withAnnual: 'مع الفوترة السنوية، تُسدد دفعة واحدة كل سنة.',
-    mostPopular: 'الأكثر شيوعاً',
-    perMonth: '/شهر',
-    billedAs: 'يتم الفوترة بمبلغ',
-    getStarted: 'ابدأ الآن',
-    footer: 'تشمل جميع الخطط تجربة مجانية لمدة 14 يوماً. لا حاجة إلى بطاقة ائتمان.',
-  },
-} as const
-
-function getPlanPrice(prices: PricingMatrix, plan: string, billingPeriod: 'MONTHLY' | 'ANNUAL') {
-  return (prices[plan]?.[billingPeriod]?.MAD ?? PLAN_PRICES[plan]?.[billingPeriod]?.MAD ?? 0) / 100
-}
-
-function annualSavingsPct(prices: PricingMatrix, plan: string): number {
-  const monthly = getPlanPrice(prices, plan, 'MONTHLY')
-  const annual = getPlanPrice(prices, plan, 'ANNUAL')
-  const wouldPay = monthly * 12
-  if (wouldPay <= 0) return 0
-  return Math.max(0, Math.round(((wouldPay - annual) / wouldPay) * 100))
-}
-
-export default function PricingClient({ initialPricing = DEFAULT_PRICING }: { initialPricing?: PlatformPricing }) {
-  const { language } = useMarketplacePreferences()
-  const currencyLabel = getCurrencyLabel(language)
-  const dict = copy[language]
-  const [billing, setBilling] = useState<Billing>('monthly')
-  const [pricing, setPricing] = useState<PlatformPricing>(initialPricing)
-
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
-
-  useEffect(() => {
-    marketplaceFetchOrDefault<PlatformPricing>('/site/platform/pricing', DEFAULT_PRICING)
-      .then(setPricing)
-  }, [])
-
-  const savings = annualSavingsPct(pricing.prices, 'STARTER')
-
-  return (
-    <div className="space-y-10">
-      {/* Billing toggle */}
-      <div className="flex items-center justify-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-blue-950">
-        {(['monthly', 'annual'] as Billing[]).map((b) => (
-          <button
-            key={b}
-            onClick={() => setBilling(b)}
-            className={`relative rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
-              billing === b
-                ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
-                : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100'
-            }`}
-          >
-            {b === 'monthly' ? dict.monthly : dict.annual}
-            {b === 'annual' && billing !== 'annual' && (
-              <span className="ml-2 rounded-full bg-orange-100 px-2 py-0.5 text-[10px] font-bold text-orange-700 dark:bg-orange-950/50 dark:text-orange-400">
-                -{savings}%
-              </span>
-            )}
-          </button>
-        ))}
-      </div>
-
-      {billing === 'annual' && (
-        <p className="text-center text-sm font-medium text-orange-700 dark:text-orange-400">
-          {dict.youSave} {savings}% {dict.withAnnual}
-        </p>
-      )}
-
-      {/* Plan cards */}
-      <div className="grid gap-6 md:grid-cols-3">
-        {PLANS.map((plan) => {
-          const monthlyPrice = getPlanPrice(pricing.prices, plan.key, 'MONTHLY')
-          const annualPrice = getPlanPrice(pricing.prices, plan.key, 'ANNUAL')
-          const displayPrice = billing === 'annual'
-            ? Math.round(annualPrice / 12)
-            : monthlyPrice
-          const features = pricing.planFeatures[plan.key] ?? PLAN_FEATURES[plan.key] ?? []
-
-          return (
-            <div
-              key={plan.key}
-              className={`card relative flex flex-col overflow-hidden ${
-                plan.highlight
-                  ? 'border-orange-400 ring-2 ring-orange-400 ring-offset-2 dark:ring-offset-blue-950'
-                  : ''
-              }`}
-            >
-              {plan.highlight && (
-                <div className="bg-orange-500 dark:bg-orange-400 py-1.5 text-center text-xs font-bold uppercase tracking-widest text-white dark:text-stone-900">
-                  {dict.mostPopular}
-                </div>
-              )}
-
-              <div className="flex flex-1 flex-col p-8">
-                <p className="text-xs font-bold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-400">
-                  {plan.name}
-                </p>
-                <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{plan.tagline}</p>
-
-                <div className="mt-6">
-                  <div className="flex items-end gap-1">
-                    <span className="text-4xl font-black text-stone-900 dark:text-stone-100">
-                      {displayPrice}
-                    </span>
-                    <span className="mb-1 text-lg font-semibold text-stone-500 dark:text-stone-400">{currencyLabel}</span>
-                    <span className="mb-1 text-sm text-stone-400 dark:text-stone-500">{dict.perMonth}</span>
-                  </div>
-                  {billing === 'annual' && (
-                    <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">
-                      {dict.billedAs} {annualPrice} {currencyLabel} {dict.yearly}
-                    </p>
-                  )}
-                </div>
-
-                <ul className="mt-8 flex-1 space-y-3">
-                  {features.map((f) => (
-                    <li key={f} className="flex items-start gap-2.5 text-sm text-stone-700 dark:text-stone-300">
-                      <svg
-                        className="mt-0.5 h-4 w-4 shrink-0 text-orange-500 dark:text-orange-400"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2.5}
-                        viewBox="0 0 24 24"
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                      </svg>
-                      {f}
-                    </li>
-                  ))}
-                </ul>
-
-                <a
-                  href={`${dashboardUrl}/sign-up?plan=${plan.key}&billing=${billing.toUpperCase()}&currency=MAD`}
-                  className={`mt-10 block rounded-full px-6 py-3 text-center text-sm font-semibold transition-colors ${
-                    plan.highlight
-                      ? 'bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-400 dark:text-stone-900 dark:hover:bg-orange-300'
-                      : 'bg-blue-900 text-white hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400'
-                  }`}
-                >
-                  {dict.getStarted}
-                </a>
-              </div>
-            </div>
-          )
-        })}
-      </div>
-
-      {/* Footer note */}
-      <p className="text-center text-sm text-stone-400 dark:text-stone-500">{dict.footer}</p>
-    </div>
-  )
-}
diff --git a/apps/homepage/src/app/(public)/pricing/PricingPageContent.tsx b/apps/homepage/src/app/(public)/pricing/PricingPageContent.tsx
deleted file mode 100644
index bf90f03..0000000
--- a/apps/homepage/src/app/(public)/pricing/PricingPageContent.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-'use client'
-
-import { useMarketplacePreferences } from '@/components/MarketplaceShell'
-import PricingClient from './PricingClient'
-
-const copy = {
-  en: {
-    kicker: 'Pricing',
-    title: 'One platform, every fleet size.',
-    body: 'Start free for 90 days, then choose the plan that grows with your business. Switch plans or cancel at any time.',
-    faq: 'Frequently asked',
-    items: [
-      ['Can I change plans later?', 'Yes. Upgrade or downgrade at any time — changes take effect on your next billing cycle.'],
-      ['What counts as a vehicle?', 'Any vehicle record added to your fleet dashboard, active or not.'],
-      ['Is there a setup fee?', 'No setup fee, ever. You only pay the monthly or annual subscription.'],
-      ['How does the marketplace listing work?', 'All paid plans include a public marketplace listing on RentalDriveGo. Renters can discover your fleet and are redirected to your branded booking site.'],
-    ],
-  },
-  fr: {
-    kicker: 'Tarifs',
-    title: 'Une seule plateforme pour toutes les tailles de flotte.',
-    body: 'Commencez gratuitement pendant 90 jours, puis choisissez la formule qui accompagne votre activité. Vous pouvez changer de formule ou annuler à tout moment.',
-    faq: 'Questions fréquentes',
-    items: [
-      ['Puis-je changer de formule plus tard ?', 'Oui. Vous pouvez passer à une formule supérieure ou inférieure à tout moment. Les changements prennent effet au cycle de facturation suivant.'],
-      ["Qu'est-ce qui compte comme véhicule ?", "Tout véhicule ajouté à votre tableau de bord de flotte, qu'il soit actif ou non."],
-      ["Y a-t-il des frais d'installation ?", "Aucun frais d'installation. Vous payez uniquement l'abonnement mensuel ou annuel."],
-      ['Comment fonctionne la visibilité marketplace ?', 'Toutes les formules payantes incluent une présence publique sur RentalDriveGo. Les clients découvrent votre flotte puis sont redirigés vers votre site de réservation.'],
-    ],
-  },
-  ar: {
-    kicker: 'الأسعار',
-    title: 'منصة واحدة لكل أحجام الأساطيل.',
-    body: 'ابدأ مجاناً لمدة 14 يوماً، ثم اختر الخطة التي تناسب نمو نشاطك. يمكنك تغيير الخطة أو إلغاءها في أي وقت.',
-    faq: 'الأسئلة الشائعة',
-    items: [
-      ['هل يمكنني تغيير الخطة لاحقاً؟', 'نعم. يمكنك الترقية أو التخفيض في أي وقت — وتدخل التغييرات حيز التنفيذ في دورة الفوترة التالية.'],
-      ['ما الذي يُحتسب كسيارة؟', 'أي سجل سيارة تتم إضافته إلى لوحة الأسطول سواء كان نشطاً أم لا.'],
-      ['هل توجد رسوم إعداد؟', 'لا توجد أي رسوم إعداد. أنت تدفع فقط قيمة الاشتراك الشهري أو السنوي.'],
-      ['كيف تعمل قائمة السوق؟', 'كل الخطط المدفوعة تشمل الظهور العام على RentalDriveGo. يكتشف المستأجرون أسطولك ثم يتم تحويلهم إلى موقع الحجز الخاص بك.'],
-    ],
-  },
-} as const
-
-export default function PricingPageContent({ initialPricing }: { initialPricing?: React.ComponentProps<typeof PricingClient>['initialPricing'] }) {
-  const { language } = useMarketplacePreferences()
-  const dict = copy[language]
-
-  return (
-    <main className="site-page">
-      <div className="site-section">
-        <div className="mx-auto max-w-2xl text-center">
-          <p className="site-kicker">{dict.kicker}</p>
-          <h1 className="site-title">{dict.title}</h1>
-          <p className="site-lead">{dict.body}</p>
-        </div>
-
-        <div className="mt-16">
-          <PricingClient initialPricing={initialPricing} />
-        </div>
-
-        <div className="site-panel mx-auto mt-24 max-w-3xl divide-y divide-stone-200/80 dark:divide-stone-800">
-          <h2 className="pb-8 text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.faq}</h2>
-          {dict.items.map(([q, a]) => (
-            <div key={q} className="py-6">
-              <p className="font-semibold text-stone-900 dark:text-stone-100">{q}</p>
-              <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-stone-400">{a}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </main>
-  )
-}
diff --git a/apps/homepage/src/app/(public)/pricing/page.tsx b/apps/homepage/src/app/(public)/pricing/page.tsx
deleted file mode 100644
index 9def7c1..0000000
--- a/apps/homepage/src/app/(public)/pricing/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Metadata } from 'next'
-import { PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
-import { marketplaceFetchOrDefault } from '@/lib/api'
-import PricingPageContent from './PricingPageContent'
-
-export const metadata: Metadata = {
-  title: 'Pricing — RentalDriveGo',
-  description: 'Simple, transparent pricing for every fleet size.',
-}
-
-const DEFAULT_PRICING = {
-  prices: PLAN_PRICES,
-  planFeatures: PLAN_FEATURES,
-}
-
-export default async function PricingPage() {
-  const initialPricing = await marketplaceFetchOrDefault('/site/platform/pricing', DEFAULT_PRICING)
-  return <PricingPageContent initialPricing={initialPricing} />
-}
diff --git a/apps/homepage/src/app/(public)/review/page.tsx b/apps/homepage/src/app/(public)/review/page.tsx
deleted file mode 100644
index 7aa0ba4..0000000
--- a/apps/homepage/src/app/(public)/review/page.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-'use client'
-
-import { Suspense, useEffect, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
-import { Star } from 'lucide-react'
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
-
-interface ReviewInfo {
-  reservationId: string
-  companyName: string
-  companyLogoUrl: string | null
-  vehicle: string
-  vehiclePhoto: string | null
-}
-
-function StarRating({ value, onChange, label }: { value: number; onChange: (v: number) => void; label: string }) {
-  const [hovered, setHovered] = useState(0)
-  return (
-    <div>
-      <p className="mb-1.5 text-sm font-medium text-stone-700 dark:text-stone-300">{label}</p>
-      <div className="flex gap-1">
-        {[1, 2, 3, 4, 5].map((n) => (
-          <button
-            key={n}
-            type="button"
-            onClick={() => onChange(n)}
-            onMouseEnter={() => setHovered(n)}
-            onMouseLeave={() => setHovered(0)}
-            className="p-0.5 transition-transform hover:scale-110"
-            aria-label={`${n} star${n > 1 ? 's' : ''}`}
-          >
-            <Star
-              className={`h-8 w-8 transition-colors ${
-                n <= (hovered || value)
-                  ? 'fill-orange-400 text-orange-400'
-                  : 'fill-stone-200 text-stone-200 dark:fill-stone-700 dark:text-stone-700'
-              }`}
-            />
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function ReviewPageContent() {
-  const params = useSearchParams()
-  const token = params.get('token') ?? ''
-
-  const [info, setInfo] = useState<ReviewInfo | null>(null)
-  const [loadState, setLoadState] = useState<'loading' | 'ready' | 'already_reviewed' | 'invalid'>('loading')
-
-  const [overall, setOverall] = useState(0)
-  const [vehicle, setVehicle] = useState(0)
-  const [service, setService] = useState(0)
-  const [comment, setComment] = useState('')
-  const [submitState, setSubmitState] = useState<'idle' | 'submitting' | 'done' | 'error'>('idle')
-  const [errorMsg, setErrorMsg] = useState('')
-
-  useEffect(() => {
-    if (!token) { setLoadState('invalid'); return }
-    fetch(`${API_BASE}/marketplace/review/${token}`)
-      .then(async (r) => {
-        if (r.status === 409) { setLoadState('already_reviewed'); return }
-        if (!r.ok) { setLoadState('invalid'); return }
-        const json = await r.json()
-        setInfo(json.data)
-        setLoadState('ready')
-      })
-      .catch(() => setLoadState('invalid'))
-  }, [token])
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    if (overall === 0) { setErrorMsg('Please select an overall rating.'); return }
-    setSubmitState('submitting')
-    setErrorMsg('')
-    try {
-      const res = await fetch(`${API_BASE}/marketplace/review/${token}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          overallRating: overall,
-          vehicleRating: vehicle || undefined,
-          serviceRating: service || undefined,
-          comment: comment.trim() || undefined,
-        }),
-      })
-      if (res.status === 409) { setLoadState('already_reviewed'); return }
-      if (!res.ok) {
-        const json = await res.json()
-        throw new Error(json.message ?? 'Something went wrong.')
-      }
-      setSubmitState('done')
-    } catch (err: any) {
-      setSubmitState('error')
-      setErrorMsg(err.message ?? 'Something went wrong. Please try again.')
-    }
-  }
-
-  if (loadState === 'loading') {
-    return (
-      <main className="site-page flex min-h-screen items-center justify-center p-6">
-        <p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
-      </main>
-    )
-  }
-
-  if (loadState === 'invalid') {
-    return (
-      <main className="site-page flex min-h-screen items-center justify-center p-6">
-        <div className="card w-full max-w-md space-y-3 p-8 text-center">
-          <p className="text-2xl font-black text-stone-900 dark:text-stone-100">Link not found</p>
-          <p className="text-sm text-stone-500 dark:text-stone-400">This review link is invalid or has already been used.</p>
-        </div>
-      </main>
-    )
-  }
-
-  if (loadState === 'already_reviewed') {
-    return (
-      <main className="site-page flex min-h-screen items-center justify-center p-6">
-        <div className="card w-full max-w-md space-y-3 p-8 text-center">
-          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
-            <svg className="h-7 w-7 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
-          </div>
-          <p className="text-xl font-bold text-stone-900 dark:text-stone-100">Already reviewed</p>
-          <p className="text-sm text-stone-500 dark:text-stone-400">You have already submitted a review for this rental. Thank you!</p>
-        </div>
-      </main>
-    )
-  }
-
-  if (submitState === 'done') {
-    return (
-      <main className="site-page flex min-h-screen items-center justify-center p-6">
-        <div className="card w-full max-w-md space-y-4 p-8 text-center">
-          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
-            <svg className="h-8 w-8 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
-          </div>
-          <h1 className="text-2xl font-black text-stone-900 dark:text-stone-100">Thank you!</h1>
-          <p className="text-stone-500 dark:text-stone-400">Your review has been submitted and will be visible on {info?.companyName}'s profile.</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <main className="site-page flex min-h-screen items-center justify-center p-6">
-      <div className="card w-full max-w-lg overflow-hidden">
-        {/* Header */}
-        <div className="flex items-center gap-4 border-b border-stone-200 dark:border-blue-900 p-6">
-          {info?.vehiclePhoto ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={info.vehiclePhoto} alt={info.vehicle} className="h-16 w-24 flex-shrink-0 rounded-xl object-cover" />
-          ) : (
-            <div className="h-16 w-24 flex-shrink-0 rounded-xl bg-stone-100 dark:bg-blue-900/30" />
-          )}
-          <div className="min-w-0">
-            <p className="truncate text-xs uppercase tracking-widest text-stone-400 dark:text-stone-500">{info?.companyName}</p>
-            <h1 className="mt-0.5 truncate text-lg font-bold text-stone-900 dark:text-stone-100">{info?.vehicle}</h1>
-            <p className="mt-0.5 text-sm text-stone-500 dark:text-stone-400">How was your experience?</p>
-          </div>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-6 p-6">
-          <StarRating value={overall} onChange={setOverall} label="Overall experience *" />
-          <StarRating value={vehicle} onChange={setVehicle} label="Vehicle condition (optional)" />
-          <StarRating value={service} onChange={setService} label="Customer service (optional)" />
-
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-300">Comments (optional)</label>
-            <textarea
-              rows={4}
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder="Tell us about your rental experience…"
-              className="w-full resize-none rounded-xl border border-stone-200 dark:border-blue-800 bg-white dark:bg-blue-950 px-4 py-3 text-sm text-stone-900 dark:text-stone-100 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-400"
-            />
-          </div>
-
-          {errorMsg && (
-            <p className="rounded-xl bg-rose-50 dark:bg-rose-950/40 px-4 py-3 text-sm text-rose-700 dark:text-rose-400">{errorMsg}</p>
-          )}
-
-          <button
-            type="submit"
-            disabled={submitState === 'submitting'}
-            className="w-full rounded-full bg-orange-600 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
-          >
-            {submitState === 'submitting' ? 'Submitting…' : 'Submit review'}
-          </button>
-        </form>
-      </div>
-    </main>
-  )
-}
-
-export default function ReviewPage() {
-  return (
-    <Suspense
-      fallback={
-        <main className="site-page flex min-h-screen items-center justify-center p-6">
-          <p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
-        </main>
-      }
-    >
-      <ReviewPageContent />
-    </Suspense>
-  )
-}
diff --git a/apps/homepage/src/app/[locale]/[slug]/page.tsx b/apps/homepage/src/app/[locale]/[slug]/page.tsx
new file mode 100644
index 0000000..ad928cd
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/[slug]/page.tsx
@@ -0,0 +1,89 @@
+import { StateAction, StateActions, StateShell } from '@/components/app-shell/StateShell';
+import { SignInForm } from '@/components/auth/SignInForm';
+import { ForgotPasswordForm } from '@/components/auth/ForgotPasswordForm';
+import { ResetPasswordForm } from '@/components/auth/ResetPasswordForm';
+import {
+  isLocale,
+  localizedPath,
+  routeIdFromSlug,
+  type Locale,
+  type RouteId,
+} from '@/lib/localization/config';
+import { getMessages, type ShellMessages } from '@/lib/localization/messages';
+import { buildLocalizedMetadata } from '@/lib/metadata/build-metadata';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+interface PendingRouteProps {
+  params: Promise<{ locale: string; slug: string }>;
+}
+
+function routeLabel(messages: ShellMessages, routeId: RouteId): string {
+  const labels = messages.footer.links;
+  switch (routeId) {
+    case 'sign-in':
+      return labels.login;
+    case 'forgot-password':
+      return 'Forgot password';
+    case 'reset-password':
+      return 'Reset password';
+    case 'privacy':
+      return labels.privacy;
+    case 'terms':
+      return labels.terms;
+    case 'accessibility':
+      return labels.accessibility;
+    case 'home':
+      return 'RentalDriveGo';
+  }
+}
+
+async function resolveParams(params: PendingRouteProps['params']) {
+  const { locale: localeValue, slug } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const routeId = routeIdFromSlug(localeValue, slug);
+  if (!routeId || routeId === 'home') notFound();
+  return { locale: localeValue as Locale, routeId };
+}
+
+export async function generateMetadata({ params }: PendingRouteProps): Promise<Metadata> {
+  const { locale, routeId } = await resolveParams(params);
+  const messages = getMessages(locale).shell;
+  const label = routeLabel(messages, routeId);
+  return buildLocalizedMetadata({
+    locale,
+    routeId,
+    title: `${label} | ${messages.metadata.pendingTitle}`,
+    description: messages.metadata.pendingDescription,
+    indexable: false,
+  });
+}
+
+export default async function PendingRoute({ params }: PendingRouteProps) {
+  const { locale, routeId } = await resolveParams(params);
+  const messages = getMessages(locale).shell;
+  const label = routeLabel(messages, routeId);
+
+  if (routeId === 'sign-in') {
+    return <SignInForm locale={locale} />;
+  }
+
+  if (routeId === 'forgot-password') {
+    return <ForgotPasswordForm locale={locale} />;
+  }
+
+  if (routeId === 'reset-password') {
+    return <ResetPasswordForm locale={locale} />;
+  }
+
+  return (
+    <StateShell
+      title={`${label}: ${messages.states.pendingTitle}`}
+      body={messages.states.pendingBody}
+    >
+      <StateActions>
+        <StateAction href={localizedPath('home', locale)}>{messages.states.backHome}</StateAction>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/apps/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx b/apps/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx
new file mode 100644
index 0000000..1cba5e1
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { Accordion } from '@/components/controls/Accordion';
+import { SegmentedControl } from '@/components/controls/SegmentedControl';
+import { Tabs } from '@/components/controls/Tabs';
+import { Alert } from '@/components/feedback/Alert';
+import { Checkbox, Switch } from '@/components/forms/ChoiceControls';
+import { FormField } from '@/components/forms/FormField';
+import { TextInput } from '@/components/forms/TextInput';
+import { DropdownMenu } from '@/components/overlays/DropdownMenu';
+import { Dialog } from '@/components/overlays/Dialog';
+import type { ComponentLabCopy } from '@/content/development/component-lab';
+import { useRef, useState } from 'react';
+import styles from './page.module.css';
+
+export function ComponentLabInteractive({ copy }: { copy: ComponentLabCopy }) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [segment, setSegment] = useState('comfortable');
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  return (
+    <div className={styles.interactiveGrid}>
+      <section className={styles.group} aria-labelledby="lab-actions">
+        <h2 id="lab-actions">Actions</h2>
+        <div className={styles.cluster}>
+          <Button>{copy.actions.primary}</Button>
+          <Button intent="conversion">{copy.actions.conversion}</Button>
+          <Button loading>{copy.actions.loading}</Button>
+          <Button disabled>{copy.actions.disabled}</Button>
+          <Button ref={triggerRef} intent="secondary" onClick={() => setDialogOpen(true)}>
+            {copy.dialog.open}
+          </Button>
+          <DropdownMenu
+            label={copy.menu.label}
+            items={[
+              { id: 'review', label: copy.menu.first, onSelect: () => undefined },
+              {
+                id: 'archive',
+                label: copy.menu.second,
+                onSelect: () => undefined,
+                destructive: true,
+              },
+            ]}
+          />
+        </div>
+      </section>
+      <section className={styles.group} aria-labelledby="lab-form">
+        <h2 id="lab-form">Form controls</h2>
+        <FormField
+          id="fixture-email"
+          label={copy.form.label}
+          supportingText={copy.form.supporting}
+          error={copy.form.error}
+          required
+        >
+          <TextInput
+            id="fixture-email"
+            type="email"
+            placeholder={copy.form.placeholder}
+            invalid
+            describedBy="fixture-email-help fixture-email-error"
+          />
+        </FormField>
+        <Checkbox label={copy.form.checkbox} />
+        <Switch label={copy.form.switch} />
+        <SegmentedControl
+          label="Density"
+          value={segment}
+          onChange={setSegment}
+          options={[
+            { value: 'comfortable', label: 'Comfortable' },
+            { value: 'compact', label: 'Compact' },
+          ]}
+        />
+      </section>
+      <section className={styles.group} aria-labelledby="lab-controls">
+        <h2 id="lab-controls">Selection and disclosure</h2>
+        <Tabs label={copy.tabs.label} items={copy.tabs.items} />
+        <Accordion items={copy.accordion.items} />
+      </section>
+      <Alert tone="warning" title={copy.alert.title}>
+        {copy.alert.body}
+      </Alert>
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title={copy.dialog.title}
+        description={copy.dialog.description}
+        closeLabel={copy.dialog.close}
+        returnFocusRef={triggerRef}
+      >
+        <p>{copy.dialog.content}</p>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/apps/homepage/src/app/[locale]/component-lab/page.module.css b/apps/homepage/src/app/[locale]/component-lab/page.module.css
new file mode 100644
index 0000000..52517f5
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/component-lab/page.module.css
@@ -0,0 +1,32 @@
+.main {
+  min-block-size: 100dvh;
+}
+.interactiveGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+.group {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  min-inline-size: 0;
+  padding: var(--space-6);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+}
+.group h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+@media (max-width: 767px) {
+  .interactiveGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/homepage/src/app/[locale]/component-lab/page.tsx b/apps/homepage/src/app/[locale]/component-lab/page.tsx
new file mode 100644
index 0000000..120134c
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/component-lab/page.tsx
@@ -0,0 +1,81 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { Comparison } from '@/components/marketing/Comparison';
+import { CTA } from '@/components/marketing/CTA';
+import { Metric } from '@/components/marketing/Evidence';
+import { ProductPreview } from '@/components/marketing/ProductPreview';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { Workflow } from '@/components/marketing/Workflow';
+import { getComponentLabCopy } from '@/content/development/component-lab';
+import { isLocale, type Locale } from '@/lib/localization/config';
+import { notFound } from 'next/navigation';
+import { ComponentLabInteractive } from './ComponentLabInteractive';
+import styles from './page.module.css';
+
+export const metadata = { robots: { index: false, follow: false } };
+
+export default async function ComponentLabPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  if (process.env.COMPONENT_FIXTURES_ENABLED !== 'true') notFound();
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const resolvedLocale: Locale = locale;
+  const copy = getComponentLabCopy(resolvedLocale);
+  return (
+    <main id="main-content" className={styles.main}>
+      <Section>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={copy.developmentLabel}
+              title={copy.title}
+              body={copy.body}
+              headingLevel={1}
+            />
+            <ComponentLabInteractive copy={copy} />
+            <Workflow label={copy.title} items={copy.workflow} />
+            <Comparison
+              columns={[
+                {
+                  title: copy.comparison.beforeTitle,
+                  items: copy.comparison.before,
+                  tone: 'problem',
+                },
+                {
+                  title: copy.comparison.afterTitle,
+                  items: copy.comparison.after,
+                  tone: 'solution',
+                },
+              ]}
+            />
+            <ProductPreview
+              title={copy.preview.title}
+              caption={copy.preview.caption}
+              illustrativeLabel={copy.preview.illustrative}
+              rows={copy.preview.rows.map((row, index) => ({
+                ...row,
+                statusTone: index === 0 ? 'success' : 'warning',
+              }))}
+            />
+            <Metric
+              content={{
+                value: copy.metric.value,
+                label: copy.metric.label,
+                qualification: copy.metric.qualification,
+                status: 'research-only',
+              }}
+              statusLabel={copy.metric.status}
+            />
+            <CTA
+              title={copy.cta.title}
+              body={copy.cta.body}
+              primary={{ label: copy.cta.primary, disabledReason: copy.cta.unavailable }}
+            />
+          </Stack>
+        </Container>
+      </Section>
+    </main>
+  );
+}
diff --git a/apps/homepage/src/app/[locale]/error.tsx b/apps/homepage/src/app/[locale]/error.tsx
new file mode 100644
index 0000000..d516598
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/error.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { StateButton, StateActions, StateShell } from '@/components/app-shell/StateShell';
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { useParams } from 'next/navigation';
+
+export default function ErrorPage({
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const params = useParams<{ locale?: string }>();
+  const messages = getClientShellMessages(params?.locale);
+
+  return (
+    <StateShell title={messages.states.errorTitle} body={messages.states.errorBody}>
+      <StateActions>
+        <StateButton onClick={reset}>{messages.states.retry}</StateButton>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/apps/homepage/src/app/[locale]/layout.tsx b/apps/homepage/src/app/[locale]/layout.tsx
new file mode 100644
index 0000000..a7f199d
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/layout.tsx
@@ -0,0 +1,98 @@
+import '@fontsource-variable/inter/index.css';
+import '@fontsource-variable/noto-sans-arabic/index.css';
+import '@/styles/tokens.css';
+import '@/styles/component-tokens.css';
+import '@/styles/globals.css';
+
+import { SiteFooter } from '@/components/app-shell/SiteFooter';
+import { DemoDialogHost } from '@/components/integrations/DemoDialogHost';
+import { SiteHeader } from '@/components/app-shell/SiteHeader';
+import { ThemeController } from '@/components/app-shell/ThemeController';
+import { getPublicIntegrationConfig } from '@/lib/integrations/environment';
+import { getDirection, isLocale, type Locale } from '@/lib/localization/config';
+import { getMessages } from '@/lib/localization/messages';
+import { themeBootstrapScript } from '@/lib/theme/bootstrap-script';
+import {
+  isThemePreference,
+  serverResolvedTheme,
+  themeCookie,
+  type ThemePreference,
+} from '@/lib/theme/config';
+import { cookies, headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    icons: {
+      icon: '/rentaldrivego.jpeg',
+      apple: '/rentaldrivego.jpeg',
+    },
+  };
+}
+
+export const dynamic = 'force-dynamic';
+
+interface LocaleLayoutProps {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const locale: Locale = localeValue;
+  const messages = getMessages(locale);
+  const integrationConfig = getPublicIntegrationConfig();
+  const requestHeaders = await headers();
+  const nonce = requestHeaders.get('x-nonce') ?? undefined;
+  const cookieStore = await cookies();
+  const cookiePreference = cookieStore.get(themeCookie)?.value;
+  const preference: ThemePreference = isThemePreference(cookiePreference)
+    ? cookiePreference
+    : 'system';
+  const resolvedTheme = serverResolvedTheme(preference);
+
+  return (
+    <html
+      lang={locale}
+      dir={getDirection(locale)}
+      data-theme-preference={preference}
+      data-theme={resolvedTheme}
+      suppressHydrationWarning
+    >
+      <head>
+        <script
+          id="theme-bootstrap"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: themeBootstrapScript }}
+        />
+      </head>
+      <body>
+        <ThemeController />
+        <a className="skip-link" href="#main-content">
+          {messages.shell.skipToContent}
+        </a>
+        <SiteHeader
+          locale={locale}
+          messages={messages.shell}
+          themePreference={preference}
+          demoEnabled={integrationConfig.demoSubmissionEnabled}
+        />
+        {children}
+        <DemoDialogHost
+          locale={locale}
+          messages={messages.homepage.form}
+          enabled={integrationConfig.demoSubmissionEnabled}
+        />
+        <SiteFooter
+          locale={locale}
+          messages={messages.shell}
+          demoEnabled={integrationConfig.demoSubmissionEnabled}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/apps/homepage/src/app/[locale]/loading.tsx b/apps/homepage/src/app/[locale]/loading.tsx
new file mode 100644
index 0000000..12cd6ed
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/loading.tsx
@@ -0,0 +1,5 @@
+import { LocalizedLoading } from '@/components/app-shell/LocalizedLoading';
+
+export default function Loading() {
+  return <LocalizedLoading />;
+}
diff --git a/apps/homepage/src/app/[locale]/not-found.tsx b/apps/homepage/src/app/[locale]/not-found.tsx
new file mode 100644
index 0000000..83b5b9a
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/not-found.tsx
@@ -0,0 +1,5 @@
+import { LocalizedNotFound } from '@/components/app-shell/LocalizedNotFound';
+
+export default function NotFound() {
+  return <LocalizedNotFound />;
+}
diff --git a/apps/homepage/src/app/[locale]/page.tsx b/apps/homepage/src/app/[locale]/page.tsx
new file mode 100644
index 0000000..0136e2b
--- /dev/null
+++ b/apps/homepage/src/app/[locale]/page.tsx
@@ -0,0 +1,79 @@
+import styles from '@/components/homepage/Homepage.module.css';
+import {
+  ComparisonSection,
+  FaqSection,
+  FinalCtaSection,
+  HeroSection,
+  IntegrationsSection,
+  ModulesSection,
+  PricingSection,
+  ResultsSection,
+  RolesSection,
+  SecuritySection,
+  TrustSection,
+  WorkflowSection,
+} from '@/components/homepage/sections';
+import { buildHomepageContent } from '@/content/homepage-model';
+import { getPublicIntegrationConfig } from '@/lib/integrations/environment';
+import { isLocale, localizedPath, type Locale } from '@/lib/localization/config';
+import { getMessages } from '@/lib/localization/messages';
+import { buildLocalizedMetadata } from '@/lib/metadata/build-metadata';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+interface LocalePageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: LocalePageProps): Promise<Metadata> {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const messages = getMessages(localeValue);
+  return buildLocalizedMetadata({
+    locale: localeValue,
+    routeId: 'home',
+    title: messages.homepage.meta.title,
+    description: messages.homepage.meta.description,
+    indexable: true,
+  });
+}
+
+export default async function LocaleHomePage({ params }: LocalePageProps) {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+
+  const locale: Locale = localeValue;
+  const messages = getMessages(locale);
+  const content = buildHomepageContent(messages.homepage, messages.shell);
+  const integrationConfig = getPublicIntegrationConfig();
+  const homePath = localizedPath('home', locale);
+
+  return (
+    <main id="main-content" className={styles.main} tabIndex={-1}>
+      <HeroSection
+        content={content.hero}
+        homePath={homePath}
+        demoSubmissionEnabled={integrationConfig.demoSubmissionEnabled}
+      />
+      <TrustSection content={content.trust} />
+      <ComparisonSection content={content.comparison} />
+      <WorkflowSection content={content.workflow} />
+      <RolesSection content={content.roles} />
+      <ModulesSection content={content.modules} />
+      <ResultsSection content={content.results} />
+      <IntegrationsSection content={content.integrations} />
+      <SecuritySection content={content.security} />
+      <PricingSection
+        content={content.pricing}
+        locale={locale}
+        homePath={homePath}
+        demoSubmissionEnabled={integrationConfig.demoSubmissionEnabled}
+      />
+      <FaqSection content={content.faq} />
+      <FinalCtaSection
+        content={content.final}
+        demoSubmissionEnabled={integrationConfig.demoSubmissionEnabled}
+      />
+    </main>
+  );
+}
diff --git a/apps/homepage/src/app/api/demo/route.ts b/apps/homepage/src/app/api/demo/route.ts
new file mode 100644
index 0000000..47d0182
--- /dev/null
+++ b/apps/homepage/src/app/api/demo/route.ts
@@ -0,0 +1,159 @@
+import { randomUUID } from 'node:crypto';
+import {
+  demoSubmissionEnvelopeSchema,
+  zodFieldErrors,
+  type DemoSubmissionResult,
+} from '@/lib/demo/schema';
+import { submitDemoLead } from '@/lib/demo/service';
+import { getIntegrationEnvironment } from '@/lib/integrations/environment';
+import { isApplicationJson } from '@/lib/security/content-type';
+import { NextResponse } from 'next/server';
+
+const maximumBodyBytes = 16_384;
+const responseHeaders = { 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' };
+
+function failure(
+  status: number,
+  result: Extract<DemoSubmissionResult, { ok: false }>,
+): NextResponse<DemoSubmissionResult> {
+  return NextResponse.json(result, { status, headers: responseHeaders });
+}
+
+function isAllowedOrigin(
+  request: Request,
+  approvedOrigin: string | undefined,
+  production: boolean,
+) {
+  const origin = request.headers.get('origin');
+  if (!origin) return !production;
+  const requestOrigin = new URL(request.url).origin;
+  if (origin === requestOrigin) return true;
+  return approvedOrigin ? origin === new URL(approvedOrigin).origin : false;
+}
+
+export async function POST(request: Request): Promise<NextResponse<DemoSubmissionResult>> {
+  const correlationId = randomUUID();
+  let environment;
+  try {
+    environment = getIntegrationEnvironment();
+  } catch {
+    return failure(503, {
+      ok: false,
+      category: 'configuration',
+      formErrorCode: 'integration_environment_invalid',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (request.headers.get('x-rdg-form') !== 'demo-v1') {
+    return failure(403, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'invalid_request_marker',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (!isAllowedOrigin(request, environment.SITE_ORIGIN, environment.NODE_ENV === 'production')) {
+    return failure(403, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'invalid_origin',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const contentType = request.headers.get('content-type');
+  if (!isApplicationJson(contentType)) {
+    return failure(415, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'unsupported_content_type',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const declaredLength = Number(request.headers.get('content-length') ?? '0');
+  if (Number.isFinite(declaredLength) && declaredLength > maximumBodyBytes) {
+    return failure(413, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'request_too_large',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  let body: unknown;
+  try {
+    const raw = await request.text();
+    if (new TextEncoder().encode(raw).byteLength > maximumBodyBytes) {
+      return failure(413, {
+        ok: false,
+        category: 'validation',
+        formErrorCode: 'request_too_large',
+        retryable: false,
+        correlationId,
+      });
+    }
+    body = JSON.parse(raw);
+  } catch {
+    return failure(400, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'malformed_json',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const parsed = demoSubmissionEnvelopeSchema.safeParse(body);
+  if (!parsed.success) {
+    return failure(400, {
+      ok: false,
+      category: 'validation',
+      fieldErrors: zodFieldErrors(parsed.error),
+      formErrorCode: 'validation_failed',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (parsed.data.guard.honeypot.length > 0) {
+    return failure(400, {
+      ok: false,
+      category: 'abuse',
+      formErrorCode: 'request_rejected',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const scenarioHeader = request.headers.get('x-rdg-test-scenario');
+  const testScenario =
+    environment.NODE_ENV !== 'production' &&
+    environment.DEMO_TEST_SCENARIOS_ENABLED &&
+    ['success', 'duplicate', 'timeout', 'integration-error'].includes(scenarioHeader ?? '')
+      ? (scenarioHeader as 'success' | 'duplicate' | 'timeout' | 'integration-error')
+      : undefined;
+
+  const result = await submitDemoLead(parsed.data.lead, {
+    environment,
+    ...(testScenario ? { testScenario } : {}),
+  });
+
+  const status = result.ok
+    ? 202
+    : result.category === 'timeout'
+      ? 504
+      : result.category === 'configuration'
+        ? 503
+        : result.category === 'duplicate'
+          ? 409
+          : 502;
+  return NextResponse.json(result, { status, headers: responseHeaders });
+}
diff --git a/apps/homepage/src/app/globals.css b/apps/homepage/src/app/globals.css
deleted file mode 100644
index a493d66..0000000
--- a/apps/homepage/src/app/globals.css
+++ /dev/null
@@ -1,108 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
-}
-
-html.dark body {
-  background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
-}
-
-.shell {
-  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
-}
-
-.card {
-  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
-  border-color: rgb(231 229 228 / 0.8);
-  background-color: rgb(255 255 255 / 0.82);
-}
-
-html.dark .card {
-  border-color: rgb(30 60 140 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
-}
-
-.site-page {
-  @apply min-h-screen overflow-hidden text-blue-950;
-  background-image:
-    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
-}
-
-html.dark .site-page {
-  @apply text-slate-100;
-  background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
-}
-
-.site-glow {
-  background-image:
-    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
-    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
-}
-
-html.dark .site-glow {
-  background-image:
-    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
-    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
-}
-
-.site-section {
-  @apply shell py-10 sm:py-14 lg:py-16;
-}
-
-.site-panel {
-  @apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
-  border-color: rgb(231 229 228 / 0.8);
-  background-color: rgb(255 255 255 / 0.82);
-}
-
-html.dark .site-panel {
-  border-color: rgb(30 60 140 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
-}
-
-.site-panel-muted {
-  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
-  border-color: rgb(231 229 228 / 0.8);
-  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
-}
-
-html.dark .site-panel-muted {
-  border-color: rgb(30 60 140 / 0.40);
-  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
-}
-
-.site-panel-contrast {
-  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
-  border-color: rgb(14 40 90 / 0.8);
-  background-color: rgb(10 25 75);
-}
-
-html.dark .site-panel-contrast {
-  border-color: rgb(30 64 175);
-}
-
-.site-kicker {
-  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
-}
-
-.site-title {
-  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
-}
-
-.site-lead {
-  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
-}
-
-.site-link-primary {
-  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
-}
-
-.site-link-secondary {
-  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
-}
diff --git a/apps/homepage/src/app/robots.ts b/apps/homepage/src/app/robots.ts
new file mode 100644
index 0000000..2eb6cfc
--- /dev/null
+++ b/apps/homepage/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from 'next';
+import { getSiteOrigin } from '@/lib/localization/site-origin';
+
+export default function robots(): MetadataRoute.Robots {
+  const origin = getSiteOrigin();
+  const approved = process.env.PUBLIC_RELEASE_APPROVED === 'true';
+  return {
+    rules: approved ? { userAgent: '*', allow: '/' } : { userAgent: '*', disallow: '/' },
+    host: origin.href,
+  };
+}
diff --git a/apps/homepage/src/components/FeatureAlternating.tsx b/apps/homepage/src/components/FeatureAlternating.tsx
deleted file mode 100644
index 18413e0..0000000
--- a/apps/homepage/src/components/FeatureAlternating.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { LucideIcon } from 'lucide-react'
-
-interface Feature {
-  title: string
-  body: string
-  icon?: LucideIcon
-}
-
-interface FeatureAlternatingProps {
-  features: Feature[]
-}
-
-export function FeatureAlternating({ features }: FeatureAlternatingProps) {
-  return (
-    <div className="space-y-16 lg:space-y-20">
-      {features.map((feature, index) => {
-        const Icon = feature.icon
-        const isEven = index % 2 === 0
-
-        return (
-          <div
-            key={feature.title}
-            className={`grid gap-12 items-center ${isEven ? 'lg:grid-cols-[1.1fr_0.9fr]' : 'lg:grid-cols-[0.9fr_1.1fr]'}`}
-          >
-            <div className={isEven ? 'order-1 lg:order-none' : 'order-2 lg:order-none'}>
-              <div className="site-panel">
-                <div className="flex items-start gap-3">
-                  {Icon && <Icon className="mt-1 h-6 w-6 shrink-0 text-orange-600 dark:text-orange-500" />}
-                  <div>
-                    <h2 className="text-2xl font-black text-blue-950 dark:text-white sm:text-3xl">
-                      {feature.title}
-                    </h2>
-                    <p className="mt-4 text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg">
-                      {feature.body}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div
-              className={`order-2 lg:order-none ${isEven ? 'order-2 lg:order-none' : 'order-1 lg:order-none'}`}
-            >
-              <div className="site-panel-muted flex h-48 items-center justify-center sm:h-56 lg:h-80">
-                {Icon ? (
-                  <Icon className="h-24 w-24 text-orange-600/20 dark:text-orange-500/20" />
-                ) : (
-                  <div className="text-center">
-                    <p className="text-sm font-semibold text-stone-400 dark:text-stone-600">
-                      {feature.title}
-                    </p>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/apps/homepage/src/components/HowItWorks.tsx b/apps/homepage/src/components/HowItWorks.tsx
deleted file mode 100644
index 31ab622..0000000
--- a/apps/homepage/src/components/HowItWorks.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { LucideIcon } from 'lucide-react'
-
-interface Step {
-  number: string
-  title: string
-  description: string
-  icon?: LucideIcon
-}
-
-interface HowItWorksProps {
-  steps: Step[]
-  kicker?: string
-  title?: string
-}
-
-export function HowItWorks({ steps, kicker = 'GETTING STARTED', title = 'How It Works' }: HowItWorksProps) {
-  const [activeStep, setActiveStep] = useState(0)
-
-  return (
-    <section className="site-section">
-      <div className="site-panel">
-        <p className="site-kicker">{kicker}</p>
-        <h2 className="site-title">{title}</h2>
-
-        <div className="mt-12 space-y-4 lg:space-y-6">
-          {steps.map((step, index) => {
-            const Icon = step.icon
-            const isActive = activeStep === index
-            return (
-              <button
-                key={step.number}
-                onClick={() => setActiveStep(index)}
-                className={`w-full flex gap-6 rounded-[1.5rem] border p-6 transition-all sm:p-8 ${
-                  isActive
-                    ? 'border-orange-600 bg-orange-50 shadow-lg dark:border-orange-500 dark:bg-orange-950/30'
-                    : 'border-stone-200/80 bg-white/85 hover:-translate-y-1 dark:border-blue-800 dark:bg-blue-950/40'
-                }`}
-              >
-                <div className="flex shrink-0 flex-col items-center">
-                  <div
-                    className={`flex h-12 w-12 items-center justify-center rounded-full font-bold text-white transition-all sm:h-14 sm:w-14 ${
-                      isActive
-                        ? 'scale-110 bg-orange-600 shadow-lg dark:bg-orange-500'
-                        : 'bg-orange-600 dark:bg-orange-500'
-                    }`}
-                  >
-                    {step.number}
-                  </div>
-                  {index < steps.length - 1 && (
-                    <div className="mt-4 h-8 w-1 bg-gradient-to-b from-orange-600 to-transparent dark:from-orange-500" />
-                  )}
-                </div>
-
-                <div className="flex-1 pt-1 text-left">
-                  <div className="flex items-start gap-3">
-                    {Icon && (
-                      <Icon className="mt-1 h-5 w-5 shrink-0 text-orange-600 dark:text-orange-400" />
-                    )}
-                    <div>
-                      <h3 className="text-lg font-bold text-blue-950 dark:text-white">{step.title}</h3>
-                      <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-stone-300">{step.description}</p>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/apps/homepage/src/components/PricingToggle.tsx b/apps/homepage/src/components/PricingToggle.tsx
deleted file mode 100644
index 9dfea94..0000000
--- a/apps/homepage/src/components/PricingToggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-export function PricingToggle({
-  onToggle,
-}: {
-  onToggle: (isAnnual: boolean) => void
-}) {
-  const [isAnnual, setIsAnnual] = useState(false)
-
-  const handleToggle = () => {
-    const newValue = !isAnnual
-    setIsAnnual(newValue)
-    onToggle(newValue)
-  }
-
-  return (
-    <div className="flex justify-center">
-      <div className="inline-flex items-center gap-4 rounded-full border border-stone-200 bg-white/80 p-1 dark:border-blue-800 dark:bg-blue-950/40">
-        <button
-          onClick={() => !isAnnual && handleToggle()}
-          className={`rounded-full px-6 py-2 text-sm font-semibold transition ${
-            !isAnnual
-              ? 'bg-orange-600 text-white dark:bg-orange-500'
-              : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-200'
-          }`}
-        >
-          Monthly
-        </button>
-        <button
-          onClick={() => isAnnual && handleToggle()}
-          className={`rounded-full px-6 py-2 text-sm font-semibold transition ${
-            isAnnual
-              ? 'bg-orange-600 text-white dark:bg-orange-500'
-              : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-200'
-          }`}
-        >
-          Annual
-          <span className="ml-2 text-xs font-bold text-orange-200 dark:text-orange-300">-20%</span>
-        </button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/homepage/src/components/StatsStrip.tsx b/apps/homepage/src/components/StatsStrip.tsx
deleted file mode 100644
index b53f5e3..0000000
--- a/apps/homepage/src/components/StatsStrip.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-
-interface Stat {
-  label: string
-  value: number
-  suffix?: string
-}
-
-interface StatsStripProps {
-  stats: Stat[]
-  kicker?: string
-}
-
-function Counter({ value, suffix = '' }: { value: number; suffix?: string }) {
-  const [count, setCount] = useState(0)
-  const ref = useRef<HTMLParagraphElement>(null)
-  const hasAnimated = useRef(false)
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && !hasAnimated.current) {
-          hasAnimated.current = true
-          const duration = 2000
-          const steps = 60
-          const increment = value / steps
-          let current = 0
-          const startTime = Date.now()
-
-          const animate = () => {
-            const elapsed = Date.now() - startTime
-            const progress = Math.min(elapsed / duration, 1)
-            current = Math.floor(value * progress)
-            setCount(current)
-
-            if (progress < 1) {
-              requestAnimationFrame(animate)
-            }
-          }
-
-          animate()
-        }
-      },
-      { threshold: 0.1 }
-    )
-
-    if (ref.current) {
-      observer.observe(ref.current)
-    }
-
-    return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current)
-      }
-    }
-  }, [value])
-
-  return (
-    <p ref={ref} className="text-3xl font-black text-blue-950 dark:text-white sm:text-4xl">
-      {count.toLocaleString()}
-      {suffix}
-    </p>
-  )
-}
-
-export function StatsStrip({ stats, kicker = 'BY THE NUMBERS' }: StatsStripProps) {
-  return (
-    <section className="site-section">
-      <div className="site-panel">
-        <p className="site-kicker">{kicker}</p>
-        <h2 className="site-title">Our Impact</h2>
-
-        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-          {stats.map((stat) => (
-            <div key={stat.label} className="flex flex-col">
-              <Counter value={stat.value} suffix={stat.suffix} />
-              <p className="mt-4 text-sm font-semibold text-stone-600 dark:text-stone-300">{stat.label}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/apps/homepage/src/components/TestimonialsSection.tsx b/apps/homepage/src/components/TestimonialsSection.tsx
deleted file mode 100644
index 29db367..0000000
--- a/apps/homepage/src/components/TestimonialsSection.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-
-interface Testimonial {
-  quote: string
-  author: string
-  role: string
-  company?: string
-  image?: string
-}
-
-interface TestimonialsSectionProps {
-  testimonials: Testimonial[]
-  kicker?: string
-  title?: string
-}
-
-export function TestimonialsSection({
-  testimonials,
-  kicker = 'WHAT CUSTOMERS SAY',
-  title = 'Testimonials',
-}: TestimonialsSectionProps) {
-  const [activeIndex, setActiveIndex] = useState(0)
-  const autoScrollRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    autoScrollRef.current = setInterval(() => {
-      setActiveIndex((prev) => (prev + 1) % testimonials.length)
-    }, 5000)
-
-    return () => {
-      if (autoScrollRef.current) clearInterval(autoScrollRef.current)
-    }
-  }, [testimonials.length])
-
-  const handlePrev = () => {
-    setActiveIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length)
-  }
-
-  const handleNext = () => {
-    setActiveIndex((prev) => (prev + 1) % testimonials.length)
-  }
-
-  if (!testimonials || testimonials.length === 0) return null
-
-  return (
-    <section className="site-section">
-      <div className="flex flex-col">
-        <p className="site-kicker">{kicker}</p>
-        <h2 className="site-title">{title}</h2>
-
-        <div className="mt-12 relative">
-          <div className="site-panel">
-            <div className="flex items-start gap-4">
-              <div className="flex-1">
-                <p className="text-lg leading-8 text-blue-950 dark:text-stone-200 sm:text-xl">
-                  "{testimonials[activeIndex].quote}"
-                </p>
-
-                <div className="mt-8 flex flex-col gap-2">
-                  <p className="font-bold text-blue-950 dark:text-white">{testimonials[activeIndex].author}</p>
-                  <p className="text-sm text-stone-600 dark:text-stone-400">
-                    {testimonials[activeIndex].role}
-                    {testimonials[activeIndex].company && ` at ${testimonials[activeIndex].company}`}
-                  </p>
-                </div>
-              </div>
-
-              {testimonials[activeIndex].image && (
-                <img
-                  src={testimonials[activeIndex].image}
-                  alt={testimonials[activeIndex].author}
-                  className="h-16 w-16 rounded-full object-cover"
-                />
-              )}
-            </div>
-          </div>
-
-          {testimonials.length > 1 && (
-            <div className="mt-6 flex justify-center gap-4">
-              <button
-                onClick={handlePrev}
-                className="rounded-full border border-stone-300 bg-white px-4 py-2 font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:bg-blue-950"
-                aria-label="Previous testimonial"
-              >
-                ← Prev
-              </button>
-
-              <div className="flex items-center gap-2">
-                {testimonials.map((_, index) => (
-                  <button
-                    key={index}
-                    onClick={() => setActiveIndex(index)}
-                    className={`h-2 w-2 rounded-full transition ${
-                      index === activeIndex ? 'bg-orange-600 dark:bg-orange-500' : 'bg-stone-300 dark:bg-stone-600'
-                    }`}
-                    aria-label={`Go to testimonial ${index + 1}`}
-                  />
-                ))}
-              </div>
-
-              <button
-                onClick={handleNext}
-                className="rounded-full border border-stone-300 bg-white px-4 py-2 font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:bg-blue-950"
-                aria-label="Next testimonial"
-              >
-                Next →
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/apps/homepage/src/components/WorkspaceTabs.tsx b/apps/homepage/src/components/WorkspaceTabs.tsx
deleted file mode 100644
index b2ff2b0..0000000
--- a/apps/homepage/src/components/WorkspaceTabs.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-'use client'
-
-import { useMarketplacePreferences } from '@/components/MarketplaceShell'
-import Image from 'next/image'
-import Link from 'next/link'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
-
-export default function WorkspaceTabs() {
-  const { language, theme } = useMarketplacePreferences()
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
-
-  const copy = {
-    en: {
-      badge: 'Unified Workspace',
-      title: 'One launch point on port 3000 for marketplace discovery, company operations, and platform admin work.',
-      intro:
-        'The apps still run as separate Next.js surfaces internally, but the navbar now takes you straight to each workspace area without hunting for ports.',
-      sectionBadge: 'RentalDriveGo Marketplace',
-      sectionTitle: 'Browse local rental fleets without losing the company behind the wheel.',
-      sectionBodyA: 'Discovery happens here. Booking and payment happen on each rental company\'s own branded site.',
-      sectionBodyB: 'Customers only reach that branded booking site after selecting a vehicle from a company\'s fleet.',
-      exploreVehicles: 'Explore vehicles',
-      viewPricing: 'View pricing',
-      nowServing: 'Now serving',
-      promoTitle: 'Discovery, pricing, owner sign-in, and booking entry all stay anchored on the marketplace surface.',
-      promoBody:
-        'Company Workspace and Platform Operations stay available from the navbar, while branded booking starts after a renter picks a vehicle.',
-      customerPaths: 'Customer Paths',
-      ownerSignIn: 'Owner sign in',
-      pricing: 'Pricing',
-      workspaceAreas: 'Workspace Areas',
-      workspaceA: 'Company Workspace for fleet operations, team, billing, and analytics.',
-      workspaceB: 'Platform Operations for platform-level support and tenant oversight.',
-      workspaceC: 'Branded booking handoff begins only after a renter chooses a specific vehicle.',
-    },
-    fr: {
-      badge: 'Espace unifié',
-      title: 'Un point d’entrée sur le port 3000 pour la découverte marketplace, les opérations de l’entreprise et l’administration de la plateforme.',
-      intro:
-        'Les applications restent des interfaces Next.js séparées en interne, mais la barre de navigation mène directement à chaque espace sans avoir à changer de port manuellement.',
-      sectionBadge: 'Marketplace RentalDriveGo',
-      sectionTitle: 'Parcourez les flottes locales sans perdre l’identité de l’entreprise qui gère la location.',
-      sectionBodyA: 'La découverte commence ici. La réservation et le paiement se font sur le site de réservation propre à chaque entreprise.',
-      sectionBodyB: 'Les clients accèdent à ce site de réservation seulement après avoir choisi un véhicule dans la flotte d’une entreprise.',
-      exploreVehicles: 'Explorer les véhicules',
-      viewPricing: 'Voir les tarifs',
-      nowServing: 'Disponible',
-      promoTitle: 'La découverte, les tarifs, la connexion propriétaire et l’accès à la réservation restent ancrés dans la marketplace.',
-      promoBody:
-        'L’espace entreprise et les opérations de la plateforme restent accessibles depuis la navigation, tandis que la réservation de marque commence après le choix d’un véhicule.',
-      customerPaths: 'Parcours client',
-      ownerSignIn: 'Connexion propriétaire',
-      pricing: 'Tarifs',
-      workspaceAreas: 'Espaces de travail',
-      workspaceA: 'Espace entreprise pour la flotte, l’équipe, la facturation et l’analyse.',
-      workspaceB: 'Opérations plateforme pour le support global et la supervision multi-entreprises.',
-      workspaceC: 'Le transfert vers la réservation de marque commence seulement après le choix d’un véhicule précis.',
-    },
-    ar: {
-      badge: 'مساحة موحدة',
-      title: 'نقطة دخول واحدة على المنفذ 3000 لاكتشاف السوق وعمليات الشركات وإدارة المنصة.',
-      intro:
-        'ما زالت التطبيقات تعمل كواجهات Next.js منفصلة داخلياً، لكن شريط التنقل ينقلك مباشرة إلى كل مساحة عمل من دون الحاجة إلى البحث عن المنافذ.',
-      sectionBadge: 'سوق RentalDriveGo',
-      sectionTitle: 'تصفح أساطيل التأجير المحلية مع الحفاظ على هوية الشركة التي تدير الحجز.',
-      sectionBodyA: 'الاكتشاف يبدأ هنا. الحجز والدفع يتمان على موقع الحجز الخاص بكل شركة.',
-      sectionBodyB: 'لا يصل العميل إلى موقع الحجز الخاص بالشركة إلا بعد اختيار سيارة من أسطول تلك الشركة.',
-      exploreVehicles: 'استكشف السيارات',
-      viewPricing: 'عرض الأسعار',
-      nowServing: 'المتاح الآن',
-      promoTitle: 'الاكتشاف والأسعار وتسجيل دخول المالك وبداية الحجز تبقى كلها داخل واجهة السوق.',
-      promoBody:
-        'تبقى مساحة الشركة وعمليات المنصة متاحتين من شريط التنقل، بينما يبدأ الحجز المرتبط بالعلامة التجارية بعد اختيار المستأجر لسيارة.',
-      customerPaths: 'مسارات العملاء',
-      ownerSignIn: 'دخول المالك',
-      pricing: 'الأسعار',
-      workspaceAreas: 'مساحات العمل',
-      workspaceA: 'مساحة الشركة لإدارة الأسطول والفريق والفوترة والتحليلات.',
-      workspaceB: 'عمليات المنصة للدعم والإشراف على الشركات على مستوى المنصة.',
-      workspaceC: 'الانتقال إلى موقع الحجز الخاص بالشركة يبدأ فقط بعد اختيار سيارة محددة.',
-    },
-  }[language]
-
-  return (
-    <main className={`min-h-screen transition-colors ${
-      theme === 'dark'
-        ? 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.20),transparent_28%),linear-gradient(180deg,#0f1f4a,#112d6e)]'
-        : 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.08),transparent_28%),linear-gradient(180deg,#f5f8ff,white)]'
-    }`}>
-      <div className="shell py-16 sm:py-20">
-        <div className="max-w-4xl">
-          <div className="flex items-center gap-4">
-            <Link href="/" aria-label="RentalDriveGo home">
-              <Image
-                src="/rentalcardrive.png"
-                alt="RentalDriveGo"
-                width={72}
-                height={72}
-                className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
-                  theme === 'dark' ? 'border border-orange-500/40 bg-blue-950' : 'border border-orange-200 bg-white'
-                }`}
-              />
-            </Link>
-            <p className={`text-sm font-semibold uppercase tracking-[0.24em] ${
-              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
-            }`}>
-              {copy.badge}
-            </p>
-          </div>
-          <h1 className={`mt-5 text-4xl font-black tracking-tight sm:text-6xl ${
-            theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
-          }`}>
-            {copy.title}
-          </h1>
-          <p className={`mt-6 max-w-3xl text-lg leading-8 ${
-            theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
-          }`}>
-            {copy.intro}
-          </p>
-        </div>
-
-        <section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
-          theme === 'dark'
-            ? 'border-blue-900 bg-blue-950 shadow-black/20'
-            : 'border-stone-200 bg-white shadow-stone-200/40'
-        }`}>
-          <div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
-            <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
-              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
-            }`}>
-              {copy.sectionBadge}
-            </p>
-            <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-              <div className="max-w-3xl">
-                <h2 className={`text-2xl font-black tracking-tight ${
-                  theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
-                }`}>
-                  {copy.sectionTitle}
-                </h2>
-                <p className={`mt-3 text-sm leading-7 ${
-                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
-                }`}>
-                  {copy.sectionBodyA}
-                </p>
-                <p className={`mt-3 text-sm leading-7 ${
-                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
-                }`}>
-                  {copy.sectionBodyB}
-                </p>
-              </div>
-
-              <div className="flex flex-wrap gap-3">
-                <Link
-                  href="/features"
-                  className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
-                    theme === 'dark'
-                      ? 'bg-orange-400 text-blue-950 hover:bg-orange-300'
-                      : 'bg-blue-950 text-white hover:bg-blue-900/40'
-                  }`}
-                >
-                  {copy.exploreVehicles}
-                </Link>
-                <Link
-                  href="/pricing"
-                  className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
-                    theme === 'dark'
-                      ? 'border-blue-800 text-slate-200 hover:border-blue-600 hover:bg-blue-900/40'
-                      : 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
-                  }`}
-                >
-                  {copy.viewPricing}
-                </Link>
-              </div>
-            </div>
-          </div>
-
-          <div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
-            theme === 'dark' ? 'bg-blue-950' : 'bg-stone-50'
-          }`}>
-            <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#06132e,#0d1b38)] p-8 text-white">
-              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">{copy.nowServing}</p>
-              <h3 className="mt-4 text-3xl font-black tracking-tight">
-                {copy.promoTitle}
-              </h3>
-              <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-200">
-                {copy.promoBody}
-              </p>
-            </div>
-
-            <div className="grid gap-4">
-              <div className={`rounded-[1.5rem] border p-5 ${
-                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
-              }`}>
-                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
-                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
-                }`}>{copy.customerPaths}</p>
-                <div className="mt-4 flex flex-wrap gap-3">
-                  <Link href="/features" className="rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white">
-                    {copy.exploreVehicles}
-                  </Link>
-                  <a className={`rounded-full border px-4 py-2 text-sm font-semibold ${
-                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
-                  }`} href={`${dashboardUrl}/sign-in`}>
-                    {copy.ownerSignIn}
-                  </a>
-                  <Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
-                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
-                  }`} href="/pricing">
-                    {copy.pricing}
-                  </Link>
-                </div>
-              </div>
-
-              <div className={`rounded-[1.5rem] border p-5 ${
-                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
-              }`}>
-                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
-                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
-                }`}>{copy.workspaceAreas}</p>
-                <ul className={`mt-4 space-y-3 text-sm ${
-                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
-                }`}>
-                  <li>{copy.workspaceA}</li>
-                  <li>{copy.workspaceB}</li>
-                  <li>{copy.workspaceC}</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </main>
-  )
-}
diff --git a/apps/homepage/src/components/actions/ActionLink.module.css b/apps/homepage/src/components/actions/ActionLink.module.css
new file mode 100644
index 0000000..eba1e5d
--- /dev/null
+++ b/apps/homepage/src/components/actions/ActionLink.module.css
@@ -0,0 +1,59 @@
+.link {
+  display: inline-flex;
+  min-block-size: 2.75rem;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 650;
+  text-underline-offset: 0.18em;
+}
+.inline {
+  min-block-size: auto;
+  font-weight: inherit;
+  text-decoration-thickness: 0.08em;
+}
+.navigation {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+.navigation:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+.standalone {
+  text-decoration: none;
+}
+.standalone:hover {
+  text-decoration: underline;
+}
+.button-primary,
+.button-conversion {
+  justify-content: center;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-5);
+  border-radius: var(--radius-sm);
+  color: var(--text-inverse);
+  text-decoration: none;
+}
+.button-primary {
+  background: var(--interactive-primary);
+}
+.button-primary:hover {
+  background: var(--interactive-primary-hover);
+  color: var(--text-inverse);
+}
+.button-conversion {
+  background: var(--interactive-conversion);
+}
+.button-conversion:hover {
+  background: var(--interactive-conversion-hover);
+  color: var(--text-inverse);
+}
+.muted {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.disabled {
+  cursor: not-allowed;
+  color: var(--control-disabled-text);
+  text-decoration: none;
+}
diff --git a/apps/homepage/src/components/actions/ActionLink.tsx b/apps/homepage/src/components/actions/ActionLink.tsx
new file mode 100644
index 0000000..982c0bd
--- /dev/null
+++ b/apps/homepage/src/components/actions/ActionLink.tsx
@@ -0,0 +1,76 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './ActionLink.module.css';
+
+type LinkVariant =
+  | 'inline'
+  | 'navigation'
+  | 'standalone'
+  | 'button-primary'
+  | 'button-conversion'
+  | 'muted';
+
+interface ActionLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  href: string;
+  children: ReactNode;
+  variant?: LinkVariant;
+  icon?: ApprovedIconName;
+  external?: boolean;
+  newTab?: boolean;
+  disabledReason?: string;
+}
+
+export function ActionLink({
+  href,
+  children,
+  variant = 'inline',
+  icon,
+  external = false,
+  newTab = false,
+  disabledReason,
+  className,
+  ...props
+}: ActionLinkProps) {
+  if (disabledReason) {
+    return (
+      <span
+        className={classNames(styles.link, styles[variant], styles.disabled, className)}
+        aria-disabled="true"
+        title={disabledReason}
+      >
+        <span>{children}</span>
+        <span className="visually-hidden">: {disabledReason}</span>
+      </span>
+    );
+  }
+  const isExternal = external || /^https?:\/\//.test(href);
+  const trailingIcon = icon ?? (isExternal ? 'external' : undefined);
+  const content = (
+    <>
+      <span>{children}</span>
+      {trailingIcon ? (
+        <Icon
+          name={trailingIcon}
+          size="sm"
+          directionBehavior={
+            trailingIcon === 'chevron-forward' || trailingIcon === 'arrow-forward'
+              ? 'mirror'
+              : 'fixed'
+          }
+        />
+      ) : null}
+      {newTab ? <span className="visually-hidden"> (opens in a new tab)</span> : null}
+    </>
+  );
+  const shared = {
+    className: classNames(styles.link, styles[variant], className),
+    ...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+    ...props,
+  };
+  return (
+    <a href={href} {...shared}>
+      {content}
+    </a>
+  );
+}
diff --git a/apps/homepage/src/components/actions/Button.module.css b/apps/homepage/src/components/actions/Button.module.css
new file mode 100644
index 0000000..43187c3
--- /dev/null
+++ b/apps/homepage/src/components/actions/Button.module.css
@@ -0,0 +1,139 @@
+.button {
+  display: inline-flex;
+  min-block-size: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-weight: 750;
+  line-height: 1.25;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background-color var(--duration-fast) var(--easing-productive),
+    border-color var(--duration-fast) var(--easing-productive),
+    color var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.button:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.small {
+  min-block-size: 2.5rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  font-size: var(--type-label-size);
+}
+.medium {
+  padding-block: var(--space-3);
+  padding-inline: var(--space-5);
+}
+.large {
+  min-block-size: 3.25rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-6);
+  font-size: var(--type-body-large-size);
+}
+.primary {
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+}
+.primary:hover:not(:disabled) {
+  background: var(--interactive-primary-hover);
+}
+.conversion {
+  background: var(--interactive-conversion);
+  color: var(--text-inverse);
+}
+.conversion:hover:not(:disabled) {
+  background: var(--interactive-conversion-hover);
+}
+.secondary {
+  border-color: var(--interactive-primary);
+  background: var(--surface-primary);
+  color: var(--interactive-primary);
+}
+.secondary:hover:not(:disabled) {
+  background: var(--status-info-surface);
+}
+.tertiary {
+  border-color: var(--border-standard);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+.tertiary:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--surface-muted);
+}
+.ghost {
+  background: transparent;
+  color: var(--text-primary);
+}
+.ghost:hover:not(:disabled) {
+  background: var(--surface-muted);
+}
+.destructive {
+  background: var(--interactive-danger);
+  color: var(--text-inverse);
+}
+.destructive:hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+.link {
+  min-block-size: 2.75rem;
+  padding-inline: 0;
+  background: transparent;
+  color: var(--link-default);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+.link:hover:not(:disabled) {
+  color: var(--link-hover);
+}
+.iconOnly {
+  aspect-ratio: 1;
+  padding: var(--space-3);
+}
+.fullWidth {
+  inline-size: 100%;
+}
+.loading {
+  position: relative;
+}
+.spinner {
+  position: absolute;
+  animation: spin 0.9s linear infinite;
+}
+.loadingContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  opacity: 0;
+}
+.label {
+  min-inline-size: 0;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .spinner {
+    animation-duration: 1.8s;
+  }
+}
+@media (forced-colors: active) {
+  .button {
+    border-color: ButtonText;
+  }
+}
diff --git a/apps/homepage/src/components/actions/Button.tsx b/apps/homepage/src/components/actions/Button.tsx
new file mode 100644
index 0000000..126bf14
--- /dev/null
+++ b/apps/homepage/src/components/actions/Button.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import styles from './Button.module.css';
+
+export type ButtonIntent =
+  | 'primary'
+  | 'conversion'
+  | 'secondary'
+  | 'tertiary'
+  | 'ghost'
+  | 'destructive'
+  | 'link';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+interface CommonButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  intent?: ButtonIntent;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+  leadingIcon?: ApprovedIconName;
+  trailingIcon?: ApprovedIconName;
+  children: ReactNode;
+}
+
+interface IconOnlyButtonProps extends Omit<
+  CommonButtonProps,
+  'children' | 'leadingIcon' | 'trailingIcon'
+> {
+  icon: ApprovedIconName;
+  'aria-label': string;
+  children?: never;
+}
+
+export type ButtonProps = CommonButtonProps | IconOnlyButtonProps;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  const {
+    intent = 'primary',
+    size = 'medium',
+    loading = false,
+    fullWidth = false,
+    disabled = false,
+    className,
+    type = 'button',
+    ...rest
+  } = props;
+  const iconOnly = 'icon' in props;
+  const content = iconOnly ? (
+    <Icon name={props.icon} />
+  ) : (
+    <>
+      {props.leadingIcon ? <Icon name={props.leadingIcon} /> : null}
+      <span className={styles.label}>{props.children}</span>
+      {props.trailingIcon ? (
+        <Icon
+          name={props.trailingIcon}
+          directionBehavior={
+            props.trailingIcon === 'arrow-forward' || props.trailingIcon === 'chevron-forward'
+              ? 'mirror'
+              : 'fixed'
+          }
+        />
+      ) : null}
+    </>
+  );
+
+  const nativeProps = { ...rest } as ButtonHTMLAttributes<HTMLButtonElement>;
+  delete (nativeProps as Partial<CommonButtonProps>).leadingIcon;
+  delete (nativeProps as Partial<CommonButtonProps>).trailingIcon;
+  delete (nativeProps as Partial<IconOnlyButtonProps>).icon;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={classNames(
+        styles.button,
+        styles[intent],
+        styles[size],
+        iconOnly && styles.iconOnly,
+        fullWidth && styles.fullWidth,
+        loading && styles.loading,
+        className,
+      )}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      data-loading={loading || undefined}
+      {...nativeProps}
+    >
+      {loading ? <Icon name="spinner" className={styles.spinner} /> : null}
+      <span className={loading ? styles.loadingContent : undefined}>{content}</span>
+    </button>
+  );
+});
diff --git a/apps/homepage/src/components/app-shell/BrandLink.tsx b/apps/homepage/src/components/app-shell/BrandLink.tsx
new file mode 100644
index 0000000..ceebd68
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/BrandLink.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import styles from './SiteHeader.module.css';
+
+export function BrandLink({ locale, label }: { locale: Locale; label: string }) {
+  const pathname = usePathname();
+  return (
+    <a
+      className={styles.brand}
+      href={localizedPath('home', locale)}
+      aria-label={label}
+      aria-current={routeIdFromPathname(pathname) === 'home' ? 'page' : undefined}
+    >
+      <Image
+        src="/rentaldrivego.jpeg"
+        alt=""
+        width={36}
+        height={36}
+        className={styles.mark}
+        priority
+      />
+      <span className={styles.brandName}>RentalDriveGo</span>
+    </a>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/Controls.module.css b/apps/homepage/src/components/app-shell/Controls.module.css
new file mode 100644
index 0000000..c03a3b0
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/Controls.module.css
@@ -0,0 +1,38 @@
+.field {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.label {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  font-weight: 700;
+}
+
+.select {
+  min-block-size: var(--size-touch-min);
+  min-inline-size: 7.25rem;
+  max-inline-size: 100%;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3) var(--space-8);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+
+.select:hover {
+  border-color: var(--interactive-primary);
+}
+
+.compactLabel {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/apps/homepage/src/components/app-shell/DisabledAction.tsx b/apps/homepage/src/components/app-shell/DisabledAction.tsx
new file mode 100644
index 0000000..8650f92
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/DisabledAction.tsx
@@ -0,0 +1,29 @@
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import styles from './SiteHeader.module.css';
+
+interface DisabledActionProps {
+  label: string;
+  reason: string;
+  pendingLabel?: string;
+  conversion?: boolean;
+}
+
+export function DisabledAction({
+  label,
+  reason,
+  pendingLabel,
+  conversion = false,
+}: DisabledActionProps) {
+  return (
+    <span
+      className={conversion ? styles.conversionDisabled : styles.actionDisabled}
+      role="link"
+      aria-disabled="true"
+      aria-label={`${label}. ${reason}`}
+      title={reason}
+    >
+      <span>{label}</span>
+      {pendingLabel ? <StatusBadge>{pendingLabel}</StatusBadge> : null}
+    </span>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/HeaderNavigation.tsx b/apps/homepage/src/components/app-shell/HeaderNavigation.tsx
new file mode 100644
index 0000000..347851d
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/HeaderNavigation.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import styles from './SiteHeader.module.css';
+
+export type HeaderNavId = 'product' | 'workflow' | 'modules' | 'pricing' | 'faq';
+
+interface HeaderNavigationProps {
+  locale: Locale;
+  label: string;
+  labels: Record<HeaderNavId, string>;
+  onNavigate?: () => void;
+  mobile?: boolean;
+}
+
+const navigationIds: HeaderNavId[] = ['product', 'workflow', 'modules', 'pricing', 'faq'];
+
+export function HeaderNavigation({
+  locale,
+  label,
+  labels,
+  onNavigate,
+  mobile = false,
+}: HeaderNavigationProps) {
+  const pathname = usePathname();
+  const currentRoute = routeIdFromPathname(pathname);
+  const [currentHash, setCurrentHash] = useState('');
+
+  useEffect(() => {
+    const updateHash = () => setCurrentHash(window.location.hash.replace(/^#/, ''));
+    updateHash();
+    window.addEventListener('hashchange', updateHash);
+    return () => window.removeEventListener('hashchange', updateHash);
+  }, []);
+
+  const home = localizedPath('home', locale);
+
+  return (
+    <nav aria-label={label} className={mobile ? styles.drawerNavigation : styles.navigation}>
+      <ul>
+        {navigationIds.map((id) => (
+          <li key={id}>
+            <a
+              href={`${home}#${id}`}
+              aria-current={currentRoute === 'home' && currentHash === id ? 'location' : undefined}
+              onClick={onNavigate}
+            >
+              {labels[id]}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/LocaleSelector.tsx b/apps/homepage/src/components/app-shell/LocaleSelector.tsx
new file mode 100644
index 0000000..197d2e5
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/LocaleSelector.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { persistLocale } from '@/lib/localization/client';
+import {
+  localeSwitchUrl,
+  locales,
+  routeIdFromPathname,
+  type Locale,
+} from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import styles from './Controls.module.css';
+
+interface LocaleSelectorProps {
+  currentLocale: Locale;
+  label: string;
+  localeNames: Record<Locale, string>;
+  compact?: boolean;
+}
+
+export function LocaleSelector({
+  currentLocale,
+  label,
+  localeNames,
+  compact = false,
+}: LocaleSelectorProps) {
+  const pathname = usePathname();
+  const routeId = routeIdFromPathname(pathname) ?? 'home';
+
+  return (
+    <label className={styles.field}>
+      <span className={compact ? styles.compactLabel : styles.label}>{label}</span>
+      <select
+        className={styles.select}
+        aria-label={label}
+        value={currentLocale}
+        onChange={(event) => {
+          const targetLocale = event.target.value as Locale;
+          persistLocale(targetLocale);
+          window.location.assign(
+            localeSwitchUrl(new URL(window.location.href), targetLocale, routeId),
+          );
+        }}
+      >
+        {locales.map((locale) => (
+          <option key={locale} value={locale}>
+            {localeNames[locale]}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/LocalizedLoading.tsx b/apps/homepage/src/components/app-shell/LocalizedLoading.tsx
new file mode 100644
index 0000000..5939538
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/LocalizedLoading.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { useParams } from 'next/navigation';
+import { LoadingSkeleton, StateShell } from './StateShell';
+
+export function LocalizedLoading() {
+  const params = useParams<{ locale?: string }>();
+  const messages = getClientShellMessages(params?.locale);
+  return (
+    <StateShell title={messages.states.loadingTitle} body={messages.states.loadingBody} status>
+      <LoadingSkeleton />
+    </StateShell>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/LocalizedNotFound.tsx b/apps/homepage/src/components/app-shell/LocalizedNotFound.tsx
new file mode 100644
index 0000000..9c74d22
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/LocalizedNotFound.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { isLocale, localizedPath } from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import { StateAction, StateActions, StateShell } from './StateShell';
+
+export function LocalizedNotFound() {
+  const pathname = usePathname();
+  const localeValue = pathname.split('/').filter(Boolean)[0];
+  const locale = isLocale(localeValue) ? localeValue : 'en';
+  const messages = getClientShellMessages(locale);
+  return (
+    <StateShell title={messages.states.notFoundTitle} body={messages.states.notFoundBody}>
+      <StateActions>
+        <StateAction href={localizedPath('home', locale)}>{messages.states.backHome}</StateAction>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/MobileNavigation.tsx b/apps/homepage/src/components/app-shell/MobileNavigation.tsx
new file mode 100644
index 0000000..eea8f58
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/MobileNavigation.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import { ActionLink } from '@/components/actions/ActionLink';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import type { ShellMessages } from '@/lib/localization/messages';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ThemePreference } from '@/lib/theme/config';
+import { useEffect, useRef, useState } from 'react';
+import { HeaderNavigation } from './HeaderNavigation';
+import { LocaleSelector } from './LocaleSelector';
+import styles from './SiteHeader.module.css';
+import { ThemeSelector } from './ThemeSelector';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface MobileNavigationProps {
+  locale: Locale;
+  messages: ShellMessages;
+  themePreference: ThemePreference;
+  demoEnabled: boolean;
+}
+
+export function MobileNavigation({
+  locale,
+  messages,
+  themePreference,
+  demoEnabled,
+}: MobileNavigationProps) {
+  const [open, setOpen] = useState(false);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (open && !dialog.open) {
+      dialog.showModal();
+      document.body.dataset.navigationOpen = 'true';
+      closeRef.current?.focus();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+
+    return () => {
+      delete document.body.dataset.navigationOpen;
+    };
+  }, [open]);
+
+  const close = () => {
+    dialogRef.current?.close();
+    setOpen(false);
+    delete document.body.dataset.navigationOpen;
+    window.requestAnimationFrame(() => triggerRef.current?.focus());
+  };
+
+  return (
+    <div className={styles.mobileNavigation}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={styles.menuButton}
+        aria-label={messages.header.menuOpen}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+      >
+        <span aria-hidden="true" className={styles.menuIcon}>
+          <span />
+          <span />
+          <span />
+        </span>
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        className={styles.drawer}
+        aria-label={messages.header.navigationLabel}
+        onClose={() => {
+          setOpen(false);
+          delete document.body.dataset.navigationOpen;
+        }}
+        onCancel={(event) => {
+          event.preventDefault();
+          close();
+        }}
+      >
+        <div className={styles.drawerPanel}>
+          <div className={styles.drawerHeader}>
+            <strong>RentalDriveGo</strong>
+            <button
+              ref={closeRef}
+              type="button"
+              className={styles.closeButton}
+              aria-label={messages.header.menuClose}
+              onClick={close}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <HeaderNavigation
+            locale={locale}
+            label={messages.header.navigationLabel}
+            labels={messages.header.nav}
+            mobile
+            onNavigate={close}
+          />
+
+          <div
+            className={styles.drawerControls}
+            role="group"
+            aria-label={messages.header.controlsLabel}
+          >
+            <LocaleSelector
+              currentLocale={locale}
+              label={messages.controls.language}
+              localeNames={messages.controls.localeNames}
+            />
+            <ThemeSelector
+              initialPreference={themePreference}
+              label={messages.controls.theme}
+              statusTemplate={messages.controls.themeStatus}
+              optionLabels={messages.controls.themes}
+            />
+          </div>
+
+          <div className={styles.drawerActions}>
+            <ActionLink href={signInUrl(locale)} variant="button-primary">
+              {messages.header.login}
+            </ActionLink>
+            <DemoTrigger
+              label={messages.header.demo}
+              source="mobile-header"
+              fullWidth
+              disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+            />
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/SiteFooter.module.css b/apps/homepage/src/components/app-shell/SiteFooter.module.css
new file mode 100644
index 0000000..1ebad0a
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/SiteFooter.module.css
@@ -0,0 +1,118 @@
+.footer {
+  border-block-start: 1px solid var(--border-standard);
+  background: var(--surface-primary);
+}
+
+.inner {
+  display: grid;
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-block: var(--space-12) var(--space-6);
+  padding-inline: var(--layout-gutter);
+  gap: var(--space-10);
+}
+
+.brandColumn {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  max-inline-size: 32rem;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 800;
+}
+
+.mark {
+  display: inline-grid;
+  min-inline-size: var(--size-touch-min);
+  min-block-size: var(--size-touch-min);
+  padding-inline: var(--space-2);
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-size: var(--type-caption-size);
+}
+
+.tagline,
+.releaseNotice {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+  gap: var(--space-8);
+}
+
+.group h2 {
+  margin-block-end: var(--space-3);
+  font-size: var(--type-label-size);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+}
+
+html[dir='rtl'] .group h2 {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.group ul {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-2);
+  list-style: none;
+}
+
+.group a,
+.pendingItem {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.group a:hover {
+  color: var(--interactive-primary);
+  text-decoration: underline;
+}
+
+.pendingItem {
+  flex-wrap: wrap;
+  opacity: var(--opacity-disabled);
+}
+
+.legalLink {
+  flex-wrap: wrap;
+}
+
+.bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block-start: var(--space-6);
+  border-block-start: 1px solid var(--border-standard);
+  color: var(--text-subdued);
+  font-size: var(--type-caption-size);
+}
+
+@media (min-width: 768px) {
+  .inner {
+    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 2fr);
+  }
+
+  .bottom {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/apps/homepage/src/components/app-shell/SiteFooter.tsx b/apps/homepage/src/components/app-shell/SiteFooter.tsx
new file mode 100644
index 0000000..213b7f8
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/SiteFooter.tsx
@@ -0,0 +1,161 @@
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ShellMessages } from '@/lib/localization/messages';
+import styles from './SiteFooter.module.css';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface SiteFooterProps {
+  locale: Locale;
+  messages: ShellMessages;
+  demoEnabled: boolean;
+}
+
+function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
+  return <a href={`${localizedPath('home', locale)}#${hash}`}>{children}</a>;
+}
+
+function PendingRouteLink({
+  locale,
+  routeId,
+  label,
+  pending,
+}: {
+  locale: Locale;
+  routeId: 'sign-in' | 'forgot-password' | 'privacy' | 'terms' | 'accessibility';
+  label: string;
+  pending: string;
+}) {
+  return (
+    <a className={styles.legalLink} href={localizedPath(routeId, locale)}>
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </a>
+  );
+}
+
+function PendingItem({ label, pending }: { label: string; pending: string }) {
+  return (
+    <span className={styles.pendingItem} aria-disabled="true">
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </span>
+  );
+}
+
+export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
+  const footer = messages.footer;
+  const year = new Date().getUTCFullYear();
+
+  return (
+    <footer className={styles.footer} aria-label={footer.landmarkLabel}>
+      <div className={styles.inner}>
+        <div className={styles.brandColumn}>
+          <div className={styles.brand}>
+            <span aria-hidden="true" className={styles.mark}>
+              RDG
+            </span>
+            <span>RentalDriveGo</span>
+          </div>
+          <p className={styles.tagline}>{footer.tagline}</p>
+          <p className={styles.releaseNotice}>{footer.releaseNotice}</p>
+        </div>
+
+        <div className={styles.groups}>
+          <section className={styles.group} aria-labelledby="footer-product">
+            <h2 id="footer-product">{footer.groups.product}</h2>
+            <ul>
+              <li>
+                <HashLink locale={locale} hash="workflow">
+                  {footer.links.workflow}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="modules">
+                  {footer.links.modules}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="pricing">
+                  {footer.links.pricing}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="faq">
+                  {footer.links.faq}
+                </HashLink>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-company">
+            <h2 id="footer-company">{footer.groups.company}</h2>
+            <ul>
+              <li>
+                <PendingItem label={footer.links.contact} pending={footer.pending} />
+              </li>
+              <li>
+                <DemoTrigger
+                  label={footer.links.demo}
+                  source="footer"
+                  size="small"
+                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+                />
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-account">
+            <h2 id="footer-account">{footer.groups.account}</h2>
+            <ul>
+              <li>
+                <a href={signInUrl(locale)}>
+                  {footer.links.login}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-legal">
+            <h2 id="footer-legal">{footer.groups.legal}</h2>
+            <ul>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="privacy"
+                  label={footer.links.privacy}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="terms"
+                  label={footer.links.terms}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="accessibility"
+                  label={footer.links.accessibility}
+                  pending={footer.pending}
+                />
+              </li>
+            </ul>
+          </section>
+        </div>
+
+        <div className={styles.bottom}>
+          <span>
+            {footer.copyrightPrefix} {year} RentalDriveGo
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/SiteHeader.module.css b/apps/homepage/src/components/app-shell/SiteHeader.module.css
new file mode 100644
index 0000000..1db29d7
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/SiteHeader.module.css
@@ -0,0 +1,303 @@
+.header {
+  position: sticky;
+  z-index: var(--layer-sticky);
+  inset-block-start: 0;
+  border-block-end: 1px solid var(--border-standard);
+  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
+  box-shadow: var(--shadow-subtle);
+  backdrop-filter: blur(var(--space-3));
+}
+
+.inner {
+  display: grid;
+  min-block-size: var(--header-min-block-size);
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-inline: var(--layout-gutter);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-5);
+}
+
+.brand {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 800;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.mark {
+  inline-size: 36px;
+  block-size: 36px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+
+.navigation ul,
+.drawerNavigation ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navigation ul {
+  justify-content: center;
+  gap: var(--space-1);
+}
+
+.navigation a,
+.drawerNavigation a {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.navigation a {
+  padding-inline: var(--space-3);
+}
+
+.navigation a:hover,
+.navigation a[aria-current],
+.drawerNavigation a:hover,
+.drawerNavigation a[aria-current] {
+  background: var(--surface-muted);
+  color: var(--interactive-primary);
+}
+
+.desktopControls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.actionDisabled,
+.conversionDisabled {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  background: var(--control-disabled-surface);
+  color: var(--control-disabled-text);
+  font-weight: 700;
+  opacity: var(--opacity-disabled);
+  white-space: nowrap;
+}
+
+.actionLink {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 700;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.actionLink:hover {
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  border-color: var(--interactive-primary);
+}
+
+.conversionDisabled {
+  border-color: var(--interactive-conversion);
+}
+
+.mobileActions,
+.mobileNavigation {
+  display: none;
+}
+
+.menuButton,
+.closeButton {
+  display: inline-grid;
+  min-inline-size: var(--size-touch-min);
+  min-block-size: var(--size-touch-min);
+  place-items: center;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+
+.menuIcon {
+  display: grid;
+  inline-size: var(--space-5);
+  gap: var(--space-1);
+}
+
+.menuIcon span {
+  display: block;
+  block-size: 2px;
+  border-radius: var(--radius-pill);
+  background: currentColor;
+}
+
+.drawer {
+  inline-size: min(88vw, 384px);
+  max-inline-size: none;
+  block-size: 100dvh;
+  max-block-size: none;
+  margin-block: 0;
+  margin-inline: 0 auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+}
+
+html[dir='rtl'] .drawer {
+  margin-inline: auto 0;
+}
+
+.drawer::backdrop {
+  background: var(--overlay-scrim);
+}
+
+.drawerPanel {
+  display: flex;
+  block-size: 100%;
+  flex-direction: column;
+  gap: var(--space-6);
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+
+.drawerHeader {
+  display: flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.closeButton {
+  font-size: var(--type-heading-3-size);
+  line-height: 1;
+}
+
+.drawerNavigation ul {
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.drawerNavigation a {
+  inline-size: 100%;
+  padding-inline: var(--space-3);
+}
+
+.drawerControls,
+.drawerActions {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.drawerActions {
+  margin-block-start: auto;
+}
+
+/*
+ * Preserve the full navigation on laptop and tablet landscape widths.
+ * Only the secondary controls collapse into the menu until the viewport
+ * becomes too narrow for the five primary destinations.
+ */
+@media (min-width: 900px) and (max-width: 1279px) {
+  .brandName {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .desktopControls {
+    display: none;
+  }
+
+  .mobileActions,
+  .mobileNavigation {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}
+
+@media (max-width: 899px) {
+  .inner {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .desktopNavigation,
+  .desktopControls {
+    display: none;
+  }
+
+  .mobileActions,
+  .mobileNavigation {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}
+
+@media (max-width: 559px) {
+  .brandName {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .mobileActions > .conversionDisabled {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .header {
+    backdrop-filter: none;
+  }
+
+  .mark,
+  .actionDisabled,
+  .conversionDisabled,
+  .menuButton,
+  .closeButton {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (max-width: 559px) {
+  .mobileDemoTrigger {
+    display: none;
+  }
+}
diff --git a/apps/homepage/src/components/app-shell/SiteHeader.tsx b/apps/homepage/src/components/app-shell/SiteHeader.tsx
new file mode 100644
index 0000000..2d65917
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/SiteHeader.tsx
@@ -0,0 +1,85 @@
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ShellMessages } from '@/lib/localization/messages';
+import type { ThemePreference } from '@/lib/theme/config';
+import { ActionLink } from '@/components/actions/ActionLink';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { BrandLink } from './BrandLink';
+import { HeaderNavigation } from './HeaderNavigation';
+import { LocaleSelector } from './LocaleSelector';
+import { MobileNavigation } from './MobileNavigation';
+import styles from './SiteHeader.module.css';
+import { ThemeSelector } from './ThemeSelector';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface SiteHeaderProps {
+  locale: Locale;
+  messages: ShellMessages;
+  themePreference: ThemePreference;
+  demoEnabled: boolean;
+}
+
+export function SiteHeader({ locale, messages, themePreference, demoEnabled }: SiteHeaderProps) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <BrandLink locale={locale} label={messages.brandLabel} />
+
+        <div className={styles.desktopNavigation}>
+          <HeaderNavigation
+            locale={locale}
+            label={messages.header.navigationLabel}
+            labels={messages.header.nav}
+          />
+        </div>
+
+        <div
+          className={styles.desktopControls}
+          role="group"
+          aria-label={messages.header.controlsLabel}
+        >
+          <LocaleSelector
+            currentLocale={locale}
+            label={messages.controls.language}
+            localeNames={messages.controls.localeNames}
+            compact
+          />
+          <ThemeSelector
+            initialPreference={themePreference}
+            label={messages.controls.theme}
+            statusTemplate={messages.controls.themeStatus}
+            optionLabels={messages.controls.themes}
+            compact
+          />
+          <ActionLink href={signInUrl(locale)} variant="button-primary">
+            {messages.header.login}
+          </ActionLink>
+          <DemoTrigger
+            label={messages.header.demo}
+            source="header"
+            size="small"
+            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+          />
+        </div>
+
+        <div className={styles.mobileActions}>
+          <DemoTrigger
+            label={messages.header.demo}
+            source="mobile-header"
+            size="small"
+            className={styles.mobileDemoTrigger}
+            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+          />
+          <MobileNavigation
+            locale={locale}
+            messages={messages}
+            themePreference={themePreference}
+            demoEnabled={demoEnabled}
+          />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/StateShell.module.css b/apps/homepage/src/components/app-shell/StateShell.module.css
new file mode 100644
index 0000000..e9cc77a
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/StateShell.module.css
@@ -0,0 +1,104 @@
+.main {
+  display: grid;
+  min-block-size: calc(100dvh - var(--header-min-block-size));
+  place-items: center;
+  padding-block: var(--section-space);
+  padding-inline: var(--layout-gutter);
+}
+
+.panel {
+  display: grid;
+  inline-size: min(100%, var(--container-reading));
+  gap: var(--space-5);
+  padding: clamp(var(--space-6), 6vw, var(--space-12));
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-card);
+  text-align: start;
+}
+
+.panel h1 {
+  margin: 0;
+  font-size: var(--type-heading-1-size);
+}
+
+.panel p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-body-large-size);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.action {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--interactive-primary);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-4);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.action:hover {
+  background: var(--interactive-primary-hover);
+  color: var(--text-inverse);
+}
+
+.skeleton {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.skeleton span {
+  display: block;
+  block-size: var(--space-4);
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base),
+    var(--skeleton-highlight),
+    var(--skeleton-base)
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shift 1.4s var(--easing-standard) infinite;
+}
+
+.skeleton span:first-child {
+  inline-size: 64%;
+}
+
+.skeleton span:last-child {
+  inline-size: 82%;
+}
+
+@keyframes skeleton-shift {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton span {
+    animation: none;
+  }
+}
+
+.content {
+  display: grid;
+  gap: var(--space-4);
+}
diff --git a/apps/homepage/src/components/app-shell/StateShell.tsx b/apps/homepage/src/components/app-shell/StateShell.tsx
new file mode 100644
index 0000000..c542313
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/StateShell.tsx
@@ -0,0 +1,55 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import styles from './StateShell.module.css';
+
+interface StateShellProps {
+  title: string;
+  body: string;
+  children?: ReactNode;
+  status?: boolean;
+}
+
+export function StateShell({ title, body, children, status = false }: StateShellProps) {
+  return (
+    <main id="main-content" className={styles.main} tabIndex={-1}>
+      <section
+        className={styles.panel}
+        role={status ? 'status' : undefined}
+        aria-live={status ? 'polite' : undefined}
+      >
+        <h1>{title}</h1>
+        <p>{body}</p>
+        {children ? <div className={styles.content}>{children}</div> : null}
+      </section>
+    </main>
+  );
+}
+
+export function StateActions({ children }: { children: ReactNode }) {
+  return <div className={styles.actions}>{children}</div>;
+}
+
+export function StateAction({ children, ...props }: ComponentPropsWithoutRef<'a'>) {
+  return (
+    <a className={styles.action} {...props}>
+      {children}
+    </a>
+  );
+}
+
+export function StateButton({ children, ...props }: ComponentPropsWithoutRef<'button'>) {
+  return (
+    <button className={styles.action} type="button" {...props}>
+      {children}
+    </button>
+  );
+}
+
+export function LoadingSkeleton() {
+  return (
+    <div className={styles.skeleton} aria-hidden="true">
+      <span />
+      <span />
+      <span />
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/app-shell/ThemeController.tsx b/apps/homepage/src/components/app-shell/ThemeController.tsx
new file mode 100644
index 0000000..f801100
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/ThemeController.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { applyTheme, currentThemePreference } from '@/lib/theme/client';
+import { themeStorageKey } from '@/lib/theme/config';
+import { useEffect } from 'react';
+
+export function ThemeController() {
+  useEffect(() => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleSystemChange = () => {
+      if (currentThemePreference() === 'system') applyTheme('system');
+    };
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === themeStorageKey && event.newValue) {
+        const preference = event.newValue;
+        if (preference === 'light' || preference === 'dark' || preference === 'system') {
+          applyTheme(preference);
+        }
+      }
+    };
+
+    media.addEventListener('change', handleSystemChange);
+    window.addEventListener('storage', handleStorage);
+    return () => {
+      media.removeEventListener('change', handleSystemChange);
+      window.removeEventListener('storage', handleStorage);
+    };
+  }, []);
+
+  return null;
+}
diff --git a/apps/homepage/src/components/app-shell/ThemeSelector.tsx b/apps/homepage/src/components/app-shell/ThemeSelector.tsx
new file mode 100644
index 0000000..904dfdb
--- /dev/null
+++ b/apps/homepage/src/components/app-shell/ThemeSelector.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { persistTheme, themePreferenceEvent } from '@/lib/theme/client';
+import { themePreferences, themeStorageKey, type ThemePreference } from '@/lib/theme/config';
+import { useEffect, useId, useState } from 'react';
+import styles from './Controls.module.css';
+
+interface ThemeSelectorProps {
+  initialPreference: ThemePreference;
+  label: string;
+  statusTemplate: string;
+  optionLabels: Record<ThemePreference, string>;
+  compact?: boolean;
+}
+
+export function ThemeSelector({
+  initialPreference,
+  label,
+  statusTemplate,
+  optionLabels,
+  compact = false,
+}: ThemeSelectorProps) {
+  const [preference, setPreference] = useState<ThemePreference>(initialPreference);
+  const statusId = useId();
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (
+        event.key === themeStorageKey &&
+        (event.newValue === 'light' || event.newValue === 'dark' || event.newValue === 'system')
+      ) {
+        setPreference(event.newValue);
+      }
+    };
+    const handlePreference = (event: Event) => {
+      const preferenceEvent = event as CustomEvent<ThemePreference>;
+      setPreference(preferenceEvent.detail);
+    };
+    window.addEventListener('storage', handleStorage);
+    window.addEventListener(themePreferenceEvent, handlePreference);
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+      window.removeEventListener(themePreferenceEvent, handlePreference);
+    };
+  }, []);
+
+  const status = statusTemplate.replace('{value}', optionLabels[preference]);
+
+  return (
+    <label className={styles.field}>
+      <span className={compact ? styles.compactLabel : styles.label}>{label}</span>
+      <select
+        className={styles.select}
+        aria-label={label}
+        aria-describedby={statusId}
+        value={preference}
+        onChange={(event) => {
+          const nextPreference = event.target.value as ThemePreference;
+          setPreference(nextPreference);
+          persistTheme(nextPreference);
+        }}
+      >
+        {themePreferences.map((option) => (
+          <option key={option} value={option}>
+            {optionLabels[option]}
+          </option>
+        ))}
+      </select>
+      <span id={statusId} className="visually-hidden" aria-live="polite">
+        {status}
+      </span>
+    </label>
+  );
+}
diff --git a/apps/homepage/src/components/auth/AuthShell.tsx b/apps/homepage/src/components/auth/AuthShell.tsx
new file mode 100644
index 0000000..c46f969
--- /dev/null
+++ b/apps/homepage/src/components/auth/AuthShell.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import Image from 'next/image'
+import type { ReactNode } from 'react'
+
+interface AuthShellProps {
+  locale: Locale
+  title: string
+  subtitle?: string
+  children: ReactNode
+}
+
+export function AuthShell({ locale, title, subtitle, children }: AuthShellProps) {
+  return (
+    <main
+      id="main-content"
+      tabIndex={-1}
+      style={{
+        display: 'flex',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem 1rem',
+        minHeight: 'calc(100vh - 80px)',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '28rem' }}>
+        <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
+          <a href={localizedPath('home', locale)}>
+            <Image
+              src="/rentaldrivego.jpeg"
+              alt="RentalDriveGo"
+              width={96}
+              height={96}
+              priority
+              style={{
+                borderRadius: '1.5rem',
+                border: '1px solid var(--color-border)',
+                background: 'var(--color-surface)',
+                padding: '0.375rem',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+              }}
+            />
+          </a>
+          <p
+            style={{
+              marginTop: '1rem',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              textTransform: 'uppercase',
+              letterSpacing: '0.28em',
+              color: 'var(--color-accent)',
+            }}
+          >
+            RentalDriveGo
+          </p>
+          <h1
+            style={{
+              marginTop: '0.5rem',
+              fontSize: '1.75rem',
+              fontWeight: 800,
+              letterSpacing: '-0.03em',
+              color: 'var(--color-heading)',
+            }}
+          >
+            {title}
+          </h1>
+          {subtitle ? (
+            <p
+              style={{
+                marginTop: '0.5rem',
+                fontSize: '0.875rem',
+                color: 'var(--color-text-secondary)',
+              }}
+            >
+              {subtitle}
+            </p>
+          ) : null}
+        </div>
+
+        <section
+          style={{
+            borderRadius: '2rem',
+            border: '1px solid var(--color-border)',
+            background: 'var(--color-surface)',
+            padding: '2rem',
+            boxShadow: '0 30px 80px rgba(28,25,23,0.06)',
+          }}
+        >
+          {children}
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/homepage/src/components/auth/ForgotPasswordForm.tsx b/apps/homepage/src/components/auth/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..e61ab51
--- /dev/null
+++ b/apps/homepage/src/components/auth/ForgotPasswordForm.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+import { Button } from '@/components/actions/Button'
+import { TextInput } from '@/components/forms/TextInput'
+import { FormField } from '@/components/forms/FormField'
+import { AuthShell } from '@/components/auth/AuthShell'
+import { API_BASE } from '@/lib/api'
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import { useState } from 'react'
+
+interface Dict {
+  title: string
+  subtitle: string
+  email: string
+  emailPlaceholder: string
+  submit: string
+  submitting: string
+  backToLogin: string
+  successTitle: string
+  successBody: string
+  error: string
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Forgot your password?',
+    subtitle: "Enter your work email and we'll send you a reset link.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Send reset link',
+    submitting: 'Sending…',
+    backToLogin: 'Back to sign in',
+    successTitle: 'Check your email',
+    successBody: 'If that email is registered, a reset link has been sent. It expires in 60 minutes.',
+    error: 'Something went wrong. Please try again.',
+  },
+  fr: {
+    title: 'Mot de passe oublié ?',
+    subtitle: "Entrez votre email professionnel et nous vous enverrons un lien de réinitialisation.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Envoyer le lien',
+    submitting: 'Envoi…',
+    backToLogin: 'Retour à la connexion',
+    successTitle: 'Vérifiez votre email',
+    successBody: "Si cet email est enregistré, un lien de réinitialisation a été envoyé. Il expire dans 60 minutes.",
+    error: 'Une erreur est survenue. Veuillez réessayer.',
+  },
+  ar: {
+    title: 'نسيت كلمة المرور؟',
+    subtitle: 'أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.',
+    email: 'البريد الإلكتروني',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'إرسال رابط إعادة التعيين',
+    submitting: 'جارٍ الإرسال…',
+    backToLogin: 'العودة إلى تسجيل الدخول',
+    successTitle: 'تحقق من بريدك الإلكتروني',
+    successBody: 'إذا كان البريد الإلكتروني مسجلاً، فقد تم إرسال رابط إعادة التعيين. تنتهي صلاحيته خلال 60 دقيقة.',
+    error: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+  },
+}
+
+export function ForgotPasswordForm({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      const [empRes, adminRes] = await Promise.all([
+        fetch(`${API_BASE}/auth/employee/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+        fetch(`${API_BASE}/admin/auth/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+      ])
+      if (!empRes.ok && !adminRes.ok) throw new Error()
+      setSent(true)
+    } catch {
+      setError(dict.error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const signInHref = localizedPath('sign-in', locale)
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      {sent ? (
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              margin: '0 auto 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '3.5rem',
+              height: '3.5rem',
+              borderRadius: '50%',
+              background: 'var(--color-success-bg, #ecfdf5)',
+            }}
+          >
+            <svg
+              style={{ width: '1.75rem', height: '1.75rem', color: 'var(--color-success-text, #059669)' }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+            {dict.successTitle}
+          </h2>
+          <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+            {dict.successBody}
+          </p>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          {error ? (
+            <div
+              style={{
+                borderRadius: '1.5rem',
+                border: '1px solid var(--color-error-border, #fecaca)',
+                background: 'var(--color-error-bg, #fef2f2)',
+                padding: '0.75rem 1rem',
+                fontSize: '0.875rem',
+                color: 'var(--color-error-text, #b91c1c)',
+              }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <FormField id="forgot-email" label={dict.email} required>
+            <TextInput
+              id="forgot-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={dict.emailPlaceholder}
+              autoComplete="email"
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.submitting : dict.submit}
+          </Button>
+        </form>
+      )}
+
+      <div
+        style={{
+          marginTop: '1.5rem',
+          borderTop: '1px solid var(--color-border)',
+          paddingTop: '1.5rem',
+          textAlign: 'center',
+          fontSize: '0.875rem',
+        }}
+      >
+        <a
+          href={signInHref}
+          style={{
+            fontWeight: 600,
+            color: 'var(--color-heading)',
+            textDecoration: 'underline',
+            textUnderlineOffset: '4px',
+          }}
+        >
+          {dict.backToLogin}
+        </a>
+      </div>
+    </AuthShell>
+  )
+}
diff --git a/apps/homepage/src/components/auth/ResetPasswordForm.tsx b/apps/homepage/src/components/auth/ResetPasswordForm.tsx
new file mode 100644
index 0000000..5c64879
--- /dev/null
+++ b/apps/homepage/src/components/auth/ResetPasswordForm.tsx
@@ -0,0 +1,320 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { FormField } from '@/components/forms/FormField';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { API_BASE } from '@/lib/api';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import { useSearchParams } from 'next/navigation';
+import { Suspense, useState } from 'react';
+
+interface Dict {
+  title: string;
+  subtitle: string;
+  newPassword: string;
+  confirmPassword: string;
+  submit: string;
+  submitting: string;
+  backToLogin: string;
+  successTitle: string;
+  successBody: string;
+  signIn: string;
+  errorMismatch: string;
+  errorShort: string;
+  errorInvalidToken: string;
+  errorGeneric: string;
+  noToken: string;
+  requestNew: string;
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Set new password',
+    subtitle: 'Choose a strong password for your account.',
+    newPassword: 'New password',
+    confirmPassword: 'Confirm password',
+    submit: 'Reset password',
+    submitting: 'Resetting…',
+    backToLogin: 'Back to sign in',
+    successTitle: 'Password updated',
+    successBody: 'Your password has been reset. You can now sign in with your new password.',
+    signIn: 'Sign in',
+    errorMismatch: 'Passwords do not match.',
+    errorShort: 'Password must be at least 8 characters.',
+    errorInvalidToken: 'This reset link is invalid or has expired. Please request a new one.',
+    errorGeneric: 'Something went wrong. Please try again.',
+    noToken: 'No reset token found. Please request a new password reset.',
+    requestNew: 'Request new reset link',
+  },
+  fr: {
+    title: 'Nouveau mot de passe',
+    subtitle: 'Choisissez un mot de passe fort pour votre compte.',
+    newPassword: 'Nouveau mot de passe',
+    confirmPassword: 'Confirmer le mot de passe',
+    submit: 'Réinitialiser',
+    submitting: 'Traitement…',
+    backToLogin: 'Retour à la connexion',
+    successTitle: 'Mot de passe mis à jour',
+    successBody: 'Votre mot de passe a été réinitialisé. Vous pouvez maintenant vous connecter.',
+    signIn: 'Se connecter',
+    errorMismatch: 'Les mots de passe ne correspondent pas.',
+    errorShort: 'Le mot de passe doit contenir au moins 8 caractères.',
+    errorInvalidToken: 'Ce lien est invalide ou a expiré. Veuillez en demander un nouveau.',
+    errorGeneric: 'Une erreur est survenue. Veuillez réessayer.',
+    noToken: 'Aucun jeton de réinitialisation trouvé. Veuillez demander un nouveau lien.',
+    requestNew: 'Demander un nouveau lien',
+  },
+  ar: {
+    title: 'تعيين كلمة مرور جديدة',
+    subtitle: 'اختر كلمة مرور قوية لحسابك.',
+    newPassword: 'كلمة المرور الجديدة',
+    confirmPassword: 'تأكيد كلمة المرور',
+    submit: 'إعادة تعيين',
+    submitting: 'جارٍ المعالجة…',
+    backToLogin: 'العودة إلى تسجيل الدخول',
+    successTitle: 'تم تحديث كلمة المرور',
+    successBody: 'تم إعادة تعيين كلمة المرور. يمكنك الآن تسجيل الدخول.',
+    signIn: 'تسجيل الدخول',
+    errorMismatch: 'كلمتا المرور غير متطابقتين.',
+    errorShort: 'يجب أن تتكون كلمة المرور من 8 أحرف على الأقل.',
+    errorInvalidToken: 'رابط إعادة التعيين غير صالح أو منتهي الصلاحية.',
+    errorGeneric: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+    noToken: 'لم يتم العثور على رمز إعادة التعيين. يرجى طلب رابط جديد.',
+    requestNew: 'طلب رابط جديد',
+  },
+};
+
+function ResetPasswordContent({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict;
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (password.length < 8) {
+      setError(dict.errorShort);
+      return;
+    }
+    if (password !== confirm) {
+      setError(dict.errorMismatch);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      // Try employee endpoint first, fall back to admin
+      let res = await fetch(`${API_BASE}/auth/employee/reset-password`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+
+      if (!res.ok) {
+        res = await fetch(`${API_BASE}/admin/auth/reset-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, password }),
+        });
+      }
+
+      const json = await res.json();
+      if (!res.ok) {
+        if (json?.error === 'invalid_token') throw new Error(dict.errorInvalidToken);
+        throw new Error(dict.errorGeneric);
+      }
+      setDone(true);
+    } catch (error: unknown) {
+      setError(error instanceof Error ? error.message : dict.errorGeneric);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const signInHref = localizedPath('sign-in', locale);
+  const forgotHref = localizedPath('forgot-password', locale);
+
+  if (!token) {
+    return (
+      <AuthShell locale={locale} title={dict.title}>
+        <p
+          style={{
+            textAlign: 'center',
+            fontSize: '0.875rem',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {dict.noToken}
+        </p>
+        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
+          <a href={forgotHref}>
+            <Button intent="primary">{dict.requestNew}</Button>
+          </a>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  if (done) {
+    return (
+      <AuthShell locale={locale} title={dict.title}>
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              margin: '0 auto 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '3.5rem',
+              height: '3.5rem',
+              borderRadius: '50%',
+              background: 'var(--color-success-bg, #ecfdf5)',
+            }}
+          >
+            <svg
+              style={{
+                width: '1.75rem',
+                height: '1.75rem',
+                color: 'var(--color-success-text, #059669)',
+              }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+            {dict.successTitle}
+          </h2>
+          <p
+            style={{
+              marginTop: '0.5rem',
+              fontSize: '0.875rem',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {dict.successBody}
+          </p>
+          <div style={{ marginTop: '1rem' }}>
+            <a href={signInHref}>
+              <Button intent="primary" fullWidth>
+                {dict.signIn}
+              </Button>
+            </a>
+          </div>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      <form
+        onSubmit={handleSubmit}
+        style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}
+      >
+        {error ? (
+          <div
+            style={{
+              borderRadius: '1.5rem',
+              border: '1px solid var(--color-error-border, #fecaca)',
+              background: 'var(--color-error-bg, #fef2f2)',
+              padding: '0.75rem 1rem',
+              fontSize: '0.875rem',
+              color: 'var(--color-error-text, #b91c1c)',
+            }}
+          >
+            {error}
+          </div>
+        ) : null}
+
+        <FormField id="reset-password" label={dict.newPassword} required>
+          <input
+            id="reset-password"
+            type="password"
+            required
+            minLength={8}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+            autoComplete="new-password"
+            style={{
+              width: '100%',
+              minHeight: '2.875rem',
+              padding: 'var(--space-3) var(--space-4)',
+              border: '1px solid var(--border-strong)',
+              borderRadius: 'var(--radius-sm)',
+              background: 'var(--surface-primary)',
+              color: 'var(--text-primary)',
+              fontSize: '0.875rem',
+            }}
+          />
+        </FormField>
+
+        <FormField id="reset-confirm" label={dict.confirmPassword} required>
+          <input
+            id="reset-confirm"
+            type="password"
+            required
+            minLength={8}
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="••••••••"
+            autoComplete="new-password"
+            style={{
+              width: '100%',
+              minHeight: '2.875rem',
+              padding: 'var(--space-3) var(--space-4)',
+              border: '1px solid var(--border-strong)',
+              borderRadius: 'var(--radius-sm)',
+              background: 'var(--surface-primary)',
+              color: 'var(--text-primary)',
+              fontSize: '0.875rem',
+            }}
+          />
+        </FormField>
+
+        <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+          {loading ? dict.submitting : dict.submit}
+        </Button>
+      </form>
+
+      <div
+        style={{
+          marginTop: '1.5rem',
+          borderTop: '1px solid var(--color-border)',
+          paddingTop: '1.5rem',
+          textAlign: 'center',
+          fontSize: '0.875rem',
+        }}
+      >
+        <a
+          href={signInHref}
+          style={{
+            fontWeight: 600,
+            color: 'var(--color-heading)',
+            textDecoration: 'underline',
+            textUnderlineOffset: '4px',
+          }}
+        >
+          {dict.backToLogin}
+        </a>
+      </div>
+    </AuthShell>
+  );
+}
+
+export function ResetPasswordForm({ locale }: { locale: Locale }) {
+  return (
+    <Suspense>
+      <ResetPasswordContent locale={locale} />
+    </Suspense>
+  );
+}
diff --git a/apps/homepage/src/components/auth/SignInForm.tsx b/apps/homepage/src/components/auth/SignInForm.tsx
new file mode 100644
index 0000000..d07af99
--- /dev/null
+++ b/apps/homepage/src/components/auth/SignInForm.tsx
@@ -0,0 +1,374 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { TextInput } from '@/components/forms/TextInput';
+import { FormField } from '@/components/forms/FormField';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { API_BASE, EMPLOYEE_PROFILE_KEY } from '@/lib/api';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+interface Dict {
+  title: string;
+  subtitle: string;
+  email: string;
+  emailPlaceholder: string;
+  password: string;
+  signIn: string;
+  signingIn: string;
+  verify: string;
+  verifying: string;
+  authCode: string;
+  enterCode: string;
+  totpPlaceholder: string;
+  back: string;
+  forgotPassword: string;
+  invalidCredentials: string;
+  passwordNotSet: string;
+  tooManyRequests: string;
+  emailNotVerified: string;
+  unexpectedError: string;
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Sign in',
+    subtitle: 'Enter your credentials to access your account.',
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    password: 'Password',
+    signIn: 'Sign in',
+    signingIn: 'Signing in…',
+    verify: 'Verify code',
+    verifying: 'Verifying…',
+    authCode: 'Authentication code',
+    enterCode: 'Enter the 6-digit code from your authenticator app.',
+    totpPlaceholder: '000000 or XXXX-XXXX-XXXX',
+    back: 'Back to credentials',
+    forgotPassword: 'Forgot your password?',
+    invalidCredentials: 'Invalid email or password.',
+    passwordNotSet:
+      'No password set yet. Check your invitation email or use "Forgot your password?"',
+    tooManyRequests: 'Too many attempts. Please try again later.',
+    emailNotVerified: 'Please verify your email first. Check your inbox for the verification link.',
+    unexpectedError: 'Something went wrong. Please try again.',
+  },
+  fr: {
+    title: 'Connexion',
+    subtitle: 'Saisissez vos identifiants pour accéder à votre compte.',
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    password: 'Mot de passe',
+    signIn: 'Connexion',
+    signingIn: 'Connexion…',
+    verify: 'Vérifier le code',
+    verifying: 'Vérification…',
+    authCode: "Code d'authentification",
+    enterCode: "Entrez le code à 6 chiffres de votre application d'authentification.",
+    totpPlaceholder: '000000 ou XXXX-XXXX-XXXX',
+    back: 'Retour aux identifiants',
+    forgotPassword: 'Mot de passe oublié ?',
+    invalidCredentials: 'Adresse e-mail ou mot de passe invalide.',
+    passwordNotSet:
+      "Aucun mot de passe défini. Vérifiez votre e-mail d'invitation ou utilisez « Mot de passe oublié ? »",
+    tooManyRequests: 'Trop de tentatives. Veuillez réessayer plus tard.',
+    emailNotVerified: 'Veuillez vérifier votre adresse email. Consultez votre boîte de réception.',
+    unexpectedError: 'Une erreur est survenue. Veuillez réessayer.',
+  },
+  ar: {
+    title: 'تسجيل الدخول',
+    subtitle: 'أدخل بياناتك للوصول إلى حسابك.',
+    email: 'البريد الإلكتروني',
+    emailPlaceholder: 'owner@company.com',
+    password: 'كلمة المرور',
+    signIn: 'تسجيل الدخول',
+    signingIn: 'جارٍ تسجيل الدخول…',
+    verify: 'تحقق من الرمز',
+    verifying: 'جارٍ التحقق…',
+    authCode: 'رمز المصادقة',
+    enterCode: 'أدخل الرمز المكون من 6 أرقام من تطبيق المصادقة.',
+    totpPlaceholder: '000000 أو XXXX-XXXX-XXXX',
+    back: 'العودة إلى بيانات الدخول',
+    forgotPassword: 'نسيت كلمة المرور؟',
+    invalidCredentials: 'البريد الإلكتروني أو كلمة المرور غير صحيحة.',
+    passwordNotSet: 'لم يتم تعيين كلمة مرور بعد. تحقق من بريد الدعوة أو استخدم "نسيت كلمة المرور؟"',
+    tooManyRequests: 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
+    emailNotVerified: 'يرجى التحقق من بريدك الإلكتروني أولاً. تحقق من صندوق الوارد.',
+    unexpectedError: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+  },
+};
+
+export function SignInForm({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict;
+  const searchParams = useSearchParams();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [totpCode, setTotpCode] = useState('');
+  const [step, setStep] = useState<'credentials' | 'totp'>('credentials');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const requestedPortal = searchParams.get('portal');
+  const employeeRedirect = searchParams.get('redirect') || '/dashboard';
+  const preferAdminAuth = requestedPortal === 'admin';
+
+  async function handleCredentials(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const tryAdminLogin = async () => {
+        const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ email, password }),
+        });
+        const adminJson = await adminRes.json();
+
+        if (adminRes.ok && adminJson?.data?.admin) {
+          window.location.href = `${window.location.origin}/admin/dashboard`;
+          return true;
+        }
+
+        if (adminRes.status === 401 && adminJson?.error === 'totp_required') {
+          setStep('totp');
+          return true;
+        }
+
+        if (adminRes.status === 429) {
+          setError(dict.tooManyRequests);
+          return true;
+        }
+
+        return false;
+      };
+
+      const tryEmployeeLogin = async () => {
+        const empRes = await fetch(`${API_BASE}/auth/employee/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ email, password }),
+        });
+        const empJson = await empRes.json();
+
+        if (empRes.ok && empJson?.data?.employee) {
+          if (empJson?.data?.employee) {
+            localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(empJson.data.employee));
+            const prefLang = empJson.data.employee?.preferredLanguage;
+            if (prefLang === 'en' || prefLang === 'fr' || prefLang === 'ar') {
+              document.cookie = `rentaldrivego-language=${prefLang}; path=/; max-age=31536000; samesite=lax`;
+            }
+          }
+          window.dispatchEvent(new CustomEvent('rentaldrivego:auth-changed'));
+          window.location.replace(employeeRedirect);
+          return true;
+        }
+
+        if (empJson?.error === 'password_not_set') {
+          setError(dict.passwordNotSet);
+          return true;
+        }
+
+        if (empJson?.error === 'email_not_verified') {
+          setError(dict.emailNotVerified);
+          return true;
+        }
+
+        if (empRes.status === 429) {
+          setError(dict.tooManyRequests);
+          return true;
+        }
+
+        return false;
+      };
+
+      if (preferAdminAuth) {
+        if (await tryAdminLogin()) return;
+        setError(dict.invalidCredentials);
+        return;
+      }
+
+      if (await tryEmployeeLogin()) return;
+
+      setError(dict.invalidCredentials);
+    } catch {
+      setError(dict.unexpectedError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleTotp(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const normalizedCode = totpCode.trim().toUpperCase();
+      const secondFactor = /^\d{6}$/.test(normalizedCode)
+        ? { totpCode: normalizedCode }
+        : { recoveryCode: normalizedCode };
+
+      const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password, ...secondFactor }),
+      });
+      const adminJson = await adminRes.json();
+
+      if (adminRes.ok && adminJson?.data?.admin) {
+        window.location.href = `${window.location.origin}/admin/dashboard`;
+        return;
+      }
+
+      setError(dict.invalidCredentials);
+    } catch {
+      setError(dict.unexpectedError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const hrefBase = localizedPath('forgot-password', locale);
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      {error ? (
+        <div
+          style={{
+            marginBottom: '1.25rem',
+            borderRadius: '1.5rem',
+            border: '1px solid var(--color-error-border, #fecaca)',
+            background: 'var(--color-error-bg, #fef2f2)',
+            padding: '0.75rem 1rem',
+            fontSize: '0.875rem',
+            color: 'var(--color-error-text, #b91c1c)',
+          }}
+        >
+          {error}
+        </div>
+      ) : null}
+
+      {step === 'credentials' ? (
+        <form
+          onSubmit={handleCredentials}
+          style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}
+        >
+          <FormField id="signin-email" label={dict.email} required>
+            <TextInput
+              id="signin-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={dict.emailPlaceholder}
+              autoComplete="email"
+            />
+          </FormField>
+
+          <FormField id="signin-password" label={dict.password} required>
+            <input
+              id="signin-password"
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              autoComplete="current-password"
+              style={{
+                width: '100%',
+                minHeight: '2.875rem',
+                padding: 'var(--space-3) var(--space-4)',
+                border: '1px solid var(--border-strong)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--surface-primary)',
+                color: 'var(--text-primary)',
+                fontSize: '0.875rem',
+              }}
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.signingIn : dict.signIn}
+          </Button>
+
+          <div style={{ textAlign: 'center' }}>
+            <a
+              href={hrefBase}
+              style={{
+                fontSize: '0.875rem',
+                color: 'var(--color-text-tertiary)',
+                textDecoration: 'underline',
+                textUnderlineOffset: '4px',
+              }}
+            >
+              {dict.forgotPassword}
+            </a>
+          </div>
+        </form>
+      ) : (
+        <form
+          onSubmit={handleTotp}
+          style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}
+        >
+          <div
+            style={{
+              borderRadius: '1.5rem',
+              border: '1px solid var(--color-border)',
+              background: 'var(--color-surface-secondary)',
+              padding: '1rem',
+              textAlign: 'center',
+              fontSize: '0.875rem',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {dict.enterCode}
+          </div>
+
+          <FormField id="signin-totp" label={dict.authCode} required>
+            <TextInput
+              id="signin-totp"
+              type="text"
+              inputMode="text"
+              required
+              maxLength={14}
+              value={totpCode}
+              onChange={(e) =>
+                setTotpCode(e.target.value.replace(/[^0-9A-Za-z-]/g, '').toUpperCase())
+              }
+              placeholder={dict.totpPlaceholder}
+              style={{ textAlign: 'center', fontSize: '1.25rem', letterSpacing: '0.45em' }}
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.verifying : dict.verify}
+          </Button>
+
+          <button
+            type="button"
+            onClick={() => {
+              setStep('credentials');
+              setTotpCode('');
+              setError(null);
+            }}
+            style={{
+              width: '100%',
+              fontSize: '0.875rem',
+              color: 'var(--color-text-tertiary)',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+            }}
+          >
+            {dict.back}
+          </button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}
diff --git a/apps/homepage/src/components/controls/Accordion.module.css b/apps/homepage/src/components/controls/Accordion.module.css
new file mode 100644
index 0000000..1ef9c16
--- /dev/null
+++ b/apps/homepage/src/components/controls/Accordion.module.css
@@ -0,0 +1,41 @@
+.accordion {
+  border-block-start: 1px solid var(--border-standard);
+}
+.item {
+  border-block-end: 1px solid var(--border-standard);
+}
+.summary {
+  display: flex;
+  min-block-size: 3.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  cursor: pointer;
+  list-style: none;
+}
+.summary::-webkit-details-marker {
+  display: none;
+}
+.heading {
+  margin: 0;
+  font-size: var(--type-body-large-size);
+}
+.icon {
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+.item[open] .icon {
+  transform: rotate(180deg);
+}
+.content {
+  padding-block-end: var(--space-5);
+  color: var(--text-secondary);
+}
+.content > :last-child {
+  margin-block-end: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    transition: none;
+  }
+}
diff --git a/apps/homepage/src/components/controls/Accordion.tsx b/apps/homepage/src/components/controls/Accordion.tsx
new file mode 100644
index 0000000..8bff959
--- /dev/null
+++ b/apps/homepage/src/components/controls/Accordion.tsx
@@ -0,0 +1,33 @@
+import { Icon } from '@/components/foundation/Icon';
+import type { ReactNode } from 'react';
+import styles from './Accordion.module.css';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  open?: boolean;
+}
+
+export function Accordion({
+  items,
+  headingLevel = 3,
+}: {
+  items: AccordionItem[];
+  headingLevel?: 2 | 3 | 4;
+}) {
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <div className={styles.accordion}>
+      {items.map((item) => (
+        <details key={item.id} className={styles.item} open={item.open}>
+          <summary className={styles.summary}>
+            <Heading className={styles.heading}>{item.title}</Heading>
+            <Icon name="chevron-down" className={styles.icon} />
+          </summary>
+          <div className={styles.content}>{item.content}</div>
+        </details>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/controls/Pagination.module.css b/apps/homepage/src/components/controls/Pagination.module.css
new file mode 100644
index 0000000..d829147
--- /dev/null
+++ b/apps/homepage/src/components/controls/Pagination.module.css
@@ -0,0 +1,33 @@
+.pagination {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--space-4);
+}
+.pagination > :last-child {
+  justify-self: end;
+}
+.pages {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.page {
+  min-inline-size: 2.75rem;
+  justify-content: center;
+  text-decoration: none;
+}
+.page[aria-current='page'] {
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+}
+@media (max-width: 479px) {
+  .pages {
+    display: none;
+  }
+}
diff --git a/apps/homepage/src/components/controls/Pagination.tsx b/apps/homepage/src/components/controls/Pagination.tsx
new file mode 100644
index 0000000..e9526d7
--- /dev/null
+++ b/apps/homepage/src/components/controls/Pagination.tsx
@@ -0,0 +1,51 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import styles from './Pagination.module.css';
+
+export interface PaginationPage {
+  number: number;
+  href: string;
+  current?: boolean;
+}
+
+interface PaginationProps {
+  label: string;
+  pages: PaginationPage[];
+  previous?: { href: string; label: string };
+  next?: { href: string; label: string };
+}
+
+export function Pagination({ label, pages, previous, next }: PaginationProps) {
+  return (
+    <nav aria-label={label} className={styles.pagination}>
+      {previous ? (
+        <ActionLink href={previous.href} variant="navigation">
+          <Icon name="arrow-back" directionBehavior="mirror" /> {previous.label}
+        </ActionLink>
+      ) : (
+        <span />
+      )}
+      <ol className={styles.pages}>
+        {pages.map((page) => (
+          <li key={page.number}>
+            <ActionLink
+              href={page.href}
+              variant="navigation"
+              aria-current={page.current ? 'page' : undefined}
+              className={styles.page}
+            >
+              {page.number}
+            </ActionLink>
+          </li>
+        ))}
+      </ol>
+      {next ? (
+        <ActionLink href={next.href} variant="navigation">
+          {next.label} <Icon name="arrow-forward" directionBehavior="mirror" />
+        </ActionLink>
+      ) : (
+        <span />
+      )}
+    </nav>
+  );
+}
diff --git a/apps/homepage/src/components/controls/SegmentedControl.module.css b/apps/homepage/src/components/controls/SegmentedControl.module.css
new file mode 100644
index 0000000..101532f
--- /dev/null
+++ b/apps/homepage/src/components/controls/SegmentedControl.module.css
@@ -0,0 +1,31 @@
+.control {
+  display: inline-flex;
+  max-inline-size: 100%;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+  overflow-x: auto;
+}
+.option {
+  flex: none;
+  min-block-size: 2.5rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-4);
+  border: 0;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-weight: 700;
+}
+.option[aria-checked='true'] {
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-subtle);
+}
+.option:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
diff --git a/apps/homepage/src/components/controls/SegmentedControl.tsx b/apps/homepage/src/components/controls/SegmentedControl.tsx
new file mode 100644
index 0000000..3271d6c
--- /dev/null
+++ b/apps/homepage/src/components/controls/SegmentedControl.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import styles from './SegmentedControl.module.css';
+
+export interface SegmentOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SegmentedControlProps {
+  label: string;
+  value: string;
+  options: SegmentOption[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SegmentedControl({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+}: SegmentedControlProps) {
+  return (
+    <div className={classNames(styles.control, className)} role="radiogroup" aria-label={label}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={option.value === value}
+          disabled={option.disabled}
+          className={styles.option}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/controls/Tabs.module.css b/apps/homepage/src/components/controls/Tabs.module.css
new file mode 100644
index 0000000..47b5f78
--- /dev/null
+++ b/apps/homepage/src/components/controls/Tabs.module.css
@@ -0,0 +1,33 @@
+.tabs {
+  min-inline-size: 0;
+}
+.list {
+  display: flex;
+  gap: var(--space-1);
+  overflow-x: auto;
+  border-block-end: 1px solid var(--border-standard);
+  scrollbar-width: thin;
+}
+.tab {
+  flex: none;
+  min-block-size: 2.75rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border: 0;
+  border-block-end: 3px solid transparent;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-weight: 700;
+}
+.tab[aria-selected='true'] {
+  border-block-end-color: var(--interactive-primary);
+  color: var(--text-primary);
+}
+.tab:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.panel {
+  padding-block: var(--space-5);
+}
diff --git a/apps/homepage/src/components/controls/Tabs.tsx b/apps/homepage/src/components/controls/Tabs.tsx
new file mode 100644
index 0000000..eb2085a
--- /dev/null
+++ b/apps/homepage/src/components/controls/Tabs.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import styles from './Tabs.module.css';
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  items: TabItem[];
+  label: string;
+  defaultActiveId?: string;
+  activation?: 'automatic' | 'manual';
+  className?: string;
+}
+
+export function Tabs({
+  items,
+  label,
+  defaultActiveId,
+  activation = 'automatic',
+  className,
+}: TabsProps) {
+  const available = items.filter((item) => !item.disabled);
+  const initial =
+    defaultActiveId && available.some((item) => item.id === defaultActiveId)
+      ? defaultActiveId
+      : (available[0]?.id ?? '');
+  const [activeId, setActiveId] = useState(initial);
+  const [focusedId, setFocusedId] = useState(initial);
+  const refs = useRef(new Map<string, HTMLButtonElement>());
+  const prefix = useId().replaceAll(':', '');
+
+  const focusByOffset = (currentId: string, offset: number) => {
+    const currentIndex = available.findIndex((item) => item.id === currentId);
+    if (currentIndex < 0 || available.length === 0) return;
+    const next = available[(currentIndex + offset + available.length) % available.length];
+    if (!next) return;
+    setFocusedId(next.id);
+    if (activation === 'automatic') setActiveId(next.id);
+    refs.current.get(next.id)?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, id: string) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      focusByOffset(id, document.documentElement.dir === 'rtl' ? -1 : 1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      focusByOffset(id, document.documentElement.dir === 'rtl' ? 1 : -1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      const first = available[0];
+      if (first) focusByOffset(first.id, 0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      const last = available.at(-1);
+      if (last) focusByOffset(last.id, 0);
+    } else if ((event.key === 'Enter' || event.key === ' ') && activation === 'manual') {
+      event.preventDefault();
+      setActiveId(id);
+    }
+  };
+
+  return (
+    <div className={classNames(styles.tabs, className)}>
+      <div className={styles.list} role="tablist" aria-label={label}>
+        {items.map((item) => {
+          const selected = item.id === activeId;
+          return (
+            <button
+              key={item.id}
+              ref={(node) => {
+                if (node) refs.current.set(item.id, node);
+                else refs.current.delete(item.id);
+              }}
+              type="button"
+              role="tab"
+              id={`${prefix}-tab-${item.id}`}
+              aria-controls={`${prefix}-panel-${item.id}`}
+              aria-selected={selected}
+              tabIndex={item.id === focusedId ? 0 : -1}
+              disabled={item.disabled}
+              className={styles.tab}
+              onClick={() => {
+                setFocusedId(item.id);
+                setActiveId(item.id);
+              }}
+              onKeyDown={(event) => handleKeyDown(event, item.id)}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          role="tabpanel"
+          id={`${prefix}-panel-${item.id}`}
+          aria-labelledby={`${prefix}-tab-${item.id}`}
+          hidden={item.id !== activeId}
+          tabIndex={0}
+          className={styles.panel}
+        >
+          {item.content}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/feedback/Alert.module.css b/apps/homepage/src/components/feedback/Alert.module.css
new file mode 100644
index 0000000..4584410
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Alert.module.css
@@ -0,0 +1,34 @@
+.alert {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid currentColor;
+  border-radius: var(--radius-sm);
+}
+.inline {
+  padding: var(--space-3);
+}
+.info {
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.success {
+  background: var(--status-success-surface);
+  color: var(--status-success-text);
+}
+.warning {
+  background: var(--status-warning-surface);
+  color: var(--status-warning-text);
+}
+.error {
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
+.title {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+.content > :last-child {
+  margin-block-end: 0;
+}
diff --git a/apps/homepage/src/components/feedback/Alert.tsx b/apps/homepage/src/components/feedback/Alert.tsx
new file mode 100644
index 0000000..0c27cb8
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Alert.tsx
@@ -0,0 +1,45 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './Alert.module.css';
+
+export type AlertTone = 'info' | 'success' | 'warning' | 'error';
+
+const toneIcon: Record<AlertTone, ApprovedIconName> = {
+  info: 'info',
+  success: 'check',
+  warning: 'warning',
+  error: 'error',
+};
+
+interface AlertProps {
+  tone?: AlertTone;
+  title?: string;
+  children: ReactNode;
+  live?: 'off' | 'polite' | 'assertive';
+  inline?: boolean;
+  className?: string;
+}
+
+export function Alert({
+  tone = 'info',
+  title,
+  children,
+  live = 'off',
+  inline = false,
+  className,
+}: AlertProps) {
+  return (
+    <div
+      className={classNames(styles.alert, styles[tone], inline && styles.inline, className)}
+      role={live === 'assertive' ? 'alert' : live === 'polite' ? 'status' : undefined}
+      aria-live={live === 'off' ? undefined : live}
+    >
+      <Icon name={toneIcon[tone]} />
+      <div>
+        {title ? <strong className={styles.title}>{title}</strong> : null}
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/feedback/Loading.module.css b/apps/homepage/src/components/feedback/Loading.module.css
new file mode 100644
index 0000000..53c588c
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Loading.module.css
@@ -0,0 +1,43 @@
+.spinnerGroup {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner {
+  animation: spin 0.9s linear infinite;
+}
+.skeleton {
+  display: grid;
+  gap: var(--space-3);
+}
+.skeleton span {
+  block-size: 0.9rem;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base),
+    var(--skeleton-highlight),
+    var(--skeleton-base)
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 1.8s;
+  }
+  .skeleton span {
+    animation: none;
+    background: var(--skeleton-base);
+  }
+}
diff --git a/apps/homepage/src/components/feedback/Loading.tsx b/apps/homepage/src/components/feedback/Loading.tsx
new file mode 100644
index 0000000..3c96592
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Loading.tsx
@@ -0,0 +1,38 @@
+import { Icon } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes } from 'react';
+import styles from './Loading.module.css';
+
+export function Spinner({ label, className }: { label: string; className?: string }) {
+  return (
+    <span className={classNames(styles.spinnerGroup, className)} role="status">
+      <Icon name="spinner" className={styles.spinner} />
+      <span className="visually-hidden">{label}</span>
+    </span>
+  );
+}
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  lines?: number;
+  label?: string;
+}
+
+export function Skeleton({
+  lines = 3,
+  label = 'Loading content',
+  className,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={classNames(styles.skeleton, className)}
+      aria-label={label}
+      aria-busy="true"
+      {...props}
+    >
+      {Array.from({ length: lines }, (_, index) => (
+        <span key={index} style={{ inlineSize: index === lines - 1 ? '68%' : '100%' }} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/feedback/Progress.module.css b/apps/homepage/src/components/feedback/Progress.module.css
new file mode 100644
index 0000000..68266a7
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Progress.module.css
@@ -0,0 +1,16 @@
+.group {
+  display: grid;
+  gap: var(--space-2);
+}
+.labelRow {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+.progress {
+  inline-size: 100%;
+  block-size: 0.75rem;
+  accent-color: var(--interactive-primary);
+}
diff --git a/apps/homepage/src/components/feedback/Progress.tsx b/apps/homepage/src/components/feedback/Progress.tsx
new file mode 100644
index 0000000..a1f411e
--- /dev/null
+++ b/apps/homepage/src/components/feedback/Progress.tsx
@@ -0,0 +1,31 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { classNames } from '@/lib/components/classNames';
+import styles from './Progress.module.css';
+
+interface ProgressProps {
+  value?: number;
+  max?: number;
+  label: string;
+  showValue?: boolean;
+  className?: string;
+}
+
+export function Progress({ value, max = 100, label, showValue = false, className }: ProgressProps) {
+  const normalized = value === undefined ? undefined : Math.min(max, Math.max(0, value));
+  return (
+    <div className={classNames(styles.group, className)}>
+      <div className={styles.labelRow}>
+        <span>{label}</span>
+        {showValue && normalized !== undefined ? (
+          <BidiText>{`${Math.round((normalized / max) * 100)}%`}</BidiText>
+        ) : null}
+      </div>
+      <progress
+        className={styles.progress}
+        max={max}
+        aria-label={label}
+        {...(normalized === undefined ? {} : { value: normalized })}
+      />
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/feedback/StateMessage.module.css b/apps/homepage/src/components/feedback/StateMessage.module.css
new file mode 100644
index 0000000..c0be04e
--- /dev/null
+++ b/apps/homepage/src/components/feedback/StateMessage.module.css
@@ -0,0 +1,17 @@
+.state {
+  display: grid;
+  justify-items: start;
+  max-inline-size: var(--container-reading);
+  gap: var(--space-3);
+  padding: var(--space-8);
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+}
+.state h2,
+.state p {
+  margin: 0;
+}
+.state p {
+  color: var(--text-secondary);
+}
diff --git a/apps/homepage/src/components/feedback/StateMessage.tsx b/apps/homepage/src/components/feedback/StateMessage.tsx
new file mode 100644
index 0000000..7a3b18e
--- /dev/null
+++ b/apps/homepage/src/components/feedback/StateMessage.tsx
@@ -0,0 +1,25 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import styles from './StateMessage.module.css';
+
+interface StateMessageProps {
+  icon?: ApprovedIconName;
+  title: string;
+  body: string;
+  action?: { label: string; href: string };
+}
+
+export function StateMessage({ icon = 'info', title, body, action }: StateMessageProps) {
+  return (
+    <section className={styles.state}>
+      <Icon name={icon} size="lg" />
+      <h2>{title}</h2>
+      <p>{body}</p>
+      {action ? (
+        <ActionLink href={action.href} variant="standalone" icon="arrow-forward">
+          {action.label}
+        </ActionLink>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/homepage/src/components/forms/ChoiceControls.module.css b/apps/homepage/src/components/forms/ChoiceControls.module.css
new file mode 100644
index 0000000..e0d7e08
--- /dev/null
+++ b/apps/homepage/src/components/forms/ChoiceControls.module.css
@@ -0,0 +1,77 @@
+.choice {
+  display: flex;
+  min-block-size: 2.75rem;
+  align-items: flex-start;
+  gap: var(--space-3);
+  cursor: pointer;
+}
+.choice > input:not(.switchInput) {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-block-start: 0.2rem;
+  accent-color: var(--interactive-primary);
+}
+.content {
+  display: grid;
+  gap: var(--space-1);
+}
+.label {
+  font-weight: 700;
+}
+.description {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.invalid .label {
+  color: var(--status-error-text);
+}
+.switchInput {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+.switchTrack {
+  position: relative;
+  flex: none;
+  inline-size: 2.75rem;
+  block-size: 1.5rem;
+  margin-block-start: 0.1rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--surface-strong);
+  transition: background var(--duration-fast) var(--easing-productive);
+}
+.switchTrack span {
+  position: absolute;
+  inset-block-start: 0.18rem;
+  inset-inline-start: 0.2rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border-radius: 50%;
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-subtle);
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+.switchInput:checked + .switchTrack {
+  background: var(--interactive-primary);
+}
+.switchInput:checked + .switchTrack span {
+  transform: translateX(1.2rem);
+}
+html[dir='rtl'] .switchInput:checked + .switchTrack span {
+  transform: translateX(-1.2rem);
+}
+.switchInput:focus-visible + .switchTrack {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+.switchInput:disabled + .switchTrack {
+  opacity: var(--opacity-disabled);
+}
+@media (prefers-reduced-motion: reduce) {
+  .switchTrack,
+  .switchTrack span {
+    transition: none;
+  }
+}
diff --git a/apps/homepage/src/components/forms/ChoiceControls.tsx b/apps/homepage/src/components/forms/ChoiceControls.tsx
new file mode 100644
index 0000000..3ad64ee
--- /dev/null
+++ b/apps/homepage/src/components/forms/ChoiceControls.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import styles from './ChoiceControls.module.css';
+
+interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: ReactNode;
+  description?: ReactNode;
+  invalid?: boolean;
+}
+
+function Choice({
+  label,
+  description,
+  invalid = false,
+  className,
+  type,
+  ...props
+}: ChoiceProps & { type: 'checkbox' | 'radio' }) {
+  return (
+    <label className={classNames(styles.choice, invalid && styles.invalid, className)}>
+      <input type={type} aria-invalid={invalid || undefined} {...props} />
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}
+
+export function Checkbox(props: ChoiceProps) {
+  return <Choice type="checkbox" {...props} />;
+}
+
+export function Radio(props: ChoiceProps) {
+  return <Choice type="radio" {...props} />;
+}
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+export function Switch({ label, description, className, ...props }: SwitchProps) {
+  return (
+    <label className={classNames(styles.choice, className)}>
+      <input type="checkbox" role="switch" className={styles.switchInput} {...props} />
+      <span aria-hidden="true" className={styles.switchTrack}>
+        <span />
+      </span>
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}
diff --git a/apps/homepage/src/components/forms/ErrorSummary.module.css b/apps/homepage/src/components/forms/ErrorSummary.module.css
new file mode 100644
index 0000000..cc762c8
--- /dev/null
+++ b/apps/homepage/src/components/forms/ErrorSummary.module.css
@@ -0,0 +1,24 @@
+.summary {
+  padding: var(--space-5);
+  border: 2px solid var(--status-error-text);
+  border-radius: var(--radius-sm);
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
+.heading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.heading h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.summary ul {
+  margin-block-end: 0;
+  padding-inline-start: var(--space-6);
+}
+.summary a {
+  color: currentColor;
+  font-weight: 700;
+}
diff --git a/apps/homepage/src/components/forms/ErrorSummary.tsx b/apps/homepage/src/components/forms/ErrorSummary.tsx
new file mode 100644
index 0000000..42dd53d
--- /dev/null
+++ b/apps/homepage/src/components/forms/ErrorSummary.tsx
@@ -0,0 +1,31 @@
+import { Icon } from '@/components/foundation/Icon';
+import styles from './ErrorSummary.module.css';
+
+export interface FormErrorItem {
+  fieldId: string;
+  message: string;
+}
+
+export function ErrorSummary({ title, errors }: { title: string; errors: FormErrorItem[] }) {
+  if (errors.length === 0) return null;
+  return (
+    <section
+      className={styles.summary}
+      role="alert"
+      aria-labelledby="form-error-summary-title"
+      tabIndex={-1}
+    >
+      <div className={styles.heading}>
+        <Icon name="error" />
+        <h2 id="form-error-summary-title">{title}</h2>
+      </div>
+      <ul>
+        {errors.map((error) => (
+          <li key={error.fieldId}>
+            <a href={`#${error.fieldId}`}>{error.message}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/apps/homepage/src/components/forms/FormField.module.css b/apps/homepage/src/components/forms/FormField.module.css
new file mode 100644
index 0000000..6ac2f55
--- /dev/null
+++ b/apps/homepage/src/components/forms/FormField.module.css
@@ -0,0 +1,47 @@
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+.label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+  font-weight: 700;
+}
+.required {
+  color: var(--status-error-text);
+}
+.optional {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  font-weight: 500;
+}
+.help,
+.error {
+  margin: 0;
+  font-size: var(--type-label-size);
+}
+.help {
+  color: var(--text-secondary);
+}
+.error {
+  color: var(--status-error-text);
+  font-weight: 650;
+}
+.invalid .label {
+  color: var(--status-error-text);
+}
+.fieldset {
+  display: grid;
+  gap: var(--space-4);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.legend {
+  margin-block-end: var(--space-3);
+  padding: 0;
+  font-weight: 750;
+}
diff --git a/apps/homepage/src/components/forms/FormField.tsx b/apps/homepage/src/components/forms/FormField.tsx
new file mode 100644
index 0000000..0010f83
--- /dev/null
+++ b/apps/homepage/src/components/forms/FormField.tsx
@@ -0,0 +1,69 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './FormField.module.css';
+
+interface FormFieldProps {
+  id: string;
+  label: string;
+  required?: boolean;
+  optionalLabel?: string | undefined;
+  supportingText?: string | undefined;
+  error?: string | undefined;
+  children: ReactNode;
+  className?: string | undefined;
+}
+
+export function FormField({
+  id,
+  label,
+  required = false,
+  optionalLabel,
+  supportingText,
+  error,
+  children,
+  className,
+}: FormFieldProps) {
+  return (
+    <div className={classNames(styles.field, error && styles.invalid, className)}>
+      <label className={styles.label} htmlFor={id}>
+        <span>{label}</span>
+        {required ? (
+          <span aria-hidden="true" className={styles.required}>
+            *
+          </span>
+        ) : null}
+        {!required && optionalLabel ? (
+          <span className={styles.optional}>{optionalLabel}</span>
+        ) : null}
+      </label>
+      {children}
+      {supportingText ? (
+        <p id={`${id}-help`} className={styles.help}>
+          {supportingText}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={`${id}-error`} className={styles.error}>
+          <span aria-hidden="true">!</span> {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function Fieldset({
+  legend,
+  children,
+  className,
+}: {
+  legend: string;
+  children: ReactNode;
+  className?: string | undefined;
+}) {
+  return (
+    <fieldset className={classNames(styles.fieldset, className)}>
+      <legend className={styles.legend}>{legend}</legend>
+      {children}
+    </fieldset>
+  );
+}
diff --git a/apps/homepage/src/components/forms/TextInput.module.css b/apps/homepage/src/components/forms/TextInput.module.css
new file mode 100644
index 0000000..0a7ad44
--- /dev/null
+++ b/apps/homepage/src/components/forms/TextInput.module.css
@@ -0,0 +1,43 @@
+.control {
+  inline-size: 100%;
+  min-block-size: 2.875rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-primary);
+  color: var(--text-primary);
+}
+.control::placeholder {
+  color: var(--text-subdued);
+  opacity: 1;
+}
+.control:hover:not(:disabled) {
+  border-color: var(--interactive-primary);
+}
+.control[aria-invalid='true'] {
+  border-color: var(--status-error-text);
+  box-shadow: 0 0 0 1px var(--status-error-text);
+}
+.control:disabled {
+  background: var(--control-disabled-surface);
+  color: var(--control-disabled-text);
+  cursor: not-allowed;
+}
+.textarea {
+  min-block-size: 8rem;
+  resize: vertical;
+}
+.textareaGroup {
+  display: grid;
+  gap: var(--space-1);
+}
+.count {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  text-align: end;
+}
+.select {
+  appearance: auto;
+}
diff --git a/apps/homepage/src/components/forms/TextInput.tsx b/apps/homepage/src/components/forms/TextInput.tsx
new file mode 100644
index 0000000..1b52f91
--- /dev/null
+++ b/apps/homepage/src/components/forms/TextInput.tsx
@@ -0,0 +1,93 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { classNames } from '@/lib/components/classNames';
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
+import styles from './TextInput.module.css';
+
+export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search';
+
+interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  type?: TextInputType;
+  invalid?: boolean;
+  describedBy?: string | undefined;
+  bidiValue?: boolean;
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { type = 'text', invalid = false, describedBy, bidiValue = false, className, ...props },
+  ref,
+) {
+  const dir = bidiValue || type === 'email' || type === 'tel' || type === 'url' ? 'ltr' : undefined;
+  return (
+    <input
+      ref={ref}
+      type={type}
+      dir={dir}
+      className={classNames(styles.control, className)}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedBy}
+      {...props}
+    />
+  );
+});
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+  describedBy?: string | undefined;
+  characterCount?: { current: number; max: number; label: string };
+}
+
+export function TextArea({
+  invalid = false,
+  describedBy,
+  characterCount,
+  className,
+  ...props
+}: TextAreaProps) {
+  const countId = characterCount && props.id ? `${props.id}-count` : undefined;
+  const ids = [describedBy, countId].filter(Boolean).join(' ') || undefined;
+  return (
+    <div className={styles.textareaGroup}>
+      <textarea
+        className={classNames(styles.control, styles.textarea, className)}
+        aria-invalid={invalid || undefined}
+        aria-describedby={ids}
+        {...props}
+      />
+      {characterCount ? (
+        <p id={countId} className={styles.count} aria-live="polite">
+          <BidiText>{`${characterCount.current}/${characterCount.max}`}</BidiText>{' '}
+          {characterCount.label}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  invalid?: boolean;
+  describedBy?: string | undefined;
+}
+
+export function Select({
+  invalid = false,
+  describedBy,
+  className,
+  children,
+  ...props
+}: SelectProps) {
+  return (
+    <select
+      className={classNames(styles.control, styles.select, className)}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedBy}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/AccessibleIcon.tsx b/apps/homepage/src/components/foundation/AccessibleIcon.tsx
new file mode 100644
index 0000000..c0cc76a
--- /dev/null
+++ b/apps/homepage/src/components/foundation/AccessibleIcon.tsx
@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+
+interface AccessibleIconProps {
+  icon: ReactElement;
+  label?: string;
+}
+
+export function AccessibleIcon({ icon, label }: AccessibleIconProps) {
+  if (label) {
+    return (
+      <span role="img" aria-label={label}>
+        {icon}
+      </span>
+    );
+  }
+  return <span aria-hidden="true">{icon}</span>;
+}
diff --git a/apps/homepage/src/components/foundation/BidiText.module.css b/apps/homepage/src/components/foundation/BidiText.module.css
new file mode 100644
index 0000000..e2a2701
--- /dev/null
+++ b/apps/homepage/src/components/foundation/BidiText.module.css
@@ -0,0 +1,3 @@
+.noWrap {
+  white-space: nowrap;
+}
diff --git a/apps/homepage/src/components/foundation/BidiText.tsx b/apps/homepage/src/components/foundation/BidiText.tsx
new file mode 100644
index 0000000..f532c29
--- /dev/null
+++ b/apps/homepage/src/components/foundation/BidiText.tsx
@@ -0,0 +1,23 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './BidiText.module.css';
+
+interface BidiTextProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  children: ReactNode;
+  direction?: 'ltr' | 'rtl' | 'auto';
+  noWrap?: boolean;
+}
+
+export function BidiText({
+  children,
+  direction = 'ltr',
+  noWrap = true,
+  className,
+  ...props
+}: BidiTextProps) {
+  return (
+    <bdi dir={direction} className={classNames(noWrap && styles.noWrap, className)} {...props}>
+      {children}
+    </bdi>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/Icon.module.css b/apps/homepage/src/components/foundation/Icon.module.css
new file mode 100644
index 0000000..d185c7e
--- /dev/null
+++ b/apps/homepage/src/components/foundation/Icon.module.css
@@ -0,0 +1,25 @@
+.icon {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+.sm {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+.md {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+.lg {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+html[dir='rtl'] .mirror {
+  transform: scaleX(-1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    animation: none !important;
+  }
+}
diff --git a/apps/homepage/src/components/foundation/Icon.tsx b/apps/homepage/src/components/foundation/Icon.tsx
new file mode 100644
index 0000000..041439f
--- /dev/null
+++ b/apps/homepage/src/components/foundation/Icon.tsx
@@ -0,0 +1,139 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode, SVGProps } from 'react';
+import styles from './Icon.module.css';
+
+export const approvedIconNames = [
+  'arrow-back',
+  'arrow-forward',
+  'calendar',
+  'car',
+  'check',
+  'chevron-down',
+  'chevron-forward',
+  'close',
+  'error',
+  'external',
+  'globe',
+  'info',
+  'menu',
+  'minus',
+  'plus',
+  'search',
+  'settings',
+  'spinner',
+  'warning',
+] as const;
+
+export type ApprovedIconName = (typeof approvedIconNames)[number];
+export type IconSize = 'sm' | 'md' | 'lg';
+export type IconDirectionBehavior = 'fixed' | 'mirror';
+
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+  name: ApprovedIconName;
+  size?: IconSize;
+  decorative?: boolean;
+  label?: string;
+  directionBehavior?: IconDirectionBehavior;
+}
+
+const paths: Record<ApprovedIconName, ReactNode> = {
+  'arrow-back': <path d="m15 18-6-6 6-6M9 12h10" />,
+  'arrow-forward': <path d="m9 18 6-6-6-6m6 6H5" />,
+  calendar: (
+    <>
+      <rect x="3" y="5" width="18" height="16" rx="2" />
+      <path d="M16 3v4M8 3v4M3 10h18" />
+    </>
+  ),
+  car: (
+    <>
+      <path d="m5 11 2-5h10l2 5" />
+      <path d="M3 11h18v7H3zM6 18v2m12-2v2M7 14h.01M17 14h.01" />
+    </>
+  ),
+  check: <path d="m5 12 4 4L19 6" />,
+  'chevron-down': <path d="m6 9 6 6 6-6" />,
+  'chevron-forward': <path d="m9 18 6-6-6-6" />,
+  close: <path d="M6 6l12 12M18 6 6 18" />,
+  error: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v6m0 4h.01" />
+    </>
+  ),
+  external: (
+    <>
+      <path d="M14 4h6v6M20 4l-9 9" />
+      <path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6" />
+    </>
+  ),
+  globe: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" />
+    </>
+  ),
+  info: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v6m0-10h.01" />
+    </>
+  ),
+  menu: <path d="M4 7h16M4 12h16M4 17h16" />,
+  minus: <path d="M5 12h14" />,
+  plus: <path d="M12 5v14M5 12h14" />,
+  search: (
+    <>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m16 16 5 5" />
+    </>
+  ),
+  settings: (
+    <>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
+    </>
+  ),
+  spinner: <path d="M21 12a9 9 0 1 1-9-9" />,
+  warning: (
+    <>
+      <path d="M12 3 2.5 20h19L12 3Z" />
+      <path d="M12 9v5m0 3h.01" />
+    </>
+  ),
+};
+
+export function Icon({
+  name,
+  size = 'md',
+  decorative = true,
+  label,
+  directionBehavior = 'fixed',
+  className,
+  ...props
+}: IconProps) {
+  const accessibleProps = decorative
+    ? ({ 'aria-hidden': true } as const)
+    : ({ role: 'img', 'aria-label': label ?? name } as const);
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      focusable="false"
+      className={classNames(
+        styles.icon,
+        styles[size],
+        directionBehavior === 'mirror' && styles.mirror,
+        className,
+      )}
+      {...accessibleProps}
+      {...props}
+    >
+      {paths[name]}
+    </svg>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/LiveRegion.module.css b/apps/homepage/src/components/foundation/LiveRegion.module.css
new file mode 100644
index 0000000..7ebf42b
--- /dev/null
+++ b/apps/homepage/src/components/foundation/LiveRegion.module.css
@@ -0,0 +1,11 @@
+.region {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/apps/homepage/src/components/foundation/LiveRegion.tsx b/apps/homepage/src/components/foundation/LiveRegion.tsx
new file mode 100644
index 0000000..8d0020b
--- /dev/null
+++ b/apps/homepage/src/components/foundation/LiveRegion.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import styles from './LiveRegion.module.css';
+
+interface LiveRegionProps {
+  children: ReactNode;
+  politeness?: 'polite' | 'assertive';
+}
+
+export function LiveRegion({ children, politeness = 'polite' }: LiveRegionProps) {
+  return (
+    <span className={styles.region} role="status" aria-live={politeness} aria-atomic="true">
+      {children}
+    </span>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/StatusBadge.module.css b/apps/homepage/src/components/foundation/StatusBadge.module.css
new file mode 100644
index 0000000..4c1100d
--- /dev/null
+++ b/apps/homepage/src/components/foundation/StatusBadge.module.css
@@ -0,0 +1,34 @@
+.badge {
+  display: inline-flex;
+  min-block-size: 1.75rem;
+  align-items: center;
+  gap: var(--space-1);
+  inline-size: fit-content;
+  padding-block: var(--space-1);
+  padding-inline: var(--space-3);
+  border: 1px solid currentColor;
+  border-radius: var(--radius-pill);
+  font-size: var(--type-caption-size);
+  font-weight: 800;
+  line-height: 1.2;
+}
+.neutral {
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+}
+.info {
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.success {
+  background: var(--status-success-surface);
+  color: var(--status-success-text);
+}
+.warning {
+  background: var(--status-warning-surface);
+  color: var(--status-warning-text);
+}
+.error {
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
diff --git a/apps/homepage/src/components/foundation/StatusBadge.tsx b/apps/homepage/src/components/foundation/StatusBadge.tsx
new file mode 100644
index 0000000..2792fcb
--- /dev/null
+++ b/apps/homepage/src/components/foundation/StatusBadge.tsx
@@ -0,0 +1,29 @@
+import { Icon, type ApprovedIconName } from './Icon';
+import styles from './StatusBadge.module.css';
+
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+
+const icons: Partial<Record<StatusTone, ApprovedIconName>> = {
+  info: 'info',
+  success: 'check',
+  warning: 'warning',
+  error: 'error',
+};
+
+export function StatusBadge({
+  children,
+  tone = 'neutral',
+  showIcon = false,
+}: {
+  children: string;
+  tone?: StatusTone;
+  showIcon?: boolean;
+}) {
+  const icon = icons[tone];
+  return (
+    <span className={`${styles.badge} ${styles[tone]}`}>
+      {showIcon && icon ? <Icon name={icon} size="sm" /> : null}
+      {children}
+    </span>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/VisuallyHidden.tsx b/apps/homepage/src/components/foundation/VisuallyHidden.tsx
new file mode 100644
index 0000000..3958dd3
--- /dev/null
+++ b/apps/homepage/src/components/foundation/VisuallyHidden.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function VisuallyHidden({ children, className, ...props }: VisuallyHiddenProps) {
+  const classes = ['visually-hidden', className].filter(Boolean).join(' ');
+  return (
+    <span className={classes} {...props}>
+      {children}
+    </span>
+  );
+}
diff --git a/apps/homepage/src/components/foundation/client-hooks.ts b/apps/homepage/src/components/foundation/client-hooks.ts
new file mode 100644
index 0000000..6297d33
--- /dev/null
+++ b/apps/homepage/src/components/foundation/client-hooks.ts
@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect, useId, useState, useSyncExternalStore, type RefObject } from 'react';
+
+export function useAccessibleId(prefix = 'rdg'): string {
+  return `${prefix}-${useId().replaceAll(':', '')}`;
+}
+
+const subscribeHydration = () => () => undefined;
+
+export function useHydrated(): boolean {
+  return useSyncExternalStore(
+    subscribeHydration,
+    () => true,
+    () => false,
+  );
+}
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const update = () => setMatches(media.matches);
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, [query]);
+  return matches;
+}
+
+export function useReducedMotion(): boolean {
+  return useMediaQuery('(prefers-reduced-motion: reduce)');
+}
+
+export function useEscapeKey(onEscape: () => void, enabled = true): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onEscape();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [enabled, onEscape]);
+}
+
+export function useOutsideClick<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  onOutside: () => void,
+  enabled = true,
+): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) onOutside();
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [enabled, onOutside, ref]);
+}
+
+export function useScrollLock(locked: boolean): void {
+  useEffect(() => {
+    if (!locked) return;
+    const previousOverflow = document.body.style.overflow;
+    const previousPadding = document.body.style.paddingInlineEnd;
+    const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = 'hidden';
+    if (scrollbar > 0) document.body.style.paddingInlineEnd = `${scrollbar}px`;
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.body.style.paddingInlineEnd = previousPadding;
+    };
+  }, [locked]);
+}
diff --git a/apps/homepage/src/components/homepage/Homepage.module.css b/apps/homepage/src/components/homepage/Homepage.module.css
new file mode 100644
index 0000000..9eb505b
--- /dev/null
+++ b/apps/homepage/src/components/homepage/Homepage.module.css
@@ -0,0 +1,4 @@
+.main {
+  min-block-size: calc(100dvh - var(--header-min-block-size));
+  overflow: clip;
+}
diff --git a/apps/homepage/src/components/homepage/README.md b/apps/homepage/src/components/homepage/README.md
new file mode 100644
index 0000000..f615c9b
--- /dev/null
+++ b/apps/homepage/src/components/homepage/README.md
@@ -0,0 +1,25 @@
+# Homepage section architecture
+
+The localized homepage is assembled in `src/app/[locale]/page.tsx`, but each visible section owns its component and, when needed, its CSS module under `src/components/homepage/sections`.
+
+## Update one section
+
+1. Edit only the matching component, for example `sections/WorkflowSection.tsx`.
+2. Edit only its localized copy in `src/content/locales/en/homepage.json`, `fr/homepage.json`, and `ar/homepage.json`.
+3. Keep reusable content transformation in `src/content/homepage-model.ts`.
+4. Add or update the section-specific test.
+
+Do not move section-specific styling into a global stylesheet. Shared design tokens and primitives remain global; layout and presentation unique to a section stay beside that section.
+
+## Pricing
+
+- UI and interaction: `sections/PricingSection.tsx`
+- Section-only styles: `sections/PricingSection.module.css`
+- Localized copy: `src/content/locales/{en,fr,ar}/homepage.json`
+- Commercial values: `src/content/pricing-config.ts`
+
+Public prices remain unavailable until `publicPricesApproved` is set to `true` and approved monthly prices are supplied for the supported plan and fleet-band combinations.
+## Application shell preservation
+
+The modular homepage sections do not own or replace the application shell. The existing `SiteHeader`, complete primary navigation, mobile navigation drawer, locale selector, theme selector, account action, and footer remain independent under `src/components/app-shell/`. The full Product, Workflow, Modules, Pricing, and FAQ navigation remains visible at laptop widths and is preserved in the mobile drawer at narrower widths.
+
diff --git a/apps/homepage/src/components/homepage/sections/ComparisonSection.tsx b/apps/homepage/src/components/homepage/sections/ComparisonSection.tsx
new file mode 100644
index 0000000..a01971b
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/ComparisonSection.tsx
@@ -0,0 +1,22 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { Comparison } from '@/components/marketing/Comparison';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function ComparisonSection({ content }: { content: HomepageContent['comparison'] }) {
+  return (
+    <Section tone="muted" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <Comparison
+            columns={[
+              { title: content.beforeTitle, items: content.beforeItems, tone: 'problem' },
+              { title: content.afterTitle, items: content.afterItems, tone: 'solution' },
+            ]}
+          />
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/FaqSection.tsx b/apps/homepage/src/components/homepage/sections/FaqSection.tsx
new file mode 100644
index 0000000..8c38991
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/FaqSection.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@/components/controls/Accordion';
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { Text } from '@/components/typography/Typography';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function FaqSection({ content }: { content: HomepageContent['faq'] }) {
+  return (
+    <Section id="faq" tone="muted" aria-label={content.title}>
+      <Container width="content">
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} alignment="center" />
+          <Accordion
+            items={content.items.map((item, index) => ({
+              id: item.id,
+              title: item.title,
+              content: <Text variant="supporting">{item.body}</Text>,
+              open: index === 0,
+            }))}
+          />
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/FinalCtaSection.module.css b/apps/homepage/src/components/homepage/sections/FinalCtaSection.module.css
new file mode 100644
index 0000000..2fba4ea
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/FinalCtaSection.module.css
@@ -0,0 +1,3 @@
+.finalSection {
+  padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
+}
diff --git a/apps/homepage/src/components/homepage/sections/FinalCtaSection.tsx b/apps/homepage/src/components/homepage/sections/FinalCtaSection.tsx
new file mode 100644
index 0000000..f9db89e
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/FinalCtaSection.tsx
@@ -0,0 +1,34 @@
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { Container, Section } from '@/components/layout/LayoutPrimitives';
+import { CTA } from '@/components/marketing/CTA';
+import type { HomepageContent } from '@/content/homepage-model';
+import styles from './FinalCtaSection.module.css';
+
+interface FinalCtaSectionProps {
+  content: HomepageContent['final'];
+  demoSubmissionEnabled: boolean;
+}
+
+export function FinalCtaSection({ content, demoSubmissionEnabled }: FinalCtaSectionProps) {
+  return (
+    <Section className={styles.finalSection} aria-label={content.title}>
+      <Container>
+        <CTA
+          eyebrow={content.eyebrow}
+          title={content.title}
+          body={content.body}
+          primary={content.primary}
+          secondary={content.secondary}
+          primaryNode={
+            <DemoTrigger
+              label={content.primary.label}
+              source="final-cta"
+              size="large"
+              disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
+            />
+          }
+        />
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/HeroSection.module.css b/apps/homepage/src/components/homepage/sections/HeroSection.module.css
new file mode 100644
index 0000000..973515f
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/HeroSection.module.css
@@ -0,0 +1,130 @@
+.hero {
+  position: relative;
+  isolation: isolate;
+  padding-block: clamp(var(--space-12), 9vw, var(--space-24));
+  background:
+    radial-gradient(
+      circle at 12% 18%,
+      color-mix(in srgb, var(--status-info-surface) 82%, transparent),
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 88% 72%,
+      color-mix(in srgb, var(--surface-strong) 78%, transparent),
+      transparent 42%
+    ),
+    var(--surface-page);
+}
+
+.hero::after {
+  position: absolute;
+  z-index: -1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: 1px;
+  background: var(--border-standard);
+  content: '';
+}
+
+.heroGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.98fr);
+  align-items: center;
+  gap: clamp(var(--space-10), 7vw, var(--space-20));
+}
+
+.heroCopy {
+  display: grid;
+  gap: var(--space-5);
+  min-inline-size: 0;
+}
+
+.heroCopy > p:last-of-type {
+  max-inline-size: 58ch;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding-block-start: var(--space-2);
+}
+
+.previewStage {
+  position: relative;
+  min-inline-size: 0;
+  padding: clamp(var(--space-3), 2.5vw, var(--space-6));
+}
+
+.previewStage::before,
+.previewStage::after {
+  position: absolute;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  content: '';
+}
+
+.previewStage::before {
+  inset: 0;
+  background: var(--surface-strong);
+  transform: rotate(-2deg);
+}
+
+.previewStage::after {
+  inset-block-start: 8%;
+  inset-inline: 8%;
+  block-size: 88%;
+  border: 1px solid var(--border-strong);
+  transform: rotate(2deg);
+}
+
+@media (max-width: 1023px) {
+  .heroGrid {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
+    gap: var(--space-10);
+  }
+}
+
+@media (max-width: 767px) {
+  .heroGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .heroCopy {
+    justify-items: start;
+  }
+
+  .heroActions,
+  .heroActions > * {
+    inline-size: 100%;
+  }
+
+  .previewStage {
+    padding-inline: 0;
+  }
+
+  .previewStage::before,
+  .previewStage::after {
+    display: none;
+  }
+}
+
+@media (max-width: 359px) {
+  .hero {
+    padding-block: var(--space-10);
+  }
+}
+
+@media (forced-colors: active) {
+  .previewStage::before,
+  .previewStage::after {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .previewStage::before,
+  .previewStage::after {
+    transform: none;
+  }
+}
diff --git a/apps/homepage/src/components/homepage/sections/HeroSection.tsx b/apps/homepage/src/components/homepage/sections/HeroSection.tsx
new file mode 100644
index 0000000..78d62f5
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/HeroSection.tsx
@@ -0,0 +1,49 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { Container, Section } from '@/components/layout/LayoutPrimitives';
+import { ProductPreview } from '@/components/marketing/ProductPreview';
+import { Eyebrow, Heading, Text } from '@/components/typography/Typography';
+import type { HomepageContent } from '@/content/homepage-model';
+import styles from './HeroSection.module.css';
+
+interface HeroSectionProps {
+  content: HomepageContent['hero'];
+  homePath: string;
+  demoSubmissionEnabled: boolean;
+}
+
+export function HeroSection({ content, homePath, demoSubmissionEnabled }: HeroSectionProps) {
+  return (
+    <Section id="product" className={styles.hero} aria-label={content.title}>
+      <Container>
+        <div className={styles.heroGrid}>
+          <div className={styles.heroCopy}>
+            <Eyebrow>{content.eyebrow}</Eyebrow>
+            <Heading level={1} appearance="display">
+              {content.title}
+            </Heading>
+            <Text variant="lead">{content.body}</Text>
+            <div className={styles.heroActions} role="group" aria-label={content.eyebrow}>
+              <DemoTrigger
+                label={content.primary.label}
+                source="hero"
+                size="large"
+                disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
+              />
+              <ActionLink
+                href={homePath}
+                variant="button-primary"
+                disabledReason={content.secondary.disabledReason}
+              >
+                {content.secondary.label}
+              </ActionLink>
+            </div>
+          </div>
+          <div className={styles.previewStage}>
+            <ProductPreview {...content.preview} headingLevel={2} />
+          </div>
+        </div>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/IntegrationsSection.module.css b/apps/homepage/src/components/homepage/sections/IntegrationsSection.module.css
new file mode 100644
index 0000000..69d78bc
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/IntegrationsSection.module.css
@@ -0,0 +1,40 @@
+.splitSection {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
+  align-items: start;
+  gap: clamp(var(--space-8), 7vw, var(--space-16));
+}
+
+.capabilityList {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.capabilityList li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-3);
+}
+
+.capabilityList svg {
+  margin-block-start: 0.28rem;
+  color: var(--interactive-primary);
+}
+
+@media (max-width: 1023px) {
+  .splitSection {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .splitSection,
+  .capabilityList {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/homepage/src/components/homepage/sections/IntegrationsSection.tsx b/apps/homepage/src/components/homepage/sections/IntegrationsSection.tsx
new file mode 100644
index 0000000..0b0efb8
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/IntegrationsSection.tsx
@@ -0,0 +1,28 @@
+import { Icon } from '@/components/foundation/Icon';
+import { Container, Section } from '@/components/layout/LayoutPrimitives';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { Card } from '@/components/surfaces/Card';
+import type { HomepageContent } from '@/content/homepage-model';
+import styles from './IntegrationsSection.module.css';
+
+export function IntegrationsSection({ content }: { content: HomepageContent['integrations'] }) {
+  return (
+    <Section aria-label={content.title}>
+      <Container>
+        <div className={styles.splitSection}>
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <Card as="div" tone="elevated" padding="spacious">
+            <ul className={styles.capabilityList}>
+              {content.items.map((item) => (
+                <li key={item}>
+                  <Icon name="plus" size="sm" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        </div>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/ModulesSection.tsx b/apps/homepage/src/components/homepage/sections/ModulesSection.tsx
new file mode 100644
index 0000000..61589bd
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/ModulesSection.tsx
@@ -0,0 +1,27 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function ModulesSection({ content }: { content: HomepageContent['modules'] }) {
+  return (
+    <Section id="modules" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <FeatureGrid>
+            {content.items.map((item) => (
+              <FeatureCard
+                key={item.id}
+                title={item.title}
+                description={item.description}
+                {...(item.icon ? { icon: item.icon } : {})}
+              />
+            ))}
+          </FeatureGrid>
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/PricingSection.module.css b/apps/homepage/src/components/homepage/sections/PricingSection.module.css
new file mode 100644
index 0000000..8150629
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/PricingSection.module.css
@@ -0,0 +1,388 @@
+.section {
+  border-block: 1px solid var(--border-standard);
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      color-mix(in srgb, var(--status-info-surface) 74%, transparent),
+      transparent 42%
+    ),
+    var(--surface-page);
+}
+
+.header {
+  max-inline-size: 54rem;
+  margin-inline: auto;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.5fr);
+  gap: var(--space-5);
+  padding: var(--space-5);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-subtle);
+}
+
+.controlGroup {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.controlGroup legend {
+  margin-block-end: var(--space-3);
+  color: var(--text-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+}
+
+.optionGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-2);
+}
+
+.billingOptions {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.option {
+  position: relative;
+  min-inline-size: 0;
+}
+
+.option input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.option label {
+  display: flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-primary);
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+  font-weight: 700;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color var(--duration-fast) var(--easing-productive),
+    background var(--duration-fast) var(--easing-productive),
+    color var(--duration-fast) var(--easing-productive);
+}
+
+.option input:checked + label {
+  border-color: var(--interactive-primary);
+  background: var(--status-info-surface);
+  color: var(--text-primary);
+}
+
+.option input:focus-visible + label {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.savings {
+  display: inline-flex;
+  padding: 0.12rem 0.42rem;
+  border-radius: var(--radius-pill);
+  background: var(--status-success-surface);
+  color: var(--status-success-text);
+  font-size: 0.72rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.planGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+  gap: var(--space-5);
+}
+
+.planCard {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  min-inline-size: 0;
+  padding: clamp(var(--space-5), 3vw, var(--space-8));
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-subtle);
+}
+
+.recommendedCard {
+  border-color: var(--interactive-primary);
+  box-shadow: var(--shadow-card);
+  transform: translateY(-0.35rem);
+}
+
+.recommendedBadge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: var(--space-5);
+  padding: var(--space-2) var(--space-3);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-size: var(--type-caption-size);
+  font-weight: 800;
+}
+
+.planHeader {
+  display: grid;
+  gap: var(--space-3);
+  padding-block-start: var(--space-2);
+}
+
+.planName {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--type-heading-3-size);
+  line-height: var(--line-heading);
+}
+
+.audience {
+  min-block-size: 5.2rem;
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.priceBlock {
+  display: grid;
+  align-content: start;
+  gap: var(--space-1);
+  min-block-size: 5.75rem;
+}
+
+.priceLabel,
+.priceMeta {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+
+.priceLine {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+  color: var(--text-primary);
+}
+
+.price {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 850;
+  line-height: 1;
+  letter-spacing: -0.035em;
+}
+
+.pendingPrice,
+.customPrice {
+  max-inline-size: 16ch;
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.featureList,
+.basisList,
+.moduleList,
+.assuranceList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.featureList {
+  display: grid;
+  gap: var(--space-3);
+  flex: 1;
+}
+
+.featureList li,
+.basisList li,
+.assuranceList li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-3);
+}
+
+.featureList svg,
+.basisList svg,
+.assuranceList svg {
+  margin-block-start: 0.22rem;
+  color: var(--interactive-primary);
+}
+
+.planAction {
+  inline-size: 100%;
+  margin-block-start: auto;
+}
+
+.detailsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-5);
+}
+
+.detailCard {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-primary);
+}
+
+.detailCard h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.125rem;
+}
+
+.basisList {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.moduleList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.moduleList li {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-pill);
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+
+.assuranceRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-strong);
+}
+
+.assuranceList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3) var(--space-6);
+}
+
+.assuranceList li {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+
+.compareBlock {
+  display: grid;
+  justify-items: end;
+  gap: var(--space-2);
+  text-align: end;
+}
+
+.compareBlock p,
+.configurationNote {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.configurationNote {
+  max-inline-size: 80ch;
+  margin-inline: auto;
+  font-size: var(--type-caption-size);
+  text-align: center;
+}
+
+@media (max-width: 1023px) {
+  .controls,
+  .assuranceRow {
+    grid-template-columns: 1fr;
+  }
+
+  .planGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .planCard:last-child {
+    grid-column: 1 / -1;
+  }
+
+  .compareBlock {
+    justify-items: start;
+    text-align: start;
+  }
+}
+
+@media (max-width: 767px) {
+  .optionGrid,
+  .planGrid,
+  .detailsGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .billingOptions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .recommendedCard {
+    order: -1;
+    transform: none;
+  }
+
+  .planCard:last-child {
+    grid-column: auto;
+  }
+
+  .audience,
+  .priceBlock {
+    min-block-size: auto;
+  }
+
+  .assuranceList {
+    display: grid;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .option label {
+    transition: none;
+  }
+
+  .recommendedCard {
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .recommendedCard,
+  .option input:checked + label {
+    border-width: 2px;
+  }
+}
diff --git a/apps/homepage/src/components/homepage/sections/PricingSection.tsx b/apps/homepage/src/components/homepage/sections/PricingSection.tsx
new file mode 100644
index 0000000..fb41743
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/PricingSection.tsx
@@ -0,0 +1,287 @@
+'use client';
+
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import type { HomepageContent } from '@/content/homepage-model';
+import {
+  pricingCommercialConfig,
+  type BillingPeriod,
+  type FleetBandId,
+  type PricingPlanId,
+} from '@/content/pricing-config';
+import { trackAnalytics } from '@/lib/analytics/client';
+import type { AnalyticsContext } from '@/lib/analytics/events';
+import { classNames } from '@/lib/components/classNames';
+import { getDirection, type Locale } from '@/lib/localization/config';
+import { useMemo, useState } from 'react';
+import styles from './PricingSection.module.css';
+
+interface PricingSectionProps {
+  content: HomepageContent['pricing'];
+  locale: Locale;
+  homePath: string;
+  demoSubmissionEnabled: boolean;
+}
+
+function analyticsContext(
+  locale: Locale,
+  fleetBand: FleetBandId,
+  billingPeriod: BillingPeriod,
+  plan?: PricingPlanId,
+): AnalyticsContext {
+  return {
+    routeId: 'home',
+    locale,
+    direction: getDirection(locale),
+    resolvedTheme: document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light',
+    source: 'pricing',
+    fleetBand,
+    billingPeriod,
+    ...(plan ? { plan } : {}),
+  };
+}
+
+function monthlyEquivalent(monthlyPrice: number, billingPeriod: BillingPeriod): number {
+  if (billingPeriod === 'monthly') return monthlyPrice;
+  const discountPercent = pricingCommercialConfig.annualDiscountPercent ?? 0;
+  return monthlyPrice * (1 - discountPercent / 100);
+}
+
+function formatPrice(value: number, locale: Locale): string {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: pricingCommercialConfig.currency,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function formatDiscount(locale: Locale): string {
+  const discountPercent = pricingCommercialConfig.annualDiscountPercent ?? 0;
+  return new Intl.NumberFormat(locale, {
+    style: 'percent',
+    maximumFractionDigits: 0,
+  }).format(discountPercent / 100);
+}
+
+export function PricingSection({
+  content,
+  locale,
+  homePath,
+  demoSubmissionEnabled,
+}: PricingSectionProps) {
+  const [fleetBand, setFleetBand] = useState<FleetBandId>('small');
+  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>('monthly');
+  const recommendedPlan = pricingCommercialConfig.recommendedPlanByFleetBand[fleetBand];
+
+  const prices = useMemo(
+    () =>
+      Object.fromEntries(
+        content.plans.map((plan) => {
+          const configuredPrice = pricingCommercialConfig.monthlyPrices[plan.id][fleetBand];
+          const publicPrice = pricingCommercialConfig.publicPricesApproved ? configuredPrice : null;
+          return [
+            plan.id,
+            publicPrice === null ? null : monthlyEquivalent(publicPrice, billingPeriod),
+          ];
+        }),
+      ) as Record<PricingPlanId, number | null>,
+    [billingPeriod, content.plans, fleetBand],
+  );
+
+  return (
+    <Section id="pricing" className={styles.section} aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader
+            className={styles.header ?? ''}
+            eyebrow={content.eyebrow}
+            title={content.title}
+            body={content.body}
+            alignment="center"
+          />
+
+          <div className={styles.controls}>
+            <fieldset className={styles.controlGroup}>
+              <legend>{content.fleetSelectorLabel}</legend>
+              <div className={styles.optionGrid}>
+                {content.fleetBands.map((band) => (
+                  <div key={band.id} className={styles.option}>
+                    <input
+                      id={`pricing-fleet-${band.id}`}
+                      type="radio"
+                      name="pricing-fleet-band"
+                      value={band.id}
+                      checked={fleetBand === band.id}
+                      onChange={() => {
+                        setFleetBand(band.id);
+                        trackAnalytics(
+                          'pricing_fleet_band_selected',
+                          analyticsContext(locale, band.id, billingPeriod),
+                        );
+                      }}
+                    />
+                    <label htmlFor={`pricing-fleet-${band.id}`}>{band.label}</label>
+                  </div>
+                ))}
+              </div>
+            </fieldset>
+
+            <fieldset className={styles.controlGroup}>
+              <legend>{content.billingLegend}</legend>
+              <div className={classNames(styles.optionGrid, styles.billingOptions)}>
+                {(['monthly', 'annual'] as const).map((period) => (
+                  <div key={period} className={styles.option}>
+                    <input
+                      id={`pricing-billing-${period}`}
+                      type="radio"
+                      name="pricing-billing-period"
+                      value={period}
+                      checked={billingPeriod === period}
+                      onChange={() => {
+                        setBillingPeriod(period);
+                        trackAnalytics(
+                          'pricing_billing_period_changed',
+                          analyticsContext(locale, fleetBand, period),
+                        );
+                      }}
+                    />
+                    <label htmlFor={`pricing-billing-${period}`}>
+                      {period === 'monthly' ? content.billingMonthly : content.billingAnnual}
+                      {period === 'annual' &&
+                      pricingCommercialConfig.publicPricesApproved &&
+                      pricingCommercialConfig.annualDiscountPercent ? (
+                        <span className={styles.savings}>
+                          {content.billingSavings} {formatDiscount(locale)}
+                        </span>
+                      ) : null}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </fieldset>
+          </div>
+
+          <div className={styles.planGrid} aria-live="polite">
+            {content.plans.map((plan) => {
+              const recommended = plan.id === recommendedPlan;
+              const price = prices[plan.id];
+              const custom = plan.id === 'enterprise';
+
+              return (
+                <article
+                  key={plan.id}
+                  className={classNames(styles.planCard, recommended && styles.recommendedCard)}
+                  data-plan={plan.id}
+                  data-recommended={recommended || undefined}
+                >
+                  {recommended ? (
+                    <span className={styles.recommendedBadge}>{content.recommended}</span>
+                  ) : null}
+
+                  <header className={styles.planHeader}>
+                    <h3 className={styles.planName}>{plan.name}</h3>
+                    <p className={styles.audience}>{plan.audience}</p>
+                  </header>
+
+                  <div className={styles.priceBlock}>
+                    {custom ? (
+                      <span className={styles.customPrice}>{content.customPrice}</span>
+                    ) : price === null ? (
+                      <span className={styles.pendingPrice}>{content.pricePending}</span>
+                    ) : (
+                      <>
+                        <p className={styles.priceLabel}>{content.startingAt}</p>
+                        <div className={styles.priceLine}>
+                          <bdi className={styles.price} dir="ltr">
+                            {formatPrice(price, locale)}
+                          </bdi>
+                          <span>{content.perMonth}</span>
+                        </div>
+                        {billingPeriod === 'annual' ? (
+                          <p className={styles.priceMeta}>{content.annualEquivalent}</p>
+                        ) : null}
+                      </>
+                    )}
+                  </div>
+
+                  <ul className={styles.featureList}>
+                    {plan.features.map((feature) => (
+                      <li key={feature}>
+                        <Icon name="check" size="sm" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <DemoTrigger
+                    label={plan.cta}
+                    source="pricing"
+                    size="large"
+                    fullWidth
+                    className={styles.planAction}
+                    disabledReason={
+                      demoSubmissionEnabled ? undefined : content.actionDisabledReason
+                    }
+                    onActivate={() =>
+                      trackAnalytics(
+                        'pricing_plan_cta_clicked',
+                        analyticsContext(locale, fleetBand, billingPeriod, plan.id),
+                      )
+                    }
+                  />
+                </article>
+              );
+            })}
+          </div>
+
+          <div className={styles.detailsGrid}>
+            <section className={styles.detailCard} aria-labelledby="pricing-basis-title">
+              <h3 id="pricing-basis-title">{content.basisTitle}</h3>
+              <ul className={styles.basisList}>
+                {content.basis.map((item) => (
+                  <li key={item}>
+                    <Icon name="check" size="sm" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <section className={styles.detailCard} aria-labelledby="pricing-modules-title">
+              <h3 id="pricing-modules-title">{content.modulesTitle}</h3>
+              <ul className={styles.moduleList}>
+                {content.modules.map((module) => (
+                  <li key={module}>{module}</li>
+                ))}
+              </ul>
+            </section>
+          </div>
+
+          <div className={styles.assuranceRow}>
+            <ul className={styles.assuranceList}>
+              {content.assurances.map((assurance) => (
+                <li key={assurance}>
+                  <Icon name="check" size="sm" />
+                  <span>{assurance}</span>
+                </li>
+              ))}
+            </ul>
+            <div className={styles.compareBlock}>
+              <p>{content.notSure}</p>
+              <ActionLink href={`${homePath}#modules`} variant="standalone" icon="arrow-forward">
+                {content.compare}
+              </ActionLink>
+            </div>
+          </div>
+
+          {!pricingCommercialConfig.publicPricesApproved ? (
+            <p className={styles.configurationNote}>{content.note}</p>
+          ) : null}
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/ResultsSection.module.css b/apps/homepage/src/components/homepage/sections/ResultsSection.module.css
new file mode 100644
index 0000000..358a00b
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/ResultsSection.module.css
@@ -0,0 +1,6 @@
+.methodList {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+  padding-inline-start: var(--space-5);
+}
diff --git a/apps/homepage/src/components/homepage/sections/ResultsSection.tsx b/apps/homepage/src/components/homepage/sections/ResultsSection.tsx
new file mode 100644
index 0000000..953d9a5
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/ResultsSection.tsx
@@ -0,0 +1,37 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import { Callout } from '@/components/surfaces/Callout';
+import type { HomepageContent } from '@/content/homepage-model';
+import styles from './ResultsSection.module.css';
+
+export function ResultsSection({ content }: { content: HomepageContent['results'] }) {
+  return (
+    <Section tone="muted" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <FeatureGrid>
+            {content.metrics.map((metric) => (
+              <FeatureCard
+                key={metric.id}
+                title={metric.title}
+                description={metric.description}
+                {...(metric.icon ? { icon: metric.icon } : {})}
+                emphasis="muted"
+              />
+            ))}
+          </FeatureGrid>
+          <Callout icon="info" title={content.methodTitle}>
+            <ol className={styles.methodList}>
+              {content.method.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ol>
+          </Callout>
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/RolesSection.tsx b/apps/homepage/src/components/homepage/sections/RolesSection.tsx
new file mode 100644
index 0000000..b658514
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/RolesSection.tsx
@@ -0,0 +1,28 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function RolesSection({ content }: { content: HomepageContent['roles'] }) {
+  return (
+    <Section tone="strong" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} alignment="center" />
+          <FeatureGrid>
+            {content.items.map((item) => (
+              <FeatureCard
+                key={item.id}
+                title={item.title}
+                description={item.description}
+                {...(item.icon ? { icon: item.icon } : {})}
+                emphasis="primary"
+              />
+            ))}
+          </FeatureGrid>
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/SecuritySection.tsx b/apps/homepage/src/components/homepage/sections/SecuritySection.tsx
new file mode 100644
index 0000000..b3f5707
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/SecuritySection.tsx
@@ -0,0 +1,28 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function SecuritySection({ content }: { content: HomepageContent['security'] }) {
+  return (
+    <Section tone="strong" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <FeatureGrid>
+            {content.checks.map((check) => (
+              <FeatureCard
+                key={check.id}
+                title={check.title}
+                description={check.description}
+                {...(check.icon ? { icon: check.icon } : {})}
+                emphasis="primary"
+              />
+            ))}
+          </FeatureGrid>
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/TrustSection.module.css b/apps/homepage/src/components/homepage/sections/TrustSection.module.css
new file mode 100644
index 0000000..707e436
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/TrustSection.module.css
@@ -0,0 +1,3 @@
+.sectionBorder {
+  border-block-end: 1px solid var(--border-standard);
+}
diff --git a/apps/homepage/src/components/homepage/sections/TrustSection.tsx b/apps/homepage/src/components/homepage/sections/TrustSection.tsx
new file mode 100644
index 0000000..4c82fcb
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/TrustSection.tsx
@@ -0,0 +1,34 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import type { HomepageContent } from '@/content/homepage-model';
+import styles from './TrustSection.module.css';
+
+export function TrustSection({ content }: { content: HomepageContent['trust'] }) {
+  return (
+    <Section className={styles.sectionBorder} aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader
+            eyebrow={content.eyebrow}
+            title={content.title}
+            body={content.body}
+            alignment="center"
+          />
+          <FeatureGrid>
+            {content.items.map((item) => (
+              <FeatureCard
+                key={item.id}
+                title={item.title}
+                description={item.description}
+                {...(item.icon ? { icon: item.icon } : {})}
+                emphasis="muted"
+              />
+            ))}
+          </FeatureGrid>
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/WorkflowSection.tsx b/apps/homepage/src/components/homepage/sections/WorkflowSection.tsx
new file mode 100644
index 0000000..38b6252
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/WorkflowSection.tsx
@@ -0,0 +1,17 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { Workflow } from '@/components/marketing/Workflow';
+import type { HomepageContent } from '@/content/homepage-model';
+
+export function WorkflowSection({ content }: { content: HomepageContent['workflow'] }) {
+  return (
+    <Section id="workflow" aria-label={content.title}>
+      <Container>
+        <Stack gap="large">
+          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <Workflow items={content.steps} label={content.title} />
+        </Stack>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/homepage/src/components/homepage/sections/index.ts b/apps/homepage/src/components/homepage/sections/index.ts
new file mode 100644
index 0000000..11501a7
--- /dev/null
+++ b/apps/homepage/src/components/homepage/sections/index.ts
@@ -0,0 +1,12 @@
+export { ComparisonSection } from './ComparisonSection';
+export { FaqSection } from './FaqSection';
+export { FinalCtaSection } from './FinalCtaSection';
+export { HeroSection } from './HeroSection';
+export { IntegrationsSection } from './IntegrationsSection';
+export { ModulesSection } from './ModulesSection';
+export { PricingSection } from './PricingSection';
+export { ResultsSection } from './ResultsSection';
+export { RolesSection } from './RolesSection';
+export { SecuritySection } from './SecuritySection';
+export { TrustSection } from './TrustSection';
+export { WorkflowSection } from './WorkflowSection';
diff --git a/apps/homepage/src/components/integrations/DemoDialogHost.module.css b/apps/homepage/src/components/integrations/DemoDialogHost.module.css
new file mode 100644
index 0000000..568069d
--- /dev/null
+++ b/apps/homepage/src/components/integrations/DemoDialogHost.module.css
@@ -0,0 +1,76 @@
+.form {
+  display: grid;
+  gap: var(--space-5);
+}
+
+.notice {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+}
+
+.notice p,
+.statusText {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.spanAll {
+  grid-column: 1 / -1;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.success {
+  display: grid;
+  gap: var(--space-4);
+  text-align: start;
+}
+
+.success h3,
+.success p {
+  margin: 0;
+}
+
+.honeypot {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 639px) {
+  .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .spanAll {
+    grid-column: auto;
+  }
+
+  .actions > * {
+    inline-size: 100%;
+  }
+}
+
+@media (forced-colors: active) {
+  .notice {
+    border: 1px solid CanvasText;
+  }
+}
diff --git a/apps/homepage/src/components/integrations/DemoDialogHost.tsx b/apps/homepage/src/components/integrations/DemoDialogHost.tsx
new file mode 100644
index 0000000..0d77336
--- /dev/null
+++ b/apps/homepage/src/components/integrations/DemoDialogHost.tsx
@@ -0,0 +1,449 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { ErrorSummary, type FormErrorItem } from '@/components/forms/ErrorSummary';
+import { FormField } from '@/components/forms/FormField';
+import { Select, TextArea, TextInput } from '@/components/forms/TextInput';
+import { LiveRegion } from '@/components/foundation/LiveRegion';
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { Dialog } from '@/components/overlays/Dialog';
+import type { HomepageMessages } from '@/lib/localization/messages';
+import { trackAnalytics } from '@/lib/analytics/client';
+import type { AnalyticsContext } from '@/lib/analytics/events';
+import {
+  demoLeadSchema,
+  fleetSizeValues,
+  type DemoSource,
+  type DemoSubmissionResult,
+} from '@/lib/demo/schema';
+import type { Locale } from '@/lib/localization/config';
+import { getDirection } from '@/lib/localization/config';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { demoOpenEventName, type DemoOpenEventDetail } from './DemoTrigger';
+import styles from './DemoDialogHost.module.css';
+
+interface DemoDialogHostProps {
+  locale: Locale;
+  messages: HomepageMessages['form'];
+  enabled: boolean;
+}
+
+type FormStatus = 'idle' | 'submitting' | 'success' | 'error';
+type FieldErrors = Record<string, string>;
+
+function messageForCode(code: string, messages: DemoDialogHostProps['messages']): string {
+  switch (code) {
+    case 'required':
+      return messages.requiredError;
+    case 'invalid_email':
+      return messages.emailError;
+    case 'invalid_fleet_size':
+    case 'invalid_source':
+    case 'invalid_idempotency_key':
+      return messages.invalidOptionError;
+    case 'too_long':
+      return messages.tooLongError;
+    default:
+      return messages.genericError;
+  }
+}
+
+function formMessage(
+  result: Extract<DemoSubmissionResult, { ok: false }>,
+  messages: DemoDialogHostProps['messages'],
+) {
+  switch (result.category) {
+    case 'configuration':
+    case 'consent':
+      return messages.configurationError;
+    case 'timeout':
+      return messages.timeoutError;
+    case 'duplicate':
+      return messages.duplicateError;
+    case 'rate-limit':
+      return messages.rateLimitError;
+    case 'validation':
+      return messages.errorSummary;
+    case 'integration':
+    case 'abuse':
+      return messages.genericError;
+  }
+}
+
+function analyticsContext(
+  locale: Locale,
+  source: DemoSource,
+  extra: Partial<Pick<AnalyticsContext, 'errorCode' | 'errorCount' | 'reason'>> = {},
+): AnalyticsContext {
+  const theme = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+  return {
+    routeId: 'home',
+    locale,
+    direction: getDirection(locale),
+    resolvedTheme: theme,
+    source,
+    ...extra,
+  };
+}
+
+export function DemoDialogHost({ locale, messages, enabled }: DemoDialogHostProps) {
+  const [open, setOpen] = useState(false);
+  const [source, setSource] = useState<DemoSource>('hero');
+  const [status, setStatus] = useState<FormStatus>('idle');
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [formError, setFormError] = useState('');
+  const [messageLength, setMessageLength] = useState(0);
+  const formRef = useRef<HTMLFormElement>(null);
+  const firstFieldRef = useRef<HTMLInputElement>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+  const idempotencyKeyRef = useRef('');
+  const startedAtRef = useRef(0);
+  const closeTrackedRef = useRef(false);
+
+  const summaryErrors = useMemo<FormErrorItem[]>(
+    () =>
+      Object.entries(fieldErrors).map(([fieldId, code]) => ({
+        fieldId,
+        message: messageForCode(code, messages),
+      })),
+    [fieldErrors, messages],
+  );
+
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const detail = (event as CustomEvent<DemoOpenEventDetail>).detail;
+      if (!detail || !enabled) return;
+      returnFocusRef.current = detail.trigger;
+      setSource(detail.source);
+      closeTrackedRef.current = false;
+      setOpen(true);
+      setStatus('idle');
+      setFieldErrors({});
+      setFormError('');
+      idempotencyKeyRef.current = crypto.randomUUID();
+      startedAtRef.current = Date.now();
+      trackAnalytics('demo_open', analyticsContext(locale, detail.source));
+    };
+    window.addEventListener(demoOpenEventName, handleOpen);
+    return () => window.removeEventListener(demoOpenEventName, handleOpen);
+  }, [enabled, locale]);
+
+  const reset = () => {
+    formRef.current?.reset();
+    setMessageLength(0);
+    setStatus('idle');
+    setFieldErrors({});
+    setFormError('');
+    idempotencyKeyRef.current = crypto.randomUUID();
+    startedAtRef.current = Date.now();
+    window.requestAnimationFrame(() => firstFieldRef.current?.focus());
+  };
+
+  const close = () => {
+    if (status === 'submitting' || closeTrackedRef.current) return;
+    closeTrackedRef.current = true;
+    setOpen(false);
+    trackAnalytics('demo_close', analyticsContext(locale, source, { reason: 'user' }));
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) close();
+        else {
+          closeTrackedRef.current = false;
+          setOpen(true);
+        }
+      }}
+      title={messages.title}
+      description={messages.body}
+      closeLabel={messages.close}
+      initialFocusRef={firstFieldRef}
+      returnFocusRef={returnFocusRef}
+      dismissible={status !== 'submitting'}
+    >
+      {status === 'success' ? (
+        <section className={styles.success} aria-live="polite">
+          <StatusBadge tone="success">{messages.localModeLabel}</StatusBadge>
+          <h3>{messages.successTitle}</h3>
+          <p>{messages.successBody}</p>
+          <div className={styles.actions}>
+            <Button intent="primary" onClick={reset}>
+              {messages.submitAnother}
+            </Button>
+            <Button intent="secondary" onClick={close}>
+              {messages.close}
+            </Button>
+          </div>
+        </section>
+      ) : (
+        <form
+          ref={formRef}
+          className={styles.form}
+          noValidate
+          onSubmit={async (event) => {
+            event.preventDefault();
+            if (status === 'submitting') return;
+
+            const form = event.currentTarget;
+            const values = new FormData(form);
+            const leadInput = {
+              fullName: String(values.get('fullName') ?? ''),
+              workEmail: String(values.get('workEmail') ?? ''),
+              company: String(values.get('company') ?? ''),
+              fleetSize: String(values.get('fleetSize') ?? ''),
+              market: String(values.get('market') ?? ''),
+              preferredLanguage: String(values.get('preferredLanguage') ?? locale),
+              message: String(values.get('message') ?? ''),
+              idempotencyKey: idempotencyKeyRef.current || crypto.randomUUID(),
+              source,
+            };
+
+            const clientResult = demoLeadSchema.safeParse(leadInput);
+            if (!clientResult.success) {
+              const nextErrors: FieldErrors = {};
+              for (const issue of clientResult.error.issues) {
+                const field = issue.path.at(-1);
+                if (typeof field === 'string' && !nextErrors[field])
+                  nextErrors[field] = issue.message;
+              }
+              setFieldErrors(nextErrors);
+              setFormError(messages.errorSummary);
+              trackAnalytics(
+                'demo_validation_error',
+                analyticsContext(locale, source, { errorCount: Object.keys(nextErrors).length }),
+              );
+              window.requestAnimationFrame(() => {
+                const firstInvalid = form.querySelector<HTMLElement>('[aria-invalid="true"]');
+                firstInvalid?.focus();
+              });
+              return;
+            }
+
+            setStatus('submitting');
+            setFieldErrors({});
+            setFormError('');
+            trackAnalytics('demo_submit_attempt', analyticsContext(locale, source));
+
+            try {
+              const response = await fetch('/api/demo', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-RDG-Form': 'demo-v1' },
+                body: JSON.stringify({
+                  lead: clientResult.data,
+                  guard: {
+                    honeypot: String(values.get('website') ?? ''),
+                    startedAtMs: startedAtRef.current,
+                  },
+                }),
+              });
+              const result = (await response.json()) as DemoSubmissionResult;
+              if (result.ok) {
+                setStatus('success');
+                trackAnalytics('demo_submit_success', analyticsContext(locale, source));
+                return;
+              }
+
+              const serverErrors = Object.fromEntries(
+                Object.entries(result.fieldErrors ?? {}).map(([field, code]) => [field, code]),
+              );
+              setFieldErrors(serverErrors);
+              setFormError(formMessage(result, messages));
+              setStatus('error');
+              trackAnalytics(
+                'demo_submit_failure',
+                analyticsContext(locale, source, { errorCode: result.category }),
+              );
+              window.requestAnimationFrame(() => {
+                const firstInvalid = form.querySelector<HTMLElement>('[aria-invalid="true"]');
+                firstInvalid?.focus();
+              });
+            } catch {
+              setFormError(messages.genericError);
+              setStatus('error');
+              trackAnalytics(
+                'demo_submit_failure',
+                analyticsContext(locale, source, { errorCode: 'network' }),
+              );
+            }
+          }}
+        >
+          <div className={styles.notice}>
+            <StatusBadge tone="info">{messages.localModeLabel}</StatusBadge>
+            <p>{messages.privacy}</p>
+          </div>
+
+          {formError ? (
+            <ErrorSummary
+              title={formError}
+              errors={
+                summaryErrors.length > 0
+                  ? summaryErrors
+                  : [{ fieldId: 'demo-submit', message: formError }]
+              }
+            />
+          ) : null}
+
+          <div className={styles.grid}>
+            <FormField
+              id="fullName"
+              label={messages.name}
+              required
+              error={
+                fieldErrors.fullName ? messageForCode(fieldErrors.fullName, messages) : undefined
+              }
+            >
+              <TextInput
+                ref={firstFieldRef}
+                id="fullName"
+                name="fullName"
+                autoComplete="name"
+                required
+                maxLength={120}
+                invalid={Boolean(fieldErrors.fullName)}
+                describedBy={fieldErrors.fullName ? 'fullName-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="workEmail"
+              label={messages.email}
+              required
+              error={
+                fieldErrors.workEmail ? messageForCode(fieldErrors.workEmail, messages) : undefined
+              }
+            >
+              <TextInput
+                id="workEmail"
+                name="workEmail"
+                type="email"
+                inputMode="email"
+                autoComplete="email"
+                required
+                maxLength={254}
+                invalid={Boolean(fieldErrors.workEmail)}
+                describedBy={fieldErrors.workEmail ? 'workEmail-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="company"
+              label={messages.company}
+              required
+              error={
+                fieldErrors.company ? messageForCode(fieldErrors.company, messages) : undefined
+              }
+            >
+              <TextInput
+                id="company"
+                name="company"
+                autoComplete="organization"
+                required
+                maxLength={160}
+                invalid={Boolean(fieldErrors.company)}
+                describedBy={fieldErrors.company ? 'company-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="fleetSize"
+              label={messages.fleet}
+              required
+              error={
+                fieldErrors.fleetSize ? messageForCode(fieldErrors.fleetSize, messages) : undefined
+              }
+            >
+              <Select
+                id="fleetSize"
+                name="fleetSize"
+                required
+                defaultValue=""
+                invalid={Boolean(fieldErrors.fleetSize)}
+                describedBy={fieldErrors.fleetSize ? 'fleetSize-error' : undefined}
+              >
+                <option value="">{messages.fleetOptions[0]}</option>
+                {fleetSizeValues.map((value, index) => (
+                  <option key={value} value={value}>
+                    {messages.fleetOptions[index + 1]}
+                  </option>
+                ))}
+              </Select>
+            </FormField>
+
+            <FormField id="market" label={messages.market} optionalLabel={messages.optional}>
+              <TextInput id="market" name="market" defaultValue={messages.marketDefault} autoComplete="country-name" maxLength={100} />
+            </FormField>
+
+            <FormField
+              id="preferredLanguage"
+              label={messages.language}
+              optionalLabel={messages.optional}
+            >
+              <Select id="preferredLanguage" name="preferredLanguage" defaultValue={locale}>
+                {(['en', 'fr', 'ar'] as const).map((value, index) => (
+                  <option key={value} value={value}>
+                    {messages.langOptions[index]}
+                  </option>
+                ))}
+              </Select>
+            </FormField>
+
+            <FormField
+              id="message"
+              label={messages.message}
+              optionalLabel={messages.optional}
+              supportingText={messages.messageHelp}
+              className={styles.spanAll}
+              error={
+                fieldErrors.message ? messageForCode(fieldErrors.message, messages) : undefined
+              }
+            >
+              <TextArea
+                id="message"
+                name="message"
+                rows={5}
+                maxLength={1000}
+                invalid={Boolean(fieldErrors.message)}
+                describedBy={fieldErrors.message ? 'message-help message-error' : 'message-help'}
+                characterCount={{ current: messageLength, max: 1000, label: messages.messageCount }}
+                onInput={(event) => setMessageLength(event.currentTarget.value.length)}
+              />
+            </FormField>
+          </div>
+
+          <div className={styles.honeypot} aria-hidden="true">
+            <label htmlFor="website">Website</label>
+            <input id="website" name="website" tabIndex={-1} autoComplete="off" />
+          </div>
+
+          <div className={styles.actions}>
+            <Button
+              id="demo-submit"
+              type="submit"
+              intent="conversion"
+              loading={status === 'submitting'}
+            >
+              {status === 'submitting'
+                ? messages.submitting
+                : status === 'error'
+                  ? messages.retry
+                  : messages.submit}
+            </Button>
+            <Button
+              type="button"
+              intent="tertiary"
+              disabled={status === 'submitting'}
+              onClick={close}
+            >
+              {messages.close}
+            </Button>
+          </div>
+          <LiveRegion politeness="polite">
+            {status === 'submitting' ? messages.submitting : ''}
+          </LiveRegion>
+        </form>
+      )}
+    </Dialog>
+  );
+}
diff --git a/apps/homepage/src/components/integrations/DemoTrigger.tsx b/apps/homepage/src/components/integrations/DemoTrigger.tsx
new file mode 100644
index 0000000..bffd0e2
--- /dev/null
+++ b/apps/homepage/src/components/integrations/DemoTrigger.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { ActionLink } from '@/components/actions/ActionLink';
+import type { DemoSource } from '@/lib/demo/schema';
+
+export const demoOpenEventName = 'rdg:demo-open';
+
+export interface DemoOpenEventDetail {
+  source: DemoSource;
+  trigger: HTMLElement;
+}
+
+interface DemoTriggerProps {
+  label: string;
+  source: DemoSource;
+  disabledReason?: string | undefined;
+  size?: 'small' | 'medium' | 'large';
+  fullWidth?: boolean;
+  className?: string | undefined;
+  onActivate?: (() => void) | undefined;
+}
+
+export function DemoTrigger({
+  label,
+  source,
+  disabledReason,
+  size = 'medium',
+  fullWidth = false,
+  className,
+  onActivate,
+}: DemoTriggerProps) {
+  if (disabledReason) {
+    return (
+      <ActionLink
+        href="/"
+        variant="button-conversion"
+        disabledReason={disabledReason}
+        className={className}
+      >
+        {label}
+      </ActionLink>
+    );
+  }
+
+  return (
+    <Button
+      intent="conversion"
+      size={size}
+      fullWidth={fullWidth}
+      className={className}
+      data-demo-source={source}
+      onClick={(event) => {
+        onActivate?.();
+        window.dispatchEvent(
+          new CustomEvent<DemoOpenEventDetail>(demoOpenEventName, {
+            detail: { source, trigger: event.currentTarget },
+          }),
+        );
+      }}
+    >
+      {label}
+    </Button>
+  );
+}
diff --git a/apps/homepage/src/components/layout/LayoutPrimitives.module.css b/apps/homepage/src/components/layout/LayoutPrimitives.module.css
new file mode 100644
index 0000000..71b34f2
--- /dev/null
+++ b/apps/homepage/src/components/layout/LayoutPrimitives.module.css
@@ -0,0 +1,81 @@
+.container {
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-inline: var(--layout-gutter);
+}
+
+.content {
+  max-inline-size: var(--container-content);
+}
+
+.reading {
+  max-inline-size: var(--container-reading);
+}
+
+.full {
+  max-inline-size: none;
+}
+
+.section {
+  padding-block: var(--section-space);
+}
+
+.sectionMuted {
+  background: var(--surface-muted);
+}
+
+.sectionStrong {
+  background: var(--surface-strong);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.stackSmall {
+  gap: var(--space-3);
+}
+
+.stackMedium {
+  gap: var(--space-6);
+}
+
+.stackLarge {
+  gap: var(--space-12);
+}
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.clusterSmall {
+  gap: var(--space-2);
+}
+
+.clusterMedium {
+  gap: var(--space-4);
+}
+
+.clusterLarge {
+  gap: var(--space-8);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  gap: var(--space-6);
+}
+
+.bleed {
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+}
+
+.sticky {
+  position: sticky;
+  z-index: var(--layer-sticky);
+  inset-block-start: 0;
+}
diff --git a/apps/homepage/src/components/layout/LayoutPrimitives.tsx b/apps/homepage/src/components/layout/LayoutPrimitives.tsx
new file mode 100644
index 0000000..6332295
--- /dev/null
+++ b/apps/homepage/src/components/layout/LayoutPrimitives.tsx
@@ -0,0 +1,92 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './LayoutPrimitives.module.css';
+
+type ContainerWidth = 'wide' | 'content' | 'reading' | 'full';
+type Gap = 'small' | 'medium' | 'large';
+type SectionTone = 'default' | 'muted' | 'strong';
+
+function classes(...values: Array<string | false | undefined>): string {
+  return values.filter(Boolean).join(' ');
+}
+
+export function Container({
+  children,
+  width = 'wide',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; width?: ContainerWidth }) {
+  return (
+    <div className={classes(styles.container, styles[width], className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function Section({
+  children,
+  tone = 'default',
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement> & { children: ReactNode; tone?: SectionTone }) {
+  return (
+    <section
+      className={classes(
+        styles.section,
+        tone === 'muted' && styles.sectionMuted,
+        tone === 'strong' && styles.sectionStrong,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+}
+
+export function Stack({
+  children,
+  gap = 'medium',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
+  const gapClass = {
+    small: styles.stackSmall,
+    medium: styles.stackMedium,
+    large: styles.stackLarge,
+  }[gap];
+  return (
+    <div className={classes(styles.stack, gapClass, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function Cluster({
+  children,
+  gap = 'medium',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
+  const gapClass = {
+    small: styles.clusterSmall,
+    medium: styles.clusterMedium,
+    large: styles.clusterLarge,
+  }[gap];
+  return (
+    <div className={classes(styles.cluster, gapClass, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function ResponsiveGrid({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return (
+    <div className={classes(styles.grid, className)} {...props}>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/CTA.module.css b/apps/homepage/src/components/marketing/CTA.module.css
new file mode 100644
index 0000000..d42d4c6
--- /dev/null
+++ b/apps/homepage/src/components/marketing/CTA.module.css
@@ -0,0 +1,42 @@
+.cta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-8);
+}
+.copy {
+  display: grid;
+  gap: var(--space-3);
+}
+.eyebrow {
+  margin: 0;
+  color: var(--interactive-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+.inline {
+  border-radius: var(--radius-sm);
+}
+.card {
+  grid-template-columns: 1fr;
+}
+.card .actions {
+  justify-content: flex-start;
+}
+@media (max-width: 767px) {
+  .cta {
+    grid-template-columns: 1fr;
+  }
+  .actions {
+    justify-content: flex-start;
+  }
+  .actions > * {
+    inline-size: 100%;
+  }
+}
diff --git a/apps/homepage/src/components/marketing/CTA.tsx b/apps/homepage/src/components/marketing/CTA.tsx
new file mode 100644
index 0000000..5f883a3
--- /dev/null
+++ b/apps/homepage/src/components/marketing/CTA.tsx
@@ -0,0 +1,73 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import type { ReactNode } from 'react';
+import styles from './CTA.module.css';
+
+export interface CTAAction {
+  label: string;
+  href?: string;
+  disabledReason?: string;
+}
+
+interface CTAProps {
+  eyebrow?: string;
+  title: string;
+  body?: string;
+  primary: CTAAction;
+  secondary?: CTAAction;
+  headingLevel?: HeadingLevel;
+  layout?: 'inline' | 'section' | 'card';
+  primaryNode?: ReactNode;
+  secondaryNode?: ReactNode;
+}
+
+export function CTA({
+  eyebrow,
+  title,
+  body,
+  primary,
+  secondary,
+  headingLevel = 2,
+  layout = 'section',
+  primaryNode,
+  secondaryNode,
+}: CTAProps) {
+  return (
+    <Card
+      as="section"
+      tone={layout === 'section' ? 'strong' : 'elevated'}
+      padding={layout === 'inline' ? 'compact' : 'spacious'}
+      className={`${styles.cta} ${styles[layout]}`}
+    >
+      <div className={styles.copy}>
+        {eyebrow ? <p className={styles.eyebrow}>{eyebrow}</p> : null}
+        <Heading level={headingLevel} appearance={layout === 'inline' ? 'subheading' : 'section'}>
+          {title}
+        </Heading>
+        {body ? <Text variant="supporting">{body}</Text> : null}
+      </div>
+      <div className={styles.actions}>
+        {primaryNode ?? (
+          <ActionLink
+            href={primary.href ?? '/'}
+            variant="button-conversion"
+            {...(primary.disabledReason ? { disabledReason: primary.disabledReason } : {})}
+          >
+            {primary.label}
+          </ActionLink>
+        )}
+        {secondaryNode ??
+          (secondary ? (
+            <ActionLink
+              href={secondary.href ?? '/'}
+              variant="button-primary"
+              {...(secondary.disabledReason ? { disabledReason: secondary.disabledReason } : {})}
+            >
+              {secondary.label}
+            </ActionLink>
+          ) : null)}
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/Comparison.module.css b/apps/homepage/src/components/marketing/Comparison.module.css
new file mode 100644
index 0000000..ca40c0a
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Comparison.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+  display: grid;
+  gap: var(--space-6);
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+.column {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+}
+.column ul {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.column li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-2);
+  align-items: start;
+}
+.column li svg {
+  margin-block-start: 0.25rem;
+}
+@media (max-width: 767px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/homepage/src/components/marketing/Comparison.tsx b/apps/homepage/src/components/marketing/Comparison.tsx
new file mode 100644
index 0000000..935a38b
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Comparison.tsx
@@ -0,0 +1,51 @@
+import { Icon } from '@/components/foundation/Icon';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './Comparison.module.css';
+
+export interface ComparisonColumn {
+  title: string;
+  items: string[];
+  tone: 'problem' | 'solution';
+}
+
+interface ComparisonProps {
+  title?: string;
+  body?: string;
+  columns: [ComparisonColumn, ComparisonColumn];
+  headingLevel?: HeadingLevel;
+}
+
+export function Comparison({ title, body, columns, headingLevel = 2 }: ComparisonProps) {
+  return (
+    <div className={styles.wrapper}>
+      {title ? (
+        <Heading level={headingLevel} appearance="section">
+          {title}
+        </Heading>
+      ) : null}
+      {body ? <Text variant="lead">{body}</Text> : null}
+      <div className={styles.grid}>
+        {columns.map((column) => (
+          <Card
+            key={column.title}
+            tone={column.tone === 'solution' ? 'elevated' : 'muted'}
+            className={styles.column}
+          >
+            <Heading level={(headingLevel + 1) as 2 | 3 | 4 | 5 | 6} appearance="subheading">
+              {column.title}
+            </Heading>
+            <ul>
+              {column.items.map((item) => (
+                <li key={item}>
+                  <Icon name={column.tone === 'solution' ? 'check' : 'minus'} size="sm" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/Evidence.module.css b/apps/homepage/src/components/marketing/Evidence.module.css
new file mode 100644
index 0000000..3d600b9
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Evidence.module.css
@@ -0,0 +1,25 @@
+.metric {
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+}
+.value {
+  display: block;
+  font-size: var(--type-heading-1-size);
+  font-weight: 850;
+  line-height: 1;
+}
+.source {
+  color: var(--text-secondary);
+}
+.shell {
+  display: grid;
+  gap: var(--space-4);
+}
+.shellHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
diff --git a/apps/homepage/src/components/marketing/Evidence.tsx b/apps/homepage/src/components/marketing/Evidence.tsx
new file mode 100644
index 0000000..b74dd11
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Evidence.tsx
@@ -0,0 +1,81 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import type { ReactNode } from 'react';
+import styles from './Evidence.module.css';
+
+export type EvidenceStatus = 'approved' | 'pending-review' | 'research-only' | 'prohibited';
+
+export interface MetricContent {
+  value: string;
+  label: string;
+  qualification?: string;
+  sourceReference?: string;
+  status: EvidenceStatus;
+}
+
+const statusTone = {
+  approved: 'success',
+  'pending-review': 'warning',
+  'research-only': 'info',
+  prohibited: 'error',
+} as const;
+
+export function canRenderProductionEvidence(status: EvidenceStatus): boolean {
+  return status === 'approved';
+}
+
+interface MetricProps {
+  content: MetricContent;
+  statusLabel: string;
+  production?: boolean;
+  headingLevel?: HeadingLevel;
+}
+
+export function Metric({
+  content,
+  statusLabel,
+  production = false,
+  headingLevel = 3,
+}: MetricProps) {
+  if (production && !canRenderProductionEvidence(content.status)) return null;
+  return (
+    <Card className={styles.metric}>
+      <StatusBadge tone={statusTone[content.status]}>{statusLabel}</StatusBadge>
+      <BidiText className={styles.value}>{content.value}</BidiText>
+      <Heading level={headingLevel} appearance="subheading">
+        {content.label}
+      </Heading>
+      {content.qualification ? <Text variant="supporting">{content.qualification}</Text> : null}
+      {content.sourceReference ? (
+        <small className={styles.source}>{content.sourceReference}</small>
+      ) : null}
+    </Card>
+  );
+}
+
+export function EvidenceShell({
+  title,
+  status,
+  statusLabel,
+  children,
+}: {
+  title: string;
+  status: EvidenceStatus;
+  statusLabel: string;
+  children?: ReactNode;
+}) {
+  if (status === 'prohibited') return null;
+  return (
+    <Card className={styles.shell} tone="muted">
+      <div className={styles.shellHeader}>
+        <Heading level={3} appearance="subheading">
+          {title}
+        </Heading>
+        <StatusBadge tone={statusTone[status]}>{statusLabel}</StatusBadge>
+      </div>
+      {children}
+    </Card>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/FeatureCard.module.css b/apps/homepage/src/components/marketing/FeatureCard.module.css
new file mode 100644
index 0000000..9c1c6bd
--- /dev/null
+++ b/apps/homepage/src/components/marketing/FeatureCard.module.css
@@ -0,0 +1,18 @@
+.card {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  block-size: 100%;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border-radius: var(--radius-sm);
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.card > :last-child {
+  margin-block-start: auto;
+}
diff --git a/apps/homepage/src/components/marketing/FeatureCard.tsx b/apps/homepage/src/components/marketing/FeatureCard.tsx
new file mode 100644
index 0000000..b22dbcd
--- /dev/null
+++ b/apps/homepage/src/components/marketing/FeatureCard.tsx
@@ -0,0 +1,50 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './FeatureCard.module.css';
+
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+  headingLevel?: HeadingLevel;
+  emphasis?: 'default' | 'primary' | 'muted';
+  action?: { label: string; href: string; disabledReason?: string };
+}
+
+export function FeatureCard({
+  title,
+  description,
+  icon,
+  headingLevel = 3,
+  emphasis = 'default',
+  action,
+}: FeatureCardProps) {
+  return (
+    <Card
+      tone={emphasis === 'muted' ? 'muted' : emphasis === 'primary' ? 'elevated' : 'default'}
+      className={styles.card}
+    >
+      {icon ? (
+        <span className={styles.icon}>
+          <Icon name={icon} size="lg" />
+        </span>
+      ) : null}
+      <Heading level={headingLevel} appearance="subheading">
+        {title}
+      </Heading>
+      <Text variant="supporting">{description}</Text>
+      {action ? (
+        <ActionLink
+          href={action.href}
+          variant="standalone"
+          icon="arrow-forward"
+          {...(action.disabledReason ? { disabledReason: action.disabledReason } : {})}
+        >
+          {action.label}
+        </ActionLink>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/ProductPreview.module.css b/apps/homepage/src/components/marketing/ProductPreview.module.css
new file mode 100644
index 0000000..2dafc15
--- /dev/null
+++ b/apps/homepage/src/components/marketing/ProductPreview.module.css
@@ -0,0 +1,69 @@
+.figure {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+}
+.preview {
+  overflow: hidden;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border-block-end: 1px solid var(--border-standard);
+}
+.header > div {
+  display: grid;
+  gap: var(--space-1);
+}
+.dots {
+  display: flex;
+  gap: var(--space-1);
+}
+.dots i {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--border-strong);
+}
+.table {
+  display: grid;
+}
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-block-end: 1px solid var(--border-standard);
+}
+.row:last-child {
+  border-block-end: 0;
+}
+.row > div:first-child {
+  display: grid;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+.secondary {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  overflow-wrap: anywhere;
+}
+.empty {
+  margin: 0;
+  padding: var(--space-8);
+  color: var(--text-secondary);
+  text-align: center;
+}
+.figure figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+@media (max-width: 479px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/homepage/src/components/marketing/ProductPreview.tsx b/apps/homepage/src/components/marketing/ProductPreview.tsx
new file mode 100644
index 0000000..2a4cfd9
--- /dev/null
+++ b/apps/homepage/src/components/marketing/ProductPreview.tsx
@@ -0,0 +1,71 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { StatusBadge, type StatusTone } from '@/components/foundation/StatusBadge';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './ProductPreview.module.css';
+
+export interface PreviewRow {
+  id: string;
+  primary: string;
+  secondary: string;
+  status: string;
+  statusTone?: StatusTone;
+}
+
+interface ProductPreviewProps {
+  title: string;
+  caption: string;
+  rows: PreviewRow[];
+  illustrativeLabel: string;
+  emptyLabel?: string;
+  headingLevel?: HeadingLevel;
+}
+
+export function ProductPreview({
+  title,
+  caption,
+  rows,
+  illustrativeLabel,
+  emptyLabel = 'No preview data',
+  headingLevel = 3,
+}: ProductPreviewProps) {
+  return (
+    <figure className={styles.figure}>
+      <Card tone="elevated" padding="none" className={styles.preview}>
+        <header className={styles.header}>
+          <div>
+            <Heading level={headingLevel} appearance="subheading">
+              {title}
+            </Heading>
+            <Text variant="caption">{illustrativeLabel}</Text>
+          </div>
+          <span className={styles.dots} aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+        </header>
+        {rows.length > 0 ? (
+          <div className={styles.table} role="table" aria-label={title}>
+            {rows.map((row) => (
+              <div key={row.id} className={styles.row} role="row">
+                <div role="cell">
+                  <strong>{row.primary}</strong>
+                  <BidiText className={styles.secondary}>{row.secondary}</BidiText>
+                </div>
+                <div role="cell">
+                  <StatusBadge {...(row.statusTone ? { tone: row.statusTone } : {})}>
+                    {row.status}
+                  </StatusBadge>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className={styles.empty}>{emptyLabel}</p>
+        )}
+      </Card>
+      <figcaption>{caption}</figcaption>
+    </figure>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/SectionHeader.module.css b/apps/homepage/src/components/marketing/SectionHeader.module.css
new file mode 100644
index 0000000..9c95cef
--- /dev/null
+++ b/apps/homepage/src/components/marketing/SectionHeader.module.css
@@ -0,0 +1,13 @@
+.header {
+  display: grid;
+  gap: var(--space-4);
+  max-inline-size: var(--container-reading);
+}
+.center {
+  margin-inline: auto;
+  justify-items: center;
+  text-align: center;
+}
+.center p {
+  margin-inline: auto;
+}
diff --git a/apps/homepage/src/components/marketing/SectionHeader.tsx b/apps/homepage/src/components/marketing/SectionHeader.tsx
new file mode 100644
index 0000000..38e6a0e
--- /dev/null
+++ b/apps/homepage/src/components/marketing/SectionHeader.tsx
@@ -0,0 +1,31 @@
+import { Eyebrow, Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import { classNames } from '@/lib/components/classNames';
+import styles from './SectionHeader.module.css';
+
+interface SectionHeaderProps {
+  eyebrow?: string;
+  title: string;
+  body?: string;
+  headingLevel?: HeadingLevel;
+  alignment?: 'start' | 'center';
+  className?: string;
+}
+
+export function SectionHeader({
+  eyebrow,
+  title,
+  body,
+  headingLevel = 2,
+  alignment = 'start',
+  className,
+}: SectionHeaderProps) {
+  return (
+    <header className={classNames(styles.header, styles[alignment], className)}>
+      {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
+      <Heading level={headingLevel} appearance="section">
+        {title}
+      </Heading>
+      {body ? <Text variant="lead">{body}</Text> : null}
+    </header>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/SectionPatterns.module.css b/apps/homepage/src/components/marketing/SectionPatterns.module.css
new file mode 100644
index 0000000..66d56ad
--- /dev/null
+++ b/apps/homepage/src/components/marketing/SectionPatterns.module.css
@@ -0,0 +1,44 @@
+.featureGrid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+}
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(var(--space-8), 7vw, var(--space-16));
+}
+.copy {
+  min-inline-size: 0;
+}
+.media {
+  min-inline-size: 0;
+}
+.reverse .copy {
+  order: 2;
+}
+.reverse .media {
+  order: 1;
+}
+.metricStrip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: var(--space-4);
+}
+.logoStrip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  padding: var(--space-6);
+  border-block: 1px solid var(--border-standard);
+}
+@media (max-width: 767px) {
+  .split {
+    grid-template-columns: 1fr;
+  }
+  .reverse .copy,
+  .reverse .media {
+    order: initial;
+  }
+}
diff --git a/apps/homepage/src/components/marketing/SectionPatterns.tsx b/apps/homepage/src/components/marketing/SectionPatterns.tsx
new file mode 100644
index 0000000..91d697d
--- /dev/null
+++ b/apps/homepage/src/components/marketing/SectionPatterns.tsx
@@ -0,0 +1,36 @@
+import { ResponsiveGrid } from '@/components/layout/LayoutPrimitives';
+import type { ReactNode } from 'react';
+import styles from './SectionPatterns.module.css';
+
+export function FeatureGrid({ children }: { children: ReactNode }) {
+  return <ResponsiveGrid className={styles.featureGrid}>{children}</ResponsiveGrid>;
+}
+
+export function SplitContent({
+  copy,
+  media,
+  reverse = false,
+}: {
+  copy: ReactNode;
+  media: ReactNode;
+  reverse?: boolean;
+}) {
+  return (
+    <div className={`${styles.split} ${reverse ? styles.reverse : ''}`}>
+      <div className={styles.copy}>{copy}</div>
+      <div className={styles.media}>{media}</div>
+    </div>
+  );
+}
+
+export function MetricStrip({ children }: { children: ReactNode }) {
+  return <div className={styles.metricStrip}>{children}</div>;
+}
+
+export function LogoStripShell({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className={styles.logoStrip} role="group" aria-label={label}>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/marketing/Workflow.module.css b/apps/homepage/src/components/marketing/Workflow.module.css
new file mode 100644
index 0000000..0217ccd
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Workflow.module.css
@@ -0,0 +1,48 @@
+.workflow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: workflow;
+}
+.step {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-content: start;
+  gap: var(--space-4);
+  min-inline-size: 0;
+}
+.marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border: 2px solid var(--interactive-primary);
+  border-radius: 50%;
+  background: var(--surface-elevated);
+  color: var(--interactive-primary);
+  font-weight: 800;
+}
+.content {
+  display: grid;
+  gap: var(--space-2);
+}
+.connector {
+  position: absolute;
+  inset-block-start: 0.8rem;
+  inset-inline-end: calc(var(--space-6) * -0.75);
+  color: var(--text-subdued);
+}
+@media (max-width: 767px) {
+  .workflow {
+    grid-template-columns: 1fr;
+  }
+  .connector {
+    display: none;
+  }
+}
diff --git a/apps/homepage/src/components/marketing/Workflow.tsx b/apps/homepage/src/components/marketing/Workflow.tsx
new file mode 100644
index 0000000..9edbecb
--- /dev/null
+++ b/apps/homepage/src/components/marketing/Workflow.tsx
@@ -0,0 +1,43 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './Workflow.module.css';
+
+export interface WorkflowItem {
+  id: string;
+  ordinal: string;
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+}
+
+interface WorkflowProps {
+  items: WorkflowItem[];
+  label: string;
+  headingLevel?: HeadingLevel;
+}
+
+export function Workflow({ items, label, headingLevel = 3 }: WorkflowProps) {
+  return (
+    <ol className={styles.workflow} aria-label={label}>
+      {items.map((item, index) => (
+        <li key={item.id} className={styles.step}>
+          <div className={styles.marker} aria-hidden="true">
+            {item.icon ? <Icon name={item.icon} /> : <BidiText>{item.ordinal}</BidiText>}
+          </div>
+          <div className={styles.content}>
+            <Heading level={headingLevel} appearance="subheading">
+              {item.title}
+            </Heading>
+            <Text variant="supporting">{item.description}</Text>
+          </div>
+          {index < items.length - 1 ? (
+            <span className={styles.connector} aria-hidden="true">
+              <Icon name="arrow-forward" directionBehavior="mirror" />
+            </span>
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  );
+}
diff --git a/apps/homepage/src/components/media/MediaFrame.module.css b/apps/homepage/src/components/media/MediaFrame.module.css
new file mode 100644
index 0000000..00eb591
--- /dev/null
+++ b/apps/homepage/src/components/media/MediaFrame.module.css
@@ -0,0 +1,39 @@
+.figure {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+}
+.frame {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-inline-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+}
+.square {
+  aspect-ratio: 1;
+}
+.landscape {
+  aspect-ratio: 4 / 3;
+}
+.wide {
+  aspect-ratio: 16 / 9;
+}
+.portrait {
+  aspect-ratio: 3 / 4;
+}
+.auto {
+  aspect-ratio: auto;
+}
+.image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.figure figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
diff --git a/apps/homepage/src/components/media/MediaFrame.tsx b/apps/homepage/src/components/media/MediaFrame.tsx
new file mode 100644
index 0000000..831cddf
--- /dev/null
+++ b/apps/homepage/src/components/media/MediaFrame.tsx
@@ -0,0 +1,47 @@
+import { classNames } from '@/lib/components/classNames';
+import Image, { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+import styles from './MediaFrame.module.css';
+
+export type MediaRatio = 'square' | 'landscape' | 'wide' | 'portrait' | 'auto';
+
+interface MediaFrameProps {
+  ratio?: MediaRatio;
+  children: ReactNode;
+  caption?: string;
+  decorative?: boolean;
+  className?: string;
+}
+
+export function MediaFrame({
+  ratio = 'landscape',
+  children,
+  caption,
+  decorative = false,
+  className,
+}: MediaFrameProps) {
+  return (
+    <figure className={classNames(styles.figure, className)} aria-hidden={decorative || undefined}>
+      <div className={classNames(styles.frame, styles[ratio])}>{children}</div>
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+}
+
+interface ResponsiveImageProps extends Omit<ImageProps, 'fill'> {
+  ratio?: MediaRatio;
+  caption?: string;
+}
+
+export function ResponsiveImage({
+  ratio = 'landscape',
+  caption,
+  alt,
+  ...props
+}: ResponsiveImageProps) {
+  return (
+    <MediaFrame ratio={ratio} decorative={alt === ''} {...(caption ? { caption } : {})}>
+      <Image alt={alt} {...props} className={classNames(styles.image, props.className)} />
+    </MediaFrame>
+  );
+}
diff --git a/apps/homepage/src/components/navigation/Breadcrumbs.module.css b/apps/homepage/src/components/navigation/Breadcrumbs.module.css
new file mode 100644
index 0000000..d4cfed8
--- /dev/null
+++ b/apps/homepage/src/components/navigation/Breadcrumbs.module.css
@@ -0,0 +1,18 @@
+.nav ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.separator {
+  color: var(--text-subdued);
+}
diff --git a/apps/homepage/src/components/navigation/Breadcrumbs.tsx b/apps/homepage/src/components/navigation/Breadcrumbs.tsx
new file mode 100644
index 0000000..770e2d0
--- /dev/null
+++ b/apps/homepage/src/components/navigation/Breadcrumbs.tsx
@@ -0,0 +1,39 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import styles from './Breadcrumbs.module.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumbs({ label, items }: { label: string; items: BreadcrumbItem[] }) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ol>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+          return (
+            <li key={`${item.label}-${index}`}>
+              {index > 0 ? (
+                <Icon
+                  name="chevron-forward"
+                  size="sm"
+                  directionBehavior="mirror"
+                  className={styles.separator}
+                />
+              ) : null}
+              {item.href && !current ? (
+                <ActionLink href={item.href} variant="inline">
+                  {item.label}
+                </ActionLink>
+              ) : (
+                <span aria-current={current ? 'page' : undefined}>{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/apps/homepage/src/components/navigation/FooterLinkGroup.module.css b/apps/homepage/src/components/navigation/FooterLinkGroup.module.css
new file mode 100644
index 0000000..2e5251e
--- /dev/null
+++ b/apps/homepage/src/components/navigation/FooterLinkGroup.module.css
@@ -0,0 +1,11 @@
+.group h2 {
+  margin: 0;
+  font-size: var(--type-body-size);
+}
+.group ul {
+  display: grid;
+  gap: var(--space-2);
+  margin: var(--space-3) 0 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/apps/homepage/src/components/navigation/FooterLinkGroup.tsx b/apps/homepage/src/components/navigation/FooterLinkGroup.tsx
new file mode 100644
index 0000000..0783a58
--- /dev/null
+++ b/apps/homepage/src/components/navigation/FooterLinkGroup.tsx
@@ -0,0 +1,30 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './FooterLinkGroup.module.css';
+
+export interface FooterLinkItem {
+  id: string;
+  label: string;
+  href?: string;
+  disabledReason?: string;
+}
+
+export function FooterLinkGroup({ title, links }: { title: string; links: FooterLinkItem[] }) {
+  return (
+    <section className={styles.group}>
+      <h2>{title}</h2>
+      <ul>
+        {links.map((link) => (
+          <li key={link.id}>
+            <ActionLink
+              href={link.href ?? '/'}
+              variant="muted"
+              {...(link.disabledReason ? { disabledReason: link.disabledReason } : {})}
+            >
+              {link.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/apps/homepage/src/components/navigation/SectionNavigation.module.css b/apps/homepage/src/components/navigation/SectionNavigation.module.css
new file mode 100644
index 0000000..e2e52d3
--- /dev/null
+++ b/apps/homepage/src/components/navigation/SectionNavigation.module.css
@@ -0,0 +1,20 @@
+.nav {
+  overflow-x: auto;
+  border-block-end: 1px solid var(--border-standard);
+}
+.nav ul {
+  display: flex;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav a {
+  border-block-end: 3px solid transparent;
+}
+.nav a[aria-current='location'] {
+  border-block-end-color: var(--interactive-primary);
+  color: var(--text-primary);
+}
diff --git a/apps/homepage/src/components/navigation/SectionNavigation.tsx b/apps/homepage/src/components/navigation/SectionNavigation.tsx
new file mode 100644
index 0000000..ba09602
--- /dev/null
+++ b/apps/homepage/src/components/navigation/SectionNavigation.tsx
@@ -0,0 +1,35 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './SectionNavigation.module.css';
+
+export interface SectionNavigationItem {
+  id: string;
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+export function SectionNavigation({
+  label,
+  items,
+}: {
+  label: string;
+  items: SectionNavigationItem[];
+}) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ul>
+        {items.map((item) => (
+          <li key={item.id}>
+            <ActionLink
+              href={item.href}
+              variant="navigation"
+              aria-current={item.current ? 'location' : undefined}
+            >
+              {item.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/apps/homepage/src/components/overlays/Dialog.module.css b/apps/homepage/src/components/overlays/Dialog.module.css
new file mode 100644
index 0000000..59ace84
--- /dev/null
+++ b/apps/homepage/src/components/overlays/Dialog.module.css
@@ -0,0 +1,71 @@
+.dialog {
+  max-inline-size: none;
+  max-block-size: none;
+  margin: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  overflow: visible;
+}
+.dialog::backdrop {
+  background: var(--overlay-scrim);
+}
+.panel {
+  display: grid;
+  max-block-size: calc(100dvh - var(--space-8));
+  overflow: hidden;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+.modal .panel {
+  inline-size: min(44rem, calc(100vw - var(--space-8)));
+}
+.drawer {
+  margin-block: 0;
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+.drawer .panel {
+  inline-size: min(24rem, 88vw);
+  min-block-size: 100dvh;
+  border-radius: 0;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border-block-end: 1px solid var(--border-standard);
+}
+.header h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.header p {
+  margin-block: var(--space-2) 0;
+  color: var(--text-secondary);
+}
+.content {
+  min-block-size: 0;
+  padding: var(--space-6);
+  overflow-y: auto;
+}
+@media (max-width: 479px) {
+  .modal .panel {
+    inline-size: calc(100vw - var(--space-4));
+    max-block-size: calc(100dvh - var(--space-4));
+  }
+  .header,
+  .content {
+    padding: var(--space-4);
+  }
+}
+@media (forced-colors: active) {
+  .panel {
+    border: 2px solid CanvasText;
+  }
+}
diff --git a/apps/homepage/src/components/overlays/Dialog.tsx b/apps/homepage/src/components/overlays/Dialog.tsx
new file mode 100644
index 0000000..8d4323d
--- /dev/null
+++ b/apps/homepage/src/components/overlays/Dialog.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { useScrollLock } from '@/components/foundation/client-hooks';
+import { classNames } from '@/lib/components/classNames';
+import { useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';
+import styles from './Dialog.module.css';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  closeLabel: string;
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  returnFocusRef?: RefObject<HTMLElement | null>;
+  variant?: 'modal' | 'drawer';
+  dismissible?: boolean;
+  className?: string;
+}
+
+export function Dialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  closeLabel,
+  initialFocusRef,
+  returnFocusRef,
+  variant = 'modal',
+  dismissible = true,
+  className,
+}: DialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  useScrollLock(open);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+      window.requestAnimationFrame(() => (initialFocusRef?.current ?? closeRef.current)?.focus());
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [initialFocusRef, open]);
+
+  const close = () => {
+    dialogRef.current?.close();
+    onOpenChange(false);
+    window.requestAnimationFrame(() => returnFocusRef?.current?.focus());
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={classNames(styles.dialog, styles[variant], className)}
+      aria-labelledby={titleId}
+      aria-describedby={description ? descriptionId : undefined}
+      onCancel={(event) => {
+        if (!dismissible) {
+          event.preventDefault();
+          return;
+        }
+        event.preventDefault();
+        close();
+      }}
+      onClose={() => onOpenChange(false)}
+      onClick={(event) => {
+        if (dismissible && event.target === dialogRef.current) close();
+      }}
+    >
+      <div className={styles.panel}>
+        <header className={styles.header}>
+          <div>
+            <h2 id={titleId}>{title}</h2>
+            {description ? <p id={descriptionId}>{description}</p> : null}
+          </div>
+          {dismissible ? (
+            <Button
+              ref={closeRef}
+              intent="ghost"
+              size="small"
+              icon="close"
+              aria-label={closeLabel}
+              onClick={close}
+            />
+          ) : null}
+        </header>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/apps/homepage/src/components/overlays/DropdownMenu.module.css b/apps/homepage/src/components/overlays/DropdownMenu.module.css
new file mode 100644
index 0000000..143a549
--- /dev/null
+++ b/apps/homepage/src/components/overlays/DropdownMenu.module.css
@@ -0,0 +1,39 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+.menu {
+  position: absolute;
+  z-index: var(--layer-overlay);
+  inset-block-start: calc(100% + var(--space-2));
+  inset-inline-end: 0;
+  display: grid;
+  min-inline-size: 13rem;
+  padding: var(--space-2);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+.item {
+  min-block-size: 2.75rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  border: 0;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: start;
+}
+.item:hover:not(:disabled),
+.item:focus-visible {
+  background: var(--surface-muted);
+}
+.item:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.destructive {
+  color: var(--status-error-text);
+}
diff --git a/apps/homepage/src/components/overlays/DropdownMenu.tsx b/apps/homepage/src/components/overlays/DropdownMenu.tsx
new file mode 100644
index 0000000..31fba3f
--- /dev/null
+++ b/apps/homepage/src/components/overlays/DropdownMenu.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { useEscapeKey, useOutsideClick } from '@/components/foundation/client-hooks';
+import { classNames } from '@/lib/components/classNames';
+import { useRef, useState, type KeyboardEvent } from 'react';
+import styles from './DropdownMenu.module.css';
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  onSelect: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+
+interface DropdownMenuProps {
+  label: string;
+  items: MenuItem[];
+  className?: string;
+}
+
+export function DropdownMenu({ label, items, className }: DropdownMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  useOutsideClick(rootRef, () => setOpen(false), open);
+  useEscapeKey(() => setOpen(false), open);
+
+  const focusItem = (index: number) => {
+    const enabled = items
+      .map((item, itemIndex) => ({ item, itemIndex }))
+      .filter(({ item }) => !item.disabled);
+    const target = enabled[(index + enabled.length) % enabled.length];
+    if (target) itemRefs.current[target.itemIndex]?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const currentIndex = itemRefs.current.findIndex((node) => node === document.activeElement);
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusItem(currentIndex + 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusItem(currentIndex - 1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    }
+  };
+
+  return (
+    <div ref={rootRef} className={classNames(styles.root, className)} onKeyDown={handleKeyDown}>
+      <Button
+        intent="tertiary"
+        trailingIcon="chevron-down"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {label}
+      </Button>
+      {open ? (
+        <div className={styles.menu} role="menu">
+          {items.map((item, index) => (
+            <button
+              key={item.id}
+              ref={(node) => {
+                itemRefs.current[index] = node;
+              }}
+              type="button"
+              role="menuitem"
+              disabled={item.disabled}
+              className={classNames(styles.item, item.destructive && styles.destructive)}
+              onClick={() => {
+                item.onSelect();
+                setOpen(false);
+              }}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/homepage/src/components/overlays/Tooltip.module.css b/apps/homepage/src/components/overlays/Tooltip.module.css
new file mode 100644
index 0000000..046e648
--- /dev/null
+++ b/apps/homepage/src/components/overlays/Tooltip.module.css
@@ -0,0 +1,41 @@
+.root {
+  position: relative;
+  display: inline-flex;
+}
+.tooltip {
+  position: absolute;
+  z-index: var(--layer-overlay);
+  inset-block-end: calc(100% + var(--space-2));
+  inset-inline-start: 50%;
+  inline-size: max-content;
+  max-inline-size: 16rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--surface-strong);
+  color: var(--text-primary);
+  font-size: var(--type-caption-size);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(var(--space-1));
+  transition:
+    opacity var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.root:hover .tooltip,
+.root:focus-within .tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+html[dir='rtl'] .tooltip {
+  transform: translateX(50%) translateY(var(--space-1));
+}
+html[dir='rtl'] .root:hover .tooltip,
+html[dir='rtl'] .root:focus-within .tooltip {
+  transform: translateX(50%) translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}
diff --git a/apps/homepage/src/components/overlays/Tooltip.tsx b/apps/homepage/src/components/overlays/Tooltip.tsx
new file mode 100644
index 0000000..98062ba
--- /dev/null
+++ b/apps/homepage/src/components/overlays/Tooltip.tsx
@@ -0,0 +1,22 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './Tooltip.module.css';
+
+export function Tooltip({
+  content,
+  children,
+  className,
+}: {
+  content: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span className={classNames(styles.root, className)}>
+      {children}
+      <span role="tooltip" className={styles.tooltip}>
+        {content}
+      </span>
+    </span>
+  );
+}
diff --git a/apps/homepage/src/components/surfaces/Callout.module.css b/apps/homepage/src/components/surfaces/Callout.module.css
new file mode 100644
index 0000000..6ad7d3a
--- /dev/null
+++ b/apps/homepage/src/components/surfaces/Callout.module.css
@@ -0,0 +1,16 @@
+.callout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border-inline-start: 4px solid var(--interactive-primary);
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.callout strong {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+.callout :last-child {
+  margin-block-end: 0;
+}
diff --git a/apps/homepage/src/components/surfaces/Callout.tsx b/apps/homepage/src/components/surfaces/Callout.tsx
new file mode 100644
index 0000000..dde932d
--- /dev/null
+++ b/apps/homepage/src/components/surfaces/Callout.tsx
@@ -0,0 +1,23 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import type { ReactNode } from 'react';
+import styles from './Callout.module.css';
+
+export function Callout({
+  icon = 'info',
+  title,
+  children,
+}: {
+  icon?: ApprovedIconName;
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <aside className={styles.callout}>
+      <Icon name={icon} size="lg" />
+      <div>
+        <strong>{title}</strong>
+        <div>{children}</div>
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/homepage/src/components/surfaces/Card.module.css b/apps/homepage/src/components/surfaces/Card.module.css
new file mode 100644
index 0000000..1bfd137
--- /dev/null
+++ b/apps/homepage/src/components/surfaces/Card.module.css
@@ -0,0 +1,50 @@
+.card {
+  min-inline-size: 0;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+}
+.default {
+  background: var(--surface-primary);
+}
+.muted {
+  background: var(--surface-muted);
+}
+.elevated {
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-card);
+}
+.strong {
+  background: var(--surface-strong);
+}
+.none {
+  padding: 0;
+}
+.compact {
+  padding: var(--space-4);
+}
+.comfortable {
+  padding: var(--space-6);
+}
+.spacious {
+  padding: clamp(var(--space-6), 5vw, var(--space-10));
+}
+.interactive {
+  transition:
+    border-color var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.interactive:hover {
+  border-color: var(--interactive-primary);
+  transform: translateY(-2px);
+}
+.interactive:focus-within {
+  border-color: var(--focus-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+  .interactive {
+    transition: none;
+  }
+  .interactive:hover {
+    transform: none;
+  }
+}
diff --git a/apps/homepage/src/components/surfaces/Card.tsx b/apps/homepage/src/components/surfaces/Card.tsx
new file mode 100644
index 0000000..a2b5fc0
--- /dev/null
+++ b/apps/homepage/src/components/surfaces/Card.tsx
@@ -0,0 +1,43 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Card.module.css';
+
+export type SurfaceTone = 'default' | 'muted' | 'elevated' | 'strong';
+export type SurfacePadding = 'none' | 'compact' | 'comfortable' | 'spacious';
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+  as?: 'article' | 'section' | 'div';
+  tone?: SurfaceTone;
+  padding?: SurfacePadding;
+  interactive?: boolean;
+  children: ReactNode;
+}
+
+export function Card({
+  as: Component = 'article',
+  tone = 'default',
+  padding = 'comfortable',
+  interactive = false,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <Component
+      className={classNames(
+        styles.card,
+        styles[tone],
+        styles[padding],
+        interactive && styles.interactive,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function Panel(props: Omit<CardProps, 'as'>) {
+  return <Card as="section" {...props} />;
+}
diff --git a/apps/homepage/src/components/typography/Typography.module.css b/apps/homepage/src/components/typography/Typography.module.css
new file mode 100644
index 0000000..4606fbb
--- /dev/null
+++ b/apps/homepage/src/components/typography/Typography.module.css
@@ -0,0 +1,70 @@
+.heading {
+  margin: 0;
+  color: var(--text-primary);
+}
+.display {
+  max-inline-size: 16ch;
+  font-size: var(--type-display-size);
+  line-height: var(--line-display);
+  letter-spacing: var(--tracking-display);
+}
+.section {
+  font-size: var(--type-heading-2-size);
+}
+.subheading {
+  font-size: var(--type-heading-3-size);
+}
+.eyebrow {
+  margin: 0;
+  color: var(--interactive-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+}
+html[dir='rtl'] .eyebrow {
+  letter-spacing: normal;
+  text-transform: none;
+}
+.text {
+  margin: 0;
+}
+.lead {
+  max-inline-size: 62ch;
+  color: var(--text-secondary);
+  font-size: var(--type-body-large-size);
+}
+.body {
+  max-inline-size: 70ch;
+}
+.supporting {
+  max-inline-size: 70ch;
+  color: var(--text-secondary);
+}
+.caption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+.label {
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+.quote {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding-inline-start: var(--space-6);
+  border-inline-start: 4px solid var(--interactive-primary);
+}
+.quote blockquote {
+  margin: 0;
+  font-size: var(--type-body-large-size);
+}
+.quote figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+html[lang='ar'] .display {
+  letter-spacing: normal;
+  line-height: 1.25;
+}
diff --git a/apps/homepage/src/components/typography/Typography.tsx b/apps/homepage/src/components/typography/Typography.tsx
new file mode 100644
index 0000000..8fd8c44
--- /dev/null
+++ b/apps/homepage/src/components/typography/Typography.tsx
@@ -0,0 +1,67 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Typography.module.css';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingStyle = 'display' | 'section' | 'subheading';
+
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: HeadingLevel;
+  appearance?: HeadingStyle;
+  children: ReactNode;
+}
+
+export function Heading({
+  level,
+  appearance = 'section',
+  className,
+  children,
+  ...props
+}: HeadingProps) {
+  const Component = `h${level}` as const;
+  return (
+    <Component className={classNames(styles.heading, styles[appearance], className)} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export function Eyebrow({ children, className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={classNames(styles.eyebrow, className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export type TextVariant = 'lead' | 'body' | 'supporting' | 'caption' | 'label';
+
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+  variant?: TextVariant;
+  children: ReactNode;
+}
+
+export function Text({ variant = 'body', className, children, ...props }: TextProps) {
+  return (
+    <p className={classNames(styles.text, styles[variant], className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function Quote({
+  children,
+  cite,
+  className,
+}: {
+  children: ReactNode;
+  cite?: string;
+  className?: string;
+}) {
+  return (
+    <figure className={classNames(styles.quote, className)}>
+      <blockquote>{children}</blockquote>
+      {cite ? <figcaption>{cite}</figcaption> : null}
+    </figure>
+  );
+}
diff --git a/apps/homepage/src/content/development/component-lab.ts b/apps/homepage/src/content/development/component-lab.ts
new file mode 100644
index 0000000..5f9b587
--- /dev/null
+++ b/apps/homepage/src/content/development/component-lab.ts
@@ -0,0 +1,373 @@
+import type { Locale } from '@/lib/localization/config';
+
+export interface ComponentLabCopy {
+  developmentLabel: string;
+  title: string;
+  body: string;
+  actions: { primary: string; conversion: string; loading: string; disabled: string };
+  form: {
+    label: string;
+    supporting: string;
+    placeholder: string;
+    error: string;
+    checkbox: string;
+    switch: string;
+  };
+  tabs: { label: string; items: Array<{ id: string; label: string; content: string }> };
+  accordion: { items: Array<{ id: string; title: string; content: string }> };
+  alert: { title: string; body: string };
+  workflow: Array<{ id: string; ordinal: string; title: string; description: string }>;
+  comparison: { beforeTitle: string; afterTitle: string; before: string[]; after: string[] };
+  preview: {
+    title: string;
+    caption: string;
+    illustrative: string;
+    rows: Array<{ id: string; primary: string; secondary: string; status: string }>;
+  };
+  metric: { value: string; label: string; qualification: string; status: string };
+  cta: { title: string; body: string; primary: string; unavailable: string };
+  dialog: { open: string; title: string; description: string; close: string; content: string };
+  menu: { label: string; first: string; second: string };
+}
+
+const copy = {
+  en: {
+    developmentLabel: 'Development fixture, not production content',
+    title: 'Core component system',
+    body: 'A deterministic test surface for accessible, localized, theme-aware, and RTL-native components.',
+    actions: {
+      primary: 'Primary action',
+      conversion: 'Create account',
+      loading: 'Submitting',
+      disabled: 'Unavailable action',
+    },
+    form: {
+      label: 'Work email',
+      supporting: 'Use a fictional address in this development fixture.',
+      placeholder: 'name@fictional.invalid',
+      error: 'Enter an address in the required format.',
+      checkbox: 'Send a fictional confirmation',
+      switch: 'Enable compact preview',
+    },
+    tabs: {
+      label: 'Operations views',
+      items: [
+        { id: 'reservations', label: 'Reservations', content: 'Reservation fixture content.' },
+        {
+          id: 'fleet',
+          label: 'Fleet availability',
+          content: 'Fleet fixture content with intentionally expanded wording.',
+        },
+        { id: 'returns', label: 'Returns', content: 'Return inspection fixture content.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'How does the component system handle localization?',
+          content:
+            'Copy is passed as complete localized values rather than concatenated fragments.',
+        },
+        {
+          id: 'a2',
+          title: 'Does this submit data?',
+          content: 'No. External submission remains blocked pending CRM and legal approval.',
+        },
+      ],
+    },
+    alert: {
+      title: 'Development-only fixture',
+      body: 'This surface demonstrates behavior without publishing customer evidence or operational claims.',
+    },
+    workflow: [
+      {
+        id: 'reserve',
+        ordinal: '1',
+        title: 'Reservation',
+        description: 'Capture an illustrative reservation request.',
+      },
+      {
+        id: 'prepare',
+        ordinal: '2',
+        title: 'Preparation',
+        description: 'Review a fictional vehicle readiness state.',
+      },
+      {
+        id: 'handover',
+        ordinal: '3',
+        title: 'Handover',
+        description: 'Present a controlled pickup checklist.',
+      },
+      {
+        id: 'return',
+        ordinal: '4',
+        title: 'Return',
+        description: 'Record an illustrative inspection outcome.',
+      },
+    ],
+    comparison: {
+      beforeTitle: 'Fragmented operations',
+      afterTitle: 'Connected workflow',
+      before: ['Repeated manual entry', 'Scattered status checks', 'Unclear ownership'],
+      after: ['One shared workflow', 'Visible state changes', 'Explicit responsibility'],
+    },
+    preview: {
+      title: 'Fleet availability preview',
+      caption: 'Illustrative interface fixture. It is not live operational data.',
+      illustrative: 'Illustrative data',
+      rows: [
+        { id: 'RDG-1042', primary: 'Compact vehicle', secondary: 'RDG-1042', status: 'Available' },
+        { id: 'RDG-2088', primary: 'Utility vehicle', secondary: 'RDG-2088', status: 'Preparing' },
+      ],
+    },
+    metric: {
+      value: '24',
+      label: 'Illustrative workflow checkpoints',
+      qualification: 'Development fixture only. Not a public performance claim.',
+      status: 'Research only',
+    },
+    cta: {
+      title: 'CTA destination remains governed',
+      body: 'The conversion treatment is reusable, while unresolved destinations stay disabled.',
+      primary: 'Create account',
+      unavailable: 'Destination pending approval',
+    },
+    dialog: {
+      open: 'Open dialog',
+      title: 'Accessible dialog fixture',
+      description: 'Focus moves into this native modal and returns to the trigger.',
+      close: 'Close dialog',
+      content: 'No data is submitted from this component fixture.',
+    },
+    menu: { label: 'More actions', first: 'Review fixture', second: 'Archive fixture' },
+  },
+  fr: {
+    developmentLabel: 'Exemple de développement, contenu non destiné à la production',
+    title: 'Système de composants principal',
+    body: 'Une surface de test déterministe pour des composants accessibles, localisés, adaptés aux thèmes et natifs en RTL.',
+    actions: {
+      primary: 'Action principale',
+      conversion: 'Créer un compte',
+      loading: 'Envoi en cours',
+      disabled: 'Action indisponible',
+    },
+    form: {
+      label: 'Adresse e-mail professionnelle',
+      supporting: 'Utilisez une adresse fictive dans cet exemple de développement.',
+      placeholder: 'nom@fictif.invalid',
+      error: 'Saisissez une adresse au format requis.',
+      checkbox: 'Envoyer une confirmation fictive',
+      switch: 'Activer l’aperçu compact',
+    },
+    tabs: {
+      label: 'Vues des opérations',
+      items: [
+        { id: 'reservations', label: 'Réservations', content: 'Contenu fictif des réservations.' },
+        {
+          id: 'fleet',
+          label: 'Disponibilité du parc automobile',
+          content: 'Contenu fictif du parc avec un libellé volontairement plus long.',
+        },
+        { id: 'returns', label: 'Retours', content: 'Contenu fictif de l’inspection au retour.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'Comment le système gère-t-il la localisation ?',
+          content:
+            'Le texte est transmis sous forme de valeurs localisées complètes, sans concaténation de fragments.',
+        },
+        {
+          id: 'a2',
+          title: 'Ces composants transmettent-ils des données ?',
+          content:
+            'Non. La transmission externe reste bloquée jusqu’à l’approbation du CRM et du contenu juridique.',
+        },
+      ],
+    },
+    alert: {
+      title: 'Exemple réservé au développement',
+      body: 'Cette surface démontre les comportements sans publier de preuves client ni d’allégations opérationnelles.',
+    },
+    workflow: [
+      {
+        id: 'reserve',
+        ordinal: '1',
+        title: 'Réservation',
+        description: 'Saisir une demande de réservation illustrative.',
+      },
+      {
+        id: 'prepare',
+        ordinal: '2',
+        title: 'Préparation',
+        description: 'Examiner un état fictif de préparation du véhicule.',
+      },
+      {
+        id: 'handover',
+        ordinal: '3',
+        title: 'Remise du véhicule',
+        description: 'Présenter une liste de contrôle maîtrisée.',
+      },
+      {
+        id: 'return',
+        ordinal: '4',
+        title: 'Retour',
+        description: 'Consigner un résultat d’inspection illustratif.',
+      },
+    ],
+    comparison: {
+      beforeTitle: 'Opérations fragmentées',
+      afterTitle: 'Flux de travail connecté',
+      before: ['Saisie manuelle répétée', 'Vérifications dispersées', 'Responsabilités imprécises'],
+      after: ['Un flux partagé', 'Des changements d’état visibles', 'Une responsabilité explicite'],
+    },
+    preview: {
+      title: 'Aperçu de la disponibilité du parc',
+      caption:
+        'Exemple d’interface illustratif. Il ne s’agit pas de données opérationnelles en direct.',
+      illustrative: 'Données illustratives',
+      rows: [
+        {
+          id: 'RDG-1042',
+          primary: 'Véhicule compact',
+          secondary: 'RDG-1042',
+          status: 'Disponible',
+        },
+        {
+          id: 'RDG-2088',
+          primary: 'Véhicule utilitaire',
+          secondary: 'RDG-2088',
+          status: 'En préparation',
+        },
+      ],
+    },
+    metric: {
+      value: '24',
+      label: 'Points de contrôle illustratifs',
+      qualification: 'Exemple de développement uniquement. Ce n’est pas une allégation publique.',
+      status: 'Recherche uniquement',
+    },
+    cta: {
+      title: 'La destination du CTA reste contrôlée',
+      body: 'Le traitement de conversion est réutilisable, tandis que les destinations non résolues restent désactivées.',
+      primary: 'Créer un compte',
+      unavailable: 'Destination en attente d’approbation',
+    },
+    dialog: {
+      open: 'Ouvrir la boîte de dialogue',
+      title: 'Exemple de boîte de dialogue accessible',
+      description: 'Le focus entre dans la fenêtre modale native puis revient au déclencheur.',
+      close: 'Fermer la boîte de dialogue',
+      content: 'Aucune donnée n’est transmise depuis cet exemple.',
+    },
+    menu: { label: 'Autres actions', first: 'Examiner l’exemple', second: 'Archiver l’exemple' },
+  },
+  ar: {
+    developmentLabel: 'نموذج للتطوير وليس محتوى للإنتاج',
+    title: 'نظام المكوّنات الأساسي',
+    body: 'سطح اختبار ثابت لمكوّنات قابلة للوصول ومترجمة ومتوافقة مع السمات وداعمة لاتجاه الكتابة من اليمين إلى اليسار.',
+    actions: {
+      primary: 'إجراء أساسي',
+      conversion: 'حجز عرض توضيحي',
+      loading: 'جارٍ الإرسال',
+      disabled: 'إجراء غير متاح',
+    },
+    form: {
+      label: 'البريد الإلكتروني للعمل',
+      supporting: 'استخدم عنواناً افتراضياً في نموذج التطوير هذا.',
+      placeholder: 'name@fictional.invalid',
+      error: 'أدخل عنواناً بالتنسيق المطلوب.',
+      checkbox: 'إرسال تأكيد افتراضي',
+      switch: 'تفعيل المعاينة المدمجة',
+    },
+    tabs: {
+      label: 'عروض العمليات',
+      items: [
+        { id: 'reservations', label: 'الحجوزات', content: 'محتوى افتراضي للحجوزات.' },
+        {
+          id: 'fleet',
+          label: 'توفر أسطول المركبات',
+          content: 'محتوى افتراضي للأسطول مع نص موسّع عمداً.',
+        },
+        { id: 'returns', label: 'عمليات الإرجاع', content: 'محتوى افتراضي لفحص الإرجاع.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'كيف يتعامل نظام المكوّنات مع الترجمة؟',
+          content: 'يُمرر النص كقيم مترجمة كاملة بدلاً من تجميع أجزاء الجمل.',
+        },
+        {
+          id: 'a2',
+          title: 'هل ترسل هذه المكوّنات بيانات؟',
+          content:
+            'لا. يظل الإرسال الخارجي محظوراً إلى حين اعتماد نظام إدارة علاقات العملاء والمحتوى القانوني.',
+        },
+      ],
+    },
+    alert: {
+      title: 'نموذج مخصص للتطوير',
+      body: 'يوضح هذا السطح السلوك من دون نشر أدلة عملاء أو ادعاءات تشغيلية.',
+    },
+    workflow: [
+      { id: 'reserve', ordinal: '١', title: 'الحجز', description: 'تسجيل طلب حجز توضيحي.' },
+      {
+        id: 'prepare',
+        ordinal: '٢',
+        title: 'تجهيز المركبة',
+        description: 'مراجعة حالة افتراضية لجاهزية المركبة.',
+      },
+      {
+        id: 'handover',
+        ordinal: '٣',
+        title: 'التسليم',
+        description: 'عرض قائمة تحقق مضبوطة للاستلام.',
+      },
+      { id: 'return', ordinal: '٤', title: 'الإرجاع', description: 'تسجيل نتيجة فحص توضيحية.' },
+    ],
+    comparison: {
+      beforeTitle: 'عمليات مجزأة',
+      afterTitle: 'سير عمل مترابط',
+      before: ['إدخال يدوي متكرر', 'فحوصات حالة متفرقة', 'مسؤولية غير واضحة'],
+      after: ['سير عمل مشترك', 'تغييرات حالة مرئية', 'مسؤولية محددة'],
+    },
+    preview: {
+      title: 'معاينة توفر الأسطول',
+      caption: 'نموذج واجهة توضيحي وليس بيانات تشغيلية مباشرة.',
+      illustrative: 'بيانات توضيحية',
+      rows: [
+        { id: 'RDG-1042', primary: 'مركبة مدمجة', secondary: 'RDG-1042', status: 'متاحة' },
+        { id: 'RDG-2088', primary: 'مركبة خدمية', secondary: 'RDG-2088', status: 'قيد التجهيز' },
+      ],
+    },
+    metric: {
+      value: '٢٤',
+      label: 'نقاط تحقق توضيحية لسير العمل',
+      qualification: 'نموذج تطوير فقط وليس ادعاءً عاماً عن الأداء.',
+      status: 'للبحث فقط',
+    },
+    cta: {
+      title: 'تظل وجهة الدعوة إلى الإجراء خاضعة للحوكمة',
+      body: 'يمكن إعادة استخدام نمط التحويل، بينما تبقى الوجهات غير المحسومة معطلة.',
+      primary: 'حجز عرض توضيحي',
+      unavailable: 'الوجهة بانتظار الاعتماد',
+    },
+    dialog: {
+      open: 'فتح مربع الحوار',
+      title: 'نموذج مربع حوار قابل للوصول',
+      description: 'ينتقل التركيز إلى النافذة الأصلية ثم يعود إلى زر الفتح.',
+      close: 'إغلاق مربع الحوار',
+      content: 'لا تُرسل أي بيانات من نموذج المكوّن هذا.',
+    },
+    menu: { label: 'إجراءات إضافية', first: 'مراجعة النموذج', second: 'أرشفة النموذج' },
+  },
+} satisfies Record<Locale, ComponentLabCopy>;
+
+export function getComponentLabCopy(locale: Locale): ComponentLabCopy {
+  return copy[locale];
+}
diff --git a/apps/homepage/src/content/homepage-model.ts b/apps/homepage/src/content/homepage-model.ts
new file mode 100644
index 0000000..58649dc
--- /dev/null
+++ b/apps/homepage/src/content/homepage-model.ts
@@ -0,0 +1,353 @@
+import type { ApprovedIconName } from '@/components/foundation/Icon';
+import type { PreviewRow } from '@/components/marketing/ProductPreview';
+import type { HomepageMessages, ShellMessages } from '@/lib/localization/messages';
+import {
+  fleetBandIds,
+  pricingPlanIds,
+  type FleetBandId,
+  type PricingPlanId,
+} from '@/content/pricing-config';
+
+export interface HomepageAction {
+  label: string;
+  disabledReason: string;
+}
+
+export interface TitledDescription {
+  id: string;
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+}
+
+export interface HomepageWorkflowStep extends TitledDescription {
+  ordinal: string;
+}
+
+export interface HomepageFaqItem {
+  id: string;
+  title: string;
+  body: string;
+}
+
+export interface HomepagePricingFleetBand {
+  id: FleetBandId;
+  label: string;
+}
+
+export interface HomepagePricingPlan {
+  id: PricingPlanId;
+  name: string;
+  audience: string;
+  features: string[];
+  cta: string;
+}
+
+export interface HomepageContent {
+  hero: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    primary: HomepageAction;
+    secondary: HomepageAction;
+    preview: {
+      title: string;
+      caption: string;
+      illustrativeLabel: string;
+      rows: PreviewRow[];
+    };
+  };
+  trust: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: TitledDescription[];
+  };
+  comparison: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    beforeTitle: string;
+    beforeItems: string[];
+    afterTitle: string;
+    afterItems: string[];
+  };
+  workflow: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    steps: HomepageWorkflowStep[];
+  };
+  roles: {
+    eyebrow: string;
+    title: string;
+    items: TitledDescription[];
+  };
+  modules: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: TitledDescription[];
+  };
+  results: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    metrics: TitledDescription[];
+    methodTitle: string;
+    method: string[];
+  };
+  integrations: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: string[];
+  };
+  security: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    checks: TitledDescription[];
+  };
+  pricing: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    fleetSelectorLabel: string;
+    fleetBands: HomepagePricingFleetBand[];
+    billingLegend: string;
+    billingMonthly: string;
+    billingAnnual: string;
+    billingSavings: string;
+    recommended: string;
+    startingAt: string;
+    perMonth: string;
+    annualEquivalent: string;
+    pricePending: string;
+    customPrice: string;
+    plans: HomepagePricingPlan[];
+    basisTitle: string;
+    basis: string[];
+    modulesTitle: string;
+    modules: string[];
+    assurances: string[];
+    notSure: string;
+    compare: string;
+    note: string;
+    actionDisabledReason: string;
+  };
+  faq: {
+    eyebrow: string;
+    title: string;
+    items: HomepageFaqItem[];
+  };
+  final: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    primary: HomepageAction;
+    secondary: HomepageAction;
+  };
+}
+
+const trustIcons: ApprovedIconName[] = ['calendar', 'car', 'check', 'settings'];
+const roleIcons: ApprovedIconName[] = ['settings', 'calendar', 'car', 'check'];
+const moduleIcons: ApprovedIconName[] = ['calendar', 'car', 'check', 'search', 'globe', 'settings'];
+const resultIcons: ApprovedIconName[] = ['calendar', 'settings', 'car', 'warning'];
+const securityIcons: ApprovedIconName[] = ['settings', 'search', 'globe', 'warning'];
+
+function pair(value: readonly string[], context: string): { title: string; description: string } {
+  const title = value[0];
+  const description = value[1];
+  if (title === undefined || description === undefined) {
+    throw new Error(`${context} must contain a title and description.`);
+  }
+  return { title, description };
+}
+
+function triple(
+  value: readonly string[],
+  context: string,
+): { ordinal: string; title: string; description: string } {
+  const ordinal = value[0];
+  const title = value[1];
+  const description = value[2];
+  if (ordinal === undefined || title === undefined || description === undefined) {
+    throw new Error(`${context} must contain an ordinal, title, and description.`);
+  }
+  return { ordinal, title, description };
+}
+
+function asFleetBandId(value: string, context: string): FleetBandId {
+  if (!(fleetBandIds as readonly string[]).includes(value)) {
+    throw new Error(`${context} contains an unknown fleet band ID: ${value}`);
+  }
+  return value as FleetBandId;
+}
+
+function asPricingPlanId(value: string, context: string): PricingPlanId {
+  if (!(pricingPlanIds as readonly string[]).includes(value)) {
+    throw new Error(`${context} contains an unknown pricing plan ID: ${value}`);
+  }
+  return value as PricingPlanId;
+}
+
+function mapPairs(
+  values: readonly (readonly string[])[],
+  prefix: string,
+  icons: readonly ApprovedIconName[] = [],
+): TitledDescription[] {
+  return values.map((value, index) => {
+    const item = pair(value, `${prefix}[${index}]`);
+    const icon = icons[index];
+    return {
+      id: `${prefix}-${index + 1}`,
+      ...item,
+      ...(icon ? { icon } : {}),
+    };
+  });
+}
+
+export function buildHomepageContent(
+  homepage: HomepageMessages,
+  shell: ShellMessages,
+): HomepageContent {
+  const pendingReason = shell.states.pendingBody;
+
+  return {
+    hero: {
+      eyebrow: homepage.hero.eyebrow,
+      title: homepage.hero.title,
+      body: homepage.hero.body,
+      primary: { label: homepage.hero.primary, disabledReason: shell.header.demoUnavailable },
+      secondary: { label: homepage.hero.secondary, disabledReason: pendingReason },
+      preview: {
+        title: homepage.preview.title,
+        caption: homepage.hero.caption,
+        illustrativeLabel: `${homepage.preview.today} · ${homepage.preview.branch}`,
+        rows: [
+          {
+            id: 'preview-reservation-1',
+            primary: `${homepage.preview.r1} · ${homepage.preview.taskAssign}`,
+            secondary: homepage.preview.plate1,
+            status: homepage.preview.statusReady,
+            statusTone: 'success',
+          },
+          {
+            id: 'preview-reservation-2',
+            primary: `${homepage.preview.r2} · ${homepage.preview.taskInspect}`,
+            secondary: homepage.preview.plate2,
+            status: homepage.preview.statusDue,
+            statusTone: 'warning',
+          },
+        ],
+      },
+    },
+    trust: {
+      eyebrow: homepage.trust.eyebrow,
+      title: homepage.trust.title,
+      body: homepage.trust.body,
+      items: mapPairs(homepage.trust.items, 'lifecycle', trustIcons),
+    },
+    comparison: {
+      eyebrow: homepage.comparison.eyebrow,
+      title: homepage.comparison.title,
+      body: homepage.comparison.body,
+      beforeTitle: homepage.comparison.beforeTitle,
+      beforeItems: homepage.comparison.beforeItems,
+      afterTitle: homepage.comparison.afterTitle,
+      afterItems: homepage.comparison.afterItems,
+    },
+    workflow: {
+      eyebrow: homepage.workflow.eyebrow,
+      title: homepage.workflow.title,
+      body: homepage.workflow.body,
+      steps: homepage.workflow.steps.map((value, index) => ({
+        id: `workflow-${index + 1}`,
+        ...triple(value, `workflow.steps[${index}]`),
+      })),
+    },
+    roles: {
+      eyebrow: homepage.roles.eyebrow,
+      title: homepage.roles.title,
+      items: mapPairs(homepage.roles.roles, 'role', roleIcons),
+    },
+    modules: {
+      eyebrow: homepage.modules.eyebrow,
+      title: homepage.modules.title,
+      body: homepage.modules.body,
+      items: mapPairs(homepage.modules.items, 'module', moduleIcons),
+    },
+    results: {
+      eyebrow: homepage.results.eyebrow,
+      title: homepage.results.title,
+      body: homepage.results.body,
+      metrics: mapPairs(homepage.results.metrics, 'measurement', resultIcons),
+      methodTitle: homepage.results.methodTitle,
+      method: homepage.results.method,
+    },
+    integrations: {
+      eyebrow: homepage.integrations.eyebrow,
+      title: homepage.integrations.title,
+      body: homepage.integrations.body,
+      items: homepage.integrations.items,
+    },
+    security: {
+      eyebrow: homepage.security.eyebrow,
+      title: homepage.security.title,
+      body: homepage.security.body,
+      checks: mapPairs(homepage.security.checks, 'security', securityIcons),
+    },
+    pricing: {
+      eyebrow: homepage.pricing.eyebrow,
+      title: homepage.pricing.title,
+      body: homepage.pricing.body,
+      fleetSelectorLabel: homepage.pricing.fleetSelectorLabel,
+      fleetBands: homepage.pricing.fleetBands.map((item, index) => ({
+        id: asFleetBandId(item.id, `pricing.fleetBands[${index}]`),
+        label: item.label,
+      })),
+      billingLegend: homepage.pricing.billingLegend,
+      billingMonthly: homepage.pricing.billingMonthly,
+      billingAnnual: homepage.pricing.billingAnnual,
+      billingSavings: homepage.pricing.billingSavings,
+      recommended: homepage.pricing.recommended,
+      startingAt: homepage.pricing.startingAt,
+      perMonth: homepage.pricing.perMonth,
+      annualEquivalent: homepage.pricing.annualEquivalent,
+      pricePending: homepage.pricing.pricePending,
+      customPrice: homepage.pricing.customPrice,
+      plans: homepage.pricing.plans.map((plan, index) => ({
+        id: asPricingPlanId(plan.id, `pricing.plans[${index}]`),
+        name: plan.name,
+        audience: plan.audience,
+        features: plan.features,
+        cta: plan.cta,
+      })),
+      basisTitle: homepage.pricing.basisTitle,
+      basis: homepage.pricing.basis,
+      modulesTitle: homepage.pricing.modulesTitle,
+      modules: homepage.pricing.modules,
+      assurances: homepage.pricing.assurances,
+      notSure: homepage.pricing.notSure,
+      compare: homepage.pricing.compare,
+      note: homepage.pricing.note,
+      actionDisabledReason: pendingReason,
+    },
+    faq: {
+      eyebrow: homepage.faq.eyebrow,
+      title: homepage.faq.title,
+      items: homepage.faq.items.map((value, index) => {
+        const item = pair(value, `faq.items[${index}]`);
+        return { id: `faq-${index + 1}`, title: item.title, body: item.description };
+      }),
+    },
+    final: {
+      eyebrow: homepage.final.eyebrow,
+      title: homepage.final.title,
+      body: homepage.final.body,
+      primary: { label: homepage.final.primary, disabledReason: shell.header.demoUnavailable },
+      secondary: { label: homepage.final.secondary, disabledReason: pendingReason },
+    },
+  };
+}
diff --git a/apps/homepage/src/content/locales/ar/homepage.json b/apps/homepage/src/content/locales/ar/homepage.json
new file mode 100644
index 0000000..2f27c37
--- /dev/null
+++ b/apps/homepage/src/content/locales/ar/homepage.json
@@ -0,0 +1,403 @@
+{
+  "meta": {
+    "langName": "العربية",
+    "dir": "rtl",
+    "title": "RentalDriveGo | تشغيل مترابط لتأجير السيارات",
+    "description": "أدِر الحجوزات والمركبات والعقود والتسليم والإرجاع ضمن منصة تشغيل مترابطة."
+  },
+  "header": {
+    "nav": [
+      ["product", "المنتج"],
+      ["workflow", "سير العمل"],
+      ["modules", "الوحدات"],
+      ["pricing", "التسعير"],
+      ["faq", "الأسئلة الشائعة"]
+    ],
+    "login": "تسجيل الدخول",
+    "demo": "أنشئ حسابًا",
+    "menu": "فتح القائمة",
+    "language": "اللغة",
+    "theme": "المظهر",
+    "light": "فاتح",
+    "dark": "داكن",
+    "system": "النظام"
+  },
+  "hero": {
+    "eyebrow": "تشغيل تأجير السيارات ضمن نظام مترابط",
+    "title": "أدِر كل عملية تأجير من الحجز حتى إعادة المركبة في نظام واحد.",
+    "body": "اجمع الحجوزات والمركبات والعقود والتسليم والإرجاع في سجل تشغيلي واحد، كي يرى كل فريق ما يتطلب المتابعة بعد ذلك.",
+    "primary": "أنشئ حسابًا للمنتج",
+    "secondary": "شاهد جولة المنتج",
+    "caption": "واجهة توضيحية للمنتج. يجب أن تستخدم الشاشات النهائية بيانات ولقطات معتمدة."
+  },
+  "trust": {
+    "eyebrow": "تغطية تشغيلية",
+    "title": "سير عمل واحد يغطي دورة التأجير كاملة.",
+    "body": "حافظ على ترابط سياق العميل والمركبة والعقد والمهام مع تقدم عملية التأجير.",
+    "items": [
+      ["الحجز", "سجّل الطلب والبيانات المطلوبة."],
+      ["المركبة", "تابع التوافر والجاهزية."],
+      ["العقد", "اجمع مهام التسليم والسجلات في موضع واحد."],
+      ["الإرجاع", "سجّل الحالة وأغلق أعمال المتابعة."]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "لماذا التغيير",
+    "title": "استبدل عمليات التسليم المجزأة بسير تشغيلي مشترك.",
+    "body": "تكلفة الأدوات المنفصلة لا تظهر دائمًا في عطل كبير، بل تتراكم يوميًا عبر تكرار الإدخال وضياع السياق وتأخر المتابعة.",
+    "beforeTitle": "تشغيل مجزأ",
+    "beforeItems": [
+      "نسخ بيانات الحجز بين أدوات متعددة",
+      "تأكيد حالة المركبة عبر الرسائل",
+      "متابعة مهام العقد بالاعتماد على الذاكرة",
+      "اكتشاف مشكلات الإرجاع بعد مغادرة العميل"
+    ],
+    "afterTitle": "تشغيل مترابط",
+    "afterItems": [
+      "حالة حجز واحدة يراها الفريق",
+      "ربط جاهزية المركبة بعملية التأجير",
+      "إظهار متطلبات التسليم قبل تسليم المركبة",
+      "إنشاء متابعة الإرجاع بينما لا يزال السياق واضحًا"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "سير عمل متكامل",
+    "title": "حرّك عملية التأجير إلى الأمام من دون فقدان السياق.",
+    "body": "توضح كل خطوة القرار والمسؤول والإجراء التالي بدل دفن التشغيل داخل قائمة عامة من الميزات.",
+    "steps": [
+      ["01", "تسجيل الحجز", "سجّل التواريخ وبيانات السائق والمتطلبات والمصدر."],
+      ["02", "تخصيص مركبة جاهزة", "طابق التوافر مع الفئة والموقع وحالة الجاهزية."],
+      ["03", "إكمال التسليم", "تحقق من المستندات والفحص والعقد ومهام تسليم المركبة."],
+      ["04", "معالجة الإرجاع", "سجّل الحالة وأغلق الأعمال المفتوحة وأعد المركبة إلى التوافر."]
+    ]
+  },
+  "roles": {
+    "eyebrow": "مصمم لفريق التشغيل",
+    "title": "امنح كل دور السياق الذي يحتاجه من دون إنشاء نسخ متعددة من الحقيقة.",
+    "roles": [
+      ["المالك أو المدير", "اطّلع على عبء العمل والاستثناءات والمؤشرات التشغيلية عبر النشاط."],
+      ["فريق الحجوزات", "حوّل الطلبات إلى حجوزات مؤكدة مع عدد أقل من عمليات التسليم."],
+      ["الأسطول والتشغيل", "اعرف المركبات المتاحة أو المحجوبة أو المستحقة أو التي تنتظر إجراءً."],
+      ["مكتب الاستقبال", "حضّر مهام التسليم والإرجاع قبل انتظار العميل."]
+    ]
+  },
+  "modules": {
+    "eyebrow": "وحدات المنتج",
+    "title": "نواة مترابطة منظّمة حول أعمال التأجير الفعلية.",
+    "body": "توضح حدود الوحدات المسؤوليات، بينما تمنع السجلات المشتركة فوضى النسخ واللصق المعتادة.",
+    "items": [
+      ["الحجوزات", "التوافر والتواريخ ومتطلبات العميل والحالة ضمن سير واحد."],
+      ["جاهزية الأسطول", "توافر المركبات والحجوزات التشغيلية وحالة الخدمة وسياق الموقع."],
+      ["عقود الإيجار", "متطلبات التسليم وحالة العقد والسجلات التشغيلية."],
+      ["فحص المركبة", "فحوص منظمة عند التسليم والإرجاع مع مهام متابعة."],
+      ["سجلات العملاء", "سجل التأجير وبيانات الاتصال المرتبطة بالعمل الجاري."],
+      ["التقارير التشغيلية", "تعريفات وعروض تشغيلية يمكن التحقق منها مقابل النشاط المصدر."]
+    ]
+  },
+  "results": {
+    "eyebrow": "نتائج قابلة للقياس",
+    "title": "قِس التغيير، لا الخطاب التسويقي.",
+    "body": "لا ينبغي نشر أي نتيجة قبل اعتماد خط أساس حقيقي لعميل وفترة مقارنة وتعريف واضح للبيانات. لذلك تعرض هذه النسخة منهجية القياس بدل نسب مئوية مختلقة.",
+    "metrics": [
+      ["زمن معالجة الحجز", "من استلام طلب صالح للعمل حتى تأكيد الحجز."],
+      ["زمن إعادة المركبة إلى الجاهزية", "من تسجيل الإرجاع حتى حالة جاهز للتأجير."],
+      ["معدل استخدام الأسطول", "مقارنة أيام التوافر بأيام التأجير وفق تعريف واحد معتمد."],
+      ["متابعة حالات التأخير", "عمليات التأجير المتأخرة المفتوحة مع مسؤول وإجراء تالٍ."]
+    ],
+    "methodTitle": "المنهجية المطلوبة قبل نشر أي نتيجة",
+    "method": [
+      "سجّل خط أساس قبل الإطلاق باستخدام تعريفات المؤشرات نفسها.",
+      "قارن مواقع وفئات أسطول وفترات تشغيل متكافئة.",
+      "انشر حجم العينة والاستثناءات وفترة القياس.",
+      "اربط كل نتيجة منشورة بسجل دليل معتمد."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "التكاملات",
+    "title": "اربط الأنظمة التي يعتمد عليها تشغيلك حاليًا.",
+    "body": "يُعتمد نطاق التكامل خلال مرحلة الاستكشاف ليتوافق مع سوقك وبنيتك الحالية وملكية البيانات. لا تُعرض أسماء شركاء قبل التحقق من توافر الموصل.",
+    "items": [
+      "المحاسبة والمالية",
+      "المدفوعات ومبالغ الضمان",
+      "الاتصال بالمركبات وبياناتها",
+      "خدمات الهوية والمستندات",
+      "البريد الإلكتروني والرسائل والإشعارات",
+      "الموقع الإلكتروني وقنوات الحجز"
+    ]
+  },
+  "security": {
+    "eyebrow": "الأمن والموثوقية",
+    "title": "قيّم المنصة بالأدلة، لا بالشعارات.",
+    "body": "لا تُنشر شهادات أو وعود بمستوى الخدمة قبل وجود وثائق معتمدة. أثناء التقييم، اطلب إجابات محددة حول الضوابط المهمة لنشاطك.",
+    "checks": [
+      ["التحكم في الوصول", "الأدوار والصلاحيات وإجراءات المسؤول وإنهاء وصول المستخدم."],
+      ["قابلية التدقيق", "التغييرات المسجلة والقابلة للبحث والتصدير."],
+      ["معالجة البيانات", "الملكية والاحتفاظ والتصدير والحذف والجهات الفرعية."],
+      ["استمرارية العمل", "النسخ الاحتياطي والاستعادة والتواصل عند الحوادث والدعم."]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "تسعير بسيط وقابل للتوسع",
+    "title": "تسعير مبني حول حجم أسطولك",
+    "body": "اختر نطاق الأسطول لعرض الباقة الأنسب لتشغيلك. يمكن تفعيل الأسعار الابتدائية العامة من ملف إعداد تجاري واحد بعد الاعتماد المالي.",
+    "fleetSelectorLabel": "الحجم التقريبي للأسطول النشط",
+    "fleetBands": [
+      {
+        "id": "small",
+        "label": "من 1 إلى 25 مركبة"
+      },
+      {
+        "id": "growing",
+        "label": "من 26 إلى 75 مركبة"
+      },
+      {
+        "id": "scale",
+        "label": "من 76 إلى 200 مركبة"
+      },
+      {
+        "id": "enterprise",
+        "label": "أكثر من 200 مركبة"
+      }
+    ],
+    "billingLegend": "دورة الفوترة",
+    "billingMonthly": "شهري",
+    "billingAnnual": "سنوي",
+    "billingSavings": "وفّر",
+    "recommended": "موصى بها",
+    "startingAt": "يبدأ من",
+    "perMonth": "/ شهريًا",
+    "annualEquivalent": "ما يعادل شهريًا مع فوترة سنوية",
+    "pricePending": "السعر الابتدائي بانتظار الاعتماد",
+    "customPrice": "تسعير مخصص",
+    "plans": [
+      {
+        "id": "launch",
+        "name": "Launch",
+        "audience": "لشركات التأجير المستقلة التي تستبدل العمل اليدوي المتفرق.",
+        "features": [
+          "الحجوزات والتوافر",
+          "سجلات الأسطول والمركبات",
+          "عقود التأجير",
+          "سجلات العملاء",
+          "التقارير التشغيلية الأساسية",
+          "الدعم القياسي"
+        ],
+        "cta": "احصل على تقدير لباقة Launch"
+      },
+      {
+        "id": "growth",
+        "name": "Growth",
+        "audience": "للأساطيل النامية التي تدير مركبات وموظفين ومواقع أكثر.",
+        "features": [
+          "كل ما تتضمنه Launch",
+          "دعم عدة مواقع",
+          "مسارات الحجز عبر الإنترنت",
+          "التوقيع الرقمي والودائع",
+          "مسارات الصيانة",
+          "تقارير وأتمتة متقدمة",
+          "دعم ذو أولوية"
+        ],
+        "cta": "احجز عرضًا لباقة Growth"
+      },
+      {
+        "id": "enterprise",
+        "name": "Enterprise",
+        "audience": "للأساطيل الكبيرة والامتيازات والعمليات ذات احتياجات التكامل المعقدة.",
+        "features": [
+          "كل ما تتضمنه Growth",
+          "تكاملات مخصصة ووصول إلى API",
+          "أدوار وصلاحيات متقدمة",
+          "تخطيط ترحيل البيانات",
+          "تهيئة مخصصة",
+          "خيارات اتفاقية مستوى الخدمة",
+          "دعم مخصص للحساب"
+        ],
+        "cta": "تحدث مع المبيعات"
+      }
+    ],
+    "basisTitle": "العوامل التي تؤثر في السعر النهائي",
+    "basis": [
+      "المركبات والمواقع النشطة",
+      "الوحدات المختارة",
+      "نطاق الترحيل والتهيئة",
+      "متطلبات التكامل والدعم"
+    ],
+    "modulesTitle": "أضف القدرات مع نمو أعمالك",
+    "modules": [
+      "موقع حجز عبر الإنترنت",
+      "نظام GPS والتليماتية",
+      "تكاملات المحاسبة",
+      "معالجة المدفوعات",
+      "الأتمتة بالذكاء الاصطناعي",
+      "تحليلات متقدمة"
+    ],
+    "assurances": [
+      "لا توجد وحدات إلزامية مخفية",
+      "ترقية مع نمو الأسطول",
+      "تحديد نطاق التهيئة قبل الالتزام"
+    ],
+    "notSure": "غير متأكد من الباقة المناسبة؟",
+    "compare": "استكشف وحدات المنتج",
+    "note": "تظل الأسعار مخفية حتى اعتماد النموذج التجاري. أضف المبالغ الشهرية المعتمدة في src/content/pricing-config.ts لنشر أسعار ابتدائية شفافة تلقائيًا."
+  },
+  "faq": {
+    "eyebrow": "الأسئلة الشائعة",
+    "title": "أسئلة ينبغي للمشتري طرحها قبل إنشاء الحساب.",
+    "items": [
+      [
+        "هل RentalDriveGo مخصص فقط لشركات التأجير الكبيرة؟",
+        "لا يزال السوق المستهدف وهيكل الباقات قيد الاعتماد. يجب أن يحدد إنشاء الحساب حجم الأسطول والمواقع وسير العمل والوحدات المطلوبة بدل افتراض أن إعدادًا واحدًا يناسب الجميع."
+      ],
+      [
+        "هل يمكننا الاحتفاظ بأنظمتنا الحالية؟",
+        "تُراجع التكاملات المحتملة خلال الاستكشاف. يجب تأكيد توافر الموصل وملكية البيانات وجهد الترحيل والمزامنة المستمرة قبل تقديم أي وعد."
+      ],
+      [
+        "هل تدعم المنصة لغات متعددة؟",
+        "يدعم الموقع ونظام التصميم المعتمد الإنجليزية والفرنسية والعربية. تستخدم العربية اتجاهًا حقيقيًا للمستند من اليمين إلى اليسار، لا مجرد محاذاة شكلية."
+      ],
+      [
+        "كيف يُحسب السعر؟",
+        "النموذج التجاري قيد الاعتماد. حتى ذلك الحين، يجب أن يوضح كل عرض النطاق والوحدات والحدود والتهيئة والتكاملات والدعم."
+      ],
+      [
+        "ما الشهادات الأمنية المتوفرة؟",
+        "لا تدّعي هذه النسخة وجود أي شهادة. يجب تقديم الأدلة الأمنية عبر وثائق معتمدة أثناء التقييم وعدم نشرها إلا بعد التحقق."
+      ],
+      [
+        "ماذا يحدث أثناء إنشاء الحساب؟",
+        "ينبغي أن ترسم الجلسة سير عملك من الحجز حتى الإرجاع، وتعرض المسار المناسب في المنتج، وتحدد احتياجات التكامل، وتوثق أسئلة الملاءمة غير المحسومة."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "شاهد سير العمل كاملًا",
+    "title": "أحضر عملية تأجير حقيقية.",
+    "body": "سنتتبع عمليات التسليم والاستثناءات والمعلومات التي يحتاجها فريقك من الحجز حتى إعادة المركبة.",
+    "primary": "أنشئ حسابًا للمنتج",
+    "secondary": "تواصل مع المبيعات"
+  },
+  "footer": {
+    "tagline": "تشغيل مترابط لتأجير السيارات من الحجز حتى الإرجاع.",
+    "groups": [
+      [
+        "المنتج",
+        [
+          ["سير العمل", "#workflow"],
+          ["الوحدات", "#modules"],
+          ["التسعير", "#pricing"]
+        ]
+      ],
+      [
+        "الشركة",
+        [
+          ["تواصل مع المبيعات", "#contact"],
+          ["أنشئ حسابًا", "#signup"]
+        ]
+      ],
+      [
+        "الحساب",
+        [
+          ["تسجيل الدخول", "#login"],
+          ["اللغة", "#language"],
+          ["المظهر", "#theme"]
+        ]
+      ],
+      [
+        "قانوني",
+        [
+          ["الخصوصية", "#!"],
+          ["الشروط", "#!"],
+          ["إمكانية الوصول", "#!"]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. تظل الأدلة والادعاءات التجارية خاضعة للاعتماد."
+  },
+  "form": {
+    "title": "أنشئ حسابًا للمنتج",
+    "body": "أخبرنا كيف يعمل نشاط تأجير السيارات لديك. الحقول المطلوبة مميزة.",
+    "name": "الاسم الكامل",
+    "email": "البريد الإلكتروني للعمل",
+    "company": "الشركة",
+    "fleet": "الحجم التقريبي للأسطول",
+    "market": "الدولة أو سوق التشغيل",
+    "language": "اللغة المفضلة",
+    "message": "ما الموضوع الذي ينبغي أن نركز عليه؟",
+    "submit": "إنشاء حسابي",
+    "privacy": "يتحقق وضع غير الإنتاج من سير العمل ثم يتخلص من الطلب. لا يُرسل أي عميل محتمل إلى نظام مبيعات. يظل نص الخصوصية والموافقة النهائي محظورًا إلى حين الاعتماد القانوني.",
+    "close": "إغلاق",
+    "required": "مطلوب",
+    "emailError": "أدخل عنوان بريد إلكتروني صالحًا للعمل.",
+    "requiredError": "هذا الحقل مطلوب.",
+    "fleetOptions": [
+      "اختر خيارًا",
+      "من 1 إلى 9 مركبات",
+      "من 10 إلى 24 مركبة",
+      "من 25 إلى 49 مركبة",
+      "من 50 إلى 99 مركبة",
+      "من 100 إلى 249 مركبة",
+      "250 مركبة أو أكثر"
+    ],
+    "langOptions": ["English", "Français", "العربية"],
+    "successTitle": "تم تسجيل إنشاء الحساب",
+    "successBody": "اكتمل مسار الحجز في هذا النموذج الأولي. لم يُرسل أي طلب إلى نظام مبيعات فعلي.",
+    "submitAnother": "إرسال طلب آخر",
+    "submissionError": "تعذر على النموذج الأولي إكمال الطلب. ما زالت بياناتك متاحة. حاول مرة أخرى.",
+    "errorSummary": "راجع الحقول المميزة ثم حاول مرة أخرى.",
+    "optional": "اختياري",
+    "messageHelp": "لا تُدرج معلومات شخصية حساسة أو معلومات دفع.",
+    "messageCount": "حرفًا",
+    "submitting": "جارٍ إرسال الطلب",
+    "retry": "حاول مرة أخرى",
+    "closeBlocked": "انتظر حتى يكتمل الإرسال الحالي قبل الإغلاق.",
+    "invalidOptionError": "اختر خيارًا صالحًا.",
+    "tooLongError": "هذا الإدخال طويل جدًا.",
+    "configurationError": "إنشاء الحساب غير متاح لأن اعتماد تكامل الإنتاج لم يكتمل.",
+    "timeoutError": "انتهت مهلة الطلب. لا تزال بياناتك متاحة؛ حاول مرة أخرى.",
+    "duplicateError": "تمت معالجة هذا الطلب بالفعل. لم يُنشأ عميل محتمل ثانٍ.",
+    "rateLimitError": "تم استلام عدد كبير جدًا من الطلبات. حاول مرة أخرى لاحقًا.",
+    "genericError": "تعذر إكمال الطلب. لا تزال بياناتك متاحة.",
+    "localModeLabel": "موصل محلي آمن",
+    "marketDefault": "المغرب"
+  },
+  "preview": {
+    "today": "اليوم",
+    "branch": "الفرع المركزي",
+    "title": "نظرة عامة على التشغيل",
+    "reservations": "الحجوزات",
+    "ready": "مركبات جاهزة",
+    "attention": "تحتاج متابعة",
+    "active": "عمليات تأجير نشطة",
+    "r1": "تسليم الساعة 10:30",
+    "r2": "إرجاع مستحق الساعة 14:00",
+    "r3": "الفحص مطلوب",
+    "vehicle": "المركبة",
+    "customer": "العميل",
+    "status": "الحالة",
+    "task": "الإجراء التالي",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "جاهزة",
+    "statusDue": "مستحقة اليوم",
+    "taskAssign": "تأكيد مستندات السائق",
+    "taskInspect": "إكمال فحص الإرجاع"
+  },
+  "tour": {
+    "title": "جولة في المنتج",
+    "intro": "تابع عملية تأجير واحدة من الحجز حتى الإرجاع.",
+    "back": "السابق",
+    "next": "التالي",
+    "finish": "إنهاء الجولة",
+    "close": "إغلاق جولة المنتج",
+    "step": "الخطوة",
+    "of": "من"
+  },
+  "research": {
+    "title": "وضع البحث",
+    "events": "أحداث",
+    "export": "تصدير الأحداث",
+    "clear": "مسح",
+    "close": "إغلاق"
+  }
+}
diff --git a/apps/homepage/src/content/locales/ar/shell.json b/apps/homepage/src/content/locales/ar/shell.json
new file mode 100644
index 0000000..275b99d
--- /dev/null
+++ b/apps/homepage/src/content/locales/ar/shell.json
@@ -0,0 +1,94 @@
+{
+  "skipToContent": "الانتقال إلى المحتوى الرئيسي",
+  "brandLabel": "الصفحة الرئيسية لـ RentalDriveGo",
+  "foundationLabel": "أساس التطبيق",
+  "header": {
+    "navigationLabel": "التنقل الرئيسي",
+    "controlsLabel": "عناصر التحكم في العرض واللغة",
+    "menuOpen": "فتح قائمة التنقل",
+    "menuClose": "إغلاق قائمة التنقل",
+    "nav": {
+      "product": "المنتج",
+      "workflow": "سير العمل",
+      "modules": "الوحدات",
+      "pricing": "التسعير",
+      "faq": "الأسئلة الشائعة"
+    },
+    "login": "تسجيل الدخول",
+    "loginUnavailable": "وجهة تسجيل الدخول في انتظار الاعتماد",
+    "demo": "أنشئ حسابًا",
+    "demoUnavailable": "إنشاء الحساب في انتظار اعتماد التكامل"
+  },
+  "controls": {
+    "language": "اللغة",
+    "theme": "المظهر",
+    "themeStatus": "تفضيل المظهر الحالي: {value}",
+    "localeNames": {
+      "en": "الإنجليزية",
+      "fr": "الفرنسية",
+      "ar": "العربية"
+    },
+    "themes": {
+      "light": "فاتح",
+      "dark": "داكن",
+      "system": "النظام"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "تذييل الموقع",
+    "tagline": "تشغيل مترابط لتأجير السيارات من الحجز حتى الإرجاع.",
+    "groups": {
+      "product": "المنتج",
+      "company": "الشركة",
+      "account": "الحساب",
+      "legal": "قانوني"
+    },
+    "links": {
+      "workflow": "سير العمل",
+      "modules": "الوحدات",
+      "pricing": "التسعير",
+      "faq": "الأسئلة الشائعة",
+      "contact": "تواصل مع المبيعات",
+      "demo": "أنشئ حسابًا",
+      "login": "تسجيل الدخول",
+      "privacy": "الخصوصية",
+      "terms": "الشروط",
+      "accessibility": "إمكانية الوصول"
+    },
+    "pending": "في انتظار الاعتماد",
+    "copyrightPrefix": "©",
+    "releaseNotice": "يظل النشر العام متوقفًا حتى معالجة العوائق الموثقة."
+  },
+  "states": {
+    "loadingTitle": "جارٍ التحميل",
+    "loadingBody": "جارٍ تجهيز هيكل التطبيق.",
+    "errorTitle": "حدث خطأ",
+    "errorBody": "تعذر عرض الصفحة، ولم تُكشف أي تفاصيل تقنية.",
+    "retry": "إعادة المحاولة",
+    "notFoundTitle": "الصفحة غير موجودة",
+    "notFoundBody": "لا يطابق هذا العنوان مسارًا محليًا معتمدًا.",
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "pendingTitle": "الوجهة غير متاحة",
+    "pendingBody": "هذا المسار معرّف، لكن محتواه أو وجهته الإنتاجية ما زالت في انتظار الاعتماد."
+  },
+  "foundation": {
+    "eyebrow": "أساس المرحلة 11",
+    "title": "هيكل تطبيق محلي ومتوافق مع المظاهر",
+    "body": "تثبت هذه النسخة الأسس المرئية وأسس التوجيه والاتجاه وإمكانية الوصول والبيانات الوصفية من دون الادعاء بأن الصفحة التسويقية الكاملة أصبحت جاهزة.",
+    "readinessLabel": "مجالات الأساس المنفذة",
+    "items": [
+      ["الرموز الدلالية", "تستهلك أنماط المكونات طبقة دلالية موثقة."],
+      ["سلوك المظهر", "تُحل تفضيلات المظهر الفاتح والداكن والنظام وتُحفظ."],
+      ["التوطين", "تُعرض الإنجليزية والفرنسية والعربية من مسارات مسبوقة باللغة."],
+      ["اتجاه المستند", "تُعرض العربية باتجاه حقيقي من اليمين إلى اليسار على مستوى المستند."],
+      ["إمكانية الوصول", "رابط التخطي والتركيز المرئي والمعالم وتقليل الحركة مدمجة."],
+      ["هيكل التطبيق", "يتوفر رأس متجاوب وتنقل للجوال وتذييل وحالات عامة."]
+    ],
+    "deferredLabel": "وجهات الصفحة الرئيسية المؤجلة",
+    "deferredBody": "ترتبط وجهة التنقل المعتمدة هذه ببيان المسارات، بينما يظل قسمها الإنتاجي خارج نطاق المرحلة 11."
+  },
+  "metadata": {
+    "pendingTitle": "وجهة غير متاحة | RentalDriveGo",
+    "pendingDescription": "وجهة RentalDriveGo المحلية هذه معرّفة، لكن نشرها في بيئة الإنتاج غير معتمد."
+  }
+}
diff --git a/apps/homepage/src/content/locales/en/homepage.json b/apps/homepage/src/content/locales/en/homepage.json
new file mode 100644
index 0000000..748063f
--- /dev/null
+++ b/apps/homepage/src/content/locales/en/homepage.json
@@ -0,0 +1,415 @@
+{
+  "meta": {
+    "langName": "English",
+    "dir": "ltr",
+    "title": "RentalDriveGo | Connected rental-car operations",
+    "description": "Run reservations, vehicles, agreements, handovers, and returns in one connected rental operations platform."
+  },
+  "header": {
+    "nav": [
+      ["product", "Product"],
+      ["workflow", "Workflow"],
+      ["modules", "Modules"],
+      ["pricing", "Pricing"],
+      ["faq", "FAQ"]
+    ],
+    "login": "Log in",
+    "demo": "Create account",
+    "menu": "Open menu",
+    "language": "Language",
+    "theme": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "hero": {
+    "eyebrow": "Rental operations, connected",
+    "title": "Run every rental from reservation to return in one system.",
+    "body": "Give reservations, fleet, agreements, handovers, and returns one operational record, so each team sees what needs attention next.",
+    "primary": "Create account",
+    "secondary": "Watch product tour",
+    "caption": "Illustrative product interface. Final screens must use approved product data and captures."
+  },
+  "trust": {
+    "eyebrow": "Operational coverage",
+    "title": "One workflow across the rental lifecycle.",
+    "body": "Keep the customer, vehicle, agreement, and task context connected as the rental moves forward.",
+    "items": [
+      ["Reservation", "Capture the request and required details."],
+      ["Vehicle", "Track availability and readiness."],
+      ["Agreement", "Keep pickup tasks and records together."],
+      ["Return", "Record condition and close follow-up work."]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "Why change",
+    "title": "Replace fragmented handoffs with a shared operating flow.",
+    "body": "The cost of disconnected tools is rarely one dramatic failure. It is the daily accumulation of duplicate entry, missing context, and delayed follow-up.",
+    "beforeTitle": "Fragmented operation",
+    "beforeItems": [
+      "Reservation details copied between tools",
+      "Vehicle status confirmed through messages",
+      "Agreement tasks tracked from memory",
+      "Return issues discovered after the customer leaves"
+    ],
+    "afterTitle": "Connected operation",
+    "afterItems": [
+      "One reservation status visible to the team",
+      "Vehicle readiness attached to the rental",
+      "Pickup requirements shown before handover",
+      "Return follow-up created while context is fresh"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "End-to-end workflow",
+    "title": "Move the rental forward without losing the thread.",
+    "body": "Each step exposes the decision, owner, and next action instead of burying operations inside a generic feature list.",
+    "steps": [
+      ["01", "Capture the reservation", "Record dates, driver details, requirements, and source."],
+      ["02", "Assign a ready vehicle", "Match availability with class, location, and readiness."],
+      ["03", "Complete pickup", "Confirm documents, inspection, agreement, and handover tasks."],
+      ["04", "Process the return", "Record condition, close open work, and release the vehicle."]
+    ]
+  },
+  "roles": {
+    "eyebrow": "Built for the operating team",
+    "title": "Give each role the context it needs, without creating separate versions of the truth.",
+    "roles": [
+      ["Owner or manager", "See workload, exceptions, and operating signals across the business."],
+      ["Reservations team", "Move requests from inquiry to confirmed rental with fewer handoffs."],
+      [
+        "Fleet and operations",
+        "Know which vehicles are available, blocked, due, or awaiting action."
+      ],
+      ["Front desk", "Prepare pickup and return tasks before the customer is waiting."]
+    ]
+  },
+  "modules": {
+    "eyebrow": "Product modules",
+    "title": "A connected core, organized around real rental work.",
+    "body": "Module boundaries clarify responsibility while shared records prevent the usual copy-and-paste archaeology.",
+    "items": [
+      ["Reservations", "Availability, dates, customer requirements, and status in one flow."],
+      ["Fleet readiness", "Vehicle availability, blocks, service state, and location context."],
+      ["Rental agreements", "Pickup requirements, agreement status, and operational records."],
+      [
+        "Vehicle inspections",
+        "Structured pickup and return condition checks with follow-up tasks."
+      ],
+      ["Customer records", "Rental history and contact context attached to active work."],
+      [
+        "Operations reporting",
+        "Definitions and operational views that can be validated against source activity."
+      ]
+    ]
+  },
+  "results": {
+    "eyebrow": "Measured results",
+    "title": "Measure the change, not the marketing.",
+    "body": "No outcome claim should appear until a real customer baseline, comparison period, and data definition are approved. The production page therefore shows the measurement plan instead of fictional percentages.",
+    "metrics": [
+      ["Reservation handling time", "From usable request to confirmed reservation."],
+      ["Vehicle turnaround time", "From return recorded to ready-for-rental status."],
+      [
+        "Fleet utilization",
+        "Available rental days compared with rented days, using one approved definition."
+      ],
+      ["Overdue follow-up", "Open overdue rentals with an assigned owner and next action."]
+    ],
+    "methodTitle": "Methodology required before publishing results",
+    "method": [
+      "Capture a pre-launch baseline using the same KPI definitions.",
+      "Compare equivalent locations, fleet classes, and operating periods.",
+      "Report sample size, exclusions, and measurement window.",
+      "Link every public result to an approved evidence record."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "Integrations",
+    "title": "Connect the systems your operation already depends on.",
+    "body": "Integration scope is confirmed during discovery so the proposal reflects your market, current stack, and data ownership. Named partners are not shown until connector availability is verified.",
+    "items": [
+      "Accounting and finance",
+      "Payments and deposits",
+      "Telematics and vehicle data",
+      "Identity and document services",
+      "Email, SMS, and notifications",
+      "Website and booking channels"
+    ]
+  },
+  "security": {
+    "eyebrow": "Security and reliability",
+    "title": "Evaluate the platform with evidence, not badges.",
+    "body": "Certifications and service-level claims remain unpublished until approved documentation exists. During evaluation, request concrete answers for the controls that matter to your operation.",
+    "checks": [
+      ["Access control", "Roles, permissions, administrator actions, and offboarding."],
+      ["Auditability", "Which changes are recorded, searchable, and exportable."],
+      ["Data handling", "Ownership, retention, export, deletion, and subprocessors."],
+      ["Continuity", "Backup, recovery, incident communication, and support process."]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Simple, scalable pricing",
+    "title": "Pricing built around your fleet",
+    "body": "Choose a fleet range to see the plan designed for your operation. Public starting prices can be enabled from one commercial configuration file after finance approval.",
+    "fleetSelectorLabel": "Approximate active fleet size",
+    "fleetBands": [
+      {
+        "id": "small",
+        "label": "1–25 vehicles"
+      },
+      {
+        "id": "growing",
+        "label": "26–75 vehicles"
+      },
+      {
+        "id": "scale",
+        "label": "76–200 vehicles"
+      },
+      {
+        "id": "enterprise",
+        "label": "200+ vehicles"
+      }
+    ],
+    "billingLegend": "Billing period",
+    "billingMonthly": "Monthly",
+    "billingAnnual": "Annual",
+    "billingSavings": "Save",
+    "recommended": "Recommended",
+    "startingAt": "Starting at",
+    "perMonth": "/ month",
+    "annualEquivalent": "monthly equivalent, billed annually",
+    "pricePending": "Starting price pending approval",
+    "customPrice": "Custom pricing",
+    "plans": [
+      {
+        "id": "launch",
+        "name": "Launch",
+        "audience": "For independent rental companies replacing fragmented manual work.",
+        "features": [
+          "Reservations and availability",
+          "Fleet and vehicle records",
+          "Rental agreements",
+          "Customer records",
+          "Basic operational reporting",
+          "Standard support"
+        ],
+        "cta": "Estimate Launch pricing"
+      },
+      {
+        "id": "growth",
+        "name": "Growth",
+        "audience": "For growing fleets coordinating more vehicles, staff, and locations.",
+        "features": [
+          "Everything in Launch",
+          "Multiple locations",
+          "Online booking workflows",
+          "Digital signatures and deposits",
+          "Maintenance workflows",
+          "Advanced reporting and automation",
+          "Priority support"
+        ],
+        "cta": "Book a Growth demo"
+      },
+      {
+        "id": "enterprise",
+        "name": "Enterprise",
+        "audience": "For large fleets, franchises, and operations with complex integration needs.",
+        "features": [
+          "Everything in Growth",
+          "Custom integrations and API access",
+          "Advanced roles and permissions",
+          "Data migration planning",
+          "Custom onboarding",
+          "Service-level agreement options",
+          "Dedicated account support"
+        ],
+        "cta": "Talk to sales"
+      }
+    ],
+    "basisTitle": "What affects the final price",
+    "basis": [
+      "Active vehicles and locations",
+      "Selected modules",
+      "Migration and onboarding scope",
+      "Integration and support requirements"
+    ],
+    "modulesTitle": "Add capabilities as you grow",
+    "modules": [
+      "Online booking website",
+      "GPS and telematics",
+      "Accounting integrations",
+      "Payment processing",
+      "AI automation",
+      "Advanced analytics"
+    ],
+    "assurances": [
+      "No hidden mandatory modules",
+      "Upgrade as your fleet grows",
+      "Onboarding scope agreed before commitment"
+    ],
+    "notSure": "Not sure which plan fits?",
+    "compare": "Explore product modules",
+    "note": "Prices remain hidden until the commercial model is approved. Add approved monthly amounts in src/content/pricing-config.ts to publish transparent starting prices automatically."
+  },
+  "faq": {
+    "eyebrow": "FAQ",
+    "title": "Questions buyers should ask before creating an account.",
+    "items": [
+      [
+        "Is RentalDriveGo only for large rental companies?",
+        "The final market and packaging are still being defined. The onboarding should qualify fleet size, locations, workflows, and required modules rather than pretend one setup fits everyone."
+      ],
+      [
+        "Can we keep our existing systems?",
+        "Potential integrations are reviewed during discovery. Connector availability, data ownership, migration effort, and ongoing synchronization must be confirmed before they are promised."
+      ],
+      [
+        "Does the platform support multiple languages?",
+        "The website and approved design system support English, French, and Arabic. Arabic uses true document-level right-to-left behavior rather than a mirrored-looking patch."
+      ],
+      [
+        "How is pricing calculated?",
+        "The commercial model is pending approval. Until then, proposals should state the scope, included modules, limits, onboarding, integrations, and support explicitly."
+      ],
+      [
+        "What security certifications do you have?",
+        "No certification is claimed in this baseline. Security evidence should be supplied through approved documentation during evaluation and published only after verification."
+      ],
+      [
+        "What happens during account creation?",
+        "The session should map your current reservation-to-return flow, show the relevant product path, identify integration needs, and document unresolved fit questions."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "See the full workflow",
+    "title": "Bring one real rental process.",
+    "body": "We will trace the handoffs, exceptions, and information your team needs from reservation through vehicle return.",
+    "primary": "Create account",
+    "secondary": "Contact sales"
+  },
+  "footer": {
+    "tagline": "Connected rental-car operations from reservation to return.",
+    "groups": [
+      [
+        "Product",
+        [
+          ["Workflow", "#workflow"],
+          ["Modules", "#modules"],
+          ["Pricing", "#pricing"]
+        ]
+      ],
+      [
+        "Company",
+        [
+          ["Contact sales", "#contact"],
+          ["Create account", "#signup"]
+        ]
+      ],
+      [
+        "Account",
+        [
+          ["Log in", "#login"],
+          ["Language", "#language"],
+          ["Theme", "#theme"]
+        ]
+      ],
+      [
+        "Legal",
+        [
+          ["Privacy", "#!"],
+          ["Terms", "#!"],
+          ["Accessibility", "#!"]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. Evidence and commercial claims remain subject to approval."
+  },
+  "form": {
+    "title": "Create account",
+    "body": "Tell us how your rental operation works. Required fields are marked.",
+    "name": "Full name",
+    "email": "Work email",
+    "company": "Company",
+    "fleet": "Approximate fleet size",
+    "market": "Country or operating market",
+    "marketDefault": "Morocco",
+    "language": "Preferred language",
+    "message": "What should we focus on?",
+    "submit": "Create my account",
+    "privacy": "Non-production mode validates the workflow and discards the request. No lead is sent to a sales system. Final privacy and consent text remains blocked pending legal approval.",
+    "close": "Close",
+    "required": "Required",
+    "emailError": "Enter a valid work email address.",
+    "requiredError": "This field is required.",
+    "fleetOptions": [
+      "Select an option",
+      "1–9 vehicles",
+      "10–24 vehicles",
+      "25–49 vehicles",
+      "50–99 vehicles",
+      "100–249 vehicles",
+      "250 or more vehicles"
+    ],
+    "langOptions": ["English", "Français", "العربية"],
+    "successTitle": "Account creation recorded",
+    "successBody": "This prototype has completed the booking flow. No request was sent to a real sales system.",
+    "submitAnother": "Submit another request",
+    "submissionError": "The prototype could not complete the request. Your entries are still available. Try again.",
+    "errorSummary": "Review the highlighted fields and try again.",
+    "optional": "Optional",
+    "messageHelp": "Do not include sensitive personal or payment information.",
+    "messageCount": "characters",
+    "submitting": "Submitting request",
+    "retry": "Try again",
+    "closeBlocked": "Wait for the current submission to finish before closing.",
+    "invalidOptionError": "Select a valid option.",
+    "tooLongError": "This entry is too long.",
+    "configurationError": "Account creation is not available because production integration approval is incomplete.",
+    "timeoutError": "The request timed out. Your entries are still available; try again.",
+    "duplicateError": "This request has already been processed. No second lead was created.",
+    "rateLimitError": "Too many requests were received. Try again later.",
+    "genericError": "The request could not be completed. Your entries are still available.",
+    "localModeLabel": "Safe local adapter"
+  },
+  "preview": {
+    "today": "Today",
+    "branch": "Central branch",
+    "title": "Operations overview",
+    "reservations": "Reservations",
+    "ready": "Vehicles ready",
+    "attention": "Needs attention",
+    "active": "Active rentals",
+    "r1": "Pickup at 10:30",
+    "r2": "Return due at 14:00",
+    "r3": "Inspection required",
+    "vehicle": "Vehicle",
+    "customer": "Customer",
+    "status": "Status",
+    "task": "Next action",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "Ready",
+    "statusDue": "Due today",
+    "taskAssign": "Confirm driver documents",
+    "taskInspect": "Complete return inspection"
+  },
+  "tour": {
+    "title": "Product tour",
+    "intro": "Follow one rental from reservation through return.",
+    "back": "Previous",
+    "next": "Next",
+    "finish": "Finish tour",
+    "close": "Close product tour",
+    "step": "Step",
+    "of": "of"
+  },
+  "research": {
+    "title": "Research mode",
+    "events": "events",
+    "export": "Export events",
+    "clear": "Clear",
+    "close": "Close"
+  }
+}
diff --git a/apps/homepage/src/content/locales/en/shell.json b/apps/homepage/src/content/locales/en/shell.json
new file mode 100644
index 0000000..7e6097c
--- /dev/null
+++ b/apps/homepage/src/content/locales/en/shell.json
@@ -0,0 +1,100 @@
+{
+  "skipToContent": "Skip to main content",
+  "brandLabel": "RentalDriveGo home",
+  "foundationLabel": "Application foundation",
+  "header": {
+    "navigationLabel": "Primary navigation",
+    "controlsLabel": "Display and language controls",
+    "menuOpen": "Open navigation menu",
+    "menuClose": "Close navigation menu",
+    "nav": {
+      "product": "Product",
+      "workflow": "Workflow",
+      "modules": "Modules",
+      "pricing": "Pricing",
+      "faq": "FAQ"
+    },
+    "login": "Log in",
+    "loginUnavailable": "Login destination pending approval",
+    "demo": "Create account",
+    "demoUnavailable": "Account creation pending integration approval"
+  },
+  "controls": {
+    "language": "Language",
+    "theme": "Theme",
+    "themeStatus": "Current theme preference: {value}",
+    "localeNames": {
+      "en": "English",
+      "fr": "French",
+      "ar": "Arabic"
+    },
+    "themes": {
+      "light": "Light",
+      "dark": "Dark",
+      "system": "System"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "Site footer",
+    "tagline": "Connected rental-car operations from reservation to return.",
+    "groups": {
+      "product": "Product",
+      "company": "Company",
+      "account": "Account",
+      "legal": "Legal"
+    },
+    "links": {
+      "workflow": "Workflow",
+      "modules": "Modules",
+      "pricing": "Pricing",
+      "faq": "FAQ",
+      "contact": "Contact sales",
+      "demo": "Create account",
+      "login": "Log in",
+      "privacy": "Privacy",
+      "terms": "Terms",
+      "accessibility": "Accessibility"
+    },
+    "pending": "Pending approval",
+    "copyrightPrefix": "©",
+    "releaseNotice": "Public release remains gated until documented blockers are resolved."
+  },
+  "states": {
+    "loadingTitle": "Loading",
+    "loadingBody": "Preparing the application shell.",
+    "errorTitle": "Something went wrong",
+    "errorBody": "The page could not be displayed. Technical details were not exposed.",
+    "retry": "Try again",
+    "notFoundTitle": "Page not found",
+    "notFoundBody": "This address does not match an approved localized route.",
+    "backHome": "Return home",
+    "pendingTitle": "Destination not available",
+    "pendingBody": "This route is defined, but its production content or destination is still awaiting approval."
+  },
+  "foundation": {
+    "eyebrow": "Phase 11 foundation",
+    "title": "A localized, theme-aware application shell",
+    "body": "This implementation proves the shared visual, routing, direction, accessibility, and metadata foundations without pretending the full marketing homepage already exists.",
+    "readinessLabel": "Implemented foundation areas",
+    "items": [
+      ["Semantic tokens", "Component styles consume a documented semantic layer."],
+      ["Theme behavior", "Light, dark, and system preferences resolve and persist."],
+      ["Localization", "English, French, and Arabic render from locale-prefixed routes."],
+      ["Directionality", "Arabic renders with document-level right-to-left direction."],
+      [
+        "Accessibility",
+        "Skip navigation, focus treatment, landmarks, and reduced motion are built in."
+      ],
+      [
+        "Application shell",
+        "Responsive header, mobile navigation, footer, and global states are available."
+      ]
+    ],
+    "deferredLabel": "Deferred homepage destinations",
+    "deferredBody": "This approved navigation destination is wired to the route manifest, while its production section remains outside Phase 11."
+  },
+  "metadata": {
+    "pendingTitle": "Unavailable destination | RentalDriveGo",
+    "pendingDescription": "This localized RentalDriveGo destination is defined but not approved for production publication."
+  }
+}
diff --git a/apps/homepage/src/content/locales/fr/homepage.json b/apps/homepage/src/content/locales/fr/homepage.json
new file mode 100644
index 0000000..206d897
--- /dev/null
+++ b/apps/homepage/src/content/locales/fr/homepage.json
@@ -0,0 +1,434 @@
+{
+  "meta": {
+    "langName": "Français",
+    "dir": "ltr",
+    "title": "RentalDriveGo | Opérations de location connectées",
+    "description": "Pilotez les réservations, véhicules, contrats, remises et retours dans une plateforme connectée."
+  },
+  "header": {
+    "nav": [
+      ["product", "Produit"],
+      ["workflow", "Parcours"],
+      ["modules", "Modules"],
+      ["pricing", "Tarifs"],
+      ["faq", "FAQ"]
+    ],
+    "login": "Se connecter",
+    "demo": "Créer un compte",
+    "menu": "Ouvrir le menu",
+    "language": "Langue",
+    "theme": "Thème",
+    "light": "Clair",
+    "dark": "Sombre",
+    "system": "Système"
+  },
+  "hero": {
+    "eyebrow": "Opérations de location connectées",
+    "title": "Pilotez chaque location, de la réservation au retour du véhicule, dans un seul système.",
+    "body": "Reliez les réservations, le parc, les contrats, les remises et les retours dans un même dossier opérationnel, afin que chaque équipe sache quelle action vient ensuite.",
+    "primary": "Créer un compte",
+    "secondary": "Voir la visite du produit",
+    "caption": "Interface produit illustrative. Les écrans définitifs doivent utiliser des données et captures approuvées."
+  },
+  "trust": {
+    "eyebrow": "Couverture opérationnelle",
+    "title": "Un même parcours pour tout le cycle de location.",
+    "body": "Conservez le contexte du client, du véhicule, du contrat et des tâches au fil de la location.",
+    "items": [
+      ["Réservation", "Saisir la demande et les informations nécessaires."],
+      ["Véhicule", "Suivre la disponibilité et l’état de préparation."],
+      ["Contrat", "Regrouper les tâches de départ et les documents."],
+      ["Retour", "Enregistrer l’état et clôturer les actions de suivi."]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "Pourquoi changer",
+    "title": "Remplacez les transmissions fragmentées par un flux opérationnel partagé.",
+    "body": "Le coût des outils déconnectés n’est pas toujours une panne spectaculaire. Il s’accumule dans les doubles saisies, le contexte perdu et les suivis tardifs.",
+    "beforeTitle": "Fonctionnement fragmenté",
+    "beforeItems": [
+      "Informations de réservation recopiées entre plusieurs outils",
+      "État du véhicule confirmé par messages",
+      "Tâches contractuelles suivies de mémoire",
+      "Problèmes de retour découverts après le départ du client"
+    ],
+    "afterTitle": "Fonctionnement connecté",
+    "afterItems": [
+      "Un statut de réservation visible par l’équipe",
+      "Préparation du véhicule rattachée à la location",
+      "Exigences de départ affichées avant la remise",
+      "Suivi du retour créé pendant que le contexte est encore précis"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "Parcours de bout en bout",
+    "title": "Faites avancer la location sans perdre le fil.",
+    "body": "Chaque étape met en évidence la décision, le responsable et l’action suivante, au lieu d’enfouir le travail dans une liste générique de fonctionnalités.",
+    "steps": [
+      [
+        "01",
+        "Saisir la réservation",
+        "Enregistrer les dates, le conducteur, les exigences et la source."
+      ],
+      [
+        "02",
+        "Affecter un véhicule prêt",
+        "Faire correspondre disponibilité, catégorie, agence et état de préparation."
+      ],
+      [
+        "03",
+        "Finaliser le départ",
+        "Confirmer documents, inspection, contrat et tâches de remise."
+      ],
+      [
+        "04",
+        "Traiter le retour",
+        "Enregistrer l’état, clôturer les actions et libérer le véhicule."
+      ]
+    ]
+  },
+  "roles": {
+    "eyebrow": "Conçu pour l’équipe opérationnelle",
+    "title": "Donnez à chaque rôle le contexte utile, sans multiplier les versions de la vérité.",
+    "roles": [
+      ["Direction ou responsable", "Voir la charge, les exceptions et les signaux d’exploitation."],
+      [
+        "Équipe réservations",
+        "Faire passer les demandes vers une location confirmée avec moins de transmissions."
+      ],
+      [
+        "Parc et opérations",
+        "Savoir quels véhicules sont disponibles, bloqués, attendus ou en attente d’action."
+      ],
+      ["Comptoir", "Préparer les tâches de départ et de retour avant que le client n’attende."]
+    ]
+  },
+  "modules": {
+    "eyebrow": "Modules produit",
+    "title": "Un socle connecté, organisé autour du travail réel de location.",
+    "body": "Les modules clarifient les responsabilités, tandis que les dossiers partagés évitent l’archéologie du copier-coller.",
+    "items": [
+      ["Réservations", "Disponibilités, dates, besoins du client et statut dans un même flux."],
+      ["Préparation du parc", "Disponibilité, blocages, état de service et contexte d’agence."],
+      ["Contrats de location", "Exigences de départ, état du contrat et dossiers opérationnels."],
+      [
+        "Inspections des véhicules",
+        "Contrôles structurés au départ et au retour avec actions de suivi."
+      ],
+      ["Dossiers clients", "Historique de location et coordonnées rattachés au travail en cours."],
+      ["Rapports opérationnels", "Définitions et vues vérifiables par rapport à l’activité source."]
+    ]
+  },
+  "results": {
+    "eyebrow": "Résultats mesurés",
+    "title": "Mesurez le changement, pas le discours commercial.",
+    "body": "Aucun résultat ne doit être publié sans référence client, période de comparaison et définition de données approuvées. Cette version présente donc la méthode plutôt que des pourcentages fictifs.",
+    "metrics": [
+      [
+        "Temps de traitement des réservations",
+        "De la demande exploitable à la réservation confirmée."
+      ],
+      ["Temps de remise en service", "Du retour enregistré au statut prêt à louer."],
+      [
+        "Taux d’utilisation du parc",
+        "Jours louables comparés aux jours loués, selon une définition approuvée."
+      ],
+      ["Suivi des retards", "Locations en retard avec responsable et prochaine action."]
+    ],
+    "methodTitle": "Méthode requise avant toute publication",
+    "method": [
+      "Établir une référence avant lancement avec les mêmes définitions de KPI.",
+      "Comparer des agences, catégories de parc et périodes équivalentes.",
+      "Publier la taille de l’échantillon, les exclusions et la fenêtre de mesure.",
+      "Relier chaque résultat public à une preuve approuvée."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "Intégrations",
+    "title": "Reliez les systèmes dont votre exploitation dépend déjà.",
+    "body": "Le périmètre d’intégration est confirmé pendant la découverte afin de refléter votre marché, votre environnement actuel et la propriété des données. Aucun partenaire n’est nommé avant vérification du connecteur.",
+    "items": [
+      "Comptabilité et finance",
+      "Paiements et dépôts",
+      "Télématique et données véhicules",
+      "Identité et documents",
+      "E-mail, SMS et notifications",
+      "Site web et canaux de réservation"
+    ]
+  },
+  "security": {
+    "eyebrow": "Sécurité et fiabilité",
+    "title": "Évaluez la plateforme avec des preuves, pas avec des badges.",
+    "body": "Aucune certification ni promesse de niveau de service n’est publiée sans documentation approuvée. Pendant l’évaluation, demandez des réponses concrètes sur les contrôles utiles à votre activité.",
+    "checks": [
+      ["Contrôle des accès", "Rôles, autorisations, actions administrateur et départs."],
+      ["Traçabilité", "Modifications enregistrées, recherchables et exportables."],
+      ["Gestion des données", "Propriété, conservation, export, suppression et sous-traitants."],
+      ["Continuité", "Sauvegarde, reprise, communication d’incident et support."]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Tarification simple et évolutive",
+    "title": "Des tarifs adaptés à votre parc",
+    "body": "Sélectionnez une taille de parc pour voir l’offre conçue pour votre exploitation. Les prix publics de départ peuvent être activés depuis un seul fichier de configuration après validation financière.",
+    "fleetSelectorLabel": "Taille approximative du parc actif",
+    "fleetBands": [
+      {
+        "id": "small",
+        "label": "1 à 25 véhicules"
+      },
+      {
+        "id": "growing",
+        "label": "26 à 75 véhicules"
+      },
+      {
+        "id": "scale",
+        "label": "76 à 200 véhicules"
+      },
+      {
+        "id": "enterprise",
+        "label": "Plus de 200 véhicules"
+      }
+    ],
+    "billingLegend": "Période de facturation",
+    "billingMonthly": "Mensuelle",
+    "billingAnnual": "Annuelle",
+    "billingSavings": "Économisez",
+    "recommended": "Recommandé",
+    "startingAt": "À partir de",
+    "perMonth": "/ mois",
+    "annualEquivalent": "équivalent mensuel, facturé annuellement",
+    "pricePending": "Prix de départ en attente de validation",
+    "customPrice": "Tarification personnalisée",
+    "plans": [
+      {
+        "id": "launch",
+        "name": "Launch",
+        "audience": "Pour les loueurs indépendants qui remplacent des processus manuels dispersés.",
+        "features": [
+          "Réservations et disponibilités",
+          "Dossiers du parc et des véhicules",
+          "Contrats de location",
+          "Dossiers clients",
+          "Rapports opérationnels essentiels",
+          "Support standard"
+        ],
+        "cta": "Estimer le tarif Launch"
+      },
+      {
+        "id": "growth",
+        "name": "Growth",
+        "audience": "Pour les parcs en croissance qui coordonnent davantage de véhicules, d’équipes et d’agences.",
+        "features": [
+          "Tout ce qui est inclus dans Launch",
+          "Plusieurs agences",
+          "Parcours de réservation en ligne",
+          "Signatures numériques et dépôts",
+          "Flux de maintenance",
+          "Rapports avancés et automatisation",
+          "Support prioritaire"
+        ],
+        "cta": "Réserver une démo Growth"
+      },
+      {
+        "id": "enterprise",
+        "name": "Enterprise",
+        "audience": "Pour les grands parcs, franchises et exploitations ayant des besoins d’intégration complexes.",
+        "features": [
+          "Tout ce qui est inclus dans Growth",
+          "Intégrations personnalisées et accès API",
+          "Rôles et autorisations avancés",
+          "Planification de la migration des données",
+          "Accompagnement personnalisé",
+          "Options d’accord de niveau de service",
+          "Suivi de compte dédié"
+        ],
+        "cta": "Parler à l’équipe commerciale"
+      }
+    ],
+    "basisTitle": "Ce qui influence le prix final",
+    "basis": [
+      "Véhicules et agences actifs",
+      "Modules sélectionnés",
+      "Périmètre de migration et de démarrage",
+      "Besoins d’intégration et de support"
+    ],
+    "modulesTitle": "Ajoutez des capacités au rythme de votre croissance",
+    "modules": [
+      "Site de réservation en ligne",
+      "GPS et télématique",
+      "Intégrations comptables",
+      "Traitement des paiements",
+      "Automatisation par IA",
+      "Analyses avancées"
+    ],
+    "assurances": [
+      "Aucun module obligatoire caché",
+      "Évolution avec la croissance du parc",
+      "Périmètre de démarrage convenu avant engagement"
+    ],
+    "notSure": "Vous ne savez pas quelle offre choisir ?",
+    "compare": "Explorer les modules du produit",
+    "note": "Les prix restent masqués tant que le modèle commercial n’est pas approuvé. Ajoutez les montants mensuels validés dans src/content/pricing-config.ts pour publier automatiquement des prix de départ transparents."
+  },
+  "faq": {
+    "eyebrow": "FAQ",
+    "title": "Les questions à poser avant de créer un compte.",
+    "items": [
+      [
+        "RentalDriveGo est-il réservé aux grands loueurs ?",
+        "Le marché cible et les offres finales restent à définir. La création de compte doit qualifier la taille du parc, les agences, les flux et les modules nécessaires au lieu de prétendre qu’une configuration convient à tous."
+      ],
+      [
+        "Pouvons-nous conserver nos systèmes actuels ?",
+        "Les intégrations possibles sont examinées pendant la découverte. La disponibilité du connecteur, la propriété des données, l’effort de migration et la synchronisation doivent être confirmés avant toute promesse."
+      ],
+      [
+        "La plateforme prend-elle en charge plusieurs langues ?",
+        "Le site et le système de design approuvé prennent en charge l’anglais, le français et l’arabe. L’arabe utilise une vraie direction de document de droite à gauche."
+      ],
+      [
+        "Comment les tarifs sont-ils calculés ?",
+        "Le modèle commercial est en attente d’approbation. En attendant, toute proposition doit préciser le périmètre, les modules, les limites, l’accompagnement, les intégrations et le support."
+      ],
+      [
+        "Quelles certifications de sécurité possédez-vous ?",
+        "Aucune certification n’est revendiquée dans cette version. Les preuves de sécurité doivent être fournies pendant l’évaluation puis publiées uniquement après vérification."
+      ],
+      [
+        "Que se passe-t-il pendant la création du compte ?",
+        "La session doit cartographier votre flux de la réservation au retour, montrer le parcours produit pertinent, identifier les intégrations et consigner les questions de compatibilité non résolues."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "Voir le parcours complet",
+    "title": "Apportez un processus de location réel ",
+    "body": "Nous suivrons les transmissions, les exceptions et les informations dont votre équipe a besoin de la réservation au retour du véhicule.",
+    "primary": "Créer un compte",
+    "secondary": "Contacter le service commercial"
+  },
+  "footer": {
+    "tagline": "Des opérations de location connectées, de la réservation au retour.",
+    "groups": [
+      [
+        "Produit",
+        [
+          ["Parcours", "#workflow"],
+          ["Modules", "#modules"],
+          ["Tarifs", "#pricing"]
+        ]
+      ],
+      [
+        "Entreprise",
+        [
+          ["Contacter le service commercial", "#contact"],
+          ["Créer un compte", "#signup"]
+        ]
+      ],
+      [
+        "Compte",
+        [
+          ["Se connecter", "#login"],
+          ["Langue", "#language"],
+          ["Thème", "#theme"]
+        ]
+      ],
+      [
+        "Mentions légales",
+        [
+          ["Confidentialité", "#!"],
+          ["Conditions", "#!"],
+          ["Accessibilité", "#!"]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. Les preuves et conditions commerciales restent soumises à approbation."
+  },
+  "form": {
+    "title": "Créer un compte du produit",
+    "body": "Décrivez-nous le fonctionnement de votre activité de location. Les champs obligatoires sont signalés.",
+    "name": "Nom complet",
+    "email": "Adresse e-mail professionnelle",
+    "company": "Entreprise",
+    "fleet": "Taille approximative du parc",
+    "market": "Pays ou marché d’exploitation",
+    "language": "Langue souhaitée",
+    "message": "Sur quoi devons-nous nous concentrer ?",
+    "submit": "Créer mon compte",
+    "privacy": "Le mode hors production valide le parcours puis supprime la demande. Aucun prospect n’est envoyé à un système commercial. Le texte final de confidentialité et de consentement reste bloqué dans l’attente de l’approbation juridique.",
+    "close": "Fermer",
+    "required": "Obligatoire",
+    "emailError": "Saisissez une adresse e-mail professionnelle valide.",
+    "requiredError": "Ce champ est obligatoire.",
+    "fleetOptions": [
+      "Sélectionnez une option",
+      "1 à 9 véhicules",
+      "10 à 24 véhicules",
+      "25 à 49 véhicules",
+      "50 à 99 véhicules",
+      "100 à 249 véhicules",
+      "250 véhicules ou plus"
+    ],
+    "langOptions": ["English", "Français", "العربية"],
+    "successTitle": "Création de compte enregistrée",
+    "successBody": "Ce prototype a terminé le parcours de réservation. Aucune demande n’a été envoyée à un véritable système commercial.",
+    "submitAnother": "Envoyer une autre demande",
+    "submissionError": "Le prototype n’a pas pu terminer la demande. Vos informations sont conservées. Réessayez.",
+    "errorSummary": "Vérifiez les champs signalés, puis réessayez.",
+    "optional": "Facultatif",
+    "messageHelp": "N’incluez aucune donnée personnelle sensible ni information de paiement.",
+    "messageCount": "caractères",
+    "submitting": "Envoi de la demande",
+    "retry": "Réessayer",
+    "closeBlocked": "Attendez la fin de l’envoi en cours avant de fermer.",
+    "invalidOptionError": "Sélectionnez une option valide.",
+    "tooLongError": "Cette saisie est trop longue.",
+    "configurationError": "L’envoi de création de compte est indisponible car l’intégration de production n’est pas encore approuvée.",
+    "timeoutError": "La demande a expiré. Vos informations sont toujours disponibles ; réessayez.",
+    "duplicateError": "Cette demande a déjà été traitée. Aucun deuxième prospect n’a été créé.",
+    "rateLimitError": "Trop de demandes ont été reçues. Réessayez plus tard.",
+    "genericError": "La demande n’a pas pu être terminée. Vos informations sont toujours disponibles.",
+    "localModeLabel": "Adaptateur local sécurisé",
+    "marketDefault": "Maroc"
+  },
+  "preview": {
+    "today": "Aujourd’hui",
+    "branch": "Agence centrale",
+    "title": "Vue des opérations",
+    "reservations": "Réservations",
+    "ready": "Véhicules prêts",
+    "attention": "À traiter",
+    "active": "Locations actives",
+    "r1": "Départ à 10 h 30",
+    "r2": "Retour prévu à 14 h 00",
+    "r3": "Inspection requise",
+    "vehicle": "Véhicule",
+    "customer": "Client",
+    "status": "Statut",
+    "task": "Prochaine action",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "Prêt",
+    "statusDue": "Prévu aujourd’hui",
+    "taskAssign": "Confirmer les documents du conducteur",
+    "taskInspect": "Finaliser l’inspection de retour"
+  },
+  "tour": {
+    "title": "Visite du produit",
+    "intro": "Suivez une location de la réservation au retour.",
+    "back": "Précédent",
+    "next": "Suivant",
+    "finish": "Terminer la visite",
+    "close": "Fermer la visite du produit",
+    "step": "Étape",
+    "of": "sur"
+  },
+  "research": {
+    "title": "Mode recherche",
+    "events": "événements",
+    "export": "Exporter les événements",
+    "clear": "Effacer",
+    "close": "Fermer"
+  }
+}
diff --git a/apps/homepage/src/content/locales/fr/shell.json b/apps/homepage/src/content/locales/fr/shell.json
new file mode 100644
index 0000000..5ecc868
--- /dev/null
+++ b/apps/homepage/src/content/locales/fr/shell.json
@@ -0,0 +1,112 @@
+{
+  "skipToContent": "Aller au contenu principal",
+  "brandLabel": "Accueil RentalDriveGo",
+  "foundationLabel": "Fondation de l’application",
+  "header": {
+    "navigationLabel": "Navigation principale",
+    "controlsLabel": "Commandes d’affichage et de langue",
+    "menuOpen": "Ouvrir le menu de navigation",
+    "menuClose": "Fermer le menu de navigation",
+    "nav": {
+      "product": "Produit",
+      "workflow": "Parcours",
+      "modules": "Modules",
+      "pricing": "Tarifs",
+      "faq": "FAQ"
+    },
+    "login": "Se connecter",
+    "loginUnavailable": "Destination de connexion en attente d’approbation",
+    "demo": "Créer un compte",
+    "demoUnavailable": "Création de compte en attente d’approbation de l’intégration"
+  },
+  "controls": {
+    "language": "Langue",
+    "theme": "Thème",
+    "themeStatus": "Préférence de thème actuelle : {value}",
+    "localeNames": {
+      "en": "Anglais",
+      "fr": "Français",
+      "ar": "Arabe"
+    },
+    "themes": {
+      "light": "Clair",
+      "dark": "Sombre",
+      "system": "Système"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "Pied de page du site",
+    "tagline": "Des opérations de location connectées, de la réservation au retour.",
+    "groups": {
+      "product": "Produit",
+      "company": "Entreprise",
+      "account": "Compte",
+      "legal": "Mentions légales"
+    },
+    "links": {
+      "workflow": "Parcours",
+      "modules": "Modules",
+      "pricing": "Tarifs",
+      "faq": "FAQ",
+      "contact": "Contacter le service commercial",
+      "demo": "Créer un compte",
+      "login": "Se connecter",
+      "privacy": "Confidentialité",
+      "terms": "Conditions",
+      "accessibility": "Accessibilité"
+    },
+    "pending": "En attente d’approbation",
+    "copyrightPrefix": "©",
+    "releaseNotice": "La publication reste bloquée jusqu’à la résolution des obstacles documentés."
+  },
+  "states": {
+    "loadingTitle": "Chargement",
+    "loadingBody": "Préparation de la structure de l’application.",
+    "errorTitle": "Une erreur s’est produite",
+    "errorBody": "La page n’a pas pu être affichée. Aucun détail technique n’a été exposé.",
+    "retry": "Réessayer",
+    "notFoundTitle": "Page introuvable",
+    "notFoundBody": "Cette adresse ne correspond à aucune route localisée approuvée.",
+    "backHome": "Retour à l’accueil",
+    "pendingTitle": "Destination indisponible",
+    "pendingBody": "Cette route est définie, mais son contenu ou sa destination de production attend encore une approbation."
+  },
+  "foundation": {
+    "eyebrow": "Fondation de la phase 11",
+    "title": "Une structure localisée compatible avec les thèmes",
+    "body": "Cette implémentation valide les fondations visuelles, de routage, de direction, d’accessibilité et de métadonnées sans prétendre que la page marketing complète existe déjà.",
+    "readinessLabel": "Fondations implémentées",
+    "items": [
+      [
+        "Jetons sémantiques",
+        "Les styles des composants consomment une couche sémantique documentée."
+      ],
+      [
+        "Gestion des thèmes",
+        "Les préférences claire, sombre et système sont résolues et conservées."
+      ],
+      [
+        "Localisation",
+        "L’anglais, le français et l’arabe utilisent des routes préfixées par la langue."
+      ],
+      [
+        "Direction",
+        "L’arabe utilise une direction droite-à-gauche au niveau du document."
+      ],
+      [
+        "Accessibilité",
+        "Le lien d’évitement, le focus visible, les repères et le mouvement réduit sont intégrés."
+      ],
+      [
+        "Structure de l’application",
+        "L’en-tête adaptatif, la navigation mobile, le pied de page et les états globaux sont disponibles."
+      ]
+    ],
+    "deferredLabel": "Destinations de la page d’accueil différées",
+    "deferredBody": "Cette destination de navigation approuvée est reliée au manifeste de routes, tandis que sa section de production reste hors du périmètre de la phase 11."
+  },
+  "metadata": {
+    "pendingTitle": "Destination indisponible | RentalDriveGo",
+    "pendingDescription": "Cette destination localisée de RentalDriveGo est définie, mais sa publication en production n’est pas approuvée."
+  }
+}
diff --git a/apps/homepage/src/content/pricing-config.ts b/apps/homepage/src/content/pricing-config.ts
new file mode 100644
index 0000000..3ee3f95
--- /dev/null
+++ b/apps/homepage/src/content/pricing-config.ts
@@ -0,0 +1,52 @@
+export const fleetBandIds = ['small', 'growing', 'scale', 'enterprise'] as const;
+export type FleetBandId = (typeof fleetBandIds)[number];
+
+export const pricingPlanIds = ['launch', 'growth', 'enterprise'] as const;
+export type PricingPlanId = (typeof pricingPlanIds)[number];
+
+export type BillingPeriod = 'monthly' | 'annual';
+
+export interface PricingCommercialConfig {
+  currency: string;
+  annualDiscountPercent: number | null;
+  publicPricesApproved: boolean;
+  monthlyPrices: Record<PricingPlanId, Record<FleetBandId, number | null>>;
+  recommendedPlanByFleetBand: Record<FleetBandId, PricingPlanId>;
+}
+
+/**
+ * This is the only file that should contain commercial pricing numbers.
+ * Keep publicPricesApproved=false until finance and product approve the amounts,
+ * included limits, onboarding policy, taxes, and annual billing terms.
+ */
+export const pricingCommercialConfig: PricingCommercialConfig = {
+  currency: 'USD',
+  annualDiscountPercent: null,
+  publicPricesApproved: false,
+  monthlyPrices: {
+    launch: {
+      small: null,
+      growing: null,
+      scale: null,
+      enterprise: null,
+    },
+    growth: {
+      small: null,
+      growing: null,
+      scale: null,
+      enterprise: null,
+    },
+    enterprise: {
+      small: null,
+      growing: null,
+      scale: null,
+      enterprise: null,
+    },
+  },
+  recommendedPlanByFleetBand: {
+    small: 'launch',
+    growing: 'growth',
+    scale: 'growth',
+    enterprise: 'enterprise',
+  },
+};
diff --git a/apps/homepage/src/contracts/phase9/analytics-contract.ts b/apps/homepage/src/contracts/phase9/analytics-contract.ts
new file mode 100644
index 0000000..4df44fd
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/analytics-contract.ts
@@ -0,0 +1,41 @@
+export type AnalyticsEventName =
+  | 'page_view'
+  | 'section_view'
+  | 'navigation_click'
+  | 'locale_change'
+  | 'theme_change'
+  | 'mobile_nav_open'
+  | 'mobile_nav_close'
+  | 'product_tour_open'
+  | 'product_tour_step'
+  | 'product_tour_complete'
+  | 'product_tour_close'
+  | 'demo_open'
+  | 'demo_submit_attempt'
+  | 'demo_validation_error'
+  | 'demo_submit_success'
+  | 'demo_submit_failure'
+  | 'demo_close'
+  | 'faq_open';
+export interface AnalyticsContext {
+  routeId: string;
+  locale: 'en' | 'fr' | 'ar';
+  direction: 'ltr' | 'rtl';
+  resolvedTheme: 'light' | 'dark';
+  source?: string;
+  step?: number;
+  errorCode?: string;
+}
+export interface AnalyticsAdapter {
+  consentGranted(): boolean;
+  track(name: AnalyticsEventName, context: AnalyticsContext): void;
+}
+export const forbiddenPayloadKeys = [
+  'name',
+  'email',
+  'company',
+  'message',
+  'phone',
+  'fieldValue',
+  'serverResponse',
+] as const;
diff --git a/apps/homepage/src/contracts/phase9/analytics-event-spec.csv b/apps/homepage/src/contracts/phase9/analytics-event-spec.csv
new file mode 100644
index 0000000..5b7c4ee
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/analytics-event-spec.csv
@@ -0,0 +1,19 @@
+Event,Trigger,Properties,PII_Allowed,Purpose
+page_view,Prototype loaded,"locale,theme,path,hash,session_id,test_mode,referrer_origin",No,Session start and denominator
+section_view,Section reaches 35% visibility,"section,locale,theme,hash,session_id",No,Discovery sequence
+navigation_click,Primary/mobile nav link used,"target,locale,theme,hash,session_id",No,Navigation path
+product_tour_open,Tour opened,"locale,theme,hash,session_id",No,Tour discovery
+product_tour_step,Tour step rendered,"step,locale,theme,session_id",No,Progress/drop-off
+product_tour_complete,Final tour step completed,"locale,theme,session_id",No,Completion
+product_tour_close,Tour closed,"reason,last_step,locale,theme,session_id",No,Abandonment point
+locale_change,Language selected,"from,to,context,session_id",No,Locale use/context preservation
+theme_change,Theme selected,"from,to,locale,session_id",No,Theme use
+mobile_nav_open,Drawer opened,"locale,theme,session_id",No,Mobile discovery
+mobile_nav_close,Drawer closed,"locale,theme,session_id",No,Drawer completion
+demo_open,Demo opened,"source,locale,theme,session_id",No,CTA source
+demo_validation_error,Validation blocked submit,"source,error_count,locale,theme,session_id",No,Error rate; never field values
+demo_submit_attempt,Submit activated,"source,locale,theme,session_id",No,Funnel attempt
+demo_submit_failure,Simulated service failure,"source,scenario,locale,theme,session_id",No,Failure recovery
+demo_submit_success,Prototype confirmation reached,"source,locale,theme,session_id",No,Completion
+demo_close,Demo closed,"reason,locale,theme,session_id",No,Abandonment
+faq_open,FAQ disclosure opened,"index,locale,theme,session_id",No,Question discovery
diff --git a/apps/homepage/src/contracts/phase9/component-contracts.ts b/apps/homepage/src/contracts/phase9/component-contracts.ts
new file mode 100644
index 0000000..24b527e
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/component-contracts.ts
@@ -0,0 +1,136 @@
+export type Locale = 'en' | 'fr' | 'ar';
+export type Direction = 'ltr' | 'rtl';
+export type EvidenceStatus = 'approved' | 'illustrative' | 'pending' | 'expired' | 'rejected';
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export interface LinkModel {
+  id: string;
+  label: string;
+  href: string;
+  external?: boolean;
+}
+export interface SiteHeaderProps {
+  locale: Locale;
+  direction: Direction;
+  links: LinkModel[];
+  login?: LinkModel;
+  onDemo(): void;
+}
+export interface DrawerProps extends SiteHeaderProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  returnFocusRef?: HTMLElement | null;
+}
+export interface LocaleSelectorProps {
+  locale: Locale;
+  routeId: string;
+  hash?: string;
+  onLocaleChange(locale: Locale): void;
+}
+export interface ThemeSelectorProps {
+  preference: ThemePreference;
+  onPreferenceChange(value: ThemePreference): void;
+}
+export interface HeroModel {
+  eyebrow: string;
+  title: string;
+  body: string;
+  primaryLabel: string;
+  secondaryLabel: string;
+}
+export interface ProductPreviewModel {
+  status: EvidenceStatus;
+  caption: string;
+  locale: Locale;
+  direction: Direction;
+  theme: 'light' | 'dark';
+  assetId?: string;
+}
+export interface LifecycleItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+}
+export interface ComparisonModel {
+  title: string;
+  body: string;
+  before: { title: string; items: string[] };
+  after: { title: string; items: string[] };
+}
+export interface WorkflowStep {
+  id: string;
+  ordinal: string;
+  title: string;
+  description: string;
+}
+export interface RoleCard {
+  id: string;
+  title: string;
+  description: string;
+}
+export interface ModuleCard {
+  id: string;
+  title: string;
+  description: string;
+  evidenceStatus: EvidenceStatus;
+}
+export interface MetricDefinition {
+  id: string;
+  title: string;
+  definition: string;
+  publishedValue?: never;
+}
+export interface IntegrationCategory {
+  id: string;
+  label: string;
+  verifiedPartners?: never;
+}
+export interface SecurityCheck {
+  id: string;
+  title: string;
+  description: string;
+  certificationBadge?: never;
+}
+export interface PricingModel {
+  mode: 'quote-only' | 'approved-pricing';
+  title: string;
+  body: string;
+  factors: string[];
+  note: string;
+}
+export interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+export interface DemoFormValues {
+  fullName: string;
+  workEmail: string;
+  company: string;
+  fleetSize: string;
+  market?: string;
+  preferredLanguage?: Locale;
+  message?: string;
+}
+export type DemoFormState =
+  | 'idle'
+  | 'validating'
+  | 'submitting'
+  | 'success'
+  | 'recoverable_error'
+  | 'terminal_error';
+export interface DemoFormProps {
+  state: DemoFormState;
+  values: DemoFormValues;
+  fieldErrors: Partial<Record<keyof DemoFormValues, string>>;
+  formError?: string;
+  onSubmit(values: DemoFormValues): Promise<void>;
+}
+export interface TourProps {
+  steps: WorkflowStep[];
+  activeIndex: number;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onStepChange(index: number): void;
+}
diff --git a/apps/homepage/src/contracts/phase9/demo-form-contract.ts b/apps/homepage/src/contracts/phase9/demo-form-contract.ts
new file mode 100644
index 0000000..2e7b66e
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/demo-form-contract.ts
@@ -0,0 +1,23 @@
+export const fleetSizeValues = ['1-9', '10-24', '25-49', '50-99', '100-249', '250+'] as const;
+export type FleetSize = (typeof fleetSizeValues)[number];
+export interface DemoRequest {
+  fullName: string;
+  workEmail: string;
+  company: string;
+  fleetSize: FleetSize;
+  market?: string;
+  preferredLanguage?: 'en' | 'fr' | 'ar';
+  message?: string;
+  idempotencyKey: string;
+  source: string;
+}
+export interface DemoSuccess {
+  requestId: string;
+  acceptedAt: string;
+  nextStepCode: 'sales_followup' | 'manual_review';
+}
+export interface DemoFailure {
+  code: 'validation' | 'rate_limited' | 'duplicate' | 'unavailable' | 'unknown';
+  retryable: boolean;
+  fieldErrors?: Record<string, string>;
+}
diff --git a/apps/homepage/src/contracts/phase9/design-tokens.json b/apps/homepage/src/contracts/phase9/design-tokens.json
new file mode 100644
index 0000000..03e916f
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/design-tokens.json
@@ -0,0 +1,150 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "version": "1.0",
+  "raw": {
+    "color": {
+      "blue": {
+        "50": "#eff6ff",
+        "100": "#dbeafe",
+        "200": "#bfdbfe",
+        "500": "#2874e8",
+        "600": "#1b5dd8",
+        "700": "#174bb5",
+        "800": "#183d88"
+      },
+      "orange": {
+        "100": "#ffedd5",
+        "400": "#fb923c",
+        "600": "#ea580c",
+        "700": "#c2410c"
+      },
+      "navy": {
+        "950": "#081426",
+        "900": "#0d1b2e",
+        "850": "#11233b",
+        "800": "#162b46"
+      },
+      "gray": {
+        "25": "#fbfdff",
+        "50": "#f7f9fc",
+        "100": "#eef2f7",
+        "200": "#dbe3ed",
+        "300": "#c6d0dc",
+        "500": "#64748b",
+        "600": "#475569",
+        "700": "#334155",
+        "800": "#1e293b",
+        "900": "#0f172a"
+      },
+      "green": {
+        "100": "#dcfce7",
+        "700": "#15803d"
+      },
+      "amber": {
+        "100": "#fef3c7",
+        "800": "#92400e"
+      },
+      "red": {
+        "100": "#fee2e2",
+        "700": "#b91c1c"
+      }
+    },
+    "space": {
+      "0": "0px",
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "5": "20px",
+      "6": "24px",
+      "7": "28px",
+      "8": "32px",
+      "9": "36px",
+      "10": "40px",
+      "11": "44px",
+      "12": "48px",
+      "13": "52px",
+      "14": "56px",
+      "15": "60px",
+      "16": "64px",
+      "17": "68px",
+      "18": "72px",
+      "19": "76px",
+      "20": "80px",
+      "21": "84px",
+      "22": "88px",
+      "23": "92px",
+      "24": "96px"
+    },
+    "radius": {
+      "sm": "10px",
+      "md": "16px",
+      "lg": "24px",
+      "xl": "32px",
+      "pill": "999px"
+    },
+    "size": {
+      "touch-min": "44px",
+      "container-max": "1280px"
+    },
+    "duration": {
+      "fast": "120ms",
+      "standard": "160ms",
+      "overlay": "220ms"
+    },
+    "easing": {
+      "standard": "ease",
+      "productive": "cubic-bezier(.2,0,0,1)"
+    },
+    "font": {
+      "latin": "Inter Variable, Inter, Arial, sans-serif",
+      "arabic": "Noto Sans Arabic, Arial, sans-serif"
+    },
+    "breakpoint": {
+      "medium": "768px",
+      "wide": "1120px"
+    }
+  },
+  "semantic": {
+    "light": {
+      "color.canvas": "{color.gray.25}",
+      "color.surface": "#ffffff",
+      "color.surface.raised": "#ffffff",
+      "color.surface.muted": "#f2f6fb",
+      "color.surface.strong": "#e8f0fa",
+      "color.text": "#102035",
+      "color.text.muted": "#52647a",
+      "color.border": "#d8e2ee",
+      "color.border.strong": "#bdcad9",
+      "color.action.primary": "{color.blue.700}",
+      "color.action.primary.hover": "{color.blue.800}",
+      "color.action.conversion": "{color.orange.700}",
+      "color.action.conversion.hover": "#9a3412",
+      "color.focus": "#f97316",
+      "color.on.inverse": "#f8fafc",
+      "color.soft.blue": "#eef5ff",
+      "color.soft.orange": "#fff7ed",
+      "shadow.color": "rgba(8,20,38,.12)"
+    },
+    "dark": {
+      "color.canvas": "{color.navy.950}",
+      "color.surface": "{color.navy.900}",
+      "color.surface.raised": "{color.navy.850}",
+      "color.surface.muted": "#0b1a2d",
+      "color.surface.strong": "#172d48",
+      "color.text": "#eef5ff",
+      "color.text.muted": "#adbed2",
+      "color.border": "#263c56",
+      "color.border.strong": "#3a536e",
+      "color.action.primary": "#76a9ff",
+      "color.action.primary.hover": "#9bc2ff",
+      "color.action.conversion": "{color.orange.400}",
+      "color.action.conversion.hover": "#fdba74",
+      "color.focus": "{color.orange.400}",
+      "color.on.inverse": "{color.navy.950}",
+      "color.soft.blue": "#10284a",
+      "color.soft.orange": "#3a2015",
+      "shadow.color": "rgba(0,0,0,.36)"
+    }
+  }
+}
diff --git a/apps/homepage/src/contracts/phase9/performance-budgets.json b/apps/homepage/src/contracts/phase9/performance-budgets.json
new file mode 100644
index 0000000..d0639f3
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/performance-budgets.json
@@ -0,0 +1,28 @@
+{
+  "version": "1.0",
+  "measurement": "75th percentile real-user data where available; otherwise repeatable lab median on defined mobile profile",
+  "core": {
+    "LCP_ms_max": 2500,
+    "INP_ms_max": 200,
+    "CLS_max": 0.1,
+    "TTFB_ms_max": 800
+  },
+  "transfer_gzip": {
+    "initial_javascript_kb_max": 180,
+    "initial_css_kb_max": 60,
+    "initial_html_kb_max": 100,
+    "hero_media_kb_max": 250,
+    "font_total_kb_max": 220
+  },
+  "requests": {
+    "initial_third_party_max": 2,
+    "initial_font_files_max": 2
+  },
+  "rules": [
+    "No marketing tag may block first paint.",
+    "Load analytics after consent and idle where possible.",
+    "Reserve media dimensions to prevent layout shift.",
+    "No autoplay video on initial load.",
+    "Test EN, FR, and AR because font and copy costs differ."
+  ]
+}
diff --git a/apps/homepage/src/contracts/phase9/route-manifest.json b/apps/homepage/src/contracts/phase9/route-manifest.json
new file mode 100644
index 0000000..1d1aee8
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/route-manifest.json
@@ -0,0 +1,88 @@
+{
+  "version": "1.0",
+  "defaultLocale": "en",
+  "locales": ["en", "fr", "ar"],
+  "rootDetection": true,
+  "routes": [
+    {
+      "id": "home",
+      "slugs": {
+        "en": "",
+        "fr": "",
+        "ar": ""
+      },
+      "indexable": true,
+      "hashes": ["top", "product", "workflow", "modules", "pricing", "faq", "contact"]
+    },
+    {
+      "id": "sign-in",
+      "slugs": {
+        "en": "sign-in",
+        "fr": "connexion",
+        "ar": "تسجيل-الدخول"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "forgot-password",
+      "slugs": {
+        "en": "forgot-password",
+        "fr": "mot-de-passe-oublie",
+        "ar": "نسيت-كلمة-المرور"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "reset-password",
+      "slugs": {
+        "en": "reset-password",
+        "fr": "reinitialiser-mot-de-passe",
+        "ar": "اعادة-تعيين-كلمة-المرور"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "privacy",
+      "slugs": {
+        "en": "privacy",
+        "fr": "confidentialite",
+        "ar": "الخصوصية"
+      },
+      "indexable": true,
+      "hashes": []
+    },
+    {
+      "id": "terms",
+      "slugs": {
+        "en": "terms",
+        "fr": "conditions",
+        "ar": "الشروط"
+      },
+      "indexable": true,
+      "hashes": []
+    },
+    {
+      "id": "accessibility",
+      "slugs": {
+        "en": "accessibility",
+        "fr": "accessibilite",
+        "ar": "إمكانية-الوصول"
+      },
+      "indexable": true,
+      "hashes": []
+    }
+  ],
+  "switching": {
+    "preserveQueryAllowlist": ["utm_source", "utm_medium", "utm_campaign", "utm_content", "gclid"],
+    "preserveValidHash": true,
+    "dropUnknownQuery": true
+  },
+  "hreflang": {
+    "values": ["en", "fr", "ar"],
+    "xDefaultLocale": "en",
+    "selfCanonical": true
+  }
+}
diff --git a/apps/homepage/src/contracts/phase9/visual-regression-scenarios.json b/apps/homepage/src/contracts/phase9/visual-regression-scenarios.json
new file mode 100644
index 0000000..c11dbc2
--- /dev/null
+++ b/apps/homepage/src/contracts/phase9/visual-regression-scenarios.json
@@ -0,0 +1,62 @@
+{
+  "version": "1.0",
+  "pixelDiffThreshold": 0.01,
+  "scenarios": [
+    {
+      "id": "VR-001",
+      "route": "/en",
+      "viewport": [1440, 1000],
+      "theme": "light",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-002",
+      "route": "/fr",
+      "viewport": [1024, 900],
+      "theme": "dark",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-003",
+      "route": "/ar",
+      "viewport": [390, 844],
+      "theme": "light",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-004",
+      "route": "/ar",
+      "viewport": [390, 844],
+      "theme": "dark",
+      "state": "drawer-open"
+    },
+    {
+      "id": "VR-005",
+      "route": "/en",
+      "viewport": [390, 844],
+      "theme": "light",
+      "state": "demo-invalid"
+    },
+    {
+      "id": "VR-006",
+      "route": "/fr",
+      "viewport": [768, 1024],
+      "theme": "dark",
+      "state": "tour-step-3"
+    },
+    {
+      "id": "VR-007",
+      "route": "/ar",
+      "viewport": [320, 800],
+      "theme": "dark",
+      "state": "reflow-gate"
+    },
+    {
+      "id": "VR-008",
+      "route": "/en",
+      "viewport": [1440, 1000],
+      "theme": "dark",
+      "state": "pricing-and-final-cta"
+    }
+  ]
+}
diff --git a/apps/homepage/src/lib/analytics/client.ts b/apps/homepage/src/lib/analytics/client.ts
new file mode 100644
index 0000000..a2c4b92
--- /dev/null
+++ b/apps/homepage/src/lib/analytics/client.ts
@@ -0,0 +1,25 @@
+'use client';
+
+import { validateAnalyticsEvent, type AnalyticsContext, type AnalyticsEventName } from './events';
+
+declare global {
+  interface Window {
+    __rdgAnalyticsTestSink?: Array<{ name: AnalyticsEventName; context: AnalyticsContext }>;
+  }
+}
+
+function analyticsMode(): 'disabled' | 'test' {
+  return process.env.NEXT_PUBLIC_ANALYTICS_MODE === 'test' ? 'test' : 'disabled';
+}
+
+function consentGranted(): boolean {
+  return document.documentElement.dataset.analyticsConsent === 'granted';
+}
+
+export function trackAnalytics(name: AnalyticsEventName, context: AnalyticsContext): boolean {
+  const event = validateAnalyticsEvent(name, context);
+  if (!event || analyticsMode() !== 'test' || !consentGranted()) return false;
+  window.__rdgAnalyticsTestSink ??= [];
+  window.__rdgAnalyticsTestSink.push(event);
+  return true;
+}
diff --git a/apps/homepage/src/lib/analytics/events.ts b/apps/homepage/src/lib/analytics/events.ts
new file mode 100644
index 0000000..adbb7a5
--- /dev/null
+++ b/apps/homepage/src/lib/analytics/events.ts
@@ -0,0 +1,88 @@
+import { z } from 'zod';
+
+export const analyticsEventNames = [
+  'page_view',
+  'section_view',
+  'navigation_click',
+  'locale_change',
+  'theme_change',
+  'mobile_nav_open',
+  'mobile_nav_close',
+  'product_tour_open',
+  'product_tour_step',
+  'product_tour_complete',
+  'product_tour_close',
+  'demo_open',
+  'demo_submit_attempt',
+  'demo_validation_error',
+  'demo_submit_success',
+  'demo_submit_failure',
+  'demo_close',
+  'faq_open',
+  'pricing_fleet_band_selected',
+  'pricing_billing_period_changed',
+  'pricing_plan_cta_clicked',
+] as const;
+
+export type AnalyticsEventName = (typeof analyticsEventNames)[number];
+
+const safeText = z
+  .string()
+  .min(1)
+  .max(80)
+  .regex(/^[a-zA-Z0-9_-]+$/);
+
+export const analyticsContextSchema = z
+  .object({
+    routeId: safeText,
+    locale: z.enum(['en', 'fr', 'ar']),
+    direction: z.enum(['ltr', 'rtl']),
+    resolvedTheme: z.enum(['light', 'dark']),
+    source: safeText.optional(),
+    step: z.number().int().min(1).max(100).optional(),
+    errorCode: safeText.optional(),
+    errorCount: z.number().int().min(1).max(20).optional(),
+    reason: safeText.optional(),
+    fleetBand: z.enum(['small', 'growing', 'scale', 'enterprise']).optional(),
+    billingPeriod: z.enum(['monthly', 'annual']).optional(),
+    plan: z.enum(['launch', 'growth', 'enterprise']).optional(),
+  })
+  .strict();
+
+export type AnalyticsContext = z.output<typeof analyticsContextSchema>;
+
+export interface AnalyticsEventDefinition {
+  name: AnalyticsEventName;
+  purpose: string;
+  consentCategory: 'analytics';
+  personalData: false;
+}
+
+export const analyticsEventRegistry: readonly AnalyticsEventDefinition[] = analyticsEventNames.map(
+  (name) => ({
+    name,
+    purpose: `Phase 9 approved ${name} interaction measurement.`,
+    consentCategory: 'analytics',
+    personalData: false,
+  }),
+);
+
+const forbiddenPayloadKeys = new Set([
+  'name',
+  'email',
+  'company',
+  'message',
+  'phone',
+  'fieldvalue',
+  'serverresponse',
+]);
+
+export function validateAnalyticsEvent(name: unknown, context: unknown) {
+  const event = z.enum(analyticsEventNames).safeParse(name);
+  const payload = analyticsContextSchema.safeParse(context);
+  if (!event.success || !payload.success) return null;
+  if (Object.keys(payload.data).some((key) => forbiddenPayloadKeys.has(key.toLowerCase()))) {
+    return null;
+  }
+  return { name: event.data, context: payload.data } as const;
+}
diff --git a/apps/homepage/src/lib/api.ts b/apps/homepage/src/lib/api.ts
index b5d9118..f91fe1b 100644
--- a/apps/homepage/src/lib/api.ts
+++ b/apps/homepage/src/lib/api.ts
@@ -1,50 +1,6 @@
-const API_BASE =
-  (typeof window === 'undefined' ? process.env.API_INTERNAL_URL : process.env.NEXT_PUBLIC_API_URL)
-  ?? process.env.NEXT_PUBLIC_API_URL
-  ?? 'http://localhost:4000/api/v1'
+export const API_BASE =
+  typeof window === 'undefined'
+    ? (process.env.API_INTERNAL_URL || 'http://localhost:4000/api/v1')
+    : (process.env.NEXT_PUBLIC_API_URL || '/api/v1')
 
-export class MarketplaceApiError extends Error {
-  status: number
-  code?: string
-  nextAvailableAt?: string | null
-
-  constructor(message: string, status: number, code?: string, nextAvailableAt?: string | null) {
-    super(message)
-    this.name = 'MarketplaceApiError'
-    this.status = status
-    this.code = code
-    this.nextAvailableAt = nextAvailableAt
-  }
-}
-
-export async function marketplaceFetch<T>(path: string, init?: RequestInit): Promise<T> {
-  const res = await fetch(`${API_BASE}${path}`, {
-    cache: 'no-store',
-    credentials: 'include',
-    ...init,
-  })
-  const json = await res.json().catch(() => null)
-  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
-  return json.data as T
-}
-
-export async function marketplaceFetchOrDefault<T>(path: string, fallback: T): Promise<T> {
-  try {
-    return await marketplaceFetch<T>(path)
-  } catch {
-    return fallback
-  }
-}
-
-export async function marketplacePost<T>(path: string, body: unknown): Promise<T> {
-  const base = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
-  const res = await fetch(`${base}${path}`, {
-    method: 'POST',
-    credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(body),
-  })
-  const json = await res.json().catch(() => null)
-  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
-  return json.data as T
-}
+export const EMPLOYEE_PROFILE_KEY = 'employee_profile'
diff --git a/apps/homepage/src/lib/components/classNames.ts b/apps/homepage/src/lib/components/classNames.ts
new file mode 100644
index 0000000..582dbc1
--- /dev/null
+++ b/apps/homepage/src/lib/components/classNames.ts
@@ -0,0 +1,3 @@
+export function classNames(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(' ');
+}
diff --git a/apps/homepage/src/lib/demo/adapters/blocked.ts b/apps/homepage/src/lib/demo/adapters/blocked.ts
new file mode 100644
index 0000000..b921783
--- /dev/null
+++ b/apps/homepage/src/lib/demo/adapters/blocked.ts
@@ -0,0 +1,14 @@
+import type { LeadDestinationAdapter, LeadDestinationResult } from './types';
+
+export class BlockedLeadDestinationAdapter implements LeadDestinationAdapter {
+  readonly name = 'blocked';
+
+  async submitLead(): Promise<LeadDestinationResult> {
+    return {
+      ok: false,
+      category: 'configuration',
+      retryable: false,
+      code: 'lead_destination_not_approved',
+    };
+  }
+}
diff --git a/apps/homepage/src/lib/demo/adapters/index.ts b/apps/homepage/src/lib/demo/adapters/index.ts
new file mode 100644
index 0000000..66ecc26
--- /dev/null
+++ b/apps/homepage/src/lib/demo/adapters/index.ts
@@ -0,0 +1,17 @@
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { BlockedLeadDestinationAdapter } from './blocked';
+import { LocalLeadDestinationAdapter } from './local';
+import type { LeadDestinationAdapter } from './types';
+
+export function createLeadDestinationAdapter(
+  environment: IntegrationEnvironment,
+): LeadDestinationAdapter {
+  const approvedLocalRuntime =
+    environment.NODE_ENV !== 'production' || environment.DEMO_LOCAL_TEST_MODE;
+  if (approvedLocalRuntime && environment.DEMO_SUBMISSION_MODE === 'local') {
+    return new LocalLeadDestinationAdapter();
+  }
+  return new BlockedLeadDestinationAdapter();
+}
+
+export type { IntegrationContext, LeadDestinationAdapter, LeadDestinationResult } from './types';
diff --git a/apps/homepage/src/lib/demo/adapters/local.ts b/apps/homepage/src/lib/demo/adapters/local.ts
new file mode 100644
index 0000000..3d3142d
--- /dev/null
+++ b/apps/homepage/src/lib/demo/adapters/local.ts
@@ -0,0 +1,46 @@
+import type { LeadDestinationAdapter, LeadDestinationResult } from './types';
+
+function abortError(): Error {
+  return new DOMException('Operation aborted', 'AbortError');
+}
+
+export class LocalLeadDestinationAdapter implements LeadDestinationAdapter {
+  readonly name = 'local-discard';
+
+  async submitLead(
+    _lead: Parameters<LeadDestinationAdapter['submitLead']>[0],
+    context: Parameters<LeadDestinationAdapter['submitLead']>[1],
+  ): Promise<LeadDestinationResult> {
+    if (context.signal.aborted) throw abortError();
+
+    switch (context.testScenario) {
+      case 'duplicate':
+        return { ok: false, category: 'duplicate', retryable: false, code: 'local_duplicate' };
+      case 'integration-error':
+        return { ok: false, category: 'integration', retryable: true, code: 'local_error' };
+      case 'timeout':
+        await new Promise<void>((resolve, reject) => {
+          const timer = setTimeout(resolve, 30_000);
+          context.signal.addEventListener(
+            'abort',
+            () => {
+              clearTimeout(timer);
+              reject(abortError());
+            },
+            { once: true },
+          );
+        });
+        break;
+      case 'success':
+      case undefined:
+        break;
+    }
+
+    return {
+      ok: true,
+      externalId: `local_${context.correlationId}`,
+      acceptedAt: new Date().toISOString(),
+      mode: 'local',
+    };
+  }
+}
diff --git a/apps/homepage/src/lib/demo/adapters/types.ts b/apps/homepage/src/lib/demo/adapters/types.ts
new file mode 100644
index 0000000..8ba56e4
--- /dev/null
+++ b/apps/homepage/src/lib/demo/adapters/types.ts
@@ -0,0 +1,23 @@
+import type { DemoLead } from '../schema';
+
+export interface IntegrationContext {
+  correlationId: string;
+  idempotencyKey: string;
+  signal: AbortSignal;
+  environment: 'development' | 'test' | 'production';
+  testScenario?: 'success' | 'duplicate' | 'timeout' | 'integration-error';
+}
+
+export type LeadDestinationResult =
+  | { ok: true; externalId: string; acceptedAt: string; mode: 'local' }
+  | {
+      ok: false;
+      category: 'duplicate' | 'integration' | 'timeout' | 'configuration';
+      retryable: boolean;
+      code: string;
+    };
+
+export interface LeadDestinationAdapter {
+  readonly name: string;
+  submitLead(lead: DemoLead, context: IntegrationContext): Promise<LeadDestinationResult>;
+}
diff --git a/apps/homepage/src/lib/demo/idempotency.ts b/apps/homepage/src/lib/demo/idempotency.ts
new file mode 100644
index 0000000..993231f
--- /dev/null
+++ b/apps/homepage/src/lib/demo/idempotency.ts
@@ -0,0 +1,46 @@
+import type { DemoSubmissionResult } from './schema';
+
+interface StoredOperation {
+  expiresAt: number;
+  result: Promise<DemoSubmissionResult>;
+}
+
+const globalStore = globalThis as typeof globalThis & {
+  __rdgDemoIdempotencyStore?: Map<string, StoredOperation>;
+};
+
+const store = globalStore.__rdgDemoIdempotencyStore ?? new Map<string, StoredOperation>();
+globalStore.__rdgDemoIdempotencyStore = store;
+
+function purgeExpired(now: number) {
+  for (const [key, operation] of store) {
+    if (operation.expiresAt <= now) store.delete(key);
+  }
+}
+
+export async function executeIdempotent(
+  key: string,
+  ttlSeconds: number,
+  operation: () => Promise<DemoSubmissionResult>,
+): Promise<DemoSubmissionResult> {
+  const now = Date.now();
+  purgeExpired(now);
+  const existing = store.get(key);
+  if (existing) return existing.result;
+
+  const result = operation();
+  store.set(key, { expiresAt: now + ttlSeconds * 1_000, result });
+
+  try {
+    const settled = await result;
+    if (!settled.ok && settled.retryable) store.delete(key);
+    return settled;
+  } catch (error) {
+    store.delete(key);
+    throw error;
+  }
+}
+
+export function clearIdempotencyStoreForTests() {
+  store.clear();
+}
diff --git a/apps/homepage/src/lib/demo/redaction.ts b/apps/homepage/src/lib/demo/redaction.ts
new file mode 100644
index 0000000..c69b4eb
--- /dev/null
+++ b/apps/homepage/src/lib/demo/redaction.ts
@@ -0,0 +1,32 @@
+const sensitiveKeys = new Set([
+  'fullname',
+  'name',
+  'workemail',
+  'email',
+  'company',
+  'market',
+  'message',
+  'phone',
+  'fieldvalue',
+  'serverresponse',
+]);
+
+export function redactSensitive(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(redactSensitive);
+  if (!value || typeof value !== 'object') return value;
+
+  return Object.fromEntries(
+    Object.entries(value).map(([key, child]) => [
+      key,
+      sensitiveKeys.has(key.toLowerCase()) ? '[REDACTED]' : redactSensitive(child),
+    ]),
+  );
+}
+
+export function containsSensitiveKey(value: unknown): boolean {
+  if (Array.isArray(value)) return value.some(containsSensitiveKey);
+  if (!value || typeof value !== 'object') return false;
+  return Object.entries(value).some(
+    ([key, child]) => sensitiveKeys.has(key.toLowerCase()) || containsSensitiveKey(child),
+  );
+}
diff --git a/apps/homepage/src/lib/demo/schema.ts b/apps/homepage/src/lib/demo/schema.ts
new file mode 100644
index 0000000..cfe3633
--- /dev/null
+++ b/apps/homepage/src/lib/demo/schema.ts
@@ -0,0 +1,101 @@
+import { z } from 'zod';
+
+export const fleetSizeValues = ['1-9', '10-24', '25-49', '50-99', '100-249', '250+'] as const;
+export const demoSourceValues = [
+  'header',
+  'mobile-header',
+  'hero',
+  'pricing',
+  'final-cta',
+  'footer',
+] as const;
+
+const compactText = (maximum: number) =>
+  z
+    .string()
+    .transform((value) => value.trim().replace(/\s+/g, ' '))
+    .pipe(z.string().min(1, 'required').max(maximum, 'too_long'));
+
+const optionalCompactText = (maximum: number) =>
+  z
+    .string()
+    .transform((value) => value.trim().replace(/\s+/g, ' '))
+    .pipe(z.string().max(maximum, 'too_long'))
+    .transform((value) => (value.length === 0 ? undefined : value))
+    .optional();
+
+export const demoLeadSchema = z
+  .object({
+    fullName: compactText(120),
+    workEmail: z
+      .string()
+      .transform((value) => value.trim().toLowerCase())
+      .pipe(
+        z
+          .string()
+          .min(1, 'required')
+          .max(254, 'too_long')
+          .regex(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'invalid_email'),
+      ),
+    company: compactText(160),
+    fleetSize: z.enum(fleetSizeValues, { error: 'invalid_fleet_size' }),
+    market: optionalCompactText(100),
+    preferredLanguage: z.enum(['en', 'fr', 'ar']).optional(),
+    message: optionalCompactText(1_000),
+    idempotencyKey: z.string().uuid('invalid_idempotency_key'),
+    source: z.enum(demoSourceValues, { error: 'invalid_source' }),
+  })
+  .strict();
+
+export const demoSubmissionEnvelopeSchema = z
+  .object({
+    lead: demoLeadSchema,
+    guard: z
+      .object({
+        honeypot: z.string().max(200).default(''),
+        startedAtMs: z.number().int().nonnegative(),
+      })
+      .strict(),
+  })
+  .strict();
+
+export type DemoLeadInput = z.input<typeof demoLeadSchema>;
+export type DemoLead = z.output<typeof demoLeadSchema>;
+export type DemoSubmissionEnvelope = z.output<typeof demoSubmissionEnvelopeSchema>;
+export type DemoSource = (typeof demoSourceValues)[number];
+
+export type DemoFailureCategory =
+  | 'validation'
+  | 'consent'
+  | 'duplicate'
+  | 'rate-limit'
+  | 'integration'
+  | 'timeout'
+  | 'configuration'
+  | 'abuse';
+
+export type DemoSubmissionResult =
+  | {
+      ok: true;
+      submissionId: string;
+      acceptedAt: string;
+      nextAction: { type: 'success'; mode: 'local' };
+    }
+  | {
+      ok: false;
+      category: DemoFailureCategory;
+      fieldErrors?: Record<string, string>;
+      formErrorCode: string;
+      retryable: boolean;
+      correlationId?: string;
+    };
+
+export function zodFieldErrors(error: z.ZodError): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const issue of error.issues) {
+    const path = issue.path.at(-1);
+    if (typeof path !== 'string' || result[path]) continue;
+    result[path] = issue.message;
+  }
+  return result;
+}
diff --git a/apps/homepage/src/lib/demo/service.ts b/apps/homepage/src/lib/demo/service.ts
new file mode 100644
index 0000000..06860d7
--- /dev/null
+++ b/apps/homepage/src/lib/demo/service.ts
@@ -0,0 +1,69 @@
+import { randomUUID } from 'node:crypto';
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { createLeadDestinationAdapter, type LeadDestinationAdapter } from './adapters';
+import { executeIdempotent } from './idempotency';
+import type { DemoLead, DemoSubmissionResult } from './schema';
+
+export interface SubmitDemoOptions {
+  environment: IntegrationEnvironment;
+  adapter?: LeadDestinationAdapter;
+  testScenario?: 'success' | 'duplicate' | 'timeout' | 'integration-error';
+}
+
+export async function submitDemoLead(
+  lead: DemoLead,
+  options: SubmitDemoOptions,
+): Promise<DemoSubmissionResult> {
+  const { environment } = options;
+  const adapter = options.adapter ?? createLeadDestinationAdapter(environment);
+
+  return executeIdempotent(
+    lead.idempotencyKey,
+    environment.DEMO_IDEMPOTENCY_TTL_SECONDS,
+    async () => {
+      const correlationId = randomUUID();
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), environment.DEMO_REQUEST_TIMEOUT_MS);
+
+      try {
+        const destinationResult = await adapter.submitLead(lead, {
+          correlationId,
+          idempotencyKey: lead.idempotencyKey,
+          signal: controller.signal,
+          environment: environment.NODE_ENV,
+          ...(options.testScenario ? { testScenario: options.testScenario } : {}),
+        });
+
+        if (!destinationResult.ok) {
+          return {
+            ok: false,
+            category: destinationResult.category,
+            formErrorCode: destinationResult.code,
+            retryable: destinationResult.retryable,
+            correlationId,
+          };
+        }
+
+        return {
+          ok: true,
+          submissionId: destinationResult.externalId,
+          acceptedAt: destinationResult.acceptedAt,
+          nextAction: { type: 'success', mode: destinationResult.mode },
+        };
+      } catch (error) {
+        const timedOut =
+          controller.signal.aborted ||
+          (error instanceof DOMException && error.name === 'AbortError');
+        return {
+          ok: false,
+          category: timedOut ? 'timeout' : 'integration',
+          formErrorCode: timedOut ? 'lead_destination_timeout' : 'lead_destination_failure',
+          retryable: true,
+          correlationId,
+        };
+      } finally {
+        clearTimeout(timeout);
+      }
+    },
+  );
+}
diff --git a/apps/homepage/src/lib/integrations/destinations.ts b/apps/homepage/src/lib/integrations/destinations.ts
new file mode 100644
index 0000000..cb6faf6
--- /dev/null
+++ b/apps/homepage/src/lib/integrations/destinations.ts
@@ -0,0 +1,174 @@
+import { localizedPath, type Locale, type RouteId } from '@/lib/localization/config';
+
+export type DestinationStatus = 'active' | 'disabled' | 'placeholder' | 'blocked';
+export type DestinationKind =
+  | 'internal-route'
+  | 'external-url'
+  | 'modal'
+  | 'drawer'
+  | 'form'
+  | 'scheduler';
+
+export type DestinationKey =
+  | 'book-demo'
+  | 'contact-sales'
+  | 'product-tour'
+  | 'pricing'
+  | 'sign-in'
+  | 'forgot-password'
+  | 'privacy'
+  | 'terms'
+  | 'accessibility'
+  | 'cookie-settings'
+  | 'support';
+
+export interface DestinationReference {
+  key: DestinationKey;
+  kind: DestinationKind;
+  status: DestinationStatus;
+  routeId?: RouteId;
+  href?: string;
+  featureFlag?: string;
+  issueId?: string;
+  external?: boolean;
+  allowedLocales: readonly Locale[];
+  reason: string;
+}
+
+const allLocales = ['en', 'fr', 'ar'] as const satisfies readonly Locale[];
+
+const baseDestinations: Record<DestinationKey, DestinationReference> = {
+  'book-demo': {
+    key: 'book-demo',
+    kind: 'modal',
+    status: 'blocked',
+    featureFlag: 'demoSubmissionEnabled',
+    issueId: 'P9-002/P9-003',
+    allowedLocales: allLocales,
+    reason: 'Production CRM and legal consent decisions are not approved.',
+  },
+  'contact-sales': {
+    key: 'contact-sales',
+    kind: 'external-url',
+    status: 'blocked',
+    issueId: 'P9-015',
+    allowedLocales: allLocales,
+    reason: 'No approved sales destination exists.',
+  },
+  'product-tour': {
+    key: 'product-tour',
+    kind: 'modal',
+    status: 'blocked',
+    issueId: 'P9-012',
+    allowedLocales: allLocales,
+    reason: 'No approved product-tour medium or transcript exists.',
+  },
+  pricing: {
+    key: 'pricing',
+    kind: 'internal-route',
+    status: 'placeholder',
+    issueId: 'P9-008',
+    allowedLocales: allLocales,
+    reason: 'Public pricing and packaging are not approved.',
+  },
+  'sign-in': {
+    key: 'sign-in',
+    kind: 'internal-route',
+    status: 'active',
+    routeId: 'sign-in',
+    allowedLocales: allLocales,
+    reason: 'Sign-in is now served from the homepage app.',
+  },
+  'forgot-password': {
+    key: 'forgot-password',
+    kind: 'internal-route',
+    status: 'active',
+    routeId: 'forgot-password',
+    allowedLocales: allLocales,
+    reason: 'Password reset flow is now served from the homepage app.',
+  },
+  privacy: {
+    key: 'privacy',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'privacy',
+    issueId: 'P9-003',
+    allowedLocales: allLocales,
+    reason: 'The privacy destination resolves to a gated placeholder pending legal copy.',
+  },
+  terms: {
+    key: 'terms',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'terms',
+    issueId: 'P9-003',
+    allowedLocales: allLocales,
+    reason: 'The terms destination resolves to a gated placeholder pending legal copy.',
+  },
+  accessibility: {
+    key: 'accessibility',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'accessibility',
+    issueId: 'P13-002',
+    allowedLocales: allLocales,
+    reason: 'The accessibility destination resolves to a gated placeholder pending approval.',
+  },
+  'cookie-settings': {
+    key: 'cookie-settings',
+    kind: 'modal',
+    status: 'blocked',
+    issueId: 'P9-004',
+    allowedLocales: allLocales,
+    reason: 'Consent categories and a consent-management mechanism are not approved.',
+  },
+  support: {
+    key: 'support',
+    kind: 'external-url',
+    status: 'blocked',
+    issueId: 'P9-015',
+    allowedLocales: allLocales,
+    reason: 'No approved public support destination exists.',
+  },
+};
+
+export interface DestinationRuntimeContext {
+  demoSubmissionEnabled: boolean;
+  demoMode: 'blocked' | 'local';
+}
+
+export function destinationRegistry(
+  context: DestinationRuntimeContext,
+): Record<DestinationKey, DestinationReference> {
+  const demo = baseDestinations['book-demo'];
+  return {
+    ...baseDestinations,
+    'book-demo': {
+      ...demo,
+      status: context.demoSubmissionEnabled && context.demoMode === 'local' ? 'active' : 'blocked',
+      reason:
+        context.demoSubmissionEnabled && context.demoMode === 'local'
+          ? 'Local validation adapter is active; no external lead is created.'
+          : demo.reason,
+    },
+  };
+}
+
+export function resolveDestination(
+  key: DestinationKey,
+  locale: Locale,
+  context: DestinationRuntimeContext,
+): DestinationReference {
+  const destination = destinationRegistry(context)[key];
+  if (!destination.allowedLocales.includes(locale)) {
+    return {
+      ...destination,
+      status: 'blocked',
+      reason: 'Destination is unavailable for this locale.',
+    };
+  }
+  if (destination.routeId) {
+    return { ...destination, href: localizedPath(destination.routeId, locale) };
+  }
+  return destination;
+}
diff --git a/apps/homepage/src/lib/integrations/environment.ts b/apps/homepage/src/lib/integrations/environment.ts
new file mode 100644
index 0000000..3daf280
--- /dev/null
+++ b/apps/homepage/src/lib/integrations/environment.ts
@@ -0,0 +1,119 @@
+import 'server-only';
+
+import { z } from 'zod';
+
+const booleanText = z
+  .enum(['true', 'false'])
+  .default('false')
+  .transform((value) => value === 'true');
+
+const environmentSchema = z.object({
+  NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+  NEXT_PUBLIC_DEMO_ENABLED: booleanText,
+  DEMO_SUBMISSION_MODE: z.enum(['blocked', 'local']).default('blocked'),
+  DEMO_REQUEST_TIMEOUT_MS: z.coerce.number().int().min(250).max(15_000).default(4_000),
+  DEMO_IDEMPOTENCY_TTL_SECONDS: z.coerce.number().int().min(60).max(86_400).default(900),
+  DEMO_TEST_SCENARIOS_ENABLED: booleanText,
+  DEMO_LOCAL_TEST_MODE: booleanText,
+  NEXT_PUBLIC_ANALYTICS_MODE: z.enum(['disabled', 'test']).default('disabled'),
+  SITE_ORIGIN: z.string().url().optional(),
+});
+
+export type IntegrationEnvironment = z.infer<typeof environmentSchema>;
+
+export interface EnvironmentValidationResult {
+  ok: boolean;
+  errors: string[];
+  environment?: IntegrationEnvironment;
+}
+
+export function validateIntegrationEnvironment(
+  source: NodeJS.ProcessEnv = process.env,
+): EnvironmentValidationResult {
+  const inferredNodeEnv =
+    source.NODE_ENV === 'production' || source.NODE_ENV === 'test'
+      ? source.NODE_ENV
+      : 'development';
+  const normalizedSource = {
+    ...source,
+    DEMO_SUBMISSION_MODE:
+      source.DEMO_SUBMISSION_MODE ?? (inferredNodeEnv === 'production' ? 'blocked' : 'local'),
+  };
+  const parsed = environmentSchema.safeParse(normalizedSource);
+  if (!parsed.success) {
+    return {
+      ok: false,
+      errors: parsed.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`),
+    };
+  }
+
+  const environment = parsed.data;
+  const errors: string[] = [];
+  const localTestOrigin =
+    environment.SITE_ORIGIN &&
+    ['127.0.0.1', 'localhost'].includes(new URL(environment.SITE_ORIGIN).hostname);
+  const productionLocalTest =
+    environment.NODE_ENV === 'production' && environment.DEMO_LOCAL_TEST_MODE && localTestOrigin;
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.NEXT_PUBLIC_DEMO_ENABLED &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'NEXT_PUBLIC_DEMO_ENABLED must remain false until an approved production lead adapter and legal consent decision are implemented.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.DEMO_SUBMISSION_MODE === 'local' &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'DEMO_SUBMISSION_MODE=local is prohibited outside an explicit loopback test runtime.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.DEMO_TEST_SCENARIOS_ENABLED &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'DEMO_TEST_SCENARIOS_ENABLED is prohibited outside an explicit loopback test runtime.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.NEXT_PUBLIC_ANALYTICS_MODE !== 'disabled'
+  ) {
+    errors.push('Analytics must remain disabled until provider and consent approval are recorded.');
+  }
+
+  return errors.length > 0 ? { ok: false, errors, environment } : { ok: true, errors, environment };
+}
+
+export function getIntegrationEnvironment(): IntegrationEnvironment {
+  const result = validateIntegrationEnvironment();
+  if (!result.ok || !result.environment) {
+    throw new Error(`Invalid Phase 14 integration environment: ${result.errors.join(' | ')}`);
+  }
+  return result.environment;
+}
+
+export interface PublicIntegrationConfig {
+  demoSubmissionEnabled: boolean;
+  demoMode: 'blocked' | 'local';
+  analyticsMode: 'disabled' | 'test';
+}
+
+export function getPublicIntegrationConfig(): PublicIntegrationConfig {
+  const environment = getIntegrationEnvironment();
+  const developmentDefault = environment.NODE_ENV !== 'production';
+  const demoSubmissionEnabled =
+    environment.DEMO_SUBMISSION_MODE === 'local' &&
+    (environment.NEXT_PUBLIC_DEMO_ENABLED || developmentDefault);
+  return {
+    demoSubmissionEnabled,
+    demoMode: demoSubmissionEnabled ? 'local' : 'blocked',
+    analyticsMode: environment.NEXT_PUBLIC_ANALYTICS_MODE,
+  };
+}
diff --git a/apps/homepage/src/lib/integrations/feature-flags.ts b/apps/homepage/src/lib/integrations/feature-flags.ts
new file mode 100644
index 0000000..e7d598a
--- /dev/null
+++ b/apps/homepage/src/lib/integrations/feature-flags.ts
@@ -0,0 +1,25 @@
+import type { PublicIntegrationConfig } from './environment';
+
+export interface FeatureFlags {
+  demoSubmissionEnabled: boolean;
+  crmIntegrationEnabled: false;
+  schedulerEnabled: false;
+  analyticsEnabled: boolean;
+  marketingConsentEnabled: false;
+  productTourEnabled: false;
+  pricingDestinationEnabled: false;
+  loginDestinationEnabled: false;
+}
+
+export function buildFeatureFlags(config: PublicIntegrationConfig): FeatureFlags {
+  return {
+    demoSubmissionEnabled: config.demoSubmissionEnabled,
+    crmIntegrationEnabled: false,
+    schedulerEnabled: false,
+    analyticsEnabled: config.analyticsMode === 'test',
+    marketingConsentEnabled: false,
+    productTourEnabled: false,
+    pricingDestinationEnabled: false,
+    loginDestinationEnabled: false,
+  };
+}
diff --git a/apps/homepage/src/lib/localization/client-messages.ts b/apps/homepage/src/lib/localization/client-messages.ts
new file mode 100644
index 0000000..2e81429
--- /dev/null
+++ b/apps/homepage/src/lib/localization/client-messages.ts
@@ -0,0 +1,15 @@
+import arShell from '@/content/locales/ar/shell.json';
+import enShell from '@/content/locales/en/shell.json';
+import frShell from '@/content/locales/fr/shell.json';
+import { isLocale, type Locale } from './config';
+import type { ShellMessages } from './messages';
+
+const shells = {
+  en: enShell,
+  fr: frShell,
+  ar: arShell,
+} satisfies Record<Locale, ShellMessages>;
+
+export function getClientShellMessages(value: unknown): ShellMessages {
+  return isLocale(value) ? shells[value] : shells.en;
+}
diff --git a/apps/homepage/src/lib/localization/client.ts b/apps/homepage/src/lib/localization/client.ts
new file mode 100644
index 0000000..180473d
--- /dev/null
+++ b/apps/homepage/src/lib/localization/client.ts
@@ -0,0 +1,18 @@
+import { localeCookie, localeCookieMaxAgeSeconds, localeStorageKey, type Locale } from './config';
+
+export function persistLocale(locale: Locale): void {
+  try {
+    window.localStorage.setItem(localeStorageKey, locale);
+  } catch {
+    // The route and first-party cookie remain sufficient when storage is unavailable.
+  }
+
+  const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie =
+    [
+      `${localeCookie}=${encodeURIComponent(locale)}`,
+      'Path=/',
+      `Max-Age=${localeCookieMaxAgeSeconds}`,
+      'SameSite=Lax',
+    ].join('; ') + secure;
+}
diff --git a/apps/homepage/src/lib/localization/config.ts b/apps/homepage/src/lib/localization/config.ts
new file mode 100644
index 0000000..8ff4d2b
--- /dev/null
+++ b/apps/homepage/src/lib/localization/config.ts
@@ -0,0 +1,140 @@
+import rawManifest from '@/contracts/phase9/route-manifest.json';
+import { z } from 'zod';
+
+export const locales = ['en', 'fr', 'ar'] as const;
+export type Locale = (typeof locales)[number];
+export type Direction = 'ltr' | 'rtl';
+export type RouteId = 'home' | 'sign-in' | 'forgot-password' | 'reset-password' | 'privacy' | 'terms' | 'accessibility';
+
+export const defaultLocale: Locale = 'en';
+export const localeCookie = 'hpc-locale';
+export const localeStorageKey = 'hpc.locale';
+export const localeCookieMaxAgeSeconds = 31_536_000;
+export const directionByLocale: Record<Locale, Direction> = {
+  en: 'ltr',
+  fr: 'ltr',
+  ar: 'rtl',
+};
+
+const localeSchema = z.enum(locales);
+const routeSchema = z.object({
+  id: z.enum(['home', 'sign-in', 'forgot-password', 'reset-password', 'privacy', 'terms', 'accessibility']),
+  slugs: z.object({ en: z.string(), fr: z.string(), ar: z.string() }),
+  indexable: z.boolean(),
+  hashes: z.array(z.string()),
+});
+const routeManifestSchema = z.object({
+  version: z.string(),
+  defaultLocale: localeSchema,
+  locales: z.array(localeSchema).length(locales.length),
+  rootDetection: z.boolean(),
+  routes: z.array(routeSchema),
+  switching: z.object({
+    preserveQueryAllowlist: z.array(z.string()),
+    preserveValidHash: z.boolean(),
+    dropUnknownQuery: z.boolean(),
+  }),
+  hreflang: z.object({
+    values: z.array(localeSchema),
+    xDefaultLocale: localeSchema,
+    selfCanonical: z.boolean(),
+  }),
+});
+
+export const routeManifest = routeManifestSchema.parse(rawManifest);
+export const campaignQueryAllowlist = routeManifest.switching.preserveQueryAllowlist;
+
+export function isLocale(value: unknown): value is Locale {
+  return typeof value === 'string' && (locales as readonly string[]).includes(value);
+}
+
+export function getDirection(locale: Locale): Direction {
+  return directionByLocale[locale];
+}
+
+export function localizedPath(routeId: RouteId, locale: Locale): string {
+  const route = routeManifest.routes.find((item) => item.id === routeId);
+  if (!route) {
+    throw new Error(`Unknown route ID: ${routeId}`);
+  }
+  const slug = route.slugs[locale];
+  return slug.length > 0 ? `/${locale}/${slug}` : `/${locale}`;
+}
+
+export function routeById(routeId: RouteId) {
+  const route = routeManifest.routes.find((item) => item.id === routeId);
+  if (!route) {
+    throw new Error(`Unknown route ID: ${routeId}`);
+  }
+  return route;
+}
+
+export function localeFromAcceptLanguage(headerValue: string | null): Locale {
+  if (!headerValue) return defaultLocale;
+
+  const requested = headerValue
+    .split(',')
+    .map((entry) => {
+      const [tag = '', ...parameters] = entry.trim().split(';');
+      const qualityParameter = parameters.find((parameter) => parameter.trim().startsWith('q='));
+      const quality = qualityParameter ? Number(qualityParameter.trim().slice(2)) : 1;
+      return { tag: tag.toLowerCase(), quality: Number.isFinite(quality) ? quality : 0 };
+    })
+    .sort((a, b) => b.quality - a.quality);
+
+  for (const request of requested) {
+    const base = request.tag.split('-')[0];
+    if (isLocale(base)) return base;
+  }
+  return defaultLocale;
+}
+
+export function localeSwitchUrl(current: URL, targetLocale: Locale, routeId: RouteId): URL {
+  const target = new URL(localizedPath(routeId, targetLocale), current.origin);
+  for (const key of campaignQueryAllowlist) {
+    const value = current.searchParams.get(key);
+    if (value !== null) target.searchParams.set(key, value);
+  }
+
+  const route = routeById(routeId);
+  const hash = current.hash.replace(/^#/, '');
+  if (routeManifest.switching.preserveValidHash && route.hashes.includes(hash)) {
+    target.hash = hash;
+  }
+  return target;
+}
+
+export function routeIdFromSlug(locale: Locale, slug: string): RouteId | null {
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(slug);
+  } catch {
+    return null;
+  }
+  const normalized = decoded.replace(/^\/+|\/+$/g, '');
+  const route = routeManifest.routes.find((item) => item.slugs[locale] === normalized);
+  return route?.id ?? null;
+}
+
+export function routeIdFromPathname(pathname: string): RouteId | null {
+  const [localeValue, ...segments] = pathname.split('/').filter(Boolean);
+  if (!isLocale(localeValue)) return null;
+  if (segments.length === 0) return 'home';
+  return routeIdFromSlug(localeValue, segments.join('/'));
+}
+
+export function localizedUrl(origin: URL, routeId: RouteId, locale: Locale): URL {
+  return new URL(localizedPath(routeId, locale), origin);
+}
+
+export function hreflangMap(origin: URL, routeId: RouteId): Record<string, string> {
+  const entries = locales.map((locale) => [
+    locale,
+    new URL(localizedPath(routeId, locale), origin).href,
+  ]);
+  entries.push([
+    'x-default',
+    new URL(localizedPath(routeId, routeManifest.hreflang.xDefaultLocale), origin).href,
+  ]);
+  return Object.fromEntries(entries);
+}
diff --git a/apps/homepage/src/lib/localization/format.ts b/apps/homepage/src/lib/localization/format.ts
new file mode 100644
index 0000000..4912bad
--- /dev/null
+++ b/apps/homepage/src/lib/localization/format.ts
@@ -0,0 +1,88 @@
+import type { Locale } from './config';
+
+const localeTag: Record<Locale, string> = {
+  en: 'en',
+  fr: 'fr',
+  ar: 'ar',
+};
+
+export interface DateFormattingContext {
+  locale: Locale;
+  timeZone: string;
+}
+
+export function formatDate(
+  value: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' },
+): string {
+  return new Intl.DateTimeFormat(localeTag[context.locale], {
+    calendar: 'gregory',
+    numberingSystem: 'latn',
+    timeZone: context.timeZone,
+    ...options,
+  }).format(value);
+}
+
+export function formatTime(
+  value: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { timeStyle: 'short' },
+): string {
+  return formatDate(value, context, options);
+}
+
+export function formatDateRange(
+  start: Date | number,
+  end: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' },
+): string {
+  const formatter = new Intl.DateTimeFormat(localeTag[context.locale], {
+    calendar: 'gregory',
+    numberingSystem: 'latn',
+    timeZone: context.timeZone,
+    ...options,
+  });
+  return formatter.formatRange(start, end);
+}
+
+export function formatNumber(
+  value: number,
+  locale: Locale,
+  options: Intl.NumberFormatOptions = {},
+): string {
+  return new Intl.NumberFormat(localeTag[locale], {
+    numberingSystem: 'latn',
+    ...options,
+  }).format(value);
+}
+
+export function formatPercent(value: number, locale: Locale): string {
+  return formatNumber(value, locale, { style: 'percent', maximumFractionDigits: 1 });
+}
+
+export function formatCurrency(value: number, locale: Locale, currency: string): string {
+  if (!/^[A-Z]{3}$/.test(currency)) {
+    throw new Error('Currency must be an explicit ISO 4217 code.');
+  }
+  return formatNumber(value, locale, { style: 'currency', currency });
+}
+
+export function formatRelativeTime(
+  value: number,
+  unit: Intl.RelativeTimeFormatUnit,
+  locale: Locale,
+): string {
+  return new Intl.RelativeTimeFormat(`${localeTag[locale]}-u-nu-latn`, {
+    numeric: 'auto',
+  }).format(value, unit);
+}
+
+export function formatPhoneNumber(value: string): string {
+  return value.replace(/[^+\d]/g, '').replace(/(?!^)\+/g, '');
+}
+
+export function preserveIdentifier(value: string): string {
+  return value.replace(/\s+/g, ' ');
+}
diff --git a/apps/homepage/src/lib/localization/messages.ts b/apps/homepage/src/lib/localization/messages.ts
new file mode 100644
index 0000000..44e1623
--- /dev/null
+++ b/apps/homepage/src/lib/localization/messages.ts
@@ -0,0 +1,26 @@
+import 'server-only';
+
+import arHomepage from '@/content/locales/ar/homepage.json';
+import arShell from '@/content/locales/ar/shell.json';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import frHomepage from '@/content/locales/fr/homepage.json';
+import frShell from '@/content/locales/fr/shell.json';
+import type { Locale } from './config';
+
+export type HomepageMessages = typeof enHomepage;
+export type ShellMessages = typeof enShell;
+export interface Messages {
+  homepage: HomepageMessages;
+  shell: ShellMessages;
+}
+
+const messages = {
+  en: { homepage: enHomepage, shell: enShell },
+  fr: { homepage: frHomepage, shell: frShell },
+  ar: { homepage: arHomepage, shell: arShell },
+} satisfies Record<Locale, Messages>;
+
+export function getMessages(locale: Locale): Messages {
+  return messages[locale];
+}
diff --git a/apps/homepage/src/lib/localization/site-origin.ts b/apps/homepage/src/lib/localization/site-origin.ts
new file mode 100644
index 0000000..d045d69
--- /dev/null
+++ b/apps/homepage/src/lib/localization/site-origin.ts
@@ -0,0 +1,22 @@
+const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]']);
+
+export function getSiteOrigin(): URL {
+  const configured = process.env.SITE_ORIGIN;
+  if (!configured) {
+    if (process.env.NODE_ENV !== 'production') return new URL('http://localhost:3000');
+    throw new Error('SITE_ORIGIN is required in production. No canonical domain is approved yet.');
+  }
+
+  const origin = new URL(configured);
+  if (origin.pathname !== '/' || origin.search || origin.hash) {
+    throw new Error('SITE_ORIGIN must contain only scheme and host.');
+  }
+  if (
+    process.env.NODE_ENV === 'production' &&
+    origin.protocol !== 'https:' &&
+    !LOOPBACK_HOSTS.has(origin.hostname)
+  ) {
+    throw new Error('SITE_ORIGIN must use HTTPS in production.');
+  }
+  return origin;
+}
diff --git a/apps/homepage/src/lib/metadata/build-metadata.ts b/apps/homepage/src/lib/metadata/build-metadata.ts
new file mode 100644
index 0000000..4dff5e0
--- /dev/null
+++ b/apps/homepage/src/lib/metadata/build-metadata.ts
@@ -0,0 +1,57 @@
+import {
+  hreflangMap,
+  localizedPath,
+  locales,
+  type Locale,
+  type RouteId,
+} from '@/lib/localization/config';
+import { getSiteOrigin } from '@/lib/localization/site-origin';
+import type { Metadata } from 'next';
+
+interface LocalizedMetadataInput {
+  locale: Locale;
+  routeId: RouteId;
+  title: string;
+  description: string;
+  indexable: boolean;
+}
+
+export function buildLocalizedMetadata({
+  locale,
+  routeId,
+  title,
+  description,
+  indexable,
+}: LocalizedMetadataInput): Metadata {
+  const origin = getSiteOrigin();
+  const publicReleaseApproved = process.env.PUBLIC_RELEASE_APPROVED === 'true';
+  const canIndex = publicReleaseApproved && indexable;
+  const canonicalPath = localizedPath(routeId, locale);
+
+  return {
+    metadataBase: origin,
+    title,
+    description,
+    alternates: {
+      canonical: canonicalPath,
+      languages: hreflangMap(origin, routeId),
+    },
+    openGraph: {
+      type: 'website',
+      siteName: 'RentalDriveGo',
+      title,
+      description,
+      url: canonicalPath,
+      locale,
+      alternateLocale: locales.filter((candidate) => candidate !== locale),
+    },
+    twitter: {
+      card: 'summary',
+      title,
+      description,
+    },
+    robots: canIndex
+      ? { index: true, follow: true }
+      : { index: false, follow: false, noarchive: true },
+  };
+}
diff --git a/apps/homepage/src/lib/security/content-type.ts b/apps/homepage/src/lib/security/content-type.ts
new file mode 100644
index 0000000..fc08ff3
--- /dev/null
+++ b/apps/homepage/src/lib/security/content-type.ts
@@ -0,0 +1,9 @@
+/**
+ * Accept JSON requests with optional media-type parameters while rejecting
+ * look-alike types such as application/jsonp or application/json-patch+json.
+ */
+export function isApplicationJson(contentType: string | null): boolean {
+  if (!contentType) return false;
+  const [mediaType] = contentType.split(';', 1);
+  return mediaType?.trim().toLowerCase() === 'application/json';
+}
diff --git a/apps/homepage/src/lib/security/csp.ts b/apps/homepage/src/lib/security/csp.ts
new file mode 100644
index 0000000..7ea0b27
--- /dev/null
+++ b/apps/homepage/src/lib/security/csp.ts
@@ -0,0 +1,25 @@
+export function createNonce(): string {
+  return crypto.randomUUID().replaceAll('-', '');
+}
+
+export function buildContentSecurityPolicy(nonce: string, development: boolean): string {
+  const scriptSources = ["'self'", `'nonce-${nonce}'`, "'strict-dynamic'"];
+  if (development) scriptSources.push("'unsafe-eval'");
+
+  const directives = [
+    "default-src 'self'",
+    `script-src ${scriptSources.join(' ')}`,
+    `style-src 'self'${development ? " 'unsafe-inline'" : ` 'nonce-${nonce}'`}`,
+    "img-src 'self' data: blob:",
+    "font-src 'self' data:",
+    `connect-src 'self'${development ? ' ws: wss:' : ''}`,
+    "media-src 'self'",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+    "worker-src 'self' blob:",
+    ...(development ? [] : ['upgrade-insecure-requests']),
+  ];
+  return directives.join('; ');
+}
diff --git a/apps/homepage/src/lib/theme/bootstrap-script.ts b/apps/homepage/src/lib/theme/bootstrap-script.ts
new file mode 100644
index 0000000..137cf3b
--- /dev/null
+++ b/apps/homepage/src/lib/theme/bootstrap-script.ts
@@ -0,0 +1,13 @@
+export const themeBootstrapScript = `(function () {
+  var allowed = { light: true, dark: true, system: true };
+  var cookieMatch = document.cookie.match(/(?:^|; )hpc-theme=([^;]+)/);
+  var cookieValue = cookieMatch ? decodeURIComponent(cookieMatch[1]) : null;
+  var stored = null;
+  try { stored = localStorage.getItem("hpc.theme.preference"); } catch (_) {}
+  var preference = allowed[cookieValue] ? cookieValue : (allowed[stored] ? stored : "system");
+  var dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  var resolved = preference === "system" ? (dark ? "dark" : "light") : preference;
+  var root = document.documentElement;
+  root.dataset.themePreference = preference;
+  root.dataset.theme = resolved;
+})();`;
diff --git a/apps/homepage/src/lib/theme/client.ts b/apps/homepage/src/lib/theme/client.ts
new file mode 100644
index 0000000..d9eae63
--- /dev/null
+++ b/apps/homepage/src/lib/theme/client.ts
@@ -0,0 +1,44 @@
+import {
+  isThemePreference,
+  resolveTheme,
+  themeCookie,
+  themeCookieMaxAgeSeconds,
+  themeStorageKey,
+  type ThemePreference,
+} from './config';
+
+export const themePreferenceEvent = 'rentaldrivego:theme-preference';
+
+export function applyTheme(preference: ThemePreference): void {
+  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const resolved = resolveTheme(preference, systemDark);
+  const root = document.documentElement;
+  root.dataset.themePreference = preference;
+  root.dataset.theme = resolved;
+}
+
+export function persistTheme(preference: ThemePreference): void {
+  try {
+    window.localStorage.setItem(themeStorageKey, preference);
+  } catch {
+    // Storage can be unavailable; the first-party cookie remains canonical.
+  }
+
+  const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie =
+    [
+      `${themeCookie}=${encodeURIComponent(preference)}`,
+      'Path=/',
+      `Max-Age=${themeCookieMaxAgeSeconds}`,
+      'SameSite=Lax',
+    ].join('; ') + secure;
+  applyTheme(preference);
+  window.dispatchEvent(
+    new CustomEvent<ThemePreference>(themePreferenceEvent, { detail: preference }),
+  );
+}
+
+export function currentThemePreference(): ThemePreference {
+  const value = document.documentElement.dataset.themePreference;
+  return isThemePreference(value) ? value : 'system';
+}
diff --git a/apps/homepage/src/lib/theme/config.ts b/apps/homepage/src/lib/theme/config.ts
new file mode 100644
index 0000000..1745de6
--- /dev/null
+++ b/apps/homepage/src/lib/theme/config.ts
@@ -0,0 +1,19 @@
+export const themeCookie = 'hpc-theme';
+export const themeStorageKey = 'hpc.theme.preference';
+export const themePreferences = ['light', 'dark', 'system'] as const;
+export type ThemePreference = (typeof themePreferences)[number];
+export type ResolvedTheme = 'light' | 'dark';
+
+export const themeCookieMaxAgeSeconds = 31_536_000;
+
+export function isThemePreference(value: unknown): value is ThemePreference {
+  return typeof value === 'string' && (themePreferences as readonly string[]).includes(value);
+}
+
+export function resolveTheme(preference: ThemePreference, systemDark: boolean): ResolvedTheme {
+  return preference === 'system' ? (systemDark ? 'dark' : 'light') : preference;
+}
+
+export function serverResolvedTheme(preference: ThemePreference): ResolvedTheme {
+  return preference === 'dark' ? 'dark' : 'light';
+}
diff --git a/apps/homepage/src/proxy.ts b/apps/homepage/src/proxy.ts
index 075525a..bc86433 100644
--- a/apps/homepage/src/proxy.ts
+++ b/apps/homepage/src/proxy.ts
@@ -1,77 +1,71 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import {
+  defaultLocale,
+  isLocale,
+  localeCookie,
+  localeCookieMaxAgeSeconds,
+  localeFromAcceptLanguage,
+} from '@/lib/localization/config';
+import { buildContentSecurityPolicy, createNonce } from '@/lib/security/csp';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
 
-const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
-const MARKETPLACE_LANGUAGE_COOKIE = 'marketplace-language'
-const DASHBOARD_BASE_PATH = '/dashboard'
-
-function rejectInternalSubrequest(request: NextRequest): NextResponse | null {
-  if (!request.headers.has('x-middleware-subrequest')) return null
-  return new NextResponse('Unsupported internal request header', { status: 400 })
+function applySecurityHeaders(response: NextResponse, contentSecurityPolicy: string): NextResponse {
+  response.headers.set('Content-Security-Policy', contentSecurityPolicy);
+  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+  response.headers.set('X-Content-Type-Options', 'nosniff');
+  response.headers.set('X-Frame-Options', 'DENY');
+  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+  response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
+  return response;
 }
 
-function isValidLanguage(val: string | null | undefined): val is 'en' | 'fr' | 'ar' {
-  return val === 'en' || val === 'fr' || val === 'ar'
-}
+export function proxy(request: NextRequest): NextResponse {
+  const nonce = createNonce();
+  const csp = buildContentSecurityPolicy(nonce, process.env.NODE_ENV !== 'production');
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('x-nonce', nonce);
+  requestHeaders.set('Content-Security-Policy', csp);
 
-function detectFromAcceptLanguage(header: string | null): 'en' | 'fr' | 'ar' {
-  if (!header) return 'en'
-  for (const entry of header.split(',')) {
-    const code = entry.split(';')[0].trim().split('-')[0].toLowerCase()
-    if (code === 'ar' || code === 'fr' || code === 'en') return code as 'en' | 'fr' | 'ar'
-  }
-  return 'en'
-}
-
-function deduplicateDashboardPath(pathname: string): string | null {
-  if (!pathname.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) return null
-
-  let normalized = pathname
-  while (normalized.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) {
-    normalized = normalized.slice(DASHBOARD_BASE_PATH.length)
-  }
-  return normalized || DASHBOARD_BASE_PATH
-}
-
-export function proxy(request: NextRequest) {
-  const rejected = rejectInternalSubrequest(request)
-  if (rejected) return rejected
-
-  const deduped = deduplicateDashboardPath(request.nextUrl.pathname)
-  if (deduped) {
-    const url = request.nextUrl.clone()
-    url.pathname = deduped
-    return NextResponse.redirect(url, 307)
+  if (request.nextUrl.pathname === '/') {
+    const cookieLocale = request.cookies.get(localeCookie)?.value;
+    const locale = isLocale(cookieLocale)
+      ? cookieLocale
+      : localeFromAcceptLanguage(request.headers.get('accept-language')) || defaultLocale;
+    const destination = request.nextUrl.clone();
+    destination.pathname = `/${locale}`;
+    const response = NextResponse.redirect(destination);
+    response.cookies.set(localeCookie, locale, {
+      path: '/',
+      sameSite: 'lax',
+      maxAge: localeCookieMaxAgeSeconds,
+      secure: process.env.NODE_ENV === 'production',
+      httpOnly: false,
+    });
+    return applySecurityHeaders(response, csp);
   }
 
-  const sharedLang = request.cookies.get(SHARED_LANGUAGE_COOKIE)?.value
-
-  if (isValidLanguage(sharedLang)) return NextResponse.next()
-
-  const legacyLang = request.cookies.get(MARKETPLACE_LANGUAGE_COOKIE)?.value
-  const resolved: 'en' | 'fr' | 'ar' = isValidLanguage(legacyLang)
-    ? legacyLang
-    : detectFromAcceptLanguage(request.headers.get('accept-language'))
-
-  const requestHeaders = new Headers(request.headers)
-  const existing = request.headers.get('cookie') ?? ''
-  const injected = `${SHARED_LANGUAGE_COOKIE}=${resolved}`
-  requestHeaders.set('cookie', existing ? `${existing}; ${injected}` : injected)
-
-  const response = NextResponse.next({ request: { headers: requestHeaders } })
-
-  response.cookies.set(SHARED_LANGUAGE_COOKIE, resolved, {
-    maxAge: 365 * 24 * 60 * 60,
-    path: '/',
-    sameSite: 'lax',
-  })
-
-  return response
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
+  const explicitLocale = request.nextUrl.pathname.split('/')[1];
+  if (isLocale(explicitLocale)) {
+    response.cookies.set(localeCookie, explicitLocale, {
+      path: '/',
+      sameSite: 'lax',
+      maxAge: localeCookieMaxAgeSeconds,
+      secure: process.env.NODE_ENV === 'production',
+      httpOnly: false,
+    });
+  }
+  return applySecurityHeaders(response, csp);
 }
 
 export const config = {
   matcher: [
-    '/dashboard/dashboard/:path*',
-    '/((?!_next/static|_next/image|_next/webpack-hmr|favicon\\.ico|.*\\.(?:png|ico|jpg|jpeg|svg|webp)$).*)',
+    {
+      source: '/((?!api|_next/static|_next/image|assets|favicon.ico|robots.txt|sitemap.xml).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
   ],
-}
+};
diff --git a/apps/homepage/src/styles/component-tokens.css b/apps/homepage/src/styles/component-tokens.css
new file mode 100644
index 0000000..b70c74b
--- /dev/null
+++ b/apps/homepage/src/styles/component-tokens.css
@@ -0,0 +1,127 @@
+/*
+ * Phase 11 component-facing token layer.
+ * Raw palette values remain in the immutable Phase 9 token source. Components consume only
+ * the semantic aliases below. Added roles are documented in docs/TOKEN_IMPLEMENTATION_v1.0.md.
+ */
+:root {
+  --surface-page: var(--color-canvas);
+  --surface-primary: var(--color-surface);
+  --surface-elevated: var(--color-surface-raised);
+  --surface-muted: var(--color-surface-muted);
+  --surface-strong: var(--color-surface-strong);
+  --text-primary: var(--color-text);
+  --text-secondary: var(--color-text-muted);
+  --text-subdued: var(--color-gray-500);
+  --text-inverse: var(--color-on-inverse);
+  --border-standard: var(--color-border);
+  --border-strong: var(--color-border-strong);
+  --interactive-primary: var(--color-action-primary);
+  --interactive-primary-hover: var(--color-action-primary-hover);
+  --interactive-conversion: var(--color-action-conversion);
+  --interactive-conversion-hover: var(--color-action-conversion-hover);
+  --interactive-danger: var(--color-red-700);
+  --link-default: var(--color-action-primary);
+  --link-hover: var(--color-action-primary-hover);
+  --focus-ring: var(--color-focus);
+  --status-success-surface: var(--color-green-100);
+  --status-success-text: var(--color-green-700);
+  --status-warning-surface: var(--color-amber-100);
+  --status-warning-text: var(--color-amber-800);
+  --status-error-surface: var(--color-red-100);
+  --status-error-text: var(--color-red-700);
+  --status-info-surface: var(--color-soft-blue);
+  --status-info-text: var(--color-blue-800);
+  --overlay-scrim: color-mix(in srgb, var(--color-navy-950) 72%, transparent);
+  --control-disabled-surface: var(--color-gray-100);
+  --control-disabled-text: var(--color-gray-600);
+  --selection-surface: var(--color-blue-200);
+  --selection-text: var(--color-gray-900);
+  --skeleton-base: var(--color-surface-strong);
+  --skeleton-highlight: var(--color-surface-raised);
+  --shadow-subtle: 0 1px 2px var(--shadow-color);
+  --shadow-card: 0 20px 60px var(--shadow-color);
+  --shadow-overlay: 0 28px 80px var(--shadow-color);
+  --container-wide: var(--size-container-max);
+  --container-content: 960px;
+  --container-reading: 720px;
+  --layout-gutter: clamp(var(--space-4), 4vw, var(--space-10));
+  --section-space: clamp(var(--space-12), 8vw, var(--space-24));
+  --header-min-block-size: 76px;
+  --header-offset: 92px;
+  --layer-base: 0;
+  --layer-sticky: 100;
+  --layer-overlay: 500;
+  --layer-skip-link: 1000;
+  --opacity-disabled: 0.62;
+  --type-display-size: clamp(2.25rem, 6vw, 4.75rem);
+  --type-heading-1-size: clamp(2rem, 5vw, 4rem);
+  --type-heading-2-size: clamp(1.75rem, 3vw, 2.75rem);
+  --type-heading-3-size: clamp(1.25rem, 2vw, 1.75rem);
+  --type-body-large-size: clamp(1.0625rem, 1.5vw, 1.25rem);
+  --type-body-size: 1rem;
+  --type-label-size: 0.875rem;
+  --type-caption-size: 0.8125rem;
+  --line-display: 1.05;
+  --line-heading: 1.18;
+  --line-body: 1.65;
+  --line-arabic-body: 1.85;
+  --tracking-display: -0.035em;
+  --tracking-label: 0.04em;
+}
+
+html[data-theme='dark'] {
+  --text-subdued: var(--color-gray-300);
+  --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+  --status-success-text: var(--color-green-100);
+  --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+  --status-warning-text: var(--color-amber-100);
+  --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+  --status-error-text: var(--color-red-100);
+  --status-info-text: var(--color-blue-100);
+  --control-disabled-surface: var(--color-navy-800);
+  --control-disabled-text: var(--color-gray-300);
+  --selection-surface: var(--color-blue-800);
+  --selection-text: var(--color-gray-25);
+}
+
+/* CSS-only fallback for system theme when JavaScript is unavailable or delayed. */
+@media (prefers-color-scheme: dark) {
+  html[data-theme-preference='system'] {
+    --surface-page: var(--color-navy-950);
+    --surface-primary: var(--color-navy-900);
+    --surface-elevated: var(--color-navy-850);
+    --surface-muted: var(--color-navy-900);
+    --surface-strong: var(--color-navy-800);
+    --text-primary: var(--color-blue-50);
+    --text-secondary: var(--color-gray-300);
+    --text-subdued: var(--color-gray-300);
+    --text-inverse: var(--color-navy-950);
+    --border-standard: var(--color-navy-800);
+    --border-strong: var(--color-gray-600);
+    --interactive-primary: var(--color-blue-200);
+    --interactive-primary-hover: var(--color-blue-100);
+    --interactive-conversion: var(--color-orange-400);
+    --interactive-conversion-hover: var(--color-orange-100);
+    --link-default: var(--color-blue-200);
+    --link-hover: var(--color-blue-100);
+    --focus-ring: var(--color-orange-400);
+    --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+    --status-success-text: var(--color-green-100);
+    --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+    --status-warning-text: var(--color-amber-100);
+    --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+    --status-error-text: var(--color-red-100);
+    --status-info-surface: var(--color-navy-800);
+    --status-info-text: var(--color-blue-100);
+    --control-disabled-surface: var(--color-navy-800);
+    --control-disabled-text: var(--color-gray-300);
+    --selection-surface: var(--color-blue-800);
+    --selection-text: var(--color-gray-25);
+    --skeleton-base: var(--color-navy-800);
+    --skeleton-highlight: var(--color-navy-850);
+    --shadow-subtle: 0 1px 2px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-card: 0 20px 60px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-overlay: 0 28px 80px color-mix(in srgb, var(--color-navy-950) 78%, transparent);
+    color-scheme: dark;
+  }
+}
diff --git a/apps/homepage/src/styles/globals.css b/apps/homepage/src/styles/globals.css
new file mode 100644
index 0000000..b20121e
--- /dev/null
+++ b/apps/homepage/src/styles/globals.css
@@ -0,0 +1,156 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-inline-size: 320px;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  color-scheme: light;
+  scroll-behavior: smooth;
+  scroll-padding-block-start: var(--header-offset);
+  text-rendering: optimizeLegibility;
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+body {
+  min-block-size: 100dvh;
+  margin: 0;
+  overflow-wrap: anywhere;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  font-family: var(--font-latin);
+  font-size: var(--type-body-size);
+  line-height: var(--line-body);
+}
+
+body[data-navigation-open='true'] {
+  overflow: hidden;
+}
+
+html[lang='ar'] body {
+  font-family: var(--font-arabic);
+  line-height: var(--line-arabic-body);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+select,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-inline-size: 100%;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-block-start: 0;
+}
+
+h1,
+h2,
+h3 {
+  line-height: var(--line-heading);
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--link-default);
+  text-underline-offset: 0.18em;
+}
+
+a:hover {
+  color: var(--link-hover);
+}
+
+::selection {
+  background: var(--selection-surface);
+  color: var(--selection-text);
+}
+
+:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+:target {
+  scroll-margin-block-start: var(--header-offset);
+}
+
+.skip-link {
+  position: fixed;
+  z-index: var(--layer-skip-link);
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-weight: 700;
+  text-decoration: none;
+  transform: translateY(-160%);
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+bdi,
+[data-bidi-isolate='true'] {
+  unicode-bidi: isolate;
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 3px solid CanvasText;
+  }
+
+  .skip-link {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
diff --git a/apps/homepage/src/styles/tokens.css b/apps/homepage/src/styles/tokens.css
new file mode 100644
index 0000000..23e3812
--- /dev/null
+++ b/apps/homepage/src/styles/tokens.css
@@ -0,0 +1,130 @@
+:root {
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-500: #2874e8;
+  --color-blue-600: #1b5dd8;
+  --color-blue-700: #174bb5;
+  --color-blue-800: #183d88;
+  --color-orange-100: #ffedd5;
+  --color-orange-400: #fb923c;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-navy-950: #081426;
+  --color-navy-900: #0d1b2e;
+  --color-navy-850: #11233b;
+  --color-navy-800: #162b46;
+  --color-gray-25: #fbfdff;
+  --color-gray-50: #f7f9fc;
+  --color-gray-100: #eef2f7;
+  --color-gray-200: #dbe3ed;
+  --color-gray-300: #c6d0dc;
+  --color-gray-500: #64748b;
+  --color-gray-600: #475569;
+  --color-gray-700: #334155;
+  --color-gray-800: #1e293b;
+  --color-gray-900: #0f172a;
+  --color-green-100: #dcfce7;
+  --color-green-700: #15803d;
+  --color-amber-100: #fef3c7;
+  --color-amber-800: #92400e;
+  --color-red-100: #fee2e2;
+  --color-red-700: #b91c1c;
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-11: 44px;
+  --space-12: 48px;
+  --space-13: 52px;
+  --space-14: 56px;
+  --space-15: 60px;
+  --space-16: 64px;
+  --space-17: 68px;
+  --space-18: 72px;
+  --space-19: 76px;
+  --space-20: 80px;
+  --space-21: 84px;
+  --space-22: 88px;
+  --space-23: 92px;
+  --space-24: 96px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --radius-pill: 999px;
+  --size-touch-min: 44px;
+  --size-container-max: 1280px;
+  --duration-fast: 120ms;
+  --duration-standard: 160ms;
+  --duration-overlay: 220ms;
+  --easing-standard: ease;
+  --easing-productive: cubic-bezier(0.2, 0, 0, 1);
+  --font-latin: Inter Variable, Inter, Arial, sans-serif;
+  --font-arabic: Noto Sans Arabic, Arial, sans-serif;
+  --breakpoint-medium: 768px;
+  --breakpoint-wide: 1120px;
+}
+
+html[data-theme='light'] {
+  --color-canvas: var(--color-gray-25);
+  --color-surface: #ffffff;
+  --color-surface-raised: #ffffff;
+  --color-surface-muted: #f2f6fb;
+  --color-surface-strong: #e8f0fa;
+  --color-text: #102035;
+  --color-text-muted: #52647a;
+  --color-border: #d8e2ee;
+  --color-border-strong: #bdcad9;
+  --color-action-primary: var(--color-blue-700);
+  --color-action-primary-hover: var(--color-blue-800);
+  --color-action-conversion: var(--color-orange-700);
+  --color-action-conversion-hover: #9a3412;
+  --color-focus: #f97316;
+  --color-on-inverse: #f8fafc;
+  --color-soft-blue: #eef5ff;
+  --color-soft-orange: #fff7ed;
+  --shadow-color: rgba(8, 20, 38, 0.12);
+  color-scheme: light;
+}
+html[data-theme='dark'] {
+  --color-canvas: var(--color-navy-950);
+  --color-surface: var(--color-navy-900);
+  --color-surface-raised: var(--color-navy-850);
+  --color-surface-muted: #0b1a2d;
+  --color-surface-strong: #172d48;
+  --color-text: #eef5ff;
+  --color-text-muted: #adbed2;
+  --color-border: #263c56;
+  --color-border-strong: #3a536e;
+  --color-action-primary: #76a9ff;
+  --color-action-primary-hover: #9bc2ff;
+  --color-action-conversion: var(--color-orange-400);
+  --color-action-conversion-hover: #fdba74;
+  --color-focus: var(--color-orange-400);
+  --color-on-inverse: var(--color-navy-950);
+  --color-soft-blue: #10284a;
+  --color-soft-orange: #3a2015;
+  --shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/apps/homepage/tests/a11y/component-system.a11y.spec.ts b/apps/homepage/tests/a11y/component-system.a11y.spec.ts
new file mode 100644
index 0000000..e257d4e
--- /dev/null
+++ b/apps/homepage/tests/a11y/component-system.a11y.spec.ts
@@ -0,0 +1,12 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} component fixture has no detectable accessibility violations`, async ({
+    page,
+  }) => {
+    await page.goto(`/${locale}/component-lab`);
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
diff --git a/apps/homepage/tests/a11y/homepage.a11y.spec.ts b/apps/homepage/tests/a11y/homepage.a11y.spec.ts
new file mode 100644
index 0000000..59503a8
--- /dev/null
+++ b/apps/homepage/tests/a11y/homepage.a11y.spec.ts
@@ -0,0 +1,24 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} homepage has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
+
+test('homepage keeps a coherent heading outline', async ({ page }) => {
+  await page.goto('/en');
+  const levels = await page
+    .locator('main h1, main h2, main h3')
+    .evaluateAll((headings) => headings.map((heading) => Number(heading.tagName.slice(1))));
+
+  expect(levels[0]).toBe(1);
+  for (let index = 1; index < levels.length; index += 1) {
+    expect((levels[index] ?? 1) - (levels[index - 1] ?? 1)).toBeLessThanOrEqual(1);
+  }
+});
diff --git a/apps/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts b/apps/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts
new file mode 100644
index 0000000..1f1bf68
--- /dev/null
+++ b/apps/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts
@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} demo dialog has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    const results = await new AxeBuilder({ page })
+      .include('dialog')
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
diff --git a/apps/homepage/tests/a11y/shell.a11y.spec.ts b/apps/homepage/tests/a11y/shell.a11y.spec.ts
new file mode 100644
index 0000000..c000c81
--- /dev/null
+++ b/apps/homepage/tests/a11y/shell.a11y.spec.ts
@@ -0,0 +1,27 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  for (const theme of ['light', 'dark'] as const) {
+    test(`${locale} ${theme} shell has no detectable WCAG A/AA violations`, async ({
+      page,
+      context,
+    }) => {
+      await context.addCookies([
+        {
+          name: 'hpc-theme',
+          value: theme,
+          domain: '127.0.0.1',
+          path: '/',
+          secure: false,
+          sameSite: 'Lax',
+        },
+      ]);
+      await page.goto(`/${locale}`);
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+  }
+}
diff --git a/apps/homepage/tests/browser/component-system.spec.ts b/apps/homepage/tests/browser/component-system.spec.ts
new file mode 100644
index 0000000..7d7a2bb
--- /dev/null
+++ b/apps/homepage/tests/browser/component-system.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} component fixture renders without horizontal overflow`, async ({ page }) => {
+    await page.goto(`/${locale}/component-lab`);
+    await expect(page.locator('h1')).toBeVisible();
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
+    );
+    expect(overflow).toBe(false);
+    await expect(page.locator('html')).toHaveAttribute('dir', locale === 'ar' ? 'rtl' : 'ltr');
+  });
+}
+
+test('component controls support keyboard interaction and dialog focus return', async ({
+  page,
+}) => {
+  await page.goto('/en/component-lab');
+  const firstTab = page.getByRole('tab', { name: 'Reservations' });
+  await firstTab.focus();
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('tab', { name: 'Fleet availability' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  const trigger = page.getByRole('button', { name: 'Open dialog' });
+  await trigger.click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('dialog')).toBeHidden();
+  await expect(trigger).toBeFocused();
+});
+
+test('component fixture reflows at narrow mobile and 200 percent zoom equivalent', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 320, height: 800 });
+  await page.goto('/fr/component-lab');
+  await page.evaluate(() => (document.body.style.zoom = '2'));
+  const overflow = await page.evaluate(
+    () => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
+  );
+  expect(overflow).toBe(false);
+});
diff --git a/apps/homepage/tests/browser/homepage.spec.ts b/apps/homepage/tests/browser/homepage.spec.ts
new file mode 100644
index 0000000..86549b7
--- /dev/null
+++ b/apps/homepage/tests/browser/homepage.spec.ts
@@ -0,0 +1,67 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', dir: 'ltr' },
+  { locale: 'fr', dir: 'ltr' },
+  { locale: 'ar', dir: 'rtl' },
+] as const) {
+  test(`${scenario.locale} homepage assembles the approved section sequence`, async ({ page }) => {
+    await page.goto(`/${scenario.locale}`);
+
+    await expect(page.locator('html')).toHaveAttribute('dir', scenario.dir);
+    await expect(page.locator('main h1')).toHaveCount(1);
+    await expect(page.locator('#product')).toBeVisible();
+    await expect(page.locator('#workflow')).toBeVisible();
+    await expect(page.locator('#modules')).toBeVisible();
+    await expect(page.locator('#pricing')).toBeVisible();
+    await expect(page.locator('#faq')).toBeVisible();
+    await expect(page.locator('main > section')).toHaveCount(12);
+  });
+
+  test(`${scenario.locale} unresolved actions remain non-navigable`, async ({ page }) => {
+    await page.goto(`/${scenario.locale}`);
+
+    const disabledActions = page.locator('main [aria-disabled="true"]');
+    await expect(disabledActions).toHaveCount(2);
+    await expect(disabledActions.first()).not.toHaveAttribute('href');
+  });
+}
+
+test('Arabic preview preserves left-to-right vehicle identifiers', async ({ page }) => {
+  await page.goto('/ar');
+  const identifiers = page.locator('[role="table"] bdi');
+  await expect(identifiers).toHaveCount(2);
+  await expect(identifiers.first()).toHaveAttribute('dir', 'ltr');
+});
+
+test('homepage navigation targets resolve to real sections', async ({ page }) => {
+  await page.goto('/en');
+  for (const hash of ['product', 'workflow', 'modules', 'pricing', 'faq']) {
+    await expect(page.locator(`#${hash}`)).toHaveCount(1);
+    await expect(page.locator(`header a[href="/en#${hash}"]`)).toHaveCount(2);
+  }
+});
+
+test('FAQ uses native disclosure behavior', async ({ page }) => {
+  await page.goto('/en');
+  const firstItem = page.locator('#faq details').first();
+  await expect(firstItem).toHaveAttribute('open', '');
+  await firstItem.locator('summary').click();
+  await expect(firstItem).not.toHaveAttribute('open', '');
+});
+
+test('pricing recommends a plan from the selected fleet band', async ({ page }) => {
+  await page.goto('/en');
+
+  await expect(page.locator('#pricing [data-plan="launch"]')).toHaveAttribute(
+    'data-recommended',
+    'true',
+  );
+  await page.getByLabel('26–75 vehicles').check();
+  await expect(page.locator('#pricing [data-plan="growth"]')).toHaveAttribute(
+    'data-recommended',
+    'true',
+  );
+  await page.getByLabel('Annual', { exact: true }).check();
+  await expect(page.getByLabel('Annual', { exact: true })).toBeChecked();
+});
diff --git a/apps/homepage/tests/browser/integrations/demo-workflow.spec.ts b/apps/homepage/tests/browser/integrations/demo-workflow.spec.ts
new file mode 100644
index 0000000..7913e4e
--- /dev/null
+++ b/apps/homepage/tests/browser/integrations/demo-workflow.spec.ts
@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test';
+
+const localeData = {
+  en: {
+    button: /Book a demo|Book a product demo/,
+    title: 'Book a product demo',
+    success: 'Demo request recorded',
+  },
+  fr: {
+    button: /Réserver une démonstration/,
+    title: 'Réserver une démonstration du produit',
+    success: 'Demande de démonstration enregistrée',
+  },
+  ar: {
+    button: /احجز عرضًا توضيحيًا|احجز عرض/,
+    title: 'احجز عرضًا توضيحيًا للمنتج',
+    success: 'تم تسجيل طلب العرض',
+  },
+} as const;
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} demo flow validates and succeeds through the local adapter`, async ({ page }) => {
+    const labels = localeData[locale];
+    await page.goto(`/${locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+
+    const dialog = page.getByRole('dialog', { name: labels.title });
+    await expect(dialog).toBeVisible();
+    await dialog
+      .getByRole('button', { name: /Request my demo|Demander ma démonstration|إرسال طلب العرض/ })
+      .click();
+    await expect(dialog.locator('[role="alert"]')).toBeVisible();
+    await expect(dialog.locator('#fullName')).toBeFocused();
+
+    await dialog.locator('#fullName').fill('Avery Example');
+    await dialog.locator('#workEmail').fill('avery@example.test');
+    await dialog.locator('#company').fill('Example Rental Lab');
+    await dialog.locator('#fleetSize').selectOption('10-24');
+    await dialog
+      .getByRole('button', { name: /Request my demo|Demander ma démonstration|إرسال طلب العرض/ })
+      .click();
+
+    await expect(dialog.getByRole('heading', { name: labels.success })).toBeVisible();
+    await expect(page).toHaveURL(new RegExp(`/${locale}$`));
+  });
+}
+
+test('duplicate clicks create only one request while submission is pending', async ({ page }) => {
+  await page.goto('/en');
+  await page.locator('main button[data-demo-source="hero"]').click();
+  const dialog = page.getByRole('dialog', { name: 'Book a product demo' });
+  await dialog.locator('#fullName').fill('Avery Example');
+  await dialog.locator('#workEmail').fill('avery@example.test');
+  await dialog.locator('#company').fill('Example Rental Lab');
+  await dialog.locator('#fleetSize').selectOption('10-24');
+  const submit = dialog.getByRole('button', { name: 'Request my demo' });
+  await submit.dblclick();
+  await expect(dialog.getByRole('heading', { name: 'Demo request recorded' })).toBeVisible();
+});
+
+test('demo form does not place personal data in the URL or analytics sink', async ({ page }) => {
+  await page.goto('/en');
+  await page.locator('main button[data-demo-source="hero"]').click();
+  const dialog = page.getByRole('dialog', { name: 'Book a product demo' });
+  await dialog.locator('#fullName').fill('Private Example');
+  await dialog.locator('#workEmail').fill('private@example.test');
+  await dialog.locator('#company').fill('Private Rentals');
+  await dialog.locator('#fleetSize').selectOption('1-9');
+  await dialog.getByRole('button', { name: 'Request my demo' }).click();
+  await expect(dialog.getByRole('heading', { name: 'Demo request recorded' })).toBeVisible();
+  expect(page.url()).not.toContain('private');
+  const analytics = await page.evaluate(() => window.__rdgAnalyticsTestSink ?? []);
+  expect(JSON.stringify(analytics)).not.toContain('private');
+});
diff --git a/apps/homepage/tests/browser/navigation.spec.ts b/apps/homepage/tests/browser/navigation.spec.ts
new file mode 100644
index 0000000..0828382
--- /dev/null
+++ b/apps/homepage/tests/browser/navigation.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+
+test.use({ viewport: { width: 390, height: 844 } });
+
+test('mobile navigation opens modally, closes with Escape, and returns focus', async ({ page }) => {
+  await page.goto('/en');
+  const trigger = page.getByRole('button', { name: 'Open navigation menu' });
+  await trigger.focus();
+  await trigger.click();
+
+  const dialog = page.getByRole('dialog', { name: 'Primary navigation' });
+  await expect(dialog).toBeVisible();
+  await expect(page.locator('body')).toHaveAttribute('data-navigation-open', 'true');
+  await expect(page.getByRole('button', { name: 'Close navigation menu' })).toBeFocused();
+
+  await page.keyboard.press('Escape');
+  await expect(dialog).not.toBeVisible();
+  await expect(trigger).toBeFocused();
+});
+
+test('skip navigation moves focus to the main landmark', async ({ page }) => {
+  await page.goto('/en');
+  await page.keyboard.press('Tab');
+  const skip = page.getByRole('link', { name: 'Skip to main content' });
+  await expect(skip).toBeFocused();
+  await skip.press('Enter');
+  await expect(page.locator('#main-content')).toBeFocused();
+});
+
+
+test.describe('primary navigation visibility', () => {
+  test.use({ viewport: { width: 1024, height: 768 } });
+
+  test('keeps the complete navbar visible at common laptop widths', async ({ page }) => {
+    await page.goto('/en');
+
+    const navigation = page.getByRole('navigation', { name: 'Primary navigation' }).first();
+    await expect(navigation).toBeVisible();
+
+    for (const label of ['Product', 'Workflow', 'Modules', 'Pricing', 'FAQ']) {
+      await expect(navigation.getByRole('link', { name: label, exact: true })).toBeVisible();
+    }
+  });
+});
+
+test.describe('mobile primary navigation destinations', () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+
+  test('keeps every navbar destination in the mobile drawer', async ({ page }) => {
+    await page.goto('/en');
+    await page.getByRole('button', { name: 'Open navigation menu' }).click();
+
+    const dialog = page.getByRole('dialog', { name: 'Primary navigation' });
+    for (const label of ['Product', 'Workflow', 'Modules', 'Pricing', 'FAQ']) {
+      await expect(dialog.getByRole('link', { name: label, exact: true })).toBeVisible();
+    }
+  });
+});
diff --git a/apps/homepage/tests/browser/no-javascript.spec.ts b/apps/homepage/tests/browser/no-javascript.spec.ts
new file mode 100644
index 0000000..407ceff
--- /dev/null
+++ b/apps/homepage/tests/browser/no-javascript.spec.ts
@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+test('server shell remains readable with JavaScript disabled', async ({ browser }) => {
+  const context = await browser.newContext({ javaScriptEnabled: false, colorScheme: 'dark' });
+  const page = await context.newPage();
+  await page.goto('/ar');
+  await expect(page.locator('html')).toHaveAttribute('lang', 'ar');
+  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');
+  await expect(page.locator('h1')).toBeVisible();
+  await expect(page.locator('footer')).toBeVisible();
+  await context.close();
+});
diff --git a/apps/homepage/tests/browser/responsive.spec.ts b/apps/homepage/tests/browser/responsive.spec.ts
new file mode 100644
index 0000000..8fb6151
--- /dev/null
+++ b/apps/homepage/tests/browser/responsive.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+const widths = [320, 390, 768, 1024, 1440];
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  for (const width of widths) {
+    test(`${locale} has no horizontal overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto(`/${locale}`);
+      const overflow = await page.evaluate(
+        () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+      );
+      expect(overflow).toBeLessThanOrEqual(1);
+    });
+  }
+}
+
+test('shell remains operable at a 320 CSS pixel reflow equivalent to 200 percent zoom', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 640, height: 800 });
+  await page.goto('/fr');
+  await expect(page.getByRole('button', { name: 'Ouvrir le menu de navigation' })).toBeVisible();
+});
diff --git a/apps/homepage/tests/browser/shell.spec.ts b/apps/homepage/tests/browser/shell.spec.ts
new file mode 100644
index 0000000..6dd93d1
--- /dev/null
+++ b/apps/homepage/tests/browser/shell.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', dir: 'ltr', title: /RentalDriveGo/ },
+  { locale: 'fr', dir: 'ltr', title: /RentalDriveGo/ },
+  { locale: 'ar', dir: 'rtl', title: /RentalDriveGo/ },
+] as const) {
+  test(`${scenario.locale} shell is server rendered`, async ({ page, request }) => {
+    const raw = await request.get(`/${scenario.locale}`);
+    const html = await raw.text();
+    expect(raw.status()).toBe(200);
+    expect(html).toMatch(
+      new RegExp(`<html[^>]*lang=\"${scenario.locale}\"[^>]*dir=\"${scenario.dir}\"`),
+    );
+
+    const response = await page.goto(`/${scenario.locale}`);
+    expect(response?.status()).toBe(200);
+    await expect(page.locator('html')).toHaveAttribute('lang', scenario.locale);
+    await expect(page.locator('html')).toHaveAttribute('dir', scenario.dir);
+    await expect(page).toHaveTitle(scenario.title);
+    await expect(page.locator('h1')).toBeVisible();
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('footer')).toBeVisible();
+    await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
+      'href',
+      new RegExp(`/${scenario.locale}$`),
+    );
+    for (const language of ['en', 'fr', 'ar', 'x-default']) {
+      await expect(page.locator(`link[rel="alternate"][hreflang="${language}"]`)).toHaveCount(1);
+    }
+    await expect(page.locator('meta[property="og:locale"]')).toHaveAttribute(
+      'content',
+      scenario.locale,
+    );
+  });
+}
+
+test('root locale detection honors Accept-Language', async ({ browser }) => {
+  const context = await browser.newContext({
+    extraHTTPHeaders: { 'Accept-Language': 'ar;q=1,en;q=0.8' },
+  });
+  const page = await context.newPage();
+  await page.goto('/');
+  await expect(page).toHaveURL(/\/ar$/);
+  await context.close();
+});
+
+test('locale switching keeps the semantic route and approved campaign state', async ({ page }) => {
+  await page.goto('/en/privacy?utm_source=qa&email=drop-me#ignored');
+  await page.getByLabel('Language').first().selectOption('fr');
+  await expect(page).toHaveURL('/fr/confidentialite?utm_source=qa');
+});
+
+test('pending route shells are localized and noindex', async ({ page }) => {
+  await page.goto('/fr/confidentialite');
+  await expect(page.locator('h1')).toContainText('Confidentialité');
+  await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', /noindex/);
+});
diff --git a/apps/homepage/tests/browser/text-expansion.spec.ts b/apps/homepage/tests/browser/text-expansion.spec.ts
new file mode 100644
index 0000000..10e7187
--- /dev/null
+++ b/apps/homepage/tests/browser/text-expansion.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['fr', 'ar'] as const) {
+  test(`${locale} shell tolerates long content expansion`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 900 });
+    await page.goto(`/${locale}`);
+    await page
+      .locator('main article h3')
+      .first()
+      .evaluate((element) => {
+        element.textContent = [element.textContent, element.textContent, element.textContent]
+          .filter(Boolean)
+          .join(' ');
+      });
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+}
diff --git a/apps/homepage/tests/browser/theme-csp.spec.ts b/apps/homepage/tests/browser/theme-csp.spec.ts
new file mode 100644
index 0000000..fd020f2
--- /dev/null
+++ b/apps/homepage/tests/browser/theme-csp.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+
+test('explicit dark theme is present on the server-rendered root', async ({ browser, baseURL }) => {
+  const origin = new URL(baseURL ?? 'http://127.0.0.1:3000');
+  const context = await browser.newContext();
+  await context.addCookies([
+    {
+      name: 'hpc-theme',
+      value: 'dark',
+      domain: origin.hostname,
+      path: '/',
+      secure: false,
+      sameSite: 'Lax',
+    },
+  ]);
+  const page = await context.newPage();
+  const response = await page.goto('/en');
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  const csp = response?.headers()['content-security-policy'] ?? '';
+  const nonce = await page.locator('#theme-bootstrap').getAttribute('nonce');
+  expect(nonce).toBeTruthy();
+  expect(csp).toContain(`'nonce-${nonce}'`);
+  await context.close();
+});
+
+test('system preference resolves before interaction', async ({ browser }) => {
+  const context = await browser.newContext({ colorScheme: 'dark' });
+  const page = await context.newPage();
+  await page.goto('/en');
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'system');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await context.close();
+});
+
+test('system follows operating-system changes while explicit preferences ignore them', async ({
+  page,
+}) => {
+  await page.goto('/en');
+  const selector = page.getByLabel('Theme').first();
+
+  await selector.selectOption('system');
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+
+  await selector.selectOption('dark');
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  expect(await page.evaluate(() => window.localStorage.getItem('hpc.theme.preference'))).toBe(
+    'dark',
+  );
+  expect(await page.context().cookies()).toEqual(
+    expect.arrayContaining([expect.objectContaining({ name: 'hpc-theme', value: 'dark' })]),
+  );
+});
diff --git a/apps/homepage/tests/fixtures/README.md b/apps/homepage/tests/fixtures/README.md
new file mode 100644
index 0000000..f849acc
--- /dev/null
+++ b/apps/homepage/tests/fixtures/README.md
@@ -0,0 +1,5 @@
+# Phase 11 foundation fixtures
+
+Phase 10 did not approve a component-workbench dependency. The repository therefore uses the live localized shell plus the matrix in `foundation-matrix.json` as the approved equivalent fixture strategy.
+
+Playwright functional, accessibility, responsive, and visual suites consume the same production routes and components. This avoids a parallel story-only rendering path that could pass while production quietly fails, a trick software is distressingly good at.
diff --git a/apps/homepage/tests/fixtures/component-system/component-matrix.json b/apps/homepage/tests/fixtures/component-system/component-matrix.json
new file mode 100644
index 0000000..c710a0a
--- /dev/null
+++ b/apps/homepage/tests/fixtures/component-system/component-matrix.json
@@ -0,0 +1,9 @@
+{
+  "fixtureRoute": "/{locale}/component-lab",
+  "productionGuard": "COMPONENT_FIXTURES_ENABLED=true",
+  "locales": ["en", "fr", "ar"],
+  "themes": ["light", "dark", "system"],
+  "widths": [320, 390, 768, 1024, 1440],
+  "states": ["default", "focus-visible", "disabled", "loading", "error", "long-content", "rtl"],
+  "contentPolicy": "Fictional deterministic development data only; no production claims, customers, personal data, or live operations."
+}
diff --git a/apps/homepage/tests/fixtures/foundation-matrix.json b/apps/homepage/tests/fixtures/foundation-matrix.json
new file mode 100644
index 0000000..8f33b68
--- /dev/null
+++ b/apps/homepage/tests/fixtures/foundation-matrix.json
@@ -0,0 +1,22 @@
+{
+  "locales": ["en", "fr", "ar"],
+  "directions": ["ltr", "rtl"],
+  "themes": ["light", "dark", "system"],
+  "viewports": [
+    { "name": "mobile", "width": 390, "height": 844 },
+    { "name": "tablet", "width": 1024, "height": 900 },
+    { "name": "desktop", "width": 1440, "height": 1000 }
+  ],
+  "shell_states": [
+    "default",
+    "mobile-navigation-open",
+    "keyboard-focus",
+    "loading",
+    "error",
+    "not-found",
+    "pending-destination",
+    "long-text",
+    "reduced-motion"
+  ],
+  "coverage_source": ["tests/browser", "tests/a11y", "tests/visual"]
+}
diff --git a/apps/homepage/tests/integration/demo-service.test.ts b/apps/homepage/tests/integration/demo-service.test.ts
new file mode 100644
index 0000000..8f16644
--- /dev/null
+++ b/apps/homepage/tests/integration/demo-service.test.ts
@@ -0,0 +1,97 @@
+import { clearIdempotencyStoreForTests } from '@/lib/demo/idempotency';
+import type { LeadDestinationAdapter } from '@/lib/demo/adapters';
+import { submitDemoLead } from '@/lib/demo/service';
+import type { DemoLead } from '@/lib/demo/schema';
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const environment: IntegrationEnvironment = {
+  NODE_ENV: 'test',
+  NEXT_PUBLIC_DEMO_ENABLED: true,
+  DEMO_SUBMISSION_MODE: 'local',
+  DEMO_REQUEST_TIMEOUT_MS: 250,
+  DEMO_IDEMPOTENCY_TTL_SECONDS: 900,
+  DEMO_TEST_SCENARIOS_ENABLED: true,
+  DEMO_LOCAL_TEST_MODE: false,
+  NEXT_PUBLIC_ANALYTICS_MODE: 'disabled',
+};
+
+const lead: DemoLead = {
+  fullName: 'Avery Example',
+  workEmail: 'avery@example.test',
+  company: 'Example Rental Lab',
+  fleetSize: '10-24',
+  preferredLanguage: 'en',
+  idempotencyKey: '6b4992d5-d88e-4e44-9b66-adc18fd8ee37',
+  source: 'hero',
+};
+
+beforeEach(clearIdempotencyStoreForTests);
+
+describe('demo submission orchestration', () => {
+  it('confirms acceptance before returning success', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-success',
+      submitLead: vi.fn(async () => ({
+        ok: true as const,
+        externalId: 'local_test',
+        acceptedAt: '2026-06-25T00:00:00.000Z',
+        mode: 'local' as const,
+      })),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result.ok).toBe(true);
+    expect(adapter.submitLead).toHaveBeenCalledOnce();
+  });
+
+  it('coalesces repeated transport with the same idempotency key', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-idempotent',
+      submitLead: vi.fn(async () => ({
+        ok: true as const,
+        externalId: 'local_once',
+        acceptedAt: '2026-06-25T00:00:00.000Z',
+        mode: 'local' as const,
+      })),
+    };
+    const [first, second] = await Promise.all([
+      submitDemoLead(lead, { environment, adapter }),
+      submitDemoLead(lead, { environment, adapter }),
+    ]);
+    expect(first).toEqual(second);
+    expect(adapter.submitLead).toHaveBeenCalledOnce();
+  });
+
+  it('normalizes adapter failures without exposing vendor bodies', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-error',
+      submitLead: async () => ({
+        ok: false,
+        category: 'integration',
+        retryable: true,
+        code: 'normalized_failure',
+      }),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result).toMatchObject({
+      ok: false,
+      category: 'integration',
+      formErrorCode: 'normalized_failure',
+      retryable: true,
+    });
+  });
+
+  it('bounds a hung integration with a timeout', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-timeout',
+      submitLead: (_lead, context) =>
+        new Promise((_resolve, reject) => {
+          context.signal.addEventListener('abort', () =>
+            reject(new DOMException('Aborted', 'AbortError')),
+          );
+        }),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result).toMatchObject({ ok: false, category: 'timeout', retryable: true });
+  });
+});
diff --git a/apps/homepage/tests/setup.ts b/apps/homepage/tests/setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/apps/homepage/tests/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/apps/homepage/tests/types/component-contracts.test-d.tsx b/apps/homepage/tests/types/component-contracts.test-d.tsx
new file mode 100644
index 0000000..5d6fa4a
--- /dev/null
+++ b/apps/homepage/tests/types/component-contracts.test-d.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@/components/actions/Button';
+import type { MetricContent } from '@/components/marketing/Evidence';
+
+void Button;
+
+const approvedMetric: MetricContent = {
+  value: '1',
+  label: 'Fixture',
+  status: 'approved',
+  sourceReference: 'SRC-001',
+};
+void approvedMetric;
+
+// @ts-expect-error icon-only buttons require an accessible label.
+const invalidIconButton = <Button icon="close" />;
+void invalidIconButton;
diff --git a/apps/homepage/tests/unit/components/actions.test.tsx b/apps/homepage/tests/unit/components/actions.test.tsx
new file mode 100644
index 0000000..60f2129
--- /dev/null
+++ b/apps/homepage/tests/unit/components/actions.test.tsx
@@ -0,0 +1,35 @@
+import { Button } from '@/components/actions/Button';
+import { ActionLink } from '@/components/actions/ActionLink';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+describe('action components', () => {
+  it('prevents duplicate interaction while loading and preserves the accessible name', () => {
+    const onClick = vi.fn();
+    render(
+      <Button loading onClick={onClick}>
+        Save reservation
+      </Button>,
+    );
+    const button = screen.getByRole('button', { name: 'Save reservation' });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    fireEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('requires an accessible label for icon-only use through its public contract', () => {
+    render(<Button icon="close" aria-label="Close panel" />);
+    expect(screen.getByRole('button', { name: 'Close panel' })).toBeVisible();
+  });
+
+  it('renders unresolved navigation as a disabled non-link', () => {
+    render(
+      <ActionLink href="/en" disabledReason="Destination pending approval">
+        Book a demo
+      </ActionLink>,
+    );
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByText('Book a demo').closest('[aria-disabled="true"]')).toBeInTheDocument();
+  });
+});
diff --git a/apps/homepage/tests/unit/components/controls.test.tsx b/apps/homepage/tests/unit/components/controls.test.tsx
new file mode 100644
index 0000000..bc9434d
--- /dev/null
+++ b/apps/homepage/tests/unit/components/controls.test.tsx
@@ -0,0 +1,31 @@
+import { Accordion } from '@/components/controls/Accordion';
+import { Tabs } from '@/components/controls/Tabs';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+describe('selection and disclosure controls', () => {
+  it('moves tab focus and selection with arrow keys', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs
+        label="Views"
+        items={[
+          { id: 'one', label: 'One', content: 'Panel one' },
+          { id: 'two', label: 'Two', content: 'Panel two' },
+        ]}
+      />,
+    );
+    const first = screen.getByRole('tab', { name: 'One' });
+    await user.click(first);
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel', { name: 'Two' })).toHaveTextContent('Panel two');
+  });
+
+  it('uses native disclosure semantics for accordion items', () => {
+    render(<Accordion items={[{ id: 'faq', title: 'Question', content: 'Answer' }]} />);
+    expect(screen.getByText('Question').closest('summary')).toBeInTheDocument();
+    expect(screen.getByText('Answer').closest('details')).not.toHaveAttribute('open');
+  });
+});
diff --git a/apps/homepage/tests/unit/components/evidence.test.tsx b/apps/homepage/tests/unit/components/evidence.test.tsx
new file mode 100644
index 0000000..4b240a9
--- /dev/null
+++ b/apps/homepage/tests/unit/components/evidence.test.tsx
@@ -0,0 +1,39 @@
+import { canRenderProductionEvidence, Metric } from '@/components/marketing/Evidence';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('evidence governance', () => {
+  it('allows only approved evidence in production mode', () => {
+    expect(canRenderProductionEvidence('approved')).toBe(true);
+    expect(canRenderProductionEvidence('pending-review')).toBe(false);
+    expect(canRenderProductionEvidence('research-only')).toBe(false);
+    expect(canRenderProductionEvidence('prohibited')).toBe(false);
+  });
+
+  it('suppresses research-only metrics in production mode', () => {
+    const { container } = render(
+      <Metric
+        production
+        statusLabel="Research only"
+        content={{ value: '24', label: 'Fixture', status: 'research-only' }}
+      />,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders approved evidence with its source reference', () => {
+    render(
+      <Metric
+        production
+        statusLabel="Approved"
+        content={{
+          value: '1',
+          label: 'Approved fixture',
+          status: 'approved',
+          sourceReference: 'SRC-001',
+        }}
+      />,
+    );
+    expect(screen.getByText('SRC-001')).toBeVisible();
+  });
+});
diff --git a/apps/homepage/tests/unit/components/forms.test.tsx b/apps/homepage/tests/unit/components/forms.test.tsx
new file mode 100644
index 0000000..6c17105
--- /dev/null
+++ b/apps/homepage/tests/unit/components/forms.test.tsx
@@ -0,0 +1,41 @@
+import { ErrorSummary } from '@/components/forms/ErrorSummary';
+import { FormField } from '@/components/forms/FormField';
+import { TextInput } from '@/components/forms/TextInput';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('form primitives', () => {
+  it('associates labels, help, required state, and errors', () => {
+    render(
+      <FormField
+        id="work-email"
+        label="Work email"
+        required
+        supportingText="Use work email"
+        error="Enter a valid address"
+      >
+        <TextInput
+          id="work-email"
+          type="email"
+          required
+          invalid
+          describedBy="work-email-help work-email-error"
+        />
+      </FormField>,
+    );
+    const input = screen.getByLabelText(/Work email/);
+    expect(input).toHaveAttribute('required');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('Use work email Enter a valid address');
+  });
+
+  it('links summary errors back to fields', () => {
+    render(
+      <ErrorSummary
+        title="Correct the fields"
+        errors={[{ fieldId: 'work-email', message: 'Enter a valid address' }]}
+      />,
+    );
+    expect(screen.getByRole('alert').querySelector('a')).toHaveAttribute('href', '#work-email');
+  });
+});
diff --git a/apps/homepage/tests/unit/csp.test.ts b/apps/homepage/tests/unit/csp.test.ts
new file mode 100644
index 0000000..c4df084
--- /dev/null
+++ b/apps/homepage/tests/unit/csp.test.ts
@@ -0,0 +1,20 @@
+import { buildContentSecurityPolicy, createNonce } from '@/lib/security/csp';
+import { describe, expect, it } from 'vitest';
+
+describe('CSP foundation', () => {
+  it('generates unpredictable nonce-shaped values', () => {
+    const first = createNonce();
+    const second = createNonce();
+    expect(first).toMatch(/^[a-f0-9]{32}$/);
+    expect(second).not.toBe(first);
+  });
+
+  it('allows development evaluation only in development', () => {
+    expect(buildContentSecurityPolicy('abc', true)).toContain("'unsafe-eval'");
+    expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-eval'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("'nonce-abc'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("style-src 'self' 'nonce-abc'");
+    expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-inline'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("frame-ancestors 'none'");
+  });
+});
diff --git a/apps/homepage/tests/unit/format.test.ts b/apps/homepage/tests/unit/format.test.ts
new file mode 100644
index 0000000..6f15575
--- /dev/null
+++ b/apps/homepage/tests/unit/format.test.ts
@@ -0,0 +1,40 @@
+import {
+  formatCurrency,
+  formatDate,
+  formatDateRange,
+  formatNumber,
+  formatPercent,
+  formatPhoneNumber,
+  formatRelativeTime,
+  preserveIdentifier,
+} from '@/lib/localization/format';
+import { describe, expect, it } from 'vitest';
+
+const instant = new Date('2026-06-25T12:00:00.000Z');
+
+describe('locale-aware formatting primitives', () => {
+  it('formats Gregorian dates with explicit time zones', () => {
+    expect(formatDate(instant, { locale: 'en', timeZone: 'UTC' })).toContain('2026');
+    expect(formatDate(instant, { locale: 'fr', timeZone: 'UTC' })).toContain('2026');
+    expect(formatDate(instant, { locale: 'ar', timeZone: 'UTC' })).toContain('2026');
+  });
+
+  it('formats ranges, numbers, percentages, and explicit currencies', () => {
+    expect(
+      formatDateRange(instant, new Date('2026-06-27T12:00:00.000Z'), {
+        locale: 'en',
+        timeZone: 'UTC',
+      }),
+    ).toContain('2026');
+    expect(formatNumber(1234.5, 'fr')).toMatch(/1.*234/);
+    expect(formatPercent(0.125, 'en')).toContain('12.5');
+    expect(formatCurrency(125, 'en', 'USD')).toContain('$');
+    expect(() => formatCurrency(125, 'en', 'usd')).toThrow(/ISO 4217/);
+  });
+
+  it('formats relative time and preserves atomic mixed-direction values', () => {
+    expect(formatRelativeTime(-1, 'day', 'en')).toBe('yesterday');
+    expect(formatPhoneNumber('+1 (202) 555-0100')).toBe('+12025550100');
+    expect(preserveIdentifier('RES  2026  0042')).toBe('RES 2026 0042');
+  });
+});
diff --git a/apps/homepage/tests/unit/homepage-content.test.ts b/apps/homepage/tests/unit/homepage-content.test.ts
new file mode 100644
index 0000000..321e7c6
--- /dev/null
+++ b/apps/homepage/tests/unit/homepage-content.test.ts
@@ -0,0 +1,44 @@
+import arHomepage from '@/content/locales/ar/homepage.json';
+import arShell from '@/content/locales/ar/shell.json';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import frHomepage from '@/content/locales/fr/homepage.json';
+import frShell from '@/content/locales/fr/shell.json';
+import { buildHomepageContent } from '@/content/homepage-model';
+import { describe, expect, it } from 'vitest';
+
+describe('homepage content model', () => {
+  it.each([
+    ['en', enHomepage, enShell],
+    ['fr', frHomepage, frShell],
+    ['ar', arHomepage, arShell],
+  ] as const)('builds complete %s route content', (_locale, homepage, shell) => {
+    const content = buildHomepageContent(homepage, shell);
+
+    expect(content.hero.title).toBeTruthy();
+    expect(content.trust.items).toHaveLength(4);
+    expect(content.workflow.steps).toHaveLength(4);
+    expect(content.modules.items).toHaveLength(6);
+    expect(content.faq.items).toHaveLength(6);
+    expect(content.pricing.fleetBands).toHaveLength(4);
+    expect(content.pricing.plans).toHaveLength(3);
+    expect(content.hero.preview.rows).toHaveLength(2);
+  });
+
+  it('keeps unresolved conversion destinations disabled', () => {
+    const content = buildHomepageContent(enHomepage, enShell);
+
+    expect(content.hero.primary.disabledReason).toBe(enShell.header.demoUnavailable);
+    expect(content.pricing.actionDisabledReason).toBe(enShell.states.pendingBody);
+    expect(content.final.secondary.disabledReason).toBe(enShell.states.pendingBody);
+  });
+
+  it('keeps preview identifiers isolated from translated prose', () => {
+    const content = buildHomepageContent(arHomepage, arShell);
+
+    expect(content.hero.preview.rows.map((row) => row.secondary)).toEqual([
+      arHomepage.preview.plate1,
+      arHomepage.preview.plate2,
+    ]);
+  });
+});
diff --git a/apps/homepage/tests/unit/integrations/analytics.test.ts b/apps/homepage/tests/unit/integrations/analytics.test.ts
new file mode 100644
index 0000000..c575084
--- /dev/null
+++ b/apps/homepage/tests/unit/integrations/analytics.test.ts
@@ -0,0 +1,30 @@
+import { analyticsEventRegistry, validateAnalyticsEvent } from '@/lib/analytics/events';
+import { describe, expect, it } from 'vitest';
+
+const context = {
+  routeId: 'home',
+  locale: 'en',
+  direction: 'ltr',
+  resolvedTheme: 'light',
+  source: 'hero',
+} as const;
+
+describe('analytics contract', () => {
+  it('accepts allowlisted non-personal demo events', () => {
+    expect(validateAnalyticsEvent('demo_open', context)).toEqual({ name: 'demo_open', context });
+  });
+
+  it('rejects unknown events and payload properties', () => {
+    expect(validateAnalyticsEvent('lead_created', context)).toBeNull();
+    expect(
+      validateAnalyticsEvent('demo_open', { ...context, email: 'person@example.test' }),
+    ).toBeNull();
+  });
+
+  it('marks every registry entry as non-personal and consent-gated', () => {
+    expect(analyticsEventRegistry.every((event) => !event.personalData)).toBe(true);
+    expect(analyticsEventRegistry.every((event) => event.consentCategory === 'analytics')).toBe(
+      true,
+    );
+  });
+});
diff --git a/apps/homepage/tests/unit/integrations/content-type.test.ts b/apps/homepage/tests/unit/integrations/content-type.test.ts
new file mode 100644
index 0000000..897501a
--- /dev/null
+++ b/apps/homepage/tests/unit/integrations/content-type.test.ts
@@ -0,0 +1,19 @@
+import { isApplicationJson } from '@/lib/security/content-type';
+import { describe, expect, it } from 'vitest';
+
+describe('demo API content type validation', () => {
+  it.each([
+    'application/json',
+    'application/json; charset=utf-8',
+    ' Application/JSON ; charset=UTF-8',
+  ])('accepts %s', (value) => {
+    expect(isApplicationJson(value)).toBe(true);
+  });
+
+  it.each([null, '', 'text/plain', 'application/jsonp', 'application/json-patch+json'])(
+    'rejects %s',
+    (value) => {
+      expect(isApplicationJson(value)).toBe(false);
+    },
+  );
+});
diff --git a/apps/homepage/tests/unit/integrations/demo-schema.test.ts b/apps/homepage/tests/unit/integrations/demo-schema.test.ts
new file mode 100644
index 0000000..9bbd017
--- /dev/null
+++ b/apps/homepage/tests/unit/integrations/demo-schema.test.ts
@@ -0,0 +1,46 @@
+import { demoLeadSchema, demoSubmissionEnvelopeSchema, fleetSizeValues } from '@/lib/demo/schema';
+import { describe, expect, it } from 'vitest';
+
+const validLead = {
+  fullName: '  Ada   Example ',
+  workEmail: ' ADA@EXAMPLE.TEST ',
+  company: ' Rental Test Labs ',
+  fleetSize: '25-49',
+  market: '',
+  preferredLanguage: 'en',
+  message: '  Reservation   workflow ',
+  idempotencyKey: '154249a8-0c3c-4ad8-bda6-91b1ffb361a8',
+  source: 'hero',
+} as const;
+
+describe('demo lead schema', () => {
+  it('normalizes approved fields without adding sales-enrichment data', () => {
+    const result = demoLeadSchema.parse(validLead);
+    expect(result).toEqual({
+      ...validLead,
+      fullName: 'Ada Example',
+      workEmail: 'ada@example.test',
+      company: 'Rental Test Labs',
+      market: undefined,
+      message: 'Reservation workflow',
+    });
+  });
+
+  it('rejects unknown fields and unsupported fleet sizes', () => {
+    expect(() => demoLeadSchema.parse({ ...validLead, phone: '+1 555 0100' })).toThrow();
+    expect(() => demoLeadSchema.parse({ ...validLead, fleetSize: '5000+' })).toThrow();
+  });
+
+  it('keeps the Phase 9 fleet ranges stable', () => {
+    expect(fleetSizeValues).toEqual(['1-9', '10-24', '25-49', '50-99', '100-249', '250+']);
+  });
+
+  it('rejects transport fields outside the approved envelope', () => {
+    expect(() =>
+      demoSubmissionEnvelopeSchema.parse({
+        lead: validLead,
+        guard: { honeypot: '', startedAtMs: 1, fingerprint: 'nope' },
+      }),
+    ).toThrow();
+  });
+});
diff --git a/apps/homepage/tests/unit/integrations/destinations.test.ts b/apps/homepage/tests/unit/integrations/destinations.test.ts
new file mode 100644
index 0000000..6439d1e
--- /dev/null
+++ b/apps/homepage/tests/unit/integrations/destinations.test.ts
@@ -0,0 +1,27 @@
+import { destinationRegistry, resolveDestination } from '@/lib/integrations/destinations';
+import { describe, expect, it } from 'vitest';
+
+describe('destination registry', () => {
+  it('activates only the safe local demo destination', () => {
+    const registry = destinationRegistry({ demoSubmissionEnabled: true, demoMode: 'local' });
+    expect(registry['book-demo'].status).toBe('active');
+    expect(registry['contact-sales'].status).toBe('blocked');
+    expect(registry['sign-in'].status).toBe('active');
+    expect(registry.pricing.status).toBe('placeholder');
+  });
+
+  it('fails the demo destination closed when integration is disabled', () => {
+    const registry = destinationRegistry({ demoSubmissionEnabled: false, demoMode: 'blocked' });
+    expect(registry['book-demo'].status).toBe('blocked');
+  });
+
+  it('resolves approved localized placeholder routes without guessing external URLs', () => {
+    expect(
+      resolveDestination('privacy', 'fr', { demoSubmissionEnabled: false, demoMode: 'blocked' })
+        .href,
+    ).toBe('/fr/confidentialite');
+    expect(
+      resolveDestination('sign-in', 'en', { demoSubmissionEnabled: false, demoMode: 'blocked' }).href,
+    ).toBe('/en/sign-in');
+  });
+});
diff --git a/apps/homepage/tests/unit/integrations/redaction.test.ts b/apps/homepage/tests/unit/integrations/redaction.test.ts
new file mode 100644
index 0000000..543406f
--- /dev/null
+++ b/apps/homepage/tests/unit/integrations/redaction.test.ts
@@ -0,0 +1,21 @@
+import { containsSensitiveKey, redactSensitive } from '@/lib/demo/redaction';
+import { describe, expect, it } from 'vitest';
+
+describe('privacy-safe diagnostics', () => {
+  it('redacts nested personal fields', () => {
+    expect(
+      redactSensitive({
+        category: 'validation',
+        lead: { workEmail: 'person@example.test', company: 'Example Rentals' },
+      }),
+    ).toEqual({
+      category: 'validation',
+      lead: { workEmail: '[REDACTED]', company: '[REDACTED]' },
+    });
+  });
+
+  it('detects sensitive diagnostic structures', () => {
+    expect(containsSensitiveKey({ context: { message: 'private' } })).toBe(true);
+    expect(containsSensitiveKey({ category: 'timeout', correlationId: 'abc' })).toBe(false);
+  });
+});
diff --git a/apps/homepage/tests/unit/localization.test.ts b/apps/homepage/tests/unit/localization.test.ts
new file mode 100644
index 0000000..c5d3b8f
--- /dev/null
+++ b/apps/homepage/tests/unit/localization.test.ts
@@ -0,0 +1,58 @@
+import {
+  getDirection,
+  hreflangMap,
+  isLocale,
+  localeFromAcceptLanguage,
+  localeSwitchUrl,
+  localizedPath,
+  routeById,
+  routeIdFromPathname,
+  routeIdFromSlug,
+} from '@/lib/localization/config';
+import { describe, expect, it } from 'vitest';
+
+describe('localization foundations', () => {
+  it('selects a supported locale by quality', () => {
+    expect(localeFromAcceptLanguage('de-DE;q=0.9, ar;q=0.8, fr;q=0.7')).toBe('ar');
+    expect(localeFromAcceptLanguage('fr-CA, en;q=0.8')).toBe('fr');
+    expect(localeFromAcceptLanguage(null)).toBe('en');
+  });
+
+  it('validates locale direction and route lookup', () => {
+    expect(isLocale('fr')).toBe(true);
+    expect(isLocale('de')).toBe(false);
+    expect(getDirection('ar')).toBe('rtl');
+    expect(routeById('home').id).toBe('home');
+  });
+
+  it('generates and resolves localized stable route paths', () => {
+    expect(localizedPath('home', 'ar')).toBe('/ar');
+    expect(localizedPath('privacy', 'fr')).toBe('/fr/confidentialite');
+    expect(localizedPath('sign-in', 'ar')).toBe('/ar/تسجيل-الدخول');
+    expect(routeIdFromSlug('fr', 'confidentialite')).toBe('privacy');
+    expect(routeIdFromPathname('/ar/%D8%A7%D9%84%D8%AE%D8%B5%D9%88%D8%B5%D9%8A%D8%A9')).toBe(
+      'privacy',
+    );
+    expect(routeIdFromPathname('/de')).toBeNull();
+  });
+
+  it('generates reciprocal hreflang values', () => {
+    const links = hreflangMap(new URL('https://approved.test'), 'home');
+    expect(links.en).toBe('https://approved.test/en');
+    expect(links.ar).toBe('https://approved.test/ar');
+    expect(links['x-default']).toBe('https://approved.test/en');
+  });
+
+  it('preserves only approved campaign query values and valid hashes', () => {
+    const current = new URL(
+      'https://approved.test/en?utm_source=campaign&email=private%40approved.test#gibberish',
+    );
+    const switched = localeSwitchUrl(current, 'fr', 'home');
+    expect(switched.pathname).toBe('/fr');
+    expect(switched.search).toBe('?utm_source=campaign');
+    expect(switched.hash).toBe('');
+
+    current.hash = '#workflow';
+    expect(localeSwitchUrl(current, 'ar', 'home').hash).toBe('#workflow');
+  });
+});
diff --git a/apps/homepage/tests/unit/pricing-section.test.tsx b/apps/homepage/tests/unit/pricing-section.test.tsx
new file mode 100644
index 0000000..cd408aa
--- /dev/null
+++ b/apps/homepage/tests/unit/pricing-section.test.tsx
@@ -0,0 +1,42 @@
+import { PricingSection } from '@/components/homepage/sections/PricingSection';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import { buildHomepageContent } from '@/content/homepage-model';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+describe('PricingSection', () => {
+  beforeEach(() => {
+    document.documentElement.dataset.theme = 'light';
+  });
+
+  it('changes the recommended plan when the fleet band changes', async () => {
+    const user = userEvent.setup();
+    const content = buildHomepageContent(enHomepage, enShell).pricing;
+    const { container } = render(
+      <PricingSection content={content} locale="en" homePath="/en" demoSubmissionEnabled />,
+    );
+
+    expect(container.querySelector('[data-plan="launch"]')).toHaveAttribute(
+      'data-recommended',
+      'true',
+    );
+
+    await user.click(screen.getByLabelText('26–75 vehicles'));
+
+    expect(container.querySelector('[data-plan="growth"]')).toHaveAttribute(
+      'data-recommended',
+      'true',
+    );
+    expect(container.querySelector('[data-plan="launch"]')).not.toHaveAttribute('data-recommended');
+  });
+
+  it('keeps unapproved public prices out of the rendered section', () => {
+    const content = buildHomepageContent(enHomepage, enShell).pricing;
+    render(<PricingSection content={content} locale="en" homePath="/en" demoSubmissionEnabled />);
+
+    expect(screen.getAllByText('Starting price pending approval')).toHaveLength(2);
+    expect(screen.getByText('Custom pricing')).toBeInTheDocument();
+  });
+});
diff --git a/apps/homepage/tests/unit/pricing.test.ts b/apps/homepage/tests/unit/pricing.test.ts
new file mode 100644
index 0000000..9c3a640
--- /dev/null
+++ b/apps/homepage/tests/unit/pricing.test.ts
@@ -0,0 +1,25 @@
+import { buildHomepageContent } from '@/content/homepage-model';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import { pricingCommercialConfig } from '@/content/pricing-config';
+import { describe, expect, it } from 'vitest';
+
+describe('homepage pricing configuration', () => {
+  it('keeps commercial values in one guarded configuration', () => {
+    expect(pricingCommercialConfig.publicPricesApproved).toBe(false);
+    expect(pricingCommercialConfig.currency).toBe('USD');
+    expect(pricingCommercialConfig.annualDiscountPercent).toBeNull();
+  });
+
+  it('maps every fleet band and plan from localized content', () => {
+    const pricing = buildHomepageContent(enHomepage, enShell).pricing;
+
+    expect(pricing.fleetBands.map((band) => band.id)).toEqual([
+      'small',
+      'growing',
+      'scale',
+      'enterprise',
+    ]);
+    expect(pricing.plans.map((plan) => plan.id)).toEqual(['launch', 'growth', 'enterprise']);
+  });
+});
diff --git a/apps/homepage/tests/unit/theme.test.ts b/apps/homepage/tests/unit/theme.test.ts
new file mode 100644
index 0000000..c4f374f
--- /dev/null
+++ b/apps/homepage/tests/unit/theme.test.ts
@@ -0,0 +1,18 @@
+import { isThemePreference, resolveTheme, serverResolvedTheme } from '@/lib/theme/config';
+import { describe, expect, it } from 'vitest';
+
+describe('theme foundations', () => {
+  it('accepts only approved preferences', () => {
+    expect(isThemePreference('light')).toBe(true);
+    expect(isThemePreference('dark')).toBe(true);
+    expect(isThemePreference('system')).toBe(true);
+    expect(isThemePreference('sepia')).toBe(false);
+  });
+
+  it('keeps preference and resolved theme separate', () => {
+    expect(resolveTheme('system', true)).toBe('dark');
+    expect(resolveTheme('system', false)).toBe('light');
+    expect(resolveTheme('light', true)).toBe('light');
+    expect(serverResolvedTheme('system')).toBe('light');
+  });
+});
diff --git a/apps/homepage/tests/visual/README.md b/apps/homepage/tests/visual/README.md
new file mode 100644
index 0000000..f49a8c0
--- /dev/null
+++ b/apps/homepage/tests/visual/README.md
@@ -0,0 +1,10 @@
+# Visual baselines
+
+The Playwright scenarios define the Phase 11 locale, theme, viewport, drawer, and focus-state matrix.
+Canonical PNG snapshots must be generated with the pinned Chromium build in an unblocked environment:
+
+```bash
+pnpm test:visual:update --project=chromium
+```
+
+No fabricated or manually composed screenshots are stored here. The local execution environment blocked browser installation and loopback browser navigation, so baseline approval remains an explicit release gate in the Phase 11 issue register.
diff --git a/apps/homepage/tests/visual/component-system.visual.spec.ts b/apps/homepage/tests/visual/component-system.visual.spec.ts
new file mode 100644
index 0000000..cff4953
--- /dev/null
+++ b/apps/homepage/tests/visual/component-system.visual.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', theme: 'light', width: 1440, height: 1200 },
+  { locale: 'fr', theme: 'dark', width: 1024, height: 1200 },
+  { locale: 'ar', theme: 'dark', width: 390, height: 1200 },
+] as const) {
+  test(`${scenario.locale}-${scenario.theme} component matrix`, async ({ page }) => {
+    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
+    await page.addInitScript(
+      (theme) => localStorage.setItem('hpc.theme.preference', theme),
+      scenario.theme,
+    );
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await page.goto(`/${scenario.locale}/component-lab`);
+    await expect(page).toHaveScreenshot(
+      `component-system-${scenario.locale}-${scenario.theme}-${scenario.width}.png`,
+      { fullPage: true },
+    );
+  });
+}
diff --git a/apps/homepage/tests/visual/homepage.visual.spec.ts b/apps/homepage/tests/visual/homepage.visual.spec.ts
new file mode 100644
index 0000000..ac7a0b9
--- /dev/null
+++ b/apps/homepage/tests/visual/homepage.visual.spec.ts
@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  { name: 'homepage-en-light-desktop', locale: 'en', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-en-dark-mobile', locale: 'en', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-fr-light-tablet', locale: 'fr', theme: 'light', width: 1024, height: 900 },
+  { name: 'homepage-fr-dark-mobile', locale: 'fr', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-ar-light-desktop', locale: 'ar', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-ar-dark-mobile', locale: 'ar', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-en-light-320', locale: 'en', theme: 'light', width: 320, height: 800 },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} baseline`, async ({ page, context }) => {
+    test.skip(test.info().project.name !== 'chromium');
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
diff --git a/apps/homepage/tests/visual/integrations.visual.spec.ts b/apps/homepage/tests/visual/integrations.visual.spec.ts
new file mode 100644
index 0000000..6f2f39a
--- /dev/null
+++ b/apps/homepage/tests/visual/integrations.visual.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', theme: 'light' },
+  { locale: 'en', theme: 'dark' },
+  { locale: 'fr', theme: 'light' },
+  { locale: 'ar', theme: 'light' },
+  { locale: 'ar', theme: 'dark' },
+] as const) {
+  test(`${scenario.locale} ${scenario.theme} demo initial and validation states`, async ({
+    page,
+  }) => {
+    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
+    await page.emulateMedia({ colorScheme: scenario.theme });
+    await page.goto(`/${scenario.locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toHaveScreenshot(`demo-${scenario.locale}-${scenario.theme}-initial.png`);
+    await dialog.locator('button[type="submit"]').click();
+    await expect(dialog).toHaveScreenshot(
+      `demo-${scenario.locale}-${scenario.theme}-validation.png`,
+    );
+  });
+}
diff --git a/apps/homepage/tests/visual/shell.visual.spec.ts b/apps/homepage/tests/visual/shell.visual.spec.ts
new file mode 100644
index 0000000..c01e530
--- /dev/null
+++ b/apps/homepage/tests/visual/shell.visual.spec.ts
@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  {
+    name: 'desktop-en-light',
+    locale: 'en',
+    theme: 'light',
+    viewport: { width: 1440, height: 1000 },
+  },
+  { name: 'desktop-en-dark', locale: 'en', theme: 'dark', viewport: { width: 1440, height: 1000 } },
+  { name: 'tablet-fr-light', locale: 'fr', theme: 'light', viewport: { width: 1024, height: 900 } },
+  { name: 'tablet-fr-dark', locale: 'fr', theme: 'dark', viewport: { width: 1024, height: 900 } },
+  { name: 'mobile-ar-light', locale: 'ar', theme: 'light', viewport: { width: 390, height: 844 } },
+  { name: 'mobile-ar-dark', locale: 'ar', theme: 'dark', viewport: { width: 390, height: 844 } },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} visual baseline`, async ({ page, context }) => {
+    test.skip(
+      test.info().project.name !== 'chromium',
+      'Canonical visual baselines use Chromium; other projects run functional coverage.',
+    );
+    await page.setViewportSize(scenario.viewport);
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
+
+test('mobile navigation open baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.context().addCookies([
+    {
+      name: 'hpc-theme',
+      value: 'dark',
+      domain: '127.0.0.1',
+      path: '/',
+      secure: false,
+      sameSite: 'Lax',
+    },
+  ]);
+  await page.goto('/ar');
+  await page.getByRole('button', { name: 'فتح قائمة التنقل' }).click();
+  await expect(page).toHaveScreenshot('mobile-ar-dark-navigation-open.png', { fullPage: true });
+});
+
+test('keyboard focus baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/en');
+  await page.keyboard.press('Tab');
+  await expect(page).toHaveScreenshot('desktop-en-light-focus.png', { fullPage: true });
+});
diff --git a/apps/homepage/tsconfig.json b/apps/homepage/tsconfig.json
index b575f7d..7fb8402 100644
--- a/apps/homepage/tsconfig.json
+++ b/apps/homepage/tsconfig.json
@@ -1,13 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
+    "target": "ES2024",
+    "lib": ["dom", "dom.iterable", "es2024"],
+    "allowJs": false,
+    "skipLibCheck": false,
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
@@ -22,20 +18,29 @@
         "name": "next"
       }
     ],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
     "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
     ".next/types/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "vitest.config.ts",
+    "playwright.config.ts",
+    "next.config.ts",
+    "vitest.integration.config.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules", "contracts"]
 }
diff --git a/apps/homepage/vitest.config.ts b/apps/homepage/vitest.config.ts
index 474502a..a947d44 100644
--- a/apps/homepage/vitest.config.ts
+++ b/apps/homepage/vitest.config.ts
@@ -1,17 +1,29 @@
-import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vitest/config'
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
   },
   test: {
-    environment: 'node',
+    environment: 'jsdom',
     globals: true,
-    include: ['src/**/*.test.ts'],
-    clearMocks: true,
-    restoreMocks: true,
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/unit/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json-summary'],
+      thresholds: {
+        lines: 85,
+        functions: 85,
+        branches: 80,
+        statements: 85,
+      },
+      include: [
+        'src/lib/localization/config.ts',
+        'src/lib/security/csp.ts',
+        'src/lib/theme/config.ts',
+      ],
+    },
   },
-})
+});
diff --git a/apps/homepage/vitest.integration.config.ts b/apps/homepage/vitest.integration.config.ts
new file mode 100644
index 0000000..777c9eb
--- /dev/null
+++ b/apps/homepage/vitest.integration.config.ts
@@ -0,0 +1,13 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['tests/integration/**/*.test.ts'],
+  },
+});
diff --git a/apps/storefront/src/app/layout.tsx b/apps/storefront/src/app/layout.tsx
index 56f0218..b138745 100644
--- a/apps/storefront/src/app/layout.tsx
+++ b/apps/storefront/src/app/layout.tsx
@@ -5,7 +5,7 @@ import { getMarketplaceLanguage } from '@/lib/i18n.server'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'FleetOS Marketplace',
+  title: 'RentalDriveGo Marketplace',
   description: 'Discover vehicles from trusted rental companies.',
   icons: {
     icon: '/rentalcardrive.png',
diff --git a/apps/storefront/src/components/MarketplaceFooter.tsx b/apps/storefront/src/components/MarketplaceFooter.tsx
index e52bcf0..b6e1090 100644
--- a/apps/storefront/src/components/MarketplaceFooter.tsx
+++ b/apps/storefront/src/components/MarketplaceFooter.tsx
@@ -101,7 +101,7 @@ export default function MarketplaceFooter({
         </div>
 
         <p className="text-sm text-stone-500 dark:text-stone-400">
-          &copy; {new Date().getFullYear()} FleetOS. {rightsLabel}
+          &copy; {new Date().getFullYear()} RentalDriveGo. {rightsLabel}
         </p>
       </div>
     </footer>
diff --git a/apps/storefront/src/components/MarketplaceHeader.tsx b/apps/storefront/src/components/MarketplaceHeader.tsx
index 74547e3..907235e 100644
--- a/apps/storefront/src/components/MarketplaceHeader.tsx
+++ b/apps/storefront/src/components/MarketplaceHeader.tsx
@@ -107,13 +107,13 @@ export default function MarketplaceHeader({
           <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
             <Image
               src="/rentalcardrive.png"
-              alt="FleetOS"
+              alt="RentalDriveGo"
               width={36}
               height={36}
               priority
               className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
             />
-            <span>FleetOS</span>
+            <span>RentalDriveGo</span>
           </Link>
         </div>
 
diff --git a/dashboard/README.md b/dashboard/README.md
new file mode 100644
index 0000000..71cd392
--- /dev/null
+++ b/dashboard/README.md
@@ -0,0 +1,697 @@
+# Dashboard App
+
+This document explains the purpose, structure, runtime behavior, and main feature flows of the dashboard application in `apps/dashboard`.
+
+Source of truth:
+
+- `apps/dashboard/src/app/*`
+- `apps/dashboard/src/components/*`
+- `apps/dashboard/src/lib/*`
+- `apps/dashboard/src/hooks/*`
+- `apps/dashboard/src/middleware.ts`
+- `apps/dashboard/next.config.js`
+
+## Purpose
+
+The dashboard is the internal company workspace for RentalDriveGo. It is the private B2B interface used by rental-company staff to run day-to-day operations.
+
+The app covers:
+
+- employee sign-in
+- onboarding after company creation
+- fleet management
+- reservations and rental lifecycle operations
+- online reservation intake
+- customer CRM
+- contracts and billing
+- subscription management
+- reviews, complaints, notifications, and settings
+
+It is distinct from:
+
+- the marketplace app, which is public and cross-company
+- the company site app, which is public and company-branded
+- the admin app, which is platform-internal rather than tenant-scoped
+
+## Tech and Runtime
+
+- framework: Next.js 14 App Router
+- ui: React 18 + Tailwind CSS
+- charts: Recharts
+- realtime notifications: `socket.io-client`
+- shared types: `@rentaldrivego/types`
+- default dev port: `3001`
+- base path: `/dashboard`
+
+Defined in `package.json`:
+
+- `npm run dev --workspace @rentaldrivego/dashboard`
+- `npm run build --workspace @rentaldrivego/dashboard`
+- `npm run start --workspace @rentaldrivego/dashboard`
+
+## URL and Deployment Model
+
+The app is designed to run under `/dashboard`, not at the domain root.
+
+Key behavior from `next.config.js`:
+
+- `basePath` is `/dashboard`
+- browser API calls are proxied through `/dashboard/api/*`
+- those calls are rewritten to the API origin configured by `API_INTERNAL_URL` or `API_URL`
+- image loading allows Cloudinary plus `/storage/*` assets from the API host
+- `DASHBOARD_ASSET_PREFIX` can force absolute JS/CSS asset URLs when the dashboard is served behind another frontend proxy
+
+This lets the dashboard run:
+
+- directly in dev on port `3001`
+- behind a reverse proxy
+- embedded under a shared marketplace/admin hostname while still loading its own chunks correctly
+
+## Top-Level Structure
+
+Main folders:
+
+```text
+apps/dashboard/
+  src/app/
+    (dashboard)/        private employee workspace
+    (public)/           public shell pages
+    onboarding/         post-signup setup
+    sign-in/            employee sign-in
+    sign-up/            company signup
+    forgot-password/
+    reset-password/
+  src/components/
+    layout/             sidebar, topbar, public shell
+    reservations/       inspections, photo flows, condition sheet
+    team/               invite/edit modals and permissions matrix
+    ui/                 shared view components
+  src/hooks/
+    useTeam.ts          team management data/actions
+  src/lib/
+    api.ts              cookie-aware API fetch wrapper
+    preferences.ts      language/theme persistence scoped per employee
+    dashboardPaths.ts   normalizes basePath-aware routes
+    urls.ts             resolves marketplace/admin app links
+  src/middleware.ts     auth gate and redirect logic
+```
+
+## Rendering Strategy
+
+Most dashboard screens are client components.
+
+That is a deliberate fit for the app because the dashboard relies heavily on:
+
+- HttpOnly session-cookie authentication
+- cookie and embedded-host redirects
+- optimistic UI updates
+- direct REST fetches after mount
+- websocket notification updates
+- large interactive forms and modal-heavy workflows
+
+The root `src/app/layout.tsx` is still server-rendered enough to:
+
+- read the shared language cookie
+- set `lang` and `dir`
+- inject a theme bootstrapping script before hydration
+
+## Auth and Session Model
+
+The dashboard uses API-issued employee sessions stored in an HttpOnly cookie.
+
+### Login flow
+
+`src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx`:
+
+1. submits credentials to `POST /auth/employee/login`
+2. receives an HttpOnly `employee_session` cookie from the API
+3. stores only non-sensitive employee profile/preferences client-side
+4. redirects to the requested dashboard path
+
+The sign-in page also supports:
+
+- language and theme query params
+- embedded usage through `postMessage`
+- redirect handoff to the admin app after the API sets the admin HttpOnly session cookie
+
+### Protected-route middleware
+
+`src/middleware.ts` protects the app.
+
+Important behavior:
+
+- public dashboard routes are limited to sign-in and forgot-password flows
+- all other `/dashboard/*` routes require the `employee_session` cookie
+- unauthenticated users are redirected either to the marketplace root or to `/dashboard/sign-in`, depending on host context
+- duplicate `/dashboard/dashboard` paths are normalized back to `/dashboard`
+
+This means route protection is enforced before React renders the protected pages.
+
+### Role gating
+
+The dashboard does not depend only on route middleware. It also performs UI-level role gating.
+
+Examples:
+
+- the sidebar filters navigation items by employee role
+- subscription access is restricted to `OWNER`
+- manager/owner-only actions are hidden or disabled in feature pages
+
+Role rank used in the shell:
+
+- `OWNER`
+- `MANAGER`
+- `AGENT`
+
+## Shell and Navigation
+
+The private shell is defined by:
+
+- `src/app/(dashboard)/layout.tsx`
+- `src/components/layout/Sidebar.tsx`
+- `src/components/layout/TopBar.tsx`
+
+### Sidebar
+
+Responsibilities:
+
+- tenant branding fetch from `/companies/me/brand`
+- current employee profile fetch from `/auth/employee/me`
+- role-based navigation filtering
+- language and theme controls
+- logout handling
+- communication with a parent frame when embedded
+
+Main sections exposed in navigation:
+
+- dashboard home
+- fleet
+- reservations
+- online reservations
+- customers
+- offers
+- team
+- reports
+- subscription
+- billing
+- contracts
+- reviews
+- complaints
+- notifications
+- settings
+
+### Top bar
+
+Responsibilities:
+
+- current page title resolution based on normalized dashboard path
+- unread notification count
+- compact inbox dropdown
+- websocket subscription to realtime notification events
+
+Notification reads are synchronized through the API and local UI events.
+
+## Shared State: Language and Theme
+
+The dashboard uses `DashboardI18nProvider` in `src/components/I18nProvider.tsx`.
+
+It handles:
+
+- current language: `en`, `fr`, `ar`
+- current theme: `light`, `dark`
+- full in-app copy dictionaries
+- persistence to cookies and `localStorage`
+- per-employee scoped preferences using non-sensitive cached profile metadata
+
+`src/lib/preferences.ts` is the key utility here. It stores both:
+
+- shared values like `rentaldrivego-language`
+- employee-scoped variants so one staff member does not override another on the same device
+
+Arabic also flips layout direction through the root layout by setting `dir="rtl"`.
+
+## Data Fetching Conventions
+
+The dashboard centralizes API access in `src/lib/api.ts`.
+
+### `apiFetch`
+
+Browser fetch behavior:
+
+- never reads authentication tokens from `localStorage`
+- sends authenticated requests with the HttpOnly session cookie
+- defaults JSON requests to `Content-Type: application/json`
+- preserves `FormData` for file uploads
+- includes credentials for cookie-aware flows
+- unwraps `{ data }` responses automatically
+
+Browser base URL:
+
+- `NEXT_PUBLIC_API_URL`
+- fallback `/dashboard/api/v1`
+
+### `apiFetchServer`
+
+Server-side helper for routes/components that explicitly receive a trusted server-side token and need `cache: 'no-store'`. Browser code should use HttpOnly cookies instead.
+
+### Pattern used across pages
+
+Most pages follow the same client-side pattern:
+
+1. mount
+2. call one or more `apiFetch(...)` requests
+3. store result in local component state
+4. show loading and empty states
+5. mutate through API actions
+6. refetch or patch local state
+
+There is intentionally very little abstraction beyond this. The code favors explicit page-level orchestration over a large client data framework.
+
+## Feature Areas
+
+### 1. Company signup and onboarding
+
+Relevant routes:
+
+- `src/app/sign-up/[[...sign-up]]/page.tsx`
+- `src/app/onboarding/page.tsx`
+
+The signup screen creates the company through:
+
+- `POST /auth/company/signup`
+
+The onboarding flow then completes the initial tenant setup in three steps:
+
+1. basic company info via `PATCH /companies/me`
+2. brand/public profile via `PATCH /companies/me/brand`
+3. payment and marketplace settings via `PATCH /companies/me/brand`
+
+This makes onboarding a dashboard-owned continuation of the API signup flow.
+
+### 2. Dashboard home
+
+Route:
+
+- `src/app/(dashboard)/page.tsx`
+
+Backed by:
+
+- `GET /analytics/dashboard`
+
+Primary contents:
+
+- KPI cards
+- source breakdown chart
+- subscription-status banner
+- recent reservations list
+
+Revenue visibility is reduced for lower-privilege roles.
+
+### 3. Fleet
+
+Routes:
+
+- `src/app/(dashboard)/fleet/page.tsx`
+- `src/app/(dashboard)/fleet/[id]/page.tsx`
+- `src/components/VehicleCalendar.tsx`
+
+Backed by:
+
+- `GET /vehicles`
+- `POST /vehicles`
+- `GET /vehicles/:id`
+- `PATCH /vehicles/:id`
+- `PATCH /vehicles/:id/status`
+- `POST /vehicles/:id/photos`
+- `DELETE /vehicles/:id/photos/:idx`
+- `GET /vehicles/:id/maintenance`
+- `POST /vehicles/:id/maintenance`
+- `GET /vehicles/:id/calendar`
+- `POST /vehicles/:id/calendar/blocks`
+- `DELETE /vehicles/:id/calendar/blocks/:blockId`
+
+Key responsibilities:
+
+- create and edit vehicles
+- upload vehicle images
+- publish/unpublish vehicles
+- change operational status
+- record maintenance
+- visualize reservations and manual blocks on a calendar
+- configure pickup and dropoff location rules
+
+### 4. Reservations
+
+Routes:
+
+- `src/app/(dashboard)/reservations/page.tsx`
+- `src/app/(dashboard)/reservations/new/page.tsx`
+- `src/app/(dashboard)/reservations/[id]/page.tsx`
+
+Backed by:
+
+- `GET /reservations`
+- `POST /reservations`
+- `GET /reservations/:id`
+- `PATCH /reservations/:id`
+- `POST /reservations/:id/confirm`
+- `POST /reservations/:id/checkin`
+- `POST /reservations/:id/checkout`
+- `POST /reservations/:id/close`
+- `POST /reservations/:id/extend`
+- `PUT /reservations/:id/inspections/:type`
+- `PATCH /reservations/:id/additional-drivers/:driverId/approval`
+- `GET|POST|DELETE /reservations/:id/photos*`
+
+This is the heaviest operational area of the dashboard.
+
+Major workflows:
+
+- create draft bookings
+- choose existing or new customers
+- upload and manage customer license images
+- confirm/check-in/check-out/close rentals
+- edit booking vs return data based on reservation workflow state
+- complete check-in/check-out inspections
+- upload pickup and dropoff photos
+- extend rentals
+- approve additional drivers
+
+Supporting reservation UI components:
+
+- `DamageInspectionCard.tsx`
+- `ReservationPhotoSection.tsx`
+- `VehicleConditionSheet.tsx`
+
+### 5. Online reservations
+
+Route:
+
+- `src/app/(dashboard)/online-reservations/page.tsx`
+
+Backed by:
+
+- `GET /reservations?source=MARKETPLACE&status=DRAFT`
+- `POST /reservations/:id/confirm`
+- `POST /reservations/:id/cancel`
+
+This page is the triage surface for new public booking requests before staff converts them into active operational reservations.
+
+### 6. Customers
+
+Route:
+
+- `src/app/(dashboard)/customers/page.tsx`
+
+Backed mainly by:
+
+- `GET /customers`
+
+The reservations-create flow also uses:
+
+- `POST /customers`
+- `PATCH /customers/:id`
+- `POST /customers/:id/license-image`
+
+The customer surface acts as a company-local CRM rather than a global renter account manager.
+
+### 7. Offers
+
+Route:
+
+- `src/app/(dashboard)/offers/page.tsx`
+
+Backed by:
+
+- `GET /offers`
+- `GET /offers/:id`
+- `POST /offers`
+- `PATCH /offers/:id`
+- `DELETE /offers/:id`
+- `GET /vehicles`
+
+Purpose:
+
+- create and edit discounts
+- target specific vehicles
+- manage promo details and active/public state
+
+### 8. Team
+
+Route:
+
+- `src/app/(dashboard)/team/page.tsx`
+
+Supporting hook and components:
+
+- `src/hooks/useTeam.ts`
+- `components/team/InviteModal.tsx`
+- `components/team/EditMemberModal.tsx`
+- `components/team/PermissionsMatrix.tsx`
+
+Backed by:
+
+- `GET /team`
+- `GET /team/stats`
+- `POST /team/invite`
+- `PATCH /team/:id/role`
+- `POST /team/:id/deactivate`
+- `POST /team/:id/reactivate`
+- `DELETE /team/:id`
+
+This area centralizes employee lifecycle management.
+
+### 9. Reports
+
+Route:
+
+- `src/app/(dashboard)/reports/page.tsx`
+
+Backed by:
+
+- `GET /analytics/report?period=...`
+
+Purpose:
+
+- revenue and operational analytics
+- summarized reporting views
+
+### 10. Subscription
+
+Route:
+
+- `src/app/(dashboard)/subscription/page.tsx`
+
+Backed by:
+
+- `GET /subscriptions/me`
+- `GET /subscriptions/invoices`
+- `GET /subscriptions/providers`
+- `GET /subscriptions/plans`
+- `GET /subscriptions/features`
+- `POST /subscriptions/checkout`
+- `POST /subscriptions/cancel`
+- `POST /subscriptions/resume`
+
+This is owner-only and manages the SaaS relationship between the company and RentalDriveGo.
+
+Key functions:
+
+- current plan visibility
+- plan comparison
+- provider availability checks
+- checkout redirection
+- invoice history
+- cancel/resume lifecycle
+
+### 11. Billing
+
+Route:
+
+- `src/app/(dashboard)/billing/page.tsx`
+
+Backed by:
+
+- `GET /reservations`
+- `GET /payments/company`
+- `POST /payments/reservations/:id/manual`
+
+This page handles customer-side rental billing, not SaaS subscription billing.
+
+It focuses on:
+
+- reservation invoice state
+- collected vs outstanding balances
+- payment history
+- manual payment recording
+- quick jumps to reservation and contract pages
+
+### 12. Contracts
+
+Routes:
+
+- `src/app/(dashboard)/contracts/page.tsx`
+- `src/app/(dashboard)/contracts/[id]/page.tsx`
+
+Backed by:
+
+- `GET /reservations`
+- `GET /reservations/:id/contract`
+
+Purpose:
+
+- list reservations with contract/invoice state
+- generate and reopen rental-contract views
+- present printable contract payloads for staff operations
+
+### 13. Reviews and complaints
+
+Routes:
+
+- `src/app/(dashboard)/reviews/page.tsx`
+- `src/app/(dashboard)/complaints/page.tsx`
+
+Backed by:
+
+- `GET /reviews`
+- `GET /reviews/stats`
+- `PATCH /reviews/:id/reply`
+- `GET /complaints`
+- `POST /complaints`
+- `PATCH /complaints/:id`
+
+These pages give staff post-rental quality and dispute management tools.
+
+### 14. Notifications
+
+Route:
+
+- `src/app/(dashboard)/notifications/page.tsx`
+
+Backed by:
+
+- `GET /notifications/company`
+- `GET /notifications/history`
+- `GET /notifications/company/preferences`
+- `POST /notifications/company/:id/read`
+- `POST /notifications/company/read-all`
+- `PATCH /notifications/company/preferences`
+
+This page complements the top-bar notification dropdown by adding:
+
+- full inbox view
+- delivery history audit
+- per-event, per-channel preference management
+
+### 15. Settings
+
+Route:
+
+- `src/app/(dashboard)/settings/page.tsx`
+
+Backed by:
+
+- `GET|PATCH /companies/me/brand`
+- `POST /companies/me/brand/logo`
+- `POST /companies/me/brand/hero`
+- `POST|DELETE /companies/me/brand/custom-domain`
+- `GET|PATCH /companies/me/contract-settings`
+- `GET|POST|PATCH /companies/me/insurance-policies`
+- `GET|POST|PATCH /companies/me/pricing-rules`
+- `GET|PATCH /companies/me/accounting-settings`
+
+This is the broad configuration surface for the tenant.
+
+It includes:
+
+- public brand and marketplace profile
+- payment account identifiers
+- custom domain setup
+- rental policies
+- insurance products
+- pricing rules
+- accounting defaults
+
+## Public Shell Pages
+
+Public-facing dashboard pages live outside the private shell.
+
+Notable routes:
+
+- `/dashboard/sign-in`
+- `/dashboard/sign-up`
+- `/dashboard/forgot-password`
+- `/dashboard/reset-password`
+- `/dashboard/onboarding`
+
+Layout:
+
+- `src/app/(public)/layout.tsx`
+- `src/components/layout/PublicShell.tsx`
+- `src/components/layout/PublicHeader.tsx`
+- `src/components/layout/PublicFooter.tsx`
+
+These pages share the branding system and language/theme controls but do not render the private sidebar/topbar shell.
+
+## Embedded and Cross-App Behavior
+
+The dashboard supports embedded scenarios.
+
+Examples in the code:
+
+- sign-in posts messages to the parent frame
+- logout posts an employee-logout event
+- current embedded path is reported upward
+
+It also coordinates with sibling apps:
+
+- `marketplaceUrl` links staff back to the public marketplace domain
+- `adminUrl` supports cookie-based handoff into the admin interface
+- host-aware URL rewriting allows the same app to function under external domains, internal Docker hostnames, and proxied environments
+
+## API Dependency Summary
+
+The dashboard is a thin client over the company API. Its main backend dependencies are:
+
+- auth: employee login and profile
+- companies: brand, contract settings, pricing rules, accounting, domains
+- vehicles: fleet CRUD, photos, maintenance, availability calendar
+- reservations: booking lifecycle and inspections
+- customers: CRM and license documents
+- offers: promotions
+- team: employee management
+- analytics: dashboard and reports
+- notifications: inbox, history, preferences
+- subscriptions: SaaS plan management
+- payments: rental payment recording
+- reviews and complaints: post-rental follow-up
+
+The frontend does not try to reproduce business rules locally. It delegates workflow authority to the API and reflects the resulting state.
+
+## Design Characteristics
+
+The current dashboard code favors:
+
+- explicit page-local state over a global data layer
+- direct REST integration over generated clients
+- strong tenant scoping through backend auth rather than frontend assumptions
+- rich operational forms over minimal CRUD scaffolds
+- multilingual support directly in the app shell
+
+Tradeoffs of this approach:
+
+- easy to reason about per page
+- low indirection when debugging API interactions
+- more repeated fetch/state patterns than a centralized query layer would have
+- large single-file page components in the heaviest screens
+
+## Recommended Maintenance Rules
+
+When changing the dashboard, keep these rules in mind:
+
+1. Preserve the `/dashboard` base path and `toDashboardAppPath` normalization behavior.
+2. Keep route protection aligned with `src/middleware.ts`.
+3. If a new page depends on employee role, gate it both in navigation and in-page behavior.
+4. Reuse `apiFetch` for auth and error handling consistency.
+5. Keep language/theme strings inside the dashboard i18n system rather than scattering literals.
+6. Update this README when a new major page, workflow, or integration pattern is added.
diff --git a/dashboard/next-env.d.ts b/dashboard/next-env.d.ts
new file mode 100644
index 0000000..c4b7818
--- /dev/null
+++ b/dashboard/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/dashboard/next.config.js b/dashboard/next.config.js
new file mode 100644
index 0000000..db2fdc6
--- /dev/null
+++ b/dashboard/next.config.js
@@ -0,0 +1,111 @@
+/** @type {import('next').NextConfig} */
+
+const { buildSecurityHeaders, normalizeAssetPrefix } = require('../../config/nextSecurityHeaders')
+const toStoragePattern = (rawUrl) => {
+  try {
+    const u = new URL(rawUrl.replace(/\/api\/v1\/?$/, ''))
+    return {
+      protocol: u.protocol.replace(':', ''),
+      hostname: u.hostname,
+      ...(u.port ? { port: u.port } : {}),
+      pathname: '/storage/**',
+    }
+  } catch {
+    return null
+  }
+}
+
+const storagePatterns = [
+  process.env.API_INTERNAL_URL ?? 'http://localhost:4000',
+  process.env.API_URL,
+  process.env.NEXT_PUBLIC_API_URL,
+]
+  .filter(Boolean)
+  .map(toStoragePattern)
+  .filter(Boolean)
+  .filter((p, i, arr) => arr.findIndex((q) => q.hostname === p.hostname && q.port === p.port) === i)
+
+const DASHBOARD_BASE_PATH = '/dashboard'
+
+// basePath is required so the client-side router knows it's mounted at /dashboard.
+// Without it, React cannot hydrate because the URL (/dashboard/sign-up) doesn't
+// match the route (/sign-up). The Turbopack double-basePath prefetch bug is
+// handled by the marketplace middleware (307 redirect /dashboard/dashboard → /dashboard).
+//
+// In local development the dashboard is often viewed through the marketplace
+// proxy on port 3000 while the dashboard dev server runs on port 3001. Next
+// rewrites do not reliably proxy HMR WebSocket upgrades, so emit absolute
+// dashboard asset/HMR URLs directly to the dashboard dev server.
+const dashboardAssetPrefix = process.env.DASHBOARD_ASSET_PREFIX
+  ?? (process.env.NODE_ENV !== 'production' ? 'http://localhost:3001' : undefined)
+const assetPrefix = normalizeAssetPrefix(dashboardAssetPrefix, DASHBOARD_BASE_PATH)
+const securityHeaders = buildSecurityHeaders({
+  assetSources: [assetPrefix].filter(Boolean),
+})
+
+const nextConfig = {
+  basePath: DASHBOARD_BASE_PATH,
+  ...(assetPrefix ? { assetPrefix } : {}),
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+      ...storagePatterns,
+    ],
+  },
+  transpilePackages: ['@rentaldrivego/types'],
+  async headers() {
+    return [
+      {
+        source: '/_next/static/media/:path*',
+        headers: [
+          {
+            key: 'Access-Control-Allow-Origin',
+            value: '*',
+          },
+        ],
+      },
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ]
+  },
+  async redirects() {
+    return [
+      {
+        source: `${DASHBOARD_BASE_PATH}/:path*`,
+        destination: '/:path*',
+        permanent: false,
+      },
+      {
+        source: DASHBOARD_BASE_PATH,
+        destination: '/',
+        permanent: false,
+      },
+      {
+        source: '/',
+        destination: DASHBOARD_BASE_PATH,
+        permanent: false,
+        basePath: false,
+      },
+    ]
+  },
+  async rewrites() {
+    const apiOrigin = (process.env.API_INTERNAL_URL ?? process.env.API_URL ?? 'http://localhost:4000').replace(/\/api\/v1\/?$/, '')
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${apiOrigin}/api/:path*`,
+      },
+      {
+        source: '/storage/:path*',
+        destination: `${apiOrigin}/storage/:path*`,
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig
diff --git a/dashboard/package.json b/dashboard/package.json
new file mode 100644
index 0000000..337cbba
--- /dev/null
+++ b/dashboard/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@rentaldrivego/dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "next dev -H 0.0.0.0 -p 3001",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "next build",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "next start -H 0.0.0.0 -p 3001",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@rentaldrivego/types": "*",
+    "autoprefixer": "^10.4.19",
+    "dayjs": "^1.11.11",
+    "lucide-react": "^0.376.0",
+    "next": "^16.2.7",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.7",
+    "sharp": "^0.34.5",
+    "socket.io-client": "^4.7.5",
+    "tailwindcss": "^3.4.3",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/dashboard/postcss.config.js b/dashboard/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/dashboard/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/homepage/public/rentalcardrive.png b/dashboard/public/rentalcardrive.png
similarity index 100%
rename from apps/homepage/public/rentalcardrive.png
rename to dashboard/public/rentalcardrive.png
diff --git a/dashboard/public/vehicle-condition-template.png b/dashboard/public/vehicle-condition-template.png
new file mode 100644
index 0000000..acc4ce7
Binary files /dev/null and b/dashboard/public/vehicle-condition-template.png differ
diff --git a/dashboard/src/app/(dashboard)/billing/page.tsx b/dashboard/src/app/(dashboard)/billing/page.tsx
new file mode 100644
index 0000000..b466aba
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/billing/page.tsx
@@ -0,0 +1,644 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { formatCurrency, SupportedCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type ReservationRow = {
+  id: string
+  invoiceNumber: string | null
+  contractNumber: string | null
+  status: string
+  paymentStatus: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  depositAmount: number
+  paidAmount: number
+  customer: { firstName: string; lastName: string; email: string }
+  vehicle: { make: string; model: string; licensePlate: string }
+}
+
+type PaymentRow = {
+  id: string
+  reservationId: string
+  amount: number
+  currency: SupportedCurrency
+  status: string
+  type: 'CHARGE' | 'DEPOSIT'
+  paymentProvider: 'AMANPAY' | 'PAYPAL'
+  paymentMethod: string | null
+  paidAt: string | null
+  createdAt: string
+}
+
+type BillingRow = ReservationRow & {
+  balanceDue: number
+  paymentCount: number
+  latestPayment: PaymentRow | null
+}
+
+type ManualPaymentMethod = 'CASH' | 'CHECK' | 'BANK_TRANSFER' | 'CARD' | 'PAYPAL'
+
+const PAYMENT_STATUS_BADGE: Record<string, string> = {
+  UNPAID: 'bg-rose-100 text-rose-700',
+  PAID: 'bg-emerald-100 text-emerald-700',
+  PARTIAL: 'bg-orange-100 text-orange-700',
+  PENDING: 'bg-sky-100 text-sky-700',
+  REFUNDED: 'bg-slate-100 text-slate-700',
+  FAILED: 'bg-rose-100 text-rose-700',
+  OVERDUE: 'bg-orange-100 text-orange-700',
+}
+
+const PAYMENT_EVENT_BADGE: Record<string, string> = {
+  PENDING: 'bg-orange-100 text-orange-700',
+  SUCCEEDED: 'bg-emerald-100 text-emerald-700',
+  FAILED: 'bg-rose-100 text-rose-700',
+  REFUNDED: 'bg-slate-100 text-slate-700',
+  PARTIALLY_REFUNDED: 'bg-sky-100 text-sky-700',
+}
+
+export default function BillingPage() {
+  const { language } = useDashboardI18n()
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const [reservations, setReservations] = useState<ReservationRow[]>([])
+  const [payments, setPayments] = useState<PaymentRow[]>([])
+  const [search, setSearch] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [paymentModalRow, setPaymentModalRow] = useState<BillingRow | null>(null)
+  const [paymentMethod, setPaymentMethod] = useState<ManualPaymentMethod>('CASH')
+  const [paymentType, setPaymentType] = useState<'CHARGE' | 'DEPOSIT'>('CHARGE')
+  const paymentCurrency = 'MAD'
+  const [paymentAmount, setPaymentAmount] = useState('')
+  const [submittingPayment, setSubmittingPayment] = useState(false)
+  const [paymentError, setPaymentError] = useState<string | null>(null)
+
+  const copy = {
+    en: {
+      heading: 'Customer Billing',
+      subtitle: 'Manage customer invoices, payment status, collected amounts, and remaining balances.',
+      search: 'Search by customer, invoice, contract, vehicle, or plate…',
+      totalBilled: 'Total billed',
+      totalCollected: 'Collected',
+      outstanding: 'Outstanding',
+      openInvoices: 'Open invoices',
+      customer: 'Customer',
+      vehicle: 'Vehicle',
+      invoice: 'Invoice',
+      rentalPeriod: 'Rental period',
+      total: 'Total',
+      paid: 'Paid',
+      balance: 'Balance',
+      status: 'Status',
+      payment: 'Payment',
+      paymentMethod: 'Payment method',
+      actions: 'Actions',
+      contract: 'Contract',
+      deposit: 'Deposit',
+      acceptPayment: 'Accept payment',
+      paymentModalTitle: 'Accept customer payment',
+      paymentModalSubtitle: 'Record a payment received for this reservation. No online provider setup is required.',
+      paymentType: 'Payment type',
+      paymentCurrency: 'Payment currency',
+      paymentAmount: 'Payment amount',
+      cancel: 'Cancel',
+      savingPayment: 'Saving payment…',
+      savePayment: 'Save payment',
+      chargeHelp: 'Charge records a payment against the reservation balance.',
+      depositHelp: 'Deposit records money received for the refundable security deposit.',
+      invalidAmount: 'Enter a valid payment amount within the remaining balance.',
+      paymentActionDisabled: 'No balance due',
+      paymentsRecorded: (count: number) => `${count} payment(s)`,
+      none: '—',
+      loading: 'Loading customer billing…',
+      noRows: 'No customer bills found.',
+      failed: 'Failed to load customer billing.',
+      openContract: 'Open contract',
+      openBooking: 'Open booking',
+      charge: 'Charge',
+      depositType: 'Deposit',
+      unknownInvoice: 'Draft invoice',
+      paymentStatusLabels: {
+        UNPAID: 'Unpaid',
+        PAID: 'Paid',
+        PARTIAL: 'Partial',
+        PENDING: 'Pending',
+        REFUNDED: 'Refunded',
+        FAILED: 'Failed',
+        OVERDUE: 'Overdue',
+      } as Record<string, string>,
+      paymentEventLabels: {
+        PENDING: 'Pending',
+        SUCCEEDED: 'Succeeded',
+        FAILED: 'Failed',
+        REFUNDED: 'Refunded',
+        PARTIALLY_REFUNDED: 'Partially refunded',
+      } as Record<string, string>,
+      paymentProviderLabels: {
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+      paymentMethodLabels: {
+        CASH: 'Cash',
+        CHECK: 'Check',
+        BANK_TRANSFER: 'Bank transfer',
+        CARD: 'Card',
+        PAYPAL: 'PayPal',
+        STRIPE: 'Card',
+        CREDIT_CARD: 'Card',
+        DEBIT_CARD: 'Card',
+      } as Record<string, string>,
+    },
+    fr: {
+      heading: 'Facturation clients',
+      subtitle: 'Gérez les factures clients, le statut des paiements, les montants encaissés et les soldes restants.',
+      search: 'Rechercher par client, facture, contrat, véhicule ou plaque…',
+      totalBilled: 'Total facturé',
+      totalCollected: 'Encaissé',
+      outstanding: 'Solde restant',
+      openInvoices: 'Factures ouvertes',
+      customer: 'Client',
+      vehicle: 'Véhicule',
+      invoice: 'Facture',
+      rentalPeriod: 'Période',
+      total: 'Total',
+      paid: 'Payé',
+      balance: 'Solde',
+      status: 'Statut',
+      payment: 'Paiement',
+      paymentMethod: 'Mode de paiement',
+      actions: 'Actions',
+      contract: 'Contrat',
+      deposit: 'Dépôt',
+      acceptPayment: 'Encaisser',
+      paymentModalTitle: 'Encaisser un paiement client',
+      paymentModalSubtitle: 'Enregistrez un paiement reçu pour cette réservation. Aucune configuration de fournisseur en ligne n’est requise.',
+      paymentType: 'Type de paiement',
+      paymentCurrency: 'Devise du paiement',
+      paymentAmount: 'Montant du paiement',
+      cancel: 'Annuler',
+      savingPayment: 'Enregistrement…',
+      savePayment: 'Enregistrer le paiement',
+      chargeHelp: 'Le paiement enregistre un règlement sur le solde de la réservation.',
+      depositHelp: 'Le dépôt enregistre l’encaissement du dépôt de garantie remboursable.',
+      invalidAmount: 'Saisissez un montant valide dans la limite du solde restant.',
+      paymentActionDisabled: 'Aucun solde dû',
+      paymentsRecorded: (count: number) => `${count} paiement(s)`,
+      none: '—',
+      loading: 'Chargement de la facturation client…',
+      noRows: 'Aucune facture client trouvée.',
+      failed: 'Échec du chargement de la facturation client.',
+      openContract: 'Ouvrir le contrat',
+      openBooking: 'Ouvrir la réservation',
+      charge: 'Paiement',
+      depositType: 'Dépôt',
+      unknownInvoice: 'Facture brouillon',
+      paymentStatusLabels: {
+        UNPAID: 'Non payé',
+        PAID: 'Payé',
+        PARTIAL: 'Partiel',
+        PENDING: 'En attente',
+        REFUNDED: 'Remboursé',
+        FAILED: 'Échoué',
+        OVERDUE: 'En retard',
+      } as Record<string, string>,
+      paymentEventLabels: {
+        PENDING: 'En attente',
+        SUCCEEDED: 'Réussi',
+        FAILED: 'Échoué',
+        REFUNDED: 'Remboursé',
+        PARTIALLY_REFUNDED: 'Partiellement remboursé',
+      } as Record<string, string>,
+      paymentProviderLabels: {
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+      paymentMethodLabels: {
+        CASH: 'Espèces',
+        CHECK: 'Chèque',
+        BANK_TRANSFER: 'Virement bancaire',
+        CARD: 'Carte',
+        PAYPAL: 'PayPal',
+        STRIPE: 'Carte',
+        CREDIT_CARD: 'Carte',
+        DEBIT_CARD: 'Carte',
+      } as Record<string, string>,
+    },
+    ar: {
+      heading: 'فوترة العملاء',
+      subtitle: 'إدارة فواتير العملاء وحالة الدفع والمبالغ المحصلة والأرصدة المتبقية.',
+      search: 'ابحث بالعميل أو الفاتورة أو العقد أو السيارة أو اللوحة…',
+      totalBilled: 'إجمالي الفواتير',
+      totalCollected: 'المحصّل',
+      outstanding: 'المتبقي',
+      openInvoices: 'الفواتير المفتوحة',
+      customer: 'العميل',
+      vehicle: 'المركبة',
+      invoice: 'الفاتورة',
+      rentalPeriod: 'فترة الإيجار',
+      total: 'الإجمالي',
+      paid: 'المدفوع',
+      balance: 'الرصيد',
+      status: 'الحالة',
+      payment: 'الدفعة',
+      paymentMethod: 'طريقة الدفع',
+      actions: 'الإجراءات',
+      contract: 'العقد',
+      deposit: 'العربون',
+      acceptPayment: 'تحصيل دفعة',
+      paymentModalTitle: 'تحصيل دفعة من العميل',
+      paymentModalSubtitle: 'سجّل دفعة مستلمة لهذا الحجز. لا يتطلب ذلك إعداد مزود دفع عبر الإنترنت.',
+      paymentType: 'نوع الدفع',
+      paymentCurrency: 'عملة الدفع',
+      paymentAmount: 'مبلغ الدفعة',
+      cancel: 'إلغاء',
+      savingPayment: 'جارٍ الحفظ…',
+      savePayment: 'حفظ الدفعة',
+      chargeHelp: 'تسجّل الدفعة مبلغاً مستلماً على رصيد الحجز.',
+      depositHelp: 'العربون يسجل مبلغ التأمين القابل للاسترداد المستلم.',
+      invalidAmount: 'أدخل مبلغاً صحيحاً ضمن الرصيد المتبقي.',
+      paymentActionDisabled: 'لا يوجد رصيد مستحق',
+      paymentsRecorded: (count: number) => `${count} دفعة`,
+      none: '—',
+      loading: 'جارٍ تحميل فوترة العملاء…',
+      noRows: 'لم يتم العثور على فواتير عملاء.',
+      failed: 'فشل تحميل فوترة العملاء.',
+      openContract: 'فتح العقد',
+      openBooking: 'فتح الحجز',
+      charge: 'دفعة',
+      depositType: 'عربون',
+      unknownInvoice: 'فاتورة مسودة',
+      paymentStatusLabels: {
+        UNPAID: 'غير مدفوع',
+        PAID: 'مدفوع',
+        PARTIAL: 'جزئي',
+        PENDING: 'قيد الانتظار',
+        REFUNDED: 'مسترد',
+        FAILED: 'فشل',
+        OVERDUE: 'متأخر',
+      } as Record<string, string>,
+      paymentEventLabels: {
+        PENDING: 'قيد الانتظار',
+        SUCCEEDED: 'ناجح',
+        FAILED: 'فشل',
+        REFUNDED: 'مسترد',
+        PARTIALLY_REFUNDED: 'مسترد جزئياً',
+      } as Record<string, string>,
+      paymentProviderLabels: {
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+      paymentMethodLabels: {
+        CASH: 'نقداً',
+        CHECK: 'شيك',
+        BANK_TRANSFER: 'تحويل بنكي',
+        CARD: 'بطاقة',
+        PAYPAL: 'PayPal',
+        STRIPE: 'بطاقة',
+        CREDIT_CARD: 'بطاقة',
+        DEBIT_CARD: 'بطاقة',
+      } as Record<string, string>,
+    },
+  }[language]
+
+  async function loadBillingData() {
+    const [reservationRows, paymentRows] = await Promise.all([
+      apiFetch<ReservationRow[]>('/reservations?pageSize=100'),
+      apiFetch<PaymentRow[]>('/payments/company'),
+    ])
+    setReservations(reservationRows ?? [])
+    setPayments(paymentRows ?? [])
+  }
+
+  useEffect(() => {
+    loadBillingData()
+      .catch((err) => setError(err.message ?? copy.failed))
+      .finally(() => setLoading(false))
+  }, [copy.failed])
+
+  const billingRows = useMemo<BillingRow[]>(() => {
+    const paymentsByReservation = new Map<string, PaymentRow[]>()
+
+    for (const payment of payments) {
+      const existing = paymentsByReservation.get(payment.reservationId) ?? []
+      existing.push(payment)
+      paymentsByReservation.set(payment.reservationId, existing)
+    }
+
+    return reservations.map((reservation) => {
+      const reservationPayments = (paymentsByReservation.get(reservation.id) ?? []).sort((a, b) =>
+        new Date(b.paidAt ?? b.createdAt).getTime() - new Date(a.paidAt ?? a.createdAt).getTime(),
+      )
+
+      return {
+        ...reservation,
+        balanceDue: Math.max(reservation.totalAmount - reservation.paidAmount, 0),
+        paymentCount: reservationPayments.length,
+        latestPayment: reservationPayments[0] ?? null,
+      }
+    })
+  }, [payments, reservations])
+
+  const filteredRows = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return billingRows
+    return billingRows.filter((row) =>
+      `${row.customer.firstName} ${row.customer.lastName}`.toLowerCase().includes(q) ||
+      row.customer.email.toLowerCase().includes(q) ||
+      `${row.vehicle.make} ${row.vehicle.model}`.toLowerCase().includes(q) ||
+      row.vehicle.licensePlate.toLowerCase().includes(q) ||
+      (row.invoiceNumber ?? '').toLowerCase().includes(q) ||
+      (row.contractNumber ?? '').toLowerCase().includes(q),
+    )
+  }, [billingRows, search])
+
+  const totals = useMemo(() => {
+    return filteredRows.reduce(
+      (acc, row) => {
+        acc.totalBilled += row.totalAmount
+        acc.totalCollected += row.paidAmount
+        acc.outstanding += row.balanceDue
+        if (row.balanceDue > 0) acc.openInvoices += 1
+        return acc
+      },
+      { totalBilled: 0, totalCollected: 0, outstanding: 0, openInvoices: 0 },
+    )
+  }, [filteredRows])
+
+  function formatDate(value: string) {
+    return new Date(value).toLocaleDateString(localeCode, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  }
+
+  function translateStatus(status: string, labels: Record<string, string>) {
+    return labels[status] ?? status.replace(/_/g, ' ')
+  }
+
+  function translatePaymentMethod(method: string | null) {
+    if (!method) return copy.none
+    return copy.paymentMethodLabels[method] ?? method.replace(/_/g, ' ')
+  }
+
+  function canAcceptPayment(row: BillingRow) {
+    return row.balanceDue > 0
+  }
+
+  function openPaymentModal(row: BillingRow) {
+    setPaymentModalRow(row)
+    setPaymentMethod('CASH')
+    setPaymentType('CHARGE')
+    setPaymentAmount(String((row.balanceDue / 100).toFixed(2)))
+    setPaymentError(null)
+  }
+
+  async function handleAcceptPayment() {
+    if (!paymentModalRow) return
+
+    const amount = Math.round(Number(paymentAmount) * 100)
+    if (!Number.isFinite(amount) || amount <= 0 || amount > paymentModalRow.balanceDue) {
+      setPaymentError(copy.invalidAmount)
+      return
+    }
+
+    setSubmittingPayment(true)
+    setPaymentError(null)
+
+    try {
+      await apiFetch<PaymentRow>(`/payments/reservations/${paymentModalRow.id}/manual`, {
+        method: 'POST',
+        body: JSON.stringify({
+          amount,
+          type: paymentType,
+          currency: paymentCurrency,
+          paymentMethod,
+        }),
+      })
+      await loadBillingData()
+      setPaymentModalRow(null)
+    } catch (err: any) {
+      setPaymentError(err.message ?? copy.failed)
+    } finally {
+      setSubmittingPayment(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{copy.heading}</h2>
+          <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+        </div>
+        <input
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder={copy.search}
+          className="input-field w-full lg:max-w-md"
+        />
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <MetricCard label={copy.totalBilled} value={formatCurrency(totals.totalBilled, 'MAD')} />
+        <MetricCard label={copy.totalCollected} value={formatCurrency(totals.totalCollected, 'MAD')} />
+        <MetricCard label={copy.outstanding} value={formatCurrency(totals.outstanding, 'MAD')} />
+        <MetricCard label={copy.openInvoices} value={totals.openInvoices.toLocaleString(localeCode)} />
+      </div>
+
+      <div className="card overflow-hidden">
+        {error ? (
+          <div className="p-6 text-sm text-red-600">{error}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-200 bg-slate-50">
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.customer}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.vehicle}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.invoice}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.rentalPeriod}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.total}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.paid}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.balance}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.status}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.payment}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.paymentMethod}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.actions}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {loading ? (
+                  <tr>
+                    <td colSpan={11} className="px-6 py-10 text-center text-sm text-slate-400">{copy.loading}</td>
+                  </tr>
+                ) : filteredRows.length === 0 ? (
+                  <tr>
+                    <td colSpan={11} className="px-6 py-10 text-center text-sm text-slate-400">{copy.noRows}</td>
+                  </tr>
+                ) : filteredRows.map((row) => (
+                  <tr key={row.id}>
+                    <td className="px-6 py-4 text-sm">
+                      <p className="font-semibold text-slate-900">{row.customer.firstName} {row.customer.lastName}</p>
+                      <p className="text-xs text-slate-500">{row.customer.email}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">
+                      <p>{row.vehicle.make} {row.vehicle.model}</p>
+                      <p className="text-xs text-slate-500">{row.vehicle.licensePlate}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">
+                      <p className="font-medium text-slate-900">{row.invoiceNumber ?? copy.unknownInvoice}</p>
+                      <p className="text-xs text-slate-500">{copy.contract}: {row.contractNumber ?? copy.none}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-600">
+                      <p>{formatDate(row.startDate)}</p>
+                      <p>{formatDate(row.endDate)}</p>
+                    </td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">
+                      {formatCurrency(row.totalAmount, 'MAD')}
+                      {row.depositAmount > 0 ? (
+                        <p className="text-xs font-normal text-slate-500">{copy.deposit}: {formatCurrency(row.depositAmount, 'MAD')}</p>
+                      ) : null}
+                    </td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-emerald-700">{formatCurrency(row.paidAmount, 'MAD')}</td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-orange-700">{formatCurrency(row.balanceDue, 'MAD')}</td>
+                    <td className="px-6 py-4 text-sm">
+                      <span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${PAYMENT_STATUS_BADGE[row.paymentStatus] ?? 'bg-slate-100 text-slate-700'}`}>
+                        {translateStatus(row.paymentStatus, copy.paymentStatusLabels)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">
+                      {row.latestPayment ? (
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2">
+                            <span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${PAYMENT_EVENT_BADGE[row.latestPayment.status] ?? 'bg-slate-100 text-slate-700'}`}>
+                              {translateStatus(row.latestPayment.status, copy.paymentEventLabels)}
+                            </span>
+                            <span className="text-xs text-slate-500">{copy.paymentProviderLabels[row.latestPayment.paymentProvider] ?? row.latestPayment.paymentProvider}</span>
+                          </div>
+                          <p className="text-xs text-slate-500">
+                            {row.latestPayment.type === 'DEPOSIT' ? copy.depositType : copy.charge} · {formatCurrency(row.latestPayment.amount, row.latestPayment.currency)}
+                          </p>
+                          <p className="text-xs text-slate-500">{formatDate(row.latestPayment.paidAt ?? row.latestPayment.createdAt)} · {copy.paymentsRecorded(row.paymentCount)}</p>
+                        </div>
+                      ) : (
+                        <span className="text-slate-400">{copy.none}</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">
+                      {row.latestPayment ? (
+                        <div className="space-y-1">
+                          <p className="font-medium text-slate-900">{translatePaymentMethod(row.latestPayment.paymentMethod)}</p>
+                          <p className="text-xs text-slate-500">{copy.paymentProviderLabels[row.latestPayment.paymentProvider] ?? row.latestPayment.paymentProvider}</p>
+                        </div>
+                      ) : (
+                        <span className="text-slate-400">{copy.none}</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-right text-sm">
+                      <div className="flex flex-col items-end gap-2">
+                        {canAcceptPayment(row) ? (
+                          <button type="button" onClick={() => openPaymentModal(row)} className="font-semibold text-emerald-700 hover:underline">
+                            {copy.acceptPayment}
+                          </button>
+                        ) : (
+                          <span className="text-xs text-slate-400">{copy.paymentActionDisabled}</span>
+                        )}
+                        <Link href={`/contracts/${row.id}`} className="font-semibold text-blue-700 hover:underline">
+                          {copy.openContract}
+                        </Link>
+                        <Link href={`/reservations/${row.id}`} className="text-slate-600 hover:text-slate-900 hover:underline">
+                          {copy.openBooking}
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {paymentModalRow ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm" onClick={(event) => {
+          if (event.target === event.currentTarget && !submittingPayment) setPaymentModalRow(null)
+        }}>
+          <div className="w-full max-w-lg rounded-3xl bg-white p-6 shadow-2xl">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h3 className="text-lg font-semibold text-slate-900">{copy.paymentModalTitle}</h3>
+                <p className="mt-1 text-sm text-slate-500">{copy.paymentModalSubtitle}</p>
+              </div>
+              <button type="button" onClick={() => setPaymentModalRow(null)} disabled={submittingPayment} className="text-slate-400 transition hover:text-slate-700">
+                ×
+              </button>
+            </div>
+
+            <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
+              <p className="font-semibold text-slate-900">{paymentModalRow.customer.firstName} {paymentModalRow.customer.lastName}</p>
+              <p className="mt-1">{paymentModalRow.vehicle.make} {paymentModalRow.vehicle.model} · {paymentModalRow.vehicle.licensePlate}</p>
+              <p className="mt-1">{copy.invoice}: {paymentModalRow.invoiceNumber ?? copy.unknownInvoice}</p>
+              <p className="mt-2 font-semibold text-slate-900">{copy.balance}: {formatCurrency(paymentModalRow.balanceDue, paymentCurrency)}</p>
+            </div>
+
+            {paymentError ? (
+              <div className="mt-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+                {paymentError}
+              </div>
+            ) : null}
+
+            <div className="mt-5 space-y-4">
+              <div>
+                <label className="mb-1 block text-sm font-medium text-slate-700">{copy.paymentMethod}</label>
+                <select className="input-field" value={paymentMethod} onChange={(event) => setPaymentMethod(event.target.value as ManualPaymentMethod)} disabled={submittingPayment}>
+                  <option value="CASH">{copy.paymentMethodLabels.CASH}</option>
+                  <option value="CHECK">{copy.paymentMethodLabels.CHECK}</option>
+                  <option value="BANK_TRANSFER">{copy.paymentMethodLabels.BANK_TRANSFER}</option>
+                  <option value="CARD">{copy.paymentMethodLabels.CARD}</option>
+                  <option value="PAYPAL">{copy.paymentMethodLabels.PAYPAL}</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="mb-1 block text-sm font-medium text-slate-700">{copy.paymentType}</label>
+                <select className="input-field" value={paymentType} onChange={(event) => setPaymentType(event.target.value as 'CHARGE' | 'DEPOSIT')} disabled={submittingPayment}>
+                  {paymentModalRow.depositAmount > 0 ? <option value="DEPOSIT">{copy.depositType}</option> : null}
+                  <option value="CHARGE">{copy.charge}</option>
+                </select>
+                <p className="mt-2 text-xs text-slate-500">{paymentType === 'DEPOSIT' ? copy.depositHelp : copy.chargeHelp}</p>
+              </div>
+
+              <div>
+                <label className="mb-1 block text-sm font-medium text-slate-700">{copy.paymentAmount}</label>
+                <input type="number" min="0" step="0.01" className="input-field" value={paymentAmount} onChange={(event) => setPaymentAmount(event.target.value)} disabled={submittingPayment} />
+              </div>
+            </div>
+
+            <div className="mt-6 flex items-center gap-3">
+              <button type="button" onClick={() => setPaymentModalRow(null)} disabled={submittingPayment} className="flex-1 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
+                {copy.cancel}
+              </button>
+              <button type="button" onClick={handleAcceptPayment} disabled={submittingPayment} className="btn-primary flex-1 justify-center disabled:cursor-not-allowed disabled:opacity-60">
+                {submittingPayment ? copy.savingPayment : copy.savePayment}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function MetricCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="card p-5">
+      <p className="text-sm font-medium text-slate-500">{label}</p>
+      <p className="mt-2 text-2xl font-bold text-slate-900">{value}</p>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/complaints/page.tsx b/dashboard/src/app/(dashboard)/complaints/page.tsx
new file mode 100644
index 0000000..8673bea
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/complaints/page.tsx
@@ -0,0 +1,567 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { AlertTriangle, Plus, ChevronDown, ChevronUp } from 'lucide-react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+// ─── i18n ─────────────────────────────────────────────────────────────────────
+
+const copy = {
+  en: {
+    heading: 'Complaints',
+    subtitle: 'Manage customer complaints and escalations',
+    newComplaint: 'New complaint',
+    filterStatus: 'Status',
+    filterSeverity: 'Severity',
+    allStatuses: 'All statuses',
+    allSeverities: 'All severities',
+    statusOpen: 'Open',
+    statusInvestigating: 'Investigating',
+    statusResolved: 'Resolved',
+    statusClosed: 'Closed',
+    sevL1: 'Level 1',
+    sevL2: 'Level 2',
+    sevL3: 'Level 3',
+    noComplaints: 'No complaints found',
+    category: 'Category',
+    subject: 'Subject',
+    reservation: 'Reservation',
+    date: 'Date',
+    status: 'Status',
+    severity: 'Severity',
+    details: 'Details',
+    description: 'Description',
+    notes: 'Notes',
+    resolution: 'Resolution',
+    updateStatus: 'Update status',
+    saving: 'Saving…',
+    save: 'Save',
+    cancel: 'Cancel',
+    createTitle: 'Create complaint',
+    fieldReservationId: 'Reservation ID (optional)',
+    fieldCategory: 'Category',
+    fieldSeverity: 'Severity',
+    fieldSubject: 'Subject',
+    fieldDescription: 'Description (optional)',
+    create: 'Create',
+    creating: 'Creating…',
+    errorLoad: 'Failed to load complaints',
+    errorCreate: 'Failed to create complaint',
+    errorUpdate: 'Failed to update complaint',
+    categories: {
+      BOOKING: 'Booking', PICKUP: 'Pickup', VEHICLE_CLEANLINESS: 'Vehicle Cleanliness',
+      VEHICLE_CONDITION: 'Vehicle Condition', STAFF_SERVICE: 'Staff Service', PRICING: 'Pricing',
+      DEPOSIT: 'Deposit', INSURANCE: 'Insurance', DAMAGE_CLAIM: 'Damage Claim',
+      RETURN_PROCESS: 'Return Process', COMMUNICATION: 'Communication',
+      ROADSIDE_ASSISTANCE: 'Roadside Assistance', BILLING: 'Billing', OTHER: 'Other',
+    } as Record<string, string>,
+  },
+  fr: {
+    heading: 'Plaintes',
+    subtitle: 'Gérez les plaintes et escalades clients',
+    newComplaint: 'Nouvelle plainte',
+    filterStatus: 'Statut',
+    filterSeverity: 'Sévérité',
+    allStatuses: 'Tous les statuts',
+    allSeverities: 'Toutes les sévérités',
+    statusOpen: 'Ouvert',
+    statusInvestigating: 'En cours',
+    statusResolved: 'Résolu',
+    statusClosed: 'Fermé',
+    sevL1: 'Niveau 1',
+    sevL2: 'Niveau 2',
+    sevL3: 'Niveau 3',
+    noComplaints: 'Aucune plainte trouvée',
+    category: 'Catégorie',
+    subject: 'Sujet',
+    reservation: 'Réservation',
+    date: 'Date',
+    status: 'Statut',
+    severity: 'Sévérité',
+    details: 'Détails',
+    description: 'Description',
+    notes: 'Notes',
+    resolution: 'Résolution',
+    updateStatus: 'Mettre à jour le statut',
+    saving: 'Enregistrement…',
+    save: 'Enregistrer',
+    cancel: 'Annuler',
+    createTitle: 'Créer une plainte',
+    fieldReservationId: 'ID de réservation (optionnel)',
+    fieldCategory: 'Catégorie',
+    fieldSeverity: 'Sévérité',
+    fieldSubject: 'Sujet',
+    fieldDescription: 'Description (optionnel)',
+    create: 'Créer',
+    creating: 'Création…',
+    errorLoad: 'Échec du chargement des plaintes',
+    errorCreate: 'Échec de la création de la plainte',
+    errorUpdate: 'Échec de la mise à jour de la plainte',
+    categories: {
+      BOOKING: 'Réservation', PICKUP: 'Prise en charge', VEHICLE_CLEANLINESS: 'Propreté du véhicule',
+      VEHICLE_CONDITION: 'État du véhicule', STAFF_SERVICE: 'Service du personnel', PRICING: 'Tarification',
+      DEPOSIT: 'Dépôt de garantie', INSURANCE: 'Assurance', DAMAGE_CLAIM: 'Réclamation dommages',
+      RETURN_PROCESS: 'Processus de retour', COMMUNICATION: 'Communication',
+      ROADSIDE_ASSISTANCE: 'Assistance routière', BILLING: 'Facturation', OTHER: 'Autre',
+    } as Record<string, string>,
+  },
+  ar: {
+    heading: 'الشكاوى',
+    subtitle: 'إدارة شكاوى العملاء والتصعيدات',
+    newComplaint: 'شكوى جديدة',
+    filterStatus: 'الحالة',
+    filterSeverity: 'الخطورة',
+    allStatuses: 'جميع الحالات',
+    allSeverities: 'جميع مستويات الخطورة',
+    statusOpen: 'مفتوح',
+    statusInvestigating: 'قيد التحقيق',
+    statusResolved: 'تم الحل',
+    statusClosed: 'مغلق',
+    sevL1: 'المستوى 1',
+    sevL2: 'المستوى 2',
+    sevL3: 'المستوى 3',
+    noComplaints: 'لا توجد شكاوى',
+    category: 'الفئة',
+    subject: 'الموضوع',
+    reservation: 'الحجز',
+    date: 'التاريخ',
+    status: 'الحالة',
+    severity: 'الخطورة',
+    details: 'التفاصيل',
+    description: 'الوصف',
+    notes: 'ملاحظات',
+    resolution: 'الحل',
+    updateStatus: 'تحديث الحالة',
+    saving: 'جار الحفظ…',
+    save: 'حفظ',
+    cancel: 'إلغاء',
+    createTitle: 'إنشاء شكوى',
+    fieldReservationId: 'رقم الحجز (اختياري)',
+    fieldCategory: 'الفئة',
+    fieldSeverity: 'الخطورة',
+    fieldSubject: 'الموضوع',
+    fieldDescription: 'الوصف (اختياري)',
+    create: 'إنشاء',
+    creating: 'جار الإنشاء…',
+    errorLoad: 'فشل تحميل الشكاوى',
+    errorCreate: 'فشل إنشاء الشكوى',
+    errorUpdate: 'فشل تحديث الشكوى',
+    categories: {
+      BOOKING: 'الحجز', PICKUP: 'الاستلام', VEHICLE_CLEANLINESS: 'نظافة المركبة',
+      VEHICLE_CONDITION: 'حالة المركبة', STAFF_SERVICE: 'خدمة الموظفين', PRICING: 'التسعير',
+      DEPOSIT: 'التأمين', INSURANCE: 'التأمين', DAMAGE_CLAIM: 'مطالبة الأضرار',
+      RETURN_PROCESS: 'عملية الإرجاع', COMMUNICATION: 'التواصل',
+      ROADSIDE_ASSISTANCE: 'المساعدة على الطريق', BILLING: 'الفواتير', OTHER: 'أخرى',
+    } as Record<string, string>,
+  },
+} as const
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+interface Complaint {
+  id: string
+  companyId: string
+  reservationId: string | null
+  reviewId: string | null
+  customerId: string | null
+  severity: string
+  status: string
+  category: string
+  subject: string
+  description: string | null
+  resolution: string | null
+  notes: string | null
+  assignedTo: string | null
+  resolvedAt: string | null
+  createdAt: string
+  reservation: { id: string; startDate: string; status: string; vehicle: { make: string; model: string; year: number } } | null
+  customer: { id: string; firstName: string; lastName: string; email: string } | null
+  review: { id: string; overallRating: number } | null
+}
+
+interface ComplaintsResponse {
+  data: Complaint[]
+  meta: { total: number; page: number; pageSize: number; totalPages: number }
+}
+
+const CATEGORIES = [
+  'BOOKING', 'PICKUP', 'VEHICLE_CLEANLINESS', 'VEHICLE_CONDITION', 'STAFF_SERVICE',
+  'PRICING', 'DEPOSIT', 'INSURANCE', 'DAMAGE_CLAIM', 'RETURN_PROCESS',
+  'COMMUNICATION', 'ROADSIDE_ASSISTANCE', 'BILLING', 'OTHER',
+]
+
+function severityBadgeClass(sev: string) {
+  if (sev === 'LEVEL_3') return 'badge-red'
+  if (sev === 'LEVEL_2') return 'badge-amber'
+  return 'badge-gray'
+}
+
+function statusBadgeClass(status: string) {
+  if (status === 'RESOLVED' || status === 'CLOSED') return 'badge-green'
+  if (status === 'INVESTIGATING') return 'badge-blue'
+  return 'badge-amber'
+}
+
+// ─── Main page ─────────────────────────────────────────────────────────────────
+
+export default function ComplaintsPage() {
+  const { language } = useDashboardI18n()
+  const t = copy[language as keyof typeof copy] ?? copy.en
+
+  const [complaints, setComplaints] = useState<Complaint[]>([])
+  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 20, totalPages: 1 })
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [filterStatus, setFilterStatus] = useState('')
+  const [filterSeverity, setFilterSeverity] = useState('')
+  const [page, setPage] = useState(1)
+
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [showCreate, setShowCreate] = useState(false)
+
+  // Create form state
+  const [formReservationId, setFormReservationId] = useState('')
+  const [formCategory, setFormCategory] = useState('')
+  const [formSeverity, setFormSeverity] = useState('LEVEL_1')
+  const [formSubject, setFormSubject] = useState('')
+  const [formDescription, setFormDescription] = useState('')
+  const [formCreating, setFormCreating] = useState(false)
+
+  // Edit state (for expanded complaint)
+  const [editStatus, setEditStatus] = useState<Record<string, string>>({})
+  const [editNotes, setEditNotes] = useState<Record<string, string>>({})
+  const [editResolution, setEditResolution] = useState<Record<string, string>>({})
+  const [savingId, setSavingId] = useState<string | null>(null)
+
+  async function loadData() {
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams({ page: String(page), pageSize: '20' })
+      if (filterStatus) params.set('status', filterStatus)
+      if (filterSeverity) params.set('severity', filterSeverity)
+      const data = await apiFetch<ComplaintsResponse>(`/complaints?${params}`)
+      setComplaints(data.data ?? [])
+      setMeta(data.meta ?? { total: 0, page: 1, pageSize: 20, totalPages: 1 })
+    } catch {
+      setError(t.errorLoad)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { loadData() }, [page, filterStatus, filterSeverity])
+
+  function toggleExpand(id: string, complaint: Complaint) {
+    if (expandedId === id) {
+      setExpandedId(null)
+    } else {
+      setExpandedId(id)
+      setEditStatus((prev) => ({ ...prev, [id]: complaint.status }))
+      setEditNotes((prev) => ({ ...prev, [id]: complaint.notes ?? '' }))
+      setEditResolution((prev) => ({ ...prev, [id]: complaint.resolution ?? '' }))
+    }
+  }
+
+  async function handleCreate() {
+    if (!formCategory || !formSubject.trim()) return
+    setFormCreating(true)
+    try {
+      await apiFetch('/complaints', {
+        method: 'POST',
+        body: JSON.stringify({
+          reservationId: formReservationId.trim() || undefined,
+          category: formCategory,
+          severity: formSeverity,
+          subject: formSubject.trim(),
+          description: formDescription.trim() || undefined,
+        }),
+      })
+      setShowCreate(false)
+      setFormReservationId('')
+      setFormCategory('')
+      setFormSeverity('LEVEL_1')
+      setFormSubject('')
+      setFormDescription('')
+      await loadData()
+    } catch {
+      alert(t.errorCreate)
+    } finally {
+      setFormCreating(false)
+    }
+  }
+
+  async function handleUpdate(id: string) {
+    setSavingId(id)
+    try {
+      await apiFetch(`/complaints/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          status: editStatus[id],
+          notes: editNotes[id] || undefined,
+          resolution: editResolution[id] || undefined,
+        }),
+      })
+      await loadData()
+    } catch {
+      alert(t.errorUpdate)
+    } finally {
+      setSavingId(null)
+    }
+  }
+
+  const isRtl = language === 'ar'
+
+  return (
+    <div className={`space-y-6 ${isRtl ? 'rtl' : 'ltr'}`}>
+      {/* Header */}
+      <div className="rdg-page-heading flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-blue-950 dark:text-white">{t.heading}</h1>
+          <p className="mt-1 text-sm text-stone-500 dark:text-slate-400">{t.subtitle}</p>
+        </div>
+        <button onClick={() => setShowCreate((v) => !v)} className="btn-primary">
+          <Plus className="h-4 w-4" />
+          {t.newComplaint}
+        </button>
+      </div>
+
+      {/* Create form */}
+      {showCreate && (
+        <div className="card p-6 space-y-4">
+          <h2 className="text-lg font-semibold text-blue-950 dark:text-white">{t.createTitle}</h2>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-stone-700 dark:text-slate-300">{t.fieldReservationId}</label>
+              <input
+                type="text"
+                value={formReservationId}
+                onChange={(e) => setFormReservationId(e.target.value)}
+                className="input-field"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-stone-700 dark:text-slate-300">{t.fieldCategory}</label>
+              <select
+                value={formCategory}
+                onChange={(e) => setFormCategory(e.target.value)}
+                className="input-field"
+              >
+                <option value="">— select —</option>
+                {CATEGORIES.map((c) => (
+                  <option key={c} value={c}>{t.categories[c] ?? c}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-stone-700 dark:text-slate-300">{t.fieldSeverity}</label>
+              <select value={formSeverity} onChange={(e) => setFormSeverity(e.target.value)} className="input-field">
+                <option value="LEVEL_1">{t.sevL1}</option>
+                <option value="LEVEL_2">{t.sevL2}</option>
+                <option value="LEVEL_3">{t.sevL3}</option>
+              </select>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-stone-700 dark:text-slate-300">{t.fieldSubject}</label>
+              <input
+                type="text"
+                value={formSubject}
+                onChange={(e) => setFormSubject(e.target.value)}
+                className="input-field"
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <label className="mb-1 block text-sm font-medium text-stone-700 dark:text-slate-300">{t.fieldDescription}</label>
+              <textarea
+                value={formDescription}
+                onChange={(e) => setFormDescription(e.target.value)}
+                rows={3}
+                className="input-field resize-none"
+              />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleCreate}
+              disabled={formCreating || !formCategory || !formSubject.trim()}
+              className="btn-primary"
+            >
+              {formCreating ? t.creating : t.create}
+            </button>
+            <button onClick={() => setShowCreate(false)} className="btn-secondary">{t.cancel}</button>
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="card p-4">
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-stone-700 dark:text-slate-300">{t.filterStatus}</label>
+            <select
+              value={filterStatus}
+              onChange={(e) => { setFilterStatus(e.target.value); setPage(1) }}
+              className="input-field w-auto"
+            >
+              <option value="">{t.allStatuses}</option>
+              <option value="OPEN">{t.statusOpen}</option>
+              <option value="INVESTIGATING">{t.statusInvestigating}</option>
+              <option value="RESOLVED">{t.statusResolved}</option>
+              <option value="CLOSED">{t.statusClosed}</option>
+            </select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-stone-700 dark:text-slate-300">{t.filterSeverity}</label>
+            <select
+              value={filterSeverity}
+              onChange={(e) => { setFilterSeverity(e.target.value); setPage(1) }}
+              className="input-field w-auto"
+            >
+              <option value="">{t.allSeverities}</option>
+              <option value="LEVEL_1">{t.sevL1}</option>
+              <option value="LEVEL_2">{t.sevL2}</option>
+              <option value="LEVEL_3">{t.sevL3}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* List */}
+      {loading ? (
+        <div className="card p-10 text-center text-stone-400 dark:text-slate-500">Loading…</div>
+      ) : error ? (
+        <div className="card p-10 text-center text-red-500">{error}</div>
+      ) : complaints.length === 0 ? (
+        <div className="card p-10 text-center text-stone-400 dark:text-slate-500">{t.noComplaints}</div>
+      ) : (
+        <div className="space-y-3">
+          {complaints.map((complaint) => {
+            const isExpanded = expandedId === complaint.id
+            const customerName = complaint.customer
+              ? `${complaint.customer.firstName} ${complaint.customer.lastName}`
+              : null
+
+            return (
+              <div key={complaint.id} className="card overflow-hidden">
+                <button
+                  onClick={() => toggleExpand(complaint.id, complaint)}
+                  className="flex w-full items-start justify-between p-5 text-left hover:bg-stone-50 dark:hover:bg-blue-950/30"
+                >
+                  <div className="flex flex-1 flex-wrap items-center gap-3">
+                    <span className={severityBadgeClass(complaint.severity)}>
+                      <AlertTriangle className="mr-1 h-3 w-3" />
+                      {complaint.severity === 'LEVEL_1' ? t.sevL1 : complaint.severity === 'LEVEL_2' ? t.sevL2 : t.sevL3}
+                    </span>
+                    <span className={statusBadgeClass(complaint.status)}>
+                      {complaint.status === 'OPEN' ? t.statusOpen
+                        : complaint.status === 'INVESTIGATING' ? t.statusInvestigating
+                        : complaint.status === 'RESOLVED' ? t.statusResolved
+                        : t.statusClosed}
+                    </span>
+                    <span className="badge-gray">{t.categories[complaint.category] ?? complaint.category}</span>
+                    <span className="font-medium text-blue-950 dark:text-white">{complaint.subject}</span>
+                    {customerName && <span className="text-sm text-stone-500 dark:text-slate-400">{customerName}</span>}
+                    {complaint.reservationId && (
+                      <span className="font-mono text-xs text-stone-400 dark:text-slate-500">
+                        {complaint.reservationId.slice(0, 8)}…
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center gap-3">
+                    <span className="text-xs text-stone-400 dark:text-slate-500">
+                      {new Date(complaint.createdAt).toLocaleDateString()}
+                    </span>
+                    {isExpanded ? <ChevronUp className="h-4 w-4 text-stone-400" /> : <ChevronDown className="h-4 w-4 text-stone-400" />}
+                  </div>
+                </button>
+
+                {/* Expanded detail */}
+                {isExpanded && (
+                  <div className="border-t border-stone-100 p-5 dark:border-blue-900/30 space-y-4">
+                    {complaint.description && (
+                      <div>
+                        <p className="mb-1 text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.description}</p>
+                        <p className="text-sm text-stone-700 dark:text-slate-300">{complaint.description}</p>
+                      </div>
+                    )}
+
+                    <div className="grid gap-4 sm:grid-cols-3">
+                      <div>
+                        <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.updateStatus}</label>
+                        <select
+                          value={editStatus[complaint.id] ?? complaint.status}
+                          onChange={(e) => setEditStatus((prev) => ({ ...prev, [complaint.id]: e.target.value }))}
+                          className="input-field"
+                        >
+                          <option value="OPEN">{t.statusOpen}</option>
+                          <option value="INVESTIGATING">{t.statusInvestigating}</option>
+                          <option value="RESOLVED">{t.statusResolved}</option>
+                          <option value="CLOSED">{t.statusClosed}</option>
+                        </select>
+                      </div>
+                      <div className="sm:col-span-2">
+                        <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.notes}</label>
+                        <textarea
+                          value={editNotes[complaint.id] ?? ''}
+                          onChange={(e) => setEditNotes((prev) => ({ ...prev, [complaint.id]: e.target.value }))}
+                          rows={2}
+                          className="input-field resize-none"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.resolution}</label>
+                      <textarea
+                        value={editResolution[complaint.id] ?? ''}
+                        onChange={(e) => setEditResolution((prev) => ({ ...prev, [complaint.id]: e.target.value }))}
+                        rows={2}
+                        className="input-field resize-none"
+                      />
+                    </div>
+
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleUpdate(complaint.id)}
+                        disabled={savingId === complaint.id}
+                        className="btn-primary text-sm"
+                      >
+                        {savingId === complaint.id ? t.saving : t.save}
+                      </button>
+                      <button onClick={() => setExpandedId(null)} className="btn-secondary text-sm">{t.cancel}</button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {meta.totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            className="btn-secondary text-sm"
+          >
+            ←
+          </button>
+          <span className="text-sm text-stone-600 dark:text-slate-400">
+            {page} / {meta.totalPages}
+          </span>
+          <button
+            onClick={() => setPage((p) => Math.min(meta.totalPages, p + 1))}
+            disabled={page >= meta.totalPages}
+            className="btn-secondary text-sm"
+          >
+            →
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/contracts/[id]/page.tsx b/dashboard/src/app/(dashboard)/contracts/[id]/page.tsx
new file mode 100644
index 0000000..113e035
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/contracts/[id]/page.tsx
@@ -0,0 +1,1144 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { formatCurrency, type SupportedCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import VehicleConditionSheet from '@/components/reservations/VehicleConditionSheet'
+
+type DamagePoint = {
+  id?: string
+  viewType?: 'TOP' | 'FRONT' | 'REAR' | 'LEFT' | 'RIGHT'
+  x: number
+  y: number
+  damageType: 'SCRATCH' | 'DENT' | 'CRACK' | 'CHIP' | 'MISSING' | 'STAIN' | 'OTHER'
+  severity: 'MINOR' | 'MODERATE' | 'MAJOR'
+  description?: string | null
+}
+
+type ContractPayload = {
+  reservationId: string
+  contractLocale: string
+  contractNumber: string | null
+  invoiceNumber: string | null
+  generatedAt: string
+  status: string
+  paymentStatus: string
+  paymentMode: string | null
+  notes: string | null
+  company: {
+    name: string
+    legalName: string
+    email: string | null
+    phone: string | null
+    address: string | Record<string, unknown> | null
+    city: string | null
+    country: string | null
+    registrationNumber: string | null
+    taxId: string | null
+    logoUrl: string | null
+  }
+  driver: {
+    firstName: string
+    lastName: string
+    email: string
+    phone: string | null
+    dateOfBirth: string | null
+    driverLicense: string | null
+    licenseCountry: string | null
+    licenseCategory: string | null
+    licenseIssuedAt: string | null
+    licenseExpiry: string | null
+    nationality: string | null
+  }
+  additionalDrivers: Array<{
+    id: string
+    firstName: string
+    lastName: string
+    email: string | null
+    phone: string | null
+    driverLicense: string
+    licenseIssuedAt: string | null
+    licenseExpiry: string | null
+    licenseCountry: string | null
+    dateOfBirth: string | null
+    totalCharge: number
+  }>
+  vehicle: {
+    make: string
+    model: string
+    year: number
+    color: string
+    licensePlate: string
+    vin: string | null
+    category: string
+  }
+  rentalPeriod: {
+    startDate: string
+    endDate: string
+    totalDays: number
+    pickupLocation: string | null
+    returnLocation: string | null
+  }
+  insurance: {
+    total: number
+    policies: Array<{
+      id: string
+      name: string
+      chargeType: string
+      unitPrice: number
+      totalCharge: number
+    }>
+  }
+  inspections: {
+    checkIn: {
+      mileage: number | null
+      fuelLevel: string
+      generalCondition: string | null
+      employeeNotes: string | null
+      damagePoints: DamagePoint[]
+    } | null
+    checkOut: {
+      mileage: number | null
+      fuelLevel: string
+      generalCondition: string | null
+      employeeNotes: string | null
+      damagePoints: DamagePoint[]
+    } | null
+  }
+  terms: {
+    terms: string | null
+    fuelPolicy: string | null
+    fuelPolicyType: string | null
+    depositPolicy: string | null
+    lateFeePolicy: string | null
+    damagePolicy: string | null
+    footerNote: string | null
+    signatureRequired: boolean
+  }
+  invoice: {
+    currency: SupportedCurrency
+    lineItems: Array<{
+      description: string
+      qty: number
+      unitPrice: number
+      total: number
+      category: string
+    }>
+    subtotal: number
+    taxes: Array<{ label: string; rate: number; amount: number }>
+    taxTotal: number
+    total: number
+    amountPaid: number
+    balanceDue: number
+    payments: Array<{
+      id: string
+      amount: number
+      currency: SupportedCurrency
+      type: string
+      status: string
+      provider: string
+      paymentMethod: string | null
+      paidAt: string | null
+      createdAt: string
+    }>
+  }
+}
+
+function formatAddress(address: string | Record<string, unknown> | null, city: string | null, country: string | null) {
+  const lines: string[] = []
+  if (typeof address === 'string' && address.trim()) lines.push(address.trim())
+  if (address && typeof address === 'object' && !Array.isArray(address)) {
+    for (const value of Object.values(address)) {
+      if (typeof value === 'string' && value.trim()) lines.push(value.trim())
+    }
+  }
+  if (city) lines.push(city)
+  if (country) lines.push(country)
+  return lines.join(', ')
+}
+
+function formatDateOnly(value: string | null | undefined, localeCode: string, fallback: string) {
+  return value
+    ? new Date(value).toLocaleDateString(localeCode, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      })
+    : fallback
+}
+
+function splitTerms(text: string | null | undefined) {
+  if (!text?.trim()) return []
+  return text
+    .split(/\n\s*\n|\n(?=\d+\.)/)
+    .map((item) => item.replace(/^\d+\.\s*/, '').trim())
+    .filter(Boolean)
+}
+
+type ConditionLanguage = 'en' | 'fr' | 'ar'
+
+type ConditionItem = {
+  title: string
+  body: string
+}
+
+const FIXED_CONDITIONS: Record<ConditionLanguage, ConditionItem[]> = {
+  en: [
+    {
+      title: 'Article 1: Vehicle maintenance and compliance',
+      body: 'The Lessor declares that the vehicle is regularly maintained, insured, registered, and compliant with applicable road safety standards.\n\nThe Lessee acknowledges having received the vehicle in apparent working order, subject to observations noted in the departure inspection report.\n\nIn the event of a mechanical anomaly, warning light, abnormal noise, puncture, breakdown, or incident likely to affect safety, the Lessee must stop using the vehicle as soon as safety conditions permit and immediately notify the Lessor.',
+    },
+    {
+      title: 'Article 2: Insurance — exclusions',
+      body: 'The Lessee acknowledges being informed of the applicable guarantees, exclusions, and deductibles.\n\nExcluded from coverage unless otherwise stipulated by the insurer:\n- driving by an unauthorized person;\n- driving without a valid license;\n- driving under the influence of alcohol, narcotics, or prohibited substances;\n- use off authorized roads;\n- participation in races or competitions;\n- gross negligence;\n- false declaration;\n- failure to report an accident within the required timeframe;\n- theft with keys left in the vehicle;\n- unlawful transport of persons or goods.',
+    },
+    {
+      title: 'Article 3: Mileage',
+      body: 'The authorized mileage is specified in the contract. Any excess kilometer will be charged at the contractual rate.\n\nMileage is determined based on the vehicle odometer, as recorded in the departure and return inspection reports.',
+    },
+    {
+      title: 'Article 4: Use of the vehicle',
+      body: 'The Lessee undertakes to use the vehicle with care, in accordance with its normal purpose and Moroccan legislation.\n\nThe following are prohibited:\n- subletting the vehicle;\n- transporting dangerous or unlawful goods;\n- using the vehicle for illegal activities;\n- participating in competitions or sporting events;\n- towing another vehicle without written authorization;\n- traveling outside Moroccan territory without written authorization from the Lessor;\n- modifying the vehicle or its equipment;\n- smoking in the vehicle if prohibited by the agency;\n- carrying more passengers than authorized.\n\nThe Lessee is responsible for all road traffic violations committed during the rental period.',
+    },
+    {
+      title: 'Article 5: Return of the vehicle',
+      body: 'The Lessee must return the vehicle on the date, at the time, and at the location specified in the contract, in the condition in which it was delivered, subject to normal wear.\n\nThe vehicle must be returned with: the same fuel level as at departure, the vehicle documents, the keys, all accessories and equipment provided, normal cleanliness, and no new undeclared damage.\n\nIn case of late return, the Lessor may charge additional fees as specified in the contract. No refund will be made in the event of early return.',
+    },
+    {
+      title: 'Article 6: Departure and return inspection',
+      body: 'The Parties carry out an inspection at departure and at return, which may include dated photographs of the vehicle, odometer, fuel level, bodywork, interior, tires, windows, and equipment.\n\nAny damage found at return and not mentioned in the departure inspection report may be charged to the Lessee, subject to applicable insurance guarantees.',
+    },
+    {
+      title: 'Article 7: Accident, breakdown, theft, or incident',
+      body: 'In the event of an accident, breakdown, theft, fire, or any other incident, the Lessee must immediately:\n- inform the Lessor by phone and in writing;\n- notify the competent authorities if necessary;\n- complete an amicable accident report;\n- obtain an official document in the event of theft, injury, or major damage;\n- not abandon the vehicle without the Lessor\'s authorization;\n- not admit liability without prior agreement of the Lessor or insurer.\n\nThe Lessee must transmit all relevant documents to the Lessor within 48 hours of the incident.\n\nFailure to follow this procedure may result in the Lessee being held financially responsible if the insurer refuses coverage.',
+    },
+    {
+      title: 'Article 8: Liability of the Lessee',
+      body: 'The Lessee is responsible for:\n- damage caused to the vehicle during the rental period;\n- damage caused to third parties within the limits provided by law and insurance;\n- fines, traffic violations, impoundment fees, tolls, and administrative charges;\n- costs related to improper use of the vehicle;\n- loss of keys, documents, or accessories;\n- damage not covered by insurance;\n- the deductible provided in the insurance policy.\n\nThe Lessee remains responsible until the vehicle is effectively returned to the Lessor and the return inspection report is signed.',
+    },
+    {
+      title: 'Article 9: Violations, fines, and administrative fees',
+      body: 'All violations committed during the rental period are the responsibility of the Lessee.\n\nThe Lessor may communicate the Lessee\'s identity to the competent authorities and charge the Lessee for: fine amounts, file processing fees, impoundment fees, notification fees, and any cost related to the administrative processing of the violation.',
+    },
+    {
+      title: 'Article 10: Cancellation and termination',
+      body: 'The Lessor may immediately terminate the contract without compensation for the Lessee in the event of: false declaration, invalid license, non-payment, prohibited use of the vehicle, dangerous driving, serious breach of this contract, or reasonable suspicion of fraud or unlawful use.\n\nIn such case, the Lessee must immediately return the vehicle.',
+    },
+    {
+      title: 'Article 11: Personal data',
+      body: 'The Lessee authorizes the Lessor to collect and retain data necessary for the performance of this contract, including identity, contact details, driving license, payment information, vehicle documents, inspection reports, and incident-related data.\n\nThis data is used for contract performance, billing, claims management, violation management, and legal obligations. The Lessor undertakes to protect this data and retain it only for the duration required by applicable law.',
+    },
+    {
+      title: 'Article 12: Applicable law and jurisdiction',
+      body: 'This contract is governed by Moroccan law.\n\nIn the event of a dispute, the Parties shall endeavor to find an amicable solution. Failing agreement, the dispute shall be brought before the competent court in the jurisdiction where the agency is registered.',
+    },
+  ],
+  fr: [
+    {
+      title: 'Article 1 : Entretien et conformité du véhicule',
+      body: 'Le Loueur déclare que le véhicule est régulièrement entretenu, assuré, immatriculé et conforme aux normes de sécurité routière applicables.\n\nLe Locataire reconnaît avoir reçu un véhicule en état apparent de fonctionnement, sous réserve des observations mentionnées dans l\'état des lieux de départ.\n\nEn cas d\'anomalie mécanique, voyant d\'alerte, bruit anormal, crevaison, panne ou incident susceptible d\'affecter la sécurité, le Locataire doit cesser l\'utilisation du véhicule dès que les conditions de sécurité le permettent et informer immédiatement le Loueur.',
+    },
+    {
+      title: 'Article 2 : Assurance — exclusions',
+      body: 'Le Locataire reconnaît avoir été informé des garanties, exclusions et franchises applicables.\n\nSont notamment exclus de la couverture, sauf stipulation contraire de l\'assureur :\n- conduite par une personne non autorisée ;\n- conduite sans permis valide ;\n- conduite sous l\'emprise d\'alcool, stupéfiants ou substances interdites ;\n- usage du véhicule hors des voies autorisées ;\n- participation à des courses, essais ou compétitions ;\n- négligence grave ;\n- fausse déclaration ;\n- absence de déclaration d\'accident dans les délais ;\n- vol avec clés laissées dans le véhicule ;\n- transport illicite de personnes ou de marchandises.',
+    },
+    {
+      title: 'Article 3 : Kilométrage',
+      body: 'Le kilométrage autorisé est précisé dans le contrat. Tout kilomètre supplémentaire sera facturé au tarif contractuel.\n\nLe kilométrage fait foi sur la base du compteur du véhicule, constaté dans l\'état des lieux de départ et de retour.',
+    },
+    {
+      title: 'Article 4 : Utilisation du véhicule',
+      body: 'Le Locataire s\'engage à utiliser le véhicule avec prudence, conformément à sa destination normale et à la législation marocaine.\n\nIl est interdit notamment :\n- de sous-louer le véhicule ;\n- de transporter des marchandises dangereuses ou illicites ;\n- d\'utiliser le véhicule pour des activités illégales ;\n- de participer à des compétitions ou essais sportifs ;\n- de tracter un autre véhicule sans autorisation écrite ;\n- de circuler hors du territoire marocain sans autorisation écrite du Loueur ;\n- de modifier le véhicule ou ses équipements ;\n- de fumer dans le véhicule si l\'agence l\'interdit ;\n- de transporter un nombre de passagers supérieur à celui autorisé.\n\nLe Locataire est responsable des infractions au Code de la route commises pendant la période de location.',
+    },
+    {
+      title: 'Article 5 : Restitution du véhicule',
+      body: 'Le Locataire doit restituer le véhicule à la date, à l\'heure et au lieu prévus au contrat, dans l\'état où il lui a été remis, sous réserve de l\'usure normale.\n\nLe véhicule doit être restitué avec : le même niveau de carburant qu\'au départ, les papiers du véhicule, les clés, les accessoires et équipements remis, un état de propreté normal, et aucun dommage nouveau non déclaré.\n\nEn cas de retard, le Loueur pourra facturer des frais supplémentaires selon le contrat. En cas de retour anticipé, aucun remboursement ne sera effectué.',
+    },
+    {
+      title: 'Article 6 : État des lieux',
+      body: 'Les Parties établissent un état des lieux au départ et au retour, pouvant être accompagné de photographies datées du véhicule, du compteur, du carburant, de la carrosserie, de l\'intérieur, des pneus, des vitres et des équipements.\n\nTout dommage constaté au retour et non mentionné dans l\'état des lieux de départ pourra être facturé au Locataire, sous réserve des garanties d\'assurance applicables.',
+    },
+    {
+      title: 'Article 7 : Accident, panne, vol ou sinistre',
+      body: 'En cas d\'accident, panne, vol, tentative de vol, incendie ou tout autre sinistre, le Locataire doit immédiatement :\n- informer le Loueur par téléphone et par écrit ;\n- prévenir les autorités compétentes si nécessaire ;\n- établir un constat amiable en cas d\'accident ;\n- obtenir un document officiel en cas de vol, blessure ou dommage important ;\n- ne pas abandonner le véhicule sans autorisation du Loueur ;\n- ne pas reconnaître de responsabilité sans accord préalable du Loueur ou de l\'assureur.\n\nLe Locataire doit transmettre au Loueur tous les documents utiles dans un délai de 48 heures à compter du sinistre.\n\nEn cas de non-respect de cette procédure, le Locataire pourra être tenu responsable des conséquences financières, notamment si l\'assureur refuse sa garantie.',
+    },
+    {
+      title: 'Article 8 : Responsabilité du Locataire',
+      body: 'Le Locataire est responsable :\n- des dommages causés au véhicule pendant la période de location ;\n- des dommages causés aux tiers dans les limites prévues par la loi et l\'assurance ;\n- des amendes, contraventions, frais de fourrière, péages et frais administratifs ;\n- des frais liés à une mauvaise utilisation du véhicule ;\n- des pertes de clés, documents ou accessoires ;\n- des dommages non couverts par l\'assurance ;\n- de la franchise prévue au contrat d\'assurance.\n\nLe Locataire reste responsable jusqu\'à la restitution effective du véhicule au Loueur et la signature de l\'état des lieux de retour.',
+    },
+    {
+      title: 'Article 9 : Infractions, amendes et frais administratifs',
+      body: 'Toutes les infractions commises pendant la durée de location sont à la charge du Locataire.\n\nLe Loueur pourra communiquer l\'identité du Locataire aux autorités compétentes et facturer au Locataire : le montant des amendes, les frais de dossier, les frais de fourrière, les frais de notification et tout coût lié au traitement administratif de l\'infraction.',
+    },
+    {
+      title: 'Article 10 : Annulation et résiliation',
+      body: 'Le Loueur peut résilier immédiatement le contrat, sans indemnité pour le Locataire, en cas de : fausse déclaration, permis invalide, défaut de paiement, utilisation interdite du véhicule, conduite dangereuse, non-respect grave du présent contrat, ou suspicion légitime de fraude ou d\'usage illicite.\n\nDans ce cas, le Locataire doit restituer immédiatement le véhicule.',
+    },
+    {
+      title: 'Article 11 : Données personnelles',
+      body: 'Le Locataire autorise le Loueur à collecter et conserver les données nécessaires à l\'exécution du présent contrat, notamment son identité, ses coordonnées, son permis de conduire, les informations de paiement, les documents liés au véhicule, les états des lieux et les données relatives aux éventuels incidents.\n\nCes données sont utilisées pour l\'exécution du contrat, la facturation, la gestion des sinistres, la gestion des infractions et les obligations légales. Le Loueur s\'engage à protéger ces données et à les conserver uniquement pendant la durée nécessaire aux finalités prévues.',
+    },
+    {
+      title: 'Article 12 : Loi applicable et juridiction compétente',
+      body: 'Le présent contrat est soumis au droit marocain.\n\nEn cas de litige relatif à sa validité, son interprétation, son exécution ou sa résiliation, les Parties s\'efforceront de trouver une solution amiable. À défaut d\'accord amiable, le litige sera porté devant le tribunal compétent du ressort du siège de l\'agence.',
+    },
+  ],
+  ar: [
+    {
+      title: 'البند 1 : صيانة المركبة ومطابقتها للمعايير',
+      body: 'يُعلن المؤجر بأن المركبة تخضع للصيانة الدورية وهي مؤمنة ومسجلة ومطابقة لمعايير السلامة المرورية المعمول بها.\n\nيُقر المستأجر باستلام المركبة في حالة ظاهرة جيدة مع مراعاة الملاحظات المدونة في محضر المعاينة عند التسليم.\n\nفي حالة حدوث عطل ميكانيكي أو إضاءة مؤشر تحذير أو صوت غير معتاد أو ثقب في الإطار أو أي حادث يؤثر على السلامة، يجب على المستأجر إيقاف المركبة فور توفر شروط السلامة وإبلاغ المؤجر على الفور.',
+    },
+    {
+      title: 'البند 2 : التأمين — الاستثناءات',
+      body: 'يُقر المستأجر بأنه أُحيط علماً بالضمانات والاستثناءات والتحمل المالي المعمول بها.\n\nيُستثنى من نطاق التغطية التأمينية، ما لم يُنص خلافاً على ذلك:\n- القيادة من قبل شخص غير مرخص؛\n- القيادة دون رخصة سارية؛\n- القيادة تحت تأثير الكحول أو المخدرات أو المواد الممنوعة؛\n- استخدام المركبة خارج الطرق المرخصة؛\n- المشاركة في السباقات أو المنافسات؛\n- الإهمال الجسيم؛\n- الإدلاء بتصريحات كاذبة؛\n- الإخلال بالتبليغ عن الحادث في الآجال المحددة؛\n- السرقة مع ترك المفاتيح داخل المركبة؛\n- النقل غير المشروع للأشخاص أو البضائع.',
+    },
+    {
+      title: 'البند 3 : الكيلومترات',
+      body: 'المسافة المسموح بها محددة في العقد، وكل كيلومتر زائد يُفوتر وفق الأسعار التعاقدية.\n\nيُعتمد عداد المركبة مرجعاً للمسافة المقطوعة وفقاً لما يُدون في محضري المعاينة عند التسليم والإرجاع.',
+    },
+    {
+      title: 'البند 4 : استخدام المركبة',
+      body: 'يلتزم المستأجر باستخدام المركبة باحتراز وفق الغرض المحدد لها والتشريع المغربي المعمول به.\n\nيُحظر على وجه الخصوص:\n- التنازل عن حق الإيجار للغير؛\n- نقل البضائع الخطرة أو غير المشروعة؛\n- استخدام المركبة في أنشطة غير قانونية؛\n- المشاركة في المسابقات أو الأنشطة الرياضية؛\n- جر مركبة أخرى دون إذن كتابي؛\n- التنقل خارج التراب المغربي دون إذن كتابي من المؤجر؛\n- تعديل المركبة أو معداتها؛\n- التدخين إذا كان محظوراً في الوكالة؛\n- نقل عدد ركاب يتجاوز الطاقة الاستيعابية.\n\nالمستأجر مسؤول عن جميع مخالفات قانون المرور المرتكبة خلال مدة التأجير.',
+    },
+    {
+      title: 'البند 5 : إرجاع المركبة',
+      body: 'يلتزم المستأجر بإعادة المركبة في التاريخ والساعة والمكان المحددين في العقد بالحالة التي تسلمها عليها مع مراعاة الاستهلاك العادي.\n\nيجب إعادة المركبة مع: مستوى الوقود ذاته عند التسليم، ووثائق المركبة، والمفاتيح، وجميع الملحقات والمعدات، ونظافة معتادة، وبدون أي أضرار جديدة غير مُعلنة.\n\nفي حالة التأخر، يحق للمؤجر احتساب رسوم إضافية وفق العقد. لا يحق للمستأجر المطالبة بأي استرداد في حالة الإرجاع المبكر.',
+    },
+    {
+      title: 'البند 6 : معاينة المركبة',
+      body: 'يُجري الطرفان معاينة للمركبة عند التسليم وعند الإرجاع، يمكن أن تشمل صوراً مؤرخة للمركبة وعداد المسافة ومستوى الوقود والهيكل والداخل والإطارات والزجاج والمعدات.\n\nيحق للمؤجر تحميل المستأجر تكاليف أي ضرر يُكشف عنه عند الإرجاع ولم يُشر إليه في محضر المعاينة عند التسليم، مع مراعاة ضمانات التأمين السارية.',
+    },
+    {
+      title: 'البند 7 : الحوادث والأعطال والسرقة',
+      body: 'في حالة وقوع حادث أو عطل أو سرقة أو محاولة سرقة أو حريق أو أي حادث آخر، يجب على المستأجر فوراً:\n- إبلاغ المؤجر هاتفياً وكتابياً؛\n- إخطار السلطات المختصة إذا اقتضى الأمر؛\n- تحرير محضر حادث ودي عند الاقتضاء؛\n- الحصول على وثيقة رسمية في حالات السرقة أو الإصابة أو الأضرار الجسيمة؛\n- عدم التخلي عن المركبة دون موافقة المؤجر؛\n- عدم الاعتراف بأي مسؤولية دون موافقة مسبقة من المؤجر أو شركة التأمين.\n\nيجب إرسال جميع الوثائق اللازمة إلى المؤجر في أجل أقصاه 48 ساعة. قد يُحمّل المستأجر المسؤولية المالية عند عدم الامتثال لهذا الإجراء خاصة إذا رفضت شركة التأمين تقديم ضمانها.',
+    },
+    {
+      title: 'البند 8 : مسؤولية المستأجر',
+      body: 'يتحمل المستأجر المسؤولية عن:\n- الأضرار التي تلحق بالمركبة أثناء مدة التأجير؛\n- الأضرار التي تلحق بالغير في حدود ما تنص عليه القوانين والتأمين؛\n- الغرامات والمخالفات ورسوم الحجز وأتاوات الطريق والرسوم الإدارية؛\n- التكاليف المترتبة على الاستخدام الخاطئ للمركبة؛\n- فقدان المفاتيح أو الوثائق أو الملحقات؛\n- الأضرار غير المشمولة بالتأمين؛\n- مبلغ التحمل المنصوص عليه في عقد التأمين.\n\nتبقى مسؤولية المستأجر قائمة حتى يتم إرجاع المركبة فعلياً إلى المؤجر والتوقيع على محضر المعاينة عند الإرجاع.',
+    },
+    {
+      title: 'البند 9 : المخالفات والغرامات والرسوم الإدارية',
+      body: 'تقع على عاتق المستأجر جميع المخالفات المرتكبة خلال مدة التأجير.\n\nيحق للمؤجر الإفصاح عن هوية المستأجر للسلطات المختصة وإصدار فاتورة له بما يشمل: مبالغ الغرامات، ورسوم الملف، ورسوم الحجز، ورسوم الإشعار، وأي تكاليف إدارية أخرى ذات صلة.',
+    },
+    {
+      title: 'البند 10 : الفسخ والإنهاء',
+      body: 'يحق للمؤجر إنهاء العقد فوراً دون أي تعويض للمستأجر في حالات: الإدلاء بتصريح كاذب، أو انتهاء صلاحية الرخصة، أو عدم السداد، أو الاستخدام المحظور للمركبة، أو القيادة المتهورة، أو الإخلال الجسيم بأحكام هذا العقد، أو الاشتباه المنطقي في الاحتيال أو الاستخدام غير المشروع.\n\nفي هذه الحالة، يلتزم المستأجر بإعادة المركبة فوراً.',
+    },
+    {
+      title: 'البند 11 : البيانات الشخصية',
+      body: 'يأذن المستأجر للمؤجر بجمع البيانات اللازمة لتنفيذ هذا العقد والاحتفاظ بها، بما في ذلك بياناته الشخصية ومعلومات الاتصال ورخصة القيادة ومعلومات الدفع ووثائق المركبة ومحاضر المعاينة والبيانات المتعلقة بأي حوادث.\n\nتُستخدم هذه البيانات في تنفيذ العقد والفوترة وإدارة الحوادث ومعالجة المخالفات والوفاء بالالتزامات القانونية. يتعهد المؤجر بحماية هذه البيانات والاحتفاظ بها فقط طوال المدة اللازمة للأغراض المحددة.',
+    },
+    {
+      title: 'البند 12 : القانون الواجب التطبيق والاختصاص القضائي',
+      body: 'يخضع هذا العقد للقانون المغربي.\n\nفي حالة نشوء نزاع يتعلق بصحته أو تفسيره أو تنفيذه أو إنهائه، يسعى الطرفان إلى التوصل إلى حل ودي. وفي حالة عدم التوصل إلى اتفاق ودي، يُحال النزاع إلى المحكمة المختصة في دائرة مقر الوكالة.',
+    },
+  ],
+}
+
+
+function normalizeContractLocale(value: string | null | undefined, fallback: ConditionLanguage): 'en' | 'en-ar' | 'fr' | 'fr-ar' | 'ar' {
+  const normalized = String(value ?? '').trim().toLowerCase()
+  if (normalized === 'en' || normalized === 'en-ar' || normalized === 'fr' || normalized === 'fr-ar' || normalized === 'ar') {
+    return normalized
+  }
+  return fallback
+}
+
+function getConditionLanguages(mode: 'en' | 'en-ar' | 'fr' | 'fr-ar' | 'ar'): ConditionLanguage[] {
+  if (mode === 'en' || mode === 'en-ar') return ['en', 'ar']
+  if (mode === 'fr' || mode === 'fr-ar') return ['fr', 'ar']
+  return ['ar']
+}
+
+function getConditionLanguageLabel(language: ConditionLanguage) {
+  if (language === 'fr') return 'Français'
+  if (language === 'ar') return 'العربية'
+  return 'English'
+}
+
+function getAdditionalConditionTitle(language: ConditionLanguage, index: number) {
+  if (language === 'fr') return `Clause supplémentaire ${index + 1}`
+  if (language === 'ar') return `بند إضافي ${index + 1}`
+  return `Additional clause ${index + 1}`
+}
+
+function splitConditionItems(items: ConditionItem[]) {
+  const midpoint = Math.ceil(items.length / 2)
+  return [items.slice(0, midpoint), items.slice(midpoint)]
+}
+
+function PaperField({
+  label,
+  value,
+  className = '',
+}: {
+  label: string
+  value: string
+  className?: string
+}) {
+  return (
+    <div className={`border border-stone-400/80 ${className}`}>
+      <div className="border-b border-stone-300 bg-stone-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-stone-600">
+        {label}
+      </div>
+      <div className="min-h-[38px] bg-[#fff5ea] px-2 py-2 text-sm text-stone-900">
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function PaperSection({
+  title,
+  children,
+  className = '',
+}: {
+  title: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={`border border-stone-500 ${className}`}>
+      <div className="border-b border-stone-500 bg-stone-100 px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.12em] text-stone-700">
+        {title}
+      </div>
+      <div>{children}</div>
+    </section>
+  )
+}
+
+export default function ContractDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const { language } = useDashboardI18n()
+  const [contract, setContract] = useState<ContractPayload | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const copyByLanguage = {
+    en: {
+      back: 'Back to contracts',
+      booking: 'Booking',
+      print: 'Print',
+      generated: 'Generated',
+      status: 'Status',
+      paymentStatus: 'Payment status',
+      paymentMode: 'Payment mode',
+      company: 'Rental company',
+      driver: 'Primary driver',
+      additionalDrivers: 'Additional drivers',
+      vehicle: 'Vehicle',
+      period: 'Rental period',
+      pickup: 'Pickup',
+      dropoff: 'Return',
+      start: 'Start',
+      end: 'End',
+      contractTerms: 'Contract terms',
+      insurance: 'Insurance',
+      inspections: 'Vehicle condition and damage',
+      noDamage: 'No damage markers recorded at check-in.',
+      invoice: 'Invoice',
+      subtotal: 'Subtotal',
+      paid: 'Paid',
+      balance: 'Balance due',
+      payments: 'Payments',
+      notes: 'Booking notes',
+      footer: 'Footer note',
+      none: 'Not provided',
+      contractNo: 'Contract #',
+      invoiceNo: 'Invoice #',
+      fuel: 'Fuel policy',
+      deposit: 'Deposit policy',
+      lateFees: 'Late fee policy',
+      damage: 'Damage policy',
+      termsLabel: 'Terms',
+      signature: 'Signature required',
+      customerDamage: 'Check-in inspection',
+      mileage: 'Mileage',
+      fuelLevel: 'Fuel level',
+      unitPrice: 'Unit price',
+      qty: 'Qty',
+      total: 'Total',
+      actionOpenBooking: 'Open booking',
+      noAdditionalDrivers: 'No additional drivers.',
+      noInsurance: 'No insurance selected.',
+      noPayments: 'No payments recorded.',
+      loading: 'Loading contract…',
+      yes: 'Yes',
+      no: 'No',
+      agreementTitle: 'Rental Agreement',
+      agreementForReservation: 'For reservation',
+      draftAgreement: 'Draft agreement',
+      customerInformation: 'Customer information',
+      rentalPeriodDetails: 'Rental period and driver details',
+      insuranceCondition: 'Insurance and vehicle condition',
+      acknowledgementSignature: 'Driver acknowledgement and signature',
+      vehicleInformation: 'Rental vehicle information',
+      chargesAndFees: 'Fees and charges',
+      damageDiagram: 'Vehicle damage diagram',
+      customerName: 'Customer name',
+      homeAddress: 'Home address',
+      cityCountry: 'City / Country',
+      telephone: 'Telephone',
+      emailLabel: 'E-mail',
+      driverLicenseNumber: "Driver's license no.",
+      nationalityLabel: 'Nationality',
+      birthDate: 'Birth date',
+      issuedExpires: 'Issued / Expires',
+      dateOut: 'Date out',
+      dateDueIn: 'Date due in',
+      mileageOut: 'Mileage out',
+      mileageIn: 'Mileage in',
+      pickupLocationLabel: 'Pickup location',
+      returnLocationLabel: 'Return location',
+      insuranceSelections: 'Insurance selections',
+      checkInCondition: 'Check-in condition',
+      signatureAcknowledgement:
+        'The renter confirms that the vehicle was received in acceptable condition, agrees to return it according to the rental policies, and accepts responsibility for authorized charges, violations, late fees, fuel adjustments, and damage assessment tied to this reservation.',
+      customerSignature: 'Customer signature',
+      companyRepresentative: 'Company representative',
+      yearMakeModel: 'Year / Make / Model',
+      licensePlateLabel: 'License plate',
+      vehicleColor: 'Vehicle color',
+      categoryLabel: 'Category',
+      vinLabel: 'VIN',
+      dailyRate: 'Daily rate',
+      rentalDays: 'Rental days',
+      insuranceTotal: 'Insurance total',
+      additionalDriverFees: 'Additional driver fees',
+      amountPaidLabel: 'Amount paid',
+      balanceDueLabel: 'Balance due',
+      lastPayment: 'Last payment',
+      roadsideAssistance: 'For after-hours roadside assistance or towing call:',
+      taxesLabel: 'Taxes',
+      totalChargeLabel: 'Total charge',
+      damageMarkersRecorded: (count: number) => `${count} damage marker(s) recorded at check-in.`,
+      termsAndConditions: 'Rental Agreement Terms and Conditions',
+      checkInMileageFuel: 'Check-in mileage / fuel',
+      checkOutMileageFuel: 'Check-out mileage / fuel',
+      damageEntries: 'Damage entries',
+      notesAndFooter: 'Notes and footer',
+      paymentsRecorded: (count: number) => `${count} payment(s) recorded.`,
+      clauseHeadings: [
+        'Vehicle and reservation',
+        'Authorized use',
+        'Fuel and return condition',
+        'Damage liability',
+        'Deposit and security hold',
+        'Late return and extra charges',
+        'Payment authorization',
+        'General provisions',
+      ],
+      fallbackClauses: {
+        vehicleReservation: (vehicle: string) => `The renter accepts responsibility for the ${vehicle} during the rental period and agrees to return it in the same general condition, ordinary wear excepted.`,
+        authorizedUse: 'Only the primary driver and approved additional drivers may operate the vehicle. The renter is responsible for any fines, tolls, traffic violations, or unauthorized use during the reservation.',
+        fuel: 'The vehicle must be returned with the agreed fuel level. Any shortage may result in refueling charges.',
+        damage: 'Any loss or damage, including damage caused by negligence or misuse, may be charged to the renter according to company policy and applicable law.',
+        deposit: 'A security deposit may be held to secure unpaid balances, penalties, damage, or post-rental adjustments until the reservation is reconciled.',
+        lateFees: 'Late return, excess mileage, cleaning, or administrative fees may be applied based on the reservation terms and final inspection.',
+        paymentAuthorization: (company: string) => `The renter authorizes ${company} to process charges related to this reservation, including rental charges, taxes, optional coverages, additional drivers, and approved post-rental adjustments.`,
+        general: "This agreement remains subject to the company's full rental policies, final inspection, and applicable local regulations.",
+      },
+      contractStatusLabels: { DRAFT: 'Draft', PENDING: 'Pending', ACTIVE: 'Active', COMPLETED: 'Completed', CANCELLED: 'Cancelled' },
+      paymentStatusLabels: { UNPAID: 'Unpaid', PAID: 'Paid', PARTIAL: 'Partial', REFUNDED: 'Refunded', OVERDUE: 'Overdue', PENDING: 'Pending', COMPLETED: 'Completed', FAILED: 'Failed' },
+      chargeTypeLabels: { PER_DAY: 'Per day', FLAT: 'Flat fee', FLAT_RATE: 'Flat fee', PER_RENTAL: 'Per rental' },
+      damageTypeLabels: { SCRATCH: 'Scratch', DENT: 'Dent', CRACK: 'Crack', CHIP: 'Chip', MISSING: 'Missing', STAIN: 'Stain', OTHER: 'Other' },
+      severityLabels: { MINOR: 'Minor', MODERATE: 'Moderate', MAJOR: 'Major' },
+      fuelLevelLabels: { FULL: 'Full', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Empty' },
+      paymentProviderLabels: { CASH: 'Cash', STRIPE: 'Stripe', BANK_TRANSFER: 'Bank transfer', CHECK: 'Check', PAYPAL: 'PayPal', CREDIT_CARD: 'Credit card', DEBIT_CARD: 'Debit card' },
+    },
+    fr: {
+      back: 'Retour aux contrats',
+      booking: 'Réservation',
+      print: 'Imprimer',
+      generated: 'Généré',
+      status: 'Statut',
+      paymentStatus: 'Statut du paiement',
+      paymentMode: 'Mode de paiement',
+      company: 'Société de location',
+      driver: 'Conducteur principal',
+      additionalDrivers: 'Conducteurs supplémentaires',
+      vehicle: 'Véhicule',
+      period: 'Période de location',
+      pickup: 'Départ',
+      dropoff: 'Retour',
+      start: 'Début',
+      end: 'Fin',
+      contractTerms: 'Clauses du contrat',
+      insurance: 'Assurance',
+      inspections: 'État du véhicule et dommages',
+      noDamage: 'Aucun dommage enregistré au départ.',
+      invoice: 'Facture',
+      subtotal: 'Sous-total',
+      paid: 'Payé',
+      balance: 'Solde dû',
+      payments: 'Paiements',
+      notes: 'Notes de réservation',
+      footer: 'Note de bas de page',
+      none: 'Non renseigné',
+      contractNo: 'Contrat #',
+      invoiceNo: 'Facture #',
+      fuel: 'Politique carburant',
+      deposit: 'Politique de dépôt',
+      lateFees: 'Politique de retard',
+      damage: 'Politique dommages',
+      termsLabel: 'Conditions',
+      signature: 'Signature requise',
+      customerDamage: 'Inspection de départ',
+      mileage: 'Kilométrage',
+      fuelLevel: 'Niveau de carburant',
+      unitPrice: 'Prix unitaire',
+      qty: 'Qté',
+      total: 'Total',
+      actionOpenBooking: 'Ouvrir la réservation',
+      noAdditionalDrivers: 'Aucun conducteur supplémentaire.',
+      noInsurance: 'Aucune assurance sélectionnée.',
+      noPayments: 'Aucun paiement enregistré.',
+      loading: 'Chargement du contrat…',
+      yes: 'Oui',
+      no: 'Non',
+      agreementTitle: 'Contrat de location',
+      agreementForReservation: 'Pour la réservation',
+      draftAgreement: 'Brouillon de contrat',
+      customerInformation: 'Informations client',
+      rentalPeriodDetails: 'Période de location et conducteur',
+      insuranceCondition: 'Assurance et état du véhicule',
+      acknowledgementSignature: 'Reconnaissance et signature',
+      vehicleInformation: 'Informations véhicule',
+      chargesAndFees: 'Frais et charges',
+      damageDiagram: 'Schéma des dommages du véhicule',
+      customerName: 'Nom du client',
+      homeAddress: 'Adresse',
+      cityCountry: 'Ville / Pays',
+      telephone: 'Téléphone',
+      emailLabel: 'E-mail',
+      driverLicenseNumber: 'N° de permis',
+      nationalityLabel: 'Nationalité',
+      birthDate: 'Date de naissance',
+      issuedExpires: 'Délivré / Expire',
+      dateOut: 'Date de sortie',
+      dateDueIn: 'Date de retour prévue',
+      mileageOut: 'Kilométrage sortie',
+      mileageIn: 'Kilométrage retour',
+      pickupLocationLabel: 'Lieu de départ',
+      returnLocationLabel: 'Lieu de retour',
+      insuranceSelections: 'Assurances sélectionnées',
+      checkInCondition: 'État au départ',
+      signatureAcknowledgement:
+        "Le locataire confirme avoir reçu le véhicule dans un état acceptable, s'engage à le restituer selon les politiques de location et accepte la responsabilité des frais autorisés, infractions, pénalités de retard, ajustements carburant et constats de dommages liés à cette réservation.",
+      customerSignature: 'Signature du client',
+      companyRepresentative: 'Représentant de la société',
+      yearMakeModel: 'Année / Marque / Modèle',
+      licensePlateLabel: "Plaque d'immatriculation",
+      vehicleColor: 'Couleur du véhicule',
+      categoryLabel: 'Catégorie',
+      vinLabel: 'VIN',
+      dailyRate: 'Tarif journalier',
+      rentalDays: 'Jours de location',
+      insuranceTotal: 'Total assurance',
+      additionalDriverFees: 'Frais conducteur supplémentaire',
+      amountPaidLabel: 'Montant payé',
+      balanceDueLabel: 'Solde dû',
+      lastPayment: 'Dernier paiement',
+      roadsideAssistance: 'Pour une assistance routière ou un remorquage hors horaires, appelez :',
+      taxesLabel: 'Taxes',
+      totalChargeLabel: 'Montant total',
+      damageMarkersRecorded: (count: number) => `${count} repère(s) de dommage enregistré(s) au départ.`,
+      termsAndConditions: 'Conditions générales du contrat de location',
+      checkInMileageFuel: 'Kilométrage / carburant départ',
+      checkOutMileageFuel: 'Kilométrage / carburant retour',
+      damageEntries: 'Dommages enregistrés',
+      notesAndFooter: 'Notes et pied de page',
+      paymentsRecorded: (count: number) => `${count} paiement(s) enregistré(s).`,
+      clauseHeadings: [
+        'Véhicule et réservation',
+        'Usage autorisé',
+        'Carburant et restitution',
+        'Responsabilité dommages',
+        'Dépôt de garantie',
+        'Retard et frais supplémentaires',
+        'Autorisation de paiement',
+        'Dispositions générales',
+      ],
+      fallbackClauses: {
+        vehicleReservation: (vehicle: string) => `Le locataire accepte la responsabilité du ${vehicle} pendant la période de location et s'engage à le restituer dans le même état général, hors usure normale.`,
+        authorizedUse: 'Seuls le conducteur principal et les conducteurs supplémentaires approuvés peuvent utiliser le véhicule. Le locataire reste responsable des amendes, péages, infractions routières ou usages non autorisés durant la réservation.',
+        fuel: 'Le véhicule doit être restitué avec le niveau de carburant convenu. Toute insuffisance peut entraîner des frais de ravitaillement.',
+        damage: 'Toute perte ou tout dommage, y compris causé par négligence ou mauvaise utilisation, peut être facturé au locataire selon la politique de la société et la réglementation applicable.',
+        deposit: "Un dépôt de garantie peut être retenu pour couvrir les soldes impayés, pénalités, dommages ou ajustements post-location jusqu'à la clôture complète de la réservation.",
+        lateFees: "Des frais de retard, kilométrage excédentaire, nettoyage ou gestion peuvent être appliqués selon les conditions de réservation et l'inspection finale.",
+        paymentAuthorization: (company: string) => `Le locataire autorise ${company} à traiter les frais liés à cette réservation, y compris location, taxes, garanties optionnelles, conducteurs supplémentaires et ajustements post-location approuvés.`,
+        general: "Le présent accord reste soumis aux politiques complètes de la société, à l'inspection finale et à la réglementation locale applicable.",
+      },
+      contractStatusLabels: { DRAFT: 'Brouillon', PENDING: 'En attente', ACTIVE: 'Actif', COMPLETED: 'Terminé', CANCELLED: 'Annulé' },
+      paymentStatusLabels: { UNPAID: 'Non payé', PAID: 'Payé', PARTIAL: 'Partiel', REFUNDED: 'Remboursé', OVERDUE: 'En retard', PENDING: 'En attente', COMPLETED: 'Complété', FAILED: 'Échoué' },
+      chargeTypeLabels: { PER_DAY: 'Par jour', FLAT: 'Forfait', FLAT_RATE: 'Forfait', PER_RENTAL: 'Par location' },
+      damageTypeLabels: { SCRATCH: 'Rayure', DENT: 'Bosse', CRACK: 'Fissure', CHIP: 'Éclat', MISSING: 'Manquant', STAIN: 'Tache', OTHER: 'Autre' },
+      severityLabels: { MINOR: 'Léger', MODERATE: 'Modéré', MAJOR: 'Majeur' },
+      fuelLevelLabels: { FULL: 'Plein', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Vide' },
+      paymentProviderLabels: { CASH: 'Espèces', STRIPE: 'Stripe', BANK_TRANSFER: 'Virement bancaire', CHECK: 'Chèque', PAYPAL: 'PayPal', CREDIT_CARD: 'Carte de crédit', DEBIT_CARD: 'Carte de débit' },
+    },
+    ar: {
+      back: 'العودة إلى العقود',
+      booking: 'الحجز',
+      print: 'طباعة',
+      generated: 'تم الإنشاء',
+      status: 'الحالة',
+      paymentStatus: 'حالة الدفع',
+      paymentMode: 'طريقة الدفع',
+      company: 'شركة التأجير',
+      driver: 'السائق الرئيسي',
+      additionalDrivers: 'السائقون الإضافيون',
+      vehicle: 'المركبة',
+      period: 'مدة الإيجار',
+      pickup: 'الاستلام',
+      dropoff: 'التسليم',
+      start: 'البداية',
+      end: 'النهاية',
+      contractTerms: 'شروط العقد',
+      insurance: 'التأمين',
+      inspections: 'حالة المركبة والأضرار',
+      noDamage: 'لا توجد أضرار مسجلة عند الاستلام.',
+      invoice: 'الفاتورة',
+      subtotal: 'الإجمالي الفرعي',
+      paid: 'المدفوع',
+      balance: 'الرصيد المستحق',
+      payments: 'المدفوعات',
+      notes: 'ملاحظات الحجز',
+      footer: 'ملاحظة التذييل',
+      none: 'غير متوفر',
+      contractNo: 'رقم العقد',
+      invoiceNo: 'رقم الفاتورة',
+      fuel: 'سياسة الوقود',
+      deposit: 'سياسة العربون',
+      lateFees: 'سياسة التأخير',
+      damage: 'سياسة الأضرار',
+      termsLabel: 'الشروط',
+      signature: 'التوقيع مطلوب',
+      customerDamage: 'فحص الاستلام',
+      mileage: 'عداد المسافة',
+      fuelLevel: 'مستوى الوقود',
+      unitPrice: 'سعر الوحدة',
+      qty: 'الكمية',
+      total: 'الإجمالي',
+      actionOpenBooking: 'فتح الحجز',
+      noAdditionalDrivers: 'لا يوجد سائقون إضافيون.',
+      noInsurance: 'لم يتم اختيار تأمين.',
+      noPayments: 'لا توجد مدفوعات مسجلة.',
+      loading: 'جارٍ تحميل العقد…',
+      yes: 'نعم',
+      no: 'لا',
+      agreementTitle: 'عقد تأجير',
+      agreementForReservation: 'للحجز',
+      draftAgreement: 'مسودة العقد',
+      customerInformation: 'معلومات العميل',
+      rentalPeriodDetails: 'مدة التأجير وبيانات السائق',
+      insuranceCondition: 'التأمين وحالة المركبة',
+      acknowledgementSignature: 'إقرار السائق والتوقيع',
+      vehicleInformation: 'معلومات مركبة التأجير',
+      chargesAndFees: 'الرسوم والتكاليف',
+      damageDiagram: 'مخطط أضرار المركبة',
+      customerName: 'اسم العميل',
+      homeAddress: 'العنوان',
+      cityCountry: 'المدينة / الدولة',
+      telephone: 'الهاتف',
+      emailLabel: 'البريد الإلكتروني',
+      driverLicenseNumber: 'رقم رخصة القيادة',
+      nationalityLabel: 'الجنسية',
+      birthDate: 'تاريخ الميلاد',
+      issuedExpires: 'الإصدار / الانتهاء',
+      dateOut: 'تاريخ الخروج',
+      dateDueIn: 'تاريخ الإرجاع',
+      mileageOut: 'عداد الخروج',
+      mileageIn: 'عداد الإرجاع',
+      pickupLocationLabel: 'مكان الاستلام',
+      returnLocationLabel: 'مكان التسليم',
+      insuranceSelections: 'خيارات التأمين',
+      checkInCondition: 'الحالة عند الاستلام',
+      signatureAcknowledgement:
+        'يقر المستأجر بأنه استلم المركبة بحالة مقبولة، ويلتزم بإعادتها وفق سياسات التأجير، ويقبل المسؤولية عن الرسوم المعتمدة والمخالفات ورسوم التأخير وتسويات الوقود وتقييمات الأضرار المرتبطة بهذا الحجز.',
+      customerSignature: 'توقيع العميل',
+      companyRepresentative: 'ممثل الشركة',
+      yearMakeModel: 'السنة / الصانع / الطراز',
+      licensePlateLabel: 'لوحة المركبة',
+      vehicleColor: 'لون المركبة',
+      categoryLabel: 'الفئة',
+      vinLabel: 'رقم الهيكل',
+      dailyRate: 'السعر اليومي',
+      rentalDays: 'أيام التأجير',
+      insuranceTotal: 'إجمالي التأمين',
+      additionalDriverFees: 'رسوم السائق الإضافي',
+      amountPaidLabel: 'المبلغ المدفوع',
+      balanceDueLabel: 'الرصيد المستحق',
+      lastPayment: 'آخر دفعة',
+      roadsideAssistance: 'للمساعدة على الطريق أو السحب خارج ساعات العمل اتصل بـ:',
+      taxesLabel: 'الضرائب',
+      totalChargeLabel: 'إجمالي الرسوم',
+      damageMarkersRecorded: (count: number) => `تم تسجيل ${count} علامة/علامات ضرر عند الاستلام.`,
+      termsAndConditions: 'الشروط والأحكام لعقد التأجير',
+      checkInMileageFuel: 'عداد / وقود الاستلام',
+      checkOutMileageFuel: 'عداد / وقود الإرجاع',
+      damageEntries: 'الأضرار المسجلة',
+      notesAndFooter: 'الملاحظات والتذييل',
+      paymentsRecorded: (count: number) => `تم تسجيل ${count} دفعة/دفعات.`,
+      clauseHeadings: [
+        'المركبة والحجز',
+        'الاستخدام المصرح',
+        'الوقود وحالة الإرجاع',
+        'مسؤولية الأضرار',
+        'وديعة الضمان',
+        'التأخير والرسوم الإضافية',
+        'تفويض الدفع',
+        'أحكام عامة',
+      ],
+      fallbackClauses: {
+        vehicleReservation: (vehicle: string) => `يقبل المستأجر المسؤولية عن ${vehicle} طوال مدة التأجير، ويتعهد بإعادته بنفس الحالة العامة باستثناء الاستهلاك العادي.`,
+        authorizedUse: 'يُسمح فقط للسائق الرئيسي والسائقين الإضافيين المعتمدين بقيادة المركبة. ويتحمل المستأجر مسؤولية أي غرامات أو رسوم طرق أو مخالفات مرورية أو استخدام غير مصرح به أثناء الحجز.',
+        fuel: 'يجب إعادة المركبة بمستوى الوقود المتفق عليه. وأي نقص قد يترتب عليه رسوم تعبئة.',
+        damage: 'أي فقدان أو ضرر، بما في ذلك الناتج عن الإهمال أو سوء الاستخدام، قد يتم تحميله على المستأجر وفق سياسة الشركة والأنظمة المعمول بها.',
+        deposit: 'قد يتم حجز وديعة ضمان لتغطية الأرصدة غير المسددة أو الغرامات أو الأضرار أو التسويات اللاحقة إلى حين إقفال الحجز بشكل نهائي.',
+        lateFees: 'قد تُفرض رسوم التأخير أو الكيلومترات الزائدة أو التنظيف أو الرسوم الإدارية وفق شروط الحجز والفحص النهائي.',
+        paymentAuthorization: (company: string) => `يفوض المستأجر ${company} بتحصيل الرسوم المتعلقة بهذا الحجز، بما في ذلك قيمة التأجير والضرائب والتغطيات الاختيارية والسائقين الإضافيين والتسويات المعتمدة بعد الإرجاع.`,
+        general: 'يبقى هذا الاتفاق خاضعًا لسياسات الشركة الكاملة والفحص النهائي والأنظمة المحلية المعمول بها.',
+      },
+      contractStatusLabels: { DRAFT: 'مسودة', PENDING: 'قيد الانتظار', ACTIVE: 'نشط', COMPLETED: 'مكتمل', CANCELLED: 'ملغى' },
+      paymentStatusLabels: { UNPAID: 'غير مدفوع', PAID: 'مدفوع', PARTIAL: 'جزئي', REFUNDED: 'مسترد', OVERDUE: 'متأخر', PENDING: 'قيد الانتظار', COMPLETED: 'مكتمل', FAILED: 'فشل' },
+      chargeTypeLabels: { PER_DAY: 'يومي', FLAT: 'مقطوع', FLAT_RATE: 'مقطوع', PER_RENTAL: 'لكل إيجار' },
+      damageTypeLabels: { SCRATCH: 'خدش', DENT: 'انبعاج', CRACK: 'تشقق', CHIP: 'تقشر', MISSING: 'مفقود', STAIN: 'بقعة', OTHER: 'أخرى' },
+      severityLabels: { MINOR: 'طفيف', MODERATE: 'متوسط', MAJOR: 'شديد' },
+      fuelLevelLabels: { FULL: 'ممتلئ', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'فارغ' },
+      paymentProviderLabels: { CASH: 'نقداً', STRIPE: 'Stripe', BANK_TRANSFER: 'تحويل بنكي', CHECK: 'شيك', PAYPAL: 'PayPal', CREDIT_CARD: 'بطاقة ائتمان', DEBIT_CARD: 'بطاقة خصم' },
+    },
+  } as const
+
+  useEffect(() => {
+    apiFetch<ContractPayload>(`/reservations/${id}/contract`)
+      .then((data) => {
+        setContract(data)
+        setError(null)
+      })
+      .catch((err) => setError(err.message ?? 'Failed to load contract'))
+  }, [id])
+
+  const contractUiLanguage: ConditionLanguage = language
+  const copy = copyByLanguage[contractUiLanguage]
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const formatDateTime = (value: string | null | undefined) =>
+    value
+      ? new Date(value).toLocaleString(localeCode, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })
+      : copy.none
+
+  const address = useMemo(() => (
+    contract ? formatAddress(contract.company.address, contract.company.city, contract.company.country) : ''
+  ), [contract])
+
+  if (error) return <div className="card p-6 text-sm text-red-600">{error}</div>
+  if (!contract) return <div className="card p-6 text-sm text-slate-500">{copy.loading}</div>
+
+  const tl = (map: Record<string, string>, key: string) => map[key] ?? key
+
+  const damagePoints = contract.inspections.checkIn?.damagePoints ?? []
+  const customClauses = splitTerms(contract.terms.terms)
+  const contractLocaleMode = normalizeContractLocale(language, language)
+  const conditionLanguages = getConditionLanguages(contractLocaleMode)
+  const conditionColumns = conditionLanguages
+    .map((conditionLanguage) => ({
+      language: conditionLanguage,
+      heading: getConditionLanguageLabel(conditionLanguage),
+      clauses: [
+        ...FIXED_CONDITIONS[conditionLanguage],
+        ...customClauses.map((clause, index) => ({
+          title: getAdditionalConditionTitle(conditionLanguage, index),
+          body: clause,
+        })),
+      ],
+    }))
+    .sort((a, b) => (a.language === 'ar' ? 1 : 0) - (b.language === 'ar' ? 1 : 0))
+  const singleLanguageClauseColumns = conditionColumns.length === 1
+    ? splitConditionItems(conditionColumns[0].clauses)
+    : []
+  const isBilingual = conditionColumns.length === 2
+  const arCopy = copyByLanguage.ar
+  const bl = (primary: string, ar: string) => isBilingual ? `${primary} / ${ar}` : primary
+
+  const roadsidePhone = contract.company.phone ?? copy.none
+  const latestPayment = contract.invoice.payments.at(-1)
+  const driverFullName = `${contract.driver.firstName} ${contract.driver.lastName}`
+  const additionalDriverNames = contract.additionalDrivers.length > 0
+    ? contract.additionalDrivers.map((driver) => `${driver.firstName} ${driver.lastName}`).join(', ')
+    : copy.noAdditionalDrivers
+
+  return (
+    <div className="space-y-6 print:space-y-0">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between print:hidden">
+        <div className="space-y-2">
+          <Link href="/contracts" className="text-sm font-semibold text-blue-700 hover:underline">{copy.back}</Link>
+          <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{contract.company.name}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <h2 className="text-xl font-semibold text-slate-900">{contract.contractNumber ?? copy.contractNo}</h2>
+            <span className="badge-blue">{tl(copy.contractStatusLabels, contract.status)}</span>
+            <span className="badge-gray">{tl(copy.paymentStatusLabels, contract.paymentStatus)}</span>
+          </div>
+          <p className="text-sm text-slate-500">
+            {copy.invoiceNo}: {contract.invoiceNumber ?? '—'} · {copy.generated}: {formatDateTime(contract.generatedAt)}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3 print:hidden">
+          <Link href={`/reservations/${contract.reservationId}`} className="btn-secondary">
+            {copy.actionOpenBooking}
+          </Link>
+          <button type="button" className="btn-primary" onClick={() => window.print()}>
+            {copy.print}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-8 print:space-y-0">
+        <section className="mx-auto max-w-[1060px] overflow-hidden rounded-[28px] border-4 border-stone-900 bg-white text-stone-900 shadow-2xl print:max-w-none print:shadow-none print:break-after-page">
+          <div className="border-b border-stone-500 px-6 py-5">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center">
+              {contract.company.logoUrl && (
+                <div className="flex shrink-0 items-center justify-center">
+                  <img
+                    src={contract.company.logoUrl}
+                    alt={contract.company.name}
+                    className="h-24 w-24 object-contain"
+                  />
+                </div>
+              )}
+              <div className="flex-1 text-center md:text-left">
+                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-stone-500">
+                  {contract.company.name}
+                </p>
+                <h1 className="mt-2 text-3xl font-black tracking-tight">
+                  {contract.company.name} {bl(copy.agreementTitle, arCopy.agreementTitle)}
+                </h1>
+                <p className="mt-1 text-sm font-medium text-stone-600">
+                  {bl(copy.agreementForReservation, arCopy.agreementForReservation)} {contract.contractNumber ?? contract.reservationId.slice(-8).toUpperCase()}
+                </p>
+              </div>
+              <div className="grid min-w-[220px] grid-cols-2 gap-px self-stretch overflow-hidden rounded-2xl border border-stone-400 bg-stone-300 text-sm">
+                <div className="bg-white px-3 py-2">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.status, arCopy.status)}</p>
+                  <p className="mt-1 font-semibold">{tl(copy.contractStatusLabels, contract.status)}</p>
+                </div>
+                <div className="bg-white px-3 py-2">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.paymentStatus, arCopy.paymentStatus)}</p>
+                  <p className="mt-1 font-semibold">{tl(copy.paymentStatusLabels, contract.paymentStatus)}</p>
+                </div>
+                <div className="bg-white px-3 py-2">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.contractNo, arCopy.contractNo)}</p>
+                  <p className="mt-1 font-semibold">{contract.contractNumber ?? '—'}</p>
+                </div>
+                <div className="bg-white px-3 py-2">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.generated, arCopy.generated)}</p>
+                  <p className="mt-1 font-semibold">{formatDateTime(contract.generatedAt)}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-5 p-6 lg:grid-cols-[1.6fr_1fr] print:grid-cols-[1.6fr_1fr]">
+            <div className="space-y-5">
+              <PaperSection title={bl(copy.customerInformation, arCopy.customerInformation)}>
+                <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
+                  <PaperField label={bl(copy.customerName, arCopy.customerName)} value={driverFullName} className="bg-white sm:col-span-2" />
+                  <PaperField label={bl(copy.homeAddress, arCopy.homeAddress)} value={address || copy.none} className="bg-white sm:col-span-2" />
+                  <PaperField label={bl(copy.cityCountry, arCopy.cityCountry)} value={[contract.company.city, contract.company.country].filter(Boolean).join(', ') || copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.telephone, arCopy.telephone)} value={contract.driver.phone ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.emailLabel, arCopy.emailLabel)} value={contract.driver.email} className="bg-white sm:col-span-2" />
+                  <PaperField label={bl(copy.driverLicenseNumber, arCopy.driverLicenseNumber)} value={contract.driver.driverLicense ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.nationalityLabel, arCopy.nationalityLabel)} value={contract.driver.nationality ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.birthDate, arCopy.birthDate)} value={formatDateOnly(contract.driver.dateOfBirth, localeCode, copy.none)} className="bg-white" />
+                  <PaperField label={bl(copy.issuedExpires, arCopy.issuedExpires)} value={`${formatDateOnly(contract.driver.licenseIssuedAt, localeCode, copy.none)} — ${formatDateOnly(contract.driver.licenseExpiry, localeCode, copy.none)}`} className="bg-white" />
+                </div>
+              </PaperSection>
+
+              <PaperSection title={bl(copy.rentalPeriodDetails, arCopy.rentalPeriodDetails)}>
+                <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
+                  <PaperField label={bl(copy.dateOut, arCopy.dateOut)} value={formatDateTime(contract.rentalPeriod.startDate)} className="bg-white" />
+                  <PaperField label={bl(copy.dateDueIn, arCopy.dateDueIn)} value={formatDateTime(contract.rentalPeriod.endDate)} className="bg-white" />
+                  <PaperField label={bl(copy.mileageOut, arCopy.mileageOut)} value={String(contract.inspections.checkIn?.mileage ?? copy.none)} className="bg-white" />
+                  <PaperField label={bl(copy.mileageIn, arCopy.mileageIn)} value={String(contract.inspections.checkOut?.mileage ?? copy.none)} className="bg-white" />
+                  <PaperField label={bl(copy.pickupLocationLabel, arCopy.pickupLocationLabel)} value={contract.rentalPeriod.pickupLocation ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.returnLocationLabel, arCopy.returnLocationLabel)} value={contract.rentalPeriod.returnLocation ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.additionalDrivers, arCopy.additionalDrivers)} value={additionalDriverNames} className="bg-white sm:col-span-2" />
+                </div>
+              </PaperSection>
+
+              <PaperSection title={bl(copy.insuranceCondition, arCopy.insuranceCondition)}>
+                <div className="grid gap-px bg-stone-300">
+                  <PaperField
+                    label={bl(copy.insuranceSelections, arCopy.insuranceSelections)}
+                    value={contract.insurance.policies.length > 0 ? contract.insurance.policies.map((policy) => `${policy.name} (${tl(copy.chargeTypeLabels, policy.chargeType)})`).join(', ') : copy.noInsurance}
+                    className="bg-white"
+                  />
+                  <PaperField label={bl(copy.fuel, arCopy.fuel)} value={contract.terms.fuelPolicy ?? copy.none} className="bg-white" />
+                  <PaperField label={bl(copy.damage, arCopy.damage)} value={contract.terms.damagePolicy ?? copy.none} className="bg-white" />
+                  <PaperField
+                    label={bl(copy.checkInCondition, arCopy.checkInCondition)}
+                    value={contract.inspections.checkIn?.generalCondition ?? contract.inspections.checkIn?.employeeNotes ?? copy.none}
+                    className="bg-white"
+                  />
+                </div>
+              </PaperSection>
+
+              <PaperSection title={bl(copy.acknowledgementSignature, arCopy.acknowledgementSignature)}>
+                <div className="space-y-4 bg-white p-4 text-sm leading-6 text-stone-700">
+                  <p>{copy.signatureAcknowledgement}</p>
+                  {isBilingual && (
+                    <p className="text-right" dir="rtl">{arCopy.signatureAcknowledgement}</p>
+                  )}
+                  <p>
+                    {bl(copy.signature, arCopy.signature)}: <span className="font-semibold text-stone-900">{contract.terms.signatureRequired ? copy.yes : copy.no}</span>
+                  </p>
+                  <div className="grid gap-4 pt-4 sm:grid-cols-2">
+                    <div className="border-t border-dashed border-stone-500 pt-2 text-sm font-medium text-stone-800">
+                      {bl(copy.customerSignature, arCopy.customerSignature)}
+                    </div>
+                    <div className="border-t border-dashed border-stone-500 pt-2 text-sm font-medium text-stone-800">
+                      {bl(copy.companyRepresentative, arCopy.companyRepresentative)}
+                    </div>
+                  </div>
+                </div>
+              </PaperSection>
+            </div>
+
+            <div className="space-y-5">
+              <PaperSection title={bl(copy.vehicleInformation, arCopy.vehicleInformation)}>
+                <div className="grid gap-px bg-stone-300">
+                  <PaperField label={bl(copy.yearMakeModel, arCopy.yearMakeModel)} value={`${contract.vehicle.year} ${contract.vehicle.make} ${contract.vehicle.model}`} className="bg-white" />
+                  <PaperField label={bl(copy.licensePlateLabel, arCopy.licensePlateLabel)} value={contract.vehicle.licensePlate} className="bg-white" />
+                  <PaperField label={bl(copy.vehicleColor, arCopy.vehicleColor)} value={contract.vehicle.color} className="bg-white" />
+                  <PaperField label={bl(copy.categoryLabel, arCopy.categoryLabel)} value={contract.vehicle.category} className="bg-white" />
+                  <PaperField label={bl(copy.vinLabel, arCopy.vinLabel)} value={contract.vehicle.vin ?? copy.none} className="bg-white" />
+                  <div className="border border-stone-400/80 bg-white px-4 py-5">
+                    <p className="mb-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.damageDiagram, arCopy.damageDiagram)}</p>
+                    <div className="flex justify-center py-2">
+                      <VehicleConditionSheet points={damagePoints} className="w-full max-w-[360px] rounded-2xl border border-slate-200 bg-white p-3" />
+                    </div>
+                    <p className="mt-4 text-xs text-stone-600">
+                      {damagePoints.length > 0 ? copy.damageMarkersRecorded(damagePoints.length) : copy.noDamage}
+                    </p>
+                  </div>
+                </div>
+              </PaperSection>
+
+              <PaperSection title={bl(copy.invoice, arCopy.invoice)}>
+                <div className="space-y-3 bg-white p-4 text-sm text-stone-700">
+                  <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
+                    <PaperField label={bl(copy.invoiceNo, arCopy.invoiceNo)} value={contract.invoiceNumber ?? copy.draftAgreement} className="bg-white" />
+                    <PaperField label={bl(copy.contractNo, arCopy.contractNo)} value={contract.contractNumber ?? copy.draftAgreement} className="bg-white" />
+                    <PaperField label={bl(copy.customerName, arCopy.customerName)} value={driverFullName} className="bg-white" />
+                    <PaperField label={bl(copy.telephone, arCopy.telephone)} value={contract.driver.phone ?? copy.none} className="bg-white" />
+                    <PaperField label={bl(copy.emailLabel, arCopy.emailLabel)} value={contract.driver.email} className="bg-white sm:col-span-2" />
+                  </div>
+                  <div>
+                    <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.chargesAndFees, arCopy.chargesAndFees)}</p>
+                  </div>
+                  {contract.invoice.lineItems.map((item, index) => (
+                    <div key={`${item.description}-${index}`} className="flex items-start justify-between gap-3 border-b border-stone-200 pb-2 last:border-b-0">
+                      <div>
+                        <p className="font-medium text-stone-900">{item.description}</p>
+                        <p className="text-xs text-stone-500">{copy.qty} {item.qty} · {formatCurrency(item.unitPrice, contract.invoice.currency)}</p>
+                      </div>
+                      <p className="font-semibold text-stone-900">{formatCurrency(item.total, contract.invoice.currency)}</p>
+                    </div>
+                  ))}
+                  <div className="space-y-2 rounded-xl border border-stone-300 bg-stone-50 p-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <span>{bl(copy.subtotal, arCopy.subtotal)}</span>
+                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.subtotal, contract.invoice.currency)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span>{bl(copy.taxesLabel, arCopy.taxesLabel)}</span>
+                      <span className="font-semibold text-stone-900">
+                        {contract.invoice.taxes.length > 0
+                          ? formatCurrency(contract.invoice.taxTotal, contract.invoice.currency)
+                          : copy.none}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3 border-t border-stone-200 pt-2">
+                      <span className="font-semibold text-stone-900">{bl(copy.totalChargeLabel, arCopy.totalChargeLabel)}</span>
+                      <span className="font-bold text-stone-900">{formatCurrency(contract.invoice.total, contract.invoice.currency)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span>{bl(copy.amountPaidLabel, arCopy.amountPaidLabel)}</span>
+                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.amountPaid, contract.invoice.currency)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span>{bl(copy.balanceDueLabel, arCopy.balanceDueLabel)}</span>
+                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.balanceDue, contract.invoice.currency)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span>{bl(copy.paymentMode, arCopy.paymentMode)}</span>
+                      <span className="font-semibold text-stone-900">{contract.paymentMode ?? latestPayment?.paymentMethod ?? copy.none}</span>
+                    </div>
+                  </div>
+                  {latestPayment ? (
+                    <div className="rounded-xl border border-stone-300 bg-stone-50 px-3 py-2 text-xs text-stone-600">
+                      {bl(copy.lastPayment, arCopy.lastPayment)}: {tl(copy.paymentProviderLabels, latestPayment.provider)} · {tl(copy.paymentStatusLabels, latestPayment.status)} · {formatDateTime(latestPayment.paidAt ?? latestPayment.createdAt)}
+                    </div>
+                  ) : null}
+                </div>
+              </PaperSection>
+            </div>
+          </div>
+
+          <div className="border-t border-stone-500 px-6 py-4 text-center text-sm text-stone-700">
+            {bl(copy.roadsideAssistance, arCopy.roadsideAssistance)} <span className="font-semibold text-stone-900">{roadsidePhone}</span>
+          </div>
+        </section>
+
+        <section className="mx-auto max-w-[1060px] rounded-[28px] border-4 border-stone-900 bg-white px-8 py-7 text-stone-900 shadow-2xl print:max-w-none print:shadow-none">
+          <div className="border-b border-stone-400 pb-4 text-center">
+            <h2 className="text-2xl font-black tracking-tight">{bl(copy.termsAndConditions, arCopy.termsAndConditions)}</h2>
+            <p className="mt-1 text-sm text-stone-600">
+              {contract.company.name} · {contract.contractNumber ?? copy.draftAgreement}
+            </p>
+          </div>
+
+          {conditionColumns.length === 2 ? (
+            <div dir="ltr" className="mt-6 grid grid-cols-2 divide-x divide-stone-400 print:grid-cols-2">
+              {conditionColumns.map((column) => (
+                <div key={column.language} dir={column.language === 'ar' ? 'rtl' : 'ltr'} className="space-y-5 px-6">
+                  <div className="border-b border-stone-300 pb-2">
+                    <p className="text-lg font-bold text-stone-900">{column.heading}</p>
+                  </div>
+                  {column.clauses.map((clause, index) => (
+                    <div key={`${column.language}-${index}-${clause.title}`} className="text-sm leading-6 text-stone-700">
+                      <p className="font-bold text-stone-900">{clause.title}</p>
+                      <p className="mt-2 whitespace-pre-wrap">{clause.body}</p>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="mt-6 grid grid-cols-2 divide-x divide-stone-400 print:grid-cols-2">
+              {singleLanguageClauseColumns.map((columnClauses, columnIndex) => (
+                <div key={`single-language-column-${columnIndex}`} dir={contractUiLanguage === 'ar' ? 'rtl' : 'ltr'} className="space-y-5 px-6">
+                  {columnClauses.map((clause, index) => (
+                    <div key={`${columnIndex}-${index}-${clause.title}`} className="text-sm leading-6 text-stone-700">
+                      <p className="font-bold text-stone-900">{clause.title}</p>
+                      <p className="mt-2 whitespace-pre-wrap">{clause.body}</p>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/contracts/page.tsx b/dashboard/src/app/(dashboard)/contracts/page.tsx
new file mode 100644
index 0000000..2e271b8
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/contracts/page.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type ReservationRow = {
+  id: string
+  contractNumber: string | null
+  invoiceNumber: string | null
+  status: string
+  paymentStatus: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  customer: { firstName: string; lastName: string; email: string }
+  vehicle: { make: string; model: string; licensePlate: string }
+}
+
+export default function ContractsPage() {
+  const { language } = useDashboardI18n()
+  const [rows, setRows] = useState<ReservationRow[]>([])
+  const [search, setSearch] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const copy = {
+    en: {
+      heading: 'Contracts',
+      subtitle: 'Generate or reopen rental contracts from any booking.',
+      search: 'Search customer, vehicle, plate, contract number…',
+      booking: 'Booking',
+      customer: 'Customer',
+      vehicle: 'Vehicle',
+      dates: 'Dates',
+      contract: 'Contract',
+      invoice: 'Invoice',
+      total: 'Total',
+      status: 'Status',
+      action: 'Action',
+      open: 'Open contract',
+      generate: 'Generate contract',
+      empty: 'No bookings found.',
+    },
+    fr: {
+      heading: 'Contrats',
+      subtitle: 'Générez ou rouvrez un contrat de location depuis n’importe quelle réservation.',
+      search: 'Rechercher client, véhicule, plaque, numéro de contrat…',
+      booking: 'Réservation',
+      customer: 'Client',
+      vehicle: 'Véhicule',
+      dates: 'Dates',
+      contract: 'Contrat',
+      invoice: 'Facture',
+      total: 'Total',
+      status: 'Statut',
+      action: 'Action',
+      open: 'Ouvrir le contrat',
+      generate: 'Générer le contrat',
+      empty: 'Aucune réservation trouvée.',
+    },
+    ar: {
+      heading: 'العقود',
+      subtitle: 'أنشئ أو افتح عقد التأجير من أي حجز.',
+      search: 'ابحث بالعميل أو السيارة أو اللوحة أو رقم العقد…',
+      booking: 'الحجز',
+      customer: 'العميل',
+      vehicle: 'المركبة',
+      dates: 'التواريخ',
+      contract: 'العقد',
+      invoice: 'الفاتورة',
+      total: 'الإجمالي',
+      status: 'الحالة',
+      action: 'الإجراء',
+      open: 'فتح العقد',
+      generate: 'إنشاء العقد',
+      empty: 'لم يتم العثور على حجوزات.',
+    },
+  }[language]
+
+  useEffect(() => {
+    apiFetch<ReservationRow[]>('/reservations?pageSize=100')
+      .then((data) => setRows(data ?? []))
+      .catch((err) => setError(err.message ?? 'Failed to load contracts'))
+  }, [])
+
+  const filteredRows = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return rows
+    return rows.filter((row) =>
+      `${row.customer.firstName} ${row.customer.lastName}`.toLowerCase().includes(q) ||
+      row.customer.email.toLowerCase().includes(q) ||
+      `${row.vehicle.make} ${row.vehicle.model}`.toLowerCase().includes(q) ||
+      row.vehicle.licensePlate.toLowerCase().includes(q) ||
+      (row.contractNumber ?? '').toLowerCase().includes(q) ||
+      (row.invoiceNumber ?? '').toLowerCase().includes(q),
+    )
+  }, [rows, search])
+
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const formatDate = (iso: string) => new Date(iso).toLocaleString(localeCode, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{copy.heading}</h2>
+          <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+        </div>
+        <input
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder={copy.search}
+          className="input-field w-full lg:max-w-md"
+        />
+      </div>
+
+      <div className="card overflow-hidden">
+        {error ? (
+          <div className="p-6 text-sm text-red-600">{error}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-200 bg-slate-50">
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.customer}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.vehicle}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.dates}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.contract}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.invoice}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.status}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.total}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.action}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {filteredRows.map((row) => (
+                  <tr key={row.id}>
+                    <td className="px-6 py-4 text-sm">
+                      <p className="font-semibold text-slate-900">{row.customer.firstName} {row.customer.lastName}</p>
+                      <p className="text-xs text-slate-500">{row.customer.email}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">
+                      <p>{row.vehicle.make} {row.vehicle.model}</p>
+                      <p className="text-xs text-slate-500">{row.vehicle.licensePlate}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-600">
+                      <p>{formatDate(row.startDate)}</p>
+                      <p>{formatDate(row.endDate)}</p>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.contractNumber ?? '—'}</td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.invoiceNumber ?? '—'}</td>
+                    <td className="px-6 py-4 text-sm">
+                      <div className="flex flex-col gap-2">
+                        <span className="badge-blue">{row.status}</span>
+                        <span className="badge-gray">{row.paymentStatus}</span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">{formatCurrency(row.totalAmount, 'MAD')}</td>
+                    <td className="px-6 py-4 text-right">
+                      <Link href={`/contracts/${row.id}`} className="text-sm font-semibold text-blue-700 hover:underline">
+                        {row.contractNumber ? copy.open : copy.generate}
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+                {filteredRows.length === 0 && (
+                  <tr>
+                    <td colSpan={8} className="px-6 py-10 text-center text-sm text-slate-400">{copy.empty}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/customers/page.tsx b/dashboard/src/app/(dashboard)/customers/page.tsx
new file mode 100644
index 0000000..2811014
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/customers/page.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface CustomerRow {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  flagged: boolean
+  licenseValidationStatus: string
+  licenseImageUrl: string | null
+}
+
+export default function CustomersPage() {
+  const { language } = useDashboardI18n()
+  const [rows, setRows] = useState<CustomerRow[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const copy = {
+    en: {
+      title: 'Customers',
+      subtitle: 'A company CRM with license validation and risk flags.',
+      customer: 'Customer',
+      contact: 'Contact',
+      license: 'License',
+      flags: 'Flags',
+      imageUploaded: 'Image uploaded',
+      imageMissing: 'No image',
+      noPhone: 'No phone',
+      flagged: 'Flagged',
+      clear: 'Clear',
+      empty: 'No customers yet.',
+    },
+    fr: {
+      title: 'Clients',
+      subtitle: 'CRM de l’entreprise avec validation des permis et indicateurs de risque.',
+      customer: 'Client',
+      contact: 'Contact',
+      license: 'Permis',
+      flags: 'Signalements',
+      imageUploaded: 'Image téléversée',
+      imageMissing: 'Aucune image',
+      noPhone: 'Pas de téléphone',
+      flagged: 'Signalé',
+      clear: 'Aucun risque',
+      empty: 'Aucun client pour le moment.',
+    },
+    ar: {
+      title: 'العملاء',
+      subtitle: 'نظام إدارة عملاء خاص بالشركة مع التحقق من الرخص ومؤشرات المخاطر.',
+      customer: 'العميل',
+      contact: 'التواصل',
+      license: 'الرخصة',
+      flags: 'العلامات',
+      imageUploaded: 'تم رفع الصورة',
+      imageMissing: 'لا توجد صورة',
+      noPhone: 'لا يوجد هاتف',
+      flagged: 'تم تمييزه',
+      clear: 'لا توجد مخاطر',
+      empty: 'لا يوجد عملاء حتى الآن.',
+    },
+  }[language]
+
+  useEffect(() => {
+    apiFetch<CustomerRow[]>('/customers?pageSize=100')
+      .then((result) => setRows(result ?? []))
+      .catch((err) => setError(err.message))
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading">
+        <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+        <p className="text-sm text-slate-500 mt-1">{copy.subtitle}</p>
+      </div>
+      <div className="card overflow-hidden">
+        {error ? (
+          <div className="p-8 text-sm text-red-600">{error}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-slate-50 border-b border-slate-200">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.customer}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.contact}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.license}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.flags}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {rows.map((row) => (
+                  <tr key={row.id}>
+                    <td className="px-6 py-4 text-sm font-semibold text-slate-900">{row.firstName} {row.lastName}</td>
+                    <td className="px-6 py-4">
+                      <p className="text-sm text-slate-700">{row.email}</p>
+                      <p className="text-xs text-slate-500">{row.phone ?? copy.noPhone}</p>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="badge-gray">{row.licenseValidationStatus}</span>
+                        <span className={row.licenseImageUrl ? 'badge-green' : 'badge-gray'}>
+                          {row.licenseImageUrl ? copy.imageUploaded : copy.imageMissing}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">{row.flagged ? <span className="badge-red">{copy.flagged}</span> : <span className="badge-green">{copy.clear}</span>}</td>
+                  </tr>
+                ))}
+                {rows.length === 0 && (
+                  <tr>
+                    <td colSpan={4} className="px-6 py-10 text-center text-sm text-slate-400">{copy.empty}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx b/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx
new file mode 100644
index 0000000..9103eeb
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx
@@ -0,0 +1,838 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
+import Image from 'next/image'
+import { ArrowLeft, Edit, X, Check, Upload, Trash2, CalendarDays, DollarSign, Info, Wrench, Plus, ChevronDown, ChevronUp } from 'lucide-react'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import VehicleCalendar from '@/components/VehicleCalendar'
+import VehiclePricingManager from '@/components/VehiclePricingManager'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface VehicleDetail {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  dailyRate: number
+  status: string
+  color: string
+  transmission: string
+  fuelType: string
+  seats: number
+  mileage: number | null
+  licensePlate: string
+  vin: string | null
+  photos: string[]
+  notes: string | null
+  isPublished: boolean
+  pickupLocations: string[]
+  allowDifferentDropoff: boolean
+  dropoffLocations: string[]
+}
+
+const PRESET_COLORS = ['White', 'Black', 'Silver', 'Gray', 'Red', 'Blue', 'Green', 'Yellow', 'Orange', 'Brown', 'Beige', 'Gold']
+const PRESET_MAKES = ['Audi', 'BMW', 'Chevrolet', 'Citroën', 'Dacia', 'Fiat', 'Ford', 'Honda', 'Hyundai', 'Kia', 'Mazda', 'Mercedes-Benz', 'Nissan', 'Opel', 'Peugeot', 'Renault', 'Seat', 'Skoda', 'Suzuki', 'Toyota', 'Volkswagen', 'Volvo']
+const MODELS_BY_MAKE: Record<string, string[]> = {
+  'Audi':          ['A1', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q2', 'Q3', 'Q5', 'Q7', 'Q8', 'TT'],
+  'BMW':           ['116i', '118i', '120i', '218i', '316i', '318i', '320i', '325i', 'X1', 'X2', 'X3', 'X4', 'X5', 'X6', 'X7'],
+  'Chevrolet':     ['Aveo', 'Captiva', 'Cruze', 'Malibu', 'Spark', 'Trax'],
+  'Citroën':       ['Berlingo', 'C1', 'C3', 'C3 Aircross', 'C4', 'C4 Cactus', 'C5', 'C5 Aircross', 'Jumpy', 'SpaceTourer'],
+  'Dacia':         ['Dokker', 'Duster', 'Jogger', 'Lodgy', 'Logan', 'Sandero', 'Spring'],
+  'Fiat':          ['500', '500X', 'Bravo', 'Doblo', 'Ducato', 'Panda', 'Punto', 'Tipo'],
+  'Ford':          ['B-Max', 'C-Max', 'EcoSport', 'Edge', 'Explorer', 'Fiesta', 'Focus', 'Fusion', 'Kuga', 'Mondeo', 'Mustang', 'Puma', 'Ranger', 'S-Max', 'Transit'],
+  'Honda':         ['Accord', 'Civic', 'CR-V', 'HR-V', 'Jazz', 'Pilot'],
+  'Hyundai':       ['Accent', 'Creta', 'Elantra', 'i10', 'i20', 'i30', 'ix35', 'Kona', 'Santa Fe', 'Sonata', 'Tucson'],
+  'Kia':           ['Carnival', 'Ceed', 'Niro', 'Optima', 'Picanto', 'Rio', 'Sorento', 'Soul', 'Sportage', 'Stinger'],
+  'Mazda':         ['2', '3', '6', 'CX-3', 'CX-5', 'CX-9', 'MX-5'],
+  'Mercedes-Benz': ['A-Class', 'B-Class', 'C-Class', 'CLA', 'E-Class', 'GLA', 'GLB', 'GLC', 'GLE', 'GLS', 'S-Class', 'Sprinter', 'Vito'],
+  'Nissan':        ['Juke', 'Leaf', 'Micra', 'Murano', 'Navara', 'Note', 'Pathfinder', 'Patrol', 'Pulsar', 'Qashqai', 'X-Trail'],
+  'Opel':          ['Astra', 'Corsa', 'Crossland', 'Grandland', 'Insignia', 'Meriva', 'Mokka', 'Zafira'],
+  'Peugeot':       ['108', '208', '2008', '3008', '308', '4008', '408', '5008', '508', 'Boxer', 'Expert', 'Partner', 'Traveller'],
+  'Renault':       ['Arkana', 'Captur', 'Clio', 'Duster', 'Espace', 'Grand Scenic', 'Kadjar', 'Kangoo', 'Koleos', 'Laguna', 'Master', 'Megane', 'Scenic', 'Talisman', 'Trafic', 'Twingo', 'Zoe'],
+  'Seat':          ['Arona', 'Arosa', 'Ateca', 'Ibiza', 'Leon', 'Tarraco', 'Toledo'],
+  'Skoda':         ['Fabia', 'Karoq', 'Kodiaq', 'Octavia', 'Rapid', 'Scala', 'Superb', 'Yeti'],
+  'Suzuki':        ['Alto', 'Baleno', 'Celerio', 'Ignis', 'Jimny', 'S-Cross', 'Swift', 'Vitara'],
+  'Toyota':        ['Auris', 'Avensis', 'Aygo', 'Camry', 'Corolla', 'C-HR', 'Fortuner', 'Hilux', 'Land Cruiser', 'Prius', 'RAV4', 'Rush', 'Urban Cruiser', 'Yaris'],
+  'Volkswagen':    ['Amarok', 'Arteon', 'Caddy', 'Golf', 'ID.3', 'ID.4', 'Passat', 'Polo', 'Sharan', 'T-Cross', 'T-Roc', 'Tiguan', 'Touareg', 'Touran', 'Transporter', 'Up'],
+  'Volvo':         ['S60', 'S90', 'V40', 'V60', 'V90', 'XC40', 'XC60', 'XC90'],
+}
+
+function parseLocationInput(value: string) {
+  return value
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+}
+
+function formatLocationInput(values: string[]) {
+  return Array.isArray(values) ? values.join(', ') : ''
+}
+
+function initMakeSelect(make: string) {
+  return PRESET_MAKES.includes(make) ? make : (make ? 'custom' : '')
+}
+function initModelSelect(make: string, model: string) {
+  const presets = MODELS_BY_MAKE[make]
+  if (!presets) return model ? 'custom' : ''
+  return presets.includes(model) ? model : (model ? 'custom' : '')
+}
+function initColorSelect(color: string) {
+  return PRESET_COLORS.includes(color) ? color : (color ? 'custom' : '')
+}
+
+interface MaintenanceLog {
+  id: string
+  type: string
+  description: string | null
+  cost: number | null
+  mileage: number | null
+  performedAt: string
+  nextDueAt: string | null
+  nextDueMileage: number | null
+}
+
+const ROUTINE_TYPES = [
+  { key: 'Oil Change',            intervalMonths: 6  },
+  { key: 'Technical Inspection',  intervalMonths: 12 },
+  { key: 'Vehicle Registration',  intervalMonths: 12 },
+  { key: 'Car Tax',               intervalMonths: 12 },
+  { key: 'Tire Rotation',         intervalMonths: 6  },
+  { key: 'Brake Inspection',      intervalMonths: 12 },
+  { key: 'Air Filter',            intervalMonths: 12 },
+  { key: 'Cabin Filter',          intervalMonths: 12 },
+  { key: 'Battery Check',         intervalMonths: 12 },
+  { key: 'Belt / Chain Service',  intervalMonths: 24 },
+  { key: 'Coolant Flush',         intervalMonths: 24 },
+  { key: 'Transmission Service',  intervalMonths: 24 },
+]
+
+function serviceStatus(log: MaintenanceLog | undefined, currentMileage: number | null): 'none' | 'overdue' | 'due-soon' | 'ok' {
+  if (!log) return 'none'
+  const now = new Date()
+  let worstLevel: 'ok' | 'due-soon' | 'overdue' = 'ok'
+
+  if (log.nextDueAt) {
+    const diffDays = (new Date(log.nextDueAt).getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+    if (diffDays < 0) return 'overdue'
+    if (diffDays <= 30) worstLevel = 'due-soon'
+  }
+
+  if (log.nextDueMileage != null && currentMileage != null) {
+    const kmLeft = log.nextDueMileage - currentMileage
+    if (kmLeft <= 0) return 'overdue'
+    if (kmLeft <= 500) worstLevel = 'due-soon'
+  }
+
+  return worstLevel
+}
+
+function StatusPill({ status }: { status: ReturnType<typeof serviceStatus> }) {
+  const { dict } = useDashboardI18n()
+  const vd = dict.vehicleDetail
+  if (status === 'none')     return <span className="badge-gray text-xs">{vd.statusNone}</span>
+  if (status === 'overdue')  return <span className="badge-red text-xs">{vd.statusOverdue}</span>
+  if (status === 'due-soon') return <span className="badge-amber text-xs">{vd.statusDueSoon}</span>
+  return <span className="badge-green text-xs">{vd.statusOk}</span>
+}
+
+function MaintenanceRow({ vehicleId, typeKey, intervalMonths, currentMileage, log, onLogged }: {
+  vehicleId: string
+  typeKey: string
+  intervalMonths: number
+  currentMileage: number | null
+  log: MaintenanceLog | undefined
+  onLogged: () => void
+}) {
+  const { dict } = useDashboardI18n()
+  const vd = dict.vehicleDetail
+  const [open, setOpen] = useState(false)
+  const today = new Date().toISOString().slice(0, 10)
+  const defaultNextDue = (() => {
+    const d = new Date()
+    d.setMonth(d.getMonth() + intervalMonths)
+    return d.toISOString().slice(0, 10)
+  })()
+  const [form, setForm] = useState({
+    description: '', cost: '', mileage: '', performedAt: today,
+    nextDueAt: defaultNextDue, nextDueMileage: '',
+  })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.performedAt) { setError(vd.dateRequired); return }
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch(`/vehicles/${vehicleId}/maintenance`, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: typeKey,
+          description: form.description || undefined,
+          cost: form.cost ? Math.round(parseFloat(form.cost) * 100) : undefined,
+          mileage: form.mileage ? parseInt(form.mileage) : undefined,
+          performedAt: new Date(form.performedAt).toISOString(),
+          nextDueAt: form.nextDueAt ? new Date(form.nextDueAt).toISOString() : undefined,
+          nextDueMileage: form.nextDueMileage ? parseInt(form.nextDueMileage) : undefined,
+        }),
+      })
+      setForm({ description: '', cost: '', mileage: '', performedAt: today, nextDueAt: defaultNextDue, nextDueMileage: '' })
+      setOpen(false)
+      onLogged()
+    } catch (err: any) {
+      setError(err.message ?? vd.savingLabel)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const status = serviceStatus(log, currentMileage)
+  const displayLabel = vd.routineTypes[typeKey] ?? typeKey
+
+  const nextDueText = (() => {
+    if (!log) return vd.noRecord
+    const parts: string[] = [`${vd.lastPrefix} ${new Date(log.performedAt).toLocaleDateString()}`]
+    if (log.mileage) parts.push(vd.atKm(log.mileage.toLocaleString()))
+    const dueParts: string[] = []
+    if (log.nextDueAt) dueParts.push(new Date(log.nextDueAt).toLocaleDateString())
+    if (log.nextDueMileage != null) dueParts.push(`${log.nextDueMileage.toLocaleString()} km`)
+    if (dueParts.length) parts.push(`${vd.duePrefix} ${dueParts.join(` ${vd.orSep} `)}`)
+    if (currentMileage != null && log.nextDueMileage != null) {
+      const kmLeft = log.nextDueMileage - currentMileage
+      parts.push(`(${kmLeft > 0 ? vd.kmLeft(kmLeft.toLocaleString()) : vd.overdueByKm})`)
+    }
+    return parts.join(' ')
+  })()
+
+  return (
+    <div className="rounded-xl border border-slate-100 overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-3 bg-white hover:bg-slate-50 transition-colors">
+        <div className="flex items-center gap-3 min-w-0">
+          <Wrench className="w-4 h-4 text-slate-400 flex-shrink-0" />
+          <div className="min-w-0">
+            <p className="text-sm font-medium text-slate-900">{displayLabel}</p>
+            <p className="text-xs text-slate-400 mt-0.5 truncate">{nextDueText}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <StatusPill status={status} />
+          <button
+            onClick={() => setOpen((o) => !o)}
+            className="flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-700 px-2 py-1 rounded-lg hover:bg-blue-50 transition-colors"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            {vd.logBtn}
+            {open ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+          </button>
+        </div>
+      </div>
+
+      {open && (
+        <form onSubmit={handleSubmit} className="border-t border-slate-100 bg-slate-50 px-4 py-4 space-y-3">
+          {error && <p className="text-xs text-red-600">{error}</p>}
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.serviceDateLabel}</label>
+              <input type="date" className="input-field text-sm" value={form.performedAt} onChange={(e) => setForm({ ...form, performedAt: e.target.value })} required />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.odometerAtService}</label>
+              <input type="number" className="input-field text-sm" placeholder={currentMileage ? String(currentMileage) : 'e.g. 52000'} min="0" value={form.mileage} onChange={(e) => setForm({ ...form, mileage: e.target.value })} />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.nextDueDateLabel}</label>
+              <input type="date" className="input-field text-sm" value={form.nextDueAt} onChange={(e) => setForm({ ...form, nextDueAt: e.target.value })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.nextDueKmLabel}</label>
+              <input type="number" className="input-field text-sm" placeholder="e.g. 60000" min="0" value={form.nextDueMileage} onChange={(e) => setForm({ ...form, nextDueMileage: e.target.value })} />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.costLabel}</label>
+              <input type="number" className="input-field text-sm" placeholder="0.00" min="0" step="0.01" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1">{vd.maintenanceNotesLabel}</label>
+              <input className="input-field text-sm" placeholder={vd.optional} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <button type="button" onClick={() => setOpen(false)} className="btn-secondary text-xs py-1.5 px-3">{vd.cancelBtn}</button>
+            <button type="submit" disabled={saving} className="btn-primary text-xs py-1.5 px-3">{saving ? vd.savingLabel : vd.saveLabel}</button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
+
+type Tab = 'details' | 'maintenance' | 'calendar' | 'pricing'
+
+export default function FleetDetailPage() {
+  const params = useParams<{ id: string }>()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { dict, language } = useDashboardI18n()
+  const vd = dict.vehicleDetail
+  const fl = dict.fleet
+
+  const [vehicle, setVehicle] = useState<VehicleDetail | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<Tab>('details')
+  const [editing, setEditing] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+
+  const [form, setForm] = useState<{
+    make: string; model: string; year: number; category: string
+    dailyRate: string; licensePlate: string; vin: string; color: string
+    seats: number; transmission: string; fuelType: string
+    status: string; notes: string; mileage: string
+    pickupLocations: string; allowDifferentDropoff: boolean; dropoffLocations: string
+  } | null>(null)
+  const [makeSelect, setMakeSelect] = useState('')
+  const [modelSelect, setModelSelect] = useState('')
+  const [colorSelect, setColorSelect] = useState('')
+
+  const [maintenanceLogs, setMaintenanceLogs] = useState<MaintenanceLog[]>([])
+
+  const fetchMaintenance = () => {
+    apiFetch<MaintenanceLog[]>(`/vehicles/${params.id}/maintenance`)
+      .then((logs) => setMaintenanceLogs(logs ?? []))
+      .catch(() => {})
+  }
+
+  useEffect(() => { fetchMaintenance() }, [params.id])
+
+  const [deletingPhotoIdx, setDeletingPhotoIdx] = useState<number | null>(null)
+  const [newPhotoFiles, setNewPhotoFiles] = useState<File[]>([])
+  const [newPhotoPreviews, setNewPhotoPreviews] = useState<string[]>([])
+  const [uploadingPhotos, setUploadingPhotos] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    apiFetch<VehicleDetail>(`/vehicles/${params.id}`)
+      .then(setVehicle)
+      .catch((err) => setError(err.message))
+  }, [params.id])
+
+  useEffect(() => {
+    if (searchParams.get('tab') === 'pricing') {
+      setActiveTab('pricing')
+    }
+  }, [searchParams])
+
+  const startEdit = () => {
+    if (!vehicle) return
+    setForm({
+      make: vehicle.make, model: vehicle.model, year: vehicle.year,
+      category: vehicle.category,
+      dailyRate: (vehicle.dailyRate / 100).toFixed(2),
+      licensePlate: vehicle.licensePlate,
+      vin: vehicle.vin ?? '',
+      color: vehicle.color ?? '', seats: vehicle.seats,
+      transmission: vehicle.transmission, fuelType: vehicle.fuelType,
+      status: vehicle.status, notes: vehicle.notes ?? '',
+      mileage: vehicle.mileage != null ? String(vehicle.mileage) : '',
+      pickupLocations: formatLocationInput(vehicle.pickupLocations),
+      allowDifferentDropoff: vehicle.allowDifferentDropoff,
+      dropoffLocations: formatLocationInput(vehicle.dropoffLocations),
+    })
+    setMakeSelect(initMakeSelect(vehicle.make))
+    setModelSelect(initModelSelect(vehicle.make, vehicle.model))
+    setColorSelect(initColorSelect(vehicle.color ?? ''))
+    setSaveError(null)
+    setEditing(true)
+  }
+
+  const cancelEdit = () => {
+    newPhotoPreviews.forEach((p) => URL.revokeObjectURL(p))
+    setNewPhotoFiles([])
+    setNewPhotoPreviews([])
+    setEditing(false)
+    setForm(null)
+    setSaveError(null)
+  }
+
+  const handleSave = async () => {
+    if (!form || !vehicle) return
+    if (!form.make)         { setSaveError(vd.makeRequired); return }
+    if (!form.model)        { setSaveError(vd.modelRequired); return }
+    if (!form.licensePlate) { setSaveError(vd.plateRequired); return }
+    const rate = parseFloat(form.dailyRate)
+    if (isNaN(rate) || rate < 0) { setSaveError(vd.rateInvalid); return }
+    if (form.allowDifferentDropoff && parseLocationInput(form.dropoffLocations).length === 0) {
+      setSaveError(fl.dropoffLocationsRequired)
+      return
+    }
+
+    setSaving(true)
+    setSaveError(null)
+    try {
+      const updated = await apiFetch<VehicleDetail>(`/vehicles/${vehicle.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          make: form.make, model: form.model, year: Number(form.year),
+          category: form.category, dailyRate: Math.round(rate * 100),
+          licensePlate: form.licensePlate, vin: form.vin.trim() || undefined, color: form.color,
+          seats: Number(form.seats), transmission: form.transmission,
+          fuelType: form.fuelType, status: form.status,
+          notes: form.notes || undefined,
+          mileage: form.mileage ? Number(form.mileage) : undefined,
+          pickupLocations: parseLocationInput(form.pickupLocations),
+          allowDifferentDropoff: form.allowDifferentDropoff,
+          dropoffLocations: form.allowDifferentDropoff ? parseLocationInput(form.dropoffLocations) : [],
+        }),
+      })
+
+      let finalVehicle = updated
+      if (newPhotoFiles.length > 0) {
+        setUploadingPhotos(true)
+        const fd = new FormData()
+        newPhotoFiles.forEach((f) => fd.append('photos', f))
+        finalVehicle = await apiFetch<VehicleDetail>(`/vehicles/${vehicle.id}/photos`, { method: 'POST', body: fd })
+        newPhotoPreviews.forEach((p) => URL.revokeObjectURL(p))
+        setNewPhotoFiles([])
+        setNewPhotoPreviews([])
+        setUploadingPhotos(false)
+      }
+
+      setVehicle(finalVehicle)
+      setEditing(false)
+      setForm(null)
+    } catch (err: any) {
+      setSaveError(err.message ?? vd.failedSave)
+      setUploadingPhotos(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeletePhoto = async (idx: number) => {
+    if (!vehicle) return
+    setDeletingPhotoIdx(idx)
+    try {
+      const updated = await apiFetch<VehicleDetail>(`/vehicles/${vehicle.id}/photos/${idx}`, { method: 'DELETE' })
+      setVehicle(updated)
+    } catch (err: any) {
+      alert(err.message)
+    } finally {
+      setDeletingPhotoIdx(null)
+    }
+  }
+
+  const handleNewPhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? [])
+    if (!files.length) return
+    const totalExisting = vehicle?.photos.length ?? 0
+    const combined = [...newPhotoFiles, ...files].slice(0, 10 - totalExisting)
+    setNewPhotoFiles(combined)
+    setNewPhotoPreviews(combined.map((f) => URL.createObjectURL(f)))
+    e.target.value = ''
+  }
+
+  const removeNewPhoto = (i: number) => {
+    URL.revokeObjectURL(newPhotoPreviews[i])
+    setNewPhotoFiles(newPhotoFiles.filter((_, idx) => idx !== i))
+    setNewPhotoPreviews(newPhotoPreviews.filter((_, idx) => idx !== i))
+  }
+
+  if (error)    return <div className="card p-6 text-sm text-red-600">{error}</div>
+  if (!vehicle) return <div className="card p-6 text-sm text-slate-500">{vd.loadingVehicle}</div>
+
+  const presetModels = form && MODELS_BY_MAKE[form.make] ? MODELS_BY_MAKE[form.make] : null
+  const totalPhotos = vehicle.photos.length + newPhotoFiles.length
+
+  const categoryLabel = fl.categoryLabels[vehicle.category as keyof typeof fl.categoryLabels] ?? vehicle.category
+  const statusLabel   = fl.statusLabels[vehicle.status as keyof typeof fl.statusLabels] ?? vehicle.status
+  const fuelLabel     = fl.fuelTypeLabels[vehicle.fuelType as keyof typeof fl.fuelTypeLabels] ?? vehicle.fuelType
+  const transLabel    = vehicle.transmission === 'MANUAL' ? fl.manual : fl.automatic
+  const pricingTabLabel = language === 'fr' ? 'Tarifs' : language === 'ar' ? 'التسعير' : 'Pricing'
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button onClick={() => router.back()} className="p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
+            <ArrowLeft className="w-4 h-4" />
+          </button>
+          <div>
+            <h2 className="text-xl font-semibold text-slate-900">{vehicle.make} {vehicle.model}</h2>
+            <p className="text-sm text-slate-500 mt-0.5">
+              {vehicle.year} · {vehicle.licensePlate}
+              {vehicle.vin ? ` · ${vehicle.vin}` : ''}
+              {' · '}
+              {statusLabel}
+            </p>
+          </div>
+        </div>
+        {!editing ? (
+          <button onClick={startEdit} className="btn-secondary flex items-center gap-2">
+            <Edit className="w-4 h-4" /> {vd.editBtn}
+          </button>
+        ) : (
+          <div className="flex gap-2">
+            <button onClick={cancelEdit} className="btn-secondary flex items-center gap-2">
+              <X className="w-4 h-4" /> {vd.cancelBtn}
+            </button>
+            <button onClick={handleSave} disabled={saving} className="btn-primary flex items-center gap-2">
+              <Check className="w-4 h-4" />
+              {saving ? (uploadingPhotos ? vd.uploadingPhotosBtn : vd.savingBtn) : vd.saveBtn}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {saveError && (
+        <div className="px-4 py-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{saveError}</div>
+      )}
+
+      {/* Tab bar */}
+      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-800">
+        {(['details', 'maintenance', 'calendar', 'pricing'] as Tab[]).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={[
+              'flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
+              activeTab === tab
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
+            ].join(' ')}
+          >
+            {tab === 'details'      && <><Info className="w-4 h-4" /> {vd.tabDetails}</>}
+            {tab === 'maintenance'  && (
+              <>
+                <Wrench className="w-4 h-4" /> {vd.tabMaintenance}
+                {maintenanceLogs.length === 0 && <span className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-orange-100 text-orange-700 text-[10px] font-bold">!</span>}
+              </>
+            )}
+            {tab === 'calendar'     && <><CalendarDays className="w-4 h-4" /> {vd.tabCalendar}</>}
+            {tab === 'pricing'      && <><DollarSign className="w-4 h-4" /> {pricingTabLabel}</>}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'details' && (
+        <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
+          {/* Photos */}
+          <div className="card p-6">
+            <h3 className="text-base font-semibold text-slate-900 mb-4">{vd.photosHeading}</h3>
+            <div className="grid gap-4 sm:grid-cols-2">
+              {vehicle.photos.map((photo, index) => (
+                <div key={`${photo}-${index}`} className="relative h-48 rounded-xl overflow-hidden bg-slate-100 group">
+                  <Image src={photo} alt={`${vehicle.make} ${vehicle.model} photo ${index + 1}`} fill className="object-cover" unoptimized={!photo.includes('res.cloudinary.com')} priority={index === 0} />
+                  {editing && (
+                    <button
+                      onClick={() => handleDeletePhoto(index)}
+                      disabled={deletingPhotoIdx === index}
+                      className="absolute top-2 right-2 p-1.5 bg-red-600 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-60"
+                    >
+                      {deletingPhotoIdx === index
+                        ? <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                        : <Trash2 className="w-3.5 h-3.5" />}
+                    </button>
+                  )}
+                </div>
+              ))}
+
+              {editing && newPhotoPreviews.map((src, i) => (
+                <div key={`new-${i}`} className="relative h-48 rounded-xl overflow-hidden bg-slate-100 group ring-2 ring-blue-400">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={src} alt={`new photo ${i + 1}`} className="object-cover w-full h-full" />
+                  <button
+                    onClick={() => removeNewPhoto(i)}
+                    className="absolute top-2 right-2 p-1.5 bg-blue-950/60 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                  <span className="absolute bottom-2 left-2 text-xs bg-blue-600 text-white px-2 py-0.5 rounded-full">{vd.newPhotoBadge}</span>
+                </div>
+              ))}
+
+              {vehicle.photos.length === 0 && !editing && (
+                <div className="text-sm text-slate-400">{vd.noPhotosYet}</div>
+              )}
+            </div>
+
+            {editing && totalPhotos < 10 && (
+              <div className="mt-4">
+                <input ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" onChange={handleNewPhotoChange} />
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-slate-200 rounded-xl text-sm text-slate-500 hover:border-slate-300 hover:text-slate-700 transition-colors"
+                >
+                  <Upload className="w-4 h-4" />
+                  {totalPhotos === 0 ? vd.clickToAddPhotos : vd.addMorePhotos(totalPhotos)}
+                </button>
+              </div>
+            )}
+            {editing && totalPhotos >= 10 && (
+              <p className="mt-3 text-xs text-slate-400 text-center">{vd.maxPhotosReached}</p>
+            )}
+          </div>
+
+          {/* Details / Edit form */}
+          <div className="card p-6">
+            <h3 className="text-base font-semibold text-slate-900 mb-4">{vd.vehicleDetailsHeading}</h3>
+
+            {!editing || !form ? (
+              <dl className="space-y-3 text-sm">
+                <div><dt className="text-slate-500">{vd.labelCategory}</dt><dd className="text-slate-900">{categoryLabel}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelDailyRate}</dt><dd className="text-slate-900">{formatCurrency(vehicle.dailyRate, 'MAD')}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelStatus}</dt><dd className="text-slate-900">{statusLabel}</dd></div>
+                <div><dt className="text-slate-500">{vd.vinLabel}</dt><dd className="text-slate-900">{vehicle.vin || '—'}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelSeats}</dt><dd className="text-slate-900">{vehicle.seats}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelTransmission}</dt><dd className="text-slate-900">{transLabel}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelFuelType}</dt><dd className="text-slate-900">{fuelLabel}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelColor}</dt><dd className="text-slate-900">{vehicle.color || '—'}</dd></div>
+                <div><dt className="text-slate-500">{vd.labelOdometer}</dt><dd className="text-slate-900">{vehicle.mileage != null ? `${vehicle.mileage.toLocaleString()} km` : '—'}</dd></div>
+                <div><dt className="text-slate-500">{fl.pickupLocations}</dt><dd className="text-slate-900">{vehicle.pickupLocations.length > 0 ? vehicle.pickupLocations.join(', ') : '—'}</dd></div>
+                <div><dt className="text-slate-500">{fl.allowDifferentDropoff}</dt><dd className="text-slate-900">{vehicle.allowDifferentDropoff ? fl.differentDropoffAvailable : fl.sameDropoffOnly}</dd></div>
+                {vehicle.allowDifferentDropoff && (
+                  <div><dt className="text-slate-500">{fl.dropoffLocations}</dt><dd className="text-slate-900">{vehicle.dropoffLocations.length > 0 ? vehicle.dropoffLocations.join(', ') : '—'}</dd></div>
+                )}
+                <div><dt className="text-slate-500">{vd.labelNotes}</dt><dd className="text-slate-900">{vehicle.notes ?? '—'}</dd></div>
+              </dl>
+            ) : (
+              <div className="space-y-4 text-sm">
+                {/* Make */}
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.makeLabel}</label>
+                  <select
+                    className="input-field"
+                    value={makeSelect}
+                    onChange={(e) => {
+                      setMakeSelect(e.target.value)
+                      setModelSelect('')
+                      if (e.target.value !== 'custom') setForm({ ...form, make: e.target.value, model: '' })
+                      else setForm({ ...form, make: '', model: '' })
+                    }}
+                  >
+                    <option value="">{vd.selectMake}</option>
+                    {PRESET_MAKES.map((m) => <option key={m} value={m}>{m}</option>)}
+                    <option value="custom">{vd.other}</option>
+                  </select>
+                  {makeSelect === 'custom' && (
+                    <input className="input-field mt-2" placeholder={vd.typeMake} value={form.make} onChange={(e) => setForm({ ...form, make: e.target.value })} />
+                  )}
+                </div>
+
+                {/* Model */}
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.modelLabel}</label>
+                  {!presetModels ? (
+                    <input className="input-field" placeholder={vd.typeModel} value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} />
+                  ) : (
+                    <>
+                      <select
+                        className="input-field"
+                        value={modelSelect}
+                        onChange={(e) => {
+                          setModelSelect(e.target.value)
+                          if (e.target.value !== 'custom') setForm({ ...form, model: e.target.value })
+                          else setForm({ ...form, model: '' })
+                        }}
+                      >
+                        <option value="">{vd.selectModel}</option>
+                        {presetModels.map((m) => <option key={m} value={m}>{m}</option>)}
+                        <option value="custom">{vd.other}</option>
+                      </select>
+                      {modelSelect === 'custom' && (
+                        <input className="input-field mt-2" placeholder={vd.typeModel} value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} />
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {/* Year & Category */}
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.yearLabel}</label>
+                    <input type="number" className="input-field" min="1990" max={new Date().getFullYear() + 1} value={form.year} onChange={(e) => setForm({ ...form, year: Number(e.target.value) })} />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.fuelTypeLabel.replace('Type', '').trim() !== '' ? vd.fuelTypeLabel : fl.category}</label>
+                    <select className="input-field" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })}>
+                      {(['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'] as const).map((c) => (
+                        <option key={c} value={c}>{fl.categoryLabels[c]}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Daily Rate, License Plate & VIN */}
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.dailyRateLabel}</label>
+                    <input type="number" className="input-field" min="0" step="0.01" value={form.dailyRate} onChange={(e) => setForm({ ...form, dailyRate: e.target.value })} />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.licensePlateLabel}</label>
+                    <input className="input-field" value={form.licensePlate} onChange={(e) => setForm({ ...form, licensePlate: e.target.value })} />
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.vinLabel}</label>
+                  <input className="input-field" placeholder="1HGCM82633A123456" value={form.vin} onChange={(e) => setForm({ ...form, vin: e.target.value })} />
+                </div>
+
+                {/* Status */}
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.statusLabel}</label>
+                  <select className="input-field" value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
+                    {(['AVAILABLE', 'RESERVED', 'READY', 'RENTED', 'RETURNED', 'NEEDS_CLEANING', 'MAINTENANCE', 'DAMAGE_REVIEW', 'OUT_OF_SERVICE'] as const).map((s) => (
+                      <option key={s} value={s}>{fl.statusLabels[s]}</option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Color & Seats */}
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.colorLabel}</label>
+                    <select
+                      className="input-field"
+                      value={colorSelect}
+                      onChange={(e) => {
+                        setColorSelect(e.target.value)
+                        if (e.target.value !== 'custom') setForm({ ...form, color: e.target.value })
+                        else setForm({ ...form, color: '' })
+                      }}
+                    >
+                      <option value="">{vd.selectColor}</option>
+                      {PRESET_COLORS.map((c) => <option key={c} value={c}>{c}</option>)}
+                      <option value="custom">{vd.other}</option>
+                    </select>
+                    {colorSelect === 'custom' && (
+                      <input className="input-field mt-2" placeholder={vd.typeColor} value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} />
+                    )}
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.seatsLabel}</label>
+                    <input type="number" className="input-field" min="2" max="15" value={form.seats} onChange={(e) => setForm({ ...form, seats: Number(e.target.value) })} />
+                  </div>
+                </div>
+
+                {/* Transmission & Fuel */}
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.transmissionLabel}</label>
+                    <select className="input-field" value={form.transmission} onChange={(e) => setForm({ ...form, transmission: e.target.value })}>
+                      <option value="MANUAL">{fl.manual}</option>
+                      <option value="AUTOMATIC">{fl.automatic}</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.fuelTypeLabel}</label>
+                    <select className="input-field" value={form.fuelType} onChange={(e) => setForm({ ...form, fuelType: e.target.value })}>
+                      {(['GASOLINE', 'DIESEL', 'ELECTRIC', 'HYBRID'] as const).map((f) => (
+                        <option key={f} value={f}>{fl.fuelTypeLabels[f]}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Odometer */}
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.odometerLabel}</label>
+                  <input type="number" className="input-field" placeholder="e.g. 45000" min="0" value={form.mileage} onChange={(e) => setForm({ ...form, mileage: e.target.value })} />
+                </div>
+
+                <div className="space-y-4 rounded-xl border border-slate-200 bg-slate-50 p-4">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-500 mb-1.5">{fl.pickupLocations}</label>
+                    <textarea
+                      className="input-field resize-none"
+                      rows={2}
+                      placeholder={fl.pickupLocationsPlaceholder}
+                      value={form.pickupLocations}
+                      onChange={(e) => setForm({ ...form, pickupLocations: e.target.value })}
+                    />
+                    <p className="mt-1 text-xs text-slate-400">{fl.locationHint}</p>
+                  </div>
+                  <label className="flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm font-medium text-slate-700">
+                    <input
+                      type="checkbox"
+                      checked={form.allowDifferentDropoff}
+                      onChange={(e) => setForm({
+                        ...form,
+                        allowDifferentDropoff: e.target.checked,
+                        dropoffLocations: e.target.checked ? form.dropoffLocations : '',
+                      })}
+                      className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                    />
+                    <span>{fl.allowDifferentDropoff}</span>
+                  </label>
+                  {form.allowDifferentDropoff && (
+                    <div>
+                      <label className="block text-xs font-medium text-slate-500 mb-1.5">{fl.dropoffLocations}</label>
+                      <textarea
+                        className="input-field resize-none"
+                        rows={2}
+                        placeholder={fl.dropoffLocationsPlaceholder}
+                        value={form.dropoffLocations}
+                        onChange={(e) => setForm({ ...form, dropoffLocations: e.target.value })}
+                      />
+                      <p className="mt-1 text-xs text-slate-400">{fl.locationHint}</p>
+                    </div>
+                  )}
+                </div>
+
+                {/* Notes */}
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{vd.notesLabel}</label>
+                  <textarea className="input-field resize-none" rows={3} value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} placeholder={vd.optionalNotes} />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'maintenance' && (
+        <div className="space-y-3">
+          <p className="text-sm text-slate-500">{vd.maintenanceIntro}</p>
+          {ROUTINE_TYPES.map(({ key, intervalMonths }) => {
+            const latest = maintenanceLogs
+              .filter((l) => l.type === key)
+              .sort((a, b) => new Date(b.performedAt).getTime() - new Date(a.performedAt).getTime())[0]
+            return (
+              <MaintenanceRow
+                key={key}
+                vehicleId={params.id}
+                typeKey={key}
+                intervalMonths={intervalMonths}
+                currentMileage={vehicle.mileage}
+                log={latest}
+                onLogged={fetchMaintenance}
+              />
+            )
+          })}
+        </div>
+      )}
+
+      {activeTab === 'calendar' && (
+        <VehicleCalendar vehicleId={params.id} />
+      )}
+
+      {activeTab === 'pricing' && (
+        <VehiclePricingManager vehicleId={params.id} />
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/fleet/page.tsx b/dashboard/src/app/(dashboard)/fleet/page.tsx
new file mode 100644
index 0000000..1add670
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/fleet/page.tsx
@@ -0,0 +1,806 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Plus, Edit, Eye, Search, Upload, X, DollarSign } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { EMPLOYEE_PROFILE_KEY, apiFetch } from '@/lib/api'
+import { formatCurrency } from '@rentaldrivego/types'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface Vehicle {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  status: 'AVAILABLE' | 'RESERVED' | 'READY' | 'RENTED' | 'RETURNED' | 'NEEDS_CLEANING' | 'MAINTENANCE' | 'DAMAGE_REVIEW' | 'OUT_OF_SERVICE'
+  dailyRate: number
+  isPublished: boolean
+  primaryPhoto: string | null
+  licensePlate: string
+  vin?: string | null
+  pickupLocations?: string[]
+  allowDifferentDropoff?: boolean
+  dropoffLocations?: string[]
+}
+
+interface AddVehicleModalProps {
+  open: boolean
+  onClose: () => void
+  onSaved: () => void
+}
+
+type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
+
+const ALL_STATUSES: Vehicle['status'][] = [
+  'AVAILABLE', 'RESERVED', 'READY', 'RENTED',
+  'RETURNED', 'NEEDS_CLEANING', 'MAINTENANCE', 'DAMAGE_REVIEW', 'OUT_OF_SERVICE',
+]
+
+interface MaintenanceModalProps {
+  vehicleId: string
+  vehicleName: string
+  open: boolean
+  onClose: () => void
+  onSaved: () => void
+}
+
+function MaintenanceModal({ vehicleId, vehicleName, open, onClose, onSaved }: MaintenanceModalProps) {
+  const { dict } = useDashboardI18n()
+  const f = dict.fleet
+  const today = new Date().toISOString().slice(0, 10)
+  const [form, setForm] = useState({ type: '', description: '', cost: '', mileage: '', performedAt: today, nextDueAt: '' })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const reset = () => {
+    setForm({ type: '', description: '', cost: '', mileage: '', performedAt: today, nextDueAt: '' })
+    setError(null)
+  }
+
+  const handleClose = () => { reset(); onClose() }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.type) { setError(f.maintenanceTypeRequired); return }
+    setLoading(true)
+    setError(null)
+    try {
+      await apiFetch(`/vehicles/${vehicleId}/maintenance`, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: form.type,
+          description: form.description || undefined,
+          cost: form.cost ? Math.round(parseFloat(form.cost) * 100) : undefined,
+          mileage: form.mileage ? parseInt(form.mileage) : undefined,
+          performedAt: new Date(form.performedAt).toISOString(),
+          nextDueAt: form.nextDueAt ? new Date(form.nextDueAt).toISOString() : undefined,
+        }),
+      })
+      onSaved()
+      handleClose()
+    } catch (err: any) {
+      setError(err.message ?? f.failedToSave)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6">
+        <h2 className="text-lg font-semibold text-slate-900 mb-1">{f.logMaintenance}</h2>
+        <p className="text-sm text-slate-500 mb-5">{f.maintenanceSubtitle(vehicleName)}</p>
+        {error && <div className="px-3 py-2 mb-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.typeLabel}</label>
+            <input className="input-field" placeholder={f.typePlaceholder} value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })} autoFocus />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.description}</label>
+            <textarea className="input-field resize-none" rows={2} placeholder={f.descriptionPlaceholder} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.date}</label>
+              <input type="date" className="input-field" value={form.performedAt} onChange={(e) => setForm({ ...form, performedAt: e.target.value })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.nextDueDate}</label>
+              <input type="date" className="input-field" value={form.nextDueAt} onChange={(e) => setForm({ ...form, nextDueAt: e.target.value })} />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.cost}</label>
+              <input type="number" className="input-field" placeholder="0.00" min="0" step="0.01" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.odometer}</label>
+              <input type="number" className="input-field" placeholder="e.g. 52000" min="0" value={form.mileage} onChange={(e) => setForm({ ...form, mileage: e.target.value })} />
+            </div>
+          </div>
+          <div className="flex gap-3 pt-1">
+            <button type="button" onClick={handleClose} className="btn-secondary flex-1">{f.skip}</button>
+            <button type="submit" disabled={loading} className="btn-primary flex-1">{loading ? f.saving : f.saveLog}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+function StatusDropdown({ vehicleId, status, onStatusChange, disabled, disabledReason, onError }: {
+  vehicleId: string
+  status: Vehicle['status']
+  onStatusChange: (id: string, status: Vehicle['status']) => void
+  disabled?: boolean
+  disabledReason?: string
+  onError: (message: string) => void
+}) {
+  const { dict } = useDashboardI18n()
+  const f = dict.fleet
+  const [saving, setSaving] = useState(false)
+
+  const select = async (next: Vehicle['status']) => {
+    if (next === status) return
+    setSaving(true)
+    try {
+      await apiFetch(`/vehicles/${vehicleId}/status`, { method: 'PATCH', body: JSON.stringify({ status: next }) })
+      onStatusChange(vehicleId, next)
+    } catch (err: any) {
+      onError(err.message ?? 'Failed to update vehicle status')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <select
+      value={status}
+      disabled={disabled || saving}
+      title={disabled ? disabledReason : undefined}
+      onChange={(e) => void select(e.target.value as Vehicle['status'])}
+      className={[
+        'rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm',
+        disabled || saving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:border-slate-300',
+      ].join(' ')}
+    >
+      {ALL_STATUSES.map((value) => (
+        <option key={value} value={value}>
+          {f.statusLabels[value]}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+const PRESET_COLORS = ['White', 'Black', 'Silver', 'Gray', 'Red', 'Blue', 'Green', 'Yellow', 'Orange', 'Brown', 'Beige', 'Gold']
+const PRESET_MAKES = ['Audi', 'BMW', 'Chevrolet', 'Citroën', 'Dacia', 'Fiat', 'Ford', 'Honda', 'Hyundai', 'Kia', 'Mazda', 'Mercedes-Benz', 'Nissan', 'Opel', 'Peugeot', 'Renault', 'Seat', 'Skoda', 'Suzuki', 'Toyota', 'Volkswagen', 'Volvo']
+const MODELS_BY_MAKE: Record<string, string[]> = {
+  'Audi':          ['A1', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q2', 'Q3', 'Q5', 'Q7', 'Q8', 'TT'],
+  'BMW':           ['116i', '118i', '120i', '218i', '316i', '318i', '320i', '325i', 'X1', 'X2', 'X3', 'X4', 'X5', 'X6', 'X7'],
+  'Chevrolet':     ['Aveo', 'Captiva', 'Cruze', 'Malibu', 'Spark', 'Trax'],
+  'Citroën':       ['Berlingo', 'C1', 'C3', 'C3 Aircross', 'C4', 'C4 Cactus', 'C5', 'C5 Aircross', 'Jumpy', 'SpaceTourer'],
+  'Dacia':         ['Dokker', 'Duster', 'Jogger', 'Lodgy', 'Logan', 'Sandero', 'Spring'],
+  'Fiat':          ['500', '500X', 'Bravo', 'Doblo', 'Ducato', 'Panda', 'Punto', 'Tipo'],
+  'Ford':          ['B-Max', 'C-Max', 'EcoSport', 'Edge', 'Explorer', 'Fiesta', 'Focus', 'Fusion', 'Kuga', 'Mondeo', 'Mustang', 'Puma', 'Ranger', 'S-Max', 'Transit'],
+  'Honda':         ['Accord', 'Civic', 'CR-V', 'HR-V', 'Jazz', 'Pilot'],
+  'Hyundai':       ['Accent', 'Creta', 'Elantra', 'i10', 'i20', 'i30', 'ix35', 'Kona', 'Santa Fe', 'Sonata', 'Tucson'],
+  'Kia':           ['Carnival', 'Ceed', 'Niro', 'Optima', 'Picanto', 'Rio', 'Sorento', 'Soul', 'Sportage', 'Stinger'],
+  'Mazda':         ['2', '3', '6', 'CX-3', 'CX-5', 'CX-9', 'MX-5'],
+  'Mercedes-Benz': ['A-Class', 'B-Class', 'C-Class', 'CLA', 'E-Class', 'GLA', 'GLB', 'GLC', 'GLE', 'GLS', 'S-Class', 'Sprinter', 'Vito'],
+  'Nissan':        ['Juke', 'Leaf', 'Micra', 'Murano', 'Navara', 'Note', 'Pathfinder', 'Patrol', 'Pulsar', 'Qashqai', 'X-Trail'],
+  'Opel':          ['Astra', 'Corsa', 'Crossland', 'Grandland', 'Insignia', 'Meriva', 'Mokka', 'Zafira'],
+  'Peugeot':       ['108', '208', '2008', '3008', '308', '4008', '408', '5008', '508', 'Boxer', 'Expert', 'Partner', 'Traveller'],
+  'Renault':       ['Arkana', 'Captur', 'Clio', 'Duster', 'Espace', 'Grand Scenic', 'Kadjar', 'Kangoo', 'Koleos', 'Laguna', 'Master', 'Megane', 'Scenic', 'Talisman', 'Trafic', 'Twingo', 'Zoe'],
+  'Seat':          ['Arona', 'Arosa', 'Ateca', 'Ibiza', 'Leon', 'Tarraco', 'Toledo'],
+  'Skoda':         ['Fabia', 'Karoq', 'Kodiaq', 'Octavia', 'Rapid', 'Scala', 'Superb', 'Yeti'],
+  'Suzuki':        ['Alto', 'Baleno', 'Celerio', 'Ignis', 'Jimny', 'S-Cross', 'Swift', 'Vitara'],
+  'Toyota':        ['Auris', 'Avensis', 'Aygo', 'Camry', 'Corolla', 'C-HR', 'Fortuner', 'Hilux', 'Land Cruiser', 'Prius', 'RAV4', 'Rush', 'Urban Cruiser', 'Yaris'],
+  'Volkswagen':    ['Amarok', 'Arteon', 'Caddy', 'Golf', 'ID.3', 'ID.4', 'Passat', 'Polo', 'Sharan', 'T-Cross', 'T-Roc', 'Tiguan', 'Touareg', 'Touran', 'Transporter', 'Up'],
+  'Volvo':         ['S60', 'S90', 'V40', 'V60', 'V90', 'XC40', 'XC60', 'XC90'],
+}
+
+function parseLocationInput(value: string) {
+  return value
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+}
+
+function AddVehicleModal({ open, onClose, onSaved }: AddVehicleModalProps) {
+  const { dict } = useDashboardI18n()
+  const f = dict.fleet
+  const [form, setForm] = useState({
+    make: '', model: '', year: new Date().getFullYear(), category: 'ECONOMY',
+    licensePlate: '', vin: '', color: '', seats: 5, transmission: 'MANUAL',
+    fuelType: 'GASOLINE', mileage: '', pickupLocations: '', allowDifferentDropoff: false, dropoffLocations: '',
+  })
+  const [colorSelect, setColorSelect] = useState('')
+  const [makeSelect, setMakeSelect] = useState('')
+  const [modelSelect, setModelSelect] = useState('')
+  const [photoFiles, setPhotoFiles] = useState<File[]>([])
+  const [photoPreviews, setPhotoPreviews] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? [])
+    if (!files.length) return
+    const combined = [...photoFiles, ...files].slice(0, 10)
+    setPhotoFiles(combined)
+    setPhotoPreviews(combined.map((file) => URL.createObjectURL(file)))
+    e.target.value = ''
+  }
+
+  const removePhoto = (index: number) => {
+    URL.revokeObjectURL(photoPreviews[index])
+    const files = photoFiles.filter((_, i) => i !== index)
+    const previews = photoPreviews.filter((_, i) => i !== index)
+    setPhotoFiles(files)
+    setPhotoPreviews(previews)
+  }
+
+  const reset = () => {
+    setForm({
+      make: '', model: '', year: new Date().getFullYear(), category: 'ECONOMY',
+      licensePlate: '', vin: '', color: '', seats: 5, transmission: 'MANUAL',
+      fuelType: 'GASOLINE', mileage: '', pickupLocations: '', allowDifferentDropoff: false, dropoffLocations: '',
+    })
+    setColorSelect('')
+    setMakeSelect('')
+    setModelSelect('')
+    photoPreviews.forEach((p) => URL.revokeObjectURL(p))
+    setPhotoFiles([])
+    setPhotoPreviews([])
+    setError(null)
+  }
+
+  const handleClose = () => { reset(); onClose() }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.make)         { setError(f.makeMissing); return }
+    if (!form.model)        { setError(f.modelMissing); return }
+    if (!form.licensePlate) { setError(f.plateMissing); return }
+    if (form.allowDifferentDropoff && parseLocationInput(form.dropoffLocations).length === 0) {
+      setError(f.dropoffLocationsRequired)
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const vehicle = await apiFetch<{ id: string }>('/vehicles', {
+        method: 'POST',
+        body: JSON.stringify({
+          ...form,
+          year: Number(form.year),
+          seats: Number(form.seats),
+          vin: form.vin.trim() || undefined,
+          mileage: form.mileage ? Number(form.mileage) : undefined,
+          pickupLocations: parseLocationInput(form.pickupLocations),
+          allowDifferentDropoff: form.allowDifferentDropoff,
+          dropoffLocations: form.allowDifferentDropoff ? parseLocationInput(form.dropoffLocations) : [],
+        }),
+      })
+      if (photoFiles.length > 0) {
+        const fd = new FormData()
+        photoFiles.forEach((file) => fd.append('photos', file))
+        await apiFetch(`/vehicles/${vehicle.id}/photos`, { method: 'POST', body: fd })
+      }
+      onSaved()
+      handleClose()
+    } catch (err: any) {
+      setError(err.message ?? f.failedToAdd)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!open) return null
+
+  const presetModels = form.make && MODELS_BY_MAKE[form.make] ? MODELS_BY_MAKE[form.make] : null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
+        <h2 className="text-lg font-semibold text-slate-900 mb-5">{f.addNewVehicle}</h2>
+        {error && (
+          <div className="px-3 py-2 mb-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+        )}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Make & Model */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.make}</label>
+              <select
+                className="input-field"
+                value={makeSelect}
+                onChange={(e) => {
+                  setMakeSelect(e.target.value)
+                  setModelSelect('')
+                  if (e.target.value !== 'custom') setForm({ ...form, make: e.target.value, model: '' })
+                  else setForm({ ...form, make: '', model: '' })
+                }}
+              >
+                <option value="">{f.selectMake}</option>
+                {PRESET_MAKES.map((m) => <option key={m} value={m}>{m}</option>)}
+                <option value="custom">{f.other}</option>
+              </select>
+              {makeSelect === 'custom' && (
+                <input className="input-field mt-2" placeholder={f.typeMake} required value={form.make} onChange={(e) => setForm({ ...form, make: e.target.value })} autoFocus />
+              )}
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.model}</label>
+              {!presetModels ? (
+                <input className="input-field" placeholder={f.typeModel} required value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} />
+              ) : (
+                <>
+                  <select
+                    className="input-field"
+                    value={modelSelect}
+                    onChange={(e) => {
+                      setModelSelect(e.target.value)
+                      if (e.target.value !== 'custom') setForm({ ...form, model: e.target.value })
+                      else setForm({ ...form, model: '' })
+                    }}
+                  >
+                    <option value="">{f.selectModel}</option>
+                    {presetModels.map((m) => <option key={m} value={m}>{m}</option>)}
+                    <option value="custom">{f.other}</option>
+                  </select>
+                  {modelSelect === 'custom' && (
+                    <input className="input-field mt-2" placeholder={f.typeModel} required value={form.model} onChange={(e) => setForm({ ...form, model: e.target.value })} autoFocus />
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Year & Category */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.year}</label>
+              <input type="number" className="input-field" min="1990" max={new Date().getFullYear() + 1} required value={form.year} onChange={(e) => setForm({ ...form, year: Number(e.target.value) })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.category}</label>
+              <select className="input-field" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })}>
+                {(['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'] as const).map((c) => (
+                  <option key={c} value={c}>{f.categoryLabels[c]}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* License Plate & VIN */}
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.licensePlate}</label>
+              <input className="input-field" placeholder="AB-1234-CD" required value={form.licensePlate} onChange={(e) => setForm({ ...form, licensePlate: e.target.value })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.vin}</label>
+              <input className="input-field" placeholder="1HGCM82633A123456" value={form.vin} onChange={(e) => setForm({ ...form, vin: e.target.value })} />
+            </div>
+          </div>
+
+          {/* Color, Seats, Transmission */}
+          <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.color}</label>
+              <select
+                className="input-field"
+                value={colorSelect}
+                onChange={(e) => {
+                  setColorSelect(e.target.value)
+                  if (e.target.value !== 'custom') setForm({ ...form, color: e.target.value })
+                  else setForm({ ...form, color: '' })
+                }}
+              >
+                <option value="">{f.select}</option>
+                {PRESET_COLORS.map((c) => <option key={c} value={c}>{c}</option>)}
+                <option value="custom">{f.other}</option>
+              </select>
+              {colorSelect === 'custom' && (
+                <input className="input-field mt-2" placeholder={f.typeColor} value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} autoFocus />
+              )}
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.seats}</label>
+              <input type="number" className="input-field" min="2" max="15" value={form.seats} onChange={(e) => setForm({ ...form, seats: Number(e.target.value) })} />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.transmission}</label>
+              <select className="input-field" value={form.transmission} onChange={(e) => setForm({ ...form, transmission: e.target.value })}>
+                <option value="MANUAL">{f.manual}</option>
+                <option value="AUTOMATIC">{f.automatic}</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Fuel Type & Odometer */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.fuelType}</label>
+              <select className="input-field" value={form.fuelType} onChange={(e) => setForm({ ...form, fuelType: e.target.value })}>
+                {(['GASOLINE', 'DIESEL', 'ELECTRIC', 'HYBRID'] as const).map((fuel) => (
+                  <option key={fuel} value={fuel}>{f.fuelTypeLabels[fuel]}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.odometer}</label>
+              <input
+                type="number"
+                className="input-field"
+                placeholder="e.g. 45000"
+                min="0"
+                value={form.mileage}
+                onChange={(e) => setForm({ ...form, mileage: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-4 rounded-xl border border-slate-200 bg-slate-50 p-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.pickupLocations}</label>
+              <textarea
+                className="input-field resize-none"
+                rows={2}
+                placeholder={f.pickupLocationsPlaceholder}
+                value={form.pickupLocations}
+                onChange={(e) => setForm({ ...form, pickupLocations: e.target.value })}
+              />
+              <p className="mt-1 text-xs text-slate-400">{f.locationHint}</p>
+            </div>
+            <label className="flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm font-medium text-slate-700">
+              <input
+                type="checkbox"
+                checked={form.allowDifferentDropoff}
+                onChange={(e) => setForm({
+                  ...form,
+                  allowDifferentDropoff: e.target.checked,
+                  dropoffLocations: e.target.checked ? form.dropoffLocations : '',
+                })}
+                className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+              />
+              <span>{f.allowDifferentDropoff}</span>
+            </label>
+            {form.allowDifferentDropoff && (
+              <div>
+                <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.dropoffLocations}</label>
+                <textarea
+                  className="input-field resize-none"
+                  rows={2}
+                  placeholder={f.dropoffLocationsPlaceholder}
+                  value={form.dropoffLocations}
+                  onChange={(e) => setForm({ ...form, dropoffLocations: e.target.value })}
+                />
+                <p className="mt-1 text-xs text-slate-400">{f.locationHint}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Photos */}
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1.5">{f.photosLabel}</label>
+            {photoPreviews.length > 0 && (
+              <div className="grid grid-cols-3 gap-2 mb-3">
+                {photoPreviews.map((src, i) => (
+                  <div key={i} className="relative h-24 rounded-lg overflow-hidden bg-slate-100 group">
+                    <Image src={src} alt={`preview ${i + 1}`} fill className="object-cover" unoptimized />
+                    <button
+                      type="button"
+                      onClick={() => removePhoto(i)}
+                      className="absolute top-1 right-1 p-0.5 bg-blue-950/60 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            {photoFiles.length < 10 && (
+              <>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  className="hidden"
+                  onChange={handlePhotoChange}
+                />
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-slate-200 rounded-xl text-sm text-slate-500 hover:border-slate-300 hover:text-slate-700 transition-colors"
+                >
+                  <Upload className="w-4 h-4" />
+                  {photoFiles.length === 0 ? f.clickToAddPhotos : f.addMorePhotos}
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <button type="button" onClick={handleClose} className="btn-secondary flex-1">{f.cancel}</button>
+            <button type="submit" disabled={loading} className="btn-primary flex-1">
+              {loading ? f.adding : f.addVehicle}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default function FleetPage() {
+  const { dict, language } = useDashboardI18n()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const f = dict.fleet
+  const managerRequiredMessage =
+    language === 'fr'
+      ? 'Cette action nécessite le rôle Gestionnaire ou supérieur.'
+      : language === 'ar'
+        ? 'يتطلب هذا الإجراء دور المدير أو أعلى.'
+        : 'This action requires the Manager role or higher.'
+  const [vehicles, setVehicles] = useState<Vehicle[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [employeeRole, setEmployeeRole] = useState<EmployeeRole | null>(null)
+  const [search, setSearch] = useState('')
+  const [statusFilter, setStatusFilter] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState('')
+  const [publishedFilter, setPublishedFilter] = useState('')
+  const [maintenanceModal, setMaintenanceModal] = useState<{ vehicleId: string; vehicleName: string } | null>(null)
+
+  const fetchVehicles = () => {
+    setLoading(true)
+    apiFetch<Vehicle[]>('/vehicles?pageSize=100')
+      .then((result) => setVehicles(result ?? []))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => { fetchVehicles() }, [])
+
+  useEffect(() => {
+    const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
+    if (cached) {
+      try {
+        const profile = JSON.parse(cached) as { role?: EmployeeRole }
+        if (profile.role) setEmployeeRole(profile.role)
+      } catch {}
+    }
+
+    let cancelled = false
+
+    apiFetch<{ employee: { role: EmployeeRole } }>('/auth/employee/me')
+      .then(({ employee }) => {
+        if (cancelled) return
+        setEmployeeRole(employee.role)
+      })
+      .catch(() => {})
+
+    return () => { cancelled = true }
+  }, [])
+
+  useEffect(() => {
+    if (searchParams.get('modal') === 'add-car') {
+      setShowAddModal(true)
+    }
+  }, [searchParams])
+
+  const canManageFleet = employeeRole === 'OWNER' || employeeRole === 'MANAGER'
+
+  function closeAddModal() {
+    setShowAddModal(false)
+    if (searchParams.get('modal') === 'add-car') {
+      const params = new URLSearchParams(searchParams.toString())
+      params.delete('modal')
+      router.replace(params.toString() ? `${pathname}?${params.toString()}` : pathname)
+    }
+  }
+
+  const togglePublished = async (id: string, current: boolean) => {
+    setActionError(null)
+    try {
+      await apiFetch(`/vehicles/${id}`, { method: 'PATCH', body: JSON.stringify({ isPublished: !current }) })
+      setVehicles((prev) => prev.map((v) => v.id === id ? { ...v, isPublished: !current } : v))
+    } catch (err: any) {
+      setActionError(err.statusCode === 403 ? managerRequiredMessage : (err.message ?? 'Failed to update publication status'))
+    }
+  }
+
+  const PUBLISHED = new Set<Vehicle['status']>(['AVAILABLE', 'RESERVED', 'READY', 'RENTED'])
+
+  const changeStatus = (id: string, status: Vehicle['status']) => {
+    const isPublished = PUBLISHED.has(status)
+    setVehicles((prev) => prev.map((v) => v.id === id ? { ...v, status, isPublished } : v))
+    setStatusFilter('')
+    if (status === 'MAINTENANCE') {
+      const vehicle = vehicles.find((v) => v.id === id)
+      if (vehicle) setMaintenanceModal({ vehicleId: id, vehicleName: `${vehicle.make} ${vehicle.model}` })
+    }
+  }
+
+  const filtered = vehicles.filter((v) => {
+    if (search && !`${v.make} ${v.model} ${v.licensePlate} ${v.vin ?? ''}`.toLowerCase().includes(search.toLowerCase())) return false
+    if (statusFilter && v.status !== statusFilter) return false
+    if (categoryFilter && v.category !== categoryFilter) return false
+    if (publishedFilter === 'published' && !v.isPublished) return false
+    if (publishedFilter === 'unpublished' && v.isPublished) return false
+    return true
+  })
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rdg-page-heading flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{f.heading}</h2>
+          <p className="text-sm text-slate-500 mt-0.5">{f.vehicleCount(vehicles.length)}</p>
+        </div>
+        <button onClick={() => setShowAddModal(true)} className="btn-primary" disabled={!canManageFleet} title={!canManageFleet ? managerRequiredMessage : undefined}>
+          <Plus className="w-4 h-4" /> {f.addVehicle}
+        </button>
+      </div>
+
+      {actionError ? <div className="card p-4 text-sm text-red-600">{actionError}</div> : null}
+
+      {/* Filters */}
+      <div className="card p-4 flex flex-wrap gap-3">
+        <div className="flex items-center gap-2 flex-1 min-w-48">
+          <Search className="w-4 h-4 text-slate-400" />
+          <input
+            className="flex-1 text-sm outline-none placeholder:text-slate-400"
+            placeholder={f.searchPlaceholder}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+        <select className="input-field w-36" value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
+          <option value="">{f.allStatuses}</option>
+          {ALL_STATUSES.map((s) => (
+            <option key={s} value={s}>{f.statusLabels[s]}</option>
+          ))}
+        </select>
+        <select className="input-field w-36" value={categoryFilter} onChange={(e) => setCategoryFilter(e.target.value)}>
+          <option value="">{f.allCategories}</option>
+          {(['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'] as const).map((c) => (
+            <option key={c} value={c}>{f.categoryLabels[c]}</option>
+          ))}
+        </select>
+        <select className="input-field w-36" value={publishedFilter} onChange={(e) => setPublishedFilter(e.target.value)}>
+          <option value="">{f.allVisibility}</option>
+          <option value="published">{f.published}</option>
+          <option value="unpublished">{f.unpublished}</option>
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="card overflow-hidden">
+        {loading ? (
+          <div className="flex items-center justify-center h-48">
+            <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
+          </div>
+        ) : error ? (
+          <div className="p-8 text-center">
+            <p className="text-red-600 font-medium">{error}</p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-100 bg-slate-50">
+                  <th className="text-start px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colVehicle}</th>
+                  <th className="text-start px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colCategory}</th>
+                  <th className="text-start px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colStatus}</th>
+                  <th className="text-start px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colDailyRate}</th>
+                  <th className="text-start px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colPublished}</th>
+                  <th className="text-end px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{f.colActions}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {filtered.map((vehicle) => (
+                  <tr key={vehicle.id} className="hover:bg-slate-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div>
+                        <p className="text-sm font-semibold text-slate-900">{vehicle.make} {vehicle.model}</p>
+                        <p className="text-xs text-slate-400">
+                          {vehicle.year} · {vehicle.licensePlate}
+                          {vehicle.vin ? ` · ${vehicle.vin}` : ''}
+                        </p>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <span className="badge-gray">{f.categoryLabels[vehicle.category as keyof typeof f.categoryLabels] ?? vehicle.category}</span>
+                    </td>
+                    <td className="px-6 py-4">
+                      <StatusDropdown
+                        vehicleId={vehicle.id}
+                        status={vehicle.status}
+                        onStatusChange={changeStatus}
+                        disabled={!canManageFleet}
+                        disabledReason={managerRequiredMessage}
+                        onError={setActionError}
+                      />
+                    </td>
+                    <td className="px-6 py-4 text-sm font-medium text-slate-900">
+                      {formatCurrency(vehicle.dailyRate, 'MAD')}{f.perDay}
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex items-center">
+                        <button
+                          onClick={() => togglePublished(vehicle.id, vehicle.isPublished)}
+                          disabled={!canManageFleet}
+                          title={!canManageFleet ? managerRequiredMessage : undefined}
+                          className={[
+                            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none',
+                            !canManageFleet ? 'cursor-not-allowed opacity-60' : '',
+                            vehicle.isPublished ? 'bg-blue-600' : 'bg-slate-200',
+                          ].join(' ')}
+                        >
+                          <span
+                            className={[
+                              'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition duration-200',
+                              vehicle.isPublished ? 'ltr:translate-x-5 rtl:-translate-x-5' : 'translate-x-0',
+                            ].join(' ')}
+                          />
+                        </button>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex items-center justify-end gap-2 rtl:justify-start">
+                        <Link href={`/fleet/${vehicle.id}?tab=pricing`} title="Manage pricing" aria-label="Manage pricing" className="p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
+                          <DollarSign className="w-4 h-4" />
+                        </Link>
+                        <Link href={`/fleet/${vehicle.id}`} className="p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
+                          <Eye className="w-4 h-4" />
+                        </Link>
+                        <Link href={`/fleet/${vehicle.id}`} className="p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
+                          <Edit className="w-4 h-4" />
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+                {filtered.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-12 text-center text-sm text-slate-400">
+                      {vehicles.length === 0 ? f.noVehicles : f.noMatch}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <AddVehicleModal open={showAddModal} onClose={closeAddModal} onSaved={fetchVehicles} />
+      {maintenanceModal && (
+        <MaintenanceModal
+          vehicleId={maintenanceModal.vehicleId}
+          vehicleName={maintenanceModal.vehicleName}
+          open={true}
+          onClose={() => setMaintenanceModal(null)}
+          onSaved={() => setMaintenanceModal(null)}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/layout.tsx b/dashboard/src/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..9fbf3a0
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,23 @@
+import DashboardAccessGuard from '@/components/layout/DashboardAccessGuard'
+import Sidebar from '@/components/layout/Sidebar'
+import TopBar from '@/components/layout/TopBar'
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rdg-app-shell fleet-dashboard-shell flex min-h-screen transition-colors print:block print:min-h-0 print:bg-white">
+      <div className="print:hidden">
+        <Sidebar />
+      </div>
+      <div className="rdg-workspace ms-0 flex min-h-screen min-w-0 flex-1 flex-col lg:ms-[var(--rdg-sidebar-size)] print:ms-0 print:min-h-0 print:block">
+        <div className="print:hidden">
+          <TopBar />
+        </div>
+        <main className="rdg-app-main flex-1 overflow-y-auto print:overflow-visible print:p-0">
+          <div className="rdg-app-content">
+            <DashboardAccessGuard>{children}</DashboardAccessGuard>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/notifications/page.tsx b/dashboard/src/app/(dashboard)/notifications/page.tsx
new file mode 100644
index 0000000..a503745
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/notifications/page.tsx
@@ -0,0 +1,469 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type NotificationItem = {
+  id: string
+  type: string
+  title: string
+  body: string
+  channel: string
+  status: string
+  sentAt: string | null
+  readAt: string | null
+  createdAt: string
+  providerMessageId: string | null
+  locale: string
+}
+
+type PreferenceItem = {
+  notificationType: string
+  channel: string
+  enabled: boolean
+}
+
+const COMPANY_EVENTS = [
+  'NEW_RESERVATION',
+  'RESERVATION_CANCELLED',
+  'PAYMENT_RECEIVED',
+  'SUBSCRIPTION_TRIAL_ENDING',
+  'MAINTENANCE_DUE',
+  'OFFER_EXPIRING',
+]
+
+const COMPANY_CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'IN_APP', 'PUSH']
+
+const CHANNEL_BADGE: Record<string, string> = {
+  EMAIL:    'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  SMS:      'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  WHATSAPP: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
+  IN_APP:   'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+  PUSH:     'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  PENDING:   'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+  SENT:      'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  DELIVERED: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  FAILED:    'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  READ:      'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400',
+}
+
+export default function DashboardNotificationsPage() {
+  const { language } = useDashboardI18n()
+  const [notifications, setNotifications] = useState<NotificationItem[]>([])
+  const [history, setHistory] = useState<NotificationItem[]>([])
+  const [preferences, setPreferences] = useState<Record<string, boolean>>({})
+  const [activeTab, setActiveTab] = useState<'inbox' | 'history' | 'preferences'>('inbox')
+  const [loading, setLoading] = useState(true)
+  const [historyLoading, setHistoryLoading] = useState(false)
+  const [historyLoaded, setHistoryLoaded] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [filterChannel, setFilterChannel] = useState('')
+  const [filterStatus, setFilterStatus] = useState('')
+
+  const copy = {
+    en: {
+      title: 'Notifications',
+      subtitle: 'Track in-app alerts, audit delivery history, and control preferences for your team account.',
+      inbox: 'Inbox',
+      history: 'History',
+      preferences: 'Preferences',
+      markAllRead: 'Mark all as read',
+      loading: 'Loading notifications…',
+      empty: 'No notifications yet.',
+      read: 'Read',
+      markRead: 'Mark as read',
+      event: 'Event',
+      channel: 'Channel',
+      status: 'Status',
+      sentAt: 'Sent at',
+      date: 'Date',
+      allChannels: 'All channels',
+      allStatuses: 'All statuses',
+      savePreferences: 'Save preferences',
+      saving: 'Saving…',
+      failedLoad: 'Failed to load notifications',
+      failedSave: 'Failed to save preferences',
+      noHistory: 'No notification history found.',
+      channels: { EMAIL: 'Email', SMS: 'SMS', WHATSAPP: 'WhatsApp', IN_APP: 'In-app', PUSH: 'Push' } as Record<string, string>,
+      statuses: { PENDING: 'Pending', SENT: 'Sent', DELIVERED: 'Delivered', FAILED: 'Failed', READ: 'Read' } as Record<string, string>,
+      events: {
+        NEW_RESERVATION: 'New reservation',
+        RESERVATION_CANCELLED: 'Reservation cancelled',
+        PAYMENT_RECEIVED: 'Payment received',
+        SUBSCRIPTION_TRIAL_ENDING: 'Trial ending',
+        MAINTENANCE_DUE: 'Maintenance due',
+        OFFER_EXPIRING: 'Offer expiring',
+        BOOKING_CONFIRMED: 'Booking confirmed',
+        VEHICLE_MAINTENANCE_DUE: 'Vehicle maintenance due',
+      } as Record<string, string>,
+    },
+    fr: {
+      title: 'Notifications',
+      subtitle: 'Suivez les alertes, auditez l\'historique de diffusion et gérez les préférences de votre équipe.',
+      inbox: 'Boîte de réception',
+      history: 'Historique',
+      preferences: 'Préférences',
+      markAllRead: 'Tout marquer comme lu',
+      loading: 'Chargement des notifications…',
+      empty: 'Aucune notification pour le moment.',
+      read: 'Lu',
+      markRead: 'Marquer comme lu',
+      event: 'Événement',
+      channel: 'Canal',
+      status: 'Statut',
+      sentAt: 'Envoyé le',
+      date: 'Date',
+      allChannels: 'Tous les canaux',
+      allStatuses: 'Tous les statuts',
+      savePreferences: 'Enregistrer les préférences',
+      saving: 'Enregistrement…',
+      failedLoad: 'Échec du chargement des notifications',
+      failedSave: 'Échec de l\'enregistrement des préférences',
+      noHistory: 'Aucun historique de notification trouvé.',
+      channels: { EMAIL: 'Email', SMS: 'SMS', WHATSAPP: 'WhatsApp', IN_APP: 'Dans l\'application', PUSH: 'Push' } as Record<string, string>,
+      statuses: { PENDING: 'En attente', SENT: 'Envoyé', DELIVERED: 'Délivré', FAILED: 'Échoué', READ: 'Lu' } as Record<string, string>,
+      events: {
+        NEW_RESERVATION: 'Nouvelle réservation',
+        RESERVATION_CANCELLED: 'Réservation annulée',
+        PAYMENT_RECEIVED: 'Paiement reçu',
+        SUBSCRIPTION_TRIAL_ENDING: 'Fin d\'essai proche',
+        MAINTENANCE_DUE: 'Maintenance due',
+        OFFER_EXPIRING: 'Offre expirante',
+        BOOKING_CONFIRMED: 'Réservation confirmée',
+        VEHICLE_MAINTENANCE_DUE: 'Maintenance véhicule due',
+      } as Record<string, string>,
+    },
+    ar: {
+      title: 'الإشعارات',
+      subtitle: 'تابع التنبيهات وراجع سجل الإرسال وتحكم في التفضيلات لحساب فريقك.',
+      inbox: 'صندوق الوارد',
+      history: 'السجل',
+      preferences: 'التفضيلات',
+      markAllRead: 'تحديد الكل كمقروء',
+      loading: 'جارٍ تحميل الإشعارات…',
+      empty: 'لا توجد إشعارات حالياً.',
+      read: 'مقروء',
+      markRead: 'تحديد كمقروء',
+      event: 'الحدث',
+      channel: 'القناة',
+      status: 'الحالة',
+      sentAt: 'وقت الإرسال',
+      date: 'التاريخ',
+      allChannels: 'جميع القنوات',
+      allStatuses: 'جميع الحالات',
+      savePreferences: 'حفظ التفضيلات',
+      saving: 'جارٍ الحفظ…',
+      failedLoad: 'فشل تحميل الإشعارات',
+      failedSave: 'فشل حفظ التفضيلات',
+      noHistory: 'لا يوجد سجل إشعارات.',
+      channels: { EMAIL: 'البريد', SMS: 'رسائل', WHATSAPP: 'واتساب', IN_APP: 'داخل التطبيق', PUSH: 'إشعار فوري' } as Record<string, string>,
+      statuses: { PENDING: 'قيد الانتظار', SENT: 'مرسل', DELIVERED: 'تم التسليم', FAILED: 'فشل', READ: 'مقروء' } as Record<string, string>,
+      events: {
+        NEW_RESERVATION: 'حجز جديد',
+        RESERVATION_CANCELLED: 'إلغاء حجز',
+        PAYMENT_RECEIVED: 'تم استلام الدفع',
+        SUBSCRIPTION_TRIAL_ENDING: 'اقتراب نهاية التجربة',
+        MAINTENANCE_DUE: 'صيانة مستحقة',
+        OFFER_EXPIRING: 'عرض على وشك الانتهاء',
+        BOOKING_CONFIRMED: 'تأكيد الحجز',
+        VEHICLE_MAINTENANCE_DUE: 'صيانة المركبة مستحقة',
+      } as Record<string, string>,
+    },
+  }[language]
+
+  async function load() {
+    setLoading(true)
+    setError(null)
+    try {
+      const [notificationData, preferenceData] = await Promise.all([
+        apiFetch<NotificationItem[]>('/notifications/company'),
+        apiFetch<PreferenceItem[]>('/notifications/company/preferences'),
+      ])
+      setNotifications(notificationData)
+      const mapped = Object.fromEntries(
+        preferenceData.map((item) => [`${item.notificationType}:${item.channel}`, item.enabled]),
+      )
+      setPreferences(mapped)
+    } catch (err: any) {
+      setError(err.message ?? copy.failedLoad)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function loadHistory() {
+    setHistoryLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams()
+      if (filterChannel) params.set('channel', filterChannel)
+      if (filterStatus) params.set('status', filterStatus)
+      const qs = params.toString()
+      const data = await apiFetch<NotificationItem[]>(`/notifications/history${qs ? `?${qs}` : ''}`)
+      setHistory(data)
+      setHistoryLoaded(true)
+    } catch (err: any) {
+      setError(err.message ?? copy.failedLoad)
+    } finally {
+      setHistoryLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  useEffect(() => {
+    if (activeTab === 'history') {
+      loadHistory()
+    }
+  }, [activeTab, filterChannel, filterStatus])
+
+  async function markRead(id: string) {
+    await apiFetch(`/notifications/company/${id}/read`, { method: 'POST' })
+    setNotifications((current) =>
+      current.map((item) => (item.id === id ? { ...item, readAt: new Date().toISOString() } : item)),
+    )
+    window.dispatchEvent(new Event('notifications:updated'))
+  }
+
+  async function markAllRead() {
+    await apiFetch('/notifications/company/read-all', { method: 'POST' })
+    setNotifications((current) => current.map((item) => ({ ...item, readAt: item.readAt ?? new Date().toISOString() })))
+    window.dispatchEvent(new Event('notifications:updated'))
+  }
+
+  async function savePreferences() {
+    setSaving(true)
+    setError(null)
+    try {
+      const body = Object.entries(preferences).map(([key, enabled]) => {
+        const [notificationType, channel] = key.split(':')
+        return { notificationType, channel, enabled }
+      })
+      await apiFetch('/notifications/company/preferences', {
+        method: 'PATCH',
+        body: JSON.stringify(body),
+      })
+    } catch (err: any) {
+      setError(err.message ?? copy.failedSave)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function preferenceValue(notificationType: string, channel: string) {
+    return preferences[`${notificationType}:${channel}`] ?? true
+  }
+
+  function setPreference(notificationType: string, channel: string, enabled: boolean) {
+    setPreferences((current) => ({
+      ...current,
+      [`${notificationType}:${channel}`]: enabled,
+    }))
+  }
+
+  function labelEvent(type: string) {
+    return copy.events[type] ?? type.replaceAll('_', ' ')
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">{copy.title}</h1>
+          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{copy.subtitle}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setActiveTab('inbox')}
+            className={activeTab === 'inbox' ? 'btn-primary' : 'btn-secondary'}
+          >
+            {copy.inbox}
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('history')}
+            className={activeTab === 'history' ? 'btn-primary' : 'btn-secondary'}
+          >
+            {copy.history}
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('preferences')}
+            className={activeTab === 'preferences' ? 'btn-primary' : 'btn-secondary'}
+          >
+            {copy.preferences}
+          </button>
+        </div>
+      </div>
+
+      {error ? <div className="card p-4 text-sm text-red-600 dark:text-red-400">{error}</div> : null}
+
+      {/* ── Inbox ── */}
+      {activeTab === 'inbox' ? (
+        <div className="space-y-4">
+          <div className="flex justify-end">
+            <button type="button" onClick={markAllRead} className="btn-secondary">
+              {copy.markAllRead}
+            </button>
+          </div>
+          {loading ? <div className="card p-6 text-sm text-slate-500">{copy.loading}</div> : null}
+          {!loading && notifications.length === 0 ? <div className="card p-6 text-sm text-slate-500">{copy.empty}</div> : null}
+          {!loading
+            ? notifications.map((notification) => (
+                <article key={notification.id} className="card p-6">
+                  <div className="flex flex-wrap items-start justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
+                        {labelEvent(notification.type)}
+                      </p>
+                      <h2 className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{notification.title}</h2>
+                    </div>
+                    {notification.readAt ? (
+                      <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-400">{copy.read}</span>
+                    ) : (
+                      <button type="button" onClick={() => markRead(notification.id)} className="btn-secondary">
+                        {copy.markRead}
+                      </button>
+                    )}
+                  </div>
+                  <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">{notification.body}</p>
+                  <p className="mt-4 text-xs text-slate-400">{new Date(notification.createdAt).toLocaleString()}</p>
+                </article>
+              ))
+            : null}
+        </div>
+      ) : null}
+
+      {/* ── History ── */}
+      {activeTab === 'history' ? (
+        <div className="space-y-4">
+          {/* Filters */}
+          <div className="flex flex-wrap items-center gap-3">
+            <select
+              value={filterChannel}
+              onChange={(e) => setFilterChannel(e.target.value)}
+              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
+            >
+              <option value="">{copy.allChannels}</option>
+              {COMPANY_CHANNELS.map((ch) => (
+                <option key={ch} value={ch}>{copy.channels[ch] ?? ch}</option>
+              ))}
+            </select>
+            <select
+              value={filterStatus}
+              onChange={(e) => setFilterStatus(e.target.value)}
+              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
+            >
+              <option value="">{copy.allStatuses}</option>
+              {Object.keys(copy.statuses).map((s) => (
+                <option key={s} value={s}>{copy.statuses[s]}</option>
+              ))}
+            </select>
+          </div>
+
+          {historyLoading ? (
+            <div className="card p-6 text-sm text-slate-500">{copy.loading}</div>
+          ) : historyLoaded && history.length === 0 ? (
+            <div className="card p-6 text-sm text-slate-500">{copy.noHistory}</div>
+          ) : (
+            <div className="card overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="min-w-full text-sm">
+                  <thead className="bg-slate-50 dark:bg-blue-950">
+                    <tr>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.date}</th>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.event}</th>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.channel}</th>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.title ?? 'Title'}</th>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.status}</th>
+                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.sentAt}</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100 dark:divide-blue-900/50">
+                    {history.map((item) => (
+                      <tr key={item.id} className="hover:bg-slate-50/60 dark:hover:bg-blue-900/20">
+                        <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
+                          {new Date(item.createdAt).toLocaleString()}
+                        </td>
+                        <td className="whitespace-nowrap px-4 py-3 text-xs font-medium text-slate-700 dark:text-slate-300">
+                          {labelEvent(item.type)}
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${CHANNEL_BADGE[item.channel] ?? 'bg-slate-100 text-slate-600'}`}>
+                            {copy.channels[item.channel] ?? item.channel}
+                          </span>
+                        </td>
+                        <td className="max-w-[260px] px-4 py-3">
+                          <p className="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{item.title}</p>
+                          <p className="truncate text-xs text-slate-400 dark:text-slate-500">{item.body}</p>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${STATUS_BADGE[item.status] ?? 'bg-slate-100 text-slate-600'}`}>
+                            {copy.statuses[item.status] ?? item.status}
+                          </span>
+                        </td>
+                        <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
+                          {item.sentAt ? new Date(item.sentAt).toLocaleString() : '—'}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      {/* ── Preferences ── */}
+      {activeTab === 'preferences' ? (
+        <div className="card overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm">
+              <thead className="bg-slate-50 dark:bg-blue-950">
+                <tr>
+                  <th className="px-4 py-3 text-left font-semibold text-slate-600 dark:text-slate-300">{copy.event}</th>
+                  {COMPANY_CHANNELS.map((channel) => (
+                    <th key={channel} className="px-4 py-3 text-center font-semibold text-slate-600 dark:text-slate-300">
+                      {copy.channels[channel] ?? channel.replace('_', ' ')}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {COMPANY_EVENTS.map((eventName) => (
+                  <tr key={eventName} className="border-t border-slate-100 dark:border-blue-900/50">
+                    <td className="px-4 py-3 font-medium text-slate-900 dark:text-slate-200">{copy.events[eventName] ?? eventName.replaceAll('_', ' ')}</td>
+                    {COMPANY_CHANNELS.map((channel) => (
+                      <td key={`${eventName}-${channel}`} className="px-4 py-3 text-center">
+                        <input
+                          type="checkbox"
+                          checked={preferenceValue(eventName, channel)}
+                          onChange={(event) => setPreference(eventName, channel, event.target.checked)}
+                          className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                        />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex justify-end border-t border-slate-100 dark:border-blue-900/50 p-4">
+            <button type="button" onClick={savePreferences} disabled={saving} className="btn-primary">
+              {saving ? copy.saving : copy.savePreferences}
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/offers/page.tsx b/dashboard/src/app/(dashboard)/offers/page.tsx
new file mode 100644
index 0000000..b114907
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/offers/page.tsx
@@ -0,0 +1,797 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { formatCurrency, getCurrencyLabel } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+const CATEGORIES = ['ECONOMY', 'COMPACT', 'MIDSIZE', 'FULLSIZE', 'SUV', 'LUXURY', 'VAN', 'TRUCK'] as const
+type Category = typeof CATEGORIES[number]
+
+interface Offer {
+  id: string
+  title: string
+  description?: string | null
+  termsAndConds?: string | null
+  type: 'PERCENTAGE' | 'FIXED_AMOUNT' | 'FREE_DAY' | 'SPECIAL_RATE'
+  discountValue: number
+  specialRate?: number | null
+  appliesToAll: boolean
+  categories: Category[]
+  minRentalDays?: number | null
+  maxRentalDays?: number | null
+  promoCode?: string | null
+  maxRedemptions?: number | null
+  validFrom: string
+  validUntil: string
+  isActive: boolean
+  isPublic: boolean
+  isFeatured: boolean
+  redemptionCount?: number
+  vehicles?: Array<{ vehicleId: string }>
+}
+
+interface FleetVehicle {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  licensePlate: string
+}
+
+interface FormState {
+  title: string
+  description: string
+  termsAndConds: string
+  type: Offer['type']
+  discountValue: string
+  specialRate: string
+  appliesToAll: boolean
+  categories: Category[]
+  vehicleIds: string[]
+  minRentalDays: string
+  maxRentalDays: string
+  promoCode: string
+  maxRedemptions: string
+  validFrom: string
+  validUntil: string
+  isActive: boolean
+  isPublic: boolean
+  isFeatured: boolean
+}
+
+function emptyForm(): FormState {
+  const today = dayjs().format('YYYY-MM-DD')
+  const nextMonth = dayjs().add(30, 'day').format('YYYY-MM-DD')
+  return {
+    title: '',
+    description: '',
+    termsAndConds: '',
+    type: 'PERCENTAGE',
+    discountValue: '',
+    specialRate: '',
+    appliesToAll: true,
+    categories: [],
+    vehicleIds: [],
+    minRentalDays: '',
+    maxRentalDays: '',
+    promoCode: '',
+    maxRedemptions: '',
+    validFrom: today,
+    validUntil: nextMonth,
+    isActive: true,
+    isPublic: true,
+    isFeatured: false,
+  }
+}
+
+function offerToForm(o: Offer): FormState {
+  return {
+    title: o.title,
+    description: o.description ?? '',
+    termsAndConds: o.termsAndConds ?? '',
+    type: o.type,
+    discountValue: String(o.discountValue),
+    specialRate: o.specialRate != null ? String(o.specialRate) : '',
+    appliesToAll: o.appliesToAll,
+    categories: o.categories ?? [],
+    vehicleIds: o.vehicles?.map((v) => v.vehicleId) ?? [],
+    minRentalDays: o.minRentalDays != null ? String(o.minRentalDays) : '',
+    maxRentalDays: o.maxRentalDays != null ? String(o.maxRentalDays) : '',
+    promoCode: o.promoCode ?? '',
+    maxRedemptions: o.maxRedemptions != null ? String(o.maxRedemptions) : '',
+    validFrom: dayjs(o.validFrom).format('YYYY-MM-DD'),
+    validUntil: dayjs(o.validUntil).format('YYYY-MM-DD'),
+    isActive: o.isActive,
+    isPublic: o.isPublic,
+    isFeatured: o.isFeatured,
+  }
+}
+
+const copy = {
+  en: {
+    title: 'Offers',
+    subtitle: 'Promotions shown on your site and optionally on the marketplace.',
+    createOffer: 'Create Offer',
+    editOffer: 'Edit Offer',
+    deleteOffer: 'Delete Offer',
+    confirmDelete: 'Are you sure you want to delete this offer? This action cannot be undone.',
+    cancel: 'Cancel',
+    save: 'Save',
+    saving: 'Saving…',
+    delete: 'Delete',
+    deleting: 'Deleting…',
+    ends: 'ends',
+    active: 'Active',
+    inactive: 'Inactive',
+    marketplace: 'Marketplace',
+    featured: 'Featured',
+    empty: 'No offers yet. Create your first offer to attract customers.',
+    labelTitle: 'Title *',
+    labelDescription: 'Description',
+    labelTerms: 'Terms & Conditions',
+    labelType: 'Discount Type *',
+    labelDiscount: 'Discount Value *',
+    labelSpecialRate: 'Special Rate (MAD/day) *',
+    labelAppliesToAll: 'Applies to all vehicles',
+    labelCategories: 'Vehicle Categories',
+    labelVehicles: 'Specific Vehicles',
+    labelVehicleSearch: 'Search vehicles…',
+    labelMinDays: 'Min Rental Days',
+    labelMaxDays: 'Max Rental Days',
+    labelPromoCode: 'Promo Code',
+    labelMaxRedemptions: 'Max Redemptions',
+    labelValidFrom: 'Valid From *',
+    labelValidUntil: 'Valid Until *',
+    labelIsActive: 'Active',
+    labelIsPublic: 'Show on marketplace',
+    labelIsFeatured: 'Featured',
+    typePERCENTAGE: 'Percentage (%)',
+    typeFIXED_AMOUNT: 'Fixed Amount (MAD)',
+    typeFREE_DAY: 'Free Day',
+    typeSPECIAL_RATE: 'Special Daily Rate',
+    placeholderTitle: 'e.g. Summer Promotion',
+    placeholderDescription: 'Optional description…',
+    placeholderTerms: 'Terms and conditions…',
+    placeholderPromoCode: 'e.g. SUMMER20',
+    errorTitle: 'Title is required.',
+    errorDiscount: 'Please enter a valid discount value.',
+    errorDates: 'Valid From and Valid Until are required.',
+    errorDateOrder: 'Valid Until must be after Valid From.',
+    failedSave: 'Failed to save offer.',
+    failedDelete: 'Failed to delete offer.',
+    redemptions: 'redemptions',
+    freeDay: 'Free day',
+    loadingVehicles: 'Loading fleet…',
+    noVehiclesFound: 'No vehicles found.',
+    selected: (n: number) => `${n} selected`,
+    categoryLabels: {
+      ECONOMY: 'Economy', COMPACT: 'Compact', MIDSIZE: 'Midsize', FULLSIZE: 'Full-size',
+      SUV: 'SUV', LUXURY: 'Luxury', VAN: 'Van', TRUCK: 'Truck',
+    },
+  },
+  fr: {
+    title: 'Offres',
+    subtitle: 'Promotions affichées sur votre site et éventuellement sur la marketplace.',
+    createOffer: 'Créer une offre',
+    editOffer: "Modifier l'offre",
+    deleteOffer: "Supprimer l'offre",
+    confirmDelete: 'Êtes-vous sûr de vouloir supprimer cette offre ? Cette action est irréversible.',
+    cancel: 'Annuler',
+    save: 'Enregistrer',
+    saving: 'Enregistrement…',
+    delete: 'Supprimer',
+    deleting: 'Suppression…',
+    ends: 'expire le',
+    active: 'Actif',
+    inactive: 'Inactif',
+    marketplace: 'Marketplace',
+    featured: 'Mise en avant',
+    empty: 'Aucune offre. Créez votre première offre pour attirer des clients.',
+    labelTitle: 'Titre *',
+    labelDescription: 'Description',
+    labelTerms: 'Conditions générales',
+    labelType: 'Type de remise *',
+    labelDiscount: 'Valeur de la remise *',
+    labelSpecialRate: 'Tarif spécial (MAD/jour) *',
+    labelAppliesToAll: 'Applicable à tous les véhicules',
+    labelCategories: 'Catégories de véhicules',
+    labelVehicles: 'Véhicules spécifiques',
+    labelVehicleSearch: 'Rechercher des véhicules…',
+    labelMinDays: 'Jours de location minimum',
+    labelMaxDays: 'Jours de location maximum',
+    labelPromoCode: 'Code promo',
+    labelMaxRedemptions: 'Nombre max de rédemptions',
+    labelValidFrom: 'Valable du *',
+    labelValidUntil: "Valable jusqu'au *",
+    labelIsActive: 'Actif',
+    labelIsPublic: 'Afficher sur la marketplace',
+    labelIsFeatured: 'Mise en avant',
+    typePERCENTAGE: 'Pourcentage (%)',
+    typeFIXED_AMOUNT: 'Montant fixe (MAD)',
+    typeFREE_DAY: 'Jour gratuit',
+    typeSPECIAL_RATE: 'Tarif journalier spécial',
+    placeholderTitle: 'ex. Promotion estivale',
+    placeholderDescription: 'Description optionnelle…',
+    placeholderTerms: 'Conditions générales…',
+    placeholderPromoCode: 'ex. ETE20',
+    errorTitle: 'Le titre est requis.',
+    errorDiscount: 'Veuillez saisir une valeur de remise valide.',
+    errorDates: 'Les dates de début et de fin sont requises.',
+    errorDateOrder: 'La date de fin doit être après la date de début.',
+    failedSave: "Échec de l'enregistrement de l'offre.",
+    failedDelete: "Échec de la suppression de l'offre.",
+    redemptions: 'rédemptions',
+    freeDay: 'Jour gratuit',
+    loadingVehicles: 'Chargement de la flotte…',
+    noVehiclesFound: 'Aucun véhicule trouvé.',
+    selected: (n: number) => `${n} sélectionné${n > 1 ? 's' : ''}`,
+    categoryLabels: {
+      ECONOMY: 'Économique', COMPACT: 'Compacte', MIDSIZE: 'Intermédiaire', FULLSIZE: 'Grande berline',
+      SUV: 'SUV', LUXURY: 'Luxe', VAN: 'Van', TRUCK: 'Camionnette',
+    },
+  },
+  ar: {
+    title: 'العروض',
+    subtitle: 'عروض ترويجية تظهر في موقعك ويمكن عرضها أيضاً في السوق.',
+    createOffer: 'إنشاء عرض',
+    editOffer: 'تعديل العرض',
+    deleteOffer: 'حذف العرض',
+    confirmDelete: 'هل أنت متأكد من حذف هذا العرض؟ لا يمكن التراجع عن هذا الإجراء.',
+    cancel: 'إلغاء',
+    save: 'حفظ',
+    saving: 'جارٍ الحفظ…',
+    delete: 'حذف',
+    deleting: 'جارٍ الحذف…',
+    ends: 'تنتهي في',
+    active: 'نشط',
+    inactive: 'غير نشط',
+    marketplace: 'السوق',
+    featured: 'مميز',
+    empty: 'لا توجد عروض بعد. أنشئ أول عرض لجذب العملاء.',
+    labelTitle: 'العنوان *',
+    labelDescription: 'الوصف',
+    labelTerms: 'الشروط والأحكام',
+    labelType: 'نوع الخصم *',
+    labelDiscount: 'قيمة الخصم *',
+    labelSpecialRate: 'السعر الخاص (درهم/يوم) *',
+    labelAppliesToAll: 'ينطبق على جميع المركبات',
+    labelCategories: 'فئات المركبات',
+    labelVehicles: 'مركبات محددة',
+    labelVehicleSearch: 'ابحث عن مركبة…',
+    labelMinDays: 'الحد الأدنى لأيام الإيجار',
+    labelMaxDays: 'الحد الأقصى لأيام الإيجار',
+    labelPromoCode: 'رمز الترويج',
+    labelMaxRedemptions: 'الحد الأقصى للاسترداد',
+    labelValidFrom: 'صالح من *',
+    labelValidUntil: 'صالح حتى *',
+    labelIsActive: 'نشط',
+    labelIsPublic: 'عرض في السوق',
+    labelIsFeatured: 'مميز',
+    typePERCENTAGE: 'نسبة مئوية (%)',
+    typeFIXED_AMOUNT: 'مبلغ ثابت (درهم)',
+    typeFREE_DAY: 'يوم مجاني',
+    typeSPECIAL_RATE: 'سعر يومي خاص',
+    placeholderTitle: 'مثال: عرض الصيف',
+    placeholderDescription: 'وصف اختياري…',
+    placeholderTerms: 'الشروط والأحكام…',
+    placeholderPromoCode: 'مثال: SUMMER20',
+    errorTitle: 'العنوان مطلوب.',
+    errorDiscount: 'يرجى إدخال قيمة خصم صحيحة.',
+    errorDates: 'تاريخ البداية والنهاية مطلوبان.',
+    errorDateOrder: 'يجب أن يكون تاريخ الانتهاء بعد تاريخ البداية.',
+    failedSave: 'فشل حفظ العرض.',
+    failedDelete: 'فشل حذف العرض.',
+    redemptions: 'استرداد',
+    freeDay: 'يوم مجاني',
+    loadingVehicles: 'جارٍ تحميل الأسطول…',
+    noVehiclesFound: 'لم يتم العثور على مركبات.',
+    selected: (n: number) => `${n} محدد`,
+    categoryLabels: {
+      ECONOMY: 'اقتصادية', COMPACT: 'مدمجة', MIDSIZE: 'متوسطة', FULLSIZE: 'كبيرة',
+      SUV: 'دفع رباعي', LUXURY: 'فاخرة', VAN: 'فان', TRUCK: 'شاحنة',
+    },
+  },
+}
+
+function discountLabel(offer: Offer, t: typeof copy['en'], language: 'en' | 'fr' | 'ar'): string {
+  if (offer.type === 'PERCENTAGE') return `${offer.discountValue}%`
+  if (offer.type === 'FIXED_AMOUNT') return formatCurrency(offer.discountValue, 'MAD', language)
+  if (offer.type === 'FREE_DAY') return t.freeDay
+  if (offer.type === 'SPECIAL_RATE') return `${offer.specialRate ?? offer.discountValue} ${getCurrencyLabel(language)}${language === 'fr' ? '/jour' : language === 'ar' ? '/يوم' : '/day'}`
+  return String(offer.discountValue)
+}
+
+export default function OffersPage() {
+  const { language } = useDashboardI18n()
+  const t = copy[language]
+
+  const [offers, setOffers] = useState<Offer[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editing, setEditing] = useState<Offer | null>(null)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const [formError, setFormError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<Offer | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const [fleet, setFleet] = useState<FleetVehicle[]>([])
+  const [loadingFleet, setLoadingFleet] = useState(false)
+  const [vehicleSearch, setVehicleSearch] = useState('')
+
+  function load() {
+    apiFetch<Offer[]>('/offers')
+      .then((data) => {
+        setOffers(Array.isArray(data) ? data : [])
+        setError(null)
+      })
+      .catch((err) => setError(err.message))
+  }
+
+  useEffect(() => { load() }, [])
+
+  async function loadFleet() {
+    setLoadingFleet(true)
+    try {
+      const data = await apiFetch<FleetVehicle[]>('/vehicles?pageSize=200')
+      setFleet(Array.isArray(data) ? data : [])
+    } catch {
+      // non-fatal; vehicle picker just stays empty
+    } finally {
+      setLoadingFleet(false)
+    }
+  }
+
+  function openCreate() {
+    setEditing(null)
+    setForm(emptyForm())
+    setFormError(null)
+    setVehicleSearch('')
+    setModalOpen(true)
+    loadFleet()
+  }
+
+  async function openEdit(offer: Offer) {
+    setEditing(offer)
+    setForm(offerToForm(offer))
+    setFormError(null)
+    setVehicleSearch('')
+    setModalOpen(true)
+    // Load fleet and the offer's current vehicle IDs in parallel
+    loadFleet()
+    try {
+      const detail = await apiFetch<Offer>(`/offers/${offer.id}`)
+      setForm((prev) => ({
+        ...prev,
+        vehicleIds: Array.isArray(detail?.vehicles) ? detail.vehicles.map((v) => v.vehicleId) : [],
+      }))
+    } catch {
+      // leave vehicleIds as empty if fetch fails
+    }
+  }
+
+  function closeModal() {
+    setModalOpen(false)
+    setEditing(null)
+    setFormError(null)
+  }
+
+  function toggleCategory(cat: Category) {
+    setForm((f) => ({
+      ...f,
+      categories: f.categories.includes(cat)
+        ? f.categories.filter((c) => c !== cat)
+        : [...f.categories, cat],
+    }))
+  }
+
+  function toggleVehicle(id: string) {
+    setForm((f) => ({
+      ...f,
+      vehicleIds: f.vehicleIds.includes(id)
+        ? f.vehicleIds.filter((v) => v !== id)
+        : [...f.vehicleIds, id],
+    }))
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setFormError(null)
+
+    if (!form.title.trim()) return setFormError(t.errorTitle)
+    if (!form.validFrom || !form.validUntil) return setFormError(t.errorDates)
+    if (form.validUntil <= form.validFrom) return setFormError(t.errorDateOrder)
+    if (form.type !== 'FREE_DAY') {
+      const dv = Number(form.discountValue)
+      if (isNaN(dv) || dv < 0) return setFormError(t.errorDiscount)
+    }
+
+    setSaving(true)
+    try {
+      const payload: Record<string, unknown> = {
+        title: form.title.trim(),
+        description: form.description.trim() || undefined,
+        termsAndConds: form.termsAndConds.trim() || undefined,
+        type: form.type,
+        discountValue: form.type === 'FREE_DAY' ? 0 : Number(form.discountValue),
+        specialRate: form.specialRate ? Number(form.specialRate) : undefined,
+        appliesToAll: form.appliesToAll,
+        categories: form.appliesToAll ? [] : form.categories,
+        minRentalDays: form.minRentalDays ? Number(form.minRentalDays) : undefined,
+        maxRentalDays: form.maxRentalDays ? Number(form.maxRentalDays) : undefined,
+        promoCode: form.promoCode.trim() || undefined,
+        maxRedemptions: form.maxRedemptions ? Number(form.maxRedemptions) : undefined,
+        validFrom: new Date(form.validFrom).toISOString(),
+        validUntil: new Date(form.validUntil).toISOString(),
+        isActive: form.isActive,
+        isPublic: form.isPublic,
+        isFeatured: form.isFeatured,
+        vehicleIds: form.appliesToAll ? [] : form.vehicleIds,
+      }
+
+      if (editing) {
+        await apiFetch(`/offers/${editing.id}`, { method: 'PATCH', body: JSON.stringify(payload) })
+      } else {
+        await apiFetch('/offers', { method: 'POST', body: JSON.stringify(payload) })
+      }
+      closeModal()
+      load()
+    } catch (err: any) {
+      setFormError(err.message ?? t.failedSave)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return
+    setDeleting(true)
+    try {
+      await apiFetch(`/offers/${deleteTarget.id}`, { method: 'DELETE' })
+      setDeleteTarget(null)
+      load()
+    } catch (err: any) {
+      setFormError(err.message ?? t.failedDelete)
+      setDeleteTarget(null)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const isRtl = language === 'ar'
+
+  const filteredFleet = fleet.filter((v) => {
+    const q = vehicleSearch.toLowerCase()
+    return (
+      !q ||
+      v.make.toLowerCase().includes(q) ||
+      v.model.toLowerCase().includes(q) ||
+      v.licensePlate.toLowerCase().includes(q)
+    )
+  })
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rdg-page-heading flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{t.title}</h2>
+          <p className="text-sm text-slate-500 mt-1">{t.subtitle}</p>
+        </div>
+        <button type="button" onClick={openCreate} className="btn-primary shrink-0">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+          {t.createOffer}
+        </button>
+      </div>
+
+      {error && <div className="card p-4 text-sm text-red-600">{error}</div>}
+
+      {/* Offer cards */}
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {offers.map((offer) => (
+          <div key={offer.id} className="card p-5 flex flex-col gap-3">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <h3 className="text-base font-semibold text-slate-900 truncate">{offer.title}</h3>
+                <p className="text-sm text-slate-500 mt-0.5">
+                  {t[`type${offer.type}` as keyof typeof t] as string} · {t.ends} {dayjs(offer.validUntil).format('MMM D, YYYY')}
+                </p>
+              </div>
+              <span className={`shrink-0 ${offer.isActive ? 'badge-green' : 'badge-gray'}`}>
+                {offer.isActive ? t.active : t.inactive}
+              </span>
+            </div>
+
+            <p className="text-2xl font-bold text-slate-900">{discountLabel(offer, t, language)}</p>
+
+            {offer.description && (
+              <p className="text-sm text-slate-500 line-clamp-2">{offer.description}</p>
+            )}
+
+            <div className="flex flex-wrap gap-2">
+              {offer.isPublic && <span className="badge-blue">{t.marketplace}</span>}
+              {offer.isFeatured && <span className="badge-purple">{t.featured}</span>}
+              {offer.promoCode && <span className="badge-amber">{offer.promoCode}</span>}
+              {typeof offer.redemptionCount === 'number' && (
+                <span className="badge-gray">{offer.redemptionCount} {t.redemptions}</span>
+              )}
+            </div>
+
+            <div className={`flex gap-2 mt-auto pt-2 border-t border-slate-100 ${isRtl ? 'flex-row-reverse' : ''}`}>
+              <button type="button" onClick={() => openEdit(offer)} className="btn-secondary text-xs px-3 py-1.5">
+                {t.editOffer}
+              </button>
+              <button type="button" onClick={() => setDeleteTarget(offer)} className="btn-danger text-xs px-3 py-1.5">
+                {t.deleteOffer}
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {offers.length === 0 && !error && (
+          <div className="col-span-full card p-10 text-center text-sm text-slate-400">{t.empty}</div>
+        )}
+      </div>
+
+      {/* Create / Edit Modal */}
+      {modalOpen && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-blue-950/50 p-4">
+          <div className="relative w-full max-w-2xl my-8 card p-6" dir={isRtl ? 'rtl' : 'ltr'}>
+            <h3 className="text-lg font-semibold text-slate-900 mb-5">
+              {editing ? t.editOffer : t.createOffer}
+            </h3>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {/* Title */}
+              <div>
+                <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelTitle}</label>
+                <input
+                  className="input-field"
+                  value={form.title}
+                  onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+                  placeholder={t.placeholderTitle}
+                />
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelDescription}</label>
+                <textarea
+                  className="input-field resize-none"
+                  rows={2}
+                  value={form.description}
+                  onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+                  placeholder={t.placeholderDescription}
+                />
+              </div>
+
+              {/* Type + Discount/Rate */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelType}</label>
+                  <select
+                    className="input-field"
+                    value={form.type}
+                    onChange={(e) => setForm((f) => ({ ...f, type: e.target.value as Offer['type'] }))}
+                  >
+                    <option value="PERCENTAGE">{t.typePERCENTAGE}</option>
+                    <option value="FIXED_AMOUNT">{t.typeFIXED_AMOUNT}</option>
+                    <option value="FREE_DAY">{t.typeFREE_DAY}</option>
+                    <option value="SPECIAL_RATE">{t.typeSPECIAL_RATE}</option>
+                  </select>
+                </div>
+                <div>
+                  {form.type === 'SPECIAL_RATE' ? (
+                    <>
+                      <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelSpecialRate}</label>
+                      <input type="number" min={0} className="input-field" value={form.specialRate} onChange={(e) => setForm((f) => ({ ...f, specialRate: e.target.value }))} />
+                    </>
+                  ) : form.type !== 'FREE_DAY' ? (
+                    <>
+                      <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelDiscount}</label>
+                      <input type="number" min={0} className="input-field" value={form.discountValue} onChange={(e) => setForm((f) => ({ ...f, discountValue: e.target.value }))} />
+                    </>
+                  ) : null}
+                </div>
+              </div>
+
+              {/* Dates */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelValidFrom}</label>
+                  <input type="date" className="input-field" value={form.validFrom} onChange={(e) => setForm((f) => ({ ...f, validFrom: e.target.value }))} />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelValidUntil}</label>
+                  <input type="date" className="input-field" value={form.validUntil} onChange={(e) => setForm((f) => ({ ...f, validUntil: e.target.value }))} />
+                </div>
+              </div>
+
+              {/* Promo code + Max Redemptions */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelPromoCode}</label>
+                  <input className="input-field" value={form.promoCode} onChange={(e) => setForm((f) => ({ ...f, promoCode: e.target.value }))} placeholder={t.placeholderPromoCode} />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelMaxRedemptions}</label>
+                  <input type="number" min={1} className="input-field" value={form.maxRedemptions} onChange={(e) => setForm((f) => ({ ...f, maxRedemptions: e.target.value }))} />
+                </div>
+              </div>
+
+              {/* Min / Max Rental Days */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelMinDays}</label>
+                  <input type="number" min={1} className="input-field" value={form.minRentalDays} onChange={(e) => setForm((f) => ({ ...f, minRentalDays: e.target.value }))} />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelMaxDays}</label>
+                  <input type="number" min={1} className="input-field" value={form.maxRentalDays} onChange={(e) => setForm((f) => ({ ...f, maxRentalDays: e.target.value }))} />
+                </div>
+              </div>
+
+              {/* Applies-to-all toggle */}
+              <div>
+                <label className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer select-none">
+                  <input
+                    type="checkbox"
+                    className="h-4 w-4 rounded border-slate-300 accent-blue-600"
+                    checked={form.appliesToAll}
+                    onChange={(e) => setForm((f) => ({ ...f, appliesToAll: e.target.checked }))}
+                  />
+                  {t.labelAppliesToAll}
+                </label>
+              </div>
+
+              {/* Scoped selection — only shown when not appliesToAll */}
+              {!form.appliesToAll && (
+                <div className="space-y-4 rounded-xl border border-slate-200 p-4">
+                  {/* Category chips */}
+                  <div>
+                    <p className="text-xs font-medium text-slate-600 mb-2">{t.labelCategories}</p>
+                    <div className="flex flex-wrap gap-2">
+                      {CATEGORIES.map((cat) => (
+                        <button
+                          key={cat}
+                          type="button"
+                          onClick={() => toggleCategory(cat)}
+                          className={`px-3 py-1 text-xs rounded-full border transition-colors ${
+                            form.categories.includes(cat)
+                              ? 'bg-blue-600 text-white border-blue-600'
+                              : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                          }`}
+                        >
+                          {t.categoryLabels[cat]}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Vehicle picker */}
+                  <div>
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-xs font-medium text-slate-600">{t.labelVehicles}</p>
+                      {form.vehicleIds.length > 0 && (
+                        <span className="badge-blue">{t.selected(form.vehicleIds.length)}</span>
+                      )}
+                    </div>
+
+                    {/* Search input */}
+                    <div className="relative mb-2">
+                      <svg className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
+                      </svg>
+                      <input
+                        className="input-field pl-8 text-xs py-1.5"
+                        value={vehicleSearch}
+                        onChange={(e) => setVehicleSearch(e.target.value)}
+                        placeholder={t.labelVehicleSearch}
+                      />
+                    </div>
+
+                    {/* Vehicle list */}
+                    <div className="max-h-52 overflow-y-auto rounded-lg border border-slate-200 divide-y divide-slate-100">
+                      {loadingFleet ? (
+                        <p className="px-4 py-6 text-center text-xs text-slate-400">{t.loadingVehicles}</p>
+                      ) : filteredFleet.length === 0 ? (
+                        <p className="px-4 py-6 text-center text-xs text-slate-400">{t.noVehiclesFound}</p>
+                      ) : (
+                        filteredFleet.map((v) => {
+                          const checked = form.vehicleIds.includes(v.id)
+                          return (
+                            <label
+                              key={v.id}
+                              className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${
+                                checked ? 'bg-blue-50' : 'hover:bg-slate-50'
+                              }`}
+                            >
+                              <input
+                                type="checkbox"
+                                className="h-4 w-4 shrink-0 rounded border-slate-300 accent-blue-600"
+                                checked={checked}
+                                onChange={() => toggleVehicle(v.id)}
+                              />
+                              <div className="min-w-0 flex-1">
+                                <p className="text-sm font-medium text-slate-800 truncate">
+                                  {v.year} {v.make} {v.model}
+                                </p>
+                                <p className="text-xs text-slate-400">{v.licensePlate} · {t.categoryLabels[v.category as Category] ?? v.category}</p>
+                              </div>
+                            </label>
+                          )
+                        })
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Terms */}
+              <div>
+                <label className="block text-xs font-medium text-slate-600 mb-1">{t.labelTerms}</label>
+                <textarea
+                  className="input-field resize-none"
+                  rows={2}
+                  value={form.termsAndConds}
+                  onChange={(e) => setForm((f) => ({ ...f, termsAndConds: e.target.value }))}
+                  placeholder={t.placeholderTerms}
+                />
+              </div>
+
+              {/* Toggles */}
+              <div className="flex flex-wrap gap-x-6 gap-y-2">
+                {([
+                  { key: 'isActive', label: t.labelIsActive },
+                  { key: 'isPublic', label: t.labelIsPublic },
+                  { key: 'isFeatured', label: t.labelIsFeatured },
+                ] as const).map(({ key, label }) => (
+                  <label key={key} className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      className="h-4 w-4 rounded border-slate-300 accent-blue-600"
+                      checked={form[key] as boolean}
+                      onChange={(e) => setForm((f) => ({ ...f, [key]: e.target.checked }))}
+                    />
+                    {label}
+                  </label>
+                ))}
+              </div>
+
+              {formError && <p className="text-sm text-red-600">{formError}</p>}
+
+              <div className={`flex gap-3 pt-2 ${isRtl ? 'flex-row-reverse' : 'justify-end'}`}>
+                <button type="button" onClick={closeModal} className="btn-secondary">{t.cancel}</button>
+                <button type="submit" disabled={saving} className="btn-primary">
+                  {saving ? t.saving : t.save}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Delete confirmation */}
+      {deleteTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/50 p-4">
+          <div className="card p-6 w-full max-w-sm" dir={isRtl ? 'rtl' : 'ltr'}>
+            <h3 className="text-base font-semibold text-slate-900 mb-2">{t.deleteOffer}</h3>
+            <p className="text-sm text-slate-600 mb-5">{t.confirmDelete}</p>
+            {formError && <p className="text-sm text-red-600 mb-3">{formError}</p>}
+            <div className={`flex gap-3 ${isRtl ? 'flex-row-reverse' : 'justify-end'}`}>
+              <button type="button" onClick={() => setDeleteTarget(null)} className="btn-secondary">{t.cancel}</button>
+              <button type="button" onClick={handleDelete} disabled={deleting} className="btn-danger">
+                {deleting ? t.deleting : t.delete}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/online-reservations/page.tsx b/dashboard/src/app/(dashboard)/online-reservations/page.tsx
new file mode 100644
index 0000000..60d9962
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/online-reservations/page.tsx
@@ -0,0 +1,366 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import dayjs from 'dayjs'
+import Link from 'next/link'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { Globe, CheckCircle, XCircle, Clock, ChevronRight, User, Car, CalendarDays, MessageSquare } from 'lucide-react'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface OnlineReservation {
+  id: string
+  status: 'DRAFT' | 'CONFIRMED' | 'CANCELLED' | 'ACTIVE' | 'COMPLETED' | 'NO_SHOW'
+  source: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  totalDays: number
+  dailyRate: number
+  notes: string | null
+  cancelReason: string | null
+  createdAt: string
+  vehicle: { make: string; model: string; year: number; licensePlate: string }
+  customer: { firstName: string; lastName: string; email: string; phone: string | null }
+  bookingRequest: {
+    stage: string
+    documentsRequired: boolean
+    paymentRequired: boolean
+    documentsMissing: string[]
+  }
+}
+
+const STATUS_STYLE: Record<string, string> = {
+  DRAFT:     'bg-orange-100 text-orange-800',
+  CONFIRMED: 'bg-emerald-100 text-emerald-700',
+  CANCELLED: 'bg-rose-100 text-rose-700',
+  ACTIVE:    'bg-blue-100 text-blue-700',
+  COMPLETED: 'bg-slate-100 text-slate-600',
+  NO_SHOW:   'bg-orange-100 text-orange-700',
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  DRAFT:     'Pending',
+  CONFIRMED: 'Confirmed',
+  CANCELLED: 'Declined',
+  ACTIVE:    'Active',
+  COMPLETED: 'Completed',
+  NO_SHOW:   'No show',
+}
+
+const REQUEST_STAGE_STYLE: Record<string, string> = {
+  REQUEST_SENT: 'bg-orange-100 text-orange-800',
+  COMPANY_CONFIRMED: 'bg-blue-100 text-blue-800',
+  DOCUMENTS_REQUIRED: 'bg-amber-100 text-amber-800',
+  PAYMENT_REQUIRED: 'bg-purple-100 text-purple-800',
+  BOOKING_CONFIRMED: 'bg-emerald-100 text-emerald-700',
+  CANCELLED: 'bg-rose-100 text-rose-700',
+}
+
+const REQUEST_STAGE_LABEL: Record<string, string> = {
+  REQUEST_SENT: 'Waiting for company review',
+  COMPANY_CONFIRMED: 'Availability confirmed',
+  DOCUMENTS_REQUIRED: 'Driver documents missing',
+  PAYMENT_REQUIRED: 'Payment or deposit pending',
+  BOOKING_CONFIRMED: 'Ready to proceed',
+  CANCELLED: 'Request closed',
+}
+
+const MISSING_ITEM_LABEL: Record<string, string> = {
+  DATE_OF_BIRTH: 'Date of birth',
+  IDENTITY_DOCUMENT: 'Identity document',
+  FULL_ADDRESS: 'Full address',
+  DRIVER_LICENSE: 'Driver license number',
+  LICENSE_IMAGE: 'License image',
+  LICENSE_APPROVAL: 'License approval',
+}
+
+function DeclineModal({ onConfirm, onCancel, loading }: { onConfirm: (reason: string) => void; onCancel: () => void; loading: boolean }) {
+  const [reason, setReason] = useState('')
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40 p-4" onClick={onCancel}>
+      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-base font-semibold text-slate-900">Decline reservation</h3>
+        <p className="mt-1 text-sm text-slate-500">Optionally provide a reason — it will be visible in the reservation record.</p>
+        <textarea
+          rows={3}
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          placeholder="e.g. Vehicle not available for these dates"
+          className="mt-4 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 resize-none"
+        />
+        <div className="mt-4 flex gap-3">
+          <button onClick={onCancel} className="flex-1 rounded-full border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700">Cancel</button>
+          <button
+            disabled={loading}
+            onClick={() => onConfirm(reason)}
+            className="flex-1 rounded-full bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60"
+          >
+            {loading ? 'Declining…' : 'Decline'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function OnlineReservationsPage() {
+  const { language } = useDashboardI18n()
+  const copy = {
+    en: {
+      title: 'Online Reservations',
+      subtitle: 'Requests submitted by customers through the marketplace. Confirm or decline each one.',
+      refresh: 'Refresh',
+      pendingApproval: 'Pending approval',
+      loading: 'Loading…',
+      allCaughtUp: 'All caught up — no pending requests.',
+      customer: 'Customer',
+      vehicle: 'Vehicle',
+      dates: 'Dates',
+      status: 'Status',
+      total: 'Total',
+    },
+    fr: {
+      title: 'Réservations en ligne',
+      subtitle: 'Demandes envoyées par les clients via la marketplace. Confirmez ou refusez chaque demande.',
+      refresh: 'Actualiser',
+      pendingApproval: 'En attente de validation',
+      loading: 'Chargement…',
+      allCaughtUp: 'Tout est à jour. Aucune demande en attente.',
+      customer: 'Client',
+      vehicle: 'Véhicule',
+      dates: 'Dates',
+      status: 'Statut',
+      total: 'Total',
+    },
+    ar: {
+      title: 'الحجوزات الإلكترونية',
+      subtitle: 'طلبات أرسلها العملاء عبر السوق. أكّد كل طلب أو ارفضه.',
+      refresh: 'تحديث',
+      pendingApproval: 'في انتظار الموافقة',
+      loading: 'جارٍ التحميل…',
+      allCaughtUp: 'لا توجد طلبات معلقة حالياً.',
+      customer: 'العميل',
+      vehicle: 'المركبة',
+      dates: 'التواريخ',
+      status: 'الحالة',
+      total: 'الإجمالي',
+    },
+  }[language]
+  const [rows, setRows] = useState<OnlineReservation[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [acting, setActing] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [declineTarget, setDeclineTarget] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true)
+      const result = await apiFetch<OnlineReservation[]>('/reservations?source=MARKETPLACE&status=DRAFT&pageSize=100')
+      setRows(
+        (result ?? []).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      )
+      setError(null)
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to load reservations')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  async function confirm(id: string) {
+    setActing(id)
+    setActionError(null)
+    try {
+      await apiFetch(`/reservations/${id}/confirm`, { method: 'POST', body: JSON.stringify({}) })
+      await load()
+    } catch (err: any) {
+      setActionError(err.message ?? 'Failed to confirm reservation')
+    } finally {
+      setActing(null)
+    }
+  }
+
+  async function decline(id: string, reason: string) {
+    setActing(id)
+    setActionError(null)
+    try {
+      await apiFetch(`/reservations/${id}/cancel`, { method: 'POST', body: JSON.stringify({ reason: reason || undefined }) })
+      setDeclineTarget(null)
+      await load()
+    } catch (err: any) {
+      setActionError(err.message ?? 'Failed to decline reservation')
+    } finally {
+      setActing(null)
+    }
+  }
+
+  const pending = rows
+
+  return (
+    <div className="space-y-8">
+      {declineTarget && (
+        <DeclineModal
+          loading={acting === declineTarget}
+          onConfirm={(reason) => decline(declineTarget, reason)}
+          onCancel={() => setDeclineTarget(null)}
+        />
+      )}
+
+      <div className="rdg-page-heading flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-2">
+            <Globe className="h-5 w-5 text-blue-600" />
+            <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+            {pending.length > 0 && (
+              <span className="rounded-full bg-orange-500 px-2.5 py-0.5 text-xs font-bold text-white">{pending.length}</span>
+            )}
+          </div>
+          <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+        </div>
+        <button onClick={load} className="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">
+          {copy.refresh}
+        </button>
+      </div>
+
+      {actionError && (
+        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{actionError}</div>
+      )}
+
+      {/* Pending section */}
+      <section>
+        <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
+          <Clock className="h-4 w-4" /> {copy.pendingApproval}
+          {pending.length > 0 && <span className="ml-1 text-orange-600">({pending.length})</span>}
+        </h3>
+
+        {loading ? (
+          <div className="card p-8 text-center text-sm text-slate-400">{copy.loading}</div>
+        ) : pending.length === 0 ? (
+          <div className="card flex flex-col items-center gap-3 p-10 text-center">
+            <CheckCircle className="h-10 w-10 text-emerald-400" />
+            <p className="text-sm font-medium text-slate-600">{copy.allCaughtUp}</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {pending.map((r) => (
+              <ReservationCard
+                key={r.id}
+                r={r}
+                acting={acting === r.id}
+                onConfirm={() => confirm(r.id)}
+                onDecline={() => setDeclineTarget(r.id)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+    </div>
+  )
+}
+
+function ReservationCard({ r, acting, onConfirm, onDecline }: {
+  r: OnlineReservation
+  acting: boolean
+  onConfirm: () => void
+  onDecline: () => void
+}) {
+  const days = r.totalDays
+  const missingItems = r.bookingRequest.documentsMissing.map((item) => MISSING_ITEM_LABEL[item] ?? item)
+
+  return (
+    <div className="card overflow-hidden border-l-4 border-l-orange-400">
+      <div className="p-5">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          {/* Left: customer + vehicle + dates */}
+          <div className="space-y-3 min-w-0">
+            <div className="flex items-center gap-2">
+              <User className="h-4 w-4 flex-shrink-0 text-slate-400" />
+              <div>
+                <p className="text-sm font-semibold text-slate-900">{r.customer.firstName} {r.customer.lastName}</p>
+                <p className="text-xs text-slate-500">{r.customer.email}{r.customer.phone ? ` · ${r.customer.phone}` : ''}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Car className="h-4 w-4 flex-shrink-0 text-slate-400" />
+              <p className="text-sm text-slate-700">{r.vehicle.year} {r.vehicle.make} {r.vehicle.model} <span className="text-slate-400">· {r.vehicle.licensePlate}</span></p>
+            </div>
+            <div className="flex items-center gap-2">
+              <CalendarDays className="h-4 w-4 flex-shrink-0 text-slate-400" />
+              <p className="text-sm text-slate-700">
+                {dayjs(r.startDate).format('MMM D, YYYY')} → {dayjs(r.endDate).format('MMM D, YYYY')}
+                <span className="ml-2 text-slate-400">{days} day{days > 1 ? 's' : ''}</span>
+              </p>
+            </div>
+            {r.notes && (
+              <div className="flex items-start gap-2">
+                <MessageSquare className="h-4 w-4 flex-shrink-0 text-slate-400 mt-0.5" />
+                <p className="text-sm text-slate-600 italic">"{r.notes}"</p>
+              </div>
+            )}
+            <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${REQUEST_STAGE_STYLE[r.bookingRequest.stage] ?? 'bg-slate-100 text-slate-700'}`}>
+                  {REQUEST_STAGE_LABEL[r.bookingRequest.stage] ?? r.bookingRequest.stage}
+                </span>
+                {r.bookingRequest.paymentRequired ? (
+                  <span className="inline-flex rounded-full bg-purple-100 px-2.5 py-1 text-xs font-semibold text-purple-800">
+                    Payment pending
+                  </span>
+                ) : null}
+              </div>
+              {missingItems.length > 0 ? (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {missingItems.map((item) => (
+                    <span key={item} className="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-medium text-amber-800">
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          {/* Right: total + actions */}
+          <div className="flex flex-col items-end gap-3 flex-shrink-0">
+            <div className="text-right">
+              <p className="text-xs text-slate-400">Estimated total</p>
+              <p className="text-xl font-bold text-slate-900">{formatCurrency(r.totalAmount, 'MAD')}</p>
+              <p className="text-xs text-slate-400">{formatCurrency(r.dailyRate, 'MAD')}/day</p>
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={onDecline}
+                disabled={acting}
+                className="flex items-center gap-1.5 rounded-full border border-rose-200 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-700 hover:bg-rose-100 disabled:opacity-50"
+              >
+                <XCircle className="h-4 w-4" />
+                Decline
+              </button>
+              <button
+                onClick={onConfirm}
+                disabled={acting}
+                className="flex items-center gap-1.5 rounded-full bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50"
+              >
+                <CheckCircle className="h-4 w-4" />
+                {acting ? 'Confirming…' : 'Confirm'}
+              </button>
+            </div>
+            <p className="text-xs text-slate-400">Received {dayjs(r.createdAt).format('MMM D [at] HH:mm')}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-slate-100 bg-slate-50 px-5 py-2.5 flex items-center justify-between">
+        <p className="text-xs text-slate-400">Ref: {r.id.slice(-10).toUpperCase()}</p>
+        <Link href={`/reservations/${r.id}`} className="flex items-center gap-1 text-xs text-slate-500 hover:text-blue-700">
+          View full detail <ChevronRight className="h-3 w-3" />
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/page.tsx b/dashboard/src/app/(dashboard)/page.tsx
new file mode 100644
index 0000000..1993d01
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/page.tsx
@@ -0,0 +1,499 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Calendar, Car, Users, DollarSign, AlertTriangle, Clock, XCircle, Plus, BarChart3, FileText, TrendingUp, MapPin } from 'lucide-react'
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
+import StatCard from '@/components/ui/StatCard'
+import { EMPLOYEE_PROFILE_KEY, apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { formatCurrency } from '@rentaldrivego/types'
+
+/**
+ * Location breakdown item — requires backend field on /analytics/dashboard.
+ * Flagged as a contract change (not faked).
+ */
+interface LocationBreakdown {
+  name: string
+  bookingCount: number
+  revenue: number
+  /** 0–100 utilization percentage */
+  utilizationPct: number
+}
+
+interface DashboardData {
+  kpis: {
+    totalBookings: number
+    activeVehicles: number
+    monthlyRevenue: number
+    totalCustomers: number
+    bookingsChange: number
+    vehiclesChange: number
+    revenueChange: number
+    customersChange: number
+    /** Requires backend field — flagged as contract change */
+    utilizationRate?: number
+    /** Requires backend field — flagged as contract change */
+    revenuePerVehicle?: number
+    /** Requires backend field — flagged as contract change */
+    fulfillmentRate?: number
+  }
+  recentReservations: {
+    id: string
+    bookingRef: string
+    customerName: string
+    vehicleName: string
+    startDate: string
+    endDate: string
+    status: string
+    totalAmount: number
+  }[]
+  sourceBreakdown: { source: string; count: number; revenue: number }[]
+  /** Requires backend field — flagged as contract change */
+  locationBreakdown?: LocationBreakdown[]
+  subscription: {
+    status: string
+    planName: string
+    trialEndsAt: string | null
+  }
+}
+
+interface EmployeeProfile {
+  role?: string
+  firstName?: string
+  lastName?: string
+  email?: string
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  CONFIRMED: 'badge-blue',
+  PENDING: 'badge-amber',
+  ACTIVE: 'badge-green',
+  COMPLETED: 'badge-gray',
+  CANCELLED: 'badge-red',
+}
+
+interface QuickAction {
+  icon: React.ReactNode
+  label: string
+  href: string
+  color: string
+}
+
+function QuickActionsSection({ actions }: { actions: QuickAction[] }) {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {actions.map((action) => (
+        <Link
+          key={action.href}
+          href={action.href}
+          className={`rdg-quick-action flex items-center gap-2 px-4 py-3 transition-all ${action.color}`}
+        >
+          {action.icon}
+          <span className="text-sm font-medium">{action.label}</span>
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+function SubscriptionBanner({
+  status,
+  trialEndsAt,
+  trialEndsMsg,
+  trialActiveMsg,
+  pastDueMsg,
+  suspendedMsg,
+  manageBillingLabel,
+}: {
+  status: string
+  trialEndsAt: string | null
+  trialEndsMsg: (date: string) => string
+  trialActiveMsg: string
+  pastDueMsg: string
+  suspendedMsg: string
+  manageBillingLabel: string
+}) {
+  if (status === 'ACTIVE') return null
+
+  const localeDate = trialEndsAt
+    ? new Date(trialEndsAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+    : ''
+
+  const configs: Record<string, { bg: string; icon: React.ReactNode; message: string }> = {
+    TRIALING: {
+      bg: 'bg-blue-500/10 border-blue-400/25 text-blue-200',
+      icon: <Clock className="w-4 h-4" />,
+      message: trialEndsAt ? trialEndsMsg(localeDate) : trialActiveMsg,
+    },
+    PAST_DUE: {
+      bg: 'bg-orange-500/10 border-orange-400/25 text-orange-200',
+      icon: <AlertTriangle className="w-4 h-4" />,
+      message: pastDueMsg,
+    },
+    SUSPENDED: {
+      bg: 'bg-red-500/10 border-red-400/25 text-red-200',
+      icon: <XCircle className="w-4 h-4" />,
+      message: suspendedMsg,
+    },
+  }
+
+  const config = configs[status]
+  if (!config) return null
+
+  return (
+    <div className={`flex items-center gap-3 px-4 py-3 rounded-xl border mb-6 ${config.bg}`}>
+      {config.icon}
+      <p className="text-sm font-medium">{config.message}</p>
+      <Link href="/subscription" className="ml-auto text-sm font-semibold underline hover:no-underline">
+        {manageBillingLabel}
+      </Link>
+    </div>
+  )
+}
+
+function BranchPerformanceList({
+  locations,
+  formatCurrencyFn,
+}: {
+  locations: LocationBreakdown[]
+  formatCurrencyFn: (amount: number, currency: string) => string
+}) {
+  const maxCount = Math.max(...locations.map((l) => l.bookingCount), 1)
+
+  return (
+    <div className="glass-card p-6">
+      <div className="mb-4 flex items-center gap-2">
+        <MapPin className="h-4 w-4 text-orange-700 dark:text-orange-300" />
+        <h2 className="text-base font-semibold text-blue-950 dark:text-slate-100">Location Performance</h2>
+      </div>
+      <div className="space-y-4">
+        {locations.map((loc) => (
+          <div key={loc.name}>
+            <div className="mb-1 flex items-center justify-between">
+              <span className="text-sm font-medium text-blue-950 dark:text-slate-100">{loc.name}</span>
+              <span className="text-xs font-mono text-slate-500 dark:text-slate-400">
+                {loc.bookingCount} bookings · {formatCurrencyFn(loc.revenue, 'MAD')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="progress-bar flex-1">
+                <div
+                  className="progress-fill blue"
+                  style={{ width: `${(loc.bookingCount / maxCount) * 100}%` }}
+                />
+              </div>
+              <span className="w-8 text-right text-xs font-mono text-slate-500 dark:text-slate-400">
+                {loc.utilizationPct}%
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function DashboardPage() {
+  const { dict, language, theme } = useDashboardI18n()
+  const d = dict.dashboardPage
+  const nav = dict.nav
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const isDark = theme === 'dark'
+  const chartGrid = isDark ? 'rgba(59,130,246,0.14)' : 'rgba(37,99,235,0.14)'
+  const chartAxis = isDark ? 'rgba(59,130,246,0.20)' : 'rgba(37,99,235,0.22)'
+  const chartText = isDark ? '#8899b4' : '#64748b'
+  const chartTooltipBg = isDark ? '#111827' : '#ffffff'
+  const chartTooltipText = isDark ? '#e8edf5' : '#172554'
+
+  const [data, setData] = useState<DashboardData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<{ code: string; message: string } | null>(null)
+  const [employeeRole, setEmployeeRole] = useState<string | null>(null)
+  const [employeeName, setEmployeeName] = useState<string | null>(null)
+
+  useEffect(() => {
+    try {
+      const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
+      if (!cached) return
+      const profile = JSON.parse(cached) as EmployeeProfile
+      setEmployeeRole(profile.role ?? null)
+      const fullName = [profile.firstName, profile.lastName].filter(Boolean).join(' ') || null
+      setEmployeeName(fullName)
+    } catch {}
+  }, [])
+
+  useEffect(() => {
+    apiFetch<DashboardData>('/analytics/dashboard')
+      .then(setData)
+      .catch((err) => setError({ code: err.code ?? '', message: err.message }))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    const errorMsg = error.code === 'forbidden' ? d.forbidden : error.message
+    return (
+      <div className="card p-6 text-center">
+        <p className="text-slate-500 text-sm dark:text-slate-400">{errorMsg}</p>
+      </div>
+    )
+  }
+
+  const kpis = data?.kpis ?? { totalBookings: 0, activeVehicles: 0, monthlyRevenue: 0, totalCustomers: 0, bookingsChange: 0, vehiclesChange: 0, revenueChange: 0, customersChange: 0 }
+  const canViewRevenue = employeeRole !== 'AGENT'
+
+  const formatDate = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric' })
+  const formatDateYear = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric', year: 'numeric' })
+
+  return (
+    <div className="space-y-8">
+      {/* Welcome Section */}
+      <div className="rdg-page-hero">
+        <p className="rdg-page-kicker mb-3">Rental operations</p>
+        <h1 className="mb-2 text-blue-950 dark:text-slate-50">
+          Welcome back{employeeName ? `, ${employeeName}` : ''}!
+        </h1>
+        <p className="rdg-page-description mb-0 text-sm">
+          Here's what's happening with your fleet today
+        </p>
+      </div>
+
+      {/* Quick Actions */}
+      <QuickActionsSection
+        actions={[
+          {
+            icon: <Plus className="w-4 h-4" />,
+            label: 'New Reservation',
+            href: '/reservations/new',
+            color: 'text-blue-700 dark:text-blue-300',
+          },
+          {
+            icon: <Car className="w-4 h-4" />,
+            label: nav.fleet,
+            href: '/fleet',
+            color: 'text-emerald-700 dark:text-emerald-300',
+          },
+          {
+            icon: <Users className="w-4 h-4" />,
+            label: nav.customers,
+            href: '/customers',
+            color: 'text-orange-700 dark:text-orange-300',
+          },
+          {
+            icon: <FileText className="w-4 h-4" />,
+            label: nav.reports,
+            href: '/reports',
+            color: 'text-orange-700 dark:text-orange-300',
+          },
+        ]}
+      />
+
+      {data?.subscription && (
+        <SubscriptionBanner
+          status={data.subscription.status}
+          trialEndsAt={data.subscription.trialEndsAt}
+          trialEndsMsg={d.trialEnds}
+          trialActiveMsg={d.trialActive}
+          pastDueMsg={d.pastDueMsg}
+          suspendedMsg={d.suspendedMsg}
+          manageBillingLabel={d.manageBilling}
+        />
+      )}
+
+      {/* KPI Cards */}
+      <div className={`grid grid-cols-1 gap-4 sm:grid-cols-2 ${canViewRevenue ? 'lg:grid-cols-4' : 'lg:grid-cols-3'}`}>
+        <StatCard
+          title={d.kpiTotalBookings}
+          value={kpis.totalBookings.toLocaleString()}
+          change={kpis.bookingsChange}
+          vsLastMonthLabel={d.vsLastMonth}
+          icon={Calendar}
+          iconColor="text-blue-700 dark:text-blue-300"
+          iconBg="bg-blue-100/80 dark:bg-blue-500/10"
+          pulse
+        />
+        <StatCard
+          title={d.kpiActiveVehicles}
+          value={kpis.activeVehicles.toLocaleString()}
+          change={kpis.vehiclesChange}
+          vsLastMonthLabel={d.vsLastMonth}
+          icon={Car}
+          iconColor="text-emerald-700 dark:text-emerald-300"
+          iconBg="bg-emerald-100/80 dark:bg-emerald-500/10"
+        />
+        {canViewRevenue ? (
+          <StatCard
+            title={d.kpiMonthlyRevenue}
+            value={formatCurrency(kpis.monthlyRevenue, 'MAD')}
+            change={kpis.revenueChange}
+            vsLastMonthLabel={d.vsLastMonth}
+            icon={DollarSign}
+            iconColor="text-orange-700 dark:text-orange-300"
+            iconBg="bg-orange-100/80 dark:bg-orange-500/10"
+            valueGradient
+          />
+        ) : null}
+        <StatCard
+          title={d.kpiTotalCustomers}
+          value={kpis.totalCustomers.toLocaleString()}
+          change={kpis.customersChange}
+          vsLastMonthLabel={d.vsLastMonth}
+          icon={Users}
+          iconColor="text-blue-700 dark:text-blue-300"
+          iconBg="bg-blue-100/80 dark:bg-blue-500/10"
+        />
+      </div>
+
+      {/* New metrics row — contract change flag */}
+      {kpis.utilizationRate !== undefined && (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <StatCard
+            title="Utilization Rate"
+            value={`${kpis.utilizationRate}%`}
+            icon={TrendingUp}
+            iconColor="text-blue-700 dark:text-blue-300"
+            iconBg="bg-blue-100/80 dark:bg-blue-500/10"
+            progressPercent={kpis.utilizationRate}
+            target={100}
+          />
+          <StatCard
+            title="Revenue / Vehicle"
+            value={formatCurrency(kpis.revenuePerVehicle ?? 0, 'MAD')}
+            icon={DollarSign}
+            iconColor="text-orange-700 dark:text-orange-300"
+            iconBg="bg-orange-100/80 dark:bg-orange-500/10"
+          />
+          <StatCard
+            title="Fulfillment Rate"
+            value={`${kpis.fulfillmentRate ?? 0}%`}
+            icon={BarChart3}
+            iconColor="text-emerald-700 dark:text-emerald-300"
+            iconBg="bg-emerald-100/80 dark:bg-emerald-500/10"
+            progressPercent={kpis.fulfillmentRate ?? 0}
+            target={100}
+          />
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column — 2/3: Booking Sources + Location Performance */}
+        <div className="lg:col-span-2 space-y-6">
+          <div className="card p-6">
+            <h2 className="mb-4 text-base font-semibold text-blue-950 dark:text-slate-100">{d.bookingSources}</h2>
+            {data?.sourceBreakdown && data.sourceBreakdown.length > 0 ? (
+              <ResponsiveContainer width="100%" height={240}>
+                <BarChart data={data.sourceBreakdown}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={chartGrid} />
+                  <XAxis dataKey="source" tick={{ fontSize: 12, fill: chartText }} axisLine={{ stroke: chartAxis }} tickLine={false} />
+                  <YAxis tick={{ fontSize: 12, fill: chartText }} axisLine={{ stroke: chartAxis }} tickLine={false} />
+                  <Tooltip
+                    contentStyle={{ borderRadius: '8px', border: `1px solid ${chartAxis}`, background: chartTooltipBg, color: chartTooltipText, fontSize: '12px' }}
+                    cursor={{ fill: 'rgba(59,130,246,0.08)' }}
+                  />
+                  <Legend wrapperStyle={{ fontSize: '12px', color: chartText }} />
+                  <Bar dataKey="count" fill="#3b82f6" name={d.barBookings} radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="revenue" fill="#f97316" name={d.barRevenue} radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="h-48 flex items-center justify-center text-slate-400 text-sm">
+                {d.noBookingData}
+              </div>
+            )}
+          </div>
+
+          {data?.locationBreakdown && data.locationBreakdown.length > 0 ? (
+            <BranchPerformanceList
+              locations={data.locationBreakdown}
+              formatCurrencyFn={(a, c) => formatCurrency(a, c as 'MAD')}
+            />
+          ) : null}
+        </div>
+
+        {/* Right column — 1/3: Quick Stats */}
+        <div className="card p-6">
+          <h2 className="mb-4 text-base font-semibold text-blue-950 dark:text-slate-100">{d.quickStats}</h2>
+          <div className="space-y-4">
+            {(data?.sourceBreakdown ?? []).map((item) => (
+              <div key={item.source} className="flex items-center justify-between">
+                <span className="text-sm capitalize text-slate-500 dark:text-slate-400">{item.source.toLowerCase()}</span>
+                <div className="text-right">
+                  <span className="text-sm font-semibold text-blue-950 dark:text-slate-100">{item.count}</span>
+                  <p className="text-xs text-slate-400">{formatCurrency(item.revenue, 'MAD')}</p>
+                </div>
+              </div>
+            ))}
+            {(!data?.sourceBreakdown || data.sourceBreakdown.length === 0) && (
+              <p className="text-sm text-slate-400">{d.noData}</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Recent Reservations */}
+      <div className="card">
+        <div className="flex items-center justify-between border-b border-blue-200/70 px-6 py-4 dark:border-blue-400/10">
+          <h2 className="text-base font-semibold text-blue-950 dark:text-slate-100">{d.recentReservations}</h2>
+          <Link href="/reservations" className="text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-200">
+            {d.viewAll}
+          </Link>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-blue-200/70 dark:border-blue-400/10">
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colBookingNum}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colCustomer}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colVehicle}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colDates}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colStatus}</th>
+                <th className="text-right px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{d.colTotal}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-blue-200/70 dark:divide-blue-400/10">
+              {(data?.recentReservations ?? []).map((res) => (
+                <tr key={res.id} className="transition-colors hover:bg-blue-500/[0.06]">
+                  <td className="px-6 py-3">
+                    <Link href={`/reservations/${res.id}`} className="text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-200">
+                      #{res.bookingRef}
+                    </Link>
+                  </td>
+                  <td className="px-6 py-3 text-sm text-slate-700 dark:text-slate-300">{res.customerName}</td>
+                  <td className="px-6 py-3 text-sm text-slate-700 dark:text-slate-300">{res.vehicleName}</td>
+                  <td className="px-6 py-3 text-sm text-slate-500 dark:text-slate-400">
+                    {formatDate(res.startDate)} – {formatDateYear(res.endDate)}
+                  </td>
+                  <td className="px-6 py-3">
+                    <span className={STATUS_COLORS[res.status] ?? 'badge-gray'}>
+                      {d.statusLabels[res.status as keyof typeof d.statusLabels] ?? res.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-3 text-right text-sm font-semibold text-blue-950 dark:text-slate-100">
+                    {formatCurrency(res.totalAmount, 'MAD')}
+                  </td>
+                </tr>
+              ))}
+              {(!data?.recentReservations || data.recentReservations.length === 0) && (
+                <tr>
+                  <td colSpan={6} className="px-6 py-8 text-center text-sm text-slate-400">
+                    {d.noReservations}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/reports/page.tsx b/dashboard/src/app/(dashboard)/reports/page.tsx
new file mode 100644
index 0000000..81e292f
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/reports/page.tsx
@@ -0,0 +1,206 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { formatCurrency } from '@rentaldrivego/types'
+import { API_BASE, apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface ReportRow {
+  reservationId: string
+  customerName: string
+  vehicle: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  source: string
+  paymentStatus: string
+}
+
+interface ReportData {
+  summary: {
+    totalReservations: number
+    totalRentalRevenue: number
+    totalDiscounts: number
+    totalInsurance: number
+    totalAdditionalDrivers: number
+    totalCollected: number
+    totalPricingRulesAdj?: number
+  }
+  rows: ReportRow[]
+}
+
+type ReportPeriod = 'WEEKLY' | 'MONTHLY' | 'QUARTERLY' | 'ANNUAL'
+
+export default function ReportsPage() {
+  const { language } = useDashboardI18n()
+  const [period, setPeriod] = useState<ReportPeriod>('MONTHLY')
+  const [report, setReport] = useState<ReportData | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [exporting, setExporting] = useState(false)
+  const copy = {
+    en: {
+      title: 'Reports',
+      subtitle: 'Accountant-ready exports with totals for insurance, additional drivers, and pricing rules.',
+      exportCsv: 'Export CSV',
+      exporting: 'Exporting…',
+      bookings: 'Bookings',
+      rental: 'Rental',
+      insurance: 'Insurance',
+      drivers: 'Drivers',
+      discounts: 'Discounts',
+      collected: 'Collected',
+      reservation: 'Reservation',
+      vehicle: 'Vehicle',
+      period: 'Period',
+      source: 'Source',
+      payment: 'Payment',
+      total: 'Total',
+      emptyRows: 'No report rows available for this period.',
+      periodLabels: { WEEKLY: 'Weekly', MONTHLY: 'Monthly', QUARTERLY: 'Quarterly', ANNUAL: 'Annual' } as Record<ReportPeriod, string>,
+    },
+    fr: {
+      title: 'Rapports',
+      subtitle: 'Exports prêts pour la comptabilité avec les totaux d’assurance, de conducteurs supplémentaires et de règles tarifaires.',
+      exportCsv: 'Exporter en CSV',
+      exporting: 'Export en cours…',
+      bookings: 'Réservations',
+      rental: 'Location',
+      insurance: 'Assurance',
+      drivers: 'Conducteurs',
+      discounts: 'Remises',
+      collected: 'Encaissé',
+      reservation: 'Réservation',
+      vehicle: 'Véhicule',
+      period: 'Période',
+      source: 'Source',
+      payment: 'Paiement',
+      total: 'Total',
+      emptyRows: 'Aucune ligne de rapport pour cette période.',
+      periodLabels: { WEEKLY: 'Hebdomadaire', MONTHLY: 'Mensuel', QUARTERLY: 'Trimestriel', ANNUAL: 'Annuel' } as Record<ReportPeriod, string>,
+    },
+    ar: {
+      title: 'التقارير',
+      subtitle: 'ملفات تصدير جاهزة للمحاسبة تشمل إجماليات التأمين والسائقين الإضافيين وقواعد التسعير.',
+      exportCsv: 'تصدير CSV',
+      exporting: 'جارٍ التصدير…',
+      bookings: 'الحجوزات',
+      rental: 'الإيجار',
+      insurance: 'التأمين',
+      drivers: 'السائقون',
+      discounts: 'الخصومات',
+      collected: 'المحصّل',
+      reservation: 'الحجز',
+      vehicle: 'المركبة',
+      period: 'الفترة',
+      source: 'المصدر',
+      payment: 'الدفع',
+      total: 'الإجمالي',
+      emptyRows: 'لا توجد بيانات تقرير لهذه الفترة.',
+      periodLabels: { WEEKLY: 'أسبوعي', MONTHLY: 'شهري', QUARTERLY: 'ربع سنوي', ANNUAL: 'سنوي' } as Record<ReportPeriod, string>,
+    },
+  }[language]
+
+  useEffect(() => {
+    apiFetch<ReportData>(`/analytics/report?period=${period}`)
+      .then(setReport)
+      .catch((err) => setError(err.message))
+  }, [period])
+
+  async function exportCsv() {
+    setExporting(true)
+    setError(null)
+    try {
+      const res = await fetch(`${API_BASE}/analytics/report?period=${period}&format=CSV`, {
+        credentials: 'include',
+      })
+      if (!res.ok) {
+        const json = await res.json().catch(() => null)
+        throw new Error(json?.message ?? copy.exportCsv)
+      }
+      const csv = await res.text()
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+      const url = window.URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = `rentaldrivego-${period.toLowerCase()}-report.csv`
+      anchor.click()
+      window.URL.revokeObjectURL(url)
+    } catch (err: any) {
+      setError(err.message ?? copy.exportCsv)
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+          <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {(Object.keys(copy.periodLabels) as ReportPeriod[]).map((option) => (
+            <button
+              key={option}
+              onClick={() => setPeriod(option)}
+              className={`rounded-full px-4 py-2 text-sm font-semibold ${period === option ? 'bg-blue-900 text-white' : 'border border-slate-300 text-slate-700'}`}
+            >
+              {copy.periodLabels[option]}
+            </button>
+          ))}
+          <button onClick={exportCsv} disabled={exporting} className="rounded-full border border-slate-900 px-4 py-2 text-sm font-semibold text-slate-900">
+            {exporting ? copy.exporting : copy.exportCsv}
+          </button>
+        </div>
+      </div>
+
+      {error && <div className="card p-6 text-sm text-red-600">{error}</div>}
+
+      {report && (
+        <div className="grid grid-cols-2 gap-4 lg:grid-cols-6">
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.bookings}</p><p className="mt-1 text-2xl font-bold text-slate-900">{report.summary.totalReservations}</p></div>
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.rental}</p><p className="mt-1 text-2xl font-bold text-slate-900">{formatCurrency(report.summary.totalRentalRevenue, 'MAD')}</p></div>
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.insurance}</p><p className="mt-1 text-2xl font-bold text-slate-900">{formatCurrency(report.summary.totalInsurance, 'MAD')}</p></div>
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.drivers}</p><p className="mt-1 text-2xl font-bold text-slate-900">{formatCurrency(report.summary.totalAdditionalDrivers, 'MAD')}</p></div>
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.discounts}</p><p className="mt-1 text-2xl font-bold text-slate-900">{formatCurrency(report.summary.totalDiscounts, 'MAD')}</p></div>
+          <div className="card p-5"><p className="text-sm text-slate-500">{copy.collected}</p><p className="mt-1 text-2xl font-bold text-slate-900">{formatCurrency(report.summary.totalCollected, 'MAD')}</p></div>
+        </div>
+      )}
+
+      <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-slate-200 bg-slate-50">
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.reservation}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.vehicle}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.period}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.source}</th>
+                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-slate-500">{copy.payment}</th>
+                <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wide text-slate-500">{copy.total}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {(report?.rows ?? []).map((row) => (
+                <tr key={row.reservationId}>
+                  <td className="px-6 py-4 text-sm text-slate-700">{row.customerName}</td>
+                  <td className="px-6 py-4 text-sm text-slate-700">{row.vehicle}</td>
+                  <td className="px-6 py-4 text-sm text-slate-500">{row.startDate} - {row.endDate}</td>
+                  <td className="px-6 py-4 text-sm text-slate-700">{row.source}</td>
+                  <td className="px-6 py-4"><span className="badge-gray">{row.paymentStatus}</span></td>
+                  <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">{formatCurrency(row.totalAmount, 'MAD')}</td>
+                </tr>
+              ))}
+              {(report?.rows.length ?? 0) === 0 && (
+                <tr>
+                  <td colSpan={6} className="px-6 py-10 text-center text-sm text-slate-400">{copy.emptyRows}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx b/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx
new file mode 100644
index 0000000..c215ba0
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx
@@ -0,0 +1,910 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import DamageInspectionCard, { DamageInspection } from '@/components/reservations/DamageInspectionCard'
+import ReservationPhotoSection from '@/components/reservations/ReservationPhotoSection'
+
+interface ReservationDetail {
+  id: string
+  status: string
+  source: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  discountAmount: number
+  insuranceTotal: number
+  additionalDriverTotal: number
+  pricingRulesTotal: number
+  paymentStatus: string
+  depositAmount: number
+  pickupLocation: string | null
+  returnLocation: string | null
+  paymentMode: string | null
+  notes: string | null
+  contractNumber: string | null
+  invoiceNumber: string | null
+  damageChargeAmount: number | null
+  damageChargeNote: string | null
+  pricingRulesApplied: { name: string; amount: number; type: string }[] | null
+  customer: {
+    firstName: string
+    lastName: string
+    email: string
+    phone: string | null
+    driverLicense: string | null
+    licenseImageUrl: string | null
+    licenseValidationStatus: string
+    flagged: boolean
+  }
+  vehicle: {
+    make: string
+    model: string
+    licensePlate: string
+  }
+  insurances: { id: string; policyName: string; totalCharge: number }[]
+  additionalDrivers: {
+    id: string
+    firstName: string
+    lastName: string
+    driverLicense: string
+    totalCharge: number
+    requiresApproval: boolean
+    approvedAt: string | null
+    approvalNote: string | null
+  }[]
+  workflow: {
+    contractGenerated: boolean
+    closed: boolean
+    closedAt: string | null
+    closedBy: string | null
+    coreEditable: boolean
+    returnEditable: boolean
+    checkInInspectionEditable: boolean
+    checkOutInspectionEditable: boolean
+  }
+  bookingRequest: {
+    stage: string
+    companyConfirmed: boolean
+    documentsRequired: boolean
+    paymentRequired: boolean
+    documentsMissing: string[]
+  }
+}
+
+type EditMode = 'booking' | 'return' | null
+
+type ReservationFormState = {
+  startDate: string
+  endDate: string
+  pickupLocation: string
+  returnLocation: string
+  depositAmount: string
+  paymentMode: string
+  notes: string
+  damageChargeAmount: string
+  damageChargeNote: string
+}
+
+const detailCopy = {
+  en: {
+    editBooking: 'Edit booking',
+    saveBooking: 'Save booking',
+    editReturn: 'Edit return',
+    saveReturn: 'Save return',
+    cancelEdit: 'Cancel',
+    closeReservation: 'Close reservation',
+    bookingDetails: 'Booking details',
+    returnDetails: 'Return closing',
+    startLabel: 'Start date & time',
+    endLabel: 'End date & time',
+    pickupLabel: 'Pickup location',
+    returnLabel: 'Return location',
+    depositLabel: 'Deposit',
+    paymentModeLabel: 'Payment mode',
+    bookingNotesLabel: 'Booking notes',
+    returnChargeLabel: 'Damage charge',
+    returnChargeNoteLabel: 'Return note',
+    paymentModeEmpty: 'Not set',
+    noLocation: 'Not provided',
+    failedSave: 'Failed to save reservation',
+    failedClose: 'Failed to close reservation',
+    contractLockMessage: 'Contract generated. Booking details are locked and remain view-only until the vehicle is returned.',
+    activeLockMessage: 'Rental is in progress. Booking details are view-only until the vehicle is returned.',
+    returnLockMessage: 'Vehicle returned. Only the return section and the check-out inspection can still be edited before closing the reservation.',
+    closedLockMessage: 'Reservation closed. No further editing is allowed.',
+    closedMeta: 'Closed',
+    checkoutSummary: 'Check-out status',
+    checkoutPending: 'Waiting for return edits',
+    checkoutReady: 'Return section open',
+    checkoutClosed: 'Reservation closed',
+    checkInReadOnly: 'Check-in inspection is only editable after the reservation is confirmed and before return.',
+    checkOutReadOnly: 'Check-out inspection becomes editable once the vehicle is returned.',
+    inspectionClosed: 'This reservation is closed. Inspection edits are disabled.',
+    licenseImageLabel: 'License image',
+    bookingProgress: 'Booking progress',
+    paymentPending: 'Payment or deposit still pending',
+    stageLabels: {
+      REQUEST_SENT: 'Waiting for company review',
+      COMPANY_CONFIRMED: 'Availability confirmed',
+      DOCUMENTS_REQUIRED: 'Driver documents missing',
+      PAYMENT_REQUIRED: 'Payment or deposit pending',
+      BOOKING_CONFIRMED: 'Ready to proceed',
+      CANCELLED: 'Request closed',
+    },
+    missingItems: {
+      DATE_OF_BIRTH: 'Date of birth',
+      IDENTITY_DOCUMENT: 'Identity document',
+      FULL_ADDRESS: 'Full address',
+      DRIVER_LICENSE: 'Driver license number',
+      LICENSE_IMAGE: 'License image',
+      LICENSE_APPROVAL: 'License approval',
+    },
+    noLicenseImage: 'No license image uploaded.',
+    pickupPhotosTitle: 'Pickup photos',
+    dropoffPhotosTitle: 'Return photos',
+    pickupPhotosReadOnly: 'Pickup photos can be added once the reservation is confirmed.',
+    dropoffPhotosReadOnly: 'Return photos become available once the vehicle is checked out.',
+    extendBtn: 'Extend rental',
+    extendTitle: 'Extend rental',
+    extendNewEnd: 'New return date & time',
+    extendReason: 'Reason for extension',
+    extendReasonPlaceholder: 'e.g. Customer requested 2 extra days',
+    extendSubmit: 'Confirm extension',
+    extendCancel: 'Cancel',
+    extendFailed: 'Failed to extend reservation',
+  },
+  fr: {
+    editBooking: 'Modifier la réservation',
+    saveBooking: 'Enregistrer la réservation',
+    editReturn: 'Modifier le retour',
+    saveReturn: 'Enregistrer le retour',
+    cancelEdit: 'Annuler',
+    closeReservation: 'Clôturer la réservation',
+    bookingDetails: 'Détails de la réservation',
+    returnDetails: 'Clôture du retour',
+    startLabel: 'Date et heure de départ',
+    endLabel: 'Date et heure de retour',
+    pickupLabel: 'Lieu de départ',
+    returnLabel: 'Lieu de retour',
+    depositLabel: 'Dépôt',
+    paymentModeLabel: 'Mode de paiement',
+    bookingNotesLabel: 'Notes de réservation',
+    returnChargeLabel: 'Frais de dommage',
+    returnChargeNoteLabel: 'Note de retour',
+    paymentModeEmpty: 'Non défini',
+    noLocation: 'Non renseigné',
+    failedSave: 'Échec de la sauvegarde de la réservation',
+    failedClose: 'Échec de la clôture de la réservation',
+    contractLockMessage: 'Le contrat a été généré. Les détails de la réservation sont verrouillés jusqu’au retour du véhicule.',
+    activeLockMessage: 'La location est en cours. Les détails de la réservation sont en lecture seule jusqu’au retour du véhicule.',
+    returnLockMessage: 'Le véhicule est de retour. Seule la section de retour et l’inspection de retour peuvent encore être modifiées avant la clôture.',
+    closedLockMessage: 'La réservation est clôturée. Aucune autre modification n’est autorisée.',
+    closedMeta: 'Clôturée',
+    checkoutSummary: 'Statut du retour',
+    checkoutPending: 'En attente des modifications de retour',
+    checkoutReady: 'Section retour ouverte',
+    checkoutClosed: 'Réservation clôturée',
+    checkInReadOnly: 'L’inspection de départ est modifiable après confirmation et avant le retour.',
+    checkOutReadOnly: 'L’inspection de retour devient modifiable une fois le véhicule retourné.',
+    inspectionClosed: 'Cette réservation est clôturée. Les modifications d’inspection sont désactivées.',
+    licenseImageLabel: 'Image du permis',
+    bookingProgress: 'Progression de la réservation',
+    paymentPending: 'Paiement ou dépôt encore en attente',
+    stageLabels: {
+      REQUEST_SENT: 'En attente de validation',
+      COMPANY_CONFIRMED: 'Disponibilité confirmée',
+      DOCUMENTS_REQUIRED: 'Documents conducteur manquants',
+      PAYMENT_REQUIRED: 'Paiement ou dépôt en attente',
+      BOOKING_CONFIRMED: 'Prêt à avancer',
+      CANCELLED: 'Demande clôturée',
+    },
+    missingItems: {
+      DATE_OF_BIRTH: 'Date de naissance',
+      IDENTITY_DOCUMENT: 'Pièce d’identité',
+      FULL_ADDRESS: 'Adresse complète',
+      DRIVER_LICENSE: 'Numéro du permis',
+      LICENSE_IMAGE: 'Image du permis',
+      LICENSE_APPROVAL: 'Validation du permis',
+    },
+    noLicenseImage: 'Aucune image de permis téléversée.',
+    pickupPhotosTitle: 'Photos de départ',
+    dropoffPhotosTitle: 'Photos de retour',
+    pickupPhotosReadOnly: 'Les photos de départ sont disponibles après confirmation de la réservation.',
+    dropoffPhotosReadOnly: 'Les photos de retour sont disponibles après la restitution du véhicule.',
+    extendBtn: 'Prolonger la location',
+    extendTitle: 'Prolonger la location',
+    extendNewEnd: 'Nouvelle date de retour',
+    extendReason: 'Motif de prolongation',
+    extendReasonPlaceholder: 'ex. Le client a demandé 2 jours supplémentaires',
+    extendSubmit: 'Confirmer la prolongation',
+    extendCancel: 'Annuler',
+    extendFailed: 'Échec de la prolongation',
+  },
+  ar: {
+    editBooking: 'تعديل الحجز',
+    saveBooking: 'حفظ الحجز',
+    editReturn: 'تعديل الإرجاع',
+    saveReturn: 'حفظ الإرجاع',
+    cancelEdit: 'إلغاء',
+    closeReservation: 'إغلاق الحجز',
+    bookingDetails: 'تفاصيل الحجز',
+    returnDetails: 'إقفال الإرجاع',
+    startLabel: 'تاريخ ووقت البداية',
+    endLabel: 'تاريخ ووقت النهاية',
+    pickupLabel: 'موقع الاستلام',
+    returnLabel: 'موقع الإرجاع',
+    depositLabel: 'العربون',
+    paymentModeLabel: 'طريقة الدفع',
+    bookingNotesLabel: 'ملاحظات الحجز',
+    returnChargeLabel: 'رسوم الأضرار',
+    returnChargeNoteLabel: 'ملاحظة الإرجاع',
+    paymentModeEmpty: 'غير محدد',
+    noLocation: 'غير متوفر',
+    failedSave: 'فشل حفظ الحجز',
+    failedClose: 'فشل إغلاق الحجز',
+    contractLockMessage: 'تم إنشاء العقد. تفاصيل الحجز مقفلة وتبقى للعرض فقط حتى عودة السيارة.',
+    activeLockMessage: 'التأجير قيد التنفيذ. تفاصيل الحجز للعرض فقط حتى عودة السيارة.',
+    returnLockMessage: 'تمت إعادة السيارة. يمكن تعديل قسم الإرجاع وفحص الإرجاع فقط قبل إغلاق الحجز.',
+    closedLockMessage: 'تم إغلاق الحجز. لا يُسمح بأي تعديل إضافي.',
+    closedMeta: 'مغلق',
+    checkoutSummary: 'حالة الإرجاع',
+    checkoutPending: 'بانتظار تعديلات الإرجاع',
+    checkoutReady: 'قسم الإرجاع مفتوح',
+    checkoutClosed: 'تم إغلاق الحجز',
+    checkInReadOnly: 'يمكن تعديل فحص الاستلام بعد تأكيد الحجز وقبل الإرجاع فقط.',
+    checkOutReadOnly: 'يصبح فحص الإرجاع قابلاً للتعديل بعد عودة السيارة.',
+    inspectionClosed: 'هذا الحجز مغلق. تم تعطيل تعديل الفحص.',
+    licenseImageLabel: 'صورة الرخصة',
+    bookingProgress: 'تقدم الحجز',
+    paymentPending: 'الدفع أو العربون ما زال معلقاً',
+    stageLabels: {
+      REQUEST_SENT: 'بانتظار مراجعة الشركة',
+      COMPANY_CONFIRMED: 'تم تأكيد التوفر',
+      DOCUMENTS_REQUIRED: 'وثائق السائق ناقصة',
+      PAYMENT_REQUIRED: 'الدفع أو العربون معلق',
+      BOOKING_CONFIRMED: 'جاهز للمتابعة',
+      CANCELLED: 'تم إغلاق الطلب',
+    },
+    missingItems: {
+      DATE_OF_BIRTH: 'تاريخ الميلاد',
+      IDENTITY_DOCUMENT: 'وثيقة الهوية',
+      FULL_ADDRESS: 'العنوان الكامل',
+      DRIVER_LICENSE: 'رقم الرخصة',
+      LICENSE_IMAGE: 'صورة الرخصة',
+      LICENSE_APPROVAL: 'اعتماد الرخصة',
+    },
+    noLicenseImage: 'لم يتم رفع صورة الرخصة.',
+    pickupPhotosTitle: 'صور الاستلام',
+    dropoffPhotosTitle: 'صور الإرجاع',
+    pickupPhotosReadOnly: 'تتوفر صور الاستلام بعد تأكيد الحجز.',
+    dropoffPhotosReadOnly: 'تتوفر صور الإرجاع بعد إعادة السيارة.',
+    extendBtn: 'تمديد التأجير',
+    extendTitle: 'تمديد التأجير',
+    extendNewEnd: 'تاريخ الإرجاع الجديد',
+    extendReason: 'سبب التمديد',
+    extendReasonPlaceholder: 'مثال: طلب العميل يومين إضافيين',
+    extendSubmit: 'تأكيد التمديد',
+    extendCancel: 'إلغاء',
+    extendFailed: 'فشل تمديد الحجز',
+  },
+} as const
+
+function toDateTimeInputValue(iso: string) {
+  const date = new Date(iso)
+  const offset = date.getTimezoneOffset()
+  return new Date(date.getTime() - offset * 60_000).toISOString().slice(0, 16)
+}
+
+function toFormState(reservation: ReservationDetail): ReservationFormState {
+  return {
+    startDate: toDateTimeInputValue(reservation.startDate),
+    endDate: toDateTimeInputValue(reservation.endDate),
+    pickupLocation: reservation.pickupLocation ?? '',
+    returnLocation: reservation.returnLocation ?? '',
+    depositAmount: String(reservation.depositAmount ?? 0),
+    paymentMode: reservation.paymentMode ?? '',
+    notes: reservation.notes ?? '',
+    damageChargeAmount: reservation.damageChargeAmount !== null && reservation.damageChargeAmount !== undefined ? String(reservation.damageChargeAmount) : '',
+    damageChargeNote: reservation.damageChargeNote ?? '',
+  }
+}
+
+function toIsoString(value: string) {
+  return new Date(value).toISOString()
+}
+
+export default function ReservationDetailPage() {
+  const params = useParams<{ id: string }>()
+  const { dict, language } = useDashboardI18n()
+  const r = dict.reservations
+  const copy = detailCopy[language]
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+
+  const [reservation, setReservation] = useState<ReservationDetail | null>(null)
+  const [inspections, setInspections] = useState<DamageInspection[]>([])
+  const [form, setForm] = useState<ReservationFormState | null>(null)
+  const [editMode, setEditMode] = useState<EditMode>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [acting, setActing] = useState(false)
+  const [showExtend, setShowExtend] = useState(false)
+  const [extendForm, setExtendForm] = useState({ newEndDate: '', reason: '' })
+  const [extendError, setExtendError] = useState<string | null>(null)
+
+  async function loadReservation() {
+    try {
+      const [reservationData, inspectionData] = await Promise.all([
+        apiFetch<ReservationDetail>(`/reservations/${params.id}`),
+        apiFetch<DamageInspection[]>(`/reservations/${params.id}/inspections`),
+      ])
+      setReservation(reservationData)
+      setInspections(inspectionData)
+      setForm(toFormState(reservationData))
+      setEditMode(null)
+      setError(null)
+    } catch (err: any) {
+      setError(err.message ?? r.failedToLoad)
+    }
+  }
+
+  useEffect(() => {
+    loadReservation()
+  }, [params.id])
+
+  async function runAction(action: 'confirm' | 'checkin' | 'checkout') {
+    setActing(true)
+    setActionError(null)
+    const errorMsg = action === 'confirm' ? r.failedConfirm : action === 'checkin' ? r.failedCheckIn : r.failedCheckOut
+    try {
+      await apiFetch(`/reservations/${params.id}/${action}`, {
+        method: 'POST',
+        body: JSON.stringify({}),
+      })
+      await loadReservation()
+    } catch (err: any) {
+      setActionError(err.message ?? errorMsg)
+    } finally {
+      setActing(false)
+    }
+  }
+
+  async function saveReservation(mode: Exclude<EditMode, null>) {
+    if (!form) return
+
+    setActing(true)
+    setActionError(null)
+    try {
+      const payload = mode === 'booking'
+        ? {
+            startDate: toIsoString(form.startDate),
+            endDate: toIsoString(form.endDate),
+            pickupLocation: form.pickupLocation || null,
+            returnLocation: form.returnLocation || null,
+            depositAmount: Number(form.depositAmount || 0),
+            paymentMode: form.paymentMode || null,
+            notes: form.notes || null,
+          }
+        : {
+            returnLocation: form.returnLocation || null,
+            damageChargeAmount: form.damageChargeAmount ? Number(form.damageChargeAmount) : 0,
+            damageChargeNote: form.damageChargeNote || null,
+          }
+
+      await apiFetch(`/reservations/${params.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify(payload),
+      })
+      await loadReservation()
+    } catch (err: any) {
+      setActionError(err.message ?? copy.failedSave)
+    } finally {
+      setActing(false)
+    }
+  }
+
+  async function closeReservation() {
+    setActing(true)
+    setActionError(null)
+    try {
+      await apiFetch(`/reservations/${params.id}/close`, {
+        method: 'POST',
+        body: JSON.stringify({}),
+      })
+      await loadReservation()
+    } catch (err: any) {
+      setActionError(err.message ?? copy.failedClose)
+    } finally {
+      setActing(false)
+    }
+  }
+
+  async function approveDriver(driverId: string) {
+    setActing(true)
+    setActionError(null)
+    try {
+      await apiFetch(`/reservations/${params.id}/additional-drivers/${driverId}/approval`, {
+        method: 'PATCH',
+        body: JSON.stringify({ approved: true }),
+      })
+      await loadReservation()
+    } catch (err: any) {
+      setActionError(err.message ?? r.failedApproveDriver)
+    } finally {
+      setActing(false)
+    }
+  }
+
+  async function submitExtend() {
+    if (!extendForm.newEndDate || !extendForm.reason.trim()) return
+    setActing(true)
+    setExtendError(null)
+    try {
+      await apiFetch(`/reservations/${params.id}/extend`, {
+        method: 'POST',
+        body: JSON.stringify({ newEndDate: new Date(extendForm.newEndDate).toISOString(), reason: extendForm.reason }),
+      })
+      setShowExtend(false)
+      setExtendForm({ newEndDate: '', reason: '' })
+      await loadReservation()
+    } catch (err: any) {
+      setExtendError(err.message ?? copy.extendFailed)
+    } finally {
+      setActing(false)
+    }
+  }
+
+  const formatDate = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric', year: 'numeric' })
+
+  if (error) return <div className="card p-6 text-sm text-red-600">{error}</div>
+  if (!reservation || !form) return <div className="card p-6 text-sm text-slate-500">{r.loadingReservation}</div>
+
+  const checkinInspection = inspections.find((inspection) => inspection.type === 'CHECKIN')
+  const checkoutInspection = inspections.find((inspection) => inspection.type === 'CHECKOUT')
+  const bookingInputsDisabled = editMode !== 'booking'
+  const returnInputsDisabled = editMode !== 'return'
+
+  let workflowMessage = ''
+  if (reservation.workflow.closed) workflowMessage = copy.closedLockMessage
+  else if (reservation.workflow.returnEditable) workflowMessage = copy.returnLockMessage
+  else if (reservation.workflow.contractGenerated) workflowMessage = copy.contractLockMessage
+  else if (reservation.status === 'ACTIVE') workflowMessage = copy.activeLockMessage
+
+  const checkInReadOnlyMessage = reservation.workflow.closed
+    ? copy.inspectionClosed
+    : copy.checkInReadOnly
+  const checkOutReadOnlyMessage = reservation.workflow.closed
+    ? copy.inspectionClosed
+    : copy.checkOutReadOnly
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">Reservation {reservation.id.slice(-8).toUpperCase()}</h2>
+          <p className="mt-1 text-sm text-slate-500">{reservation.source} · {reservation.status} · {reservation.paymentStatus}</p>
+          {reservation.workflow.closedAt && (
+            <p className="mt-2 text-xs text-slate-500">
+              {copy.closedMeta} {formatDate(reservation.workflow.closedAt)}{reservation.workflow.closedBy ? ` · ${reservation.workflow.closedBy}` : ''}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-3">
+          {editMode === null && reservation.workflow.coreEditable && (
+            <button disabled={acting} onClick={() => setEditMode('booking')} className="btn-secondary">
+              {copy.editBooking}
+            </button>
+          )}
+          {editMode === 'booking' && (
+            <>
+              <button disabled={acting} onClick={() => saveReservation('booking')} className="btn-primary">
+                {acting ? r.working : copy.saveBooking}
+              </button>
+              <button disabled={acting} onClick={() => { setForm(toFormState(reservation)); setEditMode(null) }} className="btn-secondary">
+                {copy.cancelEdit}
+              </button>
+            </>
+          )}
+          {editMode === null && reservation.workflow.returnEditable && (
+            <>
+              <button disabled={acting} onClick={() => setEditMode('return')} className="btn-secondary">
+                {copy.editReturn}
+              </button>
+              <button disabled={acting} onClick={closeReservation} className="btn-primary">
+                {acting ? r.working : copy.closeReservation}
+              </button>
+            </>
+          )}
+          {editMode === 'return' && (
+            <>
+              <button disabled={acting} onClick={() => saveReservation('return')} className="btn-primary">
+                {acting ? r.working : copy.saveReturn}
+              </button>
+              <button disabled={acting} onClick={() => { setForm(toFormState(reservation)); setEditMode(null) }} className="btn-secondary">
+                {copy.cancelEdit}
+              </button>
+            </>
+          )}
+          {reservation.status === 'DRAFT' && (
+            <button disabled={acting} onClick={() => runAction('confirm')} className="btn-primary">
+              {acting ? r.working : r.confirmReservation}
+            </button>
+          )}
+          {reservation.status === 'CONFIRMED' && (
+            <button disabled={acting} onClick={() => runAction('checkin')} className="btn-primary">
+              {acting ? r.working : r.checkInVehicle}
+            </button>
+          )}
+          {reservation.status === 'ACTIVE' && (
+            <button disabled={acting} onClick={() => runAction('checkout')} className="btn-primary">
+              {acting ? r.working : r.checkOutVehicle}
+            </button>
+          )}
+          {['CONFIRMED', 'ACTIVE'].includes(reservation.status) && !reservation.workflow.closed && (
+            <button disabled={acting} onClick={() => { setShowExtend(true); setExtendError(null) }} className="btn-secondary">
+              {copy.extendBtn}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {showExtend && (
+        <div className="card border border-blue-200 bg-blue-50 p-5 space-y-4">
+          <h4 className="text-sm font-semibold text-slate-900">{copy.extendTitle}</h4>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="mb-1.5 block text-xs font-medium text-slate-700">{copy.extendNewEnd}</label>
+              <input
+                type="datetime-local"
+                className="input-field"
+                value={extendForm.newEndDate}
+                onChange={(e) => setExtendForm((f) => ({ ...f, newEndDate: e.target.value }))}
+              />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-xs font-medium text-slate-700">{copy.extendReason}</label>
+              <input
+                className="input-field"
+                placeholder={copy.extendReasonPlaceholder}
+                value={extendForm.reason}
+                onChange={(e) => setExtendForm((f) => ({ ...f, reason: e.target.value }))}
+              />
+            </div>
+          </div>
+          {extendError && <p className="text-xs text-red-600">{extendError}</p>}
+          <div className="flex gap-3">
+            <button disabled={acting} onClick={submitExtend} className="btn-primary text-sm">
+              {acting ? r.working : copy.extendSubmit}
+            </button>
+            <button onClick={() => { setShowExtend(false); setExtendForm({ newEndDate: '', reason: '' }) }} className="btn-secondary text-sm">
+              {copy.extendCancel}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {workflowMessage && (
+        <div className="card border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
+          {workflowMessage}
+        </div>
+      )}
+
+      {actionError && <div className="card p-4 text-sm text-red-600">{actionError}</div>}
+
+      {reservation.source === 'MARKETPLACE' ? (
+        <div className="card p-6">
+          <h3 className="mb-4 text-base font-semibold text-slate-900">{copy.bookingProgress}</h3>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="badge-gray">
+              {copy.stageLabels[reservation.bookingRequest.stage as keyof typeof copy.stageLabels] ?? reservation.bookingRequest.stage}
+            </span>
+            {reservation.bookingRequest.paymentRequired ? (
+              <span className="rounded-full bg-purple-100 px-2.5 py-1 text-xs font-semibold text-purple-800">
+                {copy.paymentPending}
+              </span>
+            ) : null}
+          </div>
+          {reservation.bookingRequest.documentsMissing.length > 0 ? (
+            <div className="mt-4 flex flex-wrap gap-2">
+              {reservation.bookingRequest.documentsMissing.map((item) => (
+                <span key={item} className="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">
+                  {copy.missingItems[item as keyof typeof copy.missingItems] ?? item}
+                </span>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="card p-6">
+          <h3 className="mb-4 text-base font-semibold text-slate-900">{r.sectionCustomer}</h3>
+          <div className="space-y-2 text-sm">
+            <p className="font-medium text-slate-900">{reservation.customer.firstName} {reservation.customer.lastName}</p>
+            <p className="text-slate-600">{reservation.customer.email}</p>
+            <p className="text-slate-600">{reservation.customer.phone ?? r.noPhone}</p>
+            <p className="text-slate-600">{r.licenseLabel} {reservation.customer.driverLicense ?? r.notCaptured}</p>
+            <div className="pt-2">
+              <p className="text-slate-600">{copy.licenseImageLabel}</p>
+              {reservation.customer.licenseImageUrl ? (
+                <a href={reservation.customer.licenseImageUrl} target="_blank" rel="noreferrer" className="mt-2 block max-w-sm">
+                  <img
+                    src={reservation.customer.licenseImageUrl}
+                    alt="Driver license"
+                    className="h-40 w-full rounded-xl border border-slate-200 object-cover"
+                  />
+                </a>
+              ) : (
+                <p className="text-xs text-slate-500">{copy.noLicenseImage}</p>
+              )}
+            </div>
+            <div className="flex flex-wrap gap-2 pt-2">
+              <span className="badge-gray">{reservation.customer.licenseValidationStatus}</span>
+              {reservation.customer.flagged && <span className="badge-red">{r.flaggedBadge}</span>}
+            </div>
+          </div>
+        </div>
+
+        <div className="card p-6">
+          <h3 className="mb-4 text-base font-semibold text-slate-900">{r.sectionVehicle}</h3>
+          <div className="space-y-2 text-sm text-slate-600">
+            <p className="font-medium text-slate-900">{reservation.vehicle.make} {reservation.vehicle.model}</p>
+            <p>{reservation.vehicle.licensePlate}</p>
+            <p>{formatDate(reservation.startDate)} - {formatDate(reservation.endDate)}</p>
+            <p>{copy.paymentModeLabel}: <span className="font-medium text-slate-900">{reservation.paymentMode || copy.paymentModeEmpty}</span></p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
+        <div className="space-y-6">
+          <div className="card p-6">
+            <h3 className="mb-4 text-base font-semibold text-slate-900">{copy.bookingDetails}</h3>
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.startLabel}</label>
+                <input
+                  type="datetime-local"
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.startDate}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, startDate: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.endLabel}</label>
+                <input
+                  type="datetime-local"
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.endDate}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, endDate: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.pickupLabel}</label>
+                <input
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.pickupLocation}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, pickupLocation: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.returnLabel}</label>
+                <input
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.returnLocation}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, returnLocation: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.depositLabel}</label>
+                <input
+                  type="number"
+                  min="0"
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.depositAmount}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, depositAmount: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.paymentModeLabel}</label>
+                <input
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.paymentMode}
+                  disabled={bookingInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, paymentMode: e.target.value } : current)}
+                />
+              </div>
+            </div>
+            <div className="mt-4">
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.bookingNotesLabel}</label>
+              <textarea
+                className="input-field min-h-24 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                value={form.notes}
+                disabled={bookingInputsDisabled}
+                onChange={(e) => setForm((current) => current ? { ...current, notes: e.target.value } : current)}
+              />
+            </div>
+          </div>
+
+          <ReservationPhotoSection
+            reservationId={reservation.id}
+            type="PICKUP"
+            editable={reservation.workflow.checkInInspectionEditable}
+            title={copy.pickupPhotosTitle}
+            readOnlyMessage={copy.pickupPhotosReadOnly}
+          />
+
+          <div className="card p-6">
+            <h3 className="mb-4 text-base font-semibold text-slate-900">{copy.returnDetails}</h3>
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.returnLabel}</label>
+                <input
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.returnLocation}
+                  disabled={returnInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, returnLocation: e.target.value } : current)}
+                />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.returnChargeLabel}</label>
+                <input
+                  type="number"
+                  min="0"
+                  className="input-field disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                  value={form.damageChargeAmount}
+                  disabled={returnInputsDisabled}
+                  onChange={(e) => setForm((current) => current ? { ...current, damageChargeAmount: e.target.value } : current)}
+                />
+              </div>
+            </div>
+            <div className="mt-4">
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.returnChargeNoteLabel}</label>
+              <textarea
+                className="input-field min-h-24 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500"
+                value={form.damageChargeNote}
+                disabled={returnInputsDisabled}
+                onChange={(e) => setForm((current) => current ? { ...current, damageChargeNote: e.target.value } : current)}
+              />
+            </div>
+            <div className="mt-4 rounded-2xl border border-slate-200 px-4 py-3 text-sm text-slate-600">
+              <span className="font-medium text-slate-900">{copy.checkoutSummary}:</span>{' '}
+              {reservation.workflow.closed
+                ? copy.checkoutClosed
+                : reservation.workflow.returnEditable
+                ? copy.checkoutReady
+                : copy.checkoutPending}
+            </div>
+          </div>
+
+          <ReservationPhotoSection
+            reservationId={reservation.id}
+            type="DROPOFF"
+            editable={reservation.workflow.checkOutInspectionEditable}
+            title={copy.dropoffPhotosTitle}
+            readOnlyMessage={copy.dropoffPhotosReadOnly}
+          />
+
+          <div className="card p-6">
+            <h3 className="mb-4 text-base font-semibold text-slate-900">{r.sectionCharges}</h3>
+            <dl className="grid gap-3 text-sm sm:grid-cols-2">
+              <div><dt className="text-slate-500">{r.chargeDiscount}</dt><dd className="text-slate-900">{formatCurrency(reservation.discountAmount, 'MAD')}</dd></div>
+              <div><dt className="text-slate-500">{r.chargeInsurance}</dt><dd className="text-slate-900">{formatCurrency(reservation.insuranceTotal, 'MAD')}</dd></div>
+              <div><dt className="text-slate-500">{r.chargeAdditionalDrivers}</dt><dd className="text-slate-900">{formatCurrency(reservation.additionalDriverTotal, 'MAD')}</dd></div>
+              <div><dt className="text-slate-500">{r.chargePricingAdjustments}</dt><dd className="text-slate-900">{formatCurrency(reservation.pricingRulesTotal, 'MAD')}</dd></div>
+              <div><dt className="text-slate-500">{r.chargeGrandTotal}</dt><dd className="font-semibold text-slate-900">{formatCurrency(reservation.totalAmount, 'MAD')}</dd></div>
+              <div><dt className="text-slate-500">{copy.returnChargeLabel}</dt><dd className="text-slate-900">{formatCurrency(reservation.damageChargeAmount ?? 0, 'MAD')}</dd></div>
+            </dl>
+
+            {reservation.insurances.length > 0 && (
+              <div className="mt-5">
+                <p className="mb-2 text-sm font-semibold text-slate-900">{r.appliedInsurance}</p>
+                <div className="space-y-2">
+                  {reservation.insurances.map((insurance) => (
+                    <div key={insurance.id} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 text-sm">
+                      <span className="text-slate-700">{insurance.policyName}</span>
+                      <span className="font-semibold text-slate-900">{formatCurrency(insurance.totalCharge, 'MAD')}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {reservation.pricingRulesApplied && reservation.pricingRulesApplied.length > 0 && (
+              <div className="mt-5">
+                <p className="mb-2 text-sm font-semibold text-slate-900">{r.pricingRulesApplied}</p>
+                <div className="space-y-2">
+                  {reservation.pricingRulesApplied.map((rule) => (
+                    <div key={`${rule.name}-${rule.amount}`} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 text-sm">
+                      <span className="text-slate-700">{rule.name}</span>
+                      <span className={rule.amount < 0 ? 'font-semibold text-emerald-700' : 'font-semibold text-orange-700'}>
+                        {rule.amount < 0 ? '-' : '+'}{formatCurrency(Math.abs(rule.amount), 'MAD')}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <DamageInspectionCard
+            reservationId={reservation.id}
+            type="CHECKIN"
+            initialInspection={checkinInspection}
+            editable={reservation.workflow.checkInInspectionEditable}
+            readOnlyMessage={checkInReadOnlyMessage}
+            onSaved={(inspection) => setInspections((current) => [...current.filter((item) => item.type !== inspection.type), inspection])}
+          />
+          <DamageInspectionCard
+            reservationId={reservation.id}
+            type="CHECKOUT"
+            initialInspection={checkoutInspection}
+            comparisonPoints={checkinInspection?.damagePoints ?? []}
+            editable={reservation.workflow.checkOutInspectionEditable}
+            readOnlyMessage={checkOutReadOnlyMessage}
+            onSaved={(inspection) => setInspections((current) => [...current.filter((item) => item.type !== inspection.type), inspection])}
+          />
+        </div>
+
+        <div className="space-y-6">
+          <div className="card p-6">
+            <h3 className="mb-4 text-base font-semibold text-slate-900">{r.sectionAdditionalDrivers}</h3>
+            <div className="space-y-3">
+              {reservation.additionalDrivers.map((driver) => (
+                <div key={driver.id} className="rounded-2xl border border-slate-200 p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="font-medium text-slate-900">{driver.firstName} {driver.lastName}</p>
+                      <p className="text-sm text-slate-500">{r.driverLicenseLabel} {driver.driverLicense}</p>
+                      <p className="mt-1 text-sm text-slate-600">{r.driverChargeLabel} {formatCurrency(driver.totalCharge, 'MAD')}</p>
+                    </div>
+                    {driver.requiresApproval && !driver.approvedAt ? (
+                      <button onClick={() => approveDriver(driver.id)} disabled={acting} className="rounded-full bg-orange-600 px-4 py-2 text-xs font-semibold text-white">
+                        {r.approveBtn}
+                      </button>
+                    ) : (
+                      <span className={driver.approvedAt ? 'badge-green' : 'badge-gray'}>
+                        {driver.approvedAt ? r.approvedBadge : r.noApprovalNeeded}
+                      </span>
+                    )}
+                  </div>
+                  {driver.approvalNote && <p className="mt-2 text-xs text-orange-700">{driver.approvalNote}</p>}
+                </div>
+              ))}
+              {reservation.additionalDrivers.length === 0 && (
+                <div className="text-sm text-slate-400">{r.noAdditionalDrivers}</div>
+              )}
+            </div>
+          </div>
+
+          <div className="card p-6">
+            <h3 className="mb-4 text-base font-semibold text-slate-900">{r.sectionInspectionSummary}</h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
+                <span className="text-slate-600">{r.checkInInspectionLabel}</span>
+                <span className={checkinInspection ? 'badge-green' : 'badge-gray'}>{checkinInspection ? r.savedBadge : r.pendingBadge}</span>
+              </div>
+              <div className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
+                <span className="text-slate-600">{r.checkOutInspectionLabel}</span>
+                <span className={checkoutInspection ? 'badge-green' : 'badge-gray'}>{checkoutInspection ? r.savedBadge : r.pendingBadge}</span>
+              </div>
+              <div className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
+                <span className="text-slate-600">{copy.returnLabel}</span>
+                <span className="font-medium text-slate-900">{reservation.returnLocation ?? copy.noLocation}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/reservations/new/page.tsx b/dashboard/src/app/(dashboard)/reservations/new/page.tsx
new file mode 100644
index 0000000..7794789
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/reservations/new/page.tsx
@@ -0,0 +1,808 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { BilingualField, BilingualInput, bilingualPrimary, emptyBilingual } from '@/components/ui/BilingualInput'
+
+type Customer = {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string | null
+  driverLicense?: string | null
+  dateOfBirth?: string | null
+  nationality?: string | null
+  address?: Record<string, unknown> | null
+  licenseExpiry?: string | null
+  licenseIssuedAt?: string | null
+  licenseCountry?: string | null
+  licenseNumber?: string | null
+  licenseCategory?: string | null
+  licenseImageUrl?: string | null
+}
+type Vehicle = { id: string; make: string; model: string; licensePlate: string; status: string }
+type AdditionalDriverForm = {
+  firstName: BilingualField
+  lastName: BilingualField
+  email: string
+  phone: string
+  driverLicense: string
+  licenseExpiry: string
+  licenseIssuedAt: string
+  dateOfBirth: string
+  nationality: BilingualField
+}
+
+type CreatedReservation = { id: string }
+
+export default function NewReservationPage() {
+  const { language } = useDashboardI18n()
+  const router = useRouter()
+
+  const [customers, setCustomers] = useState<Customer[]>([])
+  const [vehicles, setVehicles] = useState<Vehicle[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const [customerId, setCustomerId] = useState('')
+  const [customerSearch, setCustomerSearch] = useState('')
+  const [vehicleId, setVehicleId] = useState('')
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+  const [pickupLocation, setPickupLocation] = useState('')
+  const [returnLocation, setReturnLocation] = useState('')
+  const [depositAmount, setDepositAmount] = useState('0')
+  const [paymentMode, setPaymentMode] = useState('CASH')
+  const [notes, setNotes] = useState('')
+  const [showAddCustomer, setShowAddCustomer] = useState(false)
+  const [savingCustomer, setSavingCustomer] = useState(false)
+  const [includeAdditionalDriver, setIncludeAdditionalDriver] = useState(false)
+  const [newCustomerFirstName, setNewCustomerFirstName] = useState<BilingualField>(emptyBilingual())
+  const [newCustomerLastName, setNewCustomerLastName] = useState<BilingualField>(emptyBilingual())
+  const [newCustomerEmail, setNewCustomerEmail] = useState('')
+  const [newCustomerPhone, setNewCustomerPhone] = useState('')
+  const [driverLicense, setDriverLicense] = useState('')
+  const [customerDateOfBirth, setCustomerDateOfBirth] = useState('')
+  const [customerNationality, setCustomerNationality] = useState('')
+  const [customerFullAddress, setCustomerFullAddress] = useState('')
+  const [customerIdentityDocumentNumber, setCustomerIdentityDocumentNumber] = useState('')
+  const [customerInternationalLicenseNumber, setCustomerInternationalLicenseNumber] = useState('')
+  const [licenseExpiry, setLicenseExpiry] = useState('')
+  const [licenseIssuedAt, setLicenseIssuedAt] = useState('')
+  const [licenseCountry, setLicenseCountry] = useState('')
+  const [licenseCategory, setLicenseCategory] = useState('')
+  const [licenseImageUrl, setLicenseImageUrl] = useState<string | null>(null)
+  const [licenseImageFile, setLicenseImageFile] = useState<File | null>(null)
+  const [licenseImagePreviewUrl, setLicenseImagePreviewUrl] = useState<string | null>(null)
+  const [additionalDriver, setAdditionalDriver] = useState<AdditionalDriverForm>({
+    firstName: emptyBilingual(),
+    lastName: emptyBilingual(),
+    email: '',
+    phone: '',
+    driverLicense: '',
+    licenseExpiry: '',
+    licenseIssuedAt: '',
+    dateOfBirth: '',
+    nationality: emptyBilingual(),
+  })
+
+  const copy = {
+    en: {
+      title: 'Local Booking',
+      subtitle: 'Create a reservation directly from workspace without a previous online reservation.',
+      customer: 'Customer',
+      searchCustomer: 'Search previous customer',
+      vehicle: 'Vehicle',
+      startDate: 'Start date & time',
+      endDate: 'End date & time',
+      pickup: 'Pickup location',
+      return: 'Return location',
+      deposit: 'Deposit amount (MAD)',
+      paymentMode: 'Payment mode',
+      renterIdentity: 'Renter identity',
+      driverLicenseInfo: 'Driver license information',
+      driverLicense: 'Driver license number',
+      licenseExpiry: 'License expiry',
+      licenseIssuedAt: 'License issued at',
+      licenseCountry: 'License country',
+      licenseCategory: 'License category',
+      fullAddress: 'Full address',
+      identityDocumentNumber: 'CIN / Passport number',
+      internationalLicenseNumber: 'International permit number',
+      licenseImage: 'Driver license image',
+      licenseImageHint: 'Upload a photo or scan of the primary driver license.',
+      licenseImageSelected: 'Selected file',
+      licenseImageCurrent: 'Current image',
+      noLicenseImage: 'No license image uploaded yet.',
+      addAdditionalDriver: 'Add additional driver',
+      additionalDriverInfo: 'Additional driver',
+      dateOfBirth: 'Date of birth',
+      nationality: 'Nationality',
+      notes: 'Notes',
+      notesPlaceholder: 'Optional notes…',
+      create: 'Create booking',
+      creating: 'Creating…',
+      cancel: 'Cancel',
+      loadFailed: 'Failed to load customers/vehicles.',
+      invalidDates: 'End date must be after start date.',
+      required: 'Please fill all required fields.',
+      selectCustomer: 'Select customer…',
+      addCustomer: 'Add customer',
+      addCustomerTitle: 'Add new customer',
+      firstName: 'First name',
+      lastName: 'Last name',
+      email: 'Email',
+      phone: 'Phone',
+      saveCustomer: 'Save customer',
+      savingCustomer: 'Saving customer…',
+      selectVehicle: 'Select vehicle…',
+      noVehicles: 'No available vehicles.',
+      paymentModes: {
+        CASH: 'Cash',
+        CARD: 'Card',
+        BANK_TRANSFER: 'Bank transfer',
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+    },
+    fr: {
+      title: 'Réservation locale',
+      subtitle: 'Créez une réservation directement depuis l’espace, sans réservation en ligne préalable.',
+      customer: 'Client',
+      searchCustomer: 'Rechercher un client existant',
+      vehicle: 'Véhicule',
+      startDate: 'Date et heure de départ',
+      endDate: 'Date et heure de retour',
+      pickup: 'Lieu de départ',
+      return: 'Lieu de retour',
+      deposit: 'Montant du dépôt (MAD)',
+      paymentMode: 'Mode de paiement',
+      renterIdentity: 'Identité du locataire',
+      driverLicenseInfo: 'Informations du permis',
+      driverLicense: 'Numéro du permis',
+      licenseExpiry: 'Expiration du permis',
+      licenseIssuedAt: 'Permis délivré le',
+      licenseCountry: 'Pays du permis',
+      licenseCategory: 'Catégorie du permis',
+      fullAddress: 'Adresse complète',
+      identityDocumentNumber: 'N° CIN / passeport',
+      internationalLicenseNumber: 'N° de permis international',
+      licenseImage: 'Image du permis',
+      licenseImageHint: 'Téléversez une photo ou un scan du permis du conducteur principal.',
+      licenseImageSelected: 'Fichier sélectionné',
+      licenseImageCurrent: 'Image actuelle',
+      noLicenseImage: 'Aucune image de permis téléversée.',
+      addAdditionalDriver: 'Ajouter un conducteur supplémentaire',
+      additionalDriverInfo: 'Conducteur supplémentaire',
+      dateOfBirth: 'Date de naissance',
+      nationality: 'Nationalité',
+      notes: 'Notes',
+      notesPlaceholder: 'Notes optionnelles…',
+      create: 'Créer la réservation',
+      creating: 'Création…',
+      cancel: 'Annuler',
+      loadFailed: 'Échec du chargement des clients/véhicules.',
+      invalidDates: 'La date de fin doit être après la date de début.',
+      required: 'Veuillez remplir tous les champs requis.',
+      selectCustomer: 'Sélectionner un client…',
+      addCustomer: 'Ajouter un client',
+      addCustomerTitle: 'Ajouter un nouveau client',
+      firstName: 'Prénom',
+      lastName: 'Nom',
+      email: 'Email',
+      phone: 'Téléphone',
+      saveCustomer: 'Enregistrer le client',
+      savingCustomer: 'Enregistrement du client…',
+      selectVehicle: 'Sélectionner un véhicule…',
+      noVehicles: 'Aucun véhicule disponible.',
+      paymentModes: {
+        CASH: 'Espèces',
+        CARD: 'Carte',
+        BANK_TRANSFER: 'Virement',
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+    },
+    ar: {
+      title: 'حجز محلي',
+      subtitle: 'أنشئ حجزًا مباشرة من مساحة العمل بدون حجز إلكتروني مسبق.',
+      customer: 'العميل',
+      searchCustomer: 'ابحث عن عميل سابق',
+      vehicle: 'المركبة',
+      startDate: 'تاريخ ووقت البداية',
+      endDate: 'تاريخ ووقت النهاية',
+      pickup: 'موقع الاستلام',
+      return: 'موقع التسليم',
+      deposit: 'مبلغ العربون (MAD)',
+      paymentMode: 'طريقة الدفع',
+      renterIdentity: 'بيانات المستأجر',
+      driverLicenseInfo: 'معلومات رخصة القيادة',
+      driverLicense: 'رقم رخصة القيادة',
+      licenseExpiry: 'تاريخ انتهاء الرخصة',
+      licenseIssuedAt: 'تاريخ إصدار الرخصة',
+      licenseCountry: 'بلد الرخصة',
+      licenseCategory: 'فئة الرخصة',
+      fullAddress: 'العنوان الكامل',
+      identityDocumentNumber: 'رقم البطاقة الوطنية / جواز السفر',
+      internationalLicenseNumber: 'رقم الرخصة الدولية',
+      licenseImage: 'صورة رخصة القيادة',
+      licenseImageHint: 'ارفع صورة أو مسحًا لرخصة السائق الأساسي.',
+      licenseImageSelected: 'الملف المحدد',
+      licenseImageCurrent: 'الصورة الحالية',
+      noLicenseImage: 'لم يتم رفع صورة الرخصة بعد.',
+      addAdditionalDriver: 'إضافة سائق إضافي',
+      additionalDriverInfo: 'السائق الإضافي',
+      dateOfBirth: 'تاريخ الميلاد',
+      nationality: 'الجنسية',
+      notes: 'ملاحظات',
+      notesPlaceholder: 'ملاحظات اختيارية…',
+      create: 'إنشاء الحجز',
+      creating: 'جارٍ الإنشاء…',
+      cancel: 'إلغاء',
+      loadFailed: 'فشل تحميل العملاء/المركبات.',
+      invalidDates: 'يجب أن يكون تاريخ النهاية بعد تاريخ البداية.',
+      required: 'يرجى تعبئة جميع الحقول المطلوبة.',
+      selectCustomer: 'اختر عميلًا…',
+      addCustomer: 'إضافة عميل',
+      addCustomerTitle: 'إضافة عميل جديد',
+      firstName: 'الاسم الأول',
+      lastName: 'اسم العائلة',
+      email: 'البريد الإلكتروني',
+      phone: 'الهاتف',
+      saveCustomer: 'حفظ العميل',
+      savingCustomer: 'جارٍ حفظ العميل…',
+      selectVehicle: 'اختر مركبة…',
+      noVehicles: 'لا توجد مركبات متاحة.',
+      paymentModes: {
+        CASH: 'نقدا',
+        CARD: 'بطاقة',
+        BANK_TRANSFER: 'تحويل بنكي',
+        AMANPAY: 'AmanPay',
+        PAYPAL: 'PayPal',
+      } as Record<string, string>,
+    },
+  }[language]
+
+  useEffect(() => {
+    Promise.all([
+      apiFetch<Customer[]>('/customers?pageSize=100'),
+      apiFetch<Vehicle[]>('/vehicles?pageSize=100'),
+    ])
+      .then(([c, v]) => {
+        setCustomers(c ?? [])
+        setVehicles(v ?? [])
+      })
+      .catch((err) => setError(err.message ?? copy.loadFailed))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filteredCustomers = (() => {
+    const q = customerSearch.trim().toLowerCase()
+    if (!q) return customers
+    return customers.filter((c) =>
+      `${c.firstName} ${c.lastName}`.toLowerCase().includes(q) ||
+      c.email.toLowerCase().includes(q),
+    )
+  })()
+
+  const availableVehicles = vehicles.filter((v) => v.status === 'AVAILABLE')
+
+  const canSubmit = !!customerId && !!vehicleId && !!startDate && !!endDate
+
+  function readCustomerAddressValue(customer: Customer | undefined, key: string) {
+    const address = customer?.address
+    if (!address || typeof address !== 'object' || Array.isArray(address)) return ''
+    const value = address[key]
+    return typeof value === 'string' ? value : ''
+  }
+
+  useEffect(() => {
+    const selected = customers.find((customer) => customer.id === customerId)
+    if (!selected) return
+    setDriverLicense(selected.driverLicense ?? selected.licenseNumber ?? '')
+    setCustomerDateOfBirth(selected.dateOfBirth ? selected.dateOfBirth.slice(0, 10) : '')
+    setCustomerNationality(selected.nationality ?? '')
+    setCustomerFullAddress(readCustomerAddressValue(selected, 'fullAddress'))
+    setCustomerIdentityDocumentNumber(readCustomerAddressValue(selected, 'identityDocumentNumber'))
+    setCustomerInternationalLicenseNumber(readCustomerAddressValue(selected, 'internationalLicenseNumber'))
+    setLicenseExpiry(selected.licenseExpiry ? selected.licenseExpiry.slice(0, 10) : '')
+    setLicenseIssuedAt(selected.licenseIssuedAt ? selected.licenseIssuedAt.slice(0, 10) : '')
+    setLicenseCountry(selected.licenseCountry ?? '')
+    setLicenseCategory(selected.licenseCategory ?? '')
+    setLicenseImageUrl(selected.licenseImageUrl ?? null)
+    setLicenseImageFile(null)
+  }, [customerId, customers])
+
+  useEffect(() => {
+    if (!licenseImageFile) {
+      setLicenseImagePreviewUrl(null)
+      return
+    }
+
+    const objectUrl = URL.createObjectURL(licenseImageFile)
+    setLicenseImagePreviewUrl(objectUrl)
+    return () => URL.revokeObjectURL(objectUrl)
+  }, [licenseImageFile])
+
+  async function uploadLicenseImage(customerIdToUpdate: string) {
+    if (!licenseImageFile) return null
+
+    const formData = new FormData()
+    formData.append('file', licenseImageFile)
+
+    const updated = await apiFetch<Customer>(`/customers/${customerIdToUpdate}/license-image`, {
+      method: 'POST',
+      body: formData,
+    })
+
+    setCustomers((prev) => prev.map((customer) => customer.id === updated.id ? { ...customer, ...updated } : customer))
+    setLicenseImageUrl(updated.licenseImageUrl ?? null)
+    setLicenseImageFile(null)
+    return updated.licenseImageUrl ?? null
+  }
+
+  async function addCustomer() {
+    setError(null)
+    if (!bilingualPrimary(newCustomerFirstName).trim() || !bilingualPrimary(newCustomerLastName).trim() || !newCustomerEmail.trim() || !newCustomerPhone.trim()) {
+      setError(copy.required)
+      return
+    }
+    if (
+      !driverLicense.trim() ||
+      !customerDateOfBirth ||
+      !customerNationality.trim() ||
+      !customerFullAddress.trim() ||
+      !customerIdentityDocumentNumber.trim() ||
+      !licenseExpiry ||
+      !licenseIssuedAt ||
+      !licenseCountry.trim() ||
+      !licenseCategory.trim()
+    ) {
+      setError(copy.required)
+      return
+    }
+    setSavingCustomer(true)
+    try {
+      const created = await apiFetch<Customer>('/customers', {
+        method: 'POST',
+        body: JSON.stringify({
+          firstName: bilingualPrimary(newCustomerFirstName).trim(),
+          firstNameAr: newCustomerFirstName.ar.trim() || undefined,
+          lastName: bilingualPrimary(newCustomerLastName).trim(),
+          lastNameAr: newCustomerLastName.ar.trim() || undefined,
+          email: newCustomerEmail.trim(),
+          phone: newCustomerPhone.trim(),
+          driverLicense: driverLicense.trim(),
+          dateOfBirth: new Date(customerDateOfBirth).toISOString(),
+          nationality: customerNationality.trim(),
+          address: {
+            fullAddress: customerFullAddress.trim(),
+            identityDocumentNumber: customerIdentityDocumentNumber.trim(),
+            internationalLicenseNumber: customerInternationalLicenseNumber.trim() || undefined,
+          },
+          licenseExpiry: new Date(licenseExpiry).toISOString(),
+          licenseIssuedAt: new Date(licenseIssuedAt).toISOString(),
+          licenseCountry: licenseCountry.trim(),
+          licenseNumber: driverLicense.trim(),
+          licenseCategory: licenseCategory.trim(),
+        }),
+      })
+      setCustomers((prev) => [created, ...prev])
+      setCustomerId(created.id)
+      setCustomerSearch(`${bilingualPrimary(newCustomerFirstName)} ${bilingualPrimary(newCustomerLastName)}`)
+      setShowAddCustomer(false)
+      setNewCustomerFirstName(emptyBilingual())
+      setNewCustomerLastName(emptyBilingual())
+      setNewCustomerEmail('')
+      setNewCustomerPhone('')
+      setLicenseImageUrl(created.licenseImageUrl ?? null)
+
+      if (licenseImageFile) {
+        await uploadLicenseImage(created.id)
+      }
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setSavingCustomer(false)
+    }
+  }
+
+  async function submit() {
+    setError(null)
+    if (!canSubmit) {
+      setError(copy.required)
+      return
+    }
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+    if (end <= start) {
+      setError(copy.invalidDates)
+      return
+    }
+    if (
+      !driverLicense.trim() ||
+      !customerDateOfBirth ||
+      !customerNationality.trim() ||
+      !customerFullAddress.trim() ||
+      !customerIdentityDocumentNumber.trim() ||
+      !licenseExpiry ||
+      !licenseIssuedAt ||
+      !licenseCountry.trim() ||
+      !licenseCategory.trim()
+    ) {
+      setError(copy.required)
+      return
+    }
+    if (includeAdditionalDriver && (!bilingualPrimary(additionalDriver.firstName).trim() || !bilingualPrimary(additionalDriver.lastName).trim() || !additionalDriver.driverLicense.trim())) {
+      setError(copy.required)
+      return
+    }
+
+    setSaving(true)
+    try {
+      await apiFetch(`/customers/${customerId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          driverLicense: driverLicense.trim(),
+          dateOfBirth: new Date(customerDateOfBirth).toISOString(),
+          nationality: customerNationality.trim(),
+          address: {
+            fullAddress: customerFullAddress.trim(),
+            identityDocumentNumber: customerIdentityDocumentNumber.trim(),
+            internationalLicenseNumber: customerInternationalLicenseNumber.trim() || undefined,
+          },
+          licenseExpiry: new Date(licenseExpiry).toISOString(),
+          licenseIssuedAt: new Date(licenseIssuedAt).toISOString(),
+          licenseCountry: licenseCountry.trim(),
+          licenseNumber: driverLicense.trim(),
+          licenseCategory: licenseCategory.trim(),
+        }),
+      })
+
+      if (licenseImageFile) {
+        await uploadLicenseImage(customerId)
+      }
+
+      const created = await apiFetch<CreatedReservation>('/reservations', {
+        method: 'POST',
+        body: JSON.stringify({
+          customerId,
+          vehicleId,
+          startDate: start.toISOString(),
+          endDate: end.toISOString(),
+          pickupLocation: pickupLocation || undefined,
+          returnLocation: returnLocation || undefined,
+          depositAmount: Number.isFinite(Number(depositAmount)) ? Math.max(0, Math.round(Number(depositAmount))) : 0,
+          paymentMode,
+          additionalDrivers: includeAdditionalDriver ? [{
+            firstName: bilingualPrimary(additionalDriver.firstName).trim(),
+            firstNameAr: additionalDriver.firstName.ar.trim() || undefined,
+            lastName: bilingualPrimary(additionalDriver.lastName).trim(),
+            lastNameAr: additionalDriver.lastName.ar.trim() || undefined,
+            email: additionalDriver.email.trim() || undefined,
+            phone: additionalDriver.phone.trim() || undefined,
+            driverLicense: additionalDriver.driverLicense.trim(),
+            licenseExpiry: additionalDriver.licenseExpiry ? new Date(additionalDriver.licenseExpiry).toISOString() : undefined,
+            licenseIssuedAt: additionalDriver.licenseIssuedAt ? new Date(additionalDriver.licenseIssuedAt).toISOString() : undefined,
+            dateOfBirth: additionalDriver.dateOfBirth ? new Date(additionalDriver.dateOfBirth).toISOString() : undefined,
+            nationality: bilingualPrimary(additionalDriver.nationality).trim() || undefined,
+            nationalityAr: additionalDriver.nationality.ar.trim() || undefined,
+          }] : [],
+          notes: notes || undefined,
+        }),
+      })
+      router.push(`/reservations/${created.id}`)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6 max-w-3xl">
+      <div className="rdg-page-heading flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+          <p className="text-sm text-slate-500 mt-1">{copy.subtitle}</p>
+        </div>
+      </div>
+
+      {error ? <div className="card p-4 text-sm text-red-700">{error}</div> : null}
+
+      <div className="card p-6 space-y-4">
+        {loading ? (
+          <p className="text-sm text-slate-500">Loading…</p>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.customer} <span className="text-red-600">*</span></span>
+                <input
+                  value={customerSearch}
+                  onChange={(e) => setCustomerSearch(e.target.value)}
+                  placeholder={copy.searchCustomer}
+                  className="input-field mb-2"
+                />
+                <select value={customerId} onChange={(e) => setCustomerId(e.target.value)} className="input-field">
+                  <option value="">{copy.selectCustomer}</option>
+                  {filteredCustomers.map((c) => (
+                    <option key={c.id} value={c.id}>{c.firstName} {c.lastName} · {c.email}</option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  className="text-xs font-semibold text-blue-700 hover:underline mt-1"
+                  onClick={() => setShowAddCustomer((v) => !v)}
+                >
+                  {copy.addCustomer}
+                </button>
+
+                {showAddCustomer ? (
+                  <div className="mt-2 rounded-lg border border-slate-200 p-3 space-y-2 bg-slate-50">
+                    <p className="text-xs font-semibold text-slate-700">{copy.addCustomerTitle}</p>
+                    <BilingualInput label={copy.firstName} required value={newCustomerFirstName} onChange={setNewCustomerFirstName} />
+                    <BilingualInput label={copy.lastName} required value={newCustomerLastName} onChange={setNewCustomerLastName} />
+                    <div className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.email} <span className="text-red-600">*</span></span>
+                      <input value={newCustomerEmail} onChange={(e) => setNewCustomerEmail(e.target.value)} className="input-field" />
+                    </div>
+                    <div className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.phone} <span className="text-red-600">*</span></span>
+                      <input required value={newCustomerPhone} onChange={(e) => setNewCustomerPhone(e.target.value)} className="input-field" />
+                    </div>
+                    <div className="flex justify-end">
+                      <button type="button" className="btn-secondary" onClick={addCustomer} disabled={savingCustomer}>
+                        {savingCustomer ? copy.savingCustomer : copy.saveCustomer}
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
+              </label>
+
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.vehicle} <span className="text-red-600">*</span></span>
+                <select value={vehicleId} onChange={(e) => setVehicleId(e.target.value)} className="input-field">
+                  <option value="">{copy.selectVehicle}</option>
+                  {availableVehicles.map((v) => (
+                    <option key={v.id} value={v.id}>{v.make} {v.model} · {v.licensePlate}</option>
+                  ))}
+                </select>
+                {vehicles.length === 0 ? (
+                  <span className="text-xs text-orange-700">{copy.noVehicles}</span>
+                ) : availableVehicles.length === 0 ? (
+                  <span className="text-xs text-orange-700">
+                    {language === 'fr'
+                      ? 'Des véhicules existent dans la flotte, mais aucun n’est marqué Disponible.'
+                      : language === 'ar'
+                        ? 'توجد مركبات في الأسطول، لكن لا توجد مركبة بحالة متاحة.'
+                        : 'Vehicles exist in fleet, but none are marked Available.'}
+                  </span>
+                ) : null}
+              </label>
+            </div>
+
+            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
+              <p className="text-sm font-semibold text-slate-900">{copy.renterIdentity}</p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.dateOfBirth} <span className="text-red-600">*</span></span>
+                  <input type="date" value={customerDateOfBirth} onChange={(e) => setCustomerDateOfBirth(e.target.value)} className="input-field" />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.nationality} <span className="text-red-600">*</span></span>
+                  <input value={customerNationality} onChange={(e) => setCustomerNationality(e.target.value)} className="input-field" />
+                </label>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.identityDocumentNumber} <span className="text-red-600">*</span></span>
+                  <input value={customerIdentityDocumentNumber} onChange={(e) => setCustomerIdentityDocumentNumber(e.target.value)} className="input-field" />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.internationalLicenseNumber}</span>
+                  <input value={customerInternationalLicenseNumber} onChange={(e) => setCustomerInternationalLicenseNumber(e.target.value)} className="input-field" />
+                </label>
+              </div>
+              <label className="space-y-1 block">
+                <span className="text-sm font-medium text-slate-700">{copy.fullAddress} <span className="text-red-600">*</span></span>
+                <textarea value={customerFullAddress} onChange={(e) => setCustomerFullAddress(e.target.value)} className="input-field min-h-[88px]" />
+              </label>
+            </div>
+
+            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
+              <p className="text-sm font-semibold text-slate-900">{copy.driverLicenseInfo}</p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.driverLicense} <span className="text-red-600">*</span></span>
+                  <input value={driverLicense} onChange={(e) => setDriverLicense(e.target.value)} className="input-field" />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.licenseCountry} <span className="text-red-600">*</span></span>
+                  <input value={licenseCountry} onChange={(e) => setLicenseCountry(e.target.value)} className="input-field" />
+                </label>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.licenseIssuedAt} <span className="text-red-600">*</span></span>
+                  <input type="date" value={licenseIssuedAt} onChange={(e) => setLicenseIssuedAt(e.target.value)} className="input-field" />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.licenseExpiry} <span className="text-red-600">*</span></span>
+                  <input type="date" value={licenseExpiry} onChange={(e) => setLicenseExpiry(e.target.value)} className="input-field" />
+                </label>
+                <label className="space-y-1">
+                  <span className="text-sm font-medium text-slate-700">{copy.licenseCategory} <span className="text-red-600">*</span></span>
+                  <input value={licenseCategory} onChange={(e) => setLicenseCategory(e.target.value)} className="input-field" />
+                </label>
+              </div>
+              <div className="space-y-2">
+                <label className="space-y-1 block">
+                  <span className="text-sm font-medium text-slate-700">{copy.licenseImage}</span>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => setLicenseImageFile(e.target.files?.[0] ?? null)}
+                    className="input-field"
+                  />
+                </label>
+                <p className="text-xs text-slate-500">{copy.licenseImageHint}</p>
+                {licenseImageFile ? (
+                  <p className="text-xs font-medium text-slate-700">{copy.licenseImageSelected}: {licenseImageFile.name}</p>
+                ) : licenseImageUrl ? (
+                  <p className="text-xs font-medium text-slate-700">{copy.licenseImageCurrent}</p>
+                ) : (
+                  <p className="text-xs text-slate-500">{copy.noLicenseImage}</p>
+                )}
+                {licenseImagePreviewUrl || licenseImageUrl ? (
+                  <img
+                    src={licenseImagePreviewUrl ?? licenseImageUrl ?? ''}
+                    alt="Driver license preview"
+                    className="h-40 w-full max-w-sm rounded-xl border border-slate-200 object-cover"
+                  />
+                ) : null}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.startDate} <span className="text-red-600">*</span></span>
+                <input type="datetime-local" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="input-field" />
+              </label>
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.endDate} <span className="text-red-600">*</span></span>
+                <input type="datetime-local" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="input-field" />
+              </label>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.pickup}</span>
+                <input value={pickupLocation} onChange={(e) => setPickupLocation(e.target.value)} className="input-field" />
+              </label>
+              <label className="space-y-1">
+                <span className="text-sm font-medium text-slate-700">{copy.return}</span>
+                <input value={returnLocation} onChange={(e) => setReturnLocation(e.target.value)} className="input-field" />
+              </label>
+            </div>
+
+            <label className="space-y-1 block">
+              <span className="text-sm font-medium text-slate-700">{copy.deposit}</span>
+              <input type="number" min={0} value={depositAmount} onChange={(e) => setDepositAmount(e.target.value)} className="input-field" />
+            </label>
+
+            <label className="space-y-1 block">
+              <span className="text-sm font-medium text-slate-700">{copy.paymentMode}</span>
+              <select value={paymentMode} onChange={(e) => setPaymentMode(e.target.value)} className="input-field">
+                {(['CASH', 'CARD', 'BANK_TRANSFER', 'AMANPAY', 'PAYPAL'] as const).map((mode) => (
+                  <option key={mode} value={mode}>{copy.paymentModes[mode]}</option>
+                ))}
+              </select>
+            </label>
+
+            <div className="rounded-xl border border-slate-200 p-4 space-y-4">
+              <label className="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  checked={includeAdditionalDriver}
+                  onChange={(e) => setIncludeAdditionalDriver(e.target.checked)}
+                  className="h-4 w-4 rounded border-slate-300 text-blue-600"
+                />
+                <span className="text-sm font-medium text-slate-900">{copy.addAdditionalDriver}</span>
+              </label>
+
+              {includeAdditionalDriver ? (
+                <div className="space-y-4">
+                  <p className="text-sm font-semibold text-slate-900">{copy.additionalDriverInfo}</p>
+                  <BilingualInput label={copy.firstName} required value={additionalDriver.firstName} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, firstName: v }))} />
+                  <BilingualInput label={copy.lastName} required value={additionalDriver.lastName} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, lastName: v }))} />
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.email}</span>
+                      <input
+                        value={additionalDriver.email}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, email: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.phone}</span>
+                      <input
+                        value={additionalDriver.phone}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, phone: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.driverLicense} <span className="text-red-600">*</span></span>
+                      <input
+                        value={additionalDriver.driverLicense}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, driverLicense: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                    <div className="space-y-1">
+                      <BilingualInput label={copy.nationality} value={additionalDriver.nationality} onChange={(v) => setAdditionalDriver((cur) => ({ ...cur, nationality: v }))} />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.dateOfBirth}</span>
+                      <input
+                        type="date"
+                        value={additionalDriver.dateOfBirth}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, dateOfBirth: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.licenseIssuedAt}</span>
+                      <input
+                        type="date"
+                        value={additionalDriver.licenseIssuedAt}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseIssuedAt: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                    <label className="space-y-1">
+                      <span className="text-sm font-medium text-slate-700">{copy.licenseExpiry}</span>
+                      <input
+                        type="date"
+                        value={additionalDriver.licenseExpiry}
+                        onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseExpiry: e.target.value }))}
+                        className="input-field"
+                      />
+                    </label>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+
+            <label className="space-y-1 block">
+              <span className="text-sm font-medium text-slate-700">{copy.notes}</span>
+              <textarea value={notes} onChange={(e) => setNotes(e.target.value)} className="input-field min-h-[96px]" placeholder={copy.notesPlaceholder} />
+            </label>
+
+            <div className="pt-2 flex items-center justify-end gap-3">
+              <button type="button" className="btn-secondary" onClick={() => router.push('/reservations')}>
+                {copy.cancel}
+              </button>
+              <button type="button" className="btn-primary" onClick={submit} disabled={saving || !canSubmit}>
+                {saving ? copy.creating : copy.create}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/reservations/page.tsx b/dashboard/src/app/(dashboard)/reservations/page.tsx
new file mode 100644
index 0000000..0d3583b
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/reservations/page.tsx
@@ -0,0 +1,196 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface ReservationRow {
+  id: string
+  status: string
+  source: string
+  startDate: string
+  endDate: string
+  totalAmount: number
+  totalDays: number
+  contractNumber?: string | null
+  workflow?: {
+    contractGenerated: boolean
+    closed: boolean
+    coreEditable: boolean
+    returnEditable: boolean
+  }
+  vehicle: { make: string; model: string }
+  customer: { firstName: string; lastName: string; email: string }
+}
+
+interface VehicleRow {
+  id: string
+}
+
+export default function ReservationsPage() {
+  const { dict, language } = useDashboardI18n()
+  const router = useRouter()
+  const r = dict.reservations
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+
+  const [rows, setRows] = useState<ReservationRow[]>([])
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const [checkingNewReservation, setCheckingNewReservation] = useState(false)
+  const [showNoVehiclesModal, setShowNoVehiclesModal] = useState(false)
+
+  useEffect(() => {
+    apiFetch<ReservationRow[]>('/reservations?pageSize=100')
+      .then((result) => setRows(result ?? []))
+      .catch((err) => setLoadError(err.message))
+  }, [])
+
+  const formatDate = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric' })
+  const formatDateYear = (iso: string) =>
+    new Date(iso).toLocaleDateString(localeCode, { month: 'short', day: 'numeric', year: 'numeric' })
+  const reservationActionLabel = (row: ReservationRow) => {
+    if (row.workflow?.returnEditable) {
+      return language === 'fr' ? 'Retour / clôture' : language === 'ar' ? 'الإرجاع / الإغلاق' : 'Return / close'
+    }
+    if (row.workflow?.coreEditable) {
+      return language === 'fr' ? 'Modifier la réservation' : language === 'ar' ? 'تعديل الحجز' : 'Edit reservation'
+    }
+    return language === 'fr' ? 'Voir la réservation' : language === 'ar' ? 'عرض الحجز' : 'View reservation'
+  }
+  const noVehiclesMessage =
+    language === 'fr'
+      ? 'Ajoutez au moins un véhicule à votre flotte avant de créer une réservation.'
+      : language === 'ar'
+        ? 'أضف مركبة واحدة على الأقل إلى الأسطول قبل إنشاء حجز.'
+        : 'Add at least one vehicle to your fleet before creating a reservation.'
+
+  async function handleNewReservationClick() {
+    setActionError(null)
+    setCheckingNewReservation(true)
+    try {
+      const vehicles = await apiFetch<VehicleRow[]>('/vehicles?pageSize=1')
+      if (!vehicles || vehicles.length === 0) {
+        setShowNoVehiclesModal(true)
+        return
+      }
+      router.push('/reservations/new')
+    } catch (err: any) {
+      setActionError(err.message ?? (
+        language === 'fr'
+          ? 'Impossible de vérifier la flotte avant de créer la réservation.'
+          : language === 'ar'
+            ? 'تعذر التحقق من الأسطول قبل إنشاء الحجز.'
+            : 'Failed to verify fleet before creating the reservation.'
+      ))
+    } finally {
+      setCheckingNewReservation(false)
+    }
+  }
+
+  function handleAddCar() {
+    setShowNoVehiclesModal(false)
+    router.push('/fleet?modal=add-car')
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-xl font-semibold text-slate-900">{r.heading}</h2>
+          <p className="text-sm text-slate-500 mt-1">{r.subtitle}</p>
+        </div>
+        <button
+          type="button"
+          className="btn-primary whitespace-nowrap"
+          onClick={handleNewReservationClick}
+          disabled={checkingNewReservation}
+        >
+          {checkingNewReservation
+            ? language === 'fr'
+              ? 'Vérification…'
+              : language === 'ar'
+                ? 'جارٍ التحقق…'
+                : 'Checking…'
+            : language === 'fr'
+              ? 'Réserver une voiture'
+              : language === 'ar'
+                ? 'حجز سيارة'
+            : 'Book car'}
+        </button>
+      </div>
+      {actionError ? <div className="card p-4 text-sm text-red-600">{actionError}</div> : null}
+      <div className="card overflow-hidden">
+        {loadError ? (
+          <div className="p-8 text-sm text-red-600">{loadError}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-slate-50 border-b border-slate-200">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colCustomer}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colVehicle}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colDates}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colSource}</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colStatus}</th>
+                  <th className="text-right px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{r.colTotal}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {rows.map((row) => (
+                  <tr key={row.id}>
+                    <td className="px-6 py-4">
+                      <Link href={`/reservations/${row.id}`} className="text-sm font-semibold text-slate-900 hover:text-blue-700">
+                        {row.customer.firstName} {row.customer.lastName}
+                      </Link>
+                      <p className="text-xs text-slate-500">{row.customer.email}</p>
+                      <Link href={`/reservations/${row.id}`} className="mt-1 inline-block text-xs font-semibold text-blue-700 hover:underline">
+                        {reservationActionLabel(row)}
+                      </Link>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.vehicle.make} {row.vehicle.model}</td>
+                    <td className="px-6 py-4 text-sm text-slate-500">{formatDate(row.startDate)} - {formatDateYear(row.endDate)}</td>
+                    <td className="px-6 py-4 text-sm text-slate-700">{row.source}</td>
+                    <td className="px-6 py-4"><span className="badge-blue">{row.status}</span></td>
+                    <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">{formatCurrency(row.totalAmount, 'MAD')}</td>
+                  </tr>
+                ))}
+                {rows.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-10 text-center text-sm text-slate-400">{r.noReservations}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      {showNoVehiclesModal ? (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40 p-4"
+          onClick={(event) => {
+            if (event.target === event.currentTarget) setShowNoVehiclesModal(false)
+          }}
+        >
+          <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
+            <h3 className="text-lg font-semibold text-slate-900">
+              {language === 'fr' ? 'Ajouter un véhicule' : language === 'ar' ? 'أضف مركبة' : 'Add a car'}
+            </h3>
+            <p className="mt-2 text-sm text-slate-600">{noVehiclesMessage}</p>
+            <div className="mt-6 flex gap-3">
+              <button type="button" className="btn-primary flex-1" onClick={handleAddCar}>
+                {language === 'fr' ? 'Ajouter une voiture' : language === 'ar' ? 'إضافة مركبة' : 'Add car'}
+              </button>
+              <button type="button" className="btn-secondary flex-1" onClick={() => setShowNoVehiclesModal(false)}>
+                {language === 'fr' ? 'Annuler' : language === 'ar' ? 'إلغاء' : 'Cancel'}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/reviews/page.tsx b/dashboard/src/app/(dashboard)/reviews/page.tsx
new file mode 100644
index 0000000..905f0c8
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/reviews/page.tsx
@@ -0,0 +1,422 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Star, MessageSquare, AlertTriangle } from 'lucide-react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+// ─── i18n ─────────────────────────────────────────────────────────────────────
+
+const copy = {
+  en: {
+    heading: 'Reviews',
+    subtitle: 'Customer feedback for your company',
+    totalReviews: 'Total Reviews',
+    avgRating: 'Average Rating',
+    fiveStars: '5-Star Reviews',
+    negative: 'Negative Reviews',
+    filterRating: 'Filter by rating',
+    allRatings: 'All ratings',
+    filterDate: 'Date range',
+    last7: 'Last 7 days',
+    last30: 'Last 30 days',
+    last90: 'Last 90 days',
+    allTime: 'All time',
+    customer: 'Customer',
+    vehicle: 'Vehicle',
+    date: 'Date',
+    rating: 'Rating',
+    comment: 'Comment',
+    reply: 'Reply',
+    replied: 'Replied',
+    noReply: 'No reply yet',
+    saveReply: 'Save reply',
+    cancel: 'Cancel',
+    saving: 'Saving…',
+    noReviews: 'No reviews yet',
+    newComplaint: 'New complaint',
+    replyPlaceholder: 'Write your reply…',
+    errorLoad: 'Failed to load reviews',
+    errorReply: 'Failed to save reply',
+    stars: (n: number) => n === 1 ? '1 star' : `${n} stars`,
+  },
+  fr: {
+    heading: 'Avis',
+    subtitle: 'Retours clients pour votre entreprise',
+    totalReviews: 'Total des avis',
+    avgRating: 'Note moyenne',
+    fiveStars: 'Avis 5 étoiles',
+    negative: 'Avis négatifs',
+    filterRating: 'Filtrer par note',
+    allRatings: 'Toutes les notes',
+    filterDate: 'Période',
+    last7: '7 derniers jours',
+    last30: '30 derniers jours',
+    last90: '90 derniers jours',
+    allTime: 'Tout le temps',
+    customer: 'Client',
+    vehicle: 'Véhicule',
+    date: 'Date',
+    rating: 'Note',
+    comment: 'Commentaire',
+    reply: 'Répondre',
+    replied: 'Répondu',
+    noReply: 'Pas encore de réponse',
+    saveReply: 'Enregistrer',
+    cancel: 'Annuler',
+    saving: 'Enregistrement…',
+    noReviews: 'Aucun avis pour l\'instant',
+    newComplaint: 'Nouvelle plainte',
+    replyPlaceholder: 'Rédigez votre réponse…',
+    errorLoad: 'Échec du chargement des avis',
+    errorReply: 'Échec de l\'enregistrement de la réponse',
+    stars: (n: number) => n === 1 ? '1 étoile' : `${n} étoiles`,
+  },
+  ar: {
+    heading: 'التقييمات',
+    subtitle: 'آراء العملاء لشركتك',
+    totalReviews: 'إجمالي التقييمات',
+    avgRating: 'متوسط التقييم',
+    fiveStars: 'تقييمات 5 نجوم',
+    negative: 'تقييمات سلبية',
+    filterRating: 'تصفية حسب التقييم',
+    allRatings: 'جميع التقييمات',
+    filterDate: 'النطاق الزمني',
+    last7: 'آخر 7 أيام',
+    last30: 'آخر 30 يوماً',
+    last90: 'آخر 90 يوماً',
+    allTime: 'كل الوقت',
+    customer: 'العميل',
+    vehicle: 'المركبة',
+    date: 'التاريخ',
+    rating: 'التقييم',
+    comment: 'تعليق',
+    reply: 'رد',
+    replied: 'تم الرد',
+    noReply: 'لم يتم الرد بعد',
+    saveReply: 'حفظ الرد',
+    cancel: 'إلغاء',
+    saving: 'جار الحفظ…',
+    noReviews: 'لا توجد تقييمات بعد',
+    newComplaint: 'شكوى جديدة',
+    replyPlaceholder: 'اكتب ردك هنا…',
+    errorLoad: 'فشل تحميل التقييمات',
+    errorReply: 'فشل حفظ الرد',
+    stars: (n: number) => `${n} نجوم`,
+  },
+} as const
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+interface ReviewReservation {
+  id: string
+  startDate: string
+  endDate: string
+  customer: { id: string; firstName: string; lastName: string; email: string }
+  vehicle: { make: string; model: string; year: number }
+}
+
+interface Review {
+  id: string
+  reservationId: string
+  overallRating: number
+  vehicleRating: number | null
+  serviceRating: number | null
+  comment: string | null
+  companyReply: string | null
+  companyRepliedAt: string | null
+  isPublished: boolean
+  createdAt: string
+  reservation: ReviewReservation
+}
+
+interface ReviewsResponse {
+  data: Review[]
+  meta: { total: number; page: number; pageSize: number; totalPages: number }
+}
+
+interface Stats {
+  total: number
+  averageOverall: number
+  averageVehicle: number
+  averageService: number
+  byRating: Record<string, number>
+}
+
+// ─── Star display ──────────────────────────────────────────────────────────────
+
+function StarDisplay({ rating, size = 'sm' }: { rating: number; size?: 'sm' | 'md' }) {
+  const sz = size === 'md' ? 'h-5 w-5' : 'h-4 w-4'
+  return (
+    <div className="flex items-center gap-0.5">
+      {[1, 2, 3, 4, 5].map((s) => (
+        <Star
+          key={s}
+          className={`${sz} ${s <= rating ? 'fill-amber-400 text-amber-400' : 'text-stone-300 dark:text-blue-900'}`}
+        />
+      ))}
+    </div>
+  )
+}
+
+// ─── Main page ─────────────────────────────────────────────────────────────────
+
+export default function ReviewsPage() {
+  const { language } = useDashboardI18n()
+  const t = copy[language as keyof typeof copy] ?? copy.en
+
+  const [reviews, setReviews] = useState<Review[]>([])
+  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 20, totalPages: 1 })
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [filterRating, setFilterRating] = useState<string>('')
+  const [filterDays, setFilterDays] = useState<string>('')
+  const [page, setPage] = useState(1)
+
+  const [replyingId, setReplyingId] = useState<string | null>(null)
+  const [replyText, setReplyText] = useState('')
+  const [replySaving, setReplySaving] = useState(false)
+
+  async function loadData() {
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams({ page: String(page), pageSize: '20' })
+      if (filterRating) params.set('rating', filterRating)
+
+      const [reviewsData, statsData] = await Promise.all([
+        apiFetch<ReviewsResponse>(`/reviews?${params}`),
+        apiFetch<Stats>('/reviews/stats'),
+      ])
+
+      let data = reviewsData.data ?? []
+      if (filterDays) {
+        const cutoff = new Date()
+        cutoff.setDate(cutoff.getDate() - Number(filterDays))
+        data = data.filter((r) => new Date(r.createdAt) >= cutoff)
+      }
+
+      setReviews(data)
+      setMeta(reviewsData.meta ?? { total: 0, page: 1, pageSize: 20, totalPages: 1 })
+      setStats(statsData)
+    } catch {
+      setError(t.errorLoad)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { loadData() }, [page, filterRating, filterDays])
+
+  async function handleSaveReply(reviewId: string) {
+    if (!replyText.trim()) return
+    setReplySaving(true)
+    try {
+      await apiFetch(`/reviews/${reviewId}/reply`, {
+        method: 'PATCH',
+        body: JSON.stringify({ companyReply: replyText.trim() }),
+      })
+      setReplyingId(null)
+      setReplyText('')
+      await loadData()
+    } catch {
+      alert(t.errorReply)
+    } finally {
+      setReplySaving(false)
+    }
+  }
+
+  function startReply(review: Review) {
+    setReplyingId(review.id)
+    setReplyText(review.companyReply ?? '')
+  }
+
+  const isRtl = language === 'ar'
+
+  return (
+    <div className={`space-y-6 ${isRtl ? 'rtl' : 'ltr'}`}>
+      {/* Header */}
+      <div className="rdg-page-heading">
+        <h1 className="text-2xl font-bold text-blue-950 dark:text-white">{t.heading}</h1>
+        <p className="mt-1 text-sm text-stone-500 dark:text-slate-400">{t.subtitle}</p>
+      </div>
+
+      {/* Stats cards */}
+      {stats && (
+        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          <div className="card p-5">
+            <p className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.totalReviews}</p>
+            <p className="mt-2 text-3xl font-bold text-blue-950 dark:text-white">{stats.total}</p>
+          </div>
+          <div className="card p-5">
+            <p className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.avgRating}</p>
+            <div className="mt-2 flex items-center gap-2">
+              <p className="text-3xl font-bold text-blue-950 dark:text-white">{stats.averageOverall.toFixed(1)}</p>
+              <StarDisplay rating={Math.round(stats.averageOverall)} size="md" />
+            </div>
+          </div>
+          <div className="card p-5">
+            <p className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.fiveStars}</p>
+            <p className="mt-2 text-3xl font-bold text-emerald-600 dark:text-emerald-400">{stats.byRating['5'] ?? 0}</p>
+          </div>
+          <div className="card p-5">
+            <p className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-slate-400">{t.negative}</p>
+            <p className="mt-2 text-3xl font-bold text-red-600 dark:text-red-400">
+              {(stats.byRating['1'] ?? 0) + (stats.byRating['2'] ?? 0)}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="card p-4">
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-stone-700 dark:text-slate-300">{t.filterRating}</label>
+            <select
+              value={filterRating}
+              onChange={(e) => { setFilterRating(e.target.value); setPage(1) }}
+              className="input-field w-auto"
+            >
+              <option value="">{t.allRatings}</option>
+              {[5, 4, 3, 2, 1].map((r) => (
+                <option key={r} value={String(r)}>{t.stars(r)}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-stone-700 dark:text-slate-300">{t.filterDate}</label>
+            <select
+              value={filterDays}
+              onChange={(e) => { setFilterDays(e.target.value); setPage(1) }}
+              className="input-field w-auto"
+            >
+              <option value="">{t.allTime}</option>
+              <option value="7">{t.last7}</option>
+              <option value="30">{t.last30}</option>
+              <option value="90">{t.last90}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Reviews list */}
+      {loading ? (
+        <div className="card p-10 text-center text-stone-400 dark:text-slate-500">Loading…</div>
+      ) : error ? (
+        <div className="card p-10 text-center text-red-500">{error}</div>
+      ) : reviews.length === 0 ? (
+        <div className="card p-10 text-center text-stone-400 dark:text-slate-500">{t.noReviews}</div>
+      ) : (
+        <div className="space-y-4">
+          {reviews.map((review) => {
+            const customer = review.reservation?.customer
+            const vehicle = review.reservation?.vehicle
+            const vehicleLabel = vehicle ? `${vehicle.year} ${vehicle.make} ${vehicle.model}` : '—'
+            const customerName = customer ? `${customer.firstName} ${customer.lastName}` : '—'
+            const isReplying = replyingId === review.id
+            const isNegative = review.overallRating <= 2
+
+            return (
+              <div key={review.id} className={`card p-5 ${isNegative ? 'border-red-200 dark:border-red-900/40' : ''}`}>
+                <div className="flex flex-wrap items-start justify-between gap-4">
+                  <div className="flex-1 space-y-1">
+                    <div className="flex flex-wrap items-center gap-3">
+                      <span className="font-semibold text-blue-950 dark:text-white">{customerName}</span>
+                      <span className="text-sm text-stone-400 dark:text-slate-500">{vehicleLabel}</span>
+                      <span className="text-xs text-stone-400 dark:text-slate-500">
+                        {new Date(review.createdAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                    <StarDisplay rating={review.overallRating} />
+                    {review.comment && (
+                      <p className="mt-2 line-clamp-3 text-sm text-stone-600 dark:text-slate-300">{review.comment}</p>
+                    )}
+                    {review.companyReply && !isReplying && (
+                      <div className="mt-3 rounded-2xl border border-blue-100 bg-blue-50 p-3 dark:border-blue-900/40 dark:bg-blue-950/30">
+                        <div className="mb-1 flex items-center gap-2">
+                          <MessageSquare className="h-3.5 w-3.5 text-blue-500" />
+                          <span className="text-xs font-medium text-blue-600 dark:text-blue-400">{t.replied}</span>
+                        </div>
+                        <p className="text-sm text-stone-600 dark:text-slate-300">{review.companyReply}</p>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 flex-wrap gap-2">
+                    <button
+                      onClick={() => startReply(review)}
+                      className="btn-secondary text-xs"
+                    >
+                      <MessageSquare className="h-3.5 w-3.5" />
+                      {review.companyReply ? t.replied : t.reply}
+                    </button>
+                    <a
+                      href={`/complaints?reservationId=${review.reservation?.id ?? ''}`}
+                      className="btn-secondary text-xs"
+                    >
+                      <AlertTriangle className="h-3.5 w-3.5" />
+                      {t.newComplaint}
+                    </a>
+                  </div>
+                </div>
+
+                {/* Inline reply form */}
+                {isReplying && (
+                  <div className="mt-4 space-y-3">
+                    <textarea
+                      value={replyText}
+                      onChange={(e) => setReplyText(e.target.value)}
+                      placeholder={t.replyPlaceholder}
+                      rows={3}
+                      className="input-field resize-none"
+                    />
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleSaveReply(review.id)}
+                        disabled={replySaving || !replyText.trim()}
+                        className="btn-primary text-sm"
+                      >
+                        {replySaving ? t.saving : t.saveReply}
+                      </button>
+                      <button
+                        onClick={() => { setReplyingId(null); setReplyText('') }}
+                        className="btn-secondary text-sm"
+                      >
+                        {t.cancel}
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {meta.totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            className="btn-secondary text-sm"
+          >
+            ←
+          </button>
+          <span className="text-sm text-stone-600 dark:text-slate-400">
+            {page} / {meta.totalPages}
+          </span>
+          <button
+            onClick={() => setPage((p) => Math.min(meta.totalPages, p + 1))}
+            disabled={page >= meta.totalPages}
+            className="btn-secondary text-sm"
+          >
+            →
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/settings/page.tsx b/dashboard/src/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..ca16827
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,830 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface BrandSettings {
+  displayName: string
+  tagline: string | null
+  primaryColor: string
+  accentColor?: string | null
+  publicEmail: string | null
+  publicPhone: string | null
+  publicAddress?: string | null
+  publicCity: string | null
+  publicCountry?: string | null
+  subdomain: string
+  logoUrl?: string | null
+  heroImageUrl?: string | null
+  websiteUrl?: string | null
+  whatsappNumber?: string | null
+  paypalEmail: string | null
+  amanpayMerchantId: string | null
+  amanpaySecretKey?: string | null
+  paypalMerchantId?: string | null
+  customDomain?: string | null
+  customDomainVerified?: boolean
+  defaultLocale?: string
+  defaultCurrency?: string
+  isListedOnMarketplace: boolean
+}
+
+interface ContractSettings {
+  fuelPolicyType: string
+  fuelPolicyNote: string | null
+  additionalDriverCharge: 'FREE' | 'PER_DAY' | 'FLAT'
+  additionalDriverDailyRate: number
+  additionalDriverFlatRate: number
+  damagePolicy: string
+}
+
+interface InsurancePolicy {
+  id: string
+  name: string
+  type: string
+  chargeType: string
+  chargeValue: number
+  isRequired: boolean
+  isActive: boolean
+}
+
+interface PricingRule {
+  id: string
+  name: string
+  type: string
+  condition: string
+  conditionValue: number
+  adjustmentType: string
+  adjustmentValue: number
+  isActive: boolean
+}
+
+interface AccountingSettings {
+  reportingPeriod: string
+  accountantEmail: string | null
+  accountantName: string | null
+  autoSendReport: boolean
+  reportFormat: string
+}
+
+const emptyInsurance = { name: '', type: 'BASIC', chargeType: 'PER_DAY', chargeValue: 0, isRequired: false, isActive: true }
+const emptyRule = { name: '', type: 'SURCHARGE', condition: 'AGE_LESS_THAN', conditionValue: 25, adjustmentType: 'PERCENTAGE', adjustmentValue: 0, isActive: true }
+
+export default function SettingsPage() {
+  const { language } = useDashboardI18n()
+  const copy = {
+    en: {
+      title: 'Advanced settings',
+      subtitle: 'Manage insurance, additional-driver rules, pricing adjustments, and reporting defaults.',
+      save: 'Saving…',
+      saveBrand: 'Save brand',
+      brandProfile: 'Brand and public profile',
+      brandProfileDesc: 'Control how your company appears on the marketplace and public booking site.',
+      payments: 'Rental payment methods',
+      paymentsDesc: 'Configure how renters pay your company on the public booking site.',
+      savePayments: 'Save payments',
+      customDomain: 'Custom domain',
+      customDomainDesc: 'Point your own domain to the branded booking site.',
+      saveDomain: 'Save domain',
+      removeDomain: 'Remove custom domain',
+      contractPolicies: 'Contract and driver policies',
+      savePolicies: 'Save policies',
+      insurancePolicies: 'Insurance policies',
+      pricingRules: 'Pricing rules',
+      accounting: 'Accounting and exports',
+      saveAccounting: 'Save accounting',
+      displayName: 'Display name',
+      tagline: 'Tagline',
+      publicEmail: 'Public email',
+      publicPhone: 'Public phone',
+      city: 'City',
+      country: 'Country',
+      websiteUrl: 'Website URL',
+      contractLanguage: 'Contract language',
+      whatsapp: 'WhatsApp number',
+      brandColor: 'Brand color',
+      listedMarketplace: 'Listed on marketplace',
+      logoUpload: 'Logo upload',
+      heroUpload: 'Hero image upload',
+      uploading: 'Uploading…',
+      logoUploaded: 'Logo uploaded',
+      noLogo: 'No logo uploaded yet',
+      heroUploaded: 'Hero image uploaded',
+      noHero: 'No hero image uploaded yet',
+      subdomain: 'Subdomain',
+      customDomainLabel: 'Custom domain',
+      domainPlaceholder: 'cars.example.com',
+      status: 'Status',
+      verified: 'Verified',
+      pendingDns: 'Pending DNS verification',
+      notConfigured: 'Not configured',
+      fuelPolicyType: 'Fuel policy type',
+      additionalDriverCharge: 'Additional driver charge',
+      dailyDriverRate: 'Daily driver rate',
+      flatDriverRate: 'Flat driver rate',
+      fuelPolicyNote: 'Fuel policy note',
+      damagePolicy: 'Damage policy',
+      active: 'Active',
+      inactive: 'Inactive',
+      noInsurance: 'No insurance policies configured yet.',
+      policyName: 'Policy name',
+      chargeValue: 'Charge value',
+      required: 'Required',
+      addPolicy: 'Add policy',
+      noRules: 'No pricing rules configured yet.',
+      ruleName: 'Rule name',
+      addRule: 'Add rule',
+      reportingPeriod: 'Reporting period',
+      reportFormat: 'Report format',
+      accountantName: 'Accountant name',
+      accountantEmail: 'Accountant email',
+      autoSend: 'Auto-send reports to the accountant',
+      amanpayMerchantId: 'AmanPay merchant ID',
+      amanpaySecretKey: 'AmanPay secret key',
+      paypalEmail: 'PayPal business email',
+      noPaymentConfigured: 'If no payment method is configured, renters can still submit reservation requests and pay on pickup.',
+      fuelPolicyLabels: { FULL_TO_FULL: 'Full to full', FULL_TO_EMPTY: 'Full to empty', SAME_TO_SAME: 'Same to same', PREPAID: 'Prepaid', FREE: 'Included' } as Record<string, string>,
+      driverChargeLabels: { FREE: 'Free', PER_DAY: 'Per day', FLAT: 'Flat' } as Record<string, string>,
+      reportingPeriodLabels: { WEEKLY: 'Weekly', MONTHLY: 'Monthly', QUARTERLY: 'Quarterly', ANNUAL: 'Annual' } as Record<string, string>,
+      reportFormatLabels: { CSV: 'CSV', PDF: 'PDF', BOTH: 'Both' } as Record<string, string>,
+    },
+    fr: {
+      title: 'Paramètres avancés',
+      subtitle: 'Gérez les assurances, règles conducteurs, ajustements tarifaires et paramètres de reporting.',
+      save: 'Enregistrement…',
+      saveBrand: 'Enregistrer la marque',
+      brandProfile: 'Marque et profil public',
+      brandProfileDesc: 'Contrôlez l’affichage de votre entreprise sur la marketplace et le site de réservation.',
+      payments: 'Méthodes de paiement location',
+      paymentsDesc: 'Configurez comment les clients paient votre entreprise.',
+      savePayments: 'Enregistrer les paiements',
+      customDomain: 'Domaine personnalisé',
+      customDomainDesc: 'Pointez votre propre domaine vers le site de réservation.',
+      saveDomain: 'Enregistrer le domaine',
+      removeDomain: 'Supprimer le domaine',
+      contractPolicies: 'Contrat et politiques conducteur',
+      savePolicies: 'Enregistrer les politiques',
+      insurancePolicies: 'Polices d’assurance',
+      pricingRules: 'Règles tarifaires',
+      accounting: 'Comptabilité et exports',
+      saveAccounting: 'Enregistrer la comptabilité',
+      displayName: 'Nom affiché',
+      tagline: 'Slogan',
+      publicEmail: 'E-mail public',
+      publicPhone: 'Téléphone public',
+      city: 'Ville',
+      country: 'Pays',
+      websiteUrl: 'URL du site',
+      contractLanguage: 'Langue du contrat',
+      whatsapp: 'Numéro WhatsApp',
+      brandColor: 'Couleur de marque',
+      listedMarketplace: 'Publié sur la marketplace',
+      logoUpload: 'Logo',
+      heroUpload: 'Image principale',
+      uploading: 'Téléversement…',
+      logoUploaded: 'Logo téléversé',
+      noLogo: 'Aucun logo téléversé',
+      heroUploaded: 'Image principale téléversée',
+      noHero: 'Aucune image principale téléversée',
+      subdomain: 'Sous-domaine',
+      customDomainLabel: 'Domaine personnalisé',
+      domainPlaceholder: 'voitures.exemple.com',
+      status: 'Statut',
+      verified: 'Vérifié',
+      pendingDns: 'Vérification DNS en attente',
+      notConfigured: 'Non configuré',
+      fuelPolicyType: 'Type de politique carburant',
+      additionalDriverCharge: 'Supplément conducteur additionnel',
+      dailyDriverRate: 'Tarif conducteur/jour',
+      flatDriverRate: 'Tarif conducteur fixe',
+      fuelPolicyNote: 'Note sur la politique carburant',
+      damagePolicy: 'Politique dommages',
+      active: 'Actif',
+      inactive: 'Inactif',
+      noInsurance: 'Aucune police d’assurance configurée.',
+      policyName: 'Nom de la police',
+      chargeValue: 'Valeur de facturation',
+      required: 'Obligatoire',
+      addPolicy: 'Ajouter la police',
+      noRules: 'Aucune règle tarifaire configurée.',
+      ruleName: 'Nom de la règle',
+      addRule: 'Ajouter la règle',
+      reportingPeriod: 'Période de reporting',
+      reportFormat: 'Format de rapport',
+      accountantName: 'Nom du comptable',
+      accountantEmail: 'E-mail du comptable',
+      autoSend: 'Envoyer automatiquement les rapports au comptable',
+      amanpayMerchantId: 'ID marchand AmanPay',
+      amanpaySecretKey: 'Clé secrète AmanPay',
+      paypalEmail: 'Email business PayPal',
+      noPaymentConfigured: 'Si aucun moyen de paiement n’est configuré, les clients peuvent envoyer une demande puis payer à la prise du véhicule.',
+      fuelPolicyLabels: { FULL_TO_FULL: 'Plein à plein', FULL_TO_EMPTY: 'Plein à vide', SAME_TO_SAME: 'Même niveau', PREPAID: 'Prépayé', FREE: 'Inclus' } as Record<string, string>,
+      driverChargeLabels: { FREE: 'Gratuit', PER_DAY: 'Par jour', FLAT: 'Forfait' } as Record<string, string>,
+      reportingPeriodLabels: { WEEKLY: 'Hebdomadaire', MONTHLY: 'Mensuel', QUARTERLY: 'Trimestriel', ANNUAL: 'Annuel' } as Record<string, string>,
+      reportFormatLabels: { CSV: 'CSV', PDF: 'PDF', BOTH: 'Les deux' } as Record<string, string>,
+    },
+    ar: {
+      title: 'الإعدادات المتقدمة',
+      subtitle: 'إدارة التأمين وقواعد السائق الإضافي وتعديلات التسعير وإعدادات التقارير.',
+      save: 'جارٍ الحفظ…',
+      saveBrand: 'حفظ العلامة',
+      brandProfile: 'العلامة والملف العام',
+      brandProfileDesc: 'تحكم في ظهور شركتك في السوق وموقع الحجز العام.',
+      payments: 'طرق دفع الإيجار',
+      paymentsDesc: 'تهيئة طريقة دفع العملاء لشركتك في موقع الحجز.',
+      savePayments: 'حفظ الدفع',
+      customDomain: 'نطاق مخصص',
+      customDomainDesc: 'ربط نطاقك الخاص بموقع الحجز.',
+      saveDomain: 'حفظ النطاق',
+      removeDomain: 'إزالة النطاق المخصص',
+      contractPolicies: 'العقد وسياسات السائق',
+      savePolicies: 'حفظ السياسات',
+      insurancePolicies: 'سياسات التأمين',
+      pricingRules: 'قواعد التسعير',
+      accounting: 'المحاسبة والتصدير',
+      saveAccounting: 'حفظ المحاسبة',
+      displayName: 'اسم العرض',
+      tagline: 'الشعار',
+      publicEmail: 'البريد الإلكتروني العام',
+      publicPhone: 'الهاتف العام',
+      city: 'المدينة',
+      country: 'الدولة',
+      websiteUrl: 'رابط الموقع',
+      contractLanguage: 'لغة العقد',
+      whatsapp: 'رقم واتساب',
+      brandColor: 'لون العلامة',
+      listedMarketplace: 'مدرج في السوق',
+      logoUpload: 'رفع الشعار',
+      heroUpload: 'رفع صورة الواجهة',
+      uploading: 'جارٍ الرفع…',
+      logoUploaded: 'تم رفع الشعار',
+      noLogo: 'لم يتم رفع شعار بعد',
+      heroUploaded: 'تم رفع صورة الواجهة',
+      noHero: 'لم يتم رفع صورة واجهة بعد',
+      subdomain: 'النطاق الفرعي',
+      customDomainLabel: 'النطاق المخصص',
+      domainPlaceholder: 'cars.example.com',
+      status: 'الحالة',
+      verified: 'موثق',
+      pendingDns: 'بانتظار التحقق من DNS',
+      notConfigured: 'غير مُعدّ',
+      fuelPolicyType: 'نوع سياسة الوقود',
+      additionalDriverCharge: 'رسوم السائق الإضافي',
+      dailyDriverRate: 'تعرفة السائق اليومية',
+      flatDriverRate: 'تعرفة السائق الثابتة',
+      fuelPolicyNote: 'ملاحظة سياسة الوقود',
+      damagePolicy: 'سياسة الأضرار',
+      active: 'نشط',
+      inactive: 'غير نشط',
+      noInsurance: 'لا توجد سياسات تأمين مهيأة.',
+      policyName: 'اسم السياسة',
+      chargeValue: 'قيمة الرسوم',
+      required: 'إلزامي',
+      addPolicy: 'إضافة سياسة',
+      noRules: 'لا توجد قواعد تسعير مهيأة.',
+      ruleName: 'اسم القاعدة',
+      addRule: 'إضافة قاعدة',
+      reportingPeriod: 'فترة التقرير',
+      reportFormat: 'تنسيق التقرير',
+      accountantName: 'اسم المحاسب',
+      accountantEmail: 'بريد المحاسب',
+      autoSend: 'إرسال التقارير تلقائياً إلى المحاسب',
+      amanpayMerchantId: 'معرّف التاجر AmanPay',
+      amanpaySecretKey: 'المفتاح السري AmanPay',
+      paypalEmail: 'بريد أعمال PayPal',
+      noPaymentConfigured: 'إذا لم يتم إعداد وسيلة دفع، لا يزال بإمكان العملاء إرسال طلب حجز والدفع عند الاستلام.',
+      fuelPolicyLabels: { FULL_TO_FULL: 'ممتلئ إلى ممتلئ', FULL_TO_EMPTY: 'ممتلئ إلى فارغ', SAME_TO_SAME: 'نفس المستوى', PREPAID: 'مدفوع مسبقاً', FREE: 'مشمول' } as Record<string, string>,
+      driverChargeLabels: { FREE: 'مجاني', PER_DAY: 'يومي', FLAT: 'ثابت' } as Record<string, string>,
+      reportingPeriodLabels: { WEEKLY: 'أسبوعي', MONTHLY: 'شهري', QUARTERLY: 'ربع سنوي', ANNUAL: 'سنوي' } as Record<string, string>,
+      reportFormatLabels: { CSV: 'CSV', PDF: 'PDF', BOTH: 'كلاهما' } as Record<string, string>,
+    },
+  }[language]
+  const [brand, setBrand] = useState<BrandSettings | null>(null)
+  const [contractSettings, setContractSettings] = useState<ContractSettings | null>(null)
+  const [insurancePolicies, setInsurancePolicies] = useState<InsurancePolicy[]>([])
+  const [pricingRules, setPricingRules] = useState<PricingRule[]>([])
+  const [accountingSettings, setAccountingSettings] = useState<AccountingSettings | null>(null)
+  const [newInsurance, setNewInsurance] = useState(emptyInsurance)
+  const [newRule, setNewRule] = useState(emptyRule)
+  const [customDomain, setCustomDomain] = useState('')
+  const [uploadingAsset, setUploadingAsset] = useState<'logo' | 'hero' | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  async function load() {
+    try {
+      const [brandData, contractData, insuranceData, ruleData, accountingData] = await Promise.all([
+        apiFetch<BrandSettings | null>('/companies/me/brand'),
+        apiFetch<ContractSettings | null>('/companies/me/contract-settings'),
+        apiFetch<InsurancePolicy[]>('/companies/me/insurance-policies'),
+        apiFetch<PricingRule[]>('/companies/me/pricing-rules'),
+        apiFetch<AccountingSettings | null>('/companies/me/accounting-settings'),
+      ])
+      setBrand(brandData)
+      setCustomDomain(brandData?.customDomain ?? '')
+      setContractSettings(contractData ?? {
+        fuelPolicyType: 'FULL_TO_FULL',
+        fuelPolicyNote: '',
+        additionalDriverCharge: 'FREE',
+        additionalDriverDailyRate: 0,
+        additionalDriverFlatRate: 0,
+        damagePolicy: '',
+      })
+      setInsurancePolicies(insuranceData)
+      setPricingRules(ruleData)
+      setAccountingSettings(accountingData ?? {
+        reportingPeriod: 'MONTHLY',
+        accountantEmail: '',
+        accountantName: '',
+        autoSendReport: false,
+        reportFormat: 'CSV',
+      })
+      setError(null)
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to load settings')
+    }
+  }
+
+  async function saveBrandSettings() {
+    if (!brand) return
+    setSaving(true)
+    setError(null)
+    try {
+      const updated = await apiFetch<BrandSettings>('/companies/me/brand', {
+        method: 'PATCH',
+        body: JSON.stringify({
+          displayName: brand.displayName,
+          tagline: brand.tagline || undefined,
+          primaryColor: brand.primaryColor,
+          accentColor: brand.accentColor || undefined,
+          publicEmail: brand.publicEmail || undefined,
+          publicPhone: brand.publicPhone || undefined,
+          publicAddress: brand.publicAddress || undefined,
+          publicCity: brand.publicCity || undefined,
+          publicCountry: brand.publicCountry || undefined,
+          websiteUrl: brand.websiteUrl || undefined,
+          defaultLocale: brand.defaultLocale || undefined,
+          whatsappNumber: brand.whatsappNumber || undefined,
+          paypalEmail: brand.paypalEmail || undefined,
+          amanpayMerchantId: brand.amanpayMerchantId || undefined,
+          amanpaySecretKey: brand.amanpaySecretKey || undefined,
+          paypalMerchantId: brand.paypalMerchantId || undefined,
+          defaultCurrency: brand.defaultCurrency || undefined,
+          isListedOnMarketplace: brand.isListedOnMarketplace,
+        }),
+      })
+      setBrand(updated)
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to save brand settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function uploadBrandAsset(kind: 'logo' | 'hero', file: File | null) {
+    if (!file) return
+    setUploadingAsset(kind)
+    setError(null)
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      const updated = await apiFetch<BrandSettings>(`/companies/me/brand/${kind}`, {
+        method: 'POST',
+        body: formData,
+      })
+      setBrand(updated)
+    } catch (err: any) {
+      setError(err.message ?? `Failed to upload ${kind}`)
+    } finally {
+      setUploadingAsset(null)
+    }
+  }
+
+  async function saveCustomDomain() {
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/brand/custom-domain', {
+        method: 'POST',
+        body: JSON.stringify({ customDomain }),
+      })
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to save custom domain')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function removeCustomDomain() {
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/brand/custom-domain', {
+        method: 'DELETE',
+      })
+      setCustomDomain('')
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to remove custom domain')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  async function saveContractSettings() {
+    if (!contractSettings) return
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/contract-settings', {
+        method: 'PATCH',
+        body: JSON.stringify(contractSettings),
+      })
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to save contract settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function saveAccountingSettings() {
+    if (!accountingSettings) return
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/accounting-settings', {
+        method: 'PATCH',
+        body: JSON.stringify(accountingSettings),
+      })
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to save accounting settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function createInsurance() {
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/insurance-policies', {
+        method: 'POST',
+        body: JSON.stringify(newInsurance),
+      })
+      setNewInsurance(emptyInsurance)
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to create insurance policy')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function toggleInsurance(policy: InsurancePolicy) {
+    try {
+      await apiFetch(`/companies/me/insurance-policies/${policy.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isActive: !policy.isActive }),
+      })
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to update insurance policy')
+    }
+  }
+
+  async function createRule() {
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/pricing-rules', {
+        method: 'POST',
+        body: JSON.stringify(newRule),
+      })
+      setNewRule(emptyRule)
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to create pricing rule')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function toggleRule(rule: PricingRule) {
+    try {
+      await apiFetch(`/companies/me/pricing-rules/${rule.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isActive: !rule.isActive }),
+      })
+      await load()
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to update pricing rule')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading">
+        <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+        <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+      </div>
+
+      {error && <div className="card p-6 text-sm text-red-600">{error}</div>}
+
+      {brand && (
+        <div className="grid gap-6">
+          <div className="card p-6">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <h3 className="text-base font-semibold text-slate-900">{copy.brandProfile}</h3>
+                <p className="mt-1 text-sm text-slate-500">{copy.brandProfileDesc}</p>
+              </div>
+              <button onClick={saveBrandSettings} disabled={saving} className="btn-primary">
+                {saving ? copy.save : copy.saveBrand}
+              </button>
+            </div>
+            <div className="mt-5 grid gap-4 lg:grid-cols-2">
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.displayName}</label>
+                <input className="input-field" value={brand.displayName} onChange={(event) => setBrand((current) => current ? { ...current, displayName: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.tagline}</label>
+                <input className="input-field" value={brand.tagline ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, tagline: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.publicEmail}</label>
+                <input className="input-field" type="email" value={brand.publicEmail ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, publicEmail: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.publicPhone}</label>
+                <input className="input-field" value={brand.publicPhone ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, publicPhone: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.city}</label>
+                <input className="input-field" value={brand.publicCity ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, publicCity: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.country}</label>
+                <input className="input-field" value={brand.publicCountry ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, publicCountry: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.websiteUrl}</label>
+                <input className="input-field" value={brand.websiteUrl ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, websiteUrl: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.contractLanguage}</label>
+                <select className="input-field" value={brand.defaultLocale ?? 'en'} onChange={(event) => setBrand((current) => current ? { ...current, defaultLocale: event.target.value } : current)}>
+                  <option value="en">EN</option>
+                  <option value="fr">FR</option>
+                  <option value="ar">AR</option>
+                </select>
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.whatsapp}</label>
+                <input className="input-field" value={brand.whatsappNumber ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, whatsappNumber: event.target.value } : current)} />
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.brandColor}</label>
+                <input className="input-field" value={brand.primaryColor} onChange={(event) => setBrand((current) => current ? { ...current, primaryColor: event.target.value } : current)} />
+              </div>
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 text-sm font-medium text-slate-700">
+                  <input type="checkbox" checked={brand.isListedOnMarketplace} onChange={(event) => setBrand((current) => current ? { ...current, isListedOnMarketplace: event.target.checked } : current)} />
+                  {copy.listedMarketplace}
+                </label>
+              </div>
+            </div>
+            <div className="mt-5 grid gap-4 lg:grid-cols-2">
+              <label className="block">
+                <span className="mb-1.5 block text-sm font-medium text-slate-700">{copy.logoUpload}</span>
+                <input type="file" accept="image/*" onChange={(event) => uploadBrandAsset('logo', event.target.files?.[0] ?? null)} className="input-field" />
+                <p className="mt-2 text-xs text-slate-500">{uploadingAsset === 'logo' ? copy.uploading : brand.logoUrl ? copy.logoUploaded : copy.noLogo}</p>
+              </label>
+              <label className="block">
+                <span className="mb-1.5 block text-sm font-medium text-slate-700">{copy.heroUpload}</span>
+                <input type="file" accept="image/*" onChange={(event) => uploadBrandAsset('hero', event.target.files?.[0] ?? null)} className="input-field" />
+                <p className="mt-2 text-xs text-slate-500">{uploadingAsset === 'hero' ? copy.uploading : brand.heroImageUrl ? copy.heroUploaded : copy.noHero}</p>
+              </label>
+            </div>
+          </div>
+
+          <div className="grid gap-6 lg:grid-cols-2">
+            <div className="card p-6">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <h3 className="text-base font-semibold text-slate-900">{copy.payments}</h3>
+                  <p className="mt-1 text-sm text-slate-500">{copy.paymentsDesc}</p>
+                </div>
+                <button onClick={saveBrandSettings} disabled={saving} className="btn-primary">
+                  {saving ? copy.save : copy.savePayments}
+                </button>
+              </div>
+              <div className="mt-5 grid gap-4">
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.amanpayMerchantId}</label>
+                  <input className="input-field" value={brand.amanpayMerchantId ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, amanpayMerchantId: event.target.value } : current)} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.amanpaySecretKey}</label>
+                  <input className="input-field" type="password" value={brand.amanpaySecretKey ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, amanpaySecretKey: event.target.value } : current)} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.paypalEmail}</label>
+                  <input className="input-field" type="email" value={brand.paypalEmail ?? ''} onChange={(event) => setBrand((current) => current ? { ...current, paypalEmail: event.target.value } : current)} />
+                </div>
+                <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
+                  {copy.noPaymentConfigured}
+                </div>
+              </div>
+            </div>
+
+            <div className="card p-6">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <h3 className="text-base font-semibold text-slate-900">{copy.customDomain}</h3>
+                  <p className="mt-1 text-sm text-slate-500">{copy.customDomainDesc}</p>
+                </div>
+                <button onClick={saveCustomDomain} disabled={saving || !customDomain.trim()} className="btn-primary">
+                  {saving ? copy.save : copy.saveDomain}
+                </button>
+              </div>
+              <div className="mt-5 space-y-4">
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.subdomain}</label>
+                  <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">{brand.subdomain}.RentalDriveGo.com</div>
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.customDomainLabel}</label>
+                  <input className="input-field" placeholder={copy.domainPlaceholder} value={customDomain} onChange={(event) => setCustomDomain(event.target.value)} />
+                </div>
+                <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
+                  {copy.status}: {brand.customDomain ? (brand.customDomainVerified ? copy.verified : copy.pendingDns) : copy.notConfigured}
+                </div>
+                {brand.customDomain ? (
+                  <button onClick={removeCustomDomain} disabled={saving} className="btn-secondary">
+                    {copy.removeDomain}
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {contractSettings && (
+        <div className="card p-6">
+          <div className="flex items-center justify-between">
+            <h3 className="text-base font-semibold text-slate-900">{copy.contractPolicies}</h3>
+            <button onClick={saveContractSettings} disabled={saving} className="btn-primary">
+              {saving ? copy.save : copy.savePolicies}
+            </button>
+          </div>
+          <div className="mt-5 grid gap-4 lg:grid-cols-2">
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.fuelPolicyType}</label>
+              <select className="input-field" value={contractSettings.fuelPolicyType} onChange={(event) => setContractSettings((current) => current ? { ...current, fuelPolicyType: event.target.value } : current)}>
+                {['FULL_TO_FULL', 'FULL_TO_EMPTY', 'SAME_TO_SAME', 'PREPAID', 'FREE'].map((option) => <option key={option} value={option}>{copy.fuelPolicyLabels[option] ?? option}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.additionalDriverCharge}</label>
+              <select className="input-field" value={contractSettings.additionalDriverCharge} onChange={(event) => setContractSettings((current) => current ? { ...current, additionalDriverCharge: event.target.value as ContractSettings['additionalDriverCharge'] } : current)}>
+                {['FREE', 'PER_DAY', 'FLAT'].map((option) => <option key={option} value={option}>{copy.driverChargeLabels[option] ?? option}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.dailyDriverRate}</label>
+              <input type="number" className="input-field" value={contractSettings.additionalDriverDailyRate} onChange={(event) => setContractSettings((current) => current ? { ...current, additionalDriverDailyRate: Number(event.target.value) } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.flatDriverRate}</label>
+              <input type="number" className="input-field" value={contractSettings.additionalDriverFlatRate} onChange={(event) => setContractSettings((current) => current ? { ...current, additionalDriverFlatRate: Number(event.target.value) } : current)} />
+            </div>
+            <div className="lg:col-span-2">
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.fuelPolicyNote}</label>
+              <textarea className="input-field min-h-24" value={contractSettings.fuelPolicyNote ?? ''} onChange={(event) => setContractSettings((current) => current ? { ...current, fuelPolicyNote: event.target.value } : current)} />
+            </div>
+            <div className="lg:col-span-2">
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.damagePolicy}</label>
+              <textarea className="input-field min-h-24" value={contractSettings.damagePolicy ?? ''} onChange={(event) => setContractSettings((current) => current ? { ...current, damagePolicy: event.target.value } : current)} />
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <div className="card p-6">
+          <h3 className="text-base font-semibold text-slate-900">{copy.insurancePolicies}</h3>
+          <div className="mt-5 space-y-3">
+            {insurancePolicies.map((policy) => (
+              <div key={policy.id} className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 text-sm">
+                <div>
+                  <p className="font-medium text-slate-900">{policy.name}</p>
+                  <p className="text-slate-500">{policy.type} · {policy.chargeType} · {policy.chargeValue}</p>
+                </div>
+                <button onClick={() => toggleInsurance(policy)} className={policy.isActive ? 'badge-green' : 'badge-gray'}>
+                  {policy.isActive ? copy.active : copy.inactive}
+                </button>
+              </div>
+            ))}
+            {insurancePolicies.length === 0 && <div className="text-sm text-slate-400">{copy.noInsurance}</div>}
+          </div>
+
+          <div className="mt-5 grid gap-3 sm:grid-cols-2">
+            <input className="input-field" placeholder={copy.policyName} value={newInsurance.name} onChange={(event) => setNewInsurance((current) => ({ ...current, name: event.target.value }))} />
+            <select className="input-field" value={newInsurance.type} onChange={(event) => setNewInsurance((current) => ({ ...current, type: event.target.value }))}>
+              {['BASIC', 'FULL', 'CDW', 'SCDW', 'THEFT', 'THIRD_PARTY', 'ROADSIDE', 'PERSONAL', 'CUSTOM'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <select className="input-field" value={newInsurance.chargeType} onChange={(event) => setNewInsurance((current) => ({ ...current, chargeType: event.target.value }))}>
+              {['PER_DAY', 'PER_RENTAL', 'PERCENTAGE_OF_RENTAL'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <input type="number" className="input-field" placeholder={copy.chargeValue} value={newInsurance.chargeValue} onChange={(event) => setNewInsurance((current) => ({ ...current, chargeValue: Number(event.target.value) }))} />
+          </div>
+          <div className="mt-3 flex items-center gap-4 text-sm">
+            <label className="flex items-center gap-2"><input type="checkbox" checked={newInsurance.isRequired} onChange={(event) => setNewInsurance((current) => ({ ...current, isRequired: event.target.checked }))} /> {copy.required}</label>
+            <button onClick={createInsurance} disabled={saving} className="btn-primary">{saving ? copy.save : copy.addPolicy}</button>
+          </div>
+        </div>
+
+        <div className="card p-6">
+          <h3 className="text-base font-semibold text-slate-900">{copy.pricingRules}</h3>
+          <div className="mt-5 space-y-3">
+            {pricingRules.map((rule) => (
+              <div key={rule.id} className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 text-sm">
+                <div>
+                  <p className="font-medium text-slate-900">{rule.name}</p>
+                  <p className="text-slate-500">{rule.type} · {rule.condition} {rule.conditionValue} · {rule.adjustmentType} {rule.adjustmentValue}</p>
+                </div>
+                <button onClick={() => toggleRule(rule)} className={rule.isActive ? 'badge-green' : 'badge-gray'}>
+                  {rule.isActive ? copy.active : copy.inactive}
+                </button>
+              </div>
+            ))}
+            {pricingRules.length === 0 && <div className="text-sm text-slate-400">{copy.noRules}</div>}
+          </div>
+
+          <div className="mt-5 grid gap-3 sm:grid-cols-2">
+            <input className="input-field" placeholder={copy.ruleName} value={newRule.name} onChange={(event) => setNewRule((current) => ({ ...current, name: event.target.value }))} />
+            <select className="input-field" value={newRule.type} onChange={(event) => setNewRule((current) => ({ ...current, type: event.target.value }))}>
+              {['SURCHARGE', 'DISCOUNT'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <select className="input-field" value={newRule.condition} onChange={(event) => setNewRule((current) => ({ ...current, condition: event.target.value }))}>
+              {['AGE_LESS_THAN', 'AGE_GREATER_THAN', 'LICENSE_YEARS_LESS_THAN', 'LICENSE_YEARS_GREATER_THAN'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <input type="number" className="input-field" value={newRule.conditionValue} onChange={(event) => setNewRule((current) => ({ ...current, conditionValue: Number(event.target.value) }))} />
+            <select className="input-field" value={newRule.adjustmentType} onChange={(event) => setNewRule((current) => ({ ...current, adjustmentType: event.target.value }))}>
+              {['PERCENTAGE', 'FLAT_PER_DAY', 'FLAT_TOTAL'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <input type="number" className="input-field" value={newRule.adjustmentValue} onChange={(event) => setNewRule((current) => ({ ...current, adjustmentValue: Number(event.target.value) }))} />
+          </div>
+          <div className="mt-3">
+            <button onClick={createRule} disabled={saving} className="btn-primary">{saving ? copy.save : copy.addRule}</button>
+          </div>
+        </div>
+      </div>
+
+      {accountingSettings && (
+        <div className="card p-6">
+          <div className="flex items-center justify-between">
+            <h3 className="text-base font-semibold text-slate-900">{copy.accounting}</h3>
+            <button onClick={saveAccountingSettings} disabled={saving} className="btn-primary">
+              {saving ? copy.save : copy.saveAccounting}
+            </button>
+          </div>
+          <div className="mt-5 grid gap-4 lg:grid-cols-2">
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.reportingPeriod}</label>
+              <select className="input-field" value={accountingSettings.reportingPeriod} onChange={(event) => setAccountingSettings((current) => current ? { ...current, reportingPeriod: event.target.value } : current)}>
+                {['WEEKLY', 'MONTHLY', 'QUARTERLY', 'ANNUAL'].map((option) => <option key={option} value={option}>{copy.reportingPeriodLabels[option] ?? option}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.reportFormat}</label>
+              <select className="input-field" value={accountingSettings.reportFormat} onChange={(event) => setAccountingSettings((current) => current ? { ...current, reportFormat: event.target.value } : current)}>
+                {['CSV', 'PDF', 'BOTH'].map((option) => <option key={option} value={option}>{copy.reportFormatLabels[option] ?? option}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.accountantName}</label>
+              <input className="input-field" value={accountingSettings.accountantName ?? ''} onChange={(event) => setAccountingSettings((current) => current ? { ...current, accountantName: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.accountantEmail}</label>
+              <input className="input-field" value={accountingSettings.accountantEmail ?? ''} onChange={(event) => setAccountingSettings((current) => current ? { ...current, accountantEmail: event.target.value } : current)} />
+            </div>
+          </div>
+          <label className="mt-4 flex items-center gap-2 text-sm font-medium text-slate-700">
+            <input type="checkbox" checked={accountingSettings.autoSendReport} onChange={(event) => setAccountingSettings((current) => current ? { ...current, autoSendReport: event.target.checked } : current)} />
+            {copy.autoSend}
+          </label>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/subscription/page.tsx b/dashboard/src/app/(dashboard)/subscription/page.tsx
new file mode 100644
index 0000000..412bfcb
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/subscription/page.tsx
@@ -0,0 +1,567 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { formatCurrency, PLAN_PRICES } from '@rentaldrivego/types'
+import { EMPLOYEE_PROFILE_KEY, apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type Plan = 'STARTER' | 'GROWTH' | 'PRO'
+type BillingPeriod = 'MONTHLY' | 'ANNUAL'
+
+interface Subscription {
+  id: string
+  plan: Plan
+  billingPeriod: BillingPeriod
+  status: string
+  currency: string
+  trialEndAt: string | null
+  currentPeriodEnd: string | null
+  cancelAtPeriodEnd: boolean
+}
+
+interface Invoice {
+  id: string
+  amount: number
+  currency: string
+  status: string
+  paymentProvider: string
+  paidAt: string | null
+  createdAt: string
+}
+
+interface ProviderAvailability {
+  amanpay: boolean
+  paypal: boolean
+}
+
+interface PlanFeature {
+  id: string
+  plan: Plan
+  label: string
+  sortOrder: number
+}
+
+interface EmployeeProfile {
+  role?: string
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  TRIALING: 'bg-sky-100 text-sky-700',
+  ACTIVE: 'bg-green-100 text-green-700',
+  PAST_DUE: 'bg-orange-100 text-orange-700',
+  CANCELLED: 'bg-slate-100 text-slate-600',
+  UNPAID: 'bg-red-100 text-red-700',
+}
+
+const INVOICE_STATUS: Record<string, string> = {
+  PAID: 'bg-green-100 text-green-700',
+  PENDING: 'bg-orange-100 text-orange-700',
+  FAILED: 'bg-red-100 text-red-700',
+  REFUNDED: 'bg-slate-100 text-slate-600',
+}
+
+const PLANS: Plan[] = ['STARTER', 'GROWTH', 'PRO']
+export default function SubscriptionPage() {
+  const router = useRouter()
+  const { language } = useDashboardI18n()
+  const [subscription, setSubscription] = useState<Subscription | null>(null)
+  const [invoices, setInvoices] = useState<Invoice[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [canViewPage, setCanViewPage] = useState<boolean | null>(null)
+
+  const [selectedPlan, setSelectedPlan] = useState<Plan>('STARTER')
+  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>('MONTHLY')
+  const currency = 'MAD'
+  const [provider, setProvider] = useState<'AMANPAY' | 'PAYPAL'>('AMANPAY')
+  const [providerAvailability, setProviderAvailability] = useState<ProviderAvailability>({ amanpay: false, paypal: false })
+  const [planPrices, setPlanPrices] = useState<Record<string, Record<string, Record<string, number>>>>(PLAN_PRICES)
+  const [planFeaturesList, setPlanFeaturesList] = useState<PlanFeature[]>([])
+  const [paying, setPaying] = useState(false)
+  const [cancelling, setCancelling] = useState(false)
+  const copy = {
+    en: {
+      title: 'Subscription',
+      subtitle: 'Manage your plan, payment provider, and subscription invoices.',
+      trial: 'Free trial',
+      remaining: 'remaining. Subscribe before it ends to keep access.',
+      currentPlan: 'Current plan',
+      renews: 'renews',
+      cancelScheduled: 'Cancellation scheduled at end of billing period.',
+      undo: 'Undo',
+      cancelling: 'Cancelling…',
+      cancelPlan: 'Cancel plan',
+      changePlan: 'Change plan',
+      subscribe: 'Subscribe',
+      selectPlan: 'Select a plan and payment provider to proceed.',
+      monthly: 'Monthly',
+      annual: 'Annual (save ~17%)',
+      active: 'Active',
+      perMonthShort: 'mo',
+      perYearShort: 'yr',
+      paymentProvider: 'Payment provider',
+      total: 'Total',
+      perMonth: 'month',
+      perYear: 'year',
+      redirecting: 'Redirecting…',
+      subscribeNow: 'Subscribe now',
+      invoiceHistory: 'Invoice history',
+      date: 'Date',
+      provider: 'Provider',
+      status: 'Status',
+      paid: 'Paid',
+      amount: 'Amount',
+      loading: 'Loading…',
+      noInvoices: 'No invoices yet.',
+      noProviderConfigured: 'No payment provider is configured. Contact support to enable AmanPay or PayPal.',
+      providerUnavailable: 'This payment provider is not configured.',
+      statusLabels: { TRIALING: 'Trialing', ACTIVE: 'Active', PAST_DUE: 'Past due', CANCELLED: 'Cancelled', UNPAID: 'Unpaid' } as Record<string, string>,
+      invoiceStatusLabels: { PAID: 'Paid', PENDING: 'Pending', FAILED: 'Failed', REFUNDED: 'Refunded' } as Record<string, string>,
+      planFeatures: {
+        STARTER: ['Up to 10 vehicles', '1 user seat', 'Basic analytics', 'Marketplace listing'],
+        GROWTH: ['Up to 50 vehicles', '5 user seats', 'Full analytics', 'Priority listing', 'Custom branding'],
+        PRO: ['Unlimited vehicles', 'Unlimited seats', 'Advanced reports', 'API access', 'Dedicated support'],
+      } as Record<Plan, string[]>,
+    },
+    fr: {
+      title: 'Abonnement',
+      subtitle: 'Gérez votre plan, le prestataire de paiement et les factures d’abonnement.',
+      trial: 'Essai gratuit',
+      remaining: 'restants. Abonnez-vous avant la fin pour garder l’accès.',
+      currentPlan: 'Plan actuel',
+      renews: 'renouvelle le',
+      cancelScheduled: 'Annulation programmée à la fin de la période.',
+      undo: 'Annuler',
+      cancelling: 'Annulation…',
+      cancelPlan: 'Annuler le plan',
+      changePlan: 'Changer de plan',
+      subscribe: 'S’abonner',
+      selectPlan: 'Sélectionnez un plan et un prestataire de paiement.',
+      monthly: 'Mensuel',
+      annual: 'Annuel (économie ~17%)',
+      active: 'Actif',
+      perMonthShort: 'mois',
+      perYearShort: 'an',
+      paymentProvider: 'Prestataire de paiement',
+      total: 'Total',
+      perMonth: 'mois',
+      perYear: 'an',
+      redirecting: 'Redirection…',
+      subscribeNow: 'S’abonner maintenant',
+      invoiceHistory: 'Historique des factures',
+      date: 'Date',
+      provider: 'Prestataire',
+      status: 'Statut',
+      paid: 'Payé',
+      amount: 'Montant',
+      loading: 'Chargement…',
+      noInvoices: 'Aucune facture pour le moment.',
+      noProviderConfigured: 'Aucun prestataire de paiement n’est configuré. Contactez le support pour activer AmanPay ou PayPal.',
+      providerUnavailable: 'Ce prestataire de paiement n’est pas configuré.',
+      statusLabels: { TRIALING: 'Essai', ACTIVE: 'Actif', PAST_DUE: 'En retard', CANCELLED: 'Annulé', UNPAID: 'Impayé' } as Record<string, string>,
+      invoiceStatusLabels: { PAID: 'Payé', PENDING: 'En attente', FAILED: 'Échec', REFUNDED: 'Remboursé' } as Record<string, string>,
+      planFeatures: {
+        STARTER: ['Jusqu’à 10 véhicules', '1 utilisateur', 'Analyses de base', 'Présence marketplace'],
+        GROWTH: ['Jusqu’à 50 véhicules', '5 utilisateurs', 'Analyses complètes', 'Mise en avant prioritaire', 'Personnalisation'],
+        PRO: ['Véhicules illimités', 'Utilisateurs illimités', 'Rapports avancés', 'Accès API', 'Support dédié'],
+      } as Record<Plan, string[]>,
+    },
+    ar: {
+      title: 'الاشتراك',
+      subtitle: 'إدارة الخطة ومزوّد الدفع وفواتير الاشتراك.',
+      trial: 'تجربة مجانية',
+      remaining: 'متبقية. اشترك قبل انتهائها للحفاظ على الوصول.',
+      currentPlan: 'الخطة الحالية',
+      renews: 'يتجدد في',
+      cancelScheduled: 'تمت جدولة الإلغاء عند نهاية فترة الفوترة.',
+      undo: 'تراجع',
+      cancelling: 'جارٍ الإلغاء…',
+      cancelPlan: 'إلغاء الخطة',
+      changePlan: 'تغيير الخطة',
+      subscribe: 'اشتراك',
+      selectPlan: 'اختر خطة ومزوّد دفع للمتابعة.',
+      monthly: 'شهري',
+      annual: 'سنوي (توفير ~17%)',
+      active: 'نشط',
+      perMonthShort: 'شهر',
+      perYearShort: 'سنة',
+      paymentProvider: 'مزوّد الدفع',
+      total: 'الإجمالي',
+      perMonth: 'شهر',
+      perYear: 'سنة',
+      redirecting: 'جارٍ التحويل…',
+      subscribeNow: 'اشترك الآن',
+      invoiceHistory: 'سجل الفواتير',
+      date: 'التاريخ',
+      provider: 'المزوّد',
+      status: 'الحالة',
+      paid: 'مدفوع',
+      amount: 'المبلغ',
+      loading: 'جارٍ التحميل…',
+      noInvoices: 'لا توجد فواتير حتى الآن.',
+      noProviderConfigured: 'لا يوجد مزوّد دفع مهيأ. تواصل مع الدعم لتفعيل AmanPay أو PayPal.',
+      providerUnavailable: 'مزوّد الدفع هذا غير مهيأ.',
+      statusLabels: { TRIALING: 'تجريبي', ACTIVE: 'نشط', PAST_DUE: 'متأخر', CANCELLED: 'ملغى', UNPAID: 'غير مدفوع' } as Record<string, string>,
+      invoiceStatusLabels: { PAID: 'مدفوع', PENDING: 'قيد الانتظار', FAILED: 'فشل', REFUNDED: 'مسترد' } as Record<string, string>,
+      planFeatures: {
+        STARTER: ['حتى 10 مركبات', 'مستخدم واحد', 'تحليلات أساسية', 'إدراج في السوق'],
+        GROWTH: ['حتى 50 مركبة', '5 مستخدمين', 'تحليلات كاملة', 'إدراج ذو أولوية', 'تخصيص العلامة'],
+        PRO: ['مركبات غير محدودة', 'مقاعد غير محدودة', 'تقارير متقدمة', 'وصول API', 'دعم مخصص'],
+      } as Record<Plan, string[]>,
+    },
+  }[language]
+
+  useEffect(() => {
+    const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
+    if (cached) {
+      try {
+        const profile = JSON.parse(cached) as EmployeeProfile
+        const allowed = profile.role === 'OWNER'
+        setCanViewPage(allowed)
+        if (!allowed) router.replace('/')
+        return
+      } catch {}
+    }
+
+    apiFetch<{ employee: EmployeeProfile }>('/auth/employee/me')
+      .then(({ employee }) => {
+        window.localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(employee))
+        const allowed = employee.role === 'OWNER'
+        setCanViewPage(allowed)
+        if (!allowed) router.replace('/')
+      })
+      .catch(() => {
+        setCanViewPage(false)
+        router.replace('/')
+      })
+  }, [router])
+
+  const fetchPlanData = useCallback(async () => {
+    const [prices, features] = await Promise.all([
+      apiFetch<Record<string, Record<string, Record<string, number>>>>('/subscriptions/plans'),
+      apiFetch<PlanFeature[]>('/subscriptions/features'),
+    ])
+    if (prices && Object.keys(prices).length > 0) setPlanPrices(prices)
+    if (features) setPlanFeaturesList(features)
+  }, [])
+
+  useEffect(() => {
+    if (canViewPage !== true) return
+
+    Promise.all([
+      apiFetch<Subscription | null>('/subscriptions/me'),
+      apiFetch<Invoice[]>('/subscriptions/invoices'),
+      apiFetch<ProviderAvailability>('/subscriptions/providers'),
+      fetchPlanData(),
+    ])
+      .then(([sub, inv, availability]) => {
+        setProviderAvailability(availability)
+        if (availability.amanpay) setProvider('AMANPAY')
+        else if (availability.paypal) setProvider('PAYPAL')
+        if (sub) {
+          setSubscription(sub)
+          setSelectedPlan(sub.plan)
+          setBillingPeriod(sub.billingPeriod)
+          // currency is always MAD
+        }
+        setInvoices(inv ?? [])
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [canViewPage, fetchPlanData])
+
+  useEffect(() => {
+    if (canViewPage !== true) return
+    const handleFocus = () => { fetchPlanData().catch(() => {}) }
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible') fetchPlanData().catch(() => {})
+    }
+    window.addEventListener('focus', handleFocus)
+    document.addEventListener('visibilitychange', handleVisibility)
+    return () => {
+      window.removeEventListener('focus', handleFocus)
+      document.removeEventListener('visibilitychange', handleVisibility)
+    }
+  }, [canViewPage, fetchPlanData])
+
+  if (canViewPage !== true) {
+    return null
+  }
+
+  async function handleCheckout() {
+    setPaying(true)
+    setError(null)
+    try {
+      if (provider === 'AMANPAY' && !providerAvailability.amanpay) throw new Error(copy.providerUnavailable)
+      if (provider === 'PAYPAL' && !providerAvailability.paypal) throw new Error(copy.providerUnavailable)
+      const currentUrl = new URL(window.location.href)
+      currentUrl.search = ''
+      currentUrl.hash = ''
+      const result = await apiFetch<{ checkoutUrl: string }>('/subscriptions/checkout', {
+        method: 'POST',
+        body: JSON.stringify({
+          plan: selectedPlan,
+          billingPeriod,
+          currency,
+          provider,
+          successUrl: `${currentUrl.toString()}?payment=success`,
+          failureUrl: `${currentUrl.toString()}?payment=failed`,
+        }),
+      })
+      window.location.href = result.checkoutUrl
+    } catch (err: any) {
+      setError(err.message)
+      setPaying(false)
+    }
+  }
+
+  async function handleCancel() {
+    setCancelling(true)
+    setError(null)
+    try {
+      const sub = await apiFetch<Subscription>('/subscriptions/cancel', { method: 'POST' })
+      setSubscription(sub)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setCancelling(false)
+    }
+  }
+
+  async function handleResume() {
+    setCancelling(true)
+    setError(null)
+    try {
+      const sub = await apiFetch<Subscription>('/subscriptions/resume', { method: 'POST' })
+      setSubscription(sub)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setCancelling(false)
+    }
+  }
+
+  const planPrice = planPrices[selectedPlan]?.[billingPeriod]?.[currency]
+  const daysLeft = subscription?.trialEndAt
+    ? Math.ceil((new Date(subscription.trialEndAt).getTime() - Date.now()) / 86400000)
+    : null
+
+  return (
+    <div className="space-y-8">
+      <div className="rdg-page-heading">
+        <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+        <p className="text-sm text-slate-500 mt-1">{copy.subtitle}</p>
+      </div>
+
+      {error && (
+        <div className="card p-4 border-red-200 bg-red-50 text-sm text-red-700">{error}</div>
+      )}
+
+      {/* Trial banner */}
+      {subscription?.status === 'TRIALING' && daysLeft !== null && daysLeft > 0 && (
+        <div className="card p-4 border-sky-200 bg-sky-50 flex items-center justify-between">
+          <p className="text-sm font-medium text-sky-800">
+            {copy.trial} — <strong>{daysLeft} days</strong> {copy.remaining}
+          </p>
+        </div>
+      )}
+
+      {/* Current plan */}
+      {subscription && (
+        <div className="card p-6">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.currentPlan}</p>
+              <div className="mt-1 flex items-center gap-3">
+                <h3 className="text-2xl font-bold text-slate-900">{subscription.plan}</h3>
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[subscription.status] ?? 'bg-slate-100 text-slate-600'}`}>
+                  {copy.statusLabels[subscription.status] ?? subscription.status}
+                </span>
+              </div>
+              <p className="mt-1 text-sm text-slate-500">
+                {subscription.billingPeriod} · {subscription.currency}
+                {subscription.currentPeriodEnd && ` · ${copy.renews} ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
+              </p>
+              {subscription.cancelAtPeriodEnd && (
+                <p className="mt-2 text-sm font-medium text-orange-700">
+                  {copy.cancelScheduled}{' '}
+                  <button onClick={handleResume} disabled={cancelling} className="underline">{copy.undo}</button>
+                </p>
+              )}
+            </div>
+            {!subscription.cancelAtPeriodEnd && (
+              <button
+                onClick={handleCancel}
+                disabled={cancelling}
+                className="btn-secondary text-red-600 border-red-200 hover:bg-red-50 text-sm"
+              >
+                {cancelling ? copy.cancelling : copy.cancelPlan}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Plan selector + checkout */}
+      <div className="card p-6 space-y-6">
+        {!providerAvailability.amanpay && !providerAvailability.paypal ? (
+          <div className="rounded-xl border border-orange-200 bg-orange-50 px-4 py-3 text-sm text-orange-700">
+            {copy.noProviderConfigured}
+          </div>
+        ) : null}
+        <div>
+          <h3 className="text-base font-semibold text-slate-900">
+            {subscription?.status === 'ACTIVE' ? copy.changePlan : copy.subscribe}
+          </h3>
+          <p className="mt-1 text-sm text-slate-500">{copy.selectPlan}</p>
+        </div>
+
+        {/* Billing period toggle */}
+        <div className="flex items-center gap-2">
+          {(['MONTHLY', 'ANNUAL'] as BillingPeriod[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => setBillingPeriod(p)}
+              className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                billingPeriod === p ? 'bg-blue-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+              }`}
+            >
+              {p === 'MONTHLY' ? copy.monthly : copy.annual}
+            </button>
+          ))}
+        </div>
+
+        {/* Plan cards */}
+        <div className="grid gap-4 md:grid-cols-3">
+          {PLANS.map((plan) => {
+            const price = planPrices[plan]?.[billingPeriod]?.[currency]
+            const isActive = subscription?.plan === plan && subscription?.status === 'ACTIVE'
+            const features = planFeaturesList.filter((f) => f.plan === plan)
+            return (
+              <button
+                key={plan}
+                onClick={() => setSelectedPlan(plan)}
+                className={`text-left p-5 rounded-xl border-2 transition-all ${
+                  selectedPlan === plan
+                    ? 'border-blue-500 bg-blue-50/50'
+                    : 'border-slate-200 hover:border-slate-300 bg-white'
+                } ${isActive ? 'ring-2 ring-green-200' : ''}`}
+              >
+                <div className="flex items-center justify-between">
+                  <p className="font-semibold text-slate-900">{plan}</p>
+                  {isActive && <span className="badge-green">{copy.active}</span>}
+                </div>
+                <p className="mt-2 text-2xl font-black text-slate-900">
+                  {price ? formatCurrency(price, 'MAD') : '—'}
+                  <span className="text-sm font-normal text-slate-500">/{billingPeriod === 'MONTHLY' ? copy.perMonthShort : copy.perYearShort}</span>
+                </p>
+                <ul className="mt-3 space-y-1">
+                  {features.length > 0
+                    ? features.map((f) => (
+                        <li key={f.id} className="text-xs text-slate-600 flex items-center gap-1.5">
+                          <span className="text-green-500">✓</span> {f.label}
+                        </li>
+                      ))
+                    : copy.planFeatures[plan].map((f) => (
+                        <li key={f} className="text-xs text-slate-600 flex items-center gap-1.5">
+                          <span className="text-green-500">✓</span> {f}
+                        </li>
+                      ))}
+                </ul>
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Provider selector */}
+        <div>
+          <p className="text-sm font-medium text-slate-700 mb-2">{copy.paymentProvider}</p>
+          <div className="flex gap-3">
+            {providerAvailability.amanpay ? (
+              <button
+                onClick={() => setProvider('AMANPAY')}
+                className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 text-sm font-medium transition-all ${
+                  provider === 'AMANPAY' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-600 hover:border-slate-300'
+                }`}
+              >
+                🏦 AmanPay
+              </button>
+            ) : null}
+            {providerAvailability.paypal ? (
+              <button
+                onClick={() => setProvider('PAYPAL')}
+                className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 text-sm font-medium transition-all ${
+                  provider === 'PAYPAL' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-600 hover:border-slate-300'
+                }`}
+              >
+                🔵 PayPal
+              </button>
+            ) : null}
+          </div>
+        </div>
+
+        {/* Checkout CTA */}
+        <div className="flex items-center justify-between pt-2 border-t border-slate-100">
+          <div>
+            <p className="text-sm text-slate-500">{copy.total}</p>
+            <p className="text-xl font-black text-slate-900">
+              {planPrice ? formatCurrency(planPrice, 'MAD') : '—'}
+              <span className="text-sm font-normal text-slate-500 ml-1">/{billingPeriod === 'MONTHLY' ? copy.perMonth : copy.perYear}</span>
+            </p>
+          </div>
+          <button
+            onClick={handleCheckout}
+            disabled={paying || loading || (!providerAvailability.amanpay && !providerAvailability.paypal)}
+            className="btn-primary px-8 py-3"
+          >
+            {paying ? copy.redirecting : subscription?.status === 'ACTIVE' ? copy.changePlan : copy.subscribeNow}
+          </button>
+        </div>
+      </div>
+
+      {/* Invoice history */}
+      <div className="card overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-200">
+          <h3 className="text-base font-semibold text-slate-900">{copy.invoiceHistory}</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-slate-50 border-b border-slate-200">
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.date}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.provider}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.status}</th>
+                <th className="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.paid}</th>
+                <th className="text-right px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wide">{copy.amount}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {loading ? (
+                <tr><td colSpan={5} className="px-6 py-10 text-center text-sm text-slate-400">{copy.loading}</td></tr>
+              ) : invoices.length === 0 ? (
+                <tr><td colSpan={5} className="px-6 py-10 text-center text-sm text-slate-400">{copy.noInvoices}</td></tr>
+              ) : invoices.map((inv) => (
+                <tr key={inv.id}>
+                  <td className="px-6 py-4 text-sm text-slate-700">{new Date(inv.createdAt).toLocaleDateString()}</td>
+                  <td className="px-6 py-4 text-sm text-slate-700">{inv.paymentProvider}</td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${INVOICE_STATUS[inv.status] ?? 'bg-slate-100 text-slate-600'}`}>
+                      {copy.invoiceStatusLabels[inv.status] ?? inv.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-slate-500">
+                    {inv.paidAt ? new Date(inv.paidAt).toLocaleDateString() : '—'}
+                  </td>
+                  <td className="px-6 py-4 text-right text-sm font-semibold text-slate-900">
+                    {formatCurrency(inv.amount, 'MAD')}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(dashboard)/team/page.tsx b/dashboard/src/app/(dashboard)/team/page.tsx
new file mode 100644
index 0000000..e27ac03
--- /dev/null
+++ b/dashboard/src/app/(dashboard)/team/page.tsx
@@ -0,0 +1,440 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import InviteModal from '@/components/team/InviteModal'
+import EditMemberModal from '@/components/team/EditMemberModal'
+import PermissionsMatrix from '@/components/team/PermissionsMatrix'
+import { apiFetch } from '@/lib/api'
+import { useTeam, TeamMember, InvitePayload } from '@/hooks/useTeam'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+function initials(m: TeamMember) {
+  return (m.firstName[0] ?? '') + (m.lastName[0] ?? '')
+}
+
+function timeAgo(dateStr: string | null, language: 'en' | 'fr' | 'ar') {
+  if (!dateStr) {
+    return language === 'fr' ? 'Jamais' : language === 'ar' ? 'أبداً' : 'Never'
+  }
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 2) {
+    return language === 'fr' ? "À l'instant" : language === 'ar' ? 'الآن' : 'Just now'
+  }
+  if (mins < 60) {
+    return language === 'fr' ? `il y a ${mins} min` : language === 'ar' ? `منذ ${mins} دقيقة` : `${mins}m ago`
+  }
+  const hrs = Math.floor(mins / 60)
+  if (hrs < 24) {
+    return language === 'fr' ? `il y a ${hrs}h` : language === 'ar' ? `منذ ${hrs} ساعة` : `${hrs}h ago`
+  }
+  const days = Math.floor(hrs / 24)
+  if (days < 30) {
+    return language === 'fr' ? `il y a ${days}j` : language === 'ar' ? `منذ ${days} يوم` : `${days}d ago`
+  }
+  const locale = language === 'fr' ? 'fr' : language === 'ar' ? 'ar' : 'en'
+  return new Date(dateStr).toLocaleDateString(locale, { month: 'short', day: 'numeric' })
+}
+
+const AVATAR_BG: string[] = [
+  'bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300',
+  'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
+  'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
+  'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300',
+  'bg-pink-100 dark:bg-pink-900/40 text-pink-700 dark:text-pink-300',
+]
+
+function avatarColor(id: string) {
+  const hash = id.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0)
+  return AVATAR_BG[hash % AVATAR_BG.length]
+}
+
+const roleLabels: Record<string, Record<'en' | 'fr' | 'ar', string>> = {
+  OWNER:   { en: 'Owner',   fr: 'Propriétaire', ar: 'مالك' },
+  MANAGER: { en: 'Manager', fr: 'Manager',       ar: 'مدير' },
+  AGENT:   { en: 'Agent',   fr: 'Agent',         ar: 'وكيل' },
+}
+
+function RoleBadge({ role, language }: { role: string; language: 'en' | 'fr' | 'ar' }) {
+  const styles: Record<string, string> = {
+    OWNER:   'bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 border-violet-100 dark:border-violet-900/50',
+    MANAGER: 'bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 border-blue-100 dark:border-blue-900/50',
+    AGENT:   'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700',
+  }
+  const label = roleLabels[role]?.[language] ?? (role.charAt(0) + role.slice(1).toLowerCase())
+  return (
+    <span className={`text-xs px-2 py-0.5 rounded-full border font-medium ${styles[role] ?? styles.AGENT}`}>
+      {label}
+    </span>
+  )
+}
+
+function StatusBadge({ member, language }: { member: TeamMember; language: 'en' | 'fr' | 'ar' }) {
+  if (member.invitationStatus === 'pending') {
+    return (
+      <span className="text-xs px-2 py-0.5 rounded-full border bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-400 border-orange-100 dark:border-orange-900/50">
+        {language === 'fr' ? 'Invitation en attente' : language === 'ar' ? 'دعوة قيد الانتظار' : 'Pending invite'}
+      </span>
+    )
+  }
+  if (!member.isActive) {
+    return (
+      <span className="text-xs px-2 py-0.5 rounded-full border bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700">
+        {language === 'fr' ? 'Désactivé' : language === 'ar' ? 'معطل' : 'Deactivated'}
+      </span>
+    )
+  }
+  return (
+    <span className="text-xs px-2 py-0.5 rounded-full border bg-green-50 dark:bg-green-950/30 text-green-700 dark:text-green-400 border-green-100 dark:border-green-900/50">
+      {language === 'fr' ? 'Actif' : language === 'ar' ? 'نشط' : 'Active'}
+    </span>
+  )
+}
+
+export default function TeamPage() {
+  const { language } = useDashboardI18n()
+  const copy = {
+    en: {
+      title: 'Team',
+      subtitle: 'Manage your employees and their access levels',
+      inviteMember: 'Invite member',
+      totalMembers: 'Total members',
+      active: 'Active',
+      pendingInvite: 'Pending invite',
+      deactivated: 'Deactivated',
+      search: 'Search by name or email…',
+      allRoles: 'All roles',
+      owner: 'Owner',
+      manager: 'Manager',
+      agent: 'Agent',
+      allStatuses: 'All statuses',
+      pending: 'Pending',
+      loadingTeam: 'Loading team…',
+      noMembers: 'No members match your filters',
+      member: 'Member',
+      role: 'Role',
+      status: 'Status',
+      lastActive: 'Last active',
+      manage: 'Manage',
+      inviteSent: 'Invite sent to',
+      roleUpdated: 'Role updated',
+      memberDeactivated: 'Member deactivated',
+      memberReactivated: 'Member reactivated',
+      memberRemoved: 'Member removed',
+      you: '(you)',
+    },
+    fr: {
+      title: 'Équipe',
+      subtitle: "Gérez vos employés et leurs niveaux d'accès",
+      inviteMember: 'Inviter un membre',
+      totalMembers: 'Total membres',
+      active: 'Actif',
+      pendingInvite: 'Invitation en attente',
+      deactivated: 'Désactivé',
+      search: 'Rechercher par nom ou email…',
+      allRoles: 'Tous les rôles',
+      owner: 'Propriétaire',
+      manager: 'Manager',
+      agent: 'Agent',
+      allStatuses: 'Tous les statuts',
+      pending: 'En attente',
+      loadingTeam: "Chargement de l'équipe…",
+      noMembers: 'Aucun membre ne correspond aux filtres',
+      member: 'Membre',
+      role: 'Rôle',
+      status: 'Statut',
+      lastActive: 'Dernière activité',
+      manage: 'Gérer',
+      inviteSent: 'Invitation envoyée à',
+      roleUpdated: 'Rôle mis à jour',
+      memberDeactivated: 'Membre désactivé',
+      memberReactivated: 'Membre réactivé',
+      memberRemoved: 'Membre supprimé',
+      you: '(vous)',
+    },
+    ar: {
+      title: 'الفريق',
+      subtitle: 'إدارة الموظفين ومستويات الوصول الخاصة بهم',
+      inviteMember: 'دعوة عضو',
+      totalMembers: 'إجمالي الأعضاء',
+      active: 'نشط',
+      pendingInvite: 'دعوة قيد الانتظار',
+      deactivated: 'معطل',
+      search: 'ابحث بالاسم أو البريد الإلكتروني…',
+      allRoles: 'كل الأدوار',
+      owner: 'مالك',
+      manager: 'مدير',
+      agent: 'وكيل',
+      allStatuses: 'كل الحالات',
+      pending: 'قيد الانتظار',
+      loadingTeam: 'جارٍ تحميل الفريق…',
+      noMembers: 'لا يوجد أعضاء مطابقون للفلاتر',
+      member: 'العضو',
+      role: 'الدور',
+      status: 'الحالة',
+      lastActive: 'آخر نشاط',
+      manage: 'إدارة',
+      inviteSent: 'تم إرسال الدعوة إلى',
+      roleUpdated: 'تم تحديث الدور',
+      memberDeactivated: 'تم تعطيل العضو',
+      memberReactivated: 'تمت إعادة تفعيل العضو',
+      memberRemoved: 'تم حذف العضو',
+      you: '(أنت)',
+    },
+  }[language]
+  const { members, stats, loading, error, invite, updateRole, deactivate, reactivate, remove } = useTeam()
+  const [currentEmployeeId, setCurrentEmployeeId] = useState<string | null>(null)
+
+  const [search, setSearch] = useState('')
+  const [roleFilter, setRoleFilter] = useState<string>('')
+  const [statusFilter, setStatusFilter] = useState<string>('')
+  const [inviteOpen, setInviteOpen] = useState(false)
+  const [editTarget, setEditTarget] = useState<TeamMember | null>(null)
+  const [toast, setToast] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    apiFetch<{ employee: { id: string } }>('/auth/employee/me')
+      .then(({ employee }) => {
+        if (!cancelled) setCurrentEmployeeId(employee.id)
+      })
+      .catch(() => {
+        if (!cancelled) setCurrentEmployeeId(null)
+      })
+
+    return () => { cancelled = true }
+  }, [])
+
+  const currentEmployee = members.find((member) => member.id === currentEmployeeId)
+  const isOwner = currentEmployee?.role === 'OWNER'
+
+  function showToast(msg: string) {
+    setToast(msg)
+    setTimeout(() => setToast(null), 3000)
+  }
+
+  const filtered = useMemo(() => {
+    return members.filter((m) => {
+      const q = search.toLowerCase()
+      const matchQ = !q ||
+        `${m.firstName} ${m.lastName}`.toLowerCase().includes(q) ||
+        m.email.toLowerCase().includes(q)
+      const matchRole = !roleFilter || m.role === roleFilter
+      const matchStatus =
+        !statusFilter ||
+        (statusFilter === 'active' && m.isActive && m.invitationStatus === 'accepted') ||
+        (statusFilter === 'pending' && m.invitationStatus === 'pending') ||
+        (statusFilter === 'inactive' && !m.isActive && m.invitationStatus === 'accepted')
+      return matchQ && matchRole && matchStatus
+    })
+  }, [members, search, roleFilter, statusFilter])
+
+  const handleInvite = async (payload: InvitePayload) => {
+    await invite(payload)
+    showToast(`${copy.inviteSent} ${payload.email}`)
+  }
+
+  const handleUpdateRole = async (id: string, role: 'MANAGER' | 'AGENT') => {
+    await updateRole(id, role)
+    showToast(copy.roleUpdated)
+  }
+
+  const handleDeactivate = async (id: string) => {
+    await deactivate(id)
+    showToast(copy.memberDeactivated)
+  }
+
+  const handleReactivate = async (id: string) => {
+    await reactivate(id)
+    showToast(copy.memberReactivated)
+  }
+
+  const handleRemove = async (id: string) => {
+    await remove(id)
+    showToast(copy.memberRemoved)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rdg-page-heading mb-6 flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-medium text-zinc-900 dark:text-white">{copy.title}</h1>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
+            {copy.subtitle}
+          </p>
+        </div>
+        {isOwner && (
+          <button
+            onClick={() => setInviteOpen(true)}
+            className="flex items-center gap-1.5 px-4 py-2 text-sm bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16">
+              <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+            {copy.inviteMember}
+          </button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
+        {[
+          { label: copy.totalMembers, value: stats.total },
+          { label: copy.active,        value: stats.active },
+          { label: copy.pendingInvite, value: stats.pending },
+          { label: copy.deactivated,   value: stats.inactive },
+        ].map((s) => (
+          <div
+            key={s.label}
+            className="bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-4 flex flex-col gap-1"
+          >
+            <span className="text-xs text-zinc-500 dark:text-zinc-400">{s.label}</span>
+            <span className="text-2xl font-medium text-zinc-900 dark:text-white">{s.value}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        <div className="relative flex-1 min-w-48">
+          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-400" fill="none" viewBox="0 0 14 14">
+            <circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.2" />
+            <path d="M10 10L13 13" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+          </svg>
+          <input
+            type="text"
+            placeholder={copy.search}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-8 pr-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white focus:border-transparent"
+          />
+        </div>
+        <select
+          value={roleFilter}
+          onChange={(e) => setRoleFilter(e.target.value)}
+          className="px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white"
+        >
+          <option value="">{copy.allRoles}</option>
+          <option value="OWNER">{copy.owner}</option>
+          <option value="MANAGER">{copy.manager}</option>
+          <option value="AGENT">{copy.agent}</option>
+        </select>
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white"
+        >
+          <option value="">{copy.allStatuses}</option>
+          <option value="active">{copy.active}</option>
+          <option value="pending">{copy.pending}</option>
+          <option value="inactive">{copy.deactivated}</option>
+        </select>
+      </div>
+
+      <div className="border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden mb-10">
+        {loading ? (
+          <div className="py-16 flex flex-col items-center gap-2 text-zinc-400">
+            <div className="w-5 h-5 border-2 border-zinc-200 dark:border-zinc-700 border-t-zinc-500 rounded-full animate-spin" />
+            <span className="text-sm">{copy.loadingTeam}</span>
+          </div>
+        ) : error ? (
+          <div className="py-12 text-center text-sm text-red-500">{error}</div>
+        ) : filtered.length === 0 ? (
+          <div className="py-16 text-center">
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">{copy.noMembers}</p>
+          </div>
+        ) : (
+          <table className="w-full">
+            <thead>
+              <tr className="bg-zinc-50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-700">
+                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{copy.member}</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{copy.role}</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{copy.status}</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide hidden sm:table-cell">{copy.lastActive}</th>
+                <th className="px-4 py-3" />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((member) => (
+                <tr
+                  key={member.id}
+                  className={[
+                    'border-b border-zinc-100 dark:border-zinc-800 last:border-0',
+                    'hover:bg-zinc-50 dark:hover:bg-zinc-800/30 transition-colors',
+                  ].join(' ')}
+                >
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 ${avatarColor(member.id)}`}>
+                        {initials(member)}
+                      </div>
+                      <div>
+                        <div className="text-sm font-medium text-zinc-900 dark:text-white">
+                          {member.firstName} {member.lastName}
+                          {member.id === currentEmployeeId && (
+                            <span className="ml-1.5 text-[10px] text-zinc-400">{copy.you}</span>
+                          )}
+                        </div>
+                        <div className="text-xs text-zinc-500 dark:text-zinc-400">{member.email}</div>
+                      </div>
+                    </div>
+                  </td>
+
+                  <td className="px-4 py-3">
+                    <RoleBadge role={member.role} language={language} />
+                  </td>
+
+                  <td className="px-4 py-3">
+                    <StatusBadge member={member} language={language} />
+                  </td>
+
+                  <td className="px-4 py-3 hidden sm:table-cell">
+                    <span className="text-xs text-zinc-400 dark:text-zinc-500">
+                      {member.invitationStatus === 'pending' ? '—' : timeAgo(member.lastActiveAt, language)}
+                    </span>
+                  </td>
+
+                  <td className="px-4 py-3 text-right">
+                    {isOwner && member.role !== 'OWNER' && (
+                      <button
+                        onClick={() => setEditTarget(member)}
+                        className="text-xs px-3 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
+                      >
+                        {copy.manage}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <PermissionsMatrix />
+
+      <InviteModal
+        open={inviteOpen}
+        onClose={() => setInviteOpen(false)}
+        onInvite={handleInvite}
+      />
+      <EditMemberModal
+        member={editTarget}
+        open={!!editTarget}
+        onClose={() => setEditTarget(null)}
+        onUpdateRole={handleUpdateRole}
+        onDeactivate={handleDeactivate}
+        onReactivate={handleReactivate}
+        onRemove={handleRemove}
+      />
+
+      {toast && (
+        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-2.5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-xl shadow-lg text-sm font-medium animate-in slide-in-from-bottom-2 duration-200">
+          <svg className="w-4 h-4 text-green-400 dark:text-green-600" fill="none" viewBox="0 0 16 16">
+            <path d="M3 8L6.5 11.5L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          {toast}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(public)/layout.tsx b/dashboard/src/app/(public)/layout.tsx
new file mode 100644
index 0000000..572946d
--- /dev/null
+++ b/dashboard/src/app/(public)/layout.tsx
@@ -0,0 +1,3 @@
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  return children
+}
diff --git a/dashboard/src/app/globals.css b/dashboard/src/app/globals.css
new file mode 100644
index 0000000..dbaa9e1
--- /dev/null
+++ b/dashboard/src/app/globals.css
@@ -0,0 +1,1342 @@
+@import "../styles/phase16-tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html.light {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+:root {
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --accent: #f97316;
+  --sidebar-bg: #0a1128;
+  --sidebar-text: #94a3b8;
+  --sidebar-active: #ffffff;
+
+  --bg-elevated: rgb(255 255 255 / 0.82);
+  --border-accent: rgb(231 229 228 / 0.8);
+  --glass-bg: rgb(255 255 255 / 0.72);
+  --shadow-card: 0 30px 80px rgba(28, 25, 23, 0.08);
+  --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.15);
+}
+
+html.dark {
+  --bg-elevated: rgb(11 25 55 / 0.78);
+  --border-accent: rgb(30 60 140 / 0.40);
+  --glass-bg: rgb(11 25 55 / 0.65);
+  --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.36);
+  --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.25);
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
+    background-image:
+      linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold;
+  }
+}
+
+html.dark body {
+  background-image:
+    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+}
+
+@layer components {
+  .fleet-dashboard-shell {
+    --fleet-bg-primary: #f5f8ff;
+    --fleet-bg-elevated: #ffffff;
+    --fleet-glass-bg: rgb(255 255 255 / 0.82);
+    --fleet-card-bg: rgb(255 255 255 / 0.72);
+    --fleet-border-subtle: rgb(37 99 235 / 0.14);
+    --fleet-border-accent: rgb(249 115 22 / 0.30);
+    --fleet-text-primary: #172554;
+    --fleet-text-secondary: #64748b;
+    --fleet-accent-blue: #2563eb;
+    --fleet-accent-blue-light: #2563eb;
+    --fleet-accent-orange: #f97316;
+    --fleet-accent-orange-light: #ea580c;
+    --fleet-success: #059669;
+    --fleet-danger: #dc2626;
+    background:
+      radial-gradient(ellipse at 20% 20%, rgb(37 99 235 / 0.10) 0%, transparent 56%),
+      radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 54%),
+      linear-gradient(180deg, #ffffff 0%, #f5f8ff 35%, #edf4ff 100%);
+    color: var(--fleet-text-primary);
+  }
+
+  html.dark .fleet-dashboard-shell {
+    --fleet-bg-primary: #0a0f1a;
+    --fleet-bg-elevated: #111827;
+    --fleet-glass-bg: rgb(15 25 45 / 0.66);
+    --fleet-card-bg: rgb(30 58 95 / 0.28);
+    --fleet-border-subtle: rgb(59 130 246 / 0.14);
+    --fleet-text-primary: #e8edf5;
+    --fleet-text-secondary: #8899b4;
+    --fleet-accent-blue: #3b82f6;
+    --fleet-accent-blue-light: #60a5fa;
+    --fleet-accent-orange-light: #fb923c;
+    --fleet-success: #10b981;
+    --fleet-danger: #ef4444;
+    background:
+      radial-gradient(ellipse at 20% 20%, rgb(59 130 246 / 0.09) 0%, transparent 58%),
+      radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 56%),
+      linear-gradient(180deg, #0a0f1a 0%, #0d1728 46%, #08111f 100%);
+  }
+
+  .fleet-dashboard-shell * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(59 130 246 / 0.22) transparent;
+  }
+
+  .fleet-dashboard-shell *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .fleet-dashboard-shell *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .fleet-dashboard-shell *::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgb(59 130 246 / 0.22);
+  }
+
+  .fleet-dashboard-shell .card,
+  .fleet-dashboard-shell .glass-card {
+    border-color: var(--fleet-border-subtle);
+    background: var(--fleet-glass-bg);
+    box-shadow: 0 18px 60px rgb(15 23 42 / 0.08);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    @apply rounded-xl border transition-colors;
+  }
+
+  .fleet-dashboard-shell .card:hover,
+  .fleet-dashboard-shell .glass-card:hover {
+    border-color: rgb(59 130 246 / 0.24);
+    box-shadow: 0 18px 60px rgb(15 23 42 / 0.10), 0 0 20px rgb(59 130 246 / 0.10);
+  }
+
+  html.dark .fleet-dashboard-shell .card,
+  html.dark .fleet-dashboard-shell .glass-card {
+    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26);
+  }
+
+  html.dark .fleet-dashboard-shell .card:hover,
+  html.dark .fleet-dashboard-shell .glass-card:hover {
+    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26), 0 0 20px rgb(59 130 246 / 0.12);
+  }
+
+  .fleet-dashboard-shell .btn-primary {
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgb(59 130 246 / 0.30);
+    @apply rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white hover:from-blue-400 hover:to-blue-600;
+  }
+
+  .fleet-dashboard-shell .btn-secondary {
+    border-color: rgb(59 130 246 / 0.18);
+    background: rgb(59 130 246 / 0.08);
+    color: var(--fleet-text-primary);
+    @apply rounded-lg hover:border-blue-400/40 hover:bg-blue-500/15 hover:text-white;
+  }
+
+  .fleet-dashboard-shell .input-field {
+    border-color: rgb(59 130 246 / 0.14);
+    background: rgb(59 130 246 / 0.07);
+    color: var(--fleet-text-primary);
+    @apply rounded-lg placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/20;
+  }
+
+  .fleet-dashboard-shell .progress-bar {
+    height: 6px;
+    background: rgb(59 130 246 / 0.12);
+    @apply rounded-full;
+  }
+
+  .fleet-dashboard-shell .progress-fill.blue {
+    @apply bg-gradient-to-r from-blue-500 to-blue-400;
+  }
+
+  .fleet-dashboard-shell .progress-fill.orange {
+    @apply bg-gradient-to-r from-orange-500 to-orange-600;
+  }
+
+  .fleet-dashboard-shell .badge-blue {
+    border: 1px solid rgb(59 130 246 / 0.30);
+    background: rgb(59 130 246 / 0.15);
+    color: var(--fleet-accent-blue-light);
+  }
+
+  .fleet-dashboard-shell .badge-amber {
+    border: 1px solid rgb(249 115 22 / 0.30);
+    background: rgb(249 115 22 / 0.15);
+    color: var(--fleet-accent-orange-light);
+  }
+
+  .fleet-dashboard-shell .badge-green {
+    border: 1px solid rgb(16 185 129 / 0.28);
+    background: rgb(16 185 129 / 0.13);
+    color: #047857;
+  }
+
+  .fleet-dashboard-shell .badge-red {
+    border: 1px solid rgb(239 68 68 / 0.30);
+    background: rgb(239 68 68 / 0.13);
+    color: #dc2626;
+  }
+
+  .fleet-dashboard-shell .badge-gray {
+    border: 1px solid rgb(148 163 184 / 0.20);
+    background: rgb(148 163 184 / 0.10);
+    color: #475569;
+  }
+
+  html.dark .fleet-dashboard-shell .badge-green {
+    color: #6ee7b7;
+  }
+
+  html.dark .fleet-dashboard-shell .badge-red {
+    color: #fca5a5;
+  }
+
+  html.dark .fleet-dashboard-shell .badge-gray {
+    color: #cbd5e1;
+  }
+
+  .glass-card {
+    border-color: var(--border-accent);
+    background-color: var(--glass-bg);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    @apply rounded-[1.75rem] border transition-colors;
+  }
+
+  html.dark .glass-card {
+    border-color: rgb(30 60 140 / 0.40);
+    background-color: rgb(11 25 55 / 0.65);
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
+  }
+
+  .progress-bar {
+    @apply h-2 w-full overflow-hidden rounded-full;
+    background-color: rgb(231 229 228 / 0.5);
+  }
+
+  html.dark .progress-bar {
+    background-color: rgb(30 60 140 / 0.3);
+  }
+
+  .progress-fill {
+    @apply h-full rounded-full transition-all duration-500;
+  }
+
+  .progress-fill.blue {
+    @apply bg-gradient-to-r from-blue-500 to-blue-400;
+  }
+
+  .progress-fill.orange {
+    @apply bg-gradient-to-r from-orange-500 to-orange-400;
+  }
+
+  html.dark .progress-fill.blue {
+    @apply bg-gradient-to-r from-blue-400 to-blue-300;
+  }
+
+  html.dark .progress-fill.orange {
+    @apply bg-gradient-to-r from-orange-400 to-orange-300;
+  }
+
+  /* Pulse glow animation for live indicators */
+  @keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.3); }
+    50% { box-shadow: 0 0 12px rgba(249, 115, 22, 0.6); }
+  }
+
+  .pulse-glow {
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pulse-glow,
+    .progress-fill {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center gap-2 rounded-full bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-orange-500 dark:hover:bg-orange-400;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center gap-2 rounded-full border border-stone-300 bg-white/85 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/20 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center gap-2 rounded-full bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50;
+  }
+
+  .input-field {
+    @apply w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-900 dark:bg-blue-950/50 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-orange-400;
+  }
+
+  .card {
+    @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
+    border-color: rgb(231 229 228 / 0.8);
+    background-color: rgb(255 255 255 / 0.82);
+  }
+
+  html.dark .card {
+    border-color: rgb(30 60 140 / 0.40);
+    background-color: rgb(11 25 55 / 0.72);
+  }
+
+  .badge-green {
+    @apply inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300;
+  }
+
+  .badge-blue {
+    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950/40 dark:text-blue-300;
+  }
+
+  .badge-amber {
+    @apply inline-flex items-center rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300;
+  }
+
+  .badge-red {
+    @apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-950/40 dark:text-red-300;
+  }
+
+  .badge-gray {
+    @apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-blue-950/40 dark:text-slate-300;
+  }
+
+  .badge-purple {
+    @apply inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300;
+  }
+
+  .badge-indigo {
+    @apply inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300;
+  }
+}
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 10mm 12mm;
+  }
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+
+@layer utilities {
+  .dark .bg-slate-50 {
+    background-color: rgb(7 16 46);
+  }
+
+  .dark .bg-white {
+    background-color: rgb(11 25 55);
+  }
+
+  .dark .bg-white\/90 {
+    background-color: rgb(11 25 55 / 0.9);
+  }
+
+  .dark .border-slate-200,
+  .dark .border-stone-200 {
+    border-color: rgb(30 60 140 / 0.50);
+  }
+
+  .dark .text-slate-900 {
+    color: rgb(241 245 249);
+  }
+
+  .dark .text-slate-700 {
+    color: rgb(203 213 225);
+  }
+
+  .dark .text-slate-600,
+  .dark .text-stone-500 {
+    color: rgb(148 163 184);
+  }
+
+  .dark .text-slate-500,
+  .dark .text-slate-400,
+  .dark .text-stone-400 {
+    color: rgb(100 116 139);
+  }
+
+  .dark .hover\:bg-slate-100:hover {
+    background-color: rgb(20 42 90);
+  }
+
+  .dark .hover\:text-slate-900:hover {
+    color: rgb(241 245 249);
+  }
+}
+
+/* Phase 16 operational application layer */
+@layer base {
+  html {
+    min-width: 320px;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    scroll-behavior: smooth;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    font-family: var(--rdg-font-latin);
+    line-height: 1.6;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--rdg-text-primary);
+    line-height: 1.18;
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  a,
+  button,
+  input,
+  select,
+  textarea {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer components {
+  .shell {
+    width: min(100%, var(--rdg-container-max));
+  }
+
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+    box-shadow: var(--rdg-shadow-card);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+  }
+
+  .site-panel-muted {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: var(--rdg-surface-muted);
+  }
+
+  .site-panel-contrast {
+    border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
+    border-radius: var(--rdg-radius-lg);
+    background:
+      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
+      linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
+  }
+
+  .btn-primary,
+  .site-link-primary {
+    min-height: var(--rdg-touch-min);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-action-conversion);
+    color: #ffffff;
+    box-shadow: var(--rdg-shadow-subtle);
+  }
+
+  .btn-primary:hover,
+  .site-link-primary:hover {
+    background: var(--rdg-action-conversion-hover);
+  }
+
+  .btn-secondary,
+  .site-link-secondary {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border-strong);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-action-primary);
+  }
+
+  .btn-secondary:hover,
+  .site-link-secondary:hover {
+    border-color: var(--rdg-action-primary);
+    background: var(--rdg-soft-blue);
+    color: var(--rdg-action-primary-hover);
+  }
+
+  .input-field,
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  select,
+  textarea {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-text-primary);
+  }
+
+  .input-field::placeholder,
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--rdg-text-subdued);
+  }
+
+  table {
+    border-color: var(--rdg-border);
+  }
+
+  thead {
+    background: var(--rdg-surface-muted);
+    color: var(--rdg-text-secondary);
+  }
+
+  tbody tr {
+    border-color: var(--rdg-border);
+  }
+}
+
+@media (forced-colors: active) {
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel,
+  .site-panel-muted,
+  .site-panel-contrast {
+    border: 1px solid CanvasText;
+    box-shadow: none;
+  }
+}
+
+html.dark body,
+html[data-theme='dark'] body {
+  background: var(--rdg-surface-page);
+}
+
+.fleet-dashboard-shell,
+html.dark .fleet-dashboard-shell {
+  --fleet-bg-primary: var(--rdg-surface-page);
+  --fleet-bg-elevated: var(--rdg-surface-elevated);
+  --fleet-glass-bg: color-mix(in srgb, var(--rdg-surface-elevated) 90%, transparent);
+  --fleet-card-bg: var(--rdg-surface-primary);
+  --fleet-border-subtle: var(--rdg-border);
+  --fleet-border-accent: color-mix(in srgb, var(--rdg-action-conversion) 30%, var(--rdg-border));
+  --fleet-text-primary: var(--rdg-text-primary);
+  --fleet-text-secondary: var(--rdg-text-secondary);
+  --fleet-accent-blue: var(--rdg-action-primary);
+  --fleet-accent-blue-light: var(--rdg-action-primary);
+  --fleet-accent-orange: var(--rdg-action-conversion);
+  --fleet-accent-orange-light: var(--rdg-action-conversion);
+  background:
+    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--rdg-soft-blue) 84%, transparent), transparent 34%),
+    var(--rdg-surface-page);
+  color: var(--rdg-text-primary);
+}
+
+html.dark .card,
+html.dark .glass-card,
+html[data-theme='dark'] .card,
+html[data-theme='dark'] .glass-card,
+html.dark .fleet-dashboard-shell .card,
+html.dark .fleet-dashboard-shell .glass-card {
+  border-color: var(--rdg-border);
+  background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+  box-shadow: var(--rdg-shadow-card);
+}
+
+/* ==============================================================
+   Phase 16 operational shell
+   Mirrors the approved homepage system: precise blue hierarchy,
+   orange conversion accents, calm surfaces, 44px controls, true RTL,
+   and restrained depth instead of dashboard-template theatrics.
+   ============================================================== */
+
+.rdg-app-shell {
+  min-height: 100dvh;
+  color: var(--rdg-text-primary);
+  background:
+    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rdg-blue-100) 72%, transparent), transparent 30rem),
+    radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--rdg-orange-100) 48%, transparent), transparent 25rem),
+    linear-gradient(180deg, var(--rdg-surface-page), color-mix(in srgb, var(--rdg-soft-blue) 52%, var(--rdg-surface-page)) 52%, var(--rdg-surface-page));
+}
+
+html.dark .rdg-app-shell,
+html[data-theme='dark'] .rdg-app-shell {
+  background:
+    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rdg-blue-800) 22%, transparent), transparent 32rem),
+    radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--rdg-orange-700) 10%, transparent), transparent 28rem),
+    linear-gradient(180deg, var(--rdg-navy-950), #09172a 54%, var(--rdg-navy-950));
+}
+
+.rdg-workspace {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.rdg-sidebar {
+  border-color: var(--rdg-border) !important;
+  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: 10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+html[dir='rtl'] .rdg-sidebar {
+  box-shadow: -10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
+}
+
+.rdg-sidebar-brand {
+  min-height: var(--rdg-header-size);
+  border-color: var(--rdg-border) !important;
+}
+
+.rdg-brand-mark {
+  display: inline-grid;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--rdg-radius-sm);
+  background: var(--rdg-action-primary) !important;
+  color: #fff;
+  box-shadow: var(--rdg-shadow-subtle);
+}
+
+.rdg-sidebar-nav {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rdg-action-primary) 25%, transparent) transparent;
+}
+
+.rdg-nav-item {
+  position: relative;
+  min-height: var(--rdg-touch-min);
+  border: 1px solid transparent;
+  border-radius: var(--rdg-radius-sm) !important;
+  color: var(--rdg-text-secondary) !important;
+  transition:
+    color var(--rdg-duration-standard) var(--rdg-easing),
+    background var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    transform var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-nav-item:hover {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 18%, var(--rdg-border));
+  background: var(--rdg-soft-blue) !important;
+  color: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-nav-item[aria-current='page'],
+.rdg-nav-item[data-active='true'] {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 35%, var(--rdg-border));
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--rdg-action-primary) 22%, transparent) !important;
+}
+
+html.dark .rdg-nav-item[aria-current='page'],
+html.dark .rdg-nav-item[data-active='true'] {
+  color: var(--rdg-navy-950) !important;
+}
+
+.rdg-nav-item[aria-current='page'] svg,
+.rdg-nav-item[data-active='true'] svg {
+  color: inherit !important;
+}
+
+.rdg-sidebar-footer {
+  border-color: var(--rdg-border) !important;
+}
+
+.rdg-user-card {
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-md) !important;
+  background: var(--rdg-surface-muted) !important;
+}
+
+.rdg-avatar {
+  display: inline-grid;
+  min-width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  font-weight: 800;
+}
+
+.rdg-topbar {
+  position: sticky;
+  z-index: 30;
+  top: 0;
+  display: flex;
+  min-height: var(--rdg-header-size);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rdg-space-4);
+  border-bottom: 1px solid var(--rdg-border) !important;
+  background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: var(--rdg-shadow-subtle);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.rdg-topbar-title {
+  margin: 0;
+  color: var(--rdg-text-primary) !important;
+  font-size: clamp(1rem, 1.5vw, 1.2rem);
+  font-weight: 800;
+  letter-spacing: -0.015em;
+}
+
+.rdg-topbar-kicker,
+.rdg-page-kicker {
+  margin: 0;
+  color: var(--rdg-action-conversion) !important;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+html[dir='rtl'] .rdg-topbar-kicker,
+html[dir='rtl'] .rdg-page-kicker {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.rdg-system-status {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid color-mix(in srgb, var(--rdg-green-700) 22%, var(--rdg-border));
+  border-radius: var(--rdg-radius-pill);
+  padding: 0 var(--rdg-space-3);
+  background: color-mix(in srgb, var(--rdg-green-100) 64%, var(--rdg-surface-primary));
+  color: var(--rdg-green-700);
+  font-size: 0.75rem;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+html.dark .rdg-system-status {
+  background: color-mix(in srgb, var(--rdg-green-700) 16%, var(--rdg-surface-primary));
+  color: #86efac;
+}
+
+.rdg-system-status::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
+  content: '';
+}
+
+.rdg-search-field {
+  min-height: 42px !important;
+  border-color: var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: none !important;
+}
+
+.rdg-search-field:focus {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-surface-primary) !important;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 12%, transparent) !important;
+}
+
+.rdg-app-main {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: clamp(20px, 3vw, 40px);
+}
+
+.rdg-app-content {
+  width: min(100%, var(--rdg-container-max));
+  margin-inline: auto;
+}
+
+.rdg-app-content > * {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.rdg-app-content h1 {
+  color: var(--rdg-text-primary) !important;
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 850 !important;
+  letter-spacing: -0.035em;
+}
+
+.rdg-app-content h2 {
+  color: var(--rdg-text-primary) !important;
+  font-weight: 800 !important;
+  letter-spacing: -0.02em;
+}
+
+.rdg-app-content h3,
+.rdg-app-content h4 {
+  color: var(--rdg-text-primary) !important;
+  font-weight: 750 !important;
+}
+
+.rdg-app-content p {
+  color: inherit;
+}
+
+.rdg-page-hero {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--rdg-border);
+  border-radius: var(--rdg-radius-xl);
+  padding: clamp(24px, 4vw, 40px);
+  background:
+    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rdg-blue-500) 18%, transparent), transparent 38%),
+    var(--rdg-surface-elevated);
+  box-shadow: var(--rdg-shadow-card);
+}
+
+.rdg-page-hero::before {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 4px;
+  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
+  content: '';
+}
+
+.rdg-page-description {
+  max-width: 68ch;
+  color: var(--rdg-text-secondary) !important;
+  font-size: 0.98rem;
+  line-height: 1.7;
+}
+
+/* Core surfaces. These intentionally match homepage Card/StateShell geometry. */
+.rdg-app-shell .card,
+.rdg-app-shell .panel,
+.rdg-app-shell .glass-card {
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-lg) !important;
+  background: color-mix(in srgb, var(--rdg-surface-elevated) 96%, transparent) !important;
+  box-shadow: var(--rdg-shadow-card) !important;
+  color: var(--rdg-text-primary);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.rdg-app-shell a.card,
+.rdg-app-shell a.panel,
+.rdg-app-shell button.card,
+.rdg-app-shell button.panel {
+  transition:
+    transform var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    box-shadow var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-app-shell a.card:hover,
+.rdg-app-shell a.panel:hover,
+.rdg-app-shell button.card:hover,
+.rdg-app-shell button.panel:hover {
+  border-color: color-mix(in srgb, var(--rdg-action-primary) 34%, var(--rdg-border)) !important;
+  box-shadow: 0 24px 64px color-mix(in srgb, var(--rdg-shadow-color) 90%, transparent) !important;
+  transform: translateY(-2px);
+}
+
+.rdg-app-shell .card > header,
+.rdg-app-shell .panel > header {
+  border-color: var(--rdg-border) !important;
+}
+
+/* Operational actions are blue. Orange remains the conversion/focus accent. */
+.rdg-app-shell .btn-primary {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-action-primary) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  padding: 0.65rem 1rem;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+  font-weight: 750;
+  box-shadow: var(--rdg-shadow-subtle) !important;
+  transition:
+    background var(--rdg-duration-standard) var(--rdg-easing),
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    transform var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+html.dark .rdg-app-shell .btn-primary {
+  color: var(--rdg-navy-950) !important;
+}
+
+.rdg-app-shell .btn-primary:hover {
+  border-color: var(--rdg-action-primary-hover) !important;
+  background: var(--rdg-action-primary-hover) !important;
+  transform: translateY(-1px);
+}
+
+.rdg-app-shell .btn-secondary {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-border-strong) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  padding: 0.65rem 1rem;
+  background: var(--rdg-surface-primary) !important;
+  color: var(--rdg-action-primary) !important;
+  font-weight: 750;
+}
+
+.rdg-app-shell .btn-secondary:hover {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-soft-blue) !important;
+  color: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-app-shell .btn-conversion {
+  display: inline-flex;
+  min-height: var(--rdg-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--rdg-space-2);
+  border: 1px solid var(--rdg-action-conversion);
+  border-radius: var(--rdg-radius-sm);
+  padding: 0.65rem 1rem;
+  background: var(--rdg-action-conversion);
+  color: #fff;
+  font-weight: 750;
+}
+
+.rdg-app-shell .btn-conversion:hover {
+  border-color: var(--rdg-action-conversion-hover);
+  background: var(--rdg-action-conversion-hover);
+}
+
+.rdg-app-shell .btn-danger {
+  min-height: var(--rdg-touch-min);
+  border-radius: var(--rdg-radius-sm) !important;
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']),
+.rdg-app-shell select,
+.rdg-app-shell textarea,
+.rdg-app-shell .input-field {
+  min-height: var(--rdg-touch-min);
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-surface-primary) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: none;
+  transition:
+    border-color var(--rdg-duration-standard) var(--rdg-easing),
+    box-shadow var(--rdg-duration-standard) var(--rdg-easing),
+    background var(--rdg-duration-standard) var(--rdg-easing);
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):hover,
+.rdg-app-shell select:hover,
+.rdg-app-shell textarea:hover,
+.rdg-app-shell .input-field:hover {
+  border-color: var(--rdg-border-strong) !important;
+}
+
+.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
+.rdg-app-shell select:focus,
+.rdg-app-shell textarea:focus,
+.rdg-app-shell .input-field:focus {
+  border-color: var(--rdg-action-primary) !important;
+  outline: none;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 13%, transparent) !important;
+}
+
+.rdg-app-shell input::placeholder,
+.rdg-app-shell textarea::placeholder {
+  color: var(--rdg-text-subdued) !important;
+}
+
+.rdg-app-shell table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--rdg-text-primary);
+}
+
+.rdg-app-shell thead {
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-secondary) !important;
+}
+
+.rdg-app-shell th {
+  padding: 0.85rem 1.1rem;
+  font-size: 0.72rem;
+  font-weight: 800 !important;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html[dir='rtl'] .rdg-app-shell th {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.rdg-app-shell td {
+  padding: 0.95rem 1.1rem;
+  color: var(--rdg-text-secondary);
+  vertical-align: middle;
+}
+
+.rdg-app-shell tbody tr {
+  border-color: var(--rdg-border) !important;
+  transition: background var(--rdg-duration-fast) ease;
+}
+
+.rdg-app-shell tbody tr:hover {
+  background: color-mix(in srgb, var(--rdg-soft-blue) 62%, transparent) !important;
+}
+
+.rdg-app-shell .progress-bar {
+  overflow: hidden;
+  border-radius: var(--rdg-radius-pill);
+  background: var(--rdg-surface-strong) !important;
+}
+
+.rdg-app-shell .progress-fill.blue {
+  background: var(--rdg-action-primary) !important;
+}
+
+.rdg-app-shell .progress-fill.orange {
+  background: var(--rdg-action-conversion) !important;
+}
+
+.rdg-app-shell .badge-blue,
+.rdg-app-shell .badge-green,
+.rdg-app-shell .badge-amber,
+.rdg-app-shell .badge-red,
+.rdg-app-shell .badge-gray,
+.rdg-app-shell .badge-purple,
+.rdg-app-shell .badge-indigo {
+  min-height: 24px;
+  align-items: center;
+  border-radius: var(--rdg-radius-pill) !important;
+  border: 1px solid transparent;
+  padding-inline: 0.65rem;
+  font-weight: 750;
+}
+
+.rdg-app-shell .badge-blue {
+  border-color: color-mix(in srgb, var(--rdg-blue-700) 22%, transparent);
+  background: color-mix(in srgb, var(--rdg-blue-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-blue-700) !important;
+}
+
+.rdg-app-shell .badge-green {
+  border-color: color-mix(in srgb, var(--rdg-green-700) 22%, transparent);
+  background: color-mix(in srgb, var(--rdg-green-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-green-700) !important;
+}
+
+.rdg-app-shell .badge-amber {
+  border-color: color-mix(in srgb, var(--rdg-amber-800) 20%, transparent);
+  background: color-mix(in srgb, var(--rdg-amber-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-amber-800) !important;
+}
+
+.rdg-app-shell .badge-red {
+  border-color: color-mix(in srgb, var(--rdg-red-700) 20%, transparent);
+  background: color-mix(in srgb, var(--rdg-red-100) 72%, var(--rdg-surface-primary)) !important;
+  color: var(--rdg-red-700) !important;
+}
+
+.rdg-app-shell .badge-gray {
+  border-color: var(--rdg-border);
+  background: var(--rdg-surface-muted) !important;
+  color: var(--rdg-text-secondary) !important;
+}
+
+html.dark .rdg-app-shell .badge-blue { color: var(--rdg-blue-100) !important; }
+html.dark .rdg-app-shell .badge-green { color: #bbf7d0 !important; }
+html.dark .rdg-app-shell .badge-amber { color: #fde68a !important; }
+html.dark .rdg-app-shell .badge-red { color: #fecaca !important; }
+
+/* Semantic bridge for legacy utility classes still present in large pages. */
+html.light .rdg-app-shell .bg-white,
+html.light .rdg-app-shell .bg-zinc-900,
+html.light .rdg-app-shell .bg-zinc-950 {
+  background-color: var(--rdg-surface-elevated) !important;
+}
+
+html.light .rdg-app-shell .bg-slate-50,
+html.light .rdg-app-shell .bg-zinc-800 {
+  background-color: var(--rdg-surface-muted) !important;
+}
+
+html.light .rdg-app-shell .text-zinc-100,
+html.light .rdg-app-shell .text-zinc-200,
+html.light .rdg-app-shell .text-slate-900 {
+  color: var(--rdg-text-primary) !important;
+}
+
+html.light .rdg-app-shell .text-zinc-300,
+html.light .rdg-app-shell .text-zinc-400,
+html.light .rdg-app-shell .text-zinc-500,
+html.light .rdg-app-shell .text-slate-700,
+html.light .rdg-app-shell .text-slate-600,
+html.light .rdg-app-shell .text-slate-500,
+html.light .rdg-app-shell .text-stone-500 {
+  color: var(--rdg-text-secondary) !important;
+}
+
+.rdg-app-shell .border-zinc-800,
+.rdg-app-shell .border-zinc-700,
+.rdg-app-shell .border-slate-200,
+.rdg-app-shell .border-stone-200 {
+  border-color: var(--rdg-border) !important;
+}
+
+html.dark .rdg-app-shell .bg-white,
+html.dark .rdg-app-shell .bg-zinc-900,
+html.dark .rdg-app-shell .bg-zinc-950 {
+  background-color: var(--rdg-surface-elevated) !important;
+}
+
+html.dark .rdg-app-shell .bg-slate-50,
+html.dark .rdg-app-shell .bg-zinc-800 {
+  background-color: var(--rdg-surface-muted) !important;
+}
+
+html.dark .rdg-app-shell .text-zinc-100,
+html.dark .rdg-app-shell .text-zinc-200,
+html.dark .rdg-app-shell .text-slate-900 {
+  color: var(--rdg-text-primary) !important;
+}
+
+html.dark .rdg-app-shell .text-zinc-300,
+html.dark .rdg-app-shell .text-zinc-400,
+html.dark .rdg-app-shell .text-zinc-500,
+html.dark .rdg-app-shell .text-slate-700,
+html.dark .rdg-app-shell .text-slate-600,
+html.dark .rdg-app-shell .text-slate-500,
+html.dark .rdg-app-shell .text-stone-500 {
+  color: var(--rdg-text-secondary) !important;
+}
+
+/* Dialogs and overlays inherit the same surface system. */
+.rdg-app-shell [role='dialog'],
+.rdg-app-shell dialog {
+  border-color: var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-lg) !important;
+  background: var(--rdg-surface-elevated) !important;
+  color: var(--rdg-text-primary) !important;
+  box-shadow: var(--rdg-shadow-overlay) !important;
+}
+
+@media (max-width: 1023px) {
+  .rdg-app-main {
+    padding: 20px 16px 32px;
+  }
+
+  .rdg-topbar {
+    padding-inline: 16px !important;
+  }
+}
+
+@media (max-width: 639px) {
+  .rdg-app-main {
+    padding: 16px 12px 28px;
+  }
+
+  .rdg-app-content h1 {
+    font-size: 1.65rem;
+  }
+
+  .rdg-page-hero {
+    border-radius: var(--rdg-radius-lg);
+    padding: 24px 20px;
+  }
+
+  .rdg-system-status,
+  .rdg-topbar-search {
+    display: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .rdg-sidebar,
+  .rdg-topbar,
+  .rdg-app-shell .card,
+  .rdg-app-shell .panel,
+  .rdg-app-shell .glass-card,
+  .rdg-page-hero {
+    border: 1px solid CanvasText !important;
+    box-shadow: none !important;
+    backdrop-filter: none;
+  }
+}
+
+@media print {
+  .rdg-app-shell {
+    display: block !important;
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+  .rdg-app-main {
+    padding: 0 !important;
+  }
+
+  .rdg-app-shell .card,
+  .rdg-app-shell .panel,
+  .rdg-app-shell .glass-card {
+    box-shadow: none !important;
+  }
+}
+
+.rdg-quick-action {
+  min-height: var(--rdg-touch-min);
+  border: 1px solid var(--rdg-border) !important;
+  border-radius: var(--rdg-radius-sm) !important;
+  background: var(--rdg-surface-primary) !important;
+  color: var(--rdg-action-primary) !important;
+  font-weight: 750;
+  box-shadow: var(--rdg-shadow-subtle);
+}
+
+.rdg-quick-action:hover {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-soft-blue) !important;
+  color: var(--rdg-action-primary-hover) !important;
+  transform: translateY(-1px);
+}
+
+/* Normalize direct utility-colored operational buttons without touching status badges. */
+.rdg-app-shell button.bg-blue-700,
+.rdg-app-shell a.bg-blue-700,
+.rdg-app-shell button.bg-blue-600,
+.rdg-app-shell a.bg-blue-600,
+.rdg-app-shell button.bg-emerald-700,
+.rdg-app-shell a.bg-emerald-700,
+.rdg-app-shell button.bg-emerald-600,
+.rdg-app-shell a.bg-emerald-600 {
+  border-color: var(--rdg-action-primary) !important;
+  background: var(--rdg-action-primary) !important;
+  color: #fff !important;
+}
+
+.rdg-app-shell button.bg-blue-700:hover,
+.rdg-app-shell a.bg-blue-700:hover,
+.rdg-app-shell button.bg-blue-600:hover,
+.rdg-app-shell a.bg-blue-600:hover,
+.rdg-app-shell button.bg-emerald-700:hover,
+.rdg-app-shell a.bg-emerald-700:hover,
+.rdg-app-shell button.bg-emerald-600:hover,
+.rdg-app-shell a.bg-emerald-600:hover {
+  background: var(--rdg-action-primary-hover) !important;
+}
+
+.rdg-page-heading {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--rdg-space-5);
+  min-height: 64px;
+  padding: 2px 0 var(--rdg-space-5);
+  border-bottom: 1px solid var(--rdg-border);
+}
+
+.rdg-page-heading::after {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: -1px;
+  width: 72px;
+  height: 3px;
+  border-radius: var(--rdg-radius-pill);
+  background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
+  content: '';
+}
+
+.rdg-page-heading h1,
+.rdg-page-heading h2 {
+  margin: 0;
+}
+
+.rdg-page-heading p {
+  color: var(--rdg-text-secondary) !important;
+}
+
+@media (max-width: 639px) {
+  .rdg-page-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+/* Explicit field utility for pages that compose controls dynamically. */
+.rdg-app-shell .field {
+  width: 100%;
+  min-height: var(--rdg-touch-min);
+  border: 1px solid var(--rdg-border);
+  border-radius: var(--rdg-radius-sm);
+  background: var(--rdg-surface-primary);
+  color: var(--rdg-text-primary);
+  padding: 0.7rem 0.85rem;
+  transition: border-color var(--rdg-duration-fast) var(--rdg-easing), box-shadow var(--rdg-duration-fast) var(--rdg-easing), background-color var(--rdg-duration-fast) var(--rdg-easing);
+}
+.rdg-app-shell .field:hover { border-color: var(--rdg-border-strong); }
+.rdg-app-shell .field:focus {
+  border-color: var(--rdg-focus);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rdg-focus) 18%, transparent);
+  outline: none;
+}
diff --git a/apps/homepage/public/icon.svg b/dashboard/src/app/icon.svg
similarity index 100%
rename from apps/homepage/public/icon.svg
rename to dashboard/src/app/icon.svg
diff --git a/dashboard/src/app/layout.tsx b/dashboard/src/app/layout.tsx
new file mode 100644
index 0000000..119237e
--- /dev/null
+++ b/dashboard/src/app/layout.tsx
@@ -0,0 +1,50 @@
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import { JetBrains_Mono } from 'next/font/google'
+import { DashboardI18nProvider } from '@/components/I18nProvider'
+import { SHARED_LANGUAGE_COOKIE } from '@/lib/preferences'
+import './globals.css'
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+})
+
+export const metadata: Metadata = {
+  title: 'RentalDriveGo Dashboard',
+  description: 'Manage your rental car business',
+  icons: {
+    icon: '/dashboard/icon.svg',
+    shortcut: '/dashboard/icon.svg',
+  },
+
+}
+
+function resolveInitialLanguage(value: string | undefined): 'en' | 'fr' | 'ar' {
+  return value === 'fr' || value === 'ar' || value === 'en' ? value : 'en'
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const initialLanguage = resolveInitialLanguage(
+    cookieStore.get(SHARED_LANGUAGE_COOKIE)?.value ?? cookieStore.get('dashboard-language')?.value,
+  )
+  const dir = initialLanguage === 'ar' ? 'rtl' : 'ltr'
+
+  return (
+    <html lang={initialLanguage} dir={dir} className="light" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              "(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('dashboard-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var rootTheme=theme==='light'?'light':'dark';document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(rootTheme);document.documentElement.style.colorScheme=rootTheme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
+          }}
+        />
+      </head>
+      <body className={`font-sans ${jetbrainsMono.variable}`}>
+        <DashboardI18nProvider initialLanguage={initialLanguage}>{children}</DashboardI18nProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/dashboard/src/app/onboarding/accept-invite/page.tsx b/dashboard/src/app/onboarding/accept-invite/page.tsx
new file mode 100644
index 0000000..5d5b9b3
--- /dev/null
+++ b/dashboard/src/app/onboarding/accept-invite/page.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import Link from 'next/link'
+import { PublicPageLayout } from '@/components/public'
+
+export default function AcceptInvitePage() {
+  return (
+    <PublicPageLayout>
+      <main className="flex flex-col items-center justify-center px-4 py-16">
+        <div className="w-full max-w-md card p-10 text-center">
+          <div className="mx-auto mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-7 w-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900">Invitation accepted</h1>
+          <p className="mt-3 text-sm text-slate-500">
+            Your invitation has been processed. You can now sign in to access the team dashboard.
+          </p>
+          <Link href="/sign-in" className="mt-8 btn-primary justify-center w-full">
+            Sign in to dashboard
+          </Link>
+        </div>
+      </main>
+    </PublicPageLayout>
+  )
+}
diff --git a/dashboard/src/app/onboarding/page.tsx b/dashboard/src/app/onboarding/page.tsx
new file mode 100644
index 0000000..13831f5
--- /dev/null
+++ b/dashboard/src/app/onboarding/page.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { apiFetch } from '@/lib/api'
+import { PublicPageLayout } from '@/components/public'
+import { marketplaceUrl } from '@/lib/urls'
+
+type Step = 1 | 2 | 3
+
+export default function OnboardingPage() {
+  const router = useRouter()
+  const [step, setStep] = useState<Step>(1)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const [company, setCompany] = useState({ name: '', slug: '' })
+  const [brand, setBrand] = useState({
+    displayName: '',
+    tagline: '',
+    primaryColor: '#2563eb',
+    publicCity: '',
+    publicCountry: '',
+  })
+  const [payments, setPayments] = useState({
+    amanpayMerchantId: '',
+    amanpaySecretKey: '',
+    paypalEmail: '',
+    isListedOnMarketplace: true,
+  })
+
+  async function handleStep1() {
+    if (!company.name.trim()) return setError('Company name is required')
+    setLoading(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me', {
+        method: 'PATCH',
+        body: JSON.stringify({ name: company.name }),
+      })
+      setStep(2)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleStep2() {
+    if (!brand.displayName.trim()) return setError('Display name is required')
+    setLoading(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/brand', {
+        method: 'PATCH',
+        body: JSON.stringify({
+          displayName: brand.displayName,
+          tagline: brand.tagline || undefined,
+          primaryColor: brand.primaryColor,
+          publicCity: brand.publicCity || undefined,
+          publicCountry: brand.publicCountry || undefined,
+        }),
+      })
+      setStep(3)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleStep3() {
+    setLoading(true)
+    setError(null)
+    try {
+      await apiFetch('/companies/me/brand', {
+        method: 'PATCH',
+        body: JSON.stringify({
+          amanpayMerchantId: payments.amanpayMerchantId || undefined,
+          amanpaySecretKey: payments.amanpaySecretKey || undefined,
+          paypalEmail: payments.paypalEmail || undefined,
+          isListedOnMarketplace: payments.isListedOnMarketplace,
+        }),
+      })
+      router.push('/')
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <PublicPageLayout>
+      <main className="flex items-center justify-center px-4 py-12">
+        <div className="w-full max-w-lg">
+        <div className="mb-8 text-center">
+          <a href={marketplaceUrl} className="text-xs font-semibold uppercase tracking-widest text-blue-600">RentalDriveGo</a>
+          <h1 className="mt-2 text-3xl font-bold text-slate-900">Set up your account</h1>
+          <p className="mt-1 text-sm text-slate-500">Step {step} of 3</p>
+        </div>
+
+        <div className="flex gap-2 mb-8">
+          {[1, 2, 3].map((s) => (
+            <div
+              key={s}
+              className={`flex-1 h-1.5 rounded-full transition-colors ${
+                s <= step ? 'bg-blue-600' : 'bg-slate-200'
+              }`}
+            />
+          ))}
+        </div>
+
+        <div className="card p-8">
+          {error && (
+            <div className="mb-6 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          {step === 1 && (
+            <div className="space-y-5">
+              <div>
+                <h2 className="text-lg font-semibold text-slate-900">Your company</h2>
+                <p className="mt-1 text-sm text-slate-500">Tell us the basics about your rental company.</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Company name</label>
+                <input
+                  className="input-field"
+                  placeholder="Casablanca Car Rentals"
+                  value={company.name}
+                  onChange={(e) => setCompany({ ...company, name: e.target.value })}
+                />
+              </div>
+              <button onClick={handleStep1} disabled={loading} className="btn-primary w-full justify-center">
+                {loading ? 'Saving…' : 'Continue'}
+              </button>
+            </div>
+          )}
+
+          {step === 2 && (
+            <div className="space-y-5">
+              <div>
+                <h2 className="text-lg font-semibold text-slate-900">Brand &amp; identity</h2>
+                <p className="mt-1 text-sm text-slate-500">Customize how your company appears to renters.</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Display name</label>
+                <input
+                  className="input-field"
+                  placeholder="Casa Rentals"
+                  value={brand.displayName}
+                  onChange={(e) => setBrand({ ...brand, displayName: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Tagline <span className="text-slate-400">(optional)</span></label>
+                <input
+                  className="input-field"
+                  placeholder="The best fleet in the city"
+                  value={brand.tagline}
+                  onChange={(e) => setBrand({ ...brand, tagline: e.target.value })}
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">City</label>
+                  <input
+                    className="input-field"
+                    placeholder="Casablanca"
+                    value={brand.publicCity}
+                    onChange={(e) => setBrand({ ...brand, publicCity: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Country</label>
+                  <input
+                    className="input-field"
+                    placeholder="Morocco"
+                    value={brand.publicCountry}
+                    onChange={(e) => setBrand({ ...brand, publicCountry: e.target.value })}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Brand color</label>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="color"
+                    className="h-10 w-14 rounded border border-slate-200 cursor-pointer"
+                    value={brand.primaryColor}
+                    onChange={(e) => setBrand({ ...brand, primaryColor: e.target.value })}
+                  />
+                  <input
+                    className="input-field"
+                    value={brand.primaryColor}
+                    onChange={(e) => setBrand({ ...brand, primaryColor: e.target.value })}
+                  />
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <button onClick={() => setStep(1)} className="btn-secondary flex-1 justify-center">Back</button>
+                <button onClick={handleStep2} disabled={loading} className="btn-primary flex-1 justify-center">
+                  {loading ? 'Saving…' : 'Continue'}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {step === 3 && (
+            <div className="space-y-5">
+              <div>
+                <h2 className="text-lg font-semibold text-slate-900">Payment setup</h2>
+                <p className="mt-1 text-sm text-slate-500">Connect payment providers so renters can book online. You can skip this for now.</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">AmanPay Merchant ID <span className="text-slate-400">(optional)</span></label>
+                <input
+                  className="input-field"
+                  placeholder="your-merchant-id"
+                  value={payments.amanpayMerchantId}
+                  onChange={(e) => setPayments({ ...payments, amanpayMerchantId: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">AmanPay Secret Key <span className="text-slate-400">(optional)</span></label>
+                <input
+                  type="password"
+                  className="input-field"
+                  placeholder="your-secret-key"
+                  value={payments.amanpaySecretKey}
+                  onChange={(e) => setPayments({ ...payments, amanpaySecretKey: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">PayPal email <span className="text-slate-400">(optional)</span></label>
+                <input
+                  type="email"
+                  className="input-field"
+                  placeholder="payments@yourcompany.com"
+                  value={payments.paypalEmail}
+                  onChange={(e) => setPayments({ ...payments, paypalEmail: e.target.value })}
+                />
+              </div>
+              <label className="flex items-center gap-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                  checked={payments.isListedOnMarketplace}
+                  onChange={(e) => setPayments({ ...payments, isListedOnMarketplace: e.target.checked })}
+                />
+                <span className="text-sm text-slate-700">List my company on the RentalDriveGo marketplace</span>
+              </label>
+              <div className="flex gap-3">
+                <button onClick={() => setStep(2)} className="btn-secondary flex-1 justify-center">Back</button>
+                <button onClick={handleStep3} disabled={loading} className="btn-primary flex-1 justify-center">
+                  {loading ? 'Finishing…' : 'Go to dashboard'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+        </div>
+      </main>
+    </PublicPageLayout>
+  )
+}
diff --git a/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx b/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx
new file mode 100644
index 0000000..f86eb8b
--- /dev/null
+++ b/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+import Image from 'next/image'
+import { useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { PublicPageLayout } from '@/components/public'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+
+export default function SignUpForm() {
+  const { language, setLanguage } = useDashboardI18n()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [preferredLanguage, setPreferredLanguage] = useState<'en' | 'fr' | 'ar'>(language)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+
+  const dict = {
+    en: {
+      title: 'Create your workspace',
+      subtitle: 'Enter your email and password to get started.',
+      email: 'Email',
+      emailPlaceholder: 'you@company.com',
+      password: 'Password',
+      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
+      passwordHint: 'Minimum 8 characters',
+      languageLabel: 'Preferred language',
+      create: 'Create workspace',
+      creating: 'Creating\u2026',
+      alreadyHave: 'Already have an account?',
+      signIn: 'Sign in',
+      errorEmailTaken: 'An account with this email already exists.',
+      errorGeneric: 'Something went wrong. Please try again.',
+      successTitle: 'Check your email',
+      successMessage: 'We sent a verification link to {email}. Click the link to activate your account, then sign in.',
+      successSignIn: 'Go to sign in',
+    },
+    fr: {
+      title: 'Cr\u00e9ez votre espace',
+      subtitle: 'Saisissez votre email et mot de passe pour commencer.',
+      email: 'Email',
+      emailPlaceholder: 'vous@entreprise.com',
+      password: 'Mot de passe',
+      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
+      passwordHint: 'Minimum 8 caract\u00e8res',
+      languageLabel: 'Langue pr\u00e9f\u00e9r\u00e9e',
+      create: 'Cr\u00e9er mon espace',
+      creating: 'Cr\u00e9ation\u2026',
+      alreadyHave: 'Vous avez d\u00e9j\u00e0 un compte ?',
+      signIn: 'Se connecter',
+      errorEmailTaken: 'Un compte avec cet email existe d\u00e9j\u00e0.',
+      errorGeneric: 'Une erreur est survenue. Veuillez r\u00e9essayer.',
+      successTitle: 'V\u00e9rifiez votre email',
+      successMessage: 'Nous avons envoy\u00e9 un lien de v\u00e9rification \u00e0 {email}. Cliquez sur le lien pour activer votre compte, puis connectez-vous.',
+      successSignIn: 'Aller \u00e0 la connexion',
+    },
+    ar: {
+      title: '\u0623\u0646\u0634\u0626 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0644\u0643',
+      subtitle: '\u0623\u062f\u062e\u0644 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u0644\u0644\u0628\u062f\u0621.',
+      email: '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',
+      emailPlaceholder: 'you@company.com',
+      password: '\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631',
+      passwordPlaceholder: '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022',
+      passwordHint: '\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 8 \u0623\u062d\u0631\u0641',
+      languageLabel: '\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629',
+      create: '\u0623\u0646\u0634\u0626 \u0627\u0644\u0645\u0633\u0627\u062d\u0629',
+      creating: '\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0646\u0634\u0627\u0621\u2026',
+      alreadyHave: '\u0647\u0644 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628 \u0628\u0627\u0644\u0641\u0639\u0644\u061f',
+      signIn: '\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644',
+      errorEmailTaken: '\u064a\u0648\u062c\u062f \u062d\u0633\u0627\u0628 \u0628\u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0627\u0644\u0641\u0639\u0644.',
+      errorGeneric: '\u062d\u062f\u062b \u062e\u0637\u0623 \u0645\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.',
+      successTitle: '\u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a',
+      successMessage: '\u0623\u0631\u0633\u0644\u0646\u0627 \u0631\u0627\u0628\u0637 \u062a\u062d\u0642\u0642 \u0625\u0644\u0649 {email}. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637 \u0644\u062a\u0641\u0639\u064a\u0644 \u062d\u0633\u0627\u0628\u0643\u060c \u062b\u0645 \u0642\u0645 \u0628\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644.',
+      successSignIn: '\u0627\u0644\u0630\u0647\u0627\u0628 \u0625\u0644\u0649 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644',
+    },
+  }[preferredLanguage]
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      await apiFetch('/auth/account/start', {
+        method: 'POST',
+        body: JSON.stringify({ email, password, preferredLanguage }),
+      })
+
+      setLanguage(preferredLanguage)
+      document.cookie = `rentaldrivego-language=${preferredLanguage}; path=/; max-age=31536000; samesite=lax`
+      setSuccess(true)
+    } catch (err: any) {
+      if (err?.message?.includes('email_taken') || err?.code === 'email_taken') {
+        setError(dict.errorEmailTaken)
+      } else {
+        setError(dict.errorGeneric)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <PublicPageLayout>
+        <main className="flex flex-1 items-center justify-center px-4 py-16">
+          <div className="w-full max-w-md text-center">
+            <div className="flex justify-center mb-6">
+              <Image
+                src="/dashboard/rentalcardrive.png"
+                alt="RentalDriveGo"
+                width={80}
+                height={80}
+                priority
+                className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+              />
+            </div>
+            <div className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/78">
+              <h1 className="text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">
+                {dict.successTitle}
+              </h1>
+              <p className="mt-4 text-sm leading-7 text-stone-600 dark:text-stone-300">
+                {dict.successMessage.replace('{email}', email)}
+              </p>
+              <a
+                href="/sign-in"
+                className="mt-6 inline-flex justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400"
+              >
+                {dict.successSignIn}
+              </a>
+            </div>
+          </div>
+        </main>
+      </PublicPageLayout>
+    )
+  }
+
+  return (
+    <PublicPageLayout>
+      <main className="flex flex-1 items-center justify-center px-4 py-16">
+        <div className="w-full max-w-md">
+          <div className="mb-8 text-center">
+            <div className="flex justify-center">
+              <a href={marketplaceUrl} target="_top">
+                <Image
+                  src="/dashboard/rentalcardrive.png"
+                  alt="RentalDriveGo"
+                  width={80}
+                  height={80}
+                  priority
+                  className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+                />
+              </a>
+            </div>
+            <h1 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">
+              {dict.title}
+            </h1>
+            <p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
+              {dict.subtitle}
+            </p>
+          </div>
+
+          <section className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/78 dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)]">
+            {error ? (
+              <div className="mb-5 rounded-[1.5rem] border border-red-200/80 bg-red-50/90 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
+                {error}
+              </div>
+            ) : null}
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.email} <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={dict.emailPlaceholder}
+                  autoFocus
+                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                />
+              </div>
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.password} <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  required
+                  minLength={8}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={'\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}
+                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute inset-y-0 right-3 flex items-center text-stone-400 hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200"
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                    </svg>
+                  ) : (
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  )}
+                </button>
+                </div>
+                <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">{dict.passwordHint}</p>
+              </div>
+
+              <div>
+                <span className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.languageLabel} <span className="text-red-500">*</span>
+                </span>
+                <div className="grid grid-cols-3 gap-2">
+                  {(['en', 'fr', 'ar'] as const).map((lang) => (
+                    <button
+                      key={lang}
+                      type="button"
+                      onClick={() => setPreferredLanguage(lang)}
+                      className={`rounded-2xl border py-3 text-sm font-semibold transition ${
+                        preferredLanguage === lang
+                          ? 'border-blue-900 bg-blue-900 text-white dark:bg-orange-500 dark:border-orange-400'
+                          : 'border-stone-200 bg-white text-stone-600 hover:border-stone-300 hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300 dark:hover:border-blue-600'
+                      }`}
+                    >
+                      {lang === 'en' ? 'English' : lang === 'fr' ? 'Fran\u00e7ais' : '\u0627\u0644\u0639\u0631\u0628\u064a\u0629'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="inline-flex w-full justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
+              >
+                {loading ? dict.creating : dict.create}
+              </button>
+            </form>
+
+            <p className="mt-6 text-center text-sm text-stone-500 dark:text-stone-400">
+              {dict.alreadyHave}{' '}
+              <a
+                href="/sign-in"
+                className="font-semibold text-orange-700 hover:text-orange-800 dark:text-orange-300 dark:hover:text-orange-200"
+              >
+                {dict.signIn}
+              </a>
+            </p>
+          </section>
+        </div>
+      </main>
+    </PublicPageLayout>
+  )
+}
diff --git a/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx b/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx
new file mode 100644
index 0000000..4ebc3d2
--- /dev/null
+++ b/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import SignUpForm from './SignUpForm'
+
+export default function SignUpPage() {
+  return (
+    <Suspense fallback={null}>
+      <SignUpForm />
+    </Suspense>
+  )
+}
diff --git a/dashboard/src/app/verify-email/page.tsx b/dashboard/src/app/verify-email/page.tsx
new file mode 100644
index 0000000..dce09d1
--- /dev/null
+++ b/dashboard/src/app/verify-email/page.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import Image from 'next/image'
+import { PublicPageLayout } from '@/components/public'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+export default function VerifyEmailPage() {
+  const { language } = useDashboardI18n()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
+
+  const dict = {
+    en: {
+      verifying: 'Verifying your email…',
+      success: 'Email verified! You can now sign in.',
+      error: 'This verification link is invalid or has expired.',
+      signIn: 'Go to sign in',
+    },
+    fr: {
+      verifying: 'Vérification de votre email…',
+      success: 'Email vérifié ! Vous pouvez maintenant vous connecter.',
+      error: 'Ce lien de vérification est invalide ou a expiré.',
+      signIn: 'Aller à la connexion',
+    },
+    ar: {
+      verifying: 'جارٍ التحقق من بريدك الإلكتروني…',
+      success: 'تم التحقق من البريد الإلكتروني! يمكنك الآن تسجيل الدخول.',
+      error: 'رابط التحقق هذا غير صالح أو منتهي الصلاحية.',
+      signIn: 'الذهاب إلى تسجيل الدخول',
+    },
+  }[language]
+
+  useEffect(() => {
+    if (!token) {
+      setStatus('error')
+      return
+    }
+
+    let cancelled = false
+
+    async function verify() {
+      try {
+        const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000/api/v1'
+        const res = await fetch(`${API_BASE}/auth/employee/verify-email`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token }),
+        })
+
+        if (cancelled) return
+
+        if (res.ok) {
+          setStatus('success')
+        } else {
+          setStatus('error')
+        }
+      } catch {
+        if (!cancelled) setStatus('error')
+      }
+    }
+
+    verify()
+
+    return () => {
+      cancelled = true
+    }
+  }, [token])
+
+  return (
+    <PublicPageLayout>
+      <main className="flex flex-1 items-center justify-center px-4 py-16">
+        <div className="w-full max-w-md text-center">
+          <div className="flex justify-center mb-6">
+            <Image
+              src="/dashboard/rentalcardrive.png"
+              alt="RentalDriveGo"
+              width={80}
+              height={80}
+              priority
+              className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+            />
+          </div>
+          <div className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/78">
+            {status === 'loading' && (
+              <>
+                <div className="mx-auto mb-4 h-6 w-6 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" />
+                <p className="text-sm text-stone-600 dark:text-stone-300">{dict.verifying}</p>
+              </>
+            )}
+            {status === 'success' && (
+              <>
+                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/40">
+                  <svg className="h-6 w-6 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <h1 className="text-xl font-black text-blue-950 dark:text-stone-50">{dict.success}</h1>
+                <a
+                  href="/sign-in"
+                  className="mt-6 inline-flex justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400"
+                >
+                  {dict.signIn}
+                </a>
+              </>
+            )}
+            {status === 'error' && (
+              <>
+                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/40">
+                  <svg className="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </div>
+                <h1 className="text-xl font-black text-blue-950 dark:text-stone-50">{dict.error}</h1>
+                <a
+                  href="/sign-in"
+                  className="mt-6 inline-flex justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400"
+                >
+                  {dict.signIn}
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </main>
+    </PublicPageLayout>
+  )
+}
diff --git a/dashboard/src/components/I18nProvider.tsx b/dashboard/src/components/I18nProvider.tsx
new file mode 100644
index 0000000..1465685
--- /dev/null
+++ b/dashboard/src/components/I18nProvider.tsx
@@ -0,0 +1,1705 @@
+'use client'
+
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { SHARED_LANGUAGE_COOKIE, SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
+import { apiFetch } from '@/lib/api'
+
+export type DashboardLanguage = 'en' | 'fr' | 'ar'
+export type DashboardTheme = 'light' | 'dark'
+
+type FleetDict = {
+  statusLabels: Record<'AVAILABLE' | 'RESERVED' | 'READY' | 'RENTED' | 'RETURNED' | 'NEEDS_CLEANING' | 'MAINTENANCE' | 'DAMAGE_REVIEW' | 'OUT_OF_SERVICE', string>
+  logMaintenance: string
+  maintenanceSubtitle: (name: string) => string
+  maintenanceTypeRequired: string
+  failedToSave: string
+  typeLabel: string
+  typePlaceholder: string
+  description: string
+  descriptionPlaceholder: string
+  date: string
+  nextDueDate: string
+  cost: string
+  odometer: string
+  skip: string
+  saveLog: string
+  saving: string
+  addNewVehicle: string
+  makeMissing: string
+  modelMissing: string
+  plateMissing: string
+  rateMissing: string
+  failedToAdd: string
+  make: string
+  selectMake: string
+  other: string
+  typeMake: string
+  model: string
+  selectModel: string
+  typeModel: string
+  year: string
+  category: string
+  dailyRate: string
+  licensePlate: string
+  vin: string
+  color: string
+  select: string
+  typeColor: string
+  seats: string
+  transmission: string
+  manual: string
+  automatic: string
+  fuelType: string
+  pickupLocations: string
+  pickupLocationsPlaceholder: string
+  dropoffLocations: string
+  dropoffLocationsPlaceholder: string
+  locationHint: string
+  allowDifferentDropoff: string
+  dropoffLocationsRequired: string
+  sameDropoffOnly: string
+  differentDropoffAvailable: string
+  photosLabel: string
+  clickToAddPhotos: string
+  addMorePhotos: string
+  cancel: string
+  adding: string
+  addVehicle: string
+  heading: string
+  vehicleCount: (n: number) => string
+  searchPlaceholder: string
+  categoryLabels: Record<'ECONOMY' | 'COMPACT' | 'MIDSIZE' | 'FULLSIZE' | 'SUV' | 'LUXURY' | 'VAN' | 'TRUCK', string>
+  fuelTypeLabels: Record<'GASOLINE' | 'DIESEL' | 'ELECTRIC' | 'HYBRID', string>
+  allStatuses: string
+  allCategories: string
+  allVisibility: string
+  published: string
+  unpublished: string
+  colVehicle: string
+  colCategory: string
+  colStatus: string
+  colDailyRate: string
+  colPublished: string
+  colActions: string
+  noPhoto: string
+  perDay: string
+  noVehicles: string
+  noMatch: string
+}
+
+type ReservationsDict = {
+  heading: string
+  subtitle: string
+  colCustomer: string
+  colVehicle: string
+  colDates: string
+  colSource: string
+  colStatus: string
+  colTotal: string
+  noReservations: string
+  loadingReservation: string
+  failedToLoad: string
+  confirmReservation: string
+  checkInVehicle: string
+  checkOutVehicle: string
+  working: string
+  failedConfirm: string
+  failedCheckIn: string
+  failedCheckOut: string
+  sectionCustomer: string
+  noPhone: string
+  licenseLabel: string
+  notCaptured: string
+  flaggedBadge: string
+  sectionVehicle: string
+  sectionCharges: string
+  chargeDiscount: string
+  chargeInsurance: string
+  chargeAdditionalDrivers: string
+  chargePricingAdjustments: string
+  chargeGrandTotal: string
+  appliedInsurance: string
+  pricingRulesApplied: string
+  sectionAdditionalDrivers: string
+  driverLicenseLabel: string
+  driverChargeLabel: string
+  approveBtn: string
+  approvedBadge: string
+  noApprovalNeeded: string
+  noAdditionalDrivers: string
+  failedApproveDriver: string
+  sectionInspectionSummary: string
+  checkInInspectionLabel: string
+  checkOutInspectionLabel: string
+  savedBadge: string
+  pendingBadge: string
+  inspectionCardTitle: (type: 'CHECKIN' | 'CHECKOUT') => string
+  inspectionSubtitle: string
+  saveInspection: string
+  savingInspection: string
+  failedSaveInspection: string
+  diagramHelp: string
+  mileageLabel: string
+  fuelLevelLabel: string
+  fuelLevels: Record<'FULL' | 'SEVEN_EIGHTHS' | 'THREE_QUARTERS' | 'FIVE_EIGHTHS' | 'HALF' | 'THREE_EIGHTHS' | 'QUARTER' | 'ONE_EIGHTH' | 'EMPTY', string>
+  generalConditionLabel: string
+  employeeNotesLabel: string
+  customerAcknowledged: string
+  damageMarkersHeading: string
+  removeMarker: string
+  noMarkers: string
+  damageTypeLabels: Record<'SCRATCH' | 'DENT' | 'CRACK' | 'CHIP' | 'MISSING' | 'STAIN' | 'OTHER', string>
+  severityLabels: Record<'MINOR' | 'MODERATE' | 'MAJOR', string>
+}
+
+type DashboardPageDict = {
+  failedToLoad: string
+  forbidden: string
+  kpiTotalBookings: string
+  kpiActiveVehicles: string
+  kpiMonthlyRevenue: string
+  kpiTotalCustomers: string
+  vsLastMonth: string
+  bookingSources: string
+  barBookings: string
+  barRevenue: string
+  noBookingData: string
+  quickStats: string
+  noData: string
+  recentReservations: string
+  viewAll: string
+  colBookingNum: string
+  colCustomer: string
+  colVehicle: string
+  colDates: string
+  colStatus: string
+  colTotal: string
+  noReservations: string
+  trialEnds: (date: string) => string
+  trialActive: string
+  pastDueMsg: string
+  suspendedMsg: string
+  manageBilling: string
+  statusLabels: Record<'CONFIRMED' | 'PENDING' | 'ACTIVE' | 'COMPLETED' | 'CANCELLED', string>
+}
+
+type CalendarDict = {
+  heading: string
+  blockDates: string
+  clickSecondDay: (selected: string) => string
+  cancelSelection: string
+  legendReserved: string
+  legendMaintenance: string
+  legendBlocked: string
+  legendAvailable: string
+  failedLoad: string
+  moreDays: (n: number) => string
+  reservationsThisMonth: string
+  blocksAndMaintenance: string
+  removeBlockConfirm: string
+  failedDeleteBlock: string
+  modalTitle: string
+  blockTypeLabel: string
+  manualBlock: string
+  maintenanceBlock: string
+  startDate: string
+  endDate: string
+  reasonLabel: string
+  optional: string
+  reasonPlaceholderManual: string
+  reasonPlaceholderMaintenance: string
+  datesRequired: string
+  endAfterStart: string
+  failedCreateBlock: string
+  cancel: string
+  saveBlock: string
+  saving: string
+  removeBlock: string
+  dayHeaders: [string, string, string, string, string, string, string]
+}
+
+type VehicleDetailDict = {
+  tabDetails: string
+  tabMaintenance: string
+  tabCalendar: string
+  editBtn: string
+  cancelBtn: string
+  saveBtn: string
+  savingBtn: string
+  uploadingPhotosBtn: string
+  loadingVehicle: string
+  photosHeading: string
+  noPhotosYet: string
+  clickToAddPhotos: string
+  addMorePhotos: (current: number) => string
+  maxPhotosReached: string
+  newPhotoBadge: string
+  vehicleDetailsHeading: string
+  labelCategory: string
+  labelDailyRate: string
+  labelStatus: string
+  labelSeats: string
+  labelTransmission: string
+  labelFuelType: string
+  labelColor: string
+  labelOdometer: string
+  labelNotes: string
+  makeLabel: string
+  selectMake: string
+  other: string
+  typeMake: string
+  modelLabel: string
+  selectModel: string
+  typeModel: string
+  yearLabel: string
+  dailyRateLabel: string
+  licensePlateLabel: string
+  vinLabel: string
+  statusLabel: string
+  colorLabel: string
+  selectColor: string
+  typeColor: string
+  seatsLabel: string
+  transmissionLabel: string
+  fuelTypeLabel: string
+  odometerLabel: string
+  notesLabel: string
+  optionalNotes: string
+  optional: string
+  makeRequired: string
+  modelRequired: string
+  plateRequired: string
+  rateInvalid: string
+  failedSave: string
+  maintenanceIntro: string
+  logBtn: string
+  statusNone: string
+  statusOverdue: string
+  statusDueSoon: string
+  statusOk: string
+  noRecord: string
+  lastPrefix: string
+  atKm: (km: string) => string
+  duePrefix: string
+  orSep: string
+  kmLeft: (km: string) => string
+  overdueByKm: string
+  serviceDateLabel: string
+  odometerAtService: string
+  nextDueDateLabel: string
+  nextDueKmLabel: string
+  costLabel: string
+  maintenanceNotesLabel: string
+  saveLabel: string
+  savingLabel: string
+  dateRequired: string
+  routineTypes: Record<string, string>
+}
+
+type DashboardDictionary = {
+  nav: Record<string, string>
+  titles: Record<string, string>
+  notifications: string
+  noNewNotifications: string
+  unreadNotifications: (count: number) => string
+  signOut: string
+  workspaceUser: string
+  localAuth: string
+  language: string
+  theme: string
+  light: string
+  dark: string
+  fleet: FleetDict
+  vehicleDetail: VehicleDetailDict
+  calendar: CalendarDict
+  dashboardPage: DashboardPageDict
+  reservations: ReservationsDict
+}
+
+const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
+  en: {
+    nav: {
+      dashboard: 'Dashboard',
+      fleet: 'Fleet',
+      reservations: 'Booking',
+      onlineReservations: 'Online Reservations',
+      customers: 'Customers',
+      offers: 'Offers',
+      team: 'Team',
+      reports: 'Reports',
+      subscription: 'Subscription',
+      billing: 'Customer Billing',
+      contracts: 'Contracts',
+      notifications: 'Notifications',
+      settings: 'Settings',
+      reviews: 'Reviews',
+      complaints: 'Complaints',
+    },
+    titles: {
+      '/': 'Dashboard',
+      '/fleet': 'Fleet Management',
+      '/reservations': 'Booking',
+      '/reservations/new': 'Book Car',
+      '/online-reservations': 'Online Reservations',
+      '/customers': 'Customers',
+      '/offers': 'Offers',
+      '/team': 'Team',
+      '/reports': 'Reports',
+      '/subscription': 'Subscription',
+      '/billing': 'Customer Billing',
+      '/contracts': 'Contracts',
+      '/notifications': 'Notifications',
+      '/settings': 'Settings',
+    },
+    notifications: 'Notifications',
+    noNewNotifications: 'No new notifications',
+    unreadNotifications: (count) => `${count} unread notification${count > 1 ? 's' : ''}`,
+    signOut: 'Sign out',
+    workspaceUser: 'Workspace user',
+    localAuth: 'Local authentication',
+    language: 'Language',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    fleet: {
+      statusLabels: { AVAILABLE: 'Available', RESERVED: 'Reserved', READY: 'Ready for pickup', RENTED: 'On rent', RETURNED: 'Returned', NEEDS_CLEANING: 'Needs cleaning', MAINTENANCE: 'Maintenance', DAMAGE_REVIEW: 'Damage review', OUT_OF_SERVICE: 'Out of service' },
+      logMaintenance: 'Log Maintenance',
+      maintenanceSubtitle: (name) => `${name} has been set to maintenance. Add details below.`,
+      maintenanceTypeRequired: 'Please enter a maintenance type.',
+      failedToSave: 'Failed to save maintenance log.',
+      typeLabel: 'Type *',
+      typePlaceholder: 'e.g. Oil change, Tire rotation, Brake service…',
+      description: 'Description',
+      descriptionPlaceholder: 'Optional details…',
+      date: 'Date *',
+      nextDueDate: 'Next Due Date',
+      cost: 'Cost (MAD)',
+      odometer: 'Odometer (km)',
+      skip: 'Skip',
+      saveLog: 'Save Log',
+      saving: 'Saving…',
+      addNewVehicle: 'Add New Vehicle',
+      makeMissing: 'Please select or enter a make.',
+      modelMissing: 'Please select or enter a model.',
+      plateMissing: 'Please enter a license plate.',
+      rateMissing: 'Please enter a valid daily rate.',
+      failedToAdd: 'Failed to add vehicle. Please check all fields and try again.',
+      make: 'Make *',
+      selectMake: 'Select make…',
+      other: 'Other…',
+      typeMake: 'Type make…',
+      model: 'Model *',
+      selectModel: 'Select model…',
+      typeModel: 'Type model…',
+      year: 'Year *',
+      category: 'Category',
+      dailyRate: 'Daily Rate (MAD) *',
+      licensePlate: 'License Plate *',
+      vin: 'VIN',
+      color: 'Color',
+      select: 'Select…',
+      typeColor: 'Type color…',
+      seats: 'Seats',
+      transmission: 'Transmission',
+      manual: 'Manual',
+      automatic: 'Automatic',
+      fuelType: 'Fuel Type',
+      pickupLocations: 'Pick-up locations',
+      pickupLocationsPlaceholder: 'e.g. Casablanca Airport, Casablanca Downtown',
+      dropoffLocations: 'Drop-off locations',
+      dropoffLocationsPlaceholder: 'e.g. Rabat Downtown, Marrakech Center',
+      locationHint: 'Separate multiple locations with commas.',
+      allowDifferentDropoff: 'Allow different drop-off location',
+      dropoffLocationsRequired: 'Please add at least one drop-off location when different drop-off is enabled.',
+      sameDropoffOnly: 'Same drop-off only',
+      differentDropoffAvailable: 'Different drop-off available',
+      photosLabel: 'Photos (up to 10)',
+      clickToAddPhotos: 'Click to add photos',
+      addMorePhotos: 'Add more photos',
+      cancel: 'Cancel',
+      adding: 'Adding…',
+      addVehicle: 'Add Vehicle',
+      heading: 'Fleet',
+      vehicleCount: (n) => `${n} vehicle${n !== 1 ? 's' : ''} total`,
+      searchPlaceholder: 'Search make, model, plate…',
+      categoryLabels: {
+        ECONOMY: 'Economy',
+        COMPACT: 'Compact',
+        MIDSIZE: 'Midsize',
+        FULLSIZE: 'Full-size',
+        SUV: 'SUV',
+        LUXURY: 'Luxury',
+        VAN: 'Van',
+        TRUCK: 'Truck',
+      },
+      fuelTypeLabels: {
+        GASOLINE: 'Gasoline',
+        DIESEL: 'Diesel',
+        ELECTRIC: 'Electric',
+        HYBRID: 'Hybrid',
+      },
+      allStatuses: 'All statuses',
+      allCategories: 'All categories',
+      allVisibility: 'All visibility',
+      published: 'Published',
+      unpublished: 'Unpublished',
+      colVehicle: 'Vehicle',
+      colCategory: 'Category',
+      colStatus: 'Status',
+      colDailyRate: 'Daily Rate',
+      colPublished: 'Published',
+      colActions: 'Actions',
+      noPhoto: 'No photo',
+      perDay: '/day',
+      noVehicles: 'No vehicles yet. Add your first vehicle to get started.',
+      noMatch: 'No vehicles match your filters.',
+    },
+    vehicleDetail: {
+      tabDetails: 'Details',
+      tabMaintenance: 'Maintenance',
+      tabCalendar: 'Calendar',
+      editBtn: 'Edit',
+      cancelBtn: 'Cancel',
+      saveBtn: 'Save',
+      savingBtn: 'Saving…',
+      uploadingPhotosBtn: 'Uploading photos…',
+      loadingVehicle: 'Loading vehicle…',
+      photosHeading: 'Photos',
+      noPhotosYet: 'No photos uploaded yet.',
+      clickToAddPhotos: 'Click to add photos',
+      addMorePhotos: (n) => `Add more photos (${n}/10)`,
+      maxPhotosReached: 'Maximum 10 photos reached.',
+      newPhotoBadge: 'New',
+      vehicleDetailsHeading: 'Vehicle details',
+      labelCategory: 'Category',
+      labelDailyRate: 'Daily rate',
+      labelStatus: 'Status',
+      labelSeats: 'Seats',
+      labelTransmission: 'Transmission',
+      labelFuelType: 'Fuel type',
+      labelColor: 'Color',
+      labelOdometer: 'Odometer',
+      labelNotes: 'Notes',
+      makeLabel: 'Make *',
+      selectMake: 'Select make…',
+      other: 'Other…',
+      typeMake: 'Type make…',
+      modelLabel: 'Model *',
+      selectModel: 'Select model…',
+      typeModel: 'Type model…',
+      yearLabel: 'Year *',
+      dailyRateLabel: 'Daily Rate (MAD) *',
+      licensePlateLabel: 'License Plate *',
+      vinLabel: 'VIN',
+      statusLabel: 'Status',
+      colorLabel: 'Color',
+      selectColor: 'Select color…',
+      typeColor: 'Type color…',
+      seatsLabel: 'Seats',
+      transmissionLabel: 'Transmission',
+      fuelTypeLabel: 'Fuel Type',
+      odometerLabel: 'Odometer (km)',
+      notesLabel: 'Notes',
+      optionalNotes: 'Optional notes…',
+      optional: 'Optional…',
+      makeRequired: 'Make is required.',
+      modelRequired: 'Model is required.',
+      plateRequired: 'License plate is required.',
+      rateInvalid: 'Please enter a valid daily rate.',
+      failedSave: 'Failed to save changes.',
+      maintenanceIntro: 'Track routine maintenance for this vehicle. Click Log on any item to record a service.',
+      logBtn: 'Log',
+      statusNone: 'Not logged',
+      statusOverdue: 'Overdue',
+      statusDueSoon: 'Due soon',
+      statusOk: 'Up to date',
+      noRecord: 'No record yet',
+      lastPrefix: 'Last:',
+      atKm: (km) => `at ${km} km`,
+      duePrefix: '· Due:',
+      orSep: 'or',
+      kmLeft: (km) => `${km} km left`,
+      overdueByKm: 'overdue by km',
+      serviceDateLabel: 'Service Date *',
+      odometerAtService: 'Odometer at service (km)',
+      nextDueDateLabel: 'Next due date',
+      nextDueKmLabel: 'Next due at (km)',
+      costLabel: 'Cost (MAD)',
+      maintenanceNotesLabel: 'Notes',
+      saveLabel: 'Save',
+      savingLabel: 'Saving…',
+      dateRequired: 'Service date is required.',
+      routineTypes: {
+        'Oil Change': 'Oil Change',
+        'Technical Inspection': 'Technical Inspection',
+        'Vehicle Registration': 'Vehicle Registration',
+        'Car Tax': 'Car Tax',
+        'Tire Rotation': 'Tire Rotation',
+        'Brake Inspection': 'Brake Inspection',
+        'Air Filter': 'Air Filter',
+        'Cabin Filter': 'Cabin Filter',
+        'Battery Check': 'Battery Check',
+        'Belt / Chain Service': 'Belt / Chain Service',
+        'Coolant Flush': 'Coolant Flush',
+        'Transmission Service': 'Transmission Service',
+      },
+    },
+    calendar: {
+      heading: 'Availability Calendar',
+      blockDates: 'Block dates',
+      clickSecondDay: (selected) => `Click a second day to set the block end date (selected: ${selected})`,
+      cancelSelection: 'cancel',
+      legendReserved: 'Reserved',
+      legendMaintenance: 'Maintenance',
+      legendBlocked: 'Blocked',
+      legendAvailable: 'Available',
+      failedLoad: 'Failed to load calendar',
+      moreDays: (n) => `+${n} more`,
+      reservationsThisMonth: 'Reservations this month',
+      blocksAndMaintenance: 'Blocks & maintenance',
+      removeBlockConfirm: 'Remove this block?',
+      failedDeleteBlock: 'Failed to delete block',
+      modalTitle: 'Block vehicle dates',
+      blockTypeLabel: 'Block type',
+      manualBlock: 'Manual block',
+      maintenanceBlock: 'Maintenance',
+      startDate: 'Start date',
+      endDate: 'End date (exclusive)',
+      reasonLabel: 'Reason',
+      optional: '(optional)',
+      reasonPlaceholderManual: 'e.g. Reserved for VIP, company event…',
+      reasonPlaceholderMaintenance: 'e.g. Oil change, tire rotation…',
+      datesRequired: 'Start and end dates are required.',
+      endAfterStart: 'End date must be after start date.',
+      failedCreateBlock: 'Failed to create block',
+      cancel: 'Cancel',
+      saveBlock: 'Save block',
+      saving: 'Saving…',
+      removeBlock: 'Remove block',
+      dayHeaders: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    },
+    dashboardPage: {
+      failedToLoad: 'Failed to load dashboard',
+      forbidden: 'You do not have permission to access this page. A Manager role or higher is required.',
+      kpiTotalBookings: 'Total Bookings',
+      kpiActiveVehicles: 'Active Vehicles',
+      kpiMonthlyRevenue: 'Monthly Revenue',
+      kpiTotalCustomers: 'Total Customers',
+      vsLastMonth: 'vs last month',
+      bookingSources: 'Booking Sources',
+      barBookings: 'Bookings',
+      barRevenue: 'Revenue (MAD)',
+      noBookingData: 'No booking data available yet',
+      quickStats: 'Quick Stats',
+      noData: 'No data yet',
+      recentReservations: 'Recent Reservations',
+      viewAll: 'View all →',
+      colBookingNum: 'Booking #',
+      colCustomer: 'Customer',
+      colVehicle: 'Vehicle',
+      colDates: 'Dates',
+      colStatus: 'Status',
+      colTotal: 'Total',
+      noReservations: "No reservations yet. Once customers book vehicles, they'll appear here.",
+      trialEnds: (date) => `You're on a free trial. Trial ends ${date}.`,
+      trialActive: "You're on a free trial.",
+      pastDueMsg: 'Your payment is past due. Please update your billing information.',
+      suspendedMsg: 'Your account has been suspended. Please contact support or renew your subscription.',
+      manageBilling: 'Manage subscription →',
+      statusLabels: { CONFIRMED: 'Confirmed', PENDING: 'Pending', ACTIVE: 'Active', COMPLETED: 'Completed', CANCELLED: 'Cancelled' },
+    },
+    reservations: {
+      heading: 'Booking',
+      subtitle: 'All booking sources, including dashboard, public site, and marketplace.',
+      colCustomer: 'Customer',
+      colVehicle: 'Vehicle',
+      colDates: 'Dates',
+      colSource: 'Source',
+      colStatus: 'Status',
+      colTotal: 'Total',
+      noReservations: 'No reservations yet.',
+      loadingReservation: 'Loading reservation…',
+      failedToLoad: 'Failed to load reservation',
+      confirmReservation: 'Confirm reservation',
+      checkInVehicle: 'Check in vehicle',
+      checkOutVehicle: 'Check out vehicle',
+      working: 'Working…',
+      failedConfirm: 'Failed to confirm reservation',
+      failedCheckIn: 'Failed to check in reservation',
+      failedCheckOut: 'Failed to check out reservation',
+      sectionCustomer: 'Customer',
+      noPhone: 'No phone provided',
+      licenseLabel: 'License:',
+      notCaptured: 'Not captured',
+      flaggedBadge: 'Flagged',
+      sectionVehicle: 'Vehicle',
+      sectionCharges: 'Charges',
+      chargeDiscount: 'Discount',
+      chargeInsurance: 'Insurance',
+      chargeAdditionalDrivers: 'Additional drivers',
+      chargePricingAdjustments: 'Pricing adjustments',
+      chargeGrandTotal: 'Grand total',
+      appliedInsurance: 'Applied insurance',
+      pricingRulesApplied: 'Pricing rules applied',
+      sectionAdditionalDrivers: 'Additional drivers',
+      driverLicenseLabel: 'License:',
+      driverChargeLabel: 'Charge:',
+      approveBtn: 'Approve',
+      approvedBadge: 'Approved',
+      noApprovalNeeded: 'No approval needed',
+      noAdditionalDrivers: 'No additional drivers were added to this reservation.',
+      failedApproveDriver: 'Failed to approve additional driver',
+      sectionInspectionSummary: 'Inspection summary',
+      checkInInspectionLabel: 'Check-in inspection',
+      checkOutInspectionLabel: 'Check-out inspection',
+      savedBadge: 'Saved',
+      pendingBadge: 'Pending',
+      inspectionCardTitle: (type) => type === 'CHECKIN' ? 'Check-in inspection' : 'Check-out inspection',
+      inspectionSubtitle: 'Mark existing and newly discovered damage directly on the vehicle diagram.',
+      saveInspection: 'Save inspection',
+      savingInspection: 'Saving…',
+      failedSaveInspection: 'Failed to save inspection',
+      diagramHelp: 'Click anywhere on the diagram to add a damage marker with the selected type and severity.',
+      mileageLabel: 'Mileage',
+      fuelLevelLabel: 'Fuel level',
+      fuelLevels: { FULL: 'Full', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Empty' },
+      generalConditionLabel: 'General condition',
+      employeeNotesLabel: 'Employee notes',
+      customerAcknowledged: 'Customer acknowledged this inspection',
+      damageMarkersHeading: 'Damage markers',
+      removeMarker: 'Remove',
+      noMarkers: 'No damage markers saved yet.',
+      damageTypeLabels: { SCRATCH: 'Scratch', DENT: 'Dent', CRACK: 'Crack', CHIP: 'Chip', MISSING: 'Missing', STAIN: 'Stain', OTHER: 'Other' },
+      severityLabels: { MINOR: 'Minor', MODERATE: 'Moderate', MAJOR: 'Major' },
+    },
+  },
+  fr: {
+    nav: {
+      dashboard: 'Tableau de bord',
+      fleet: 'Flotte',
+      reservations: 'Réservations',
+      onlineReservations: 'Réservations en ligne',
+      customers: 'Clients',
+      offers: 'Offres',
+      team: 'Équipe',
+      reports: 'Rapports',
+      subscription: 'Abonnement',
+      billing: 'Facturation clients',
+      contracts: 'Contrats',
+      notifications: 'Notifications',
+      settings: 'Paramètres',
+      reviews: 'Avis',
+      complaints: 'Plaintes',
+    },
+    titles: {
+      '/': 'Tableau de bord',
+      '/fleet': 'Gestion de flotte',
+      '/reservations': 'Réservations',
+      '/reservations/new': 'Réserver une voiture',
+      '/online-reservations': 'Réservations en ligne',
+      '/customers': 'Clients',
+      '/offers': 'Offres',
+      '/team': 'Équipe',
+      '/reports': 'Rapports',
+      '/subscription': 'Abonnement',
+      '/billing': 'Facturation clients',
+      '/contracts': 'Contrats',
+      '/notifications': 'Notifications',
+      '/settings': 'Paramètres',
+    },
+    notifications: 'Notifications',
+    noNewNotifications: 'Aucune nouvelle notification',
+    unreadNotifications: (count) => `${count} notification${count > 1 ? 's' : ''} non lue${count > 1 ? 's' : ''}`,
+    signOut: 'Déconnexion',
+    workspaceUser: 'Utilisateur espace',
+    localAuth: 'Authentification locale',
+    language: 'Langue',
+    theme: 'Mode',
+    light: 'Clair',
+    dark: 'Sombre',
+    fleet: {
+      statusLabels: { AVAILABLE: 'Disponible', RESERVED: 'Réservé', READY: 'Prêt pour remise', RENTED: 'En location', RETURNED: 'Rendu', NEEDS_CLEANING: 'Nettoyage requis', MAINTENANCE: 'Maintenance', DAMAGE_REVIEW: 'Révision dommages', OUT_OF_SERVICE: 'Hors service' },
+      logMaintenance: 'Journal de maintenance',
+      maintenanceSubtitle: (name) => `${name} a été mis en maintenance. Ajoutez les détails ci-dessous.`,
+      maintenanceTypeRequired: 'Veuillez saisir un type de maintenance.',
+      failedToSave: 'Échec de la sauvegarde du journal de maintenance.',
+      typeLabel: 'Type *',
+      typePlaceholder: 'ex. Vidange, Rotation des pneus, Freins…',
+      description: 'Description',
+      descriptionPlaceholder: 'Détails optionnels…',
+      date: 'Date *',
+      nextDueDate: 'Prochaine échéance',
+      cost: 'Coût (MAD)',
+      odometer: 'Kilométrage (km)',
+      skip: 'Ignorer',
+      saveLog: 'Enregistrer',
+      saving: 'Enregistrement…',
+      addNewVehicle: 'Ajouter un véhicule',
+      makeMissing: 'Veuillez sélectionner ou saisir une marque.',
+      modelMissing: 'Veuillez sélectionner ou saisir un modèle.',
+      plateMissing: 'Veuillez saisir un numéro de plaque.',
+      rateMissing: 'Veuillez saisir un tarif journalier valide.',
+      failedToAdd: "Échec de l'ajout du véhicule. Vérifiez tous les champs.",
+      make: 'Marque *',
+      selectMake: 'Sélectionner la marque…',
+      other: 'Autre…',
+      typeMake: 'Saisir la marque…',
+      model: 'Modèle *',
+      selectModel: 'Sélectionner le modèle…',
+      typeModel: 'Saisir le modèle…',
+      year: 'Année *',
+      category: 'Catégorie',
+      dailyRate: 'Tarif journalier (MAD) *',
+      licensePlate: "Plaque d'immatriculation *",
+      vin: 'VIN',
+      color: 'Couleur',
+      select: 'Sélectionner…',
+      typeColor: 'Saisir la couleur…',
+      seats: 'Places',
+      transmission: 'Transmission',
+      manual: 'Manuelle',
+      automatic: 'Automatique',
+      fuelType: 'Carburant',
+      pickupLocations: 'Lieux de départ',
+      pickupLocationsPlaceholder: 'ex. Aéroport de Casablanca, Centre-ville de Casablanca',
+      dropoffLocations: 'Lieux de retour',
+      dropoffLocationsPlaceholder: 'ex. Centre-ville de Rabat, Centre de Marrakech',
+      locationHint: 'Séparez plusieurs lieux par des virgules.',
+      allowDifferentDropoff: 'Autoriser un lieu de retour différent',
+      dropoffLocationsRequired: 'Ajoutez au moins un lieu de retour lorsque le retour différent est activé.',
+      sameDropoffOnly: 'Retour au même lieu uniquement',
+      differentDropoffAvailable: 'Retour différent disponible',
+      photosLabel: "Photos (jusqu'à 10)",
+      clickToAddPhotos: 'Cliquer pour ajouter des photos',
+      addMorePhotos: "Ajouter d'autres photos",
+      cancel: 'Annuler',
+      adding: 'Ajout…',
+      addVehicle: 'Ajouter le véhicule',
+      heading: 'Flotte',
+      vehicleCount: (n) => `${n} véhicule${n !== 1 ? 's' : ''} au total`,
+      searchPlaceholder: 'Rechercher marque, modèle, plaque…',
+      categoryLabels: {
+        ECONOMY: 'Économique',
+        COMPACT: 'Compacte',
+        MIDSIZE: 'Intermédiaire',
+        FULLSIZE: 'Grande berline',
+        SUV: 'SUV',
+        LUXURY: 'Luxe',
+        VAN: 'Van',
+        TRUCK: 'Camionnette',
+      },
+      fuelTypeLabels: {
+        GASOLINE: 'Essence',
+        DIESEL: 'Diesel',
+        ELECTRIC: 'Électrique',
+        HYBRID: 'Hybride',
+      },
+      allStatuses: 'Tous les statuts',
+      allCategories: 'Toutes les catégories',
+      allVisibility: 'Toute visibilité',
+      published: 'Publié',
+      unpublished: 'Non publié',
+      colVehicle: 'Véhicule',
+      colCategory: 'Catégorie',
+      colStatus: 'Statut',
+      colDailyRate: 'Tarif journalier',
+      colPublished: 'Publié',
+      colActions: 'Actions',
+      noPhoto: 'Pas de photo',
+      perDay: '/jour',
+      noVehicles: 'Aucun véhicule. Ajoutez votre premier véhicule pour commencer.',
+      noMatch: 'Aucun véhicule ne correspond aux filtres.',
+    },
+    vehicleDetail: {
+      tabDetails: 'Détails',
+      tabMaintenance: 'Entretien',
+      tabCalendar: 'Calendrier',
+      editBtn: 'Modifier',
+      cancelBtn: 'Annuler',
+      saveBtn: 'Enregistrer',
+      savingBtn: 'Enregistrement…',
+      uploadingPhotosBtn: 'Envoi des photos…',
+      loadingVehicle: 'Chargement du véhicule…',
+      photosHeading: 'Photos',
+      noPhotosYet: 'Aucune photo ajoutée.',
+      clickToAddPhotos: 'Cliquer pour ajouter des photos',
+      addMorePhotos: (n) => `Ajouter des photos (${n}/10)`,
+      maxPhotosReached: '10 photos maximum atteintes.',
+      newPhotoBadge: 'Nouveau',
+      vehicleDetailsHeading: 'Détails du véhicule',
+      labelCategory: 'Catégorie',
+      labelDailyRate: 'Tarif journalier',
+      labelStatus: 'Statut',
+      labelSeats: 'Places',
+      labelTransmission: 'Transmission',
+      labelFuelType: 'Carburant',
+      labelColor: 'Couleur',
+      labelOdometer: 'Kilométrage',
+      labelNotes: 'Notes',
+      makeLabel: 'Marque *',
+      selectMake: 'Sélectionner la marque…',
+      other: 'Autre…',
+      typeMake: 'Saisir la marque…',
+      modelLabel: 'Modèle *',
+      selectModel: 'Sélectionner le modèle…',
+      typeModel: 'Saisir le modèle…',
+      yearLabel: 'Année *',
+      dailyRateLabel: 'Tarif journalier (MAD) *',
+      licensePlateLabel: "Plaque d'immatriculation *",
+      vinLabel: 'VIN',
+      statusLabel: 'Statut',
+      colorLabel: 'Couleur',
+      selectColor: 'Sélectionner la couleur…',
+      typeColor: 'Saisir la couleur…',
+      seatsLabel: 'Places',
+      transmissionLabel: 'Transmission',
+      fuelTypeLabel: 'Carburant',
+      odometerLabel: 'Kilométrage (km)',
+      notesLabel: 'Notes',
+      optionalNotes: 'Notes optionnelles…',
+      optional: 'Optionnel…',
+      makeRequired: 'La marque est requise.',
+      modelRequired: 'Le modèle est requis.',
+      plateRequired: "La plaque d'immatriculation est requise.",
+      rateInvalid: 'Veuillez saisir un tarif journalier valide.',
+      failedSave: "Échec de l'enregistrement.",
+      maintenanceIntro: "Suivez l'entretien de ce véhicule. Cliquez sur Saisir pour enregistrer une intervention.",
+      logBtn: 'Saisir',
+      statusNone: 'Non enregistré',
+      statusOverdue: 'En retard',
+      statusDueSoon: 'Bientôt dû',
+      statusOk: 'À jour',
+      noRecord: 'Aucune intervention',
+      lastPrefix: 'Dernier :',
+      atKm: (km) => `à ${km} km`,
+      duePrefix: '· Échéance :',
+      orSep: 'ou',
+      kmLeft: (km) => `${km} km restants`,
+      overdueByKm: 'dépassé (km)',
+      serviceDateLabel: 'Date du service *',
+      odometerAtService: 'Kilométrage lors du service (km)',
+      nextDueDateLabel: 'Prochaine échéance (date)',
+      nextDueKmLabel: 'Prochaine échéance (km)',
+      costLabel: 'Coût (MAD)',
+      maintenanceNotesLabel: 'Notes',
+      saveLabel: 'Enregistrer',
+      savingLabel: 'Enregistrement…',
+      dateRequired: 'La date du service est requise.',
+      routineTypes: {
+        'Oil Change': "Vidange d'huile",
+        'Technical Inspection': 'Contrôle technique',
+        'Vehicle Registration': 'Carte grise',
+        'Car Tax': 'Vignette automobile',
+        'Tire Rotation': 'Rotation des pneus',
+        'Brake Inspection': 'Contrôle des freins',
+        'Air Filter': 'Filtre à air',
+        'Cabin Filter': 'Filtre habitacle',
+        'Battery Check': 'Vérification batterie',
+        'Belt / Chain Service': 'Courroie / Chaîne',
+        'Coolant Flush': 'Liquide de refroidissement',
+        'Transmission Service': 'Entretien transmission',
+      },
+    },
+    calendar: {
+      heading: 'Calendrier de disponibilité',
+      blockDates: 'Bloquer des dates',
+      clickSecondDay: (selected) => `Cliquez sur un second jour pour définir la fin du blocage (sélectionné : ${selected})`,
+      cancelSelection: 'annuler',
+      legendReserved: 'Réservé',
+      legendMaintenance: 'Maintenance',
+      legendBlocked: 'Bloqué',
+      legendAvailable: 'Disponible',
+      failedLoad: 'Échec du chargement du calendrier',
+      moreDays: (n) => `+${n} de plus`,
+      reservationsThisMonth: 'Réservations ce mois-ci',
+      blocksAndMaintenance: 'Blocages & maintenance',
+      removeBlockConfirm: 'Supprimer ce blocage ?',
+      failedDeleteBlock: 'Échec de la suppression du blocage',
+      modalTitle: 'Bloquer les dates du véhicule',
+      blockTypeLabel: 'Type de blocage',
+      manualBlock: 'Blocage manuel',
+      maintenanceBlock: 'Maintenance',
+      startDate: 'Date de début',
+      endDate: 'Date de fin (exclusive)',
+      reasonLabel: 'Raison',
+      optional: '(optionnel)',
+      reasonPlaceholderManual: 'ex. Réservé pour VIP, événement…',
+      reasonPlaceholderMaintenance: 'ex. Vidange, rotation des pneus…',
+      datesRequired: 'Les dates de début et de fin sont requises.',
+      endAfterStart: 'La date de fin doit être après la date de début.',
+      failedCreateBlock: 'Échec de la création du blocage',
+      cancel: 'Annuler',
+      saveBlock: 'Enregistrer',
+      saving: 'Enregistrement…',
+      removeBlock: 'Supprimer le blocage',
+      dayHeaders: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+    },
+    dashboardPage: {
+      failedToLoad: 'Échec du chargement du tableau de bord',
+      forbidden: "Vous n'avez pas la permission d'accéder à cette page. Un rôle Gestionnaire ou supérieur est requis.",
+      kpiTotalBookings: 'Total des réservations',
+      kpiActiveVehicles: 'Véhicules actifs',
+      kpiMonthlyRevenue: 'Revenus du mois',
+      kpiTotalCustomers: 'Total des clients',
+      vsLastMonth: 'vs mois dernier',
+      bookingSources: 'Sources de réservation',
+      barBookings: 'Réservations',
+      barRevenue: 'Revenus (MAD)',
+      noBookingData: 'Aucune donnée de réservation disponible',
+      quickStats: 'Statistiques rapides',
+      noData: 'Aucune donnée',
+      recentReservations: 'Réservations récentes',
+      viewAll: 'Voir tout →',
+      colBookingNum: 'Réservation #',
+      colCustomer: 'Client',
+      colVehicle: 'Véhicule',
+      colDates: 'Dates',
+      colStatus: 'Statut',
+      colTotal: 'Total',
+      noReservations: "Aucune réservation pour l'instant. Les réservations clients apparaîtront ici.",
+      trialEnds: (date) => `Vous êtes en période d'essai. Fin de l'essai le ${date}.`,
+      trialActive: "Vous êtes en période d'essai.",
+      pastDueMsg: 'Votre paiement est en retard. Veuillez mettre à jour vos informations de facturation.',
+      suspendedMsg: 'Votre compte a été suspendu. Veuillez contacter le support ou renouveler votre abonnement.',
+      manageBilling: 'Gérer l’abonnement →',
+      statusLabels: { CONFIRMED: 'Confirmé', PENDING: 'En attente', ACTIVE: 'Actif', COMPLETED: 'Terminé', CANCELLED: 'Annulé' },
+    },
+    reservations: {
+      heading: 'Réservations',
+      subtitle: 'Toutes les sources de réservation : tableau de bord, site public et marketplace.',
+      colCustomer: 'Client',
+      colVehicle: 'Véhicule',
+      colDates: 'Dates',
+      colSource: 'Source',
+      colStatus: 'Statut',
+      colTotal: 'Total',
+      noReservations: 'Aucune réservation pour le moment.',
+      loadingReservation: 'Chargement de la réservation…',
+      failedToLoad: 'Échec du chargement de la réservation',
+      confirmReservation: 'Confirmer la réservation',
+      checkInVehicle: 'Enregistrer le départ',
+      checkOutVehicle: 'Enregistrer le retour',
+      working: 'En cours…',
+      failedConfirm: 'Échec de la confirmation de la réservation',
+      failedCheckIn: 'Échec de l\'enregistrement du départ',
+      failedCheckOut: 'Échec de l\'enregistrement du retour',
+      sectionCustomer: 'Client',
+      noPhone: 'Aucun téléphone renseigné',
+      licenseLabel: 'Permis :',
+      notCaptured: 'Non saisi',
+      flaggedBadge: 'Signalé',
+      sectionVehicle: 'Véhicule',
+      sectionCharges: 'Facturation',
+      chargeDiscount: 'Remise',
+      chargeInsurance: 'Assurance',
+      chargeAdditionalDrivers: 'Conducteurs supplémentaires',
+      chargePricingAdjustments: 'Ajustements tarifaires',
+      chargeGrandTotal: 'Total général',
+      appliedInsurance: 'Assurance appliquée',
+      pricingRulesApplied: 'Règles tarifaires appliquées',
+      sectionAdditionalDrivers: 'Conducteurs supplémentaires',
+      driverLicenseLabel: 'Permis :',
+      driverChargeLabel: 'Frais :',
+      approveBtn: 'Approuver',
+      approvedBadge: 'Approuvé',
+      noApprovalNeeded: 'Pas d\'approbation requise',
+      noAdditionalDrivers: 'Aucun conducteur supplémentaire ajouté à cette réservation.',
+      failedApproveDriver: 'Échec de l\'approbation du conducteur supplémentaire',
+      sectionInspectionSummary: 'Résumé des inspections',
+      checkInInspectionLabel: 'Inspection de départ',
+      checkOutInspectionLabel: 'Inspection de retour',
+      savedBadge: 'Enregistré',
+      pendingBadge: 'En attente',
+      inspectionCardTitle: (type) => type === 'CHECKIN' ? 'Inspection de départ' : 'Inspection de retour',
+      inspectionSubtitle: 'Signalez les dommages existants et nouvellement découverts sur le schéma du véhicule.',
+      saveInspection: 'Enregistrer l\'inspection',
+      savingInspection: 'Enregistrement…',
+      failedSaveInspection: 'Échec de l\'enregistrement de l\'inspection',
+      diagramHelp: 'Cliquez n\'importe où sur le schéma pour ajouter un marqueur de dommage avec le type et la gravité sélectionnés.',
+      mileageLabel: 'Kilométrage',
+      fuelLevelLabel: 'Niveau de carburant',
+      fuelLevels: { FULL: 'Plein', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Vide' },
+      generalConditionLabel: 'État général',
+      employeeNotesLabel: 'Notes de l\'employé',
+      customerAcknowledged: 'Le client a reconnu cette inspection',
+      damageMarkersHeading: 'Marqueurs de dommages',
+      removeMarker: 'Supprimer',
+      noMarkers: 'Aucun marqueur de dommage enregistré.',
+      damageTypeLabels: { SCRATCH: 'Rayure', DENT: 'Bosse', CRACK: 'Fissure', CHIP: 'Éclat', MISSING: 'Manquant', STAIN: 'Tache', OTHER: 'Autre' },
+      severityLabels: { MINOR: 'Léger', MODERATE: 'Modéré', MAJOR: 'Majeur' },
+    },
+  },
+  ar: {
+    nav: {
+      dashboard: 'لوحة التحكم',
+      fleet: 'الأسطول',
+      reservations: 'الحجوزات',
+      onlineReservations: 'الحجوزات الإلكترونية',
+      customers: 'العملاء',
+      offers: 'العروض',
+      team: 'الفريق',
+      reports: 'التقارير',
+      subscription: 'الاشتراك',
+      billing: 'فوترة العملاء',
+      contracts: 'العقود',
+      notifications: 'الإشعارات',
+      settings: 'الإعدادات',
+      reviews: 'التقييمات',
+      complaints: 'الشكاوى',
+    },
+    titles: {
+      '/': 'لوحة التحكم',
+      '/fleet': 'إدارة الأسطول',
+      '/reservations': 'الحجوزات',
+      '/reservations/new': 'حجز سيارة',
+      '/online-reservations': 'الحجوزات الإلكترونية',
+      '/customers': 'العملاء',
+      '/offers': 'العروض',
+      '/team': 'الفريق',
+      '/reports': 'التقارير',
+      '/subscription': 'الاشتراك',
+      '/billing': 'فوترة العملاء',
+      '/contracts': 'العقود',
+      '/notifications': 'الإشعارات',
+      '/settings': 'الإعدادات',
+    },
+    notifications: 'الإشعارات',
+    noNewNotifications: 'لا توجد إشعارات جديدة',
+    unreadNotifications: (count) => `${count} إشعار غير مقروء`,
+    signOut: 'تسجيل الخروج',
+    workspaceUser: 'مستخدم مساحة العمل',
+    localAuth: 'مصادقة محلية',
+    language: 'اللغة',
+    theme: 'الوضع',
+    light: 'فاتح',
+    dark: 'داكن',
+    fleet: {
+      statusLabels: { AVAILABLE: 'متاح', RESERVED: 'محجوز', READY: 'جاهز للتسليم', RENTED: 'قيد التأجير', RETURNED: 'مُعاد', NEEDS_CLEANING: 'يحتاج تنظيف', MAINTENANCE: 'صيانة', DAMAGE_REVIEW: 'مراجعة أضرار', OUT_OF_SERVICE: 'خارج الخدمة' },
+      logMaintenance: 'تسجيل الصيانة',
+      maintenanceSubtitle: (name) => `تم تعيين ${name} في وضع الصيانة. أضف التفاصيل أدناه.`,
+      maintenanceTypeRequired: 'الرجاء إدخال نوع الصيانة.',
+      failedToSave: 'فشل حفظ سجل الصيانة.',
+      typeLabel: 'النوع *',
+      typePlaceholder: 'مثال: تغيير الزيت، تدوير الإطارات، خدمة الفرامل…',
+      description: 'الوصف',
+      descriptionPlaceholder: 'تفاصيل اختيارية…',
+      date: 'التاريخ *',
+      nextDueDate: 'تاريخ الاستحقاق التالي',
+      cost: 'التكلفة (درهم)',
+      odometer: 'عداد المسافة (كم)',
+      skip: 'تخطي',
+      saveLog: 'حفظ السجل',
+      saving: 'جارٍ الحفظ…',
+      addNewVehicle: 'إضافة مركبة جديدة',
+      makeMissing: 'الرجاء اختيار أو إدخال الماركة.',
+      modelMissing: 'الرجاء اختيار أو إدخال الطراز.',
+      plateMissing: 'الرجاء إدخال رقم اللوحة.',
+      rateMissing: 'الرجاء إدخال سعر يومي صحيح.',
+      failedToAdd: 'فشل إضافة المركبة. يرجى التحقق من جميع الحقول.',
+      make: 'الماركة *',
+      selectMake: 'اختر الماركة…',
+      other: 'أخرى…',
+      typeMake: 'اكتب الماركة…',
+      model: 'الطراز *',
+      selectModel: 'اختر الطراز…',
+      typeModel: 'اكتب الطراز…',
+      year: 'السنة *',
+      category: 'الفئة',
+      dailyRate: 'السعر اليومي (درهم) *',
+      licensePlate: 'رقم اللوحة *',
+      vin: 'رقم الهيكل',
+      color: 'اللون',
+      select: 'اختر…',
+      typeColor: 'اكتب اللون…',
+      seats: 'المقاعد',
+      transmission: 'ناقل الحركة',
+      manual: 'يدوي',
+      automatic: 'أوتوماتيكي',
+      fuelType: 'نوع الوقود',
+      pickupLocations: 'مواقع الاستلام',
+      pickupLocationsPlaceholder: 'مثال: مطار الدار البيضاء، وسط الدار البيضاء',
+      dropoffLocations: 'مواقع الإرجاع',
+      dropoffLocationsPlaceholder: 'مثال: وسط الرباط، مركز مراكش',
+      locationHint: 'افصل بين المواقع المتعددة بفواصل.',
+      allowDifferentDropoff: 'السماح بموقع إرجاع مختلف',
+      dropoffLocationsRequired: 'أضف موقع إرجاع واحداً على الأقل عند تفعيل الإرجاع المختلف.',
+      sameDropoffOnly: 'الإرجاع في نفس الموقع فقط',
+      differentDropoffAvailable: 'الإرجاع المختلف متاح',
+      photosLabel: 'الصور (حتى 10)',
+      clickToAddPhotos: 'انقر لإضافة صور',
+      addMorePhotos: 'إضافة المزيد من الصور',
+      cancel: 'إلغاء',
+      adding: 'جارٍ الإضافة…',
+      addVehicle: 'إضافة المركبة',
+      heading: 'الأسطول',
+      vehicleCount: (n) => `${n} مركبة إجمالاً`,
+      searchPlaceholder: 'بحث عن الماركة، الطراز، اللوحة…',
+      categoryLabels: {
+        ECONOMY: 'اقتصادية',
+        COMPACT: 'مدمجة',
+        MIDSIZE: 'متوسطة',
+        FULLSIZE: 'كبيرة',
+        SUV: 'دفع رباعي',
+        LUXURY: 'فاخرة',
+        VAN: 'فان',
+        TRUCK: 'شاحنة',
+      },
+      fuelTypeLabels: {
+        GASOLINE: 'بنزين',
+        DIESEL: 'ديزل',
+        ELECTRIC: 'كهربائي',
+        HYBRID: 'هجين',
+      },
+      allStatuses: 'جميع الحالات',
+      allCategories: 'جميع الفئات',
+      allVisibility: 'جميع الرؤية',
+      published: 'منشور',
+      unpublished: 'غير منشور',
+      colVehicle: 'المركبة',
+      colCategory: 'الفئة',
+      colStatus: 'الحالة',
+      colDailyRate: 'السعر اليومي',
+      colPublished: 'النشر',
+      colActions: 'الإجراءات',
+      noPhoto: 'لا توجد صورة',
+      perDay: '/يوم',
+      noVehicles: 'لا توجد مركبات. أضف مركبتك الأولى للبدء.',
+      noMatch: 'لا توجد مركبات تطابق المرشحات.',
+    },
+    vehicleDetail: {
+      tabDetails: 'التفاصيل',
+      tabMaintenance: 'الصيانة',
+      tabCalendar: 'التقويم',
+      editBtn: 'تعديل',
+      cancelBtn: 'إلغاء',
+      saveBtn: 'حفظ',
+      savingBtn: 'جارٍ الحفظ…',
+      uploadingPhotosBtn: 'جارٍ رفع الصور…',
+      loadingVehicle: 'جارٍ تحميل المركبة…',
+      photosHeading: 'الصور',
+      noPhotosYet: 'لم يتم إضافة أي صور.',
+      clickToAddPhotos: 'انقر لإضافة صور',
+      addMorePhotos: (n) => `إضافة المزيد من الصور (${n}/10)`,
+      maxPhotosReached: 'تم الوصول إلى الحد الأقصى (10 صور).',
+      newPhotoBadge: 'جديد',
+      vehicleDetailsHeading: 'تفاصيل المركبة',
+      labelCategory: 'الفئة',
+      labelDailyRate: 'السعر اليومي',
+      labelStatus: 'الحالة',
+      labelSeats: 'المقاعد',
+      labelTransmission: 'ناقل الحركة',
+      labelFuelType: 'نوع الوقود',
+      labelColor: 'اللون',
+      labelOdometer: 'عداد المسافة',
+      labelNotes: 'الملاحظات',
+      makeLabel: 'الماركة *',
+      selectMake: 'اختر الماركة…',
+      other: 'أخرى…',
+      typeMake: 'اكتب الماركة…',
+      modelLabel: 'الطراز *',
+      selectModel: 'اختر الطراز…',
+      typeModel: 'اكتب الطراز…',
+      yearLabel: 'السنة *',
+      dailyRateLabel: 'السعر اليومي (درهم) *',
+      licensePlateLabel: 'رقم اللوحة *',
+      vinLabel: 'رقم الهيكل',
+      statusLabel: 'الحالة',
+      colorLabel: 'اللون',
+      selectColor: 'اختر اللون…',
+      typeColor: 'اكتب اللون…',
+      seatsLabel: 'المقاعد',
+      transmissionLabel: 'ناقل الحركة',
+      fuelTypeLabel: 'نوع الوقود',
+      odometerLabel: 'عداد المسافة (كم)',
+      notesLabel: 'الملاحظات',
+      optionalNotes: 'ملاحظات اختيارية…',
+      optional: 'اختياري…',
+      makeRequired: 'الماركة مطلوبة.',
+      modelRequired: 'الطراز مطلوب.',
+      plateRequired: 'رقم اللوحة مطلوب.',
+      rateInvalid: 'يرجى إدخال سعر يومي صحيح.',
+      failedSave: 'فشل الحفظ.',
+      maintenanceIntro: 'تتبع صيانة هذه المركبة. انقر على سجّل لأي عنصر لتسجيل الخدمة.',
+      logBtn: 'سجّل',
+      statusNone: 'غير مسجل',
+      statusOverdue: 'متأخر',
+      statusDueSoon: 'قريباً',
+      statusOk: 'محدّث',
+      noRecord: 'لا يوجد سجل',
+      lastPrefix: 'آخر:',
+      atKm: (km) => `عند ${km} كم`,
+      duePrefix: '· الموعد:',
+      orSep: 'أو',
+      kmLeft: (km) => `${km} كم متبقية`,
+      overdueByKm: 'تجاوز المسافة',
+      serviceDateLabel: 'تاريخ الخدمة *',
+      odometerAtService: 'قراءة العداد عند الخدمة (كم)',
+      nextDueDateLabel: 'تاريخ الخدمة القادمة',
+      nextDueKmLabel: 'المسافة عند الخدمة القادمة (كم)',
+      costLabel: 'التكلفة (درهم)',
+      maintenanceNotesLabel: 'الملاحظات',
+      saveLabel: 'حفظ',
+      savingLabel: 'جارٍ الحفظ…',
+      dateRequired: 'تاريخ الخدمة مطلوب.',
+      routineTypes: {
+        'Oil Change': 'تغيير الزيت',
+        'Technical Inspection': 'الفحص التقني',
+        'Vehicle Registration': 'تسجيل المركبة',
+        'Car Tax': 'الضريبة السنوية',
+        'Tire Rotation': 'تدوير الإطارات',
+        'Brake Inspection': 'فحص الفرامل',
+        'Air Filter': 'فلتر الهواء',
+        'Cabin Filter': 'فلتر المقصورة',
+        'Battery Check': 'فحص البطارية',
+        'Belt / Chain Service': 'خدمة السير / السلسلة',
+        'Coolant Flush': 'تغيير سائل التبريد',
+        'Transmission Service': 'خدمة ناقل الحركة',
+      },
+    },
+    calendar: {
+      heading: 'تقويم التوفر',
+      blockDates: 'حجب التواريخ',
+      clickSecondDay: (selected) => `انقر على يوم ثانٍ لتحديد نهاية الحجب (المختار: ${selected})`,
+      cancelSelection: 'إلغاء',
+      legendReserved: 'محجوز',
+      legendMaintenance: 'صيانة',
+      legendBlocked: 'محجوب',
+      legendAvailable: 'متاح',
+      failedLoad: 'فشل تحميل التقويم',
+      moreDays: (n) => `+${n} أكثر`,
+      reservationsThisMonth: 'الحجوزات هذا الشهر',
+      blocksAndMaintenance: 'الحجب والصيانة',
+      removeBlockConfirm: 'حذف هذا الحجب؟',
+      failedDeleteBlock: 'فشل حذف الحجب',
+      modalTitle: 'حجب تواريخ المركبة',
+      blockTypeLabel: 'نوع الحجب',
+      manualBlock: 'حجب يدوي',
+      maintenanceBlock: 'صيانة',
+      startDate: 'تاريخ البداية',
+      endDate: 'تاريخ النهاية (غير شامل)',
+      reasonLabel: 'السبب',
+      optional: '(اختياري)',
+      reasonPlaceholderManual: 'مثال: محجوز لشخص مميز، فعالية…',
+      reasonPlaceholderMaintenance: 'مثال: تغيير الزيت، تدوير الإطارات…',
+      datesRequired: 'تواريخ البداية والنهاية مطلوبة.',
+      endAfterStart: 'يجب أن يكون تاريخ النهاية بعد تاريخ البداية.',
+      failedCreateBlock: 'فشل إنشاء الحجب',
+      cancel: 'إلغاء',
+      saveBlock: 'حفظ',
+      saving: 'جارٍ الحفظ…',
+      removeBlock: 'حذف الحجب',
+      dayHeaders: ['أحد', 'اثن', 'ثلا', 'أرب', 'خمي', 'جمع', 'سبت'],
+    },
+    dashboardPage: {
+      failedToLoad: 'فشل تحميل لوحة التحكم',
+      forbidden: 'ليس لديك صلاحية الوصول إلى هذه الصفحة. يلزم دور المدير أو أعلى.',
+      kpiTotalBookings: 'إجمالي الحجوزات',
+      kpiActiveVehicles: 'المركبات النشطة',
+      kpiMonthlyRevenue: 'الإيرادات الشهرية',
+      kpiTotalCustomers: 'إجمالي العملاء',
+      vsLastMonth: 'مقارنة بالشهر الماضي',
+      bookingSources: 'مصادر الحجز',
+      barBookings: 'الحجوزات',
+      barRevenue: 'الإيرادات (درهم)',
+      noBookingData: 'لا توجد بيانات حجز متاحة بعد',
+      quickStats: 'إحصائيات سريعة',
+      noData: 'لا توجد بيانات',
+      recentReservations: 'الحجوزات الأخيرة',
+      viewAll: 'عرض الكل ←',
+      colBookingNum: 'الحجز #',
+      colCustomer: 'العميل',
+      colVehicle: 'المركبة',
+      colDates: 'التواريخ',
+      colStatus: 'الحالة',
+      colTotal: 'الإجمالي',
+      noReservations: 'لا توجد حجوزات بعد. ستظهر الحجوزات هنا عند قيام العملاء بالحجز.',
+      trialEnds: (date) => `أنت في فترة تجريبية. تنتهي في ${date}.`,
+      trialActive: 'أنت في فترة تجريبية مجانية.',
+      pastDueMsg: 'دفعتك متأخرة. يرجى تحديث معلومات الفوترة.',
+      suspendedMsg: 'تم تعليق حسابك. يرجى التواصل مع الدعم أو تجديد اشتراكك.',
+      manageBilling: 'إدارة الاشتراك ←',
+      statusLabels: { CONFIRMED: 'مؤكد', PENDING: 'قيد الانتظار', ACTIVE: 'نشط', COMPLETED: 'مكتمل', CANCELLED: 'ملغى' },
+    },
+    reservations: {
+      heading: 'الحجوزات',
+      subtitle: 'جميع مصادر الحجز: لوحة التحكم، الموقع العام، والسوق الإلكتروني.',
+      colCustomer: 'العميل',
+      colVehicle: 'المركبة',
+      colDates: 'التواريخ',
+      colSource: 'المصدر',
+      colStatus: 'الحالة',
+      colTotal: 'الإجمالي',
+      noReservations: 'لا توجد حجوزات بعد.',
+      loadingReservation: 'جارٍ تحميل الحجز…',
+      failedToLoad: 'فشل تحميل الحجز',
+      confirmReservation: 'تأكيد الحجز',
+      checkInVehicle: 'تسجيل الاستلام',
+      checkOutVehicle: 'تسجيل الإرجاع',
+      working: 'جارٍ التنفيذ…',
+      failedConfirm: 'فشل تأكيد الحجز',
+      failedCheckIn: 'فشل تسجيل الاستلام',
+      failedCheckOut: 'فشل تسجيل الإرجاع',
+      sectionCustomer: 'العميل',
+      noPhone: 'لم يُدخل رقم هاتف',
+      licenseLabel: 'الرخصة:',
+      notCaptured: 'غير مُسجّل',
+      flaggedBadge: 'مُبلَّغ عنه',
+      sectionVehicle: 'المركبة',
+      sectionCharges: 'الرسوم',
+      chargeDiscount: 'الخصم',
+      chargeInsurance: 'التأمين',
+      chargeAdditionalDrivers: 'السائقون الإضافيون',
+      chargePricingAdjustments: 'تعديلات التسعير',
+      chargeGrandTotal: 'الإجمالي الكلي',
+      appliedInsurance: 'التأمين المطبق',
+      pricingRulesApplied: 'قواعد التسعير المطبقة',
+      sectionAdditionalDrivers: 'السائقون الإضافيون',
+      driverLicenseLabel: 'الرخصة:',
+      driverChargeLabel: 'الرسوم:',
+      approveBtn: 'موافقة',
+      approvedBadge: 'مُوافَق عليه',
+      noApprovalNeeded: 'لا يحتاج موافقة',
+      noAdditionalDrivers: 'لم يتم إضافة سائقين إضافيين لهذا الحجز.',
+      failedApproveDriver: 'فشلت الموافقة على السائق الإضافي',
+      sectionInspectionSummary: 'ملخص الفحص',
+      checkInInspectionLabel: 'فحص الاستلام',
+      checkOutInspectionLabel: 'فحص الإرجاع',
+      savedBadge: 'محفوظ',
+      pendingBadge: 'معلّق',
+      inspectionCardTitle: (type) => type === 'CHECKIN' ? 'فحص الاستلام' : 'فحص الإرجاع',
+      inspectionSubtitle: 'حدد الأضرار الموجودة والمكتشفة حديثاً مباشرة على مخطط المركبة.',
+      saveInspection: 'حفظ الفحص',
+      savingInspection: 'جارٍ الحفظ…',
+      failedSaveInspection: 'فشل حفظ الفحص',
+      diagramHelp: 'انقر في أي مكان على المخطط لإضافة علامة ضرر بالنوع والخطورة المحددين.',
+      mileageLabel: 'عداد المسافة',
+      fuelLevelLabel: 'مستوى الوقود',
+      fuelLevels: { FULL: 'ممتلئ', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'فارغ' },
+      generalConditionLabel: 'الحالة العامة',
+      employeeNotesLabel: 'ملاحظات الموظف',
+      customerAcknowledged: 'وافق العميل على هذا الفحص',
+      damageMarkersHeading: 'علامات الضرر',
+      removeMarker: 'حذف',
+      noMarkers: 'لا توجد علامات ضرر محفوظة.',
+      damageTypeLabels: { SCRATCH: 'خدش', DENT: 'انبعاج', CRACK: 'تشقق', CHIP: 'تقشر', MISSING: 'مفقود', STAIN: 'بقعة', OTHER: 'أخرى' },
+      severityLabels: { MINOR: 'طفيف', MODERATE: 'متوسط', MAJOR: 'شديد' },
+    },
+  },
+}
+
+type I18nContextValue = {
+  language: DashboardLanguage
+  setLanguage: (value: DashboardLanguage) => void
+  theme: DashboardTheme
+  setTheme: (value: DashboardTheme) => void
+  dict: DashboardDictionary
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null)
+const DASHBOARD_LANGUAGE_KEY = 'dashboard-language'
+
+function normalizeLanguage(value: string | null | undefined): DashboardLanguage {
+  return value === 'fr' || value === 'ar' || value === 'en' ? value : 'en'
+}
+
+function detectBrowserLanguage(): DashboardLanguage | null {
+  if (typeof navigator === 'undefined') return null
+  const langs = Array.from(navigator.languages ?? [navigator.language])
+  for (const lang of langs) {
+    const code = lang.split('-')[0].toLowerCase()
+    if (code === 'fr' || code === 'ar' || code === 'en') return code as DashboardLanguage
+  }
+  return null
+}
+
+export function DashboardI18nProvider({
+  children,
+  initialLanguage = 'en',
+}: {
+  children: React.ReactNode
+  initialLanguage?: DashboardLanguage
+}) {
+  const [language, setLanguageState] = useState<DashboardLanguage>(initialLanguage)
+  const [theme, setThemeState] = useState<DashboardTheme>('light')
+  const themeInitialized = useRef(false)
+  // Skip the very first write so we don't overwrite a stored preference with the
+  // server-resolved initialLanguage before the read effect has a chance to apply it.
+  const skipFirstLangWrite = useRef(true)
+
+  function applyLanguage(nextLanguage: DashboardLanguage) {
+    if (nextLanguage === language) return
+
+    if (typeof document !== 'undefined') {
+      document.documentElement.lang = nextLanguage
+      document.documentElement.dir = nextLanguage === 'ar' ? 'rtl' : 'ltr'
+      writeScopedPreference(SHARED_LANGUAGE_KEY, nextLanguage, [DASHBOARD_LANGUAGE_KEY])
+      document.cookie = `${SHARED_LANGUAGE_COOKIE}=${nextLanguage}; path=/; max-age=31536000; samesite=lax`
+      document.cookie = `${DASHBOARD_LANGUAGE_KEY}=${nextLanguage}; path=/; max-age=31536000; samesite=lax`
+    }
+
+    setLanguageState(nextLanguage)
+  }
+
+  function applyTheme(nextTheme: DashboardTheme) {
+    if (nextTheme === theme) return
+
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.remove('light', 'dark')
+      document.documentElement.classList.add(nextTheme === 'light' ? 'light' : 'dark')
+      document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
+      document.body.dataset.theme = nextTheme
+      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['dashboard-theme'])
+    }
+
+    setThemeState(nextTheme)
+  }
+
+  useEffect(() => {
+    const stored = readScopedPreference(SHARED_LANGUAGE_KEY, [DASHBOARD_LANGUAGE_KEY])
+    if (stored !== null) {
+      const next = normalizeLanguage(stored)
+      if (next !== language) setLanguageState(next)
+    } else {
+      const detected = detectBrowserLanguage()
+      if (detected && detected !== language) setLanguageState(detected)
+    }
+  }, [])
+
+  useEffect(() => {
+    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['dashboard-theme'])
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      if (storedTheme !== theme) setThemeState(storedTheme)
+      return
+    }
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'dark') {
+      setThemeState('dark')
+    }
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.lang = language
+    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
+    if (skipFirstLangWrite.current) {
+      skipFirstLangWrite.current = false
+      return
+    }
+    writeScopedPreference(SHARED_LANGUAGE_KEY, language, [DASHBOARD_LANGUAGE_KEY])
+    document.cookie = `${SHARED_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; samesite=lax`
+    document.cookie = `${DASHBOARD_LANGUAGE_KEY}=${language}; path=/; max-age=31536000; samesite=lax`
+  }, [language])
+
+  useEffect(() => {
+    if (!themeInitialized.current) {
+      // Skip first run: inline script already applied the correct class; writing 'light' here would flash and corrupt storage.
+      themeInitialized.current = true
+      return
+    }
+    document.documentElement.classList.remove('light', 'dark')
+    document.documentElement.classList.add(theme === 'light' ? 'light' : 'dark')
+    document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark'
+    document.body.dataset.theme = theme
+    writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
+  }, [theme])
+
+  useEffect(() => {
+    function handleAuthChanged() {
+      const scopedLanguage = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
+      const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
+
+      if (scopedLanguage) {
+        // Employee has a stored preference — apply it.
+        const next = normalizeLanguage(scopedLanguage)
+        if (next !== language) setLanguageState(next)
+      } else {
+        // No scoped pref yet (new login). Promote any base preference that was set
+        // before login (e.g., language selected on the sign-up page) to the scoped key.
+        const baseLang = readScopedPreference(SHARED_LANGUAGE_KEY, [DASHBOARD_LANGUAGE_KEY])
+        const langToWrite = baseLang ? normalizeLanguage(baseLang) : language
+        if (langToWrite !== language) setLanguageState(langToWrite)
+        writeScopedPreference(SHARED_LANGUAGE_KEY, langToWrite, [DASHBOARD_LANGUAGE_KEY])
+      }
+
+      if (scopedTheme === 'light' || scopedTheme === 'dark') {
+        if (scopedTheme !== theme) setThemeState(scopedTheme)
+      } else {
+        writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
+      }
+    }
+
+    window.addEventListener('rentaldrivego:auth-changed', handleAuthChanged as EventListener)
+    return () => window.removeEventListener('rentaldrivego:auth-changed', handleAuthChanged as EventListener)
+  }, [language, theme])
+
+  const value = useMemo(
+    () => ({ language, setLanguage: applyLanguage, theme, setTheme: applyTheme, dict: dictionaries[language] }),
+    [language, theme],
+  )
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+}
+
+export function useDashboardI18n() {
+  const context = useContext(I18nContext)
+  if (!context) throw new Error('useDashboardI18n must be used within DashboardI18nProvider')
+  return context
+}
+
+export function DashboardLanguageSwitcher() {
+  const { language, setLanguage } = useDashboardI18n()
+  const [open, setOpen] = useState(false)
+  const [embedded, setEmbedded] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setEmbedded(window.self !== window.top)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function onMouseDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [open])
+
+  if (embedded) return null
+
+  const languageMeta = {
+    en: { flag: '🇺🇸', shortLabel: 'EN' },
+    fr: { flag: '🇫🇷', shortLabel: 'FR' },
+    ar: { flag: '🇲🇦', shortLabel: 'AR' },
+  } as const
+
+  function handleLanguageChange(value: DashboardLanguage) {
+    setLanguage(value)
+    apiFetch('/auth/employee/me/language', {
+      method: 'PATCH',
+      body: JSON.stringify({ language: value }),
+    }).catch(() => {})
+    setOpen(false)
+  }
+
+  const current = languageMeta[language]
+
+  return (
+    <div ref={ref} className="relative flex-1">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/85 dark:text-stone-200 dark:hover:bg-blue-900/40"
+      >
+        <span className="flex items-center gap-1.5">
+          <span aria-hidden="true">{current.flag}</span>
+          <span>{current.shortLabel}</span>
+        </span>
+        <svg className={`h-3 w-3 text-stone-400 transition-transform dark:text-stone-500 ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-blue-950">
+          {(['en', 'fr', 'ar'] as DashboardLanguage[]).map((value) => {
+            const meta = languageMeta[value]
+            const active = value === language
+            return (
+              <button
+                key={value}
+                type="button"
+                onClick={() => handleLanguageChange(value)}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
+                  active
+                    ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40'
+                }`}
+              >
+                <span aria-hidden="true">{meta.flag}</span>
+                <span>{meta.shortLabel}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function DashboardThemeSwitcher() {
+  const { theme, setTheme, dict } = useDashboardI18n()
+  const [open, setOpen] = useState(false)
+  const [embedded, setEmbedded] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setEmbedded(window.self !== window.top)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function onMouseDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [open])
+
+  if (embedded) return null
+
+  return (
+    <div ref={ref} className="relative flex-1">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/85 dark:text-stone-200 dark:hover:bg-blue-900/40"
+      >
+        <span className="flex items-center gap-1.5">
+          {theme === 'light' ? (
+            <svg className="h-3.5 w-3.5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+            </svg>
+          ) : (
+            <svg className="h-3.5 w-3.5 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+            </svg>
+          )}
+          <span>{theme === 'light' ? dict.light : dict.dark}</span>
+        </span>
+        <svg className={`h-3 w-3 text-stone-400 transition-transform dark:text-stone-500 ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-blue-950">
+          {(['light', 'dark'] as DashboardTheme[]).map((value) => {
+            const active = value === theme
+            return (
+              <button
+                key={value}
+                type="button"
+                onClick={() => { setTheme(value); setOpen(false) }}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
+                  active
+                    ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40'
+                }`}
+              >
+                {value === 'light' ? (
+                  <svg className="h-3.5 w-3.5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                  </svg>
+                ) : (
+                  <svg className="h-3.5 w-3.5 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                  </svg>
+                )}
+                <span>{value === 'light' ? dict.light : dict.dark}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/components/VehicleCalendar.boundary.test.ts b/dashboard/src/components/VehicleCalendar.boundary.test.ts
new file mode 100644
index 0000000..d46c3f0
--- /dev/null
+++ b/dashboard/src/components/VehicleCalendar.boundary.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import {
+  calendarGridDays,
+  daysBetween,
+  eventsForCalendarDay,
+  isSameDay,
+  parseDateStr,
+  selectedBlockRange,
+  toDateStr,
+  type CalendarEvent,
+} from './VehicleCalendar'
+
+describe('VehicleCalendar helpers', () => {
+  it('formats and parses local date-only strings without shifting the calendar day', () => {
+    const parsed = parseDateStr('2026-02-09')
+
+    expect(parsed.getFullYear()).toBe(2026)
+    expect(parsed.getMonth()).toBe(1)
+    expect(parsed.getDate()).toBe(9)
+    expect(toDateStr(parsed)).toBe('2026-02-09')
+  })
+
+  it('builds a full week-aligned month grid with leading and trailing blanks', () => {
+    const grid = calendarGridDays(2026, 2)
+
+    expect(grid).toHaveLength(28)
+    expect(grid[0]?.getDate()).toBe(1)
+    expect(grid.at(-1)?.getDate()).toBe(28)
+
+    const march = calendarGridDays(2026, 3)
+    expect(march).toHaveLength(35)
+    expect(march[0]?.getDate()).toBe(1)
+    expect(march[6]?.getDate()).toBe(7)
+    expect(march.at(-1)).toBeNull()
+  })
+
+  it('treats reservation end dates as exclusive when mapping events to days', () => {
+    const events: CalendarEvent[] = [
+      { id: 'r1', type: 'RESERVATION', startDate: '2026-06-10T10:00:00.000Z', endDate: '2026-06-13T10:00:00.000Z', status: 'CONFIRMED', label: 'Reservation' },
+      { id: 'b1', type: 'BLOCK', startDate: '2026-06-13T00:00:00.000Z', endDate: '2026-06-14T00:00:00.000Z', status: null, label: 'Block' },
+    ]
+
+    expect(eventsForCalendarDay(events, parseDateStr('2026-06-10')).map((event) => event.id)).toEqual(['r1'])
+    expect(eventsForCalendarDay(events, parseDateStr('2026-06-12')).map((event) => event.id)).toEqual(['r1'])
+    expect(eventsForCalendarDay(events, parseDateStr('2026-06-13')).map((event) => event.id)).toEqual(['b1'])
+  })
+
+  it('normalizes two clicked days into an inclusive visual range with exclusive end date', () => {
+    expect(selectedBlockRange('2026-06-12', parseDateStr('2026-06-10'))).toEqual({
+      startDate: '2026-06-10',
+      endDate: '2026-06-13',
+    })
+    expect(selectedBlockRange('2026-06-10', parseDateStr('2026-06-12'))).toEqual({
+      startDate: '2026-06-10',
+      endDate: '2026-06-13',
+    })
+  })
+
+  it('compares calendar days and calculates day spans independent of clock time', () => {
+    expect(isSameDay(new Date(2026, 5, 9, 1), new Date(2026, 5, 9, 23))).toBe(true)
+    expect(isSameDay(new Date(2026, 5, 9), new Date(2026, 5, 10))).toBe(false)
+    expect(daysBetween(parseDateStr('2026-06-09'), parseDateStr('2026-06-12'))).toBe(3)
+  })
+})
diff --git a/dashboard/src/components/VehicleCalendar.tsx b/dashboard/src/components/VehicleCalendar.tsx
new file mode 100644
index 0000000..d6e6952
--- /dev/null
+++ b/dashboard/src/components/VehicleCalendar.tsx
@@ -0,0 +1,432 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { ChevronLeft, ChevronRight, Plus, X, Wrench, Ban, CalendarDays } from 'lucide-react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type EventType = 'RESERVATION' | 'MAINTENANCE' | 'BLOCK'
+
+export interface CalendarEvent {
+  id: string
+  type: EventType
+  startDate: string
+  endDate: string
+  status: string | null
+  label: string
+}
+
+interface Props {
+  vehicleId: string
+}
+
+const EVENT_STYLES: Record<EventType, { bg: string; text: string; border: string; dot: string }> = {
+  RESERVATION: { bg: 'bg-blue-100',   text: 'text-blue-800',   border: 'border-blue-300',   dot: 'bg-blue-500'   },
+  MAINTENANCE: { bg: 'bg-orange-100',  text: 'text-orange-800',  border: 'border-orange-300',  dot: 'bg-orange-500'  },
+  BLOCK:       { bg: 'bg-red-100',    text: 'text-red-800',    border: 'border-red-300',    dot: 'bg-red-500'    },
+}
+
+export function toDateStr(d: Date): string {
+  return d.toISOString().slice(0, 10)
+}
+
+export function parseDateStr(s: string): Date {
+  const [y, m, day] = s.split('-').map(Number)
+  return new Date(y, m - 1, day)
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+export function daysBetween(start: Date, end: Date): number {
+  return Math.round((end.getTime() - start.getTime()) / 86400000)
+}
+
+
+export function calendarGridDays(year: number, month: number): (Date | null)[] {
+  const firstDay = new Date(year, month - 1, 1)
+  const daysInMonth = new Date(year, month, 0).getDate()
+  const startOffset = firstDay.getDay()
+
+  const gridDays: (Date | null)[] = []
+  for (let i = 0; i < startOffset; i++) gridDays.push(null)
+  for (let d = 1; d <= daysInMonth; d++) gridDays.push(new Date(year, month - 1, d))
+  while (gridDays.length % 7 !== 0) gridDays.push(null)
+  return gridDays
+}
+
+export function eventsForCalendarDay(events: CalendarEvent[], day: Date): CalendarEvent[] {
+  const dayStr = toDateStr(day)
+  return events.filter((e) => {
+    const start = e.startDate.slice(0, 10)
+    const end = e.endDate.slice(0, 10)
+    return start <= dayStr && dayStr < end
+  })
+}
+
+export function selectedBlockRange(selectStart: string, clickedDay: Date): { startDate: string; endDate: string } {
+  const clicked = toDateStr(clickedDay)
+  const start = selectStart < clicked ? selectStart : clicked
+  const end = selectStart < clicked ? clicked : selectStart
+  return {
+    startDate: start,
+    endDate: toDateStr(new Date(parseDateStr(end).getTime() + 86400000)),
+  }
+}
+
+
+export default function VehicleCalendar({ vehicleId }: Props) {
+  const { dict, language } = useDashboardI18n()
+  const c = dict.calendar
+  const today = new Date()
+  const [year,  setYear]  = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth() + 1)
+  const [events, setEvents]    = useState<CalendarEvent[]>([])
+  const [loading, setLoading]  = useState(true)
+  const [error, setError]      = useState<string | null>(null)
+
+  // Block-creation modal
+  const [showModal, setShowModal]       = useState(false)
+  const [blockStart, setBlockStart]     = useState('')
+  const [blockEnd,   setBlockEnd]       = useState('')
+  const [blockReason, setBlockReason]   = useState('')
+  const [blockType,   setBlockType]     = useState<'MANUAL' | 'MAINTENANCE'>('MANUAL')
+  const [saving, setSaving]             = useState(false)
+  const [saveError, setSaveError]       = useState<string | null>(null)
+
+  // Day-click selection for quick create
+  const [selectStart, setSelectStart]   = useState<string | null>(null)
+
+  const fetchCalendar = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await apiFetch<CalendarEvent[]>(
+        `/vehicles/${vehicleId}/calendar?year=${year}&month=${month}`
+      )
+      setEvents(data)
+    } catch (e: any) {
+      setError(e.message ?? c.failedLoad)
+    } finally {
+      setLoading(false)
+    }
+  }, [vehicleId, year, month, c])
+
+  useEffect(() => { fetchCalendar() }, [fetchCalendar])
+
+  const prevMonth = () => {
+    if (month === 1) { setYear(y => y - 1); setMonth(12) }
+    else setMonth(m => m - 1)
+  }
+  const nextMonth = () => {
+    if (month === 12) { setYear(y => y + 1); setMonth(1) }
+    else setMonth(m => m + 1)
+  }
+
+  // Build calendar grid (6 rows × 7 cols)
+  const gridDays = calendarGridDays(year, month)
+
+  // Map events to date strings for fast lookup
+  const eventsOnDay = (day: Date): CalendarEvent[] => eventsForCalendarDay(events, day)
+
+  const isToday = (day: Date) => isSameDay(day, today)
+
+  const handleDayClick = (day: Date) => {
+    const str = toDateStr(day)
+    if (!selectStart) {
+      setSelectStart(str)
+    } else {
+      const range = selectedBlockRange(selectStart, day)
+      setBlockStart(range.startDate)
+      setBlockEnd(range.endDate)
+      setSelectStart(null)
+      setShowModal(true)
+    }
+  }
+
+  const openModal = () => {
+    setBlockStart('')
+    setBlockEnd('')
+    setBlockReason('')
+    setBlockType('MANUAL')
+    setSaveError(null)
+    setShowModal(true)
+  }
+
+  const closeModal = () => {
+    setShowModal(false)
+    setSaveError(null)
+    setSelectStart(null)
+  }
+
+  const handleSaveBlock = async () => {
+    if (!blockStart || !blockEnd) { setSaveError(c.datesRequired); return }
+    if (blockEnd <= blockStart)   { setSaveError(c.endAfterStart); return }
+    setSaving(true)
+    setSaveError(null)
+    try {
+      await apiFetch(`/vehicles/${vehicleId}/calendar/blocks`, {
+        method: 'POST',
+        body: JSON.stringify({ startDate: blockStart, endDate: blockEnd, reason: blockReason || undefined, type: blockType }),
+      })
+      setShowModal(false)
+      fetchCalendar()
+    } catch (e: any) {
+      setSaveError(e.message ?? c.failedCreateBlock)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeleteBlock = async (id: string) => {
+    if (!confirm(c.removeBlockConfirm)) return
+    try {
+      await apiFetch(`/vehicles/${vehicleId}/calendar/blocks/${id}`, { method: 'DELETE' })
+      fetchCalendar()
+    } catch (e: any) {
+      alert(e.message ?? c.failedDeleteBlock)
+    }
+  }
+
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const monthLabel = new Date(year, month - 1, 1).toLocaleDateString(localeCode, { month: 'long', year: 'numeric' })
+
+  // Separate reservations vs blocks for the legend/list below
+  const reservationEvents = events.filter((e) => e.type === 'RESERVATION')
+  const blockEvents        = events.filter((e) => e.type !== 'RESERVATION')
+
+  return (
+    <div className="card p-6 space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <CalendarDays className="w-5 h-5 text-slate-600" />
+          <h3 className="text-base font-semibold text-slate-900">{c.heading}</h3>
+        </div>
+        <div className="flex items-center gap-2">
+          <button onClick={prevMonth} className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <span className="text-sm font-medium text-slate-700 min-w-[130px] text-center">{monthLabel}</span>
+          <button onClick={nextMonth} className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
+            <ChevronRight className="w-4 h-4" />
+          </button>
+          <button onClick={openModal} className="ml-2 btn-primary flex items-center gap-1.5 text-xs py-1.5 px-3">
+            <Plus className="w-3.5 h-3.5" /> {c.blockDates}
+          </button>
+        </div>
+      </div>
+
+      {selectStart && (
+        <div className="text-xs text-blue-600 bg-blue-50 border border-blue-200 rounded-lg px-3 py-2">
+          {c.clickSecondDay(selectStart!)}
+          <button className="ml-2 underline" onClick={() => setSelectStart(null)}>{c.cancelSelection}</button>
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-4 text-xs text-slate-600">
+        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-blue-500 inline-block" />{c.legendReserved}</span>
+        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-orange-500 inline-block" />{c.legendMaintenance}</span>
+        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-red-500 inline-block" />{c.legendBlocked}</span>
+        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block" />{c.legendAvailable}</span>
+      </div>
+
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</div>}
+
+      {/* Calendar grid */}
+      <div className={loading ? 'opacity-50 pointer-events-none' : ''}>
+        {/* Day headers */}
+        <div className="grid grid-cols-7 mb-1">
+          {c.dayHeaders.map((d) => (
+            <div key={d} className="text-center text-xs font-medium text-slate-400 py-1">{d}</div>
+          ))}
+        </div>
+
+        {/* Day cells */}
+        <div className="grid grid-cols-7 gap-px bg-slate-100 rounded-xl overflow-hidden border border-slate-100">
+          {gridDays.map((day, i) => {
+            if (!day) return <div key={`empty-${i}`} className="bg-white min-h-[72px]" />
+
+            const dayEvents = eventsOnDay(day)
+            const isSelected = selectStart === toDateStr(day)
+            const isPast = day < today && !isToday(day)
+
+            return (
+              <div
+                key={toDateStr(day)}
+                onClick={() => handleDayClick(day)}
+                className={[
+                  'bg-white min-h-[72px] p-1.5 cursor-pointer transition-colors',
+                  isToday(day) ? 'ring-2 ring-inset ring-blue-500' : '',
+                  isSelected ? 'bg-blue-50' : 'hover:bg-slate-50',
+                  isPast ? 'opacity-60' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                <div className={[
+                  'text-xs font-medium mb-1 w-6 h-6 flex items-center justify-center rounded-full',
+                  isToday(day) ? 'bg-blue-500 text-white' : 'text-slate-700',
+                ].join(' ')}>
+                  {day.getDate()}
+                </div>
+
+                <div className="space-y-0.5">
+                  {dayEvents.slice(0, 2).map((ev) => {
+                    const s = EVENT_STYLES[ev.type]
+                    return (
+                      <div key={ev.id} className={`text-[10px] leading-tight px-1 py-0.5 rounded truncate ${s.bg} ${s.text}`}>
+                        {ev.label}
+                      </div>
+                    )
+                  })}
+                  {dayEvents.length > 2 && (
+                    <div className="text-[10px] text-slate-400 pl-1">{c.moreDays(dayEvents.length - 2)}</div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Events list for this month */}
+      {(reservationEvents.length > 0 || blockEvents.length > 0) && (
+        <div className="space-y-3 pt-2">
+          {reservationEvents.length > 0 && (
+            <div>
+              <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-2">{c.reservationsThisMonth}</p>
+              <div className="space-y-1.5">
+                {reservationEvents.map((e) => {
+                  const s = EVENT_STYLES[e.type]
+                  const start = e.startDate.slice(0, 10)
+                  const end   = e.endDate.slice(0, 10)
+                  const days  = daysBetween(parseDateStr(start), parseDateStr(end))
+                  return (
+                    <div key={e.id} className={`flex items-center justify-between px-3 py-2 rounded-lg border text-sm ${s.bg} ${s.border}`}>
+                      <div className="flex items-center gap-2">
+                        <span className={`w-2 h-2 rounded-full ${s.dot}`} />
+                        <span className={`font-medium ${s.text}`}>{e.label}</span>
+                        <span className={`text-xs ${s.text} opacity-70`}>{start} → {end} ({days}d)</span>
+                      </div>
+                      <span className={`text-xs px-2 py-0.5 rounded-full bg-white/60 ${s.text}`}>{e.status}</span>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+
+          {blockEvents.length > 0 && (
+            <div>
+              <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-2">{c.blocksAndMaintenance}</p>
+              <div className="space-y-1.5">
+                {blockEvents.map((e) => {
+                  const s = EVENT_STYLES[e.type]
+                  const start = e.startDate.slice(0, 10)
+                  const end   = e.endDate.slice(0, 10)
+                  const days  = daysBetween(parseDateStr(start), parseDateStr(end))
+                  const Icon  = e.type === 'MAINTENANCE' ? Wrench : Ban
+                  return (
+                    <div key={e.id} className={`flex items-center justify-between px-3 py-2 rounded-lg border text-sm ${s.bg} ${s.border}`}>
+                      <div className="flex items-center gap-2">
+                        <Icon className={`w-3.5 h-3.5 ${s.text}`} />
+                        <span className={`font-medium ${s.text}`}>{e.label}</span>
+                        <span className={`text-xs ${s.text} opacity-70`}>{start} → {end} ({days}d)</span>
+                      </div>
+                      <button
+                        onClick={() => handleDeleteBlock(e.id)}
+                        className={`p-1 rounded hover:bg-white/60 transition-colors ${s.text}`}
+                        title={c.removeBlock}
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Add Block Modal */}
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-blue-950/40 backdrop-blur-sm" onClick={closeModal}>
+          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between">
+              <h4 className="text-base font-semibold text-slate-900">{c.modalTitle}</h4>
+              <button onClick={closeModal} className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100">
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="space-y-3 text-sm">
+              <div>
+                <label className="block text-xs font-medium text-slate-500 mb-1.5">{c.blockTypeLabel}</label>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setBlockType('MANUAL')}
+                    className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg border text-sm font-medium transition-colors ${blockType === 'MANUAL' ? 'bg-red-50 border-red-300 text-red-700' : 'border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+                  >
+                    <Ban className="w-3.5 h-3.5" /> {c.manualBlock}
+                  </button>
+                  <button
+                    onClick={() => setBlockType('MAINTENANCE')}
+                    className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg border text-sm font-medium transition-colors ${blockType === 'MAINTENANCE' ? 'bg-orange-50 border-orange-300 text-orange-700' : 'border-slate-200 text-slate-600 hover:bg-slate-50'}`}
+                  >
+                    <Wrench className="w-3.5 h-3.5" /> {c.maintenanceBlock}
+                  </button>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{c.startDate}</label>
+                  <input
+                    type="date"
+                    className="input-field"
+                    value={blockStart}
+                    onChange={(e) => setBlockStart(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-slate-500 mb-1.5">{c.endDate}</label>
+                  <input
+                    type="date"
+                    className="input-field"
+                    value={blockEnd}
+                    min={blockStart}
+                    onChange={(e) => setBlockEnd(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-slate-500 mb-1.5">{c.reasonLabel} <span className="font-normal">{c.optional}</span></label>
+                <input
+                  type="text"
+                  className="input-field"
+                  placeholder={blockType === 'MAINTENANCE' ? c.reasonPlaceholderMaintenance : c.reasonPlaceholderManual}
+                  value={blockReason}
+                  onChange={(e) => setBlockReason(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {saveError && (
+              <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{saveError}</div>
+            )}
+
+            <div className="flex gap-2 pt-1">
+              <button onClick={closeModal} className="flex-1 btn-secondary">{c.cancel}</button>
+              <button onClick={handleSaveBlock} disabled={saving} className="flex-1 btn-primary">
+                {saving ? c.saving : c.saveBlock}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/components/VehiclePricingManager.helpers.test.ts b/dashboard/src/components/VehiclePricingManager.helpers.test.ts
new file mode 100644
index 0000000..d00d9f4
--- /dev/null
+++ b/dashboard/src/components/VehiclePricingManager.helpers.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  buildConfigForm,
+  buildRuleForm,
+  centsToInput,
+  inputToCents,
+  numericInputToInt,
+  toDateInput,
+  type PricingConfiguration,
+  type PricingRule,
+} from './VehiclePricingManager'
+
+const configuration: PricingConfiguration = {
+  id: 'cfg_1',
+  vehicleId: 'veh_1',
+  pricingMode: 'AUTOMATIC',
+  baseDailyRate: 50000,
+  weeklyRate: 280000,
+  weekendRate: 65000,
+  holidayRate: null,
+  monthlyRate: 950000,
+  longTermDailyRate: null,
+  minimumDailyRate: 40000,
+  maximumDailyRate: 80000,
+  maxDailyPriceMovementPct: 12,
+  automaticPricingEnabled: true,
+  approvalRequired: false,
+  createdAt: '2026-06-01T00:00:00.000Z',
+  updatedAt: '2026-06-02T00:00:00.000Z',
+}
+
+const rule: PricingRule = {
+  id: 'rule_1',
+  name: 'Summer',
+  ruleType: 'SEASONAL',
+  startDate: '2026-07-01T00:00:00.000Z',
+  endDate: '2026-08-31T00:00:00.000Z',
+  dailyRate: 70000,
+  weeklyRate: null,
+  weekendRate: 90000,
+  monthlyRate: null,
+  minDailyRate: 60000,
+  maxDailyRate: 110000,
+  automaticAdjustmentPct: 15,
+  priceAdjustment: 5000,
+  isActive: false,
+  sortOrder: 4,
+  createdAt: '2026-06-01T00:00:00.000Z',
+  updatedAt: '2026-06-02T00:00:00.000Z',
+}
+
+describe('VehiclePricingManager helpers', () => {
+  it('converts cents to display input strings and empty nullable values', () => {
+    expect(centsToInput(123456)).toBe('1234.56')
+    expect(centsToInput(0)).toBe('0.00')
+    expect(centsToInput(null)).toBe('')
+    expect(centsToInput(undefined)).toBe('')
+  })
+
+  it('converts currency inputs to cents while rejecting blank or invalid values', () => {
+    expect(inputToCents('499.99')).toBe(49999)
+    expect(inputToCents(' 50 ')).toBe(5000)
+    expect(inputToCents('')).toBeNull()
+    expect(inputToCents('abc')).toBeNull()
+  })
+
+  it('parses integer-only fields without accepting blank values', () => {
+    expect(numericInputToInt('12')).toBe(12)
+    expect(numericInputToInt('12.8')).toBe(12)
+    expect(numericInputToInt('')).toBeNull()
+    expect(numericInputToInt('nope')).toBeNull()
+  })
+
+  it('builds a stable editable configuration form from API pricing data', () => {
+    expect(buildConfigForm(configuration)).toEqual({
+      pricingMode: 'AUTOMATIC',
+      baseDailyRate: '500.00',
+      weeklyRate: '2800.00',
+      weekendRate: '650.00',
+      holidayRate: '',
+      monthlyRate: '9500.00',
+      longTermDailyRate: '',
+      minimumDailyRate: '400.00',
+      maximumDailyRate: '800.00',
+      maxDailyPriceMovementPct: '12',
+      automaticPricingEnabled: true,
+      approvalRequired: false,
+    })
+  })
+
+  it('builds an editable rule form from an existing pricing rule', () => {
+    expect(buildRuleForm(rule)).toEqual({
+      id: 'rule_1',
+      name: 'Summer',
+      ruleType: 'SEASONAL',
+      startDate: '2026-07-01',
+      endDate: '2026-08-31',
+      dailyRate: '700.00',
+      weeklyRate: '',
+      weekendRate: '900.00',
+      monthlyRate: '',
+      minDailyRate: '600.00',
+      maxDailyRate: '1100.00',
+      automaticAdjustmentPct: '15',
+      priceAdjustment: '50.00',
+      isActive: false,
+      sortOrder: '4',
+    })
+  })
+
+  it('defaults new rules to today through six days later', () => {
+    vi.setSystemTime(new Date('2026-06-09T12:00:00.000Z'))
+
+    expect(buildRuleForm()).toMatchObject({
+      name: '',
+      ruleType: 'DATE_RANGE',
+      startDate: '2026-06-09',
+      endDate: '2026-06-15',
+      isActive: true,
+      sortOrder: '0',
+    })
+
+    vi.useRealTimers()
+  })
+
+  it('trims ISO timestamps for date input controls', () => {
+    expect(toDateInput('2026-10-04T22:15:00.000Z')).toBe('2026-10-04')
+  })
+})
diff --git a/dashboard/src/components/VehiclePricingManager.tsx b/dashboard/src/components/VehiclePricingManager.tsx
new file mode 100644
index 0000000..bb37ca4
--- /dev/null
+++ b/dashboard/src/components/VehiclePricingManager.tsx
@@ -0,0 +1,848 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { CalendarRange, History, PlusCircle, Save, Sparkles, Trash2 } from 'lucide-react'
+import { formatCurrency } from '@rentaldrivego/types'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+export interface PricingConfiguration {
+  id: string
+  vehicleId: string
+  pricingMode: 'MANUAL' | 'AUTOMATIC'
+  baseDailyRate: number
+  weeklyRate: number | null
+  weekendRate: number | null
+  holidayRate: number | null
+  monthlyRate: number | null
+  longTermDailyRate: number | null
+  minimumDailyRate: number | null
+  maximumDailyRate: number | null
+  maxDailyPriceMovementPct: number
+  automaticPricingEnabled: boolean
+  approvalRequired: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+export interface PricingRule {
+  id: string
+  name: string
+  ruleType: 'DATE_RANGE' | 'SEASONAL' | 'HOLIDAY' | 'WEEKEND' | 'SPECIAL_EVENT' | 'MANUAL_OVERRIDE'
+  startDate: string
+  endDate: string
+  dailyRate: number | null
+  weeklyRate: number | null
+  weekendRate: number | null
+  monthlyRate: number | null
+  minDailyRate: number | null
+  maxDailyRate: number | null
+  automaticAdjustmentPct: number | null
+  priceAdjustment: number | null
+  isActive: boolean
+  sortOrder: number
+  createdAt: string
+  updatedAt: string
+}
+
+export interface PricingHistoryEntry {
+  id: string
+  source: 'CONFIG_UPDATE' | 'RULE_CREATED' | 'RULE_UPDATED' | 'RULE_DELETED' | 'MANUAL_OVERRIDE'
+  changedByEmployeeId: string | null
+  previousDailyRate: number | null
+  nextDailyRate: number | null
+  previousWeeklyRate: number | null
+  nextWeeklyRate: number | null
+  note: string | null
+  effectiveFrom: string | null
+  createdAt: string
+}
+
+export interface PricingPreviewItem {
+  date: string
+  dailyRate: number
+  pricingType: 'MANUAL_BASE' | 'AUTOMATIC_BASE' | 'WEEKEND_RATE' | 'RULE_RATE' | 'AUTOMATIC_RULE'
+  matchedRuleName: string | null
+}
+
+export interface PricingResponse {
+  configuration: PricingConfiguration
+  rules: PricingRule[]
+  history: PricingHistoryEntry[]
+  preview: {
+    today: PricingPreviewItem
+    next14Days: PricingPreviewItem[]
+  }
+}
+
+export interface ConfigForm {
+  pricingMode: 'MANUAL' | 'AUTOMATIC'
+  baseDailyRate: string
+  weeklyRate: string
+  weekendRate: string
+  holidayRate: string
+  monthlyRate: string
+  longTermDailyRate: string
+  minimumDailyRate: string
+  maximumDailyRate: string
+  maxDailyPriceMovementPct: string
+  automaticPricingEnabled: boolean
+  approvalRequired: boolean
+}
+
+export interface RuleForm {
+  id?: string
+  name: string
+  ruleType: PricingRule['ruleType']
+  startDate: string
+  endDate: string
+  dailyRate: string
+  weeklyRate: string
+  weekendRate: string
+  monthlyRate: string
+  minDailyRate: string
+  maxDailyRate: string
+  automaticAdjustmentPct: string
+  priceAdjustment: string
+  isActive: boolean
+  sortOrder: string
+}
+
+export function centsToInput(value: number | null | undefined) {
+  return value == null ? '' : (value / 100).toFixed(2)
+}
+
+export function inputToCents(value: string) {
+  if (!value.trim()) return null
+  const parsed = Number.parseFloat(value)
+  if (!Number.isFinite(parsed)) return null
+  return Math.round(parsed * 100)
+}
+
+export function numericInputToInt(value: string) {
+  if (!value.trim()) return null
+  const parsed = Number.parseInt(value, 10)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function toDateInput(value: string) {
+  return value.slice(0, 10)
+}
+
+export function buildConfigForm(configuration: PricingConfiguration): ConfigForm {
+  return {
+    pricingMode: configuration.pricingMode,
+    baseDailyRate: centsToInput(configuration.baseDailyRate),
+    weeklyRate: centsToInput(configuration.weeklyRate),
+    weekendRate: centsToInput(configuration.weekendRate),
+    holidayRate: centsToInput(configuration.holidayRate),
+    monthlyRate: centsToInput(configuration.monthlyRate),
+    longTermDailyRate: centsToInput(configuration.longTermDailyRate),
+    minimumDailyRate: centsToInput(configuration.minimumDailyRate),
+    maximumDailyRate: centsToInput(configuration.maximumDailyRate),
+    maxDailyPriceMovementPct: String(configuration.maxDailyPriceMovementPct),
+    automaticPricingEnabled: configuration.automaticPricingEnabled,
+    approvalRequired: configuration.approvalRequired,
+  }
+}
+
+export function buildRuleForm(rule?: PricingRule): RuleForm {
+  const today = new Date().toISOString().slice(0, 10)
+  const nextWeek = new Date(Date.now() + 6 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)
+
+  return {
+    id: rule?.id,
+    name: rule?.name ?? '',
+    ruleType: rule?.ruleType ?? 'DATE_RANGE',
+    startDate: rule ? toDateInput(rule.startDate) : today,
+    endDate: rule ? toDateInput(rule.endDate) : nextWeek,
+    dailyRate: centsToInput(rule?.dailyRate),
+    weeklyRate: centsToInput(rule?.weeklyRate),
+    weekendRate: centsToInput(rule?.weekendRate),
+    monthlyRate: centsToInput(rule?.monthlyRate),
+    minDailyRate: centsToInput(rule?.minDailyRate),
+    maxDailyRate: centsToInput(rule?.maxDailyRate),
+    automaticAdjustmentPct: rule?.automaticAdjustmentPct != null ? String(rule.automaticAdjustmentPct) : '',
+    priceAdjustment: centsToInput(rule?.priceAdjustment),
+    isActive: rule?.isActive ?? true,
+    sortOrder: rule?.sortOrder != null ? String(rule.sortOrder) : '0',
+  }
+}
+
+export default function VehiclePricingManager({ vehicleId }: { vehicleId: string }) {
+  const { language } = useDashboardI18n()
+  const copy = {
+    en: {
+      title: 'Pricing management',
+      subtitle: 'Manage fixed rates, automatic pricing bounds, seasonal rules, and pricing history for this vehicle.',
+      savePricing: 'Save pricing',
+      saving: 'Saving…',
+      loading: 'Loading pricing settings…',
+      mode: 'Pricing method',
+      manual: 'Manual fixed pricing',
+      automatic: 'Automatic dynamic pricing',
+      baseDailyRate: 'Base daily rate (MAD)',
+      weeklyRate: 'Weekly rate (MAD)',
+      weekendRate: 'Weekend rate (MAD)',
+      holidayRate: 'Holiday rate (MAD)',
+      monthlyRate: 'Monthly rate (MAD)',
+      longTermDailyRate: 'Long-term daily rate (MAD)',
+      minimumDailyRate: 'Minimum daily rate (MAD)',
+      maximumDailyRate: 'Maximum daily rate (MAD)',
+      automaticPricingEnabled: 'Automatic pricing enabled',
+      approvalRequired: 'Approve automatic price changes before they go live',
+      maxDailyMovement: 'Max daily price movement (%)',
+      currentPreview: 'Current pricing preview',
+      next14Days: 'Next 14 days',
+      matchedRule: 'Matched rule',
+      noRule: 'No rule',
+      rules: 'Seasonal and manual rules',
+      addRule: 'Add rule',
+      createRule: 'Create rule',
+      updateRule: 'Save rule',
+      deleting: 'Deleting…',
+      deleteRule: 'Delete',
+      noRules: 'No vehicle-specific pricing rules yet.',
+      history: 'Pricing history',
+      noHistory: 'No pricing changes recorded yet.',
+      active: 'Active',
+      inactive: 'Inactive',
+      startDate: 'Start date',
+      endDate: 'End date',
+      name: 'Rule name',
+      ruleType: 'Rule type',
+      adjustmentPct: 'Auto adjustment (%)',
+      priceAdjustment: 'Flat adjustment (MAD)',
+      sortOrder: 'Priority',
+      saveErrorBase: 'Base daily rate is required.',
+      saveErrorBounds: 'Minimum daily rate cannot be greater than maximum daily rate.',
+      saveErrorRule: 'Rules need a name plus at least one rate, bound, or adjustment.',
+      configSaved: 'Pricing settings saved.',
+      ruleSaved: 'Pricing rule saved.',
+      ruleCreated: 'Pricing rule created.',
+      ruleDeleted: 'Pricing rule deleted.',
+      previewLabels: {
+        MANUAL_BASE: 'Base manual price',
+        AUTOMATIC_BASE: 'Automatic base price',
+        WEEKEND_RATE: 'Weekend price',
+        RULE_RATE: 'Manual rule',
+        AUTOMATIC_RULE: 'Automatic rule',
+      } as Record<PricingPreviewItem['pricingType'], string>,
+      ruleTypeLabels: {
+        DATE_RANGE: 'Date range',
+        SEASONAL: 'Season',
+        HOLIDAY: 'Holiday',
+        WEEKEND: 'Weekend',
+        SPECIAL_EVENT: 'Special event',
+        MANUAL_OVERRIDE: 'Manual override',
+      } as Record<PricingRule['ruleType'], string>,
+      historyLabels: {
+        CONFIG_UPDATE: 'Configuration updated',
+        RULE_CREATED: 'Rule created',
+        RULE_UPDATED: 'Rule updated',
+        RULE_DELETED: 'Rule deleted',
+        MANUAL_OVERRIDE: 'Manual override',
+      } as Record<PricingHistoryEntry['source'], string>,
+      ruleHint: 'Use direct rates for fixed pricing or adjustments and bounds to guide automatic pricing.',
+    },
+    fr: {
+      title: 'Gestion des tarifs',
+      subtitle: 'Gérez les tarifs fixes, les limites automatiques, les saisons et l’historique des prix de ce véhicule.',
+      savePricing: 'Enregistrer les tarifs',
+      saving: 'Enregistrement…',
+      loading: 'Chargement des paramètres tarifaires…',
+      mode: 'Méthode tarifaire',
+      manual: 'Tarification fixe manuelle',
+      automatic: 'Tarification dynamique automatique',
+      baseDailyRate: 'Tarif journalier de base (MAD)',
+      weeklyRate: 'Tarif hebdomadaire (MAD)',
+      weekendRate: 'Tarif week-end (MAD)',
+      holidayRate: 'Tarif jours fériés (MAD)',
+      monthlyRate: 'Tarif mensuel (MAD)',
+      longTermDailyRate: 'Tarif long séjour / jour (MAD)',
+      minimumDailyRate: 'Tarif journalier minimum (MAD)',
+      maximumDailyRate: 'Tarif journalier maximum (MAD)',
+      automaticPricingEnabled: 'Tarification automatique activée',
+      approvalRequired: 'Valider les changements automatiques avant publication',
+      maxDailyMovement: 'Variation maximale par jour (%)',
+      currentPreview: 'Aperçu des tarifs',
+      next14Days: '14 prochains jours',
+      matchedRule: 'Règle appliquée',
+      noRule: 'Aucune règle',
+      rules: 'Règles saisonnières et manuelles',
+      addRule: 'Ajouter une règle',
+      createRule: 'Créer la règle',
+      updateRule: 'Enregistrer la règle',
+      deleting: 'Suppression…',
+      deleteRule: 'Supprimer',
+      noRules: 'Aucune règle spécifique au véhicule pour le moment.',
+      history: 'Historique tarifaire',
+      noHistory: 'Aucun changement tarifaire enregistré.',
+      active: 'Active',
+      inactive: 'Inactive',
+      startDate: 'Date de début',
+      endDate: 'Date de fin',
+      name: 'Nom de la règle',
+      ruleType: 'Type de règle',
+      adjustmentPct: 'Ajustement auto (%)',
+      priceAdjustment: 'Ajustement fixe (MAD)',
+      sortOrder: 'Priorité',
+      saveErrorBase: 'Le tarif journalier de base est requis.',
+      saveErrorBounds: 'Le tarif minimum ne peut pas dépasser le maximum.',
+      saveErrorRule: 'Les règles nécessitent un nom et au moins un tarif, une limite ou un ajustement.',
+      configSaved: 'Paramètres tarifaires enregistrés.',
+      ruleSaved: 'Règle tarifaire enregistrée.',
+      ruleCreated: 'Règle tarifaire créée.',
+      ruleDeleted: 'Règle tarifaire supprimée.',
+      previewLabels: {
+        MANUAL_BASE: 'Tarif manuel de base',
+        AUTOMATIC_BASE: 'Base automatique',
+        WEEKEND_RATE: 'Tarif week-end',
+        RULE_RATE: 'Règle manuelle',
+        AUTOMATIC_RULE: 'Règle automatique',
+      } as Record<PricingPreviewItem['pricingType'], string>,
+      ruleTypeLabels: {
+        DATE_RANGE: 'Plage de dates',
+        SEASONAL: 'Saison',
+        HOLIDAY: 'Jour férié',
+        WEEKEND: 'Week-end',
+        SPECIAL_EVENT: 'Événement spécial',
+        MANUAL_OVERRIDE: 'Forçage manuel',
+      } as Record<PricingRule['ruleType'], string>,
+      historyLabels: {
+        CONFIG_UPDATE: 'Configuration mise à jour',
+        RULE_CREATED: 'Règle créée',
+        RULE_UPDATED: 'Règle mise à jour',
+        RULE_DELETED: 'Règle supprimée',
+        MANUAL_OVERRIDE: 'Forçage manuel',
+      } as Record<PricingHistoryEntry['source'], string>,
+      ruleHint: 'Utilisez des tarifs directs pour le fixe ou des ajustements et limites pour guider l’automatique.',
+    },
+    ar: {
+      title: 'إدارة التسعير',
+      subtitle: 'إدارة الأسعار الثابتة وحدود التسعير التلقائي والقواعد الموسمية وسجل تغييرات السعر لهذه السيارة.',
+      savePricing: 'حفظ التسعير',
+      saving: 'جارٍ الحفظ…',
+      loading: 'جارٍ تحميل إعدادات التسعير…',
+      mode: 'طريقة التسعير',
+      manual: 'تسعير ثابت يدوي',
+      automatic: 'تسعير ديناميكي تلقائي',
+      baseDailyRate: 'السعر اليومي الأساسي (درهم)',
+      weeklyRate: 'السعر الأسبوعي (درهم)',
+      weekendRate: 'سعر عطلة نهاية الأسبوع (درهم)',
+      holidayRate: 'سعر العطل (درهم)',
+      monthlyRate: 'السعر الشهري (درهم)',
+      longTermDailyRate: 'سعر الإيجار الطويل / يوم (درهم)',
+      minimumDailyRate: 'الحد الأدنى للسعر اليومي (درهم)',
+      maximumDailyRate: 'الحد الأقصى للسعر اليومي (درهم)',
+      automaticPricingEnabled: 'تفعيل التسعير التلقائي',
+      approvalRequired: 'اعتماد تغييرات السعر التلقائية قبل نشرها',
+      maxDailyMovement: 'أقصى تغيير يومي (%)',
+      currentPreview: 'معاينة التسعير الحالية',
+      next14Days: 'الأيام الـ 14 القادمة',
+      matchedRule: 'القاعدة المطبقة',
+      noRule: 'لا توجد قاعدة',
+      rules: 'القواعد الموسمية واليدوية',
+      addRule: 'إضافة قاعدة',
+      createRule: 'إنشاء القاعدة',
+      updateRule: 'حفظ القاعدة',
+      deleting: 'جارٍ الحذف…',
+      deleteRule: 'حذف',
+      noRules: 'لا توجد قواعد تسعير خاصة بهذه السيارة بعد.',
+      history: 'سجل التسعير',
+      noHistory: 'لا توجد تغييرات تسعير مسجلة بعد.',
+      active: 'نشطة',
+      inactive: 'غير نشطة',
+      startDate: 'تاريخ البدء',
+      endDate: 'تاريخ الانتهاء',
+      name: 'اسم القاعدة',
+      ruleType: 'نوع القاعدة',
+      adjustmentPct: 'تعديل تلقائي (%)',
+      priceAdjustment: 'تعديل ثابت (درهم)',
+      sortOrder: 'الأولوية',
+      saveErrorBase: 'السعر اليومي الأساسي مطلوب.',
+      saveErrorBounds: 'لا يمكن أن يكون الحد الأدنى أعلى من الحد الأقصى.',
+      saveErrorRule: 'تحتاج القواعد إلى اسم وإلى سعر أو حد أو تعديل واحد على الأقل.',
+      configSaved: 'تم حفظ إعدادات التسعير.',
+      ruleSaved: 'تم حفظ قاعدة التسعير.',
+      ruleCreated: 'تم إنشاء قاعدة التسعير.',
+      ruleDeleted: 'تم حذف قاعدة التسعير.',
+      previewLabels: {
+        MANUAL_BASE: 'السعر اليدوي الأساسي',
+        AUTOMATIC_BASE: 'السعر الأساسي التلقائي',
+        WEEKEND_RATE: 'سعر عطلة نهاية الأسبوع',
+        RULE_RATE: 'قاعدة يدوية',
+        AUTOMATIC_RULE: 'قاعدة تلقائية',
+      } as Record<PricingPreviewItem['pricingType'], string>,
+      ruleTypeLabels: {
+        DATE_RANGE: 'نطاق تاريخ',
+        SEASONAL: 'موسم',
+        HOLIDAY: 'عطلة',
+        WEEKEND: 'نهاية أسبوع',
+        SPECIAL_EVENT: 'مناسبة خاصة',
+        MANUAL_OVERRIDE: 'تجاوز يدوي',
+      } as Record<PricingRule['ruleType'], string>,
+      historyLabels: {
+        CONFIG_UPDATE: 'تم تحديث الإعدادات',
+        RULE_CREATED: 'تم إنشاء قاعدة',
+        RULE_UPDATED: 'تم تحديث قاعدة',
+        RULE_DELETED: 'تم حذف قاعدة',
+        MANUAL_OVERRIDE: 'تجاوز يدوي',
+      } as Record<PricingHistoryEntry['source'], string>,
+      ruleHint: 'استخدم أسعاراً مباشرة للتسعير الثابت أو تعديلات وحدوداً لتوجيه التسعير التلقائي.',
+    },
+  }[language]
+
+  const [loading, setLoading] = useState(true)
+  const [savingConfig, setSavingConfig] = useState(false)
+  const [savingRuleId, setSavingRuleId] = useState<string | null>(null)
+  const [deletingRuleId, setDeletingRuleId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+  const [configForm, setConfigForm] = useState<ConfigForm | null>(null)
+  const [rules, setRules] = useState<RuleForm[]>([])
+  const [newRule, setNewRule] = useState<RuleForm>(buildRuleForm())
+  const [history, setHistory] = useState<PricingHistoryEntry[]>([])
+  const [preview, setPreview] = useState<PricingResponse['preview'] | null>(null)
+
+  function applyResponse(data: PricingResponse) {
+    setConfigForm(buildConfigForm(data.configuration))
+    setRules(data.rules.map((rule) => buildRuleForm(rule)))
+    setHistory(data.history)
+    setPreview(data.preview)
+  }
+
+  async function load() {
+    setLoading(true)
+    try {
+      const data = await apiFetch<PricingResponse>(`/vehicles/${vehicleId}/pricing`)
+      applyResponse(data)
+      setError(null)
+    } catch (err: any) {
+      setError(err.message ?? 'Failed to load vehicle pricing')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [vehicleId])
+
+  async function saveConfiguration() {
+    if (!configForm) return
+    const baseDailyRate = inputToCents(configForm.baseDailyRate)
+    const minimumDailyRate = inputToCents(configForm.minimumDailyRate)
+    const maximumDailyRate = inputToCents(configForm.maximumDailyRate)
+
+    if (baseDailyRate == null) {
+      setError(copy.saveErrorBase)
+      return
+    }
+    if (minimumDailyRate != null && maximumDailyRate != null && minimumDailyRate > maximumDailyRate) {
+      setError(copy.saveErrorBounds)
+      return
+    }
+
+    setSavingConfig(true)
+    setError(null)
+    setSuccess(null)
+    try {
+      const data = await apiFetch<PricingResponse>(`/vehicles/${vehicleId}/pricing`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          pricingMode: configForm.pricingMode,
+          baseDailyRate,
+          weeklyRate: inputToCents(configForm.weeklyRate),
+          weekendRate: inputToCents(configForm.weekendRate),
+          holidayRate: inputToCents(configForm.holidayRate),
+          monthlyRate: inputToCents(configForm.monthlyRate),
+          longTermDailyRate: inputToCents(configForm.longTermDailyRate),
+          minimumDailyRate,
+          maximumDailyRate,
+          maxDailyPriceMovementPct: numericInputToInt(configForm.maxDailyPriceMovementPct) ?? 10,
+          automaticPricingEnabled: configForm.automaticPricingEnabled,
+          approvalRequired: configForm.approvalRequired,
+          note: copy.configSaved,
+        }),
+      })
+      applyResponse(data)
+      setSuccess(copy.configSaved)
+    } catch (err: any) {
+      setError(err.message ?? copy.saveErrorBase)
+    } finally {
+      setSavingConfig(false)
+    }
+  }
+
+  async function saveRule(rule: RuleForm, create = false) {
+    const hasPricingEffect = [
+      inputToCents(rule.dailyRate),
+      inputToCents(rule.weeklyRate),
+      inputToCents(rule.weekendRate),
+      inputToCents(rule.monthlyRate),
+      inputToCents(rule.minDailyRate),
+      inputToCents(rule.maxDailyRate),
+      numericInputToInt(rule.automaticAdjustmentPct),
+      inputToCents(rule.priceAdjustment),
+    ].some((value) => value != null)
+
+    if (!rule.name.trim() || !hasPricingEffect) {
+      setError(copy.saveErrorRule)
+      return
+    }
+
+    const payload = {
+      name: rule.name.trim(),
+      ruleType: rule.ruleType,
+      startDate: rule.startDate,
+      endDate: rule.endDate,
+      dailyRate: inputToCents(rule.dailyRate),
+      weeklyRate: inputToCents(rule.weeklyRate),
+      weekendRate: inputToCents(rule.weekendRate),
+      monthlyRate: inputToCents(rule.monthlyRate),
+      minDailyRate: inputToCents(rule.minDailyRate),
+      maxDailyRate: inputToCents(rule.maxDailyRate),
+      automaticAdjustmentPct: numericInputToInt(rule.automaticAdjustmentPct),
+      priceAdjustment: inputToCents(rule.priceAdjustment),
+      isActive: rule.isActive,
+      sortOrder: numericInputToInt(rule.sortOrder) ?? 0,
+    }
+
+    setSavingRuleId(rule.id ?? 'new')
+    setError(null)
+    setSuccess(null)
+    try {
+      const data = create
+        ? await apiFetch<PricingResponse>(`/vehicles/${vehicleId}/pricing/rules`, { method: 'POST', body: JSON.stringify(payload) })
+        : await apiFetch<PricingResponse>(`/vehicles/${vehicleId}/pricing/rules/${rule.id}`, { method: 'PATCH', body: JSON.stringify(payload) })
+      applyResponse(data)
+      if (create) {
+        setNewRule(buildRuleForm())
+        setSuccess(copy.ruleCreated)
+      } else {
+        setSuccess(copy.ruleSaved)
+      }
+    } catch (err: any) {
+      setError(err.message ?? copy.saveErrorRule)
+    } finally {
+      setSavingRuleId(null)
+    }
+  }
+
+  async function deleteRule(ruleId: string) {
+    setDeletingRuleId(ruleId)
+    setError(null)
+    setSuccess(null)
+    try {
+      const data = await apiFetch<PricingResponse>(`/vehicles/${vehicleId}/pricing/rules/${ruleId}`, { method: 'DELETE' })
+      applyResponse(data)
+      setSuccess(copy.ruleDeleted)
+    } catch (err: any) {
+      setError(err.message ?? copy.ruleDeleted)
+    } finally {
+      setDeletingRuleId(null)
+    }
+  }
+
+  if (loading || !configForm || !preview) {
+    return <div className="card p-6 text-sm text-slate-500">{copy.loading}</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="card p-6">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <h3 className="text-base font-semibold text-slate-900">{copy.title}</h3>
+            <p className="mt-1 max-w-3xl text-sm text-slate-500">{copy.subtitle}</p>
+          </div>
+          <button onClick={saveConfiguration} disabled={savingConfig} className="btn-primary">
+            <Save className="h-4 w-4" />
+            {savingConfig ? copy.saving : copy.savePricing}
+          </button>
+        </div>
+
+        {error && <div className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
+        {success && <div className="mt-4 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">{success}</div>}
+
+        <div className="mt-6 grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+          <div className="grid gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4 md:grid-cols-2">
+            <div className="md:col-span-2">
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.mode}</label>
+              <select className="input-field" value={configForm.pricingMode} onChange={(event) => setConfigForm((current) => current ? { ...current, pricingMode: event.target.value as ConfigForm['pricingMode'] } : current)}>
+                <option value="MANUAL">{copy.manual}</option>
+                <option value="AUTOMATIC">{copy.automatic}</option>
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.baseDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.baseDailyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, baseDailyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weeklyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.weeklyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, weeklyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weekendRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.weekendRate} onChange={(event) => setConfigForm((current) => current ? { ...current, weekendRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.holidayRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.holidayRate} onChange={(event) => setConfigForm((current) => current ? { ...current, holidayRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.monthlyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.monthlyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, monthlyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.longTermDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.longTermDailyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, longTermDailyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.minimumDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.minimumDailyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, minimumDailyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.maximumDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={configForm.maximumDailyRate} onChange={(event) => setConfigForm((current) => current ? { ...current, maximumDailyRate: event.target.value } : current)} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.maxDailyMovement}</label>
+              <input className="input-field" type="number" min="0" max="100" step="1" value={configForm.maxDailyPriceMovementPct} onChange={(event) => setConfigForm((current) => current ? { ...current, maxDailyPriceMovementPct: event.target.value } : current)} />
+            </div>
+            <div className="md:col-span-2 flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-4">
+              <label className="flex items-center gap-3 text-sm font-medium text-slate-700">
+                <input type="checkbox" checked={configForm.automaticPricingEnabled} onChange={(event) => setConfigForm((current) => current ? { ...current, automaticPricingEnabled: event.target.checked } : current)} />
+                {copy.automaticPricingEnabled}
+              </label>
+              <label className="flex items-center gap-3 text-sm font-medium text-slate-700">
+                <input type="checkbox" checked={configForm.approvalRequired} onChange={(event) => setConfigForm((current) => current ? { ...current, approvalRequired: event.target.checked } : current)} />
+                {copy.approvalRequired}
+              </label>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-slate-200 bg-white p-5">
+            <div className="flex items-center gap-2">
+              <Sparkles className="h-4 w-4 text-blue-600" />
+              <h4 className="text-sm font-semibold text-slate-900">{copy.currentPreview}</h4>
+            </div>
+            <div className="mt-4 rounded-2xl bg-slate-50 p-4">
+              <p className="text-xs uppercase tracking-wide text-slate-500">{preview.today.date}</p>
+              <p className="mt-2 text-2xl font-semibold text-slate-900">{formatCurrency(preview.today.dailyRate, 'MAD')}</p>
+              <p className="mt-1 text-sm text-slate-500">{copy.previewLabels[preview.today.pricingType]}</p>
+              <p className="mt-2 text-xs text-slate-400">{copy.matchedRule}: {preview.today.matchedRuleName ?? copy.noRule}</p>
+            </div>
+            <div className="mt-4">
+              <div className="mb-3 flex items-center gap-2">
+                <CalendarRange className="h-4 w-4 text-slate-400" />
+                <p className="text-sm font-semibold text-slate-900">{copy.next14Days}</p>
+              </div>
+              <div className="space-y-2">
+                {preview.next14Days.map((item) => (
+                  <div key={item.date} className="flex items-center justify-between rounded-xl border border-slate-100 px-3 py-2 text-sm">
+                    <div>
+                      <p className="font-medium text-slate-900">{item.date}</p>
+                      <p className="text-xs text-slate-500">{copy.previewLabels[item.pricingType]}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-semibold text-slate-900">{formatCurrency(item.dailyRate, 'MAD')}</p>
+                      <p className="text-xs text-slate-400">{item.matchedRuleName ?? copy.noRule}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card p-6">
+        <h3 className="text-base font-semibold text-slate-900">{copy.rules}</h3>
+        <p className="mt-1 text-sm text-slate-500">{copy.ruleHint}</p>
+
+        <div className="mt-5 space-y-4">
+          {rules.map((rule, index) => (
+            <div key={rule.id} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+              <div className="grid gap-4 lg:grid-cols-2">
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.name}</label>
+                  <input className="input-field" value={rule.name} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, name: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.ruleType}</label>
+                  <select className="input-field" value={rule.ruleType} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, ruleType: event.target.value as RuleForm['ruleType'] } : entry))}>
+                    {Object.entries(copy.ruleTypeLabels).map(([value, label]) => (
+                      <option key={value} value={value}>{label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.startDate}</label>
+                  <input className="input-field" type="date" value={rule.startDate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, startDate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.endDate}</label>
+                  <input className="input-field" type="date" value={rule.endDate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, endDate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.baseDailyRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.dailyRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, dailyRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weeklyRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.weeklyRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, weeklyRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weekendRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.weekendRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, weekendRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.monthlyRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.monthlyRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, monthlyRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.minimumDailyRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.minDailyRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, minDailyRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.maximumDailyRate}</label>
+                  <input className="input-field" type="number" min="0" step="0.01" value={rule.maxDailyRate} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, maxDailyRate: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.adjustmentPct}</label>
+                  <input className="input-field" type="number" step="1" value={rule.automaticAdjustmentPct} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, automaticAdjustmentPct: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.priceAdjustment}</label>
+                  <input className="input-field" type="number" step="0.01" value={rule.priceAdjustment} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, priceAdjustment: event.target.value } : entry))} />
+                </div>
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.sortOrder}</label>
+                  <input className="input-field" type="number" min="0" step="1" value={rule.sortOrder} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, sortOrder: event.target.value } : entry))} />
+                </div>
+                <div className="flex items-end">
+                  <label className="flex items-center gap-3 text-sm font-medium text-slate-700">
+                    <input type="checkbox" checked={rule.isActive} onChange={(event) => setRules((current) => current.map((entry, entryIndex) => entryIndex === index ? { ...entry, isActive: event.target.checked } : entry))} />
+                    {rule.isActive ? copy.active : copy.inactive}
+                  </label>
+                </div>
+              </div>
+              <div className="mt-4 flex flex-wrap items-center justify-end gap-2">
+                <button onClick={() => deleteRule(rule.id!)} disabled={deletingRuleId === rule.id} className="btn-secondary text-red-600">
+                  <Trash2 className="h-4 w-4" />
+                  {deletingRuleId === rule.id ? copy.deleting : copy.deleteRule}
+                </button>
+                <button onClick={() => saveRule(rule)} disabled={savingRuleId === rule.id} className="btn-primary">
+                  <Save className="h-4 w-4" />
+                  {savingRuleId === rule.id ? copy.saving : copy.updateRule}
+                </button>
+              </div>
+            </div>
+          ))}
+
+          {rules.length === 0 && <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm text-slate-400">{copy.noRules}</div>}
+        </div>
+
+        <div className="mt-6 rounded-2xl border border-blue-100 bg-blue-50/60 p-4">
+          <div className="mb-4 flex items-center gap-2">
+            <PlusCircle className="h-4 w-4 text-blue-600" />
+            <h4 className="text-sm font-semibold text-slate-900">{copy.addRule}</h4>
+          </div>
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.name}</label>
+              <input className="input-field" value={newRule.name} onChange={(event) => setNewRule((current) => ({ ...current, name: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.ruleType}</label>
+              <select className="input-field" value={newRule.ruleType} onChange={(event) => setNewRule((current) => ({ ...current, ruleType: event.target.value as RuleForm['ruleType'] }))}>
+                {Object.entries(copy.ruleTypeLabels).map(([value, label]) => (
+                  <option key={value} value={value}>{label}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.startDate}</label>
+              <input className="input-field" type="date" value={newRule.startDate} onChange={(event) => setNewRule((current) => ({ ...current, startDate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.endDate}</label>
+              <input className="input-field" type="date" value={newRule.endDate} onChange={(event) => setNewRule((current) => ({ ...current, endDate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.baseDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.dailyRate} onChange={(event) => setNewRule((current) => ({ ...current, dailyRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weeklyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.weeklyRate} onChange={(event) => setNewRule((current) => ({ ...current, weeklyRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.weekendRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.weekendRate} onChange={(event) => setNewRule((current) => ({ ...current, weekendRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.monthlyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.monthlyRate} onChange={(event) => setNewRule((current) => ({ ...current, monthlyRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.minimumDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.minDailyRate} onChange={(event) => setNewRule((current) => ({ ...current, minDailyRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.maximumDailyRate}</label>
+              <input className="input-field" type="number" min="0" step="0.01" value={newRule.maxDailyRate} onChange={(event) => setNewRule((current) => ({ ...current, maxDailyRate: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.adjustmentPct}</label>
+              <input className="input-field" type="number" step="1" value={newRule.automaticAdjustmentPct} onChange={(event) => setNewRule((current) => ({ ...current, automaticAdjustmentPct: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.priceAdjustment}</label>
+              <input className="input-field" type="number" step="0.01" value={newRule.priceAdjustment} onChange={(event) => setNewRule((current) => ({ ...current, priceAdjustment: event.target.value }))} />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{copy.sortOrder}</label>
+              <input className="input-field" type="number" min="0" step="1" value={newRule.sortOrder} onChange={(event) => setNewRule((current) => ({ ...current, sortOrder: event.target.value }))} />
+            </div>
+          </div>
+          <div className="mt-4 flex justify-end">
+            <button onClick={() => saveRule(newRule, true)} disabled={savingRuleId === 'new'} className="btn-primary">
+              <PlusCircle className="h-4 w-4" />
+              {savingRuleId === 'new' ? copy.saving : copy.createRule}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="card p-6">
+        <div className="flex items-center gap-2">
+          <History className="h-4 w-4 text-slate-400" />
+          <h3 className="text-base font-semibold text-slate-900">{copy.history}</h3>
+        </div>
+        <div className="mt-5 space-y-3">
+          {history.map((entry) => (
+            <div key={entry.id} className="rounded-2xl border border-slate-200 px-4 py-3 text-sm">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p className="font-medium text-slate-900">{copy.historyLabels[entry.source]}</p>
+                  <p className="text-slate-500">{new Date(entry.createdAt).toLocaleString()}</p>
+                </div>
+                <div className="text-right">
+                  {entry.nextDailyRate != null && <p className="font-semibold text-slate-900">{formatCurrency(entry.nextDailyRate, 'MAD')}</p>}
+                  {entry.previousDailyRate != null && entry.nextDailyRate != null && (
+                    <p className="text-xs text-slate-400">{formatCurrency(entry.previousDailyRate, 'MAD')} → {formatCurrency(entry.nextDailyRate, 'MAD')}</p>
+                  )}
+                </div>
+              </div>
+              {entry.note && <p className="mt-2 text-sm text-slate-600">{entry.note}</p>}
+            </div>
+          ))}
+          {history.length === 0 && <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm text-slate-400">{copy.noHistory}</div>}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/layout/DashboardAccessGuard.boundary.test.ts b/dashboard/src/components/layout/DashboardAccessGuard.boundary.test.ts
new file mode 100644
index 0000000..e456bd1
--- /dev/null
+++ b/dashboard/src/components/layout/DashboardAccessGuard.boundary.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { flattenInternalRoutes, isAllowedRoute, resolveAccessRedirect } from './DashboardAccessGuard'
+
+describe('DashboardAccessGuard route helpers', () => {
+  it('normalizes dashboard-prefixed menu routes before checking access', () => {
+    const routes = flattenInternalRoutes([
+      {
+        id: 'dashboard',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/dashboard',
+        children: [],
+      },
+      {
+        id: 'fleet',
+        itemType: 'INTERNAL_PAGE',
+        routeOrUrl: '/dashboard/fleet',
+        children: [],
+      },
+      {
+        id: 'external',
+        itemType: 'EXTERNAL_LINK',
+        routeOrUrl: '/dashboard/dashboard',
+        children: [],
+      },
+    ])
+
+    expect(routes).toEqual(['/', '/fleet'])
+    expect(isAllowedRoute('/', routes)).toBe(true)
+    expect(isAllowedRoute('/fleet/123', routes)).toBe(true)
+  })
+
+  it('does not redirect forever when an authenticated employee has no visible menu routes', () => {
+    expect(resolveAccessRedirect('/', [])).toBeNull()
+    expect(resolveAccessRedirect('/fleet', [])).toBeNull()
+  })
+
+  it('redirects disallowed routes to the first visible internal route', () => {
+    expect(resolveAccessRedirect('/settings', ['/', '/fleet'])).toBe('/')
+    expect(resolveAccessRedirect('/fleet/123', ['/', '/fleet'])).toBeNull()
+  })
+})
diff --git a/dashboard/src/components/layout/DashboardAccessGuard.tsx b/dashboard/src/components/layout/DashboardAccessGuard.tsx
new file mode 100644
index 0000000..067b64f
--- /dev/null
+++ b/dashboard/src/components/layout/DashboardAccessGuard.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { usePathname, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { toDashboardAppPath } from '@/lib/dashboardPaths'
+
+type GeneratedMenuItem = {
+  id: string
+  itemType: 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
+  routeOrUrl: string | null
+  children: GeneratedMenuItem[]
+}
+
+type EmployeeMenuResponse = {
+  items: GeneratedMenuItem[]
+}
+
+export function flattenInternalRoutes(items: GeneratedMenuItem[]): string[] {
+  const routes: string[] = []
+
+  const walk = (entry: GeneratedMenuItem) => {
+    if (entry.itemType === 'INTERNAL_PAGE' && entry.routeOrUrl) {
+      routes.push(toDashboardAppPath(entry.routeOrUrl))
+    }
+    entry.children.forEach(walk)
+  }
+
+  items.forEach(walk)
+  return Array.from(new Set(routes))
+}
+
+export function isAllowedRoute(currentPath: string, allowedRoutes: string[]) {
+  return allowedRoutes.some((route) => {
+    if (route === '/') return currentPath === '/'
+    return currentPath === route || currentPath.startsWith(`${route}/`)
+  })
+}
+
+export function resolveAccessRedirect(currentPath: string, allowedRoutes: string[]) {
+  if (allowedRoutes.length === 0) return null
+  if (isAllowedRoute(currentPath, allowedRoutes)) return null
+
+  const fallbackRoute = allowedRoutes[0] ?? '/'
+  return fallbackRoute === currentPath ? null : fallbackRoute
+}
+
+export default function DashboardAccessGuard({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function enforceAccess() {
+      try {
+        setReady(false)
+        const currentPath = toDashboardAppPath(pathname)
+        const menu = await apiFetch<EmployeeMenuResponse>('/auth/employee/menu')
+        if (cancelled) return
+
+        const allowedRoutes = flattenInternalRoutes(menu.items)
+        const redirectPath = resolveAccessRedirect(currentPath, allowedRoutes)
+
+        if (redirectPath) {
+          router.replace(redirectPath)
+          return
+        }
+
+        setReady(true)
+      } catch (error: any) {
+        if (cancelled) return
+
+        if (error?.statusCode === 401 || error?.statusCode === 403 || error?.statusCode === 402) {
+          router.replace('/')
+          return
+        }
+
+        // Do not deadlock the dashboard on transient network failures.
+        setReady(true)
+      }
+    }
+
+    enforceAccess()
+
+    return () => {
+      cancelled = true
+    }
+  }, [pathname, router])
+
+  if (!ready) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center">
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" aria-label="Checking access" />
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}
diff --git a/dashboard/src/components/layout/PublicFooter.tsx b/dashboard/src/components/layout/PublicFooter.tsx
new file mode 100644
index 0000000..a25c5a0
--- /dev/null
+++ b/dashboard/src/components/layout/PublicFooter.tsx
@@ -0,0 +1,4 @@
+'use client'
+
+// Compatibility export. New pages should import PublicFooter from '@/components/public'.
+export { default } from '@/components/public/PublicFooter'
diff --git a/dashboard/src/components/layout/PublicHeader.tsx b/dashboard/src/components/layout/PublicHeader.tsx
new file mode 100644
index 0000000..acb350b
--- /dev/null
+++ b/dashboard/src/components/layout/PublicHeader.tsx
@@ -0,0 +1,4 @@
+'use client'
+
+// Compatibility export. New pages should import PublicNavbar from '@/components/public'.
+export { default } from '@/components/public/PublicNavbar'
diff --git a/dashboard/src/components/layout/PublicShell.test.ts b/dashboard/src/components/layout/PublicShell.test.ts
new file mode 100644
index 0000000..8c8bbab
--- /dev/null
+++ b/dashboard/src/components/layout/PublicShell.test.ts
@@ -0,0 +1,32 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/components/public/PublicNavbar', () => ({ default: function MockPublicNavbar() { return React.createElement('mock-navbar') } }))
+vi.mock('@/components/public/PublicFooter', () => ({ default: function MockPublicFooter() { return React.createElement('mock-footer') } }))
+
+import PublicShell from './PublicShell'
+
+function childTypes(node: React.ReactElement): string[] {
+  return React.Children.toArray(node.props.children).filter(isValidElement).map((child) => {
+    const type = child.type as any
+    if (typeof type === 'string') return type
+    return type.displayName ?? type.name ?? 'anonymous'
+  })
+}
+
+describe('dashboard public page compatibility shell', () => {
+  it('wraps public pages with navbar, content, and footer by default', () => {
+    const shell = PublicShell({ children: React.createElement('main', { id: 'content' }) })
+
+    expect(isValidElement(shell)).toBe(true)
+    expect(childTypes(shell)).toEqual(['MockPublicNavbar', 'div', 'MockPublicFooter'])
+  })
+
+  it('omits chrome when embedded so partner surfaces do not get nested navigation', () => {
+    const shell = PublicShell({ embedded: true, children: React.createElement('main', { id: 'content' }) })
+
+    expect(childTypes(shell)).toEqual(['div'])
+    const contentWrapper = React.Children.toArray(shell.props.children).find(isValidElement) as React.ReactElement
+    expect(contentWrapper.props.children).toEqual(React.createElement('main', { id: 'content' }))
+  })
+})
diff --git a/dashboard/src/components/layout/PublicShell.tsx b/dashboard/src/components/layout/PublicShell.tsx
new file mode 100644
index 0000000..6924eb5
--- /dev/null
+++ b/dashboard/src/components/layout/PublicShell.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+// Compatibility export. New pages should import PublicPageLayout from '@/components/public'.
+export { default } from '@/components/public/PublicPageLayout'
+export type { PublicPageLayoutProps } from '@/components/public/PublicPageLayout'
diff --git a/dashboard/src/components/layout/Sidebar.boundary.test.ts b/dashboard/src/components/layout/Sidebar.boundary.test.ts
new file mode 100644
index 0000000..d102fa2
--- /dev/null
+++ b/dashboard/src/components/layout/Sidebar.boundary.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import { hasRenderableMenuItems } from './Sidebar'
+
+describe('Sidebar menu rendering helpers', () => {
+  it('treats an empty employee menu as non-renderable so fallback navigation remains available', () => {
+    expect(hasRenderableMenuItems(null)).toBe(false)
+    expect(hasRenderableMenuItems([])).toBe(false)
+  })
+
+  it('ignores structural-only menu responses without clickable entries', () => {
+    expect(hasRenderableMenuItems([
+      {
+        id: 'section',
+        systemKey: null,
+        label: 'Workspace',
+        itemType: 'SECTION_LABEL',
+        routeOrUrl: null,
+        icon: null,
+        parentId: null,
+        openInNewTab: false,
+        displayOrder: 1,
+        children: [],
+      },
+      {
+        id: 'divider',
+        systemKey: null,
+        label: '',
+        itemType: 'DIVIDER',
+        routeOrUrl: null,
+        icon: null,
+        parentId: null,
+        openInNewTab: false,
+        displayOrder: 2,
+        children: [],
+      },
+    ])).toBe(false)
+  })
+
+  it('detects nested clickable menu entries', () => {
+    expect(hasRenderableMenuItems([
+      {
+        id: 'parent',
+        systemKey: null,
+        label: 'Operations',
+        itemType: 'PARENT_MENU',
+        routeOrUrl: null,
+        icon: null,
+        parentId: null,
+        openInNewTab: false,
+        displayOrder: 1,
+        children: [
+          {
+            id: 'fleet',
+            systemKey: 'fleet',
+            label: 'Fleet',
+            itemType: 'INTERNAL_PAGE',
+            routeOrUrl: '/fleet',
+            icon: 'Car',
+            parentId: 'parent',
+            openInNewTab: false,
+            displayOrder: 1,
+            children: [],
+          },
+        ],
+      },
+    ])).toBe(true)
+  })
+})
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..8280af9
--- /dev/null
+++ b/dashboard/src/components/layout/Sidebar.tsx
@@ -0,0 +1,482 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import type { ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useState } from 'react'
+import {
+  LayoutDashboard,
+  Car,
+  Calendar,
+  Globe,
+  Users,
+  Tag,
+  UserPlus,
+  BarChart2,
+  CreditCard,
+  Bell,
+  Settings,
+  LogOut,
+  FileText,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  AlertTriangle,
+} from 'lucide-react'
+import { DashboardLanguageSwitcher, DashboardThemeSwitcher, useDashboardI18n } from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+import { EMPLOYEE_PROFILE_KEY, apiFetch } from '@/lib/api'
+import { toDashboardAppPath } from '@/lib/dashboardPaths'
+import { SHARED_LANGUAGE_KEY, readCurrentUserScopedPreference } from '@/lib/preferences'
+
+interface BrandSettings {
+  displayName: string
+  logoUrl: string | null
+}
+
+interface CompanySummary {
+  name: string
+  brand?: {
+    displayName?: string | null
+    logoUrl?: string | null
+  } | null
+}
+
+interface SidebarUser {
+  displayName: string
+  subtitle: string
+  initials: string
+}
+interface EmployeeProfile {
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+  preferredLanguage?: string
+}
+
+interface GeneratedMenuItem {
+  id: string
+  systemKey: string | null
+  label: string
+  itemType: 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
+  routeOrUrl: string | null
+  icon: string | null
+  parentId: string | null
+  openInNewTab: boolean
+  displayOrder: number
+  children: GeneratedMenuItem[]
+}
+
+function computeInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return 'U'
+  if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
+  return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
+}
+
+function toSidebarUser(profile: Partial<EmployeeProfile>, fallbackName: string, fallbackSubtitle: string): SidebarUser {
+  const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
+  const email = profile.email ?? ''
+  const role = profile.role ?? ''
+  const displayName = fullName || (email ? email.split('@')[0] : fallbackName)
+  const subtitle = email || role || fallbackSubtitle
+  const initials = computeInitials(fullName || email || fallbackName)
+  return { displayName, subtitle, initials }
+}
+
+const NAV_ITEMS = [
+  { href: '/', key: 'dashboard', icon: LayoutDashboard, exact: true, minRole: 'AGENT' },
+  { href: '/fleet', key: 'fleet', icon: Car, minRole: 'AGENT' },
+  { href: '/reservations', key: 'reservations', icon: Calendar, minRole: 'AGENT' },
+  { href: '/online-reservations', key: 'onlineReservations', icon: Globe, minRole: 'AGENT' },
+  { href: '/customers', key: 'customers', icon: Users, minRole: 'AGENT' },
+  { href: '/offers', key: 'offers', icon: Tag, minRole: 'MANAGER' },
+  { href: '/team', key: 'team', icon: UserPlus, minRole: 'AGENT' },
+  { href: '/reports', key: 'reports', icon: BarChart2, minRole: 'MANAGER' },
+  { href: '/subscription', key: 'subscription', icon: CreditCard, minRole: 'OWNER' },
+  { href: '/billing', key: 'billing', icon: CreditCard, minRole: 'MANAGER' },
+  { href: '/contracts', key: 'contracts', icon: FileText, minRole: 'AGENT' },
+  { href: '/reviews', key: 'reviews', icon: Star, minRole: 'AGENT' },
+  { href: '/complaints', key: 'complaints', icon: AlertTriangle, minRole: 'AGENT' },
+  { href: '/notifications', key: 'notifications', icon: Bell, minRole: 'AGENT' },
+  { href: '/settings', key: 'settings', icon: Settings, minRole: 'OWNER' },
+] as const
+
+const ICON_MAP = {
+  LayoutDashboard,
+  Car,
+  Calendar,
+  Globe,
+  Users,
+  Tag,
+  UserPlus,
+  BarChart2,
+  CreditCard,
+  Bell,
+  Settings,
+  FileText,
+  Star,
+  AlertTriangle,
+} as const
+
+const SIDEBAR_BRAND_KEY = 'dashboard_brand'
+
+const ROLE_RANK: Record<string, number> = { OWNER: 3, MANAGER: 2, AGENT: 1 }
+
+function hasMinRole(employeeRole: string, minRole: string): boolean {
+  return (ROLE_RANK[employeeRole] ?? 0) >= (ROLE_RANK[minRole] ?? 0)
+}
+
+export function hasRenderableMenuItems(items: GeneratedMenuItem[] | null): boolean {
+  if (!items?.length) return false
+
+  return items.some((item) => {
+    if (item.itemType === 'DIVIDER' || item.itemType === 'SECTION_LABEL') return false
+    if (item.itemType === 'PARENT_MENU') return hasRenderableMenuItems(item.children)
+    return Boolean(item.routeOrUrl)
+  })
+}
+
+function notifyParent(message: Record<string, unknown>) {
+  if (typeof window === 'undefined' || window.parent === window) return
+  window.parent.postMessage(message, '*')
+}
+
+export default function Sidebar() {
+  const { dict, language, setLanguage } = useDashboardI18n()
+  const isRtl = language === 'ar'
+  const pathname = usePathname()
+  const appPath = toDashboardAppPath(pathname)
+  const [brand, setBrand] = useState<BrandSettings | null>(null)
+  const [user, setUser] = useState<SidebarUser>({
+    displayName: dict.workspaceUser,
+    subtitle: dict.localAuth,
+    initials: 'W',
+  })
+  const [role, setRole] = useState<string>('AGENT')
+  const [menuItems, setMenuItems] = useState<GeneratedMenuItem[] | null>(null)
+  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
+
+  useLayoutEffect(() => {
+    try {
+      const cached = window.localStorage.getItem(SIDEBAR_BRAND_KEY)
+      if (!cached) return
+      const parsed = JSON.parse(cached) as Partial<BrandSettings>
+      if (typeof parsed.displayName === 'string' && parsed.displayName.trim()) {
+        setBrand({
+          displayName: parsed.displayName,
+          logoUrl: typeof parsed.logoUrl === 'string' ? parsed.logoUrl : null,
+        })
+      }
+    } catch {}
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function loadBrand() {
+      try {
+        const brandData = await apiFetch<BrandSettings | null>('/companies/me/brand')
+        if (cancelled) return
+        if (brandData?.displayName?.trim()) {
+          setBrand(brandData)
+          window.localStorage.setItem(SIDEBAR_BRAND_KEY, JSON.stringify(brandData))
+          return
+        }
+      } catch {}
+
+      try {
+        const company = await apiFetch<CompanySummary>('/companies/me')
+        if (cancelled) return
+
+        const resolvedBrand: BrandSettings = {
+          displayName: company.brand?.displayName?.trim() || company.name,
+          logoUrl: company.brand?.logoUrl ?? null,
+        }
+
+        setBrand(resolvedBrand)
+        window.localStorage.setItem(SIDEBAR_BRAND_KEY, JSON.stringify(resolvedBrand))
+      } catch {}
+    }
+
+    loadBrand()
+
+    return () => { cancelled = true }
+  }, [])
+
+  useEffect(() => {
+    const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
+    if (cached) {
+      try {
+        const profile = JSON.parse(cached) as Partial<EmployeeProfile>
+        setUser(toSidebarUser(profile, dict.workspaceUser, dict.localAuth))
+        if (profile.role) setRole(profile.role)
+      } catch {}
+    }
+
+    let cancelled = false
+
+    Promise.all([
+      apiFetch<{ employee: EmployeeProfile }>('/auth/employee/me'),
+      apiFetch<{ items: GeneratedMenuItem[] }>('/auth/employee/menu').catch(() => null),
+    ])
+      .then(([{ employee }, menu]) => {
+        if (cancelled) return
+        window.localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(employee))
+        setUser(toSidebarUser(employee, dict.workspaceUser, dict.localAuth))
+        if (employee.role) setRole(employee.role)
+        if (menu?.items) setMenuItems(menu.items)
+        if (employee.preferredLanguage === 'en' || employee.preferredLanguage === 'fr' || employee.preferredLanguage === 'ar') {
+          // Only apply the server-side preference when the employee has no local preference
+          // stored yet — avoids overriding a language the user manually switched to.
+          const existingPref = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
+          if (!existingPref) {
+            setLanguage(employee.preferredLanguage)
+            document.cookie = `rentaldrivego-language=${employee.preferredLanguage}; path=/; max-age=31536000; samesite=lax`
+          }
+        }
+      })
+      .catch(() => {
+        if (cancelled) return
+        if (!cached) setUser(toSidebarUser({}, dict.workspaceUser, dict.localAuth))
+      })
+
+    return () => { cancelled = true }
+  }, [dict.localAuth, dict.workspaceUser])
+
+  // Close sidebar when navigating on mobile
+  useEffect(() => { setOpen(false) }, [pathname])
+
+  const isActive = (item: typeof NAV_ITEMS[number]) => {
+    if ('exact' in item && item.exact) return appPath === item.href
+    return appPath.startsWith(item.href)
+  }
+
+  const isGeneratedItemActive = (item: GeneratedMenuItem) => {
+    if (!item.routeOrUrl || item.itemType !== 'INTERNAL_PAGE') return false
+    const route = toDashboardAppPath(item.routeOrUrl)
+    if (route === '/') return appPath === '/'
+    return appPath === route || appPath.startsWith(`${route}/`)
+  }
+
+  const fallbackMenuItems = NAV_ITEMS
+    .filter((item) => !mounted || hasMinRole(role, item.minRole))
+    .map((item) => ({
+      id: item.href,
+      systemKey: item.key,
+      label: dict.nav[item.key] ?? item.key,
+      itemType: 'INTERNAL_PAGE' as const,
+      routeOrUrl: item.href,
+      icon: item.icon.name,
+      parentId: null,
+      openInNewTab: false,
+      displayOrder: 0,
+      children: [],
+    }))
+
+  const useGeneratedMenu = hasRenderableMenuItems(menuItems)
+  const resolvedMenuItems = useGeneratedMenu && menuItems ? menuItems : fallbackMenuItems
+
+  function renderGeneratedMenu(items: GeneratedMenuItem[], depth = 0): ReactNode {
+    return items.map((item) => {
+      const label = item.systemKey ? (dict.nav[item.systemKey] ?? item.label) : item.label
+      const paddingClass = depth > 0 ? 'pl-6' : ''
+      const Icon = item.icon && item.icon in ICON_MAP ? ICON_MAP[item.icon as keyof typeof ICON_MAP] : null
+
+      if (item.itemType === 'DIVIDER') {
+        return <div key={item.id} className="mx-3 my-3 h-px bg-gradient-to-r from-transparent via-blue-400/20 to-transparent" />
+      }
+
+      if (item.itemType === 'SECTION_LABEL') {
+        return (
+          <p key={item.id} className="px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">
+            {label}
+          </p>
+        )
+      }
+
+      if (item.itemType === 'PARENT_MENU') {
+        return (
+          <div key={item.id} className="space-y-1">
+            <div className={`rdg-nav-item flex items-center gap-3 rounded-lg px-3.5 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 ${paddingClass}`}>
+              {Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
+              {label}
+            </div>
+            <div className="space-y-0.5">{renderGeneratedMenu(item.children, depth + 1)}</div>
+          </div>
+        )
+      }
+
+      const active = mounted && isGeneratedItemActive(item)
+      const className = [
+        'rdg-nav-item relative flex items-center gap-3 rounded-lg px-3.5 py-3 text-sm font-medium transition-all duration-200',
+        paddingClass,
+        active
+          ? 'bg-blue-500/10 text-blue-950 shadow-[inset_2px_0_0_#3b82f6,0_0_18px_rgba(59,130,246,0.10)] dark:text-slate-50'
+          : 'text-slate-500 hover:bg-blue-500/10 hover:text-blue-950 dark:text-slate-400 dark:hover:text-slate-50',
+      ].join(' ')
+
+      if (item.itemType === 'EXTERNAL_LINK' && item.routeOrUrl) {
+        return (
+          <a
+            key={item.id}
+            href={item.routeOrUrl}
+            target={item.openInNewTab ? '_blank' : '_self'}
+            rel={item.openInNewTab ? 'noreferrer noopener' : undefined}
+            className={className}
+            data-active={active ? 'true' : 'false'}
+          >
+            {Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
+            {label}
+          </a>
+        )
+      }
+
+      const href = item.itemType === 'INTERNAL_PAGE' ? toDashboardAppPath(item.routeOrUrl) : (item.routeOrUrl || '/')
+
+      return (
+        <Link key={item.id} href={href} className={className} aria-current={active ? 'page' : undefined} data-active={active ? 'true' : 'false'}>
+          {Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
+          {label}
+        </Link>
+      )
+    })
+  }
+
+  function signOut() {
+    localStorage.removeItem(EMPLOYEE_PROFILE_KEY)
+    void fetch('/dashboard/api/v1/auth/employee/logout', { method: 'POST', credentials: 'include' })
+    window.dispatchEvent(new CustomEvent('rentaldrivego:auth-changed'))
+    notifyParent({ type: 'rentaldrivego:employee-logout' })
+    window.location.href = marketplaceUrl
+  }
+
+  return (
+    <>
+      {/* Mobile backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      {/* Tab to open sidebar — only visible when sidebar is closed on mobile */}
+      {!open && (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          aria-label="Open sidebar"
+          className={[
+            'fixed top-1/2 z-50 flex h-14 w-6 -translate-y-1/2 items-center justify-center bg-[#0a1128] text-white shadow-lg lg:hidden',
+            isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
+          ].join(' ')}
+        >
+          {isRtl ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+        </button>
+      )}
+
+      <aside
+        className={[
+          'rdg-sidebar fixed inset-y-0 z-40 flex w-[var(--rdg-sidebar-size)] flex-col border-e border-blue-200/70 bg-white/90 text-blue-950 shadow-[8px_0_32px_rgba(15,23,42,0.08)] backdrop-blur-xl transition-[transform,background-color,border-color,color,box-shadow] duration-300 dark:border-blue-400/10 dark:bg-[#0a0f1a]/95 dark:text-slate-100 dark:shadow-[8px_0_32px_rgba(0,0,0,0.22)]',
+          isRtl ? 'right-0' : 'left-0',
+          'lg:translate-x-0',
+          open ? 'translate-x-0' : (isRtl ? 'translate-x-full' : '-translate-x-full'),
+        ].join(' ')}
+      >
+        <a
+          href={marketplaceUrl}
+          target="_top"
+          className="rdg-sidebar-brand flex items-center gap-3 border-b border-blue-200/70 px-5 py-4 transition-colors dark:border-blue-400/10"
+        >
+          <div className="rdg-brand-mark flex h-10 w-10 flex-shrink-0 items-center justify-center overflow-hidden">
+            {brand?.logoUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={brand.logoUrl} alt={brand.displayName} className="h-8 w-8 object-cover" />
+            ) : (
+              <Car className="h-4 w-4 text-white" />
+            )}
+          </div>
+          <span className="truncate bg-gradient-to-br from-blue-950 to-blue-600 bg-clip-text text-sm font-semibold tracking-[-0.01em] text-transparent dark:from-slate-100 dark:to-blue-300">
+            {brand?.displayName ?? 'RentalDriveGo'}
+          </span>
+        </a>
+
+        <nav className="rdg-sidebar-nav flex-1 space-y-1.5 overflow-y-auto px-3 py-5">
+          {useGeneratedMenu ? renderGeneratedMenu(resolvedMenuItems) : NAV_ITEMS.filter((item) => !mounted || hasMinRole(role, item.minRole)).map((item) => {
+            const Icon = item.icon
+            const active = mounted && isActive(item)
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                aria-current={active ? 'page' : undefined}
+                data-active={active ? 'true' : 'false'}
+                className={[
+                  'rdg-nav-item relative flex items-center gap-3 rounded-lg px-3.5 py-3 text-sm font-medium transition-all duration-200',
+                  active
+                    ? 'bg-blue-500/10 text-blue-950 shadow-[inset_2px_0_0_#3b82f6,0_0_18px_rgba(59,130,246,0.10)] dark:text-slate-50'
+                    : 'text-slate-500 hover:bg-blue-500/10 hover:text-blue-950 dark:text-slate-400 dark:hover:text-slate-50',
+                ].join(' ')}
+              >
+                <Icon className={['h-[18px] w-[18px] flex-shrink-0', active ? 'text-blue-700 dark:text-blue-300' : ''].join(' ')} />
+                {dict.nav[item.key]}
+                {item.key === 'dashboard' ? (
+                  <span className="ml-auto rounded-full border border-blue-400/30 bg-blue-500/15 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:text-blue-300">
+                    Live
+                  </span>
+                ) : null}
+                {item.key === 'notifications' && active ? (
+                  <span className="ml-auto h-1.5 w-1.5 rounded-full bg-orange-400 shadow-[0_0_10px_rgba(249,115,22,0.5)]" />
+                ) : null}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="rdg-sidebar-footer border-t border-blue-200/70 px-3 py-4 dark:border-blue-400/10">
+          <div className="rdg-user-card rounded-xl border border-blue-200/70 bg-blue-50/75 p-3 backdrop-blur dark:border-blue-400/10 dark:bg-blue-500/[0.06]">
+            <div className="flex items-center gap-3">
+            <div className="rdg-avatar flex h-9 w-9 flex-shrink-0 items-center justify-center text-xs font-semibold">
+              {user.initials}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-blue-950 dark:text-white">{user.displayName}</p>
+              <p className="truncate text-xs text-slate-500 dark:text-slate-400">{user.subtitle}</p>
+            </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={signOut}
+            className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-500 transition-colors hover:bg-blue-500/10 hover:text-blue-950 dark:text-slate-400 dark:hover:text-white"
+          >
+            <LogOut className="h-4 w-4" />
+            {dict.signOut}
+          </button>
+          <div className="mt-3 flex items-center gap-2 border-t border-blue-200/70 pt-3 dark:border-blue-400/10">
+            <DashboardLanguageSwitcher />
+            <DashboardThemeSwitcher />
+          </div>
+        </div>
+
+        {/* Arrow tab to collapse sidebar (mobile only, sticks to outer edge) */}
+        <button
+          type="button"
+          onClick={() => setOpen(false)}
+          aria-label="Close sidebar"
+          className={[
+            'absolute top-1/2 z-10 flex h-14 w-5 -translate-y-1/2 items-center justify-center bg-[#0a1128] text-white shadow-lg lg:hidden',
+            isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
+          ].join(' ')}
+        >
+          {isRtl ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
+        </button>
+      </aside>
+    </>
+  )
+}
diff --git a/dashboard/src/components/layout/TopBar.tsx b/dashboard/src/components/layout/TopBar.tsx
new file mode 100644
index 0000000..073a40a
--- /dev/null
+++ b/dashboard/src/components/layout/TopBar.tsx
@@ -0,0 +1,289 @@
+'use client'
+
+import Link from 'next/link'
+import { Bell, Search, Settings } from 'lucide-react'
+import { usePathname, useRouter } from 'next/navigation'
+import { useState, useEffect } from 'react'
+import { io } from 'socket.io-client'
+import { EMPLOYEE_PROFILE_KEY, apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { toDashboardAppPath } from '@/lib/dashboardPaths'
+
+function computeInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return 'U'
+  if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
+  return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
+}
+
+function resolveSocketOrigin(): string | null {
+  if (typeof window === 'undefined') return null
+
+  const configuredApiUrl = process.env.NEXT_PUBLIC_API_URL
+  if (configuredApiUrl) {
+    try {
+      return new URL(configuredApiUrl, window.location.origin).origin
+    } catch {}
+  }
+
+  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    return 'http://localhost:4000'
+  }
+
+  return window.location.origin
+}
+
+export default function TopBar() {
+  const { dict } = useDashboardI18n()
+  const pathname = usePathname()
+  const appPath = toDashboardAppPath(pathname)
+  const router = useRouter()
+  const [unreadCount, setUnreadCount] = useState(0)
+  const [showNotifs, setShowNotifs] = useState(false)
+  const [userInitials, setUserInitials] = useState('W')
+  const [notifications, setNotifications] = useState<Array<{
+    id: string
+    title: string
+    body: string
+    readAt: string | null
+    createdAt: string
+  }>>([])
+  const [loadingNotifs, setLoadingNotifs] = useState(false)
+  const [socketEnabled, setSocketEnabled] = useState(false)
+
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+
+  const title = (() => {
+    if (!mounted) return dict.titles['/']
+    if (dict.titles[appPath]) return dict.titles[appPath]
+    if (appPath.startsWith('/contracts/')) return dict.titles['/contracts'] ?? dict.titles['/']
+    if (appPath.startsWith('/reservations/')) return dict.titles['/reservations'] ?? dict.titles['/']
+    return dict.titles['/']
+  })()
+  async function refreshUnreadCount() {
+    try {
+      const data = await apiFetch<{ unread: number }>('/notifications/unread-count')
+      setUnreadCount(data.unread)
+      setSocketEnabled(true)
+    } catch {
+      setUnreadCount(0)
+      setSocketEnabled(false)
+    }
+  }
+
+  useEffect(() => {
+    refreshUnreadCount()
+  }, [pathname])
+
+  useEffect(() => {
+    function onNotificationsUpdated() {
+      refreshUnreadCount()
+    }
+    window.addEventListener('notifications:updated', onNotificationsUpdated)
+    return () => window.removeEventListener('notifications:updated', onNotificationsUpdated)
+  }, [])
+
+  useEffect(() => {
+    if (!socketEnabled) return
+
+    const socketOrigin = resolveSocketOrigin()
+    if (!socketOrigin) return
+
+    const socket = io(socketOrigin, {
+      autoConnect: false,
+      withCredentials: true,
+      transports: ['polling', 'websocket'],
+    })
+
+    const handleNotification = () => {
+      setUnreadCount((prev) => prev + 1)
+      window.dispatchEvent(new Event('notifications:updated'))
+    }
+
+    socket.on('notification', handleNotification)
+
+    const connectTimer = window.setTimeout(() => {
+      socket.connect()
+    }, 0)
+
+    return () => {
+      window.clearTimeout(connectTimer)
+      socket.off('notification', handleNotification)
+      socket.disconnect()
+    }
+  }, [socketEnabled])
+
+  useEffect(() => {
+    if (!showNotifs) return
+
+    let cancelled = false
+    setLoadingNotifs(true)
+    apiFetch<Array<{
+      id: string
+      title: string
+      body: string
+      readAt: string | null
+      createdAt: string
+    }>>('/notifications/company')
+      .then((data) => {
+        if (cancelled) return
+        setNotifications(data.slice(0, 8))
+      })
+      .catch(() => {
+        if (cancelled) return
+        setNotifications([])
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoadingNotifs(false)
+      })
+
+    return () => { cancelled = true }
+  }, [showNotifs])
+
+  useEffect(() => {
+    setShowNotifs(false)
+  }, [pathname])
+
+  useEffect(() => {
+    const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
+    if (cached) {
+      try {
+        const profile = JSON.parse(cached) as { email?: string; firstName?: string; lastName?: string }
+        const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
+        const email = profile.email ?? ''
+        setUserInitials(computeInitials(fullName || email || dict.workspaceUser))
+      } catch {}
+    }
+
+    let cancelled = false
+
+    apiFetch<{
+      employee: {
+        email: string
+        firstName: string
+        lastName: string
+      }
+    }>('/auth/employee/me')
+      .then(({ employee }) => {
+        if (cancelled) return
+        window.localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(employee))
+        const fullName = `${employee.firstName ?? ''} ${employee.lastName ?? ''}`.trim()
+        const email = employee.email ?? ''
+        setUserInitials(computeInitials(fullName || email || dict.workspaceUser))
+      })
+      .catch(() => {
+        if (cancelled) return
+        setUserInitials(computeInitials(dict.workspaceUser))
+      })
+
+    return () => { cancelled = true }
+  }, [dict.workspaceUser])
+
+  async function openNotificationsInbox(notificationId?: string) {
+    if (notificationId) {
+      try {
+        await apiFetch(`/notifications/company/${notificationId}/read`, { method: 'POST' })
+        setUnreadCount((current) => Math.max(current - 1, 0))
+        window.dispatchEvent(new Event('notifications:updated'))
+      } catch {}
+    }
+    setShowNotifs(false)
+    router.push('/notifications')
+  }
+
+  return (
+    <header className="rdg-topbar relative z-[70] px-4 sm:px-6">
+      <div className="flex items-center gap-4 min-w-0">
+        <div className="min-w-0 shrink-0">
+          <p className="rdg-topbar-kicker hidden sm:block">RentalDriveGo</p>
+          <h1 className="rdg-topbar-title truncate">{title}</h1>
+        </div>
+        <div className="rdg-topbar-search relative hidden w-[min(380px,34vw)] md:block">
+          <Search className="pointer-events-none absolute start-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+          <input
+            type="search"
+            placeholder="Search vehicles, bookings, customers..."
+            className="rdg-search-field h-10 w-full ps-10 pe-4 text-sm outline-none"
+          />
+        </div>
+        <div className="rdg-system-status hidden xl:inline-flex">
+          System operational
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <button
+            onClick={() => setShowNotifs(!showNotifs)}
+            className="relative inline-flex h-11 w-11 items-center justify-center rounded-[var(--rdg-radius-sm)] text-[var(--rdg-text-secondary)] transition-colors hover:bg-[var(--rdg-soft-blue)] hover:text-[var(--rdg-action-primary)]"
+          >
+            <Bell className="h-5 w-5" />
+            {unreadCount > 0 ? (
+              <span className="absolute right-1 top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-orange-500 px-1 text-[10px] font-bold text-white ring-2 ring-white dark:ring-[#0a0f1a]">
+                {unreadCount > 99 ? '99+' : unreadCount}
+              </span>
+            ) : null}
+          </button>
+
+          {showNotifs ? (
+            <div className="card absolute top-full z-[80] mt-2 w-80 p-4 [inset-inline-end:0]">
+              <div className="mb-2 flex items-center justify-between gap-2">
+                <p className="text-sm font-medium text-blue-950 dark:text-slate-100">{dict.notifications}</p>
+                <button
+                  type="button"
+                  onClick={() => openNotificationsInbox()}
+                  className="text-xs font-medium text-orange-700 hover:text-blue-950 dark:text-orange-300 dark:hover:text-white"
+                >
+                  View all
+                </button>
+              </div>
+
+              {loadingNotifs ? (
+                <p className="text-sm text-slate-500 dark:text-slate-400">Loading…</p>
+              ) : notifications.length === 0 ? (
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  {unreadCount === 0 ? dict.noNewNotifications : dict.unreadNotifications(unreadCount)}
+                </p>
+              ) : (
+                <div className="space-y-1">
+                  {notifications.map((notification) => (
+                    <button
+                      key={notification.id}
+                      type="button"
+                      onClick={() => openNotificationsInbox(notification.id)}
+                      className={[
+                        'w-full rounded-lg px-3 py-2 text-left transition-colors hover:bg-blue-500/10',
+                        notification.readAt ? 'opacity-80' : '',
+                      ].join(' ')}
+                    >
+                      <p className="truncate text-sm font-medium text-blue-950 dark:text-slate-100">
+                        {notification.title}
+                      </p>
+                      <p className="truncate text-xs text-slate-500 dark:text-slate-400">
+                        {notification.body}
+                      </p>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null}
+        </div>
+
+        <Link
+          href="/settings"
+          className="hidden h-11 w-11 items-center justify-center rounded-[var(--rdg-radius-sm)] text-[var(--rdg-text-secondary)] transition-colors hover:bg-[var(--rdg-soft-blue)] hover:text-[var(--rdg-action-primary)] sm:inline-flex"
+          aria-label="Settings"
+        >
+          <Settings className="h-5 w-5" />
+        </Link>
+
+        <div className="rdg-avatar flex h-9 w-9 items-center justify-center text-xs font-semibold">
+          {userInitials}
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/dashboard/src/components/public/PublicFooter.tsx b/dashboard/src/components/public/PublicFooter.tsx
new file mode 100644
index 0000000..203edab
--- /dev/null
+++ b/dashboard/src/components/public/PublicFooter.tsx
@@ -0,0 +1,187 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+import { useEffect, useRef, useState } from 'react'
+import {
+  type DashboardLanguage,
+  useDashboardI18n,
+} from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+
+type FooterItem = {
+  label: string
+  href?: string
+}
+
+const appPrivacyHref = {
+  en: `${marketplaceUrl}/app-privacy-en`,
+  fr: `${marketplaceUrl}/app-privacy-fr`,
+  ar: `${marketplaceUrl}/app-privacy-ar`,
+} as const
+
+const localeOptions: Array<{ value: DashboardLanguage; label: string; flag: string }> = [
+  { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
+  { value: 'ar', label: 'North Africa (Arabic)', flag: '🇲🇦' },
+  { value: 'fr', label: 'Europe (French)', flag: '🇫🇷' },
+]
+
+function getFooterContent(language: DashboardLanguage): {
+  primary: FooterItem[]
+  secondary: FooterItem[]
+  localeLabel: string
+  rightsLabel: string
+} {
+  switch (language) {
+    case 'fr':
+      return {
+        primary: [
+          { label: 'À propos de nous', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'Conditions d’utilisation', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'Sécurité', href: `${marketplaceUrl}/footer/security` },
+          { label: 'Conformité', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'Politique de confidentialité', href: appPrivacyHref.fr },
+          { label: 'Politique relative aux cookies', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'Contacter les ventes', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'Conditions générales', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'Europe (French)',
+        rightsLabel: 'Tous droits réservés.',
+      }
+    case 'ar':
+      return {
+        primary: [
+          { label: 'من نحن', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'شروط الاستخدام', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'الأمان', href: `${marketplaceUrl}/footer/security` },
+          { label: 'الامتثال', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'سياسة الخصوصية', href: appPrivacyHref.ar },
+          { label: 'سياسة ملفات تعريف الارتباط', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'النشرة الإخبارية', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'تواصل مع المبيعات', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'الشروط العامة', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'North Africa (Arabic)',
+        rightsLabel: 'جميع الحقوق محفوظة.',
+      }
+    case 'en':
+    default:
+      return {
+        primary: [
+          { label: 'About Us', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'Terms of Service', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'Security', href: `${marketplaceUrl}/footer/security` },
+          { label: 'Compliance', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'Privacy Policy', href: appPrivacyHref.en },
+          { label: 'Cookie Policy', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'Contact Sales', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'General Conditions', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'Global (English)',
+        rightsLabel: 'All rights reserved.',
+      }
+  }
+}
+
+export default function PublicFooter() {
+  const { language, setLanguage } = useDashboardI18n()
+  const footerContent = getFooterContent(language)
+  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
+  const currentLocale = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  return (
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/72 dark:text-stone-300">
+      <div className="mx-auto flex max-w-7xl flex-col items-center gap-5 px-0 text-center sm:px-2 lg:px-0">
+        <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {footerContent.primary.map((item, index) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              {index < footerContent.primary.length - 1 ? (
+                <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+              ) : null}
+            </div>
+          ))}
+        </nav>
+
+        <div className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {footerContent.secondary.map((item) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+            </div>
+          ))}
+          <div ref={localeMenuRef} className="relative px-3">
+            <button
+              type="button"
+              onClick={() => setLocaleMenuOpen((open) => !open)}
+              className="inline-flex items-center gap-2 text-orange-700 transition hover:text-blue-900 dark:text-orange-300 dark:hover:text-stone-100"
+              aria-expanded={localeMenuOpen}
+              aria-haspopup="menu"
+            >
+              <span aria-hidden="true" className="text-base leading-none">{currentLocale.flag}</span>
+              <span>{footerContent.localeLabel}</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {localeMenuOpen ? (
+              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+                {availableLocaleOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => {
+                      setLanguage(option.value)
+                      setLocaleMenuOpen(false)
+                    }}
+                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                  >
+                    <span aria-hidden="true" className="text-base leading-none">{option.flag}</span>
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <p className="text-sm text-stone-500 dark:text-stone-400">
+          &copy; {new Date().getFullYear()} RentalDriveGo. {footerContent.rightsLabel}
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+function FooterNavItem({ item }: { item: FooterItem }) {
+  const className = 'px-3 text-stone-600 transition hover:text-blue-900 dark:text-stone-300 dark:hover:text-white'
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {item.label}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{item.label}</span>
+}
diff --git a/dashboard/src/components/public/PublicNavbar.tsx b/dashboard/src/components/public/PublicNavbar.tsx
new file mode 100644
index 0000000..85bb083
--- /dev/null
+++ b/dashboard/src/components/public/PublicNavbar.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Image from 'next/image'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+
+const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+
+const languageMeta = {
+  en: { flag: '🇺🇸', shortLabel: 'EN' },
+  fr: { flag: '🇫🇷', shortLabel: 'FR' },
+  ar: { flag: '🇲🇦', shortLabel: 'AR' },
+} as const
+
+export default function PublicNavbar() {
+  const { language, setLanguage, theme, setTheme } = useDashboardI18n()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+  const themeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
+  const currentLanguage = languageMeta[language]
+  const availableLanguages = (['en', 'fr', 'ar'] as const)
+    .filter((value) => value !== language)
+    .map((value) => ({ value, ...languageMeta[value] }))
+  const dict = {
+    en: {
+      home: 'Home',
+      marketplace: 'Marketplace',
+      signIn: 'Sign in',
+      createAccount: 'Create Agency Space',
+      theme: 'Theme',
+      light: 'Light',
+      dark: 'Dark',
+    },
+    fr: {
+      home: 'Accueil',
+      marketplace: 'Marketplace',
+      signIn: 'Connexion',
+      createAccount: 'Créer un espace d’agence',
+      theme: 'Mode',
+      light: 'Clair',
+      dark: 'Sombre',
+    },
+    ar: {
+      home: 'الرئيسية',
+      marketplace: 'السوق',
+      signIn: 'تسجيل الدخول',
+      createAccount: 'إنشاء مساحة الوكالة',
+      theme: 'الوضع',
+      light: 'فاتح',
+      dark: 'داكن',
+    },
+  }[language]
+  const themeOptions = [
+    { value: 'light' as const, label: dict.light },
+    { value: 'dark' as const, label: dict.dark },
+  ]
+  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
+  const localeMenuPositionClass =
+    language === 'ar'
+      ? 'right-0 sm:right-0'
+      : 'left-0 sm:left-auto sm:right-0'
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+      if (!themeMenuRef.current?.contains(event.target as Node)) {
+        setThemeMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  function toggleLocaleMenu() {
+    setThemeMenuOpen(false)
+    setLocaleMenuOpen((open) => !open)
+  }
+
+  function toggleThemeMenu() {
+    setLocaleMenuOpen(false)
+    setThemeMenuOpen((open) => !open)
+  }
+
+  const signInParams = new URLSearchParams()
+  signInParams.set('lang', language)
+  signInParams.set('theme', theme)
+  const next = searchParams.get('next')
+  const redirect = searchParams.get('redirect')
+  if (next) signInParams.set('next', next)
+  if (redirect) signInParams.set('redirect', redirect)
+  const signInHref = `${marketplaceUrl}/sign-in?${signInParams.toString()}`
+
+  const signUpParams = new URLSearchParams()
+  signUpParams.set('lang', language)
+  signUpParams.set('theme', theme)
+  const signUpHref = `/dashboard/sign-up?${signUpParams.toString()}`
+
+  function navLinkClass(active: boolean) {
+    return `rounded-full px-2.5 py-1 text-[12px] font-medium transition sm:px-4 sm:py-2 sm:text-sm ${
+      active
+        ? 'bg-blue-50 text-blue-950 ring-1 ring-blue-100 dark:bg-blue-900/55 dark:text-white dark:ring-blue-700/70'
+        : 'text-stone-600 hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100'
+    }`
+  }
+
+  const normalizedPathname = pathname.replace(/^\/dashboard(?=\/|$)/, '') || '/'
+  const signInActive = normalizedPathname === '/sign-in' || normalizedPathname.startsWith('/sign-in/')
+  const signUpActive = normalizedPathname === '/sign-up' || normalizedPathname.startsWith('/sign-up/')
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
+      <div className="mx-auto flex max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
+        <a href={marketplaceUrl} className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-blue-950 dark:text-slate-100 sm:text-sm sm:tracking-[0.2em]">
+          <Image
+            src={DASHBOARD_LOGO_SRC}
+            alt="RentalDriveGo"
+            width={36}
+            height={36}
+            priority
+            className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
+          />
+          <span>RentalDriveGo</span>
+        </a>
+
+        <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
+          <nav className="flex items-center gap-0.5 overflow-x-auto">
+            <a href={marketplaceUrl} className={navLinkClass(false)}>
+              {dict.home}
+            </a>
+            <a href={`${marketplaceUrl}/explore`} className={navLinkClass(false)}>
+              {dict.marketplace}
+            </a>
+            <a href={signInHref} className={navLinkClass(signInActive)} aria-current={signInActive ? 'page' : undefined}>
+              {dict.signIn}
+            </a>
+            <a
+              href={signUpHref}
+              aria-current={signUpActive ? 'page' : undefined}
+              className={`ml-1 rounded-full px-3 py-1 text-[12px] font-semibold transition sm:ml-2 sm:px-5 sm:py-2 sm:text-sm ${
+                signUpActive
+                  ? 'bg-orange-700 text-white ring-2 ring-orange-200 dark:bg-orange-300 dark:text-blue-950 dark:ring-orange-700/50'
+                  : 'bg-blue-900 text-white hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300'
+              }`}
+            >
+              {dict.createAccount}
+            </a>
+          </nav>
+          <div className="shrink-0">
+            <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
+              <div ref={localeMenuRef} className="relative">
+                <button
+                  type="button"
+                  onClick={toggleLocaleMenu}
+                  className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
+                  aria-expanded={localeMenuOpen}
+                  aria-haspopup="menu"
+                >
+                  <span aria-hidden="true">{currentLanguage.flag}</span>
+                  <span>{currentLanguage.shortLabel}</span>
+                  <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+                </button>
+                {localeMenuOpen ? (
+                  <div className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                    {availableLanguages.map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => {
+                          setLanguage(option.value)
+                          setLocaleMenuOpen(false)
+                        }}
+                        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                      >
+                        <span aria-hidden="true">{option.flag}</span>
+                        <span>{option.shortLabel}</span>
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+              <span className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700" aria-hidden="true" />
+              <div ref={themeMenuRef} className="relative">
+                <button
+                  type="button"
+                  onClick={toggleThemeMenu}
+                  className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
+                  aria-expanded={themeMenuOpen}
+                  aria-haspopup="menu"
+                >
+                  <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
+                    {currentTheme.label}
+                  </span>
+                  <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
+                </button>
+                {themeMenuOpen ? (
+                  <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                    {themeOptions
+                      .filter((option) => option.value !== theme)
+                      .map((option) => (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() => {
+                            setTheme(option.value)
+                            setThemeMenuOpen(false)
+                          }}
+                          className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                        >
+                          <span>{option.label}</span>
+                        </button>
+                      ))}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/dashboard/src/components/public/PublicPageLayout.test.ts b/dashboard/src/components/public/PublicPageLayout.test.ts
new file mode 100644
index 0000000..26af984
--- /dev/null
+++ b/dashboard/src/components/public/PublicPageLayout.test.ts
@@ -0,0 +1,33 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('./PublicNavbar', () => ({ default: function MockPublicNavbar() { return React.createElement('mock-navbar') } }))
+vi.mock('./PublicFooter', () => ({ default: function MockPublicFooter() { return React.createElement('mock-footer') } }))
+
+import PublicPageLayout from './PublicPageLayout'
+
+function childTypes(node: React.ReactElement): string[] {
+  return React.Children.toArray(node.props.children).filter(isValidElement).map((child) => {
+    const type = child.type as any
+    return typeof type === 'string' ? type : type.displayName ?? type.name ?? 'anonymous'
+  })
+}
+
+describe('PublicPageLayout', () => {
+  it('provides reusable public chrome for sign-in and account creation pages', () => {
+    const layout = PublicPageLayout({ children: React.createElement('main') })
+
+    expect(childTypes(layout)).toEqual(['MockPublicNavbar', 'div', 'MockPublicFooter'])
+    expect(layout.props['data-public-page-layout']).toBe('true')
+  })
+
+  it('allows either public chrome region to be disabled independently', () => {
+    const layout = PublicPageLayout({
+      children: React.createElement('main'),
+      showNavbar: false,
+      showFooter: true,
+    })
+
+    expect(childTypes(layout)).toEqual(['div', 'MockPublicFooter'])
+  })
+})
diff --git a/dashboard/src/components/public/PublicPageLayout.tsx b/dashboard/src/components/public/PublicPageLayout.tsx
new file mode 100644
index 0000000..f1cc1e5
--- /dev/null
+++ b/dashboard/src/components/public/PublicPageLayout.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import PublicFooter from './PublicFooter'
+import PublicNavbar from './PublicNavbar'
+
+export type PublicPageLayoutProps = {
+  children: ReactNode
+  embedded?: boolean
+  showNavbar?: boolean
+  showFooter?: boolean
+  className?: string
+  contentClassName?: string
+}
+
+/**
+ * Shared frame for dashboard pages that live outside the authenticated app shell.
+ * Use `embedded` for iframe/partner surfaces that must not render nested chrome.
+ */
+export default function PublicPageLayout({
+  children,
+  embedded = false,
+  showNavbar = true,
+  showFooter = true,
+  className = '',
+  contentClassName = '',
+}: PublicPageLayoutProps) {
+  return (
+    <div
+      className={`flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0f1f4a_0%,#112d6e_35%,#0d1f4f_100%)] dark:text-slate-100 ${className}`.trim()}
+      data-public-page-layout="true"
+      data-embedded={embedded ? 'true' : 'false'}
+    >
+      {!embedded && showNavbar ? <PublicNavbar /> : null}
+      <div className={`flex flex-1 flex-col ${contentClassName}`.trim()}>{children}</div>
+      {!embedded && showFooter ? <PublicFooter /> : null}
+    </div>
+  )
+}
diff --git a/dashboard/src/components/public/index.ts b/dashboard/src/components/public/index.ts
new file mode 100644
index 0000000..ff4c925
--- /dev/null
+++ b/dashboard/src/components/public/index.ts
@@ -0,0 +1,6 @@
+'use client'
+
+export { default as PublicFooter } from './PublicFooter'
+export { default as PublicNavbar } from './PublicNavbar'
+export { default as PublicPageLayout } from './PublicPageLayout'
+export type { PublicPageLayoutProps } from './PublicPageLayout'
diff --git a/dashboard/src/components/reservations/DamageInspectionCard.helpers.test.ts b/dashboard/src/components/reservations/DamageInspectionCard.helpers.test.ts
new file mode 100644
index 0000000..6b86e40
--- /dev/null
+++ b/dashboard/src/components/reservations/DamageInspectionCard.helpers.test.ts
@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildInspectionSavePayload,
+  comparisonPointsForCheckout,
+  editableDamagePointsForInspection,
+  pointKey,
+  type DamageInspection,
+  type DamagePoint,
+} from './DamageInspectionCard'
+
+function point(overrides: Partial<DamagePoint> = {}): DamagePoint {
+  return {
+    viewType: 'TOP',
+    x: 10,
+    y: 20,
+    damageType: 'SCRATCH',
+    severity: 'MINOR',
+    description: null,
+    isPreExisting: false,
+    ...overrides,
+  }
+}
+
+function inspection(overrides: Partial<DamageInspection> = {}): DamageInspection {
+  return {
+    id: 'inspection-1',
+    type: 'CHECKOUT',
+    mileage: 45000,
+    fuelLevel: 'FULL',
+    fuelCharge: null,
+    generalCondition: 'Clean',
+    employeeNotes: 'No issues',
+    customerAgreed: true,
+    damagePoints: [],
+    ...overrides,
+  }
+}
+
+describe('DamageInspectionCard helpers', () => {
+  it('builds stable duplicate keys using rounded coordinates and damage metadata', () => {
+    expect(pointKey(point({ x: 12.3456, y: 78.994 }))).toBe('TOP:12.35:78.99:SCRATCH:MINOR')
+    expect(pointKey(point({ viewType: 'LEFT', damageType: 'DENT', severity: 'MAJOR' }))).toBe('LEFT:10.00:20.00:DENT:MAJOR')
+  })
+
+  it('deduplicates checkout comparison points against stored pre-existing points', () => {
+    const duplicate = point({ id: 'cmp-1', isPreExisting: true, description: 'old scratch' })
+    const storedDuplicate = point({ id: 'stored-1', isPreExisting: true, description: 'stored copy' })
+    const storedUnique = point({ id: 'stored-2', viewType: 'REAR', x: 33, y: 44, isPreExisting: true })
+
+    const result = comparisonPointsForCheckout(
+      inspection({ damagePoints: [storedDuplicate, storedUnique] }),
+      [duplicate]
+    )
+
+    expect(result).toEqual([duplicate, storedUnique])
+  })
+
+  it('keeps checkout editing focused on new damage while check-in exposes all points', () => {
+    const oldDamage = point({ id: 'old', isPreExisting: true })
+    const newDamage = point({ id: 'new', isPreExisting: false })
+    const record = inspection({ damagePoints: [oldDamage, newDamage] })
+
+    expect(editableDamagePointsForInspection('CHECKOUT', record)).toEqual([newDamage])
+    expect(editableDamagePointsForInspection('CHECKIN', record)).toEqual([oldDamage, newDamage])
+  })
+
+  it('builds compact save payloads and omits nullable/empty fields', () => {
+    const payload = buildInspectionSavePayload(
+      inspection({
+        mileage: null,
+        fuelCharge: null,
+        generalCondition: '',
+        employeeNotes: '',
+        customerAgreed: false,
+        damagePoints: [point({ description: '' })],
+      }),
+      [point({ id: 'pre', viewType: 'FRONT', description: 'pre-existing chip', isPreExisting: true })]
+    )
+
+    expect(payload).toEqual({
+      fuelLevel: 'FULL',
+      customerAgreed: false,
+      damagePoints: [
+        {
+          viewType: 'FRONT',
+          x: 10,
+          y: 20,
+          damageType: 'SCRATCH',
+          severity: 'MINOR',
+          description: 'pre-existing chip',
+          isPreExisting: true,
+        },
+        {
+          viewType: 'TOP',
+          x: 10,
+          y: 20,
+          damageType: 'SCRATCH',
+          severity: 'MINOR',
+          isPreExisting: false,
+        },
+      ],
+    })
+  })
+})
diff --git a/dashboard/src/components/reservations/DamageInspectionCard.tsx b/dashboard/src/components/reservations/DamageInspectionCard.tsx
new file mode 100644
index 0000000..cc9094b
--- /dev/null
+++ b/dashboard/src/components/reservations/DamageInspectionCard.tsx
@@ -0,0 +1,303 @@
+'use client'
+
+import { useState } from 'react'
+import { apiFetch } from '@/lib/api'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import VehicleConditionSheet from './VehicleConditionSheet'
+
+type InspectionType = 'CHECKIN' | 'CHECKOUT'
+type FuelLevel = 'FULL' | 'SEVEN_EIGHTHS' | 'THREE_QUARTERS' | 'FIVE_EIGHTHS' | 'HALF' | 'THREE_EIGHTHS' | 'QUARTER' | 'ONE_EIGHTH' | 'EMPTY'
+type DamageType = 'SCRATCH' | 'DENT' | 'CRACK' | 'CHIP' | 'MISSING' | 'STAIN' | 'OTHER'
+type DamageSeverity = 'MINOR' | 'MODERATE' | 'MAJOR'
+
+export interface DamagePoint {
+  id?: string
+  viewType: 'TOP' | 'FRONT' | 'REAR' | 'LEFT' | 'RIGHT'
+  x: number
+  y: number
+  damageType: DamageType
+  severity: DamageSeverity
+  description?: string | null
+  isPreExisting: boolean
+}
+
+export interface DamageInspection {
+  id: string
+  type: InspectionType
+  mileage: number | null
+  fuelLevel: FuelLevel
+  fuelCharge: number | null
+  generalCondition: string | null
+  employeeNotes: string | null
+  customerAgreed: boolean
+  damagePoints: DamagePoint[]
+}
+
+const fuelLevels: FuelLevel[] = ['FULL', 'SEVEN_EIGHTHS', 'THREE_QUARTERS', 'FIVE_EIGHTHS', 'HALF', 'THREE_EIGHTHS', 'QUARTER', 'ONE_EIGHTH', 'EMPTY']
+const damageTypes: DamageType[] = ['SCRATCH', 'DENT', 'CRACK', 'CHIP', 'MISSING', 'STAIN', 'OTHER']
+const severityColors: Record<DamageSeverity, string> = {
+  MINOR: '#f59e0b',
+  MODERATE: '#f97316',
+  MAJOR: '#dc2626',
+}
+
+export function pointKey(point: Pick<DamagePoint, 'viewType' | 'x' | 'y' | 'damageType' | 'severity'>) {
+  return `${point.viewType}:${point.x.toFixed(2)}:${point.y.toFixed(2)}:${point.damageType}:${point.severity}`
+}
+
+
+export function comparisonPointsForCheckout(initialInspection: DamageInspection | null | undefined, comparisonPoints: DamagePoint[]): DamagePoint[] {
+  const storedPreExistingPoints = initialInspection?.damagePoints?.filter((point) => point.isPreExisting) ?? []
+  return [...comparisonPoints, ...storedPreExistingPoints].filter((point, index, all) => all.findIndex((item) => pointKey(item) === pointKey(point)) === index)
+}
+
+export function editableDamagePointsForInspection(type: InspectionType, initialInspection: DamageInspection | null | undefined): DamagePoint[] {
+  const points = initialInspection?.damagePoints ?? []
+  return type === 'CHECKOUT' ? points.filter((point) => !point.isPreExisting) : points
+}
+
+export function buildInspectionSavePayload(inspection: DamageInspection, overlayComparisonPoints: DamagePoint[]) {
+  const payloadPoints = [
+    ...overlayComparisonPoints.map(({ viewType, x, y, damageType, severity, description }) => ({
+      viewType,
+      x,
+      y,
+      damageType,
+      severity,
+      ...(description ? { description } : {}),
+      isPreExisting: true,
+    })),
+    ...inspection.damagePoints.map(({ viewType, x, y, damageType, severity, description, isPreExisting }) => ({
+      viewType,
+      x,
+      y,
+      damageType,
+      severity,
+      ...(description ? { description } : {}),
+      isPreExisting,
+    })),
+  ]
+
+  return {
+    ...(inspection.mileage !== null ? { mileage: inspection.mileage } : {}),
+    fuelLevel: inspection.fuelLevel,
+    ...(inspection.fuelCharge !== null ? { fuelCharge: inspection.fuelCharge } : {}),
+    ...(inspection.generalCondition ? { generalCondition: inspection.generalCondition } : {}),
+    ...(inspection.employeeNotes ? { employeeNotes: inspection.employeeNotes } : {}),
+    customerAgreed: inspection.customerAgreed,
+    damagePoints: payloadPoints,
+  }
+}
+
+export default function DamageInspectionCard({
+  reservationId,
+  type,
+  initialInspection,
+  comparisonPoints = [],
+  editable = true,
+  readOnlyMessage,
+  onSaved,
+}: {
+  reservationId: string
+  type: InspectionType
+  initialInspection?: DamageInspection | null
+  comparisonPoints?: DamagePoint[]
+  editable?: boolean
+  readOnlyMessage?: string | null
+  onSaved: (inspection: DamageInspection) => void
+}) {
+  const { dict } = useDashboardI18n()
+  const r = dict.reservations
+  const overlayComparisonPoints = type === 'CHECKOUT'
+    ? comparisonPointsForCheckout(initialInspection, comparisonPoints)
+    : []
+
+  const [inspection, setInspection] = useState<DamageInspection>({
+    id: initialInspection?.id ?? `${type.toLowerCase()}-draft`,
+    type,
+    mileage: initialInspection?.mileage ?? null,
+    fuelLevel: initialInspection?.fuelLevel ?? 'FULL',
+    fuelCharge: initialInspection?.fuelCharge ?? null,
+    generalCondition: initialInspection?.generalCondition ?? '',
+    employeeNotes: initialInspection?.employeeNotes ?? '',
+    customerAgreed: initialInspection?.customerAgreed ?? false,
+    damagePoints: editableDamagePointsForInspection(type, initialInspection),
+  })
+  const [damageType, setDamageType] = useState<DamageType>('SCRATCH')
+  const [severity, setSeverity] = useState<DamageSeverity>('MINOR')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function saveInspection() {
+    setSaving(true)
+    setError(null)
+    try {
+      const payload = buildInspectionSavePayload(inspection, overlayComparisonPoints)
+
+      const result = await apiFetch<DamageInspection>(`/reservations/${reservationId}/inspections/${type.toLowerCase()}`, {
+        method: 'PUT',
+        body: JSON.stringify(payload),
+      })
+      setInspection({
+        ...result,
+        damagePoints: type === 'CHECKOUT'
+          ? result.damagePoints.filter((point) => !point.isPreExisting)
+          : result.damagePoints,
+      })
+      onSaved(result)
+    } catch (err: any) {
+      setError(err.message ?? r.failedSaveInspection)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function addDamagePoint(viewType: DamagePoint['viewType'], x: number, y: number) {
+    setInspection((current) => ({
+      ...current,
+      damagePoints: [
+        ...current.damagePoints,
+        { viewType, x, y, damageType, severity, description: '', isPreExisting: type === 'CHECKIN' },
+      ],
+    }))
+  }
+
+  function removePoint(index: number) {
+    setInspection((current) => ({
+      ...current,
+      damagePoints: current.damagePoints.filter((_, i) => i !== index),
+    }))
+  }
+
+  return (
+    <div className="card p-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3 className="text-base font-semibold text-slate-900">{r.inspectionCardTitle(type)}</h3>
+          <p className="mt-1 text-sm text-slate-500">{r.inspectionSubtitle}</p>
+        </div>
+        <button onClick={saveInspection} disabled={saving || !editable} className="btn-primary">
+          {saving ? r.savingInspection : r.saveInspection}
+        </button>
+      </div>
+
+      {error && <div className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
+      {!editable && readOnlyMessage && (
+        <div className="mt-4 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+          {readOnlyMessage}
+        </div>
+      )}
+
+      <div className="mt-5 grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+        <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+          <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
+            {damageTypes.map((option) => (
+              <button
+                key={option}
+                type="button"
+                onClick={() => setDamageType(option)}
+                disabled={!editable}
+                className={`rounded-full px-3 py-1.5 font-semibold ${damageType === option ? 'bg-blue-700 text-white' : 'bg-white text-slate-600'}`}
+              >
+                {r.damageTypeLabels[option]}
+              </button>
+            ))}
+          </div>
+          <div className="mb-4 flex flex-wrap items-center gap-2 text-xs">
+            {(Object.keys(severityColors) as DamageSeverity[]).map((option) => (
+              <button
+                key={option}
+                type="button"
+                onClick={() => setSeverity(option)}
+                disabled={!editable}
+                className="rounded-full px-3 py-1.5 font-semibold text-white"
+                style={{ backgroundColor: severityColors[option], opacity: severity === option ? 1 : 0.55 }}
+              >
+                {r.severityLabels[option]}
+              </button>
+            ))}
+          </div>
+          {type === 'CHECKOUT' && overlayComparisonPoints.length > 0 && (
+            <div className="mb-4 flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-slate-100 px-3 py-2 text-xs text-slate-600">
+              <span className="inline-flex items-center gap-2">
+                <span className="h-3.5 w-3.5 rounded-full border-2 border-dashed border-slate-500 bg-white" />
+                {r.inspectionCardTitle('CHECKIN')}
+              </span>
+              <span className="inline-flex items-center gap-2">
+                <span className="h-3.5 w-3.5 rounded-full bg-blue-700" />
+                {r.inspectionCardTitle('CHECKOUT')}
+              </span>
+            </div>
+          )}
+
+          <VehicleConditionSheet
+            points={inspection.damagePoints}
+            comparisonPoints={overlayComparisonPoints}
+            interactive={editable}
+            onAddPoint={editable ? addDamagePoint : undefined}
+            className={`w-full rounded-2xl border border-slate-200 bg-white ${editable ? 'cursor-crosshair' : 'cursor-default'}`}
+          />
+          <p className="mt-2 text-xs text-slate-500">{r.diagramHelp}</p>
+        </div>
+
+        <div className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{r.mileageLabel}</label>
+              <input
+                type="number"
+                className="input-field"
+                value={inspection.mileage ?? ''}
+                disabled={!editable}
+                onChange={(e) => setInspection((cur) => ({ ...cur, mileage: e.target.value ? Number(e.target.value) : null }))}
+              />
+            </div>
+            <div>
+              <label className="mb-1.5 block text-sm font-medium text-slate-700">{r.fuelLevelLabel}</label>
+              <select className="input-field" value={inspection.fuelLevel} disabled={!editable} onChange={(e) => setInspection((cur) => ({ ...cur, fuelLevel: e.target.value as FuelLevel }))}>
+                {fuelLevels.map((fl) => <option key={fl} value={fl}>{r.fuelLevels[fl]}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-slate-700">{r.generalConditionLabel}</label>
+            <textarea className="input-field min-h-24" value={inspection.generalCondition ?? ''} disabled={!editable} onChange={(e) => setInspection((cur) => ({ ...cur, generalCondition: e.target.value }))} />
+          </div>
+
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-slate-700">{r.employeeNotesLabel}</label>
+            <textarea className="input-field min-h-24" value={inspection.employeeNotes ?? ''} disabled={!editable} onChange={(e) => setInspection((cur) => ({ ...cur, employeeNotes: e.target.value }))} />
+          </div>
+
+          <label className="flex items-center gap-3 text-sm font-medium text-slate-700">
+            <input type="checkbox" checked={inspection.customerAgreed} disabled={!editable} onChange={(e) => setInspection((cur) => ({ ...cur, customerAgreed: e.target.checked }))} />
+            {r.customerAcknowledged}
+          </label>
+
+          <div className="rounded-2xl border border-slate-200">
+            <div className="border-b border-slate-200 px-4 py-3">
+              <p className="text-sm font-semibold text-slate-900">{r.damageMarkersHeading}</p>
+            </div>
+            <div className="divide-y divide-slate-100">
+              {inspection.damagePoints.map((point, index) => (
+                <div key={`${point.x}-${point.y}-${index}`} className="flex items-center justify-between gap-3 px-4 py-3 text-sm">
+                  <div>
+                    <p className="font-medium text-slate-900">{r.damageTypeLabels[point.damageType]} · {r.severityLabels[point.severity]}</p>
+                    <p className="text-xs text-slate-500">{point.viewType} · x {point.x.toFixed(1)} · y {point.y.toFixed(1)}</p>
+                  </div>
+                  <button type="button" onClick={() => removePoint(index)} disabled={!editable} className="rounded-full border border-slate-300 px-3 py-1 text-xs font-semibold text-slate-600 disabled:cursor-not-allowed disabled:opacity-50">
+                    {r.removeMarker}
+                  </button>
+                </div>
+              ))}
+              {inspection.damagePoints.length === 0 && (
+                <div className="px-4 py-6 text-sm text-slate-400">{r.noMarkers}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/reservations/ReservationPhotoSection.tsx b/dashboard/src/components/reservations/ReservationPhotoSection.tsx
new file mode 100644
index 0000000..e4fc115
--- /dev/null
+++ b/dashboard/src/components/reservations/ReservationPhotoSection.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { apiFetch } from '@/lib/api'
+
+interface ReservationPhoto {
+  id: string
+  type: 'PICKUP' | 'DROPOFF'
+  url: string
+  createdAt: string
+}
+
+interface Props {
+  reservationId: string
+  type: 'PICKUP' | 'DROPOFF'
+  editable: boolean
+  title: string
+  readOnlyMessage?: string
+}
+
+export default function ReservationPhotoSection({ reservationId, type, editable, title, readOnlyMessage }: Props) {
+  const [photos, setPhotos] = useState<ReservationPhoto[]>([])
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const loadPhotos = useCallback(async () => {
+    try {
+      const all = await apiFetch<ReservationPhoto[]>(`/reservations/${reservationId}/photos`)
+      setPhotos(all.filter((p) => p.type === type))
+    } catch {
+      // silent — don't block the page if photos fail to load
+    }
+  }, [reservationId, type])
+
+  useEffect(() => { loadPhotos() }, [loadPhotos])
+
+  async function handleFiles(files: FileList | null) {
+    if (!files || files.length === 0) return
+    setUploading(true)
+    setError(null)
+    try {
+      for (const file of Array.from(files)) {
+        const body = new FormData()
+        body.append('photo', file)
+        body.append('type', type)
+        await apiFetch(`/reservations/${reservationId}/photos`, { method: 'POST', body })
+      }
+      await loadPhotos()
+    } catch (err: any) {
+      setError(err.message ?? 'Upload failed')
+    } finally {
+      setUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    }
+  }
+
+  async function handleDelete(photoId: string) {
+    setError(null)
+    try {
+      await apiFetch(`/reservations/${reservationId}/photos/${photoId}`, { method: 'DELETE' })
+      setPhotos((prev) => prev.filter((p) => p.id !== photoId))
+    } catch (err: any) {
+      setError(err.message ?? 'Delete failed')
+    }
+  }
+
+  return (
+    <div className="card p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-base font-semibold text-slate-900">{title}</h3>
+        {editable && (
+          <button
+            type="button"
+            disabled={uploading}
+            onClick={() => fileInputRef.current?.click()}
+            className="btn-secondary text-xs"
+          >
+            {uploading ? 'Uploading…' : '+ Add photos'}
+          </button>
+        )}
+      </div>
+
+      {!editable && readOnlyMessage && (
+        <p className="mb-4 text-xs text-slate-500">{readOnlyMessage}</p>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        className="hidden"
+        onChange={(e) => handleFiles(e.target.files)}
+      />
+
+      {error && <p className="mb-3 text-xs text-red-600">{error}</p>}
+
+      {photos.length === 0 ? (
+        <p className="text-sm text-slate-400">No photos yet.</p>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+          {photos.map((photo) => (
+            <div key={photo.id} className="group relative aspect-square overflow-hidden rounded-xl border border-slate-200">
+              <img src={photo.url} alt="" className="h-full w-full object-cover" />
+              {editable && (
+                <button
+                  type="button"
+                  onClick={() => handleDelete(photo.id)}
+                  className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-full bg-black/60 text-white group-hover:flex"
+                  aria-label="Delete photo"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/components/reservations/VehicleConditionSheet.boundary.test.ts b/dashboard/src/components/reservations/VehicleConditionSheet.boundary.test.ts
new file mode 100644
index 0000000..882a200
--- /dev/null
+++ b/dashboard/src/components/reservations/VehicleConditionSheet.boundary.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import {
+  SHEET_HEIGHT,
+  SHEET_WIDTH,
+  resolvePointPosition,
+  resolveVehicleSheetClick,
+  severityColors,
+  viewBoxes,
+  type VehicleSheetPoint,
+} from './VehicleConditionSheet'
+
+const rect = { left: 10, top: 20, width: SHEET_WIDTH * 2, height: SHEET_HEIGHT * 2 } as Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>
+
+function sheetClientPoint(x: number, y: number) {
+  return {
+    clientX: rect.left + (x / SHEET_WIDTH) * rect.width,
+    clientY: rect.top + (y / SHEET_HEIGHT) * rect.height,
+  }
+}
+
+describe('VehicleConditionSheet geometry helpers', () => {
+  it('maps percentage positions into absolute sheet coordinates per view', () => {
+    expect(resolvePointPosition({ viewType: 'TOP', x: 50, y: 50, severity: 'MINOR' })).toEqual({
+      cx: viewBoxes.TOP.x + viewBoxes.TOP.w / 2,
+      cy: viewBoxes.TOP.y + viewBoxes.TOP.h / 2,
+    })
+    expect(resolvePointPosition({ viewType: 'LEFT', x: 0, y: 100, severity: 'MAJOR' })).toEqual({
+      cx: viewBoxes.LEFT.x,
+      cy: viewBoxes.LEFT.y + viewBoxes.LEFT.h,
+    })
+  })
+
+  it('defaults missing viewType to TOP for legacy damage points', () => {
+    const legacyPoint = { x: 25, y: 10, severity: 'MODERATE' } satisfies VehicleSheetPoint
+
+    expect(resolvePointPosition(legacyPoint)).toEqual({
+      cx: viewBoxes.TOP.x + viewBoxes.TOP.w * 0.25,
+      cy: viewBoxes.TOP.y + viewBoxes.TOP.h * 0.1,
+    })
+  })
+
+  it('resolves clicks inside each vehicle region to local percentages', () => {
+    const topCenter = sheetClientPoint(viewBoxes.TOP.x + viewBoxes.TOP.w / 2, viewBoxes.TOP.y + viewBoxes.TOP.h / 2)
+    const frontCorner = sheetClientPoint(viewBoxes.FRONT.x, viewBoxes.FRONT.y)
+    const rearCorner = sheetClientPoint(viewBoxes.REAR.x + viewBoxes.REAR.w, viewBoxes.REAR.y + viewBoxes.REAR.h)
+
+    expect(resolveVehicleSheetClick(topCenter.clientX, topCenter.clientY, rect)).toEqual({ viewType: 'TOP', x: 50, y: 50 })
+    expect(resolveVehicleSheetClick(frontCorner.clientX, frontCorner.clientY, rect)).toEqual({ viewType: 'FRONT', x: 0, y: 0 })
+    expect(resolveVehicleSheetClick(rearCorner.clientX, rearCorner.clientY, rect)).toEqual({ viewType: 'REAR', x: 100, y: 100 })
+  })
+
+  it('rejects clicks outside vehicle regions instead of creating impossible damage points', () => {
+    const outside = sheetClientPoint(40, 40)
+
+    expect(resolveVehicleSheetClick(outside.clientX, outside.clientY, rect)).toBeNull()
+  })
+
+  it('keeps severity color mapping explicit for rendering and comparison markers', () => {
+    expect(severityColors).toEqual({
+      MINOR: '#f59e0b',
+      MODERATE: '#f97316',
+      MAJOR: '#dc2626',
+    })
+  })
+})
diff --git a/dashboard/src/components/reservations/VehicleConditionSheet.tsx b/dashboard/src/components/reservations/VehicleConditionSheet.tsx
new file mode 100644
index 0000000..e0e099a
--- /dev/null
+++ b/dashboard/src/components/reservations/VehicleConditionSheet.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+export type VehicleSheetView = 'TOP' | 'FRONT' | 'REAR' | 'LEFT' | 'RIGHT'
+
+export type VehicleSheetPoint = {
+  viewType?: VehicleSheetView
+  x: number
+  y: number
+  severity: 'MINOR' | 'MODERATE' | 'MAJOR'
+}
+
+export const SHEET_WIDTH = 573
+export const SHEET_HEIGHT = 876
+const SHEET_IMAGE_PATH = '/dashboard/vehicle-condition-template.png'
+
+export const severityColors: Record<VehicleSheetPoint['severity'], string> = {
+  MINOR: '#f59e0b',
+  MODERATE: '#f97316',
+  MAJOR: '#dc2626',
+}
+
+export const viewBoxes: Record<VehicleSheetView, { x: number; y: number; w: number; h: number }> = {
+  FRONT: { x: 161, y: 4, w: 251, h: 108 },
+  TOP: { x: 150, y: 112, w: 273, h: 613 },
+  REAR: { x: 156, y: 724, w: 252, h: 123 },
+  LEFT: { x: 4, y: 114, w: 146, h: 618 },
+  RIGHT: { x: 423, y: 114, w: 146, h: 618 },
+}
+
+export function resolvePointPosition(point: VehicleSheetPoint) {
+  const viewType = point.viewType ?? 'TOP'
+  const box = viewBoxes[viewType]
+
+  return {
+    cx: box.x + (point.x / 100) * box.w,
+    cy: box.y + (point.y / 100) * box.h,
+  }
+}
+
+
+export function resolveVehicleSheetClick(clientX: number, clientY: number, rect: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>): { viewType: VehicleSheetView; x: number; y: number } | null {
+  const x = ((clientX - rect.left) / rect.width) * SHEET_WIDTH
+  const y = ((clientY - rect.top) / rect.height) * SHEET_HEIGHT
+
+  const target = (Object.entries(viewBoxes) as Array<[VehicleSheetView, { x: number; y: number; w: number; h: number }]>).find(([, box]) =>
+    x >= box.x && x <= box.x + box.w && y >= box.y && y <= box.y + box.h
+  )
+
+  if (!target) return null
+
+  const [viewType, box] = target
+  return {
+    viewType,
+    x: ((x - box.x) / box.w) * 100,
+    y: ((y - box.y) / box.h) * 100,
+  }
+}
+
+function renderMarker(point: VehicleSheetPoint, index: number, variant: 'current' | 'comparison') {
+  const { cx, cy } = resolvePointPosition(point)
+  const color = severityColors[point.severity]
+
+  if (variant === 'comparison') {
+    return (
+      <g key={`comparison-${point.viewType ?? 'TOP'}-${point.x}-${point.y}-${index}`}>
+        <circle cx={cx} cy={cy} r="9" fill="rgba(255,255,255,0.92)" stroke={color} strokeWidth="2.5" strokeDasharray="5 4" />
+        <circle cx={cx} cy={cy} r="4" fill={color} opacity="0.28" />
+      </g>
+    )
+  }
+
+  return (
+    <circle
+      key={`current-${point.viewType ?? 'TOP'}-${point.x}-${point.y}-${index}`}
+      cx={cx}
+      cy={cy}
+      r="7.5"
+      fill={color}
+      stroke="white"
+      strokeWidth="2.5"
+    />
+  )
+}
+
+export default function VehicleConditionSheet({
+  points,
+  comparisonPoints = [],
+  interactive = false,
+  className = '',
+  onAddPoint,
+}: {
+  points: VehicleSheetPoint[]
+  comparisonPoints?: VehicleSheetPoint[]
+  interactive?: boolean
+  className?: string
+  onAddPoint?: (viewType: VehicleSheetView, x: number, y: number) => void
+}) {
+  function handleClick(event: React.MouseEvent<SVGSVGElement>) {
+    if (!interactive || !onAddPoint) return
+
+    const resolved = resolveVehicleSheetClick(event.clientX, event.clientY, event.currentTarget.getBoundingClientRect())
+    if (!resolved) return
+
+    onAddPoint(resolved.viewType, resolved.x, resolved.y)
+  }
+
+  return (
+    <svg
+      viewBox={`0 0 ${SHEET_WIDTH} ${SHEET_HEIGHT}`}
+      className={className}
+      onClick={handleClick}
+    >
+      <rect x="1.5" y="1.5" width={SHEET_WIDTH - 3} height={SHEET_HEIGHT - 3} rx="18" fill="#fff" stroke="#cbd5e1" strokeWidth="3" />
+      <image href={SHEET_IMAGE_PATH} x="0" y="0" width={SHEET_WIDTH} height={SHEET_HEIGHT} preserveAspectRatio="xMidYMid meet" />
+      {comparisonPoints.map((point, index) => renderMarker(point, index, 'comparison'))}
+      {points.map((point, index) => renderMarker(point, index, 'current'))}
+    </svg>
+  )
+}
diff --git a/dashboard/src/components/team/EditMemberModal.tsx b/dashboard/src/components/team/EditMemberModal.tsx
new file mode 100644
index 0000000..983bb42
--- /dev/null
+++ b/dashboard/src/components/team/EditMemberModal.tsx
@@ -0,0 +1,339 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { TeamMember } from '@/hooks/useTeam'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface Props {
+  member: TeamMember | null
+  open: boolean
+  onClose: () => void
+  onUpdateRole: (memberId: string, role: 'MANAGER' | 'AGENT') => Promise<void>
+  onDeactivate: (memberId: string) => Promise<void>
+  onReactivate: (memberId: string) => Promise<void>
+  onRemove: (memberId: string) => Promise<void>
+}
+
+type ActionState = 'idle' | 'saving' | 'deactivating' | 'reactivating' | 'removing'
+type ConfirmAction = 'deactivate' | 'reactivate' | 'remove' | null
+
+const copy = {
+  en: {
+    pendingInvite: 'Pending invite',
+    deactivated: 'Deactivated',
+    role: 'Role',
+    cancel: 'Cancel',
+    saveChanges: 'Save changes',
+    saving: 'Saving…',
+    working: 'Working…',
+    deactivate: 'Deactivate',
+    reactivate: 'Reactivate',
+    remove: 'Remove',
+    removePermanently: 'Remove permanently',
+    confirmDeactivateTitle: 'Deactivate this member?',
+    confirmRemoveTitle: 'Permanently remove this member?',
+    confirmReactivateTitle: 'Reactivate this member?',
+    confirmDeactivateDesc: "They'll immediately lose dashboard access. You can reactivate anytime.",
+    confirmRemoveDesc: "This will delete the employee record and revoke their dashboard access. This cannot be undone.",
+    confirmReactivateDesc: "They'll regain dashboard access with their current role.",
+    roleOptions: [
+      { value: 'MANAGER' as const, label: 'Manager', description: 'Full ops — no billing' },
+      { value: 'AGENT' as const, label: 'Agent', description: 'Reservations & check-ins' },
+    ],
+  },
+  fr: {
+    pendingInvite: 'Invitation en attente',
+    deactivated: 'Désactivé',
+    role: 'Rôle',
+    cancel: 'Annuler',
+    saveChanges: 'Enregistrer',
+    saving: 'Enregistrement…',
+    working: 'En cours…',
+    deactivate: 'Désactiver',
+    reactivate: 'Réactiver',
+    remove: 'Supprimer',
+    removePermanently: 'Supprimer définitivement',
+    confirmDeactivateTitle: 'Désactiver ce membre ?',
+    confirmRemoveTitle: 'Supprimer définitivement ce membre ?',
+    confirmReactivateTitle: 'Réactiver ce membre ?',
+    confirmDeactivateDesc: "Il perdra immédiatement l'accès au tableau de bord. Vous pouvez le réactiver à tout moment.",
+    confirmRemoveDesc: "Cela supprimera le compte et révoquera son accès au tableau de bord. Cette action est irréversible.",
+    confirmReactivateDesc: "Il retrouvera l'accès au tableau de bord avec son rôle actuel.",
+    roleOptions: [
+      { value: 'MANAGER' as const, label: 'Manager', description: 'Opérations complètes — sans facturation' },
+      { value: 'AGENT' as const, label: 'Agent', description: 'Réservations et enregistrements' },
+    ],
+  },
+  ar: {
+    pendingInvite: 'دعوة قيد الانتظار',
+    deactivated: 'معطل',
+    role: 'الدور',
+    cancel: 'إلغاء',
+    saveChanges: 'حفظ التغييرات',
+    saving: 'جارٍ الحفظ…',
+    working: 'جارٍ التنفيذ…',
+    deactivate: 'تعطيل',
+    reactivate: 'إعادة التفعيل',
+    remove: 'حذف',
+    removePermanently: 'حذف نهائياً',
+    confirmDeactivateTitle: 'تعطيل هذا العضو؟',
+    confirmRemoveTitle: 'حذف هذا العضو نهائياً؟',
+    confirmReactivateTitle: 'إعادة تفعيل هذا العضو؟',
+    confirmDeactivateDesc: 'سيفقد الوصول إلى لوحة التحكم فوراً. يمكنك إعادة التفعيل في أي وقت.',
+    confirmRemoveDesc: 'سيتم حذف سجل الموظف وإلغاء صلاحياته. هذا الإجراء لا يمكن التراجع عنه.',
+    confirmReactivateDesc: 'سيستعيد الوصول إلى لوحة التحكم بدوره الحالي.',
+    roleOptions: [
+      { value: 'MANAGER' as const, label: 'مدير', description: 'عمليات كاملة — بدون فوترة' },
+      { value: 'AGENT' as const, label: 'وكيل', description: 'الحجوزات والاستلام' },
+    ],
+  },
+}
+
+export default function EditMemberModal({
+  member,
+  open,
+  onClose,
+  onUpdateRole,
+  onDeactivate,
+  onReactivate,
+  onRemove,
+}: Props) {
+  const { language } = useDashboardI18n()
+  const t = copy[language]
+  const isRtl = language === 'ar'
+
+  const [role, setRole] = useState<'MANAGER' | 'AGENT'>('AGENT')
+  const [actionState, setActionState] = useState<ActionState>('idle')
+  const [confirm, setConfirm] = useState<ConfirmAction>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (member && open) {
+      setRole(member.role === 'OWNER' ? 'MANAGER' : (member.role as 'MANAGER' | 'AGENT'))
+      setActionState('idle')
+      setConfirm(null)
+      setError(null)
+    }
+  }, [member, open])
+
+  if (!open || !member) return null
+
+  const isPending = member.invitationStatus === 'pending'
+  const isActive = member.isActive
+  const busy = actionState !== 'idle'
+  const initials = (member.firstName[0] ?? '') + (member.lastName[0] ?? '')
+
+  const handleSave = async () => {
+    if (role === member.role) { onClose(); return }
+    setActionState('saving')
+    setError(null)
+    try {
+      await onUpdateRole(member.id, role)
+      onClose()
+    } catch (err: any) {
+      setError(err.message)
+      setActionState('idle')
+    }
+  }
+
+  const handleDeactivate = async () => {
+    setActionState('deactivating')
+    setError(null)
+    try {
+      await onDeactivate(member.id)
+      onClose()
+    } catch (err: any) {
+      setError(err.message)
+      setActionState('idle')
+    }
+    setConfirm(null)
+  }
+
+  const handleReactivate = async () => {
+    setActionState('reactivating')
+    setError(null)
+    try {
+      await onReactivate(member.id)
+      onClose()
+    } catch (err: any) {
+      setError(err.message)
+      setActionState('idle')
+    }
+    setConfirm(null)
+  }
+
+  const handleRemove = async () => {
+    setActionState('removing')
+    setError(null)
+    try {
+      await onRemove(member.id)
+      onClose()
+    } catch (err: any) {
+      setError(err.message)
+      setActionState('idle')
+    }
+    setConfirm(null)
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm"
+      onClick={(e) => { if (e.target === e.currentTarget && !busy) onClose() }}
+    >
+      <div
+        className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+        dir={isRtl ? 'rtl' : 'ltr'}
+      >
+        {/* Member header */}
+        <div className="flex items-center gap-3 mb-5 pb-5 border-b border-zinc-100 dark:border-zinc-800">
+          <div className="w-10 h-10 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-sm font-medium text-zinc-600 dark:text-zinc-300">
+            {initials}
+          </div>
+          <div>
+            <p className="font-medium text-zinc-900 dark:text-white text-sm">
+              {member.firstName} {member.lastName}
+            </p>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">{member.email}</p>
+          </div>
+          <div className="ml-auto">
+            {isPending && (
+              <span className="text-xs px-2 py-1 rounded-full bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-400 border border-orange-100 dark:border-orange-900/50">
+                {t.pendingInvite}
+              </span>
+            )}
+            {!isPending && !isActive && (
+              <span className="text-xs px-2 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400">
+                {t.deactivated}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Confirm panel */}
+        {confirm && (
+          <div className="mb-4 px-4 py-3 rounded-xl border border-red-100 dark:border-red-900/50 bg-red-50 dark:bg-red-950/20">
+            <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-1">
+              {confirm === 'deactivate' && t.confirmDeactivateTitle}
+              {confirm === 'remove' && t.confirmRemoveTitle}
+              {confirm === 'reactivate' && t.confirmReactivateTitle}
+            </p>
+            <p className="text-xs text-red-600 dark:text-red-500 mb-3">
+              {confirm === 'deactivate' && t.confirmDeactivateDesc}
+              {confirm === 'remove' && t.confirmRemoveDesc}
+              {confirm === 'reactivate' && t.confirmReactivateDesc}
+            </p>
+            <div className={`flex gap-2 ${isRtl ? 'flex-row-reverse' : ''}`}>
+              <button
+                onClick={() => setConfirm(null)}
+                className="flex-1 text-xs px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800"
+              >
+                {t.cancel}
+              </button>
+              <button
+                onClick={
+                  confirm === 'deactivate' ? handleDeactivate :
+                  confirm === 'reactivate' ? handleReactivate :
+                  handleRemove
+                }
+                disabled={busy}
+                className={[
+                  'flex-1 text-xs px-3 py-1.5 rounded-lg font-medium disabled:opacity-50',
+                  confirm === 'reactivate'
+                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                    : 'bg-red-600 text-white hover:bg-red-700',
+                ].join(' ')}
+              >
+                {busy ? t.working : (
+                  confirm === 'deactivate' ? t.deactivate :
+                  confirm === 'reactivate' ? t.reactivate :
+                  t.removePermanently
+                )}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Role selector — only for active, non-pending members */}
+        {!isPending && isActive && (
+          <div className="mb-4">
+            <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-2">
+              {t.role}
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {t.roleOptions.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => setRole(option.value)}
+                  className={[
+                    'text-left px-3 py-2.5 rounded-xl border transition-all',
+                    role === option.value
+                      ? 'border-zinc-900 dark:border-white bg-zinc-50 dark:bg-zinc-800'
+                      : 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600',
+                  ].join(' ')}
+                >
+                  <div className="text-sm font-medium text-zinc-900 dark:text-white">{option.label}</div>
+                  <div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{option.description}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="mb-4 px-3 py-2 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-100 dark:border-red-900/50">
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          </div>
+        )}
+
+        {/* Actions footer */}
+        <div className={`flex items-center gap-2 pt-4 border-t border-zinc-100 dark:border-zinc-800 ${isRtl ? 'flex-row-reverse' : ''}`}>
+          <div className={`flex gap-2 ${isRtl ? 'ml-auto' : 'mr-auto'}`}>
+            {isActive && !isPending && (
+              <button
+                onClick={() => setConfirm('deactivate')}
+                disabled={busy}
+                className="text-xs px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-900/50 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/20 disabled:opacity-50 transition-colors"
+              >
+                {t.deactivate}
+              </button>
+            )}
+            {!isActive && (
+              <button
+                onClick={() => setConfirm('reactivate')}
+                disabled={busy}
+                className="text-xs px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 disabled:opacity-50 transition-colors"
+              >
+                {t.reactivate}
+              </button>
+            )}
+            <button
+              onClick={() => setConfirm('remove')}
+              disabled={busy}
+              className="text-xs px-3 py-1.5 rounded-lg text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/20 disabled:opacity-50 transition-colors"
+            >
+              {t.remove}
+            </button>
+          </div>
+
+          <button
+            onClick={onClose}
+            disabled={busy}
+            className="px-4 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors disabled:opacity-50"
+          >
+            {t.cancel}
+          </button>
+          {isActive && !isPending && (
+            <button
+              onClick={handleSave}
+              disabled={busy}
+              className="px-4 py-2 text-sm bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors disabled:opacity-50"
+            >
+              {actionState === 'saving' ? t.saving : t.saveChanges}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/team/InviteModal.tsx b/dashboard/src/components/team/InviteModal.tsx
new file mode 100644
index 0000000..66eb3d3
--- /dev/null
+++ b/dashboard/src/components/team/InviteModal.tsx
@@ -0,0 +1,273 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { InvitePayload } from '@/hooks/useTeam'
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  onInvite: (payload: InvitePayload) => Promise<void>
+}
+
+const copy = {
+  en: {
+    title: 'Invite a team member',
+    subtitle: "They'll receive an email invitation to join your workspace.",
+    firstName: 'First name',
+    lastName: 'Last name',
+    email: 'Email address',
+    role: 'Role',
+    cancel: 'Cancel',
+    sending: 'Sending…',
+    sendInvite: 'Send invite →',
+    failedInvite: 'Failed to send invitation',
+    more: (n: number) => `+${n} more`,
+    roleOptions: [
+      {
+        value: 'MANAGER' as const,
+        label: 'Manager',
+        description: 'Full fleet operations, without billing or team settings',
+        permissions: ['Vehicles', 'Reservations', 'CRM', 'Offers', 'Reports', 'License approval'],
+      },
+      {
+        value: 'AGENT' as const,
+        label: 'Agent',
+        description: 'Day-to-day operations only',
+        permissions: ['View fleet', 'Reservations', 'Check-in / Check-out', 'View customers'],
+      },
+    ],
+  },
+  fr: {
+    title: 'Inviter un membre',
+    subtitle: "Cette personne recevra un e-mail d'invitation pour rejoindre votre espace de travail.",
+    firstName: 'Prénom',
+    lastName: 'Nom',
+    email: 'Adresse e-mail',
+    role: 'Rôle',
+    cancel: 'Annuler',
+    sending: 'Envoi…',
+    sendInvite: "Envoyer l'invitation →",
+    failedInvite: "Échec de l'envoi de l'invitation",
+    more: (n: number) => `+${n} de plus`,
+    roleOptions: [
+      {
+        value: 'MANAGER' as const,
+        label: 'Manager',
+        description: 'Opérations complètes, sans accès à la facturation ni aux paramètres de l’équipe',
+        permissions: ['Véhicules', 'Réservations', 'CRM', 'Offres', 'Rapports', 'Validation des permis'],
+      },
+      {
+        value: 'AGENT' as const,
+        label: 'Agent',
+        description: 'Opérations quotidiennes uniquement',
+        permissions: ['Voir la flotte', 'Réservations', 'Départ / Retour', 'Voir les clients'],
+      },
+    ],
+  },
+  ar: {
+    title: 'دعوة عضو في الفريق',
+    subtitle: 'سيتلقى رسالة بريد إلكتروني للانضمام إلى مساحة العمل.',
+    firstName: 'الاسم الأول',
+    lastName: 'اسم العائلة',
+    email: 'البريد الإلكتروني',
+    role: 'الدور',
+    cancel: 'إلغاء',
+    sending: 'جارٍ الإرسال…',
+    sendInvite: '← إرسال الدعوة',
+    failedInvite: 'فشل إرسال الدعوة',
+    more: (n: number) => `+${n} أكثر`,
+    roleOptions: [
+      {
+        value: 'MANAGER' as const,
+        label: 'مدير',
+        description: 'صلاحيات تشغيل كاملة للأسطول، من دون الفوترة أو إعدادات الفريق',
+        permissions: ['المركبات', 'الحجوزات', 'CRM', 'العروض', 'التقارير', 'الموافقة على الرخص'],
+      },
+      {
+        value: 'AGENT' as const,
+        label: 'وكيل',
+        description: 'العمليات اليومية فقط',
+        permissions: ['عرض الأسطول', 'الحجوزات', 'الاستلام / الإرجاع', 'عرض العملاء'],
+      },
+    ],
+  },
+}
+
+export default function InviteModal({ open, onClose, onInvite }: Props) {
+  const { language } = useDashboardI18n()
+  const t = copy[language]
+  const isRtl = language === 'ar'
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<'MANAGER' | 'AGENT'>('AGENT')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!open) {
+      setTimeout(() => {
+        setFirstName('')
+        setLastName('')
+        setEmail('')
+        setRole('AGENT')
+        setError(null)
+      }, 200)
+    }
+  }, [open])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setLoading(true)
+    try {
+      await onInvite({ firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim(), role })
+      onClose()
+    } catch (err: any) {
+      setError(err.message ?? t.failedInvite)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
+    >
+      <div
+        className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+        dir={isRtl ? 'rtl' : 'ltr'}
+      >
+        <div className="mb-5">
+          <h2 className="text-lg font-medium text-zinc-900 dark:text-white">{t.title}</h2>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{t.subtitle}</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1.5">
+                {t.firstName}
+              </label>
+              <input
+                type="text"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                placeholder="Youssef"
+                required
+                className="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white focus:ring-offset-0 focus:border-transparent"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1.5">
+                {t.lastName}
+              </label>
+              <input
+                type="text"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                placeholder="Benali"
+                required
+                className="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white focus:border-transparent"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1.5">
+              {t.email}
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="youssef@yourcompany.com"
+              required
+              className="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white focus:border-transparent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1.5">
+              {t.role}
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {t.roleOptions.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => setRole(option.value)}
+                  className={[
+                    'text-left px-3 py-3 rounded-xl border transition-all',
+                    role === option.value
+                      ? 'border-zinc-900 dark:border-white bg-zinc-50 dark:bg-zinc-800'
+                      : 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600',
+                  ].join(' ')}
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-sm font-medium text-zinc-900 dark:text-white">
+                      {option.label}
+                    </span>
+                    {role === option.value && (
+                      <span className="w-4 h-4 rounded-full bg-zinc-900 dark:bg-white flex items-center justify-center">
+                        <svg className="w-2.5 h-2.5 text-white dark:text-zinc-900" fill="currentColor" viewBox="0 0 12 12">
+                          <path d="M10 3L5 8.5 2 5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                        </svg>
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-snug">
+                    {option.description}
+                  </p>
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {option.permissions.slice(0, 3).map((p) => (
+                      <span
+                        key={p}
+                        className="text-[10px] px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-700 text-zinc-500 dark:text-zinc-400"
+                      >
+                        {p}
+                      </span>
+                    ))}
+                    {option.permissions.length > 3 && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-700 text-zinc-500 dark:text-zinc-400">
+                        {t.more(option.permissions.length - 3)}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {error && (
+            <div className="px-3 py-2.5 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-100 dark:border-red-900/50">
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+          )}
+
+          <div className={`flex gap-2 pt-2 border-t border-zinc-100 dark:border-zinc-800 ${isRtl ? 'flex-row-reverse' : ''}`}>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
+            >
+              {t.cancel}
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex-1 px-4 py-2 text-sm bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {loading ? t.sending : t.sendInvite}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/team/PermissionsMatrix.tsx b/dashboard/src/components/team/PermissionsMatrix.tsx
new file mode 100644
index 0000000..a5fef58
--- /dev/null
+++ b/dashboard/src/components/team/PermissionsMatrix.tsx
@@ -0,0 +1,225 @@
+'use client'
+
+import { useDashboardI18n } from '@/components/I18nProvider'
+
+type Access = 'full' | 'partial' | 'none'
+
+interface Feature {
+  manager: Access
+  managerNote?: string
+  agent: Access
+  agentNote?: string
+}
+
+const FEATURES: Feature[] = [
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'partial' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'full',    agent: 'partial' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'none' },
+  { manager: 'full',    agent: 'full' },
+  { manager: 'none',    agent: 'none' },
+  { manager: 'none',    agent: 'none' },
+  { manager: 'none',    agent: 'none' },
+  { manager: 'none',    agent: 'none' },
+]
+
+const copy = {
+  en: {
+    heading: 'Role permissions',
+    subtitle: 'What each role can do across the dashboard. Owners have full access to everything.',
+    colFeature: 'Feature',
+    colManager: 'Manager',
+    colAgent: 'Agent',
+    full: 'Full',
+    noAccess: 'No access',
+    limited: 'Limited',
+    featureLabels: [
+      'View fleet & vehicles',
+      'Add / edit vehicles',
+      'Publish / unpublish vehicle',
+      'Upload vehicle photos',
+      'View reservations',
+      'Create reservations',
+      'Cancel reservations',
+      'Check-in / check-out',
+      'Damage inspection',
+      'Customer CRM — view',
+      'Customer CRM — edit',
+      'Approve driver licenses',
+      'Flag / blacklist customer',
+      'Offers & promotions',
+      'Analytics & reports',
+      'Contract & invoice PDF',
+      'Billing & subscription',
+      'Invite / remove staff',
+      'Brand & site settings',
+      'Payment settings',
+    ],
+    agentNotes: ['', '', '', '', '', '', 'Own only', '', '', '', 'Notes only', '', '', '', '', '', '', '', '', ''],
+  },
+    fr: {
+      heading: 'Permissions par rôle',
+    subtitle: 'Ce que chaque rôle peut faire dans l’espace de travail. Les propriétaires ont un accès complet à l’ensemble du système.',
+    colFeature: 'Fonctionnalité',
+    colManager: 'Manager',
+    colAgent: 'Agent',
+    full: 'Complet',
+    noAccess: 'Aucun accès',
+    limited: 'Limité',
+    featureLabels: [
+      'Voir la flotte et les véhicules',
+      'Ajouter / modifier des véhicules',
+      'Publier / dépublier un véhicule',
+      'Téléverser des photos de véhicule',
+      'Voir les réservations',
+      'Créer des réservations',
+      'Annuler des réservations',
+      'Départ / retour',
+      'Inspection des dommages',
+      'CRM clients — consultation',
+      'CRM clients — modification',
+      'Approuver les permis de conduire',
+      'Signaler / bloquer un client',
+      'Offres et promotions',
+      'Analyses et rapports',
+      'Contrat et facture PDF',
+      'Facturation et abonnement',
+      'Inviter / supprimer des membres de l’équipe',
+      'Paramètres marque et site',
+      'Paramètres de paiement',
+    ],
+    agentNotes: ['', '', '', '', '', '', 'Les siennes uniquement', '', '', '', 'Notes uniquement', '', '', '', '', '', '', '', '', ''],
+  },
+  ar: {
+    heading: 'صلاحيات الأدوار',
+    subtitle: 'ما يمكن لكل دور القيام به داخل مساحة العمل. يملك المالكون صلاحية كاملة على كل شيء.',
+    colFeature: 'الميزة',
+    colManager: 'المدير',
+    colAgent: 'الوكيل',
+    full: 'كامل',
+    noAccess: 'لا وصول',
+    limited: 'محدود',
+    featureLabels: [
+      'عرض الأسطول والمركبات',
+      'إضافة / تعديل المركبات',
+      'نشر / إلغاء نشر المركبة',
+      'رفع صور المركبة',
+      'عرض الحجوزات',
+      'إنشاء الحجوزات',
+      'إلغاء الحجوزات',
+      'الاستلام / الإرجاع',
+      'فحص الأضرار',
+      'إدارة العملاء — عرض',
+      'إدارة العملاء — تعديل',
+      'الموافقة على رخص القيادة',
+      'تمييز العميل / حظره',
+      'العروض والحملات الترويجية',
+      'التحليلات والتقارير',
+      'العقد والفاتورة بصيغة PDF',
+      'الفوترة والاشتراك',
+      'دعوة / إزالة الموظفين',
+      'إعدادات العلامة والموقع',
+      'إعدادات الدفع',
+    ],
+    agentNotes: ['', '', '', '', '', '', 'حجوزاته فقط', '', '', '', 'الملاحظات فقط', '', '', '', '', '', '', '', '', ''],
+  },
+}
+
+function AccessCell({ access, label, limitedNote }: { access: Access; label: { full: string; noAccess: string; limited: string }; limitedNote: string }) {
+  if (access === 'full') {
+    return (
+      <div className="flex items-center gap-1.5">
+        <svg className="w-3.5 h-3.5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" viewBox="0 0 14 14">
+          <path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        <span className="text-xs text-zinc-700 dark:text-zinc-300">{label.full}</span>
+      </div>
+    )
+  }
+  if (access === 'partial') {
+    return (
+      <div className="flex items-center gap-1.5">
+        <div className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
+          <div className="w-2.5 h-0.5 rounded bg-orange-500" />
+        </div>
+        <span className="text-xs text-orange-700 dark:text-orange-400">{limitedNote || label.limited}</span>
+      </div>
+    )
+  }
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
+        <div className="w-2 h-0.5 rounded bg-zinc-300 dark:bg-zinc-600" />
+      </div>
+      <span className="text-xs text-zinc-400 dark:text-zinc-600">{label.noAccess}</span>
+    </div>
+  )
+}
+
+export default function PermissionsMatrix() {
+  const { language } = useDashboardI18n()
+  const t = copy[language]
+
+  return (
+    <div dir={language === 'ar' ? 'rtl' : 'ltr'}>
+      <div className="mb-4">
+        <h2 className="text-base font-medium text-zinc-900 dark:text-white">{t.heading}</h2>
+        <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-0.5">{t.subtitle}</p>
+      </div>
+
+      <div className="border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden">
+        <div className="grid grid-cols-[1fr_120px_120px] bg-zinc-50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-700">
+          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">
+            {t.colFeature}
+          </div>
+          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide border-l border-zinc-200 dark:border-zinc-700">
+            {t.colManager}
+          </div>
+          <div className="px-4 py-2.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide border-l border-zinc-200 dark:border-zinc-700">
+            {t.colAgent}
+          </div>
+        </div>
+
+        {FEATURES.map((feature, i) => (
+          <div
+            key={i}
+            className={[
+              'grid grid-cols-[1fr_120px_120px]',
+              i < FEATURES.length - 1 ? 'border-b border-zinc-100 dark:border-zinc-800' : '',
+              i % 2 === 0 ? '' : 'bg-zinc-50/50 dark:bg-zinc-800/20',
+            ].join(' ')}
+          >
+            <div className="px-4 py-2.5 text-xs text-zinc-600 dark:text-zinc-400">
+              {t.featureLabels[i]}
+            </div>
+            <div className="px-4 py-2.5 border-l border-zinc-100 dark:border-zinc-800">
+              <AccessCell
+                access={feature.manager}
+                label={{ full: t.full, noAccess: t.noAccess, limited: t.limited }}
+                limitedNote={feature.managerNote ?? ''}
+              />
+            </div>
+            <div className="px-4 py-2.5 border-l border-zinc-100 dark:border-zinc-800">
+              <AccessCell
+                access={feature.agent}
+                label={{ full: t.full, noAccess: t.noAccess, limited: t.limited }}
+                limitedNote={t.agentNotes[i] ?? ''}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/ui/BilingualInput.test.ts b/dashboard/src/components/ui/BilingualInput.test.ts
new file mode 100644
index 0000000..295ec3f
--- /dev/null
+++ b/dashboard/src/components/ui/BilingualInput.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { bilingualPrimary, emptyBilingual } from './BilingualInput'
+
+describe('bilingual field helpers', () => {
+  it('returns a stable empty field shape for French and Arabic labels', () => {
+    expect(emptyBilingual()).toEqual({ fr: '', ar: '' })
+    expect(emptyBilingual()).not.toBe(emptyBilingual())
+  })
+
+  it('prefers French as the primary display value when both translations exist', () => {
+    expect(bilingualPrimary({ fr: 'Assurance', ar: 'تأمين' })).toBe('Assurance')
+  })
+
+  it('falls back to Arabic when the French value is empty', () => {
+    expect(bilingualPrimary({ fr: '', ar: 'تأمين' })).toBe('تأمين')
+  })
+
+  it('does not trim values implicitly so form state remains lossless', () => {
+    expect(bilingualPrimary({ fr: '  Service premium  ', ar: 'خدمة' })).toBe('  Service premium  ')
+    expect(bilingualPrimary({ fr: '', ar: '  خدمة  ' })).toBe('  خدمة  ')
+  })
+})
diff --git a/dashboard/src/components/ui/BilingualInput.tsx b/dashboard/src/components/ui/BilingualInput.tsx
new file mode 100644
index 0000000..662c0c0
--- /dev/null
+++ b/dashboard/src/components/ui/BilingualInput.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+export type BilingualField = { fr: string; ar: string }
+
+export function emptyBilingual(): BilingualField {
+  return { fr: '', ar: '' }
+}
+
+export function bilingualPrimary(field: BilingualField): string {
+  return field.fr || field.ar
+}
+
+export function BilingualInput({
+  label,
+  value,
+  onChange,
+  required = false,
+  maxLength,
+}: {
+  label: string
+  value: BilingualField
+  onChange: (value: BilingualField) => void
+  required?: boolean
+  maxLength?: number
+}) {
+  return (
+    <div>
+      <span className="mb-1.5 block text-sm font-medium text-slate-700">
+        {label}
+        {required ? <span className="ml-1 text-red-600">*</span> : null}
+      </span>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <div className="relative">
+          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-500">
+            FR
+          </span>
+          <input
+            type="text"
+            dir="ltr"
+            lang="fr"
+            maxLength={maxLength}
+            placeholder="Français…"
+            value={value.fr}
+            onChange={(e) => onChange({ ...value, fr: e.target.value })}
+            className="input-field pl-11"
+          />
+        </div>
+        <div className="relative">
+          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600">
+            AR
+          </span>
+          <input
+            type="text"
+            dir="rtl"
+            lang="ar"
+            maxLength={maxLength}
+            placeholder="بالعربية…"
+            value={value.ar}
+            onChange={(e) => onChange({ ...value, ar: e.target.value })}
+            className="input-field pr-11 text-right"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/ui/StatCard.test.ts b/dashboard/src/components/ui/StatCard.test.ts
new file mode 100644
index 0000000..9cac3a6
--- /dev/null
+++ b/dashboard/src/components/ui/StatCard.test.ts
@@ -0,0 +1,72 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it } from 'vitest'
+import StatCard from './StatCard'
+import type { LucideIcon } from 'lucide-react'
+
+function collectText(node: unknown): string[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return []
+  if (typeof node === 'string' || typeof node === 'number') return [String(node)]
+  if (Array.isArray(node)) return node.flatMap(collectText)
+  if (isValidElement<{ children?: React.ReactNode }>(node)) return collectText(node.props.children)
+  return []
+}
+
+function collectElements(node: unknown): React.ReactElement[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return []
+  if (Array.isArray(node)) return node.flatMap(collectElements)
+  if (!isValidElement<{ children?: React.ReactNode }>(node)) return []
+  return [node, ...collectElements(node.props.children)]
+}
+
+function FakeIcon(props: { className?: string }) {
+  return React.createElement('svg', props)
+}
+
+const icon = FakeIcon as unknown as LucideIcon
+
+describe('StatCard', () => {
+  it('renders title, numeric value, and positive changes with a plus sign', () => {
+    const element = StatCard({ title: 'Revenue', value: 12450, change: 8.238, icon })
+    const text = collectText(element)
+    const renderedText = text.join('')
+
+    expect(text).toContain('Revenue')
+    expect(text).toContain('12450')
+    expect(renderedText).toContain('+8.2%')
+    expect(text).toContain('vs last month')
+  })
+
+  it('renders negative changes without forcing a positive marker', () => {
+    const element = StatCard({ title: 'Cancellations', value: '12', change: -3.15, vsLastMonthLabel: 'vs previous period', icon })
+    const text = collectText(element)
+    const renderedText = text.join('')
+
+    expect(renderedText).toContain('-3.1%')
+    expect(text).toContain('vs previous period')
+    expect(renderedText).not.toContain('+-3.1')
+  })
+
+  it('omits the trend row when no change is provided', () => {
+    const element = StatCard({ title: 'Active cars', value: 31, icon })
+    const text = collectText(element)
+
+    expect(text).toContain('Active cars')
+    expect(text).toContain('31')
+    expect(text).not.toContain('vs last month')
+    expect(text.join('')).not.toContain('%')
+  })
+
+  it('passes custom icon color and background classes to the rendered icon shell', () => {
+    const element = StatCard({
+      title: 'Fleet',
+      value: 9,
+      icon,
+      iconColor: 'text-violet-700',
+      iconBg: 'bg-violet-50',
+    })
+    const elements = collectElements(element)
+
+    expect(elements.some((node) => String(node.props.className ?? '').includes('bg-violet-50'))).toBe(true)
+    expect(elements.some((node) => String(node.props.className ?? '').includes('text-violet-700'))).toBe(true)
+  })
+})
diff --git a/dashboard/src/components/ui/StatCard.tsx b/dashboard/src/components/ui/StatCard.tsx
new file mode 100644
index 0000000..42afa57
--- /dev/null
+++ b/dashboard/src/components/ui/StatCard.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { LucideIcon } from 'lucide-react'
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  change?: number
+  vsLastMonthLabel?: string
+  icon: LucideIcon
+  iconColor?: string
+  iconBg?: string
+  /** Optional target value to show a progress bar beneath the value */
+  target?: number
+  /** Current progress (0–100) when target is set */
+  progressPercent?: number
+  /** Show a subtle pulse/glow animation on the card */
+  pulse?: boolean
+  /** Apply a gradient to the value text */
+  valueGradient?: boolean
+}
+
+export default function StatCard({
+  title,
+  value,
+  change,
+  vsLastMonthLabel = 'vs last month',
+  icon: Icon,
+  iconColor = 'text-orange-700 dark:text-orange-300',
+  iconBg = 'bg-orange-50 dark:bg-orange-950/30',
+  target,
+  progressPercent,
+  pulse,
+  valueGradient,
+}: StatCardProps) {
+  const isPositive = change !== undefined && change >= 0
+  const isNegative = change !== undefined && change < 0
+
+  return (
+    <div className={`card relative overflow-hidden p-5 ${pulse ? 'pulse-glow' : ''}`}>
+      <span className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-700 to-orange-600 opacity-80" aria-hidden="true" />
+      <div className="flex items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{title}</p>
+          <p
+            className={[
+              'mt-3 text-[34px] font-black leading-none tracking-[-0.035em]',
+              valueGradient
+                ? 'bg-gradient-to-br from-blue-950 via-blue-600 to-orange-500 bg-clip-text text-transparent dark:from-slate-100 dark:via-blue-200 dark:to-orange-300'
+                : 'bg-gradient-to-br from-blue-950 to-slate-700 bg-clip-text text-transparent dark:from-slate-100 dark:to-slate-300',
+            ].join(' ')}
+          >
+            {value}
+          </p>
+          {target !== undefined && progressPercent !== undefined && (
+            <div className="mt-2 flex items-center gap-2">
+              <div className="progress-bar flex-1">
+                <div
+                  className="progress-fill orange"
+                  style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                />
+              </div>
+              <span className="text-xs font-mono text-slate-500 dark:text-slate-400">
+                {Math.round(progressPercent)}%
+              </span>
+            </div>
+          )}
+          {change !== undefined && (
+            <div className="mt-2 flex items-center gap-1">
+              <span
+                className={[
+                  'text-xs font-medium',
+                  isPositive ? 'text-emerald-600 dark:text-emerald-300' : isNegative ? 'text-red-600 dark:text-red-300' : 'text-slate-500 dark:text-slate-400',
+                ].join(' ')}
+              >
+                {isPositive ? '+' : ''}{change.toFixed(1)}%
+              </span>
+              <span className="text-xs text-slate-500 dark:text-slate-500">{vsLastMonthLabel}</span>
+            </div>
+          )}
+        </div>
+        <div className={`flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[var(--rdg-radius-sm)] ${iconBg}`}>
+          <Icon className={`h-6 w-6 ${iconColor}`} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/hooks/useTeam.state.test.ts b/dashboard/src/hooks/useTeam.state.test.ts
new file mode 100644
index 0000000..4b5ba2b
--- /dev/null
+++ b/dashboard/src/hooks/useTeam.state.test.ts
@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+import {
+  appendInvitedMember,
+  applyActivationStats,
+  applyMemberActivation,
+  applyMemberRoleUpdate,
+  incrementInvitedStats,
+  removeTeamMemberState,
+  type TeamMember,
+  type TeamStats,
+} from './useTeam'
+
+function member(overrides: Partial<TeamMember>): TeamMember {
+  return {
+    id: 'member-1',
+    firstName: 'Amina',
+    lastName: 'Bennis',
+    email: 'amina@example.com',
+    phone: null,
+    role: 'AGENT',
+    isActive: true,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    updatedAt: '2026-01-01T00:00:00.000Z',
+    lastActiveAt: null,
+    invitationStatus: 'accepted',
+    ...overrides,
+  }
+}
+
+const stats: TeamStats = { total: 3, active: 2, pending: 1, inactive: 0 }
+
+describe('useTeam state helpers', () => {
+  it('appends invited employees and increments the pending counters immutably', () => {
+    const existing = [member({ id: 'owner', role: 'OWNER' })]
+    const invited = member({ id: 'invite-1', role: 'MANAGER', invitationStatus: 'pending', isActive: false })
+
+    expect(appendInvitedMember(existing, invited)).toEqual([...existing, invited])
+    expect(existing).toHaveLength(1)
+    expect(incrementInvitedStats(stats)).toEqual({ total: 4, active: 2, pending: 2, inactive: 0 })
+  })
+
+  it('updates roles and activation flags only on the targeted member', () => {
+    const members = [member({ id: 'a' }), member({ id: 'b', role: 'MANAGER', isActive: false })]
+
+    expect(applyMemberRoleUpdate(members, 'a', 'MANAGER')).toEqual([
+      { ...members[0], role: 'MANAGER' },
+      members[1],
+    ])
+    expect(applyMemberActivation(members, 'b', true)).toEqual([
+      members[0],
+      { ...members[1], isActive: true },
+    ])
+  })
+
+  it('moves counters between active and inactive for deactivate/reactivate actions', () => {
+    expect(applyActivationStats({ total: 5, active: 4, pending: 0, inactive: 1 }, 'deactivate')).toEqual({
+      total: 5,
+      active: 3,
+      pending: 0,
+      inactive: 2,
+    })
+    expect(applyActivationStats({ total: 5, active: 3, pending: 0, inactive: 2 }, 'reactivate')).toEqual({
+      total: 5,
+      active: 4,
+      pending: 0,
+      inactive: 1,
+    })
+  })
+
+  it('removes active, pending, and inactive accepted members with the correct counter impact', () => {
+    const members = [
+      member({ id: 'active', isActive: true, invitationStatus: 'accepted' }),
+      member({ id: 'pending', isActive: false, invitationStatus: 'pending' }),
+      member({ id: 'inactive', isActive: false, invitationStatus: 'accepted' }),
+    ]
+
+    expect(removeTeamMemberState(members, { total: 3, active: 1, pending: 1, inactive: 1 }, 'active').stats).toEqual({
+      total: 2,
+      active: 0,
+      pending: 1,
+      inactive: 1,
+    })
+    expect(removeTeamMemberState(members, { total: 3, active: 1, pending: 1, inactive: 1 }, 'pending').stats).toEqual({
+      total: 2,
+      active: 1,
+      pending: 0,
+      inactive: 1,
+    })
+    expect(removeTeamMemberState(members, { total: 3, active: 1, pending: 1, inactive: 1 }, 'inactive').stats).toEqual({
+      total: 2,
+      active: 1,
+      pending: 1,
+      inactive: 0,
+    })
+  })
+
+  it('leaves counters untouched when asked to remove an unknown member', () => {
+    const members = [member({ id: 'only' })]
+    const result = removeTeamMemberState(members, { total: 1, active: 1, pending: 0, inactive: 0 }, 'missing')
+
+    expect(result.members).toEqual(members)
+    expect(result.stats).toEqual({ total: 1, active: 1, pending: 0, inactive: 0 })
+  })
+})
diff --git a/dashboard/src/hooks/useTeam.ts b/dashboard/src/hooks/useTeam.ts
new file mode 100644
index 0000000..6f80d4c
--- /dev/null
+++ b/dashboard/src/hooks/useTeam.ts
@@ -0,0 +1,160 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { apiFetch } from '@/lib/api'
+
+export type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
+export type InvitationStatus = 'accepted' | 'pending' | 'revoked'
+
+export interface TeamMember {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  role: EmployeeRole
+  isActive: boolean
+  createdAt: string
+  updatedAt: string
+  lastActiveAt: string | null
+  invitationStatus: InvitationStatus
+}
+
+export interface TeamStats {
+  total: number
+  active: number
+  pending: number
+  inactive: number
+}
+
+export interface InvitePayload {
+  firstName: string
+  lastName: string
+  email: string
+  role: 'MANAGER' | 'AGENT'
+}
+
+
+export function appendInvitedMember(members: TeamMember[], employee: TeamMember): TeamMember[] {
+  return [...members, employee]
+}
+
+export function incrementInvitedStats(stats: TeamStats): TeamStats {
+  return { ...stats, total: stats.total + 1, pending: stats.pending + 1 }
+}
+
+export function applyMemberRoleUpdate(members: TeamMember[], memberId: string, role: 'MANAGER' | 'AGENT'): TeamMember[] {
+  return members.map((member) => (member.id === memberId ? { ...member, role } : member))
+}
+
+export function applyMemberActivation(members: TeamMember[], memberId: string, isActive: boolean): TeamMember[] {
+  return members.map((member) => (member.id === memberId ? { ...member, isActive } : member))
+}
+
+export function applyActivationStats(stats: TeamStats, direction: 'deactivate' | 'reactivate'): TeamStats {
+  return direction === 'deactivate'
+    ? { ...stats, active: stats.active - 1, inactive: stats.inactive + 1 }
+    : { ...stats, active: stats.active + 1, inactive: stats.inactive - 1 }
+}
+
+export function removeTeamMemberState(members: TeamMember[], stats: TeamStats, memberId: string): { members: TeamMember[]; stats: TeamStats } {
+  const target = members.find((member) => member.id === memberId)
+
+  return {
+    members: members.filter((member) => member.id !== memberId),
+    stats: {
+      ...stats,
+      total: stats.total - (target ? 1 : 0),
+      active: target?.isActive ? stats.active - 1 : stats.active,
+      pending: target?.invitationStatus === 'pending' ? stats.pending - 1 : stats.pending,
+      inactive: !target?.isActive && target?.invitationStatus === 'accepted'
+        ? stats.inactive - 1
+        : stats.inactive,
+    },
+  }
+}
+
+export function useTeam() {
+  const [members, setMembers] = useState<TeamMember[]>([])
+  const [stats, setStats] = useState<TeamStats>({ total: 0, active: 0, pending: 0, inactive: 0 })
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const refetch = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [membersData, statsData] = await Promise.all([
+        apiFetch<TeamMember[]>('/team'),
+        apiFetch<TeamStats>('/team/stats'),
+      ])
+      setMembers(membersData)
+      setStats(statsData)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { refetch() }, [refetch])
+
+  const invite = useCallback(async (payload: InvitePayload) => {
+    const result = await apiFetch<{ employee: TeamMember; invitationId: string }>(
+      '/team/invite',
+      { method: 'POST', body: JSON.stringify(payload) }
+    )
+    setMembers((prev) => appendInvitedMember(prev, result.employee))
+    setStats(incrementInvitedStats)
+    return result
+  }, [])
+
+  const updateRole = useCallback(async (memberId: string, role: 'MANAGER' | 'AGENT') => {
+    const updated = await apiFetch<TeamMember>(`/team/${memberId}/role`, {
+      method: 'PATCH',
+      body: JSON.stringify({ role }),
+    })
+    setMembers((prev) => applyMemberRoleUpdate(prev, memberId, updated.role as 'MANAGER' | 'AGENT'))
+    return updated
+  }, [])
+
+  const deactivate = useCallback(async (memberId: string) => {
+    const updated = await apiFetch<TeamMember>(`/team/${memberId}/deactivate`, {
+      method: 'POST',
+    })
+    setMembers((prev) => applyMemberActivation(prev, memberId, false))
+    setStats((prev) => applyActivationStats(prev, 'deactivate'))
+    return updated
+  }, [])
+
+  const reactivate = useCallback(async (memberId: string) => {
+    const updated = await apiFetch<TeamMember>(`/team/${memberId}/reactivate`, {
+      method: 'POST',
+    })
+    setMembers((prev) => applyMemberActivation(prev, memberId, true))
+    setStats((prev) => applyActivationStats(prev, 'reactivate'))
+    return updated
+  }, [])
+
+  const remove = useCallback(async (memberId: string) => {
+    await apiFetch<{ success: boolean }>(`/team/${memberId}`, {
+      method: 'DELETE',
+    })
+    const nextState = removeTeamMemberState(members, stats, memberId)
+    setMembers(nextState.members)
+    setStats(nextState.stats)
+  }, [members, stats])
+
+  return {
+    members,
+    stats,
+    loading,
+    error,
+    refetch,
+    invite,
+    updateRole,
+    deactivate,
+    reactivate,
+    remove,
+  }
+}
diff --git a/dashboard/src/lib/api.test.ts b/dashboard/src/lib/api.test.ts
new file mode 100644
index 0000000..6d17886
--- /dev/null
+++ b/dashboard/src/lib/api.test.ts
@@ -0,0 +1,81 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+function installBrowser(token?: string) {
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      localStorage: {
+        getItem: vi.fn(() => token ?? null),
+      },
+    },
+  })
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  Reflect.deleteProperty(globalThis, 'window')
+  Reflect.deleteProperty(globalThis, 'fetch')
+  vi.resetModules()
+})
+
+describe('dashboard apiFetch', () => {
+  it('adds JSON headers and sends cookies for browser requests', async () => {
+    installBrowser()
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ data: { ok: true } }),
+    }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { apiFetch } = await import('./api')
+    await expect(apiFetch('/team')).resolves.toEqual({ ok: true })
+
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringMatching(/\/api\/v1\/team$/), expect.objectContaining({
+      credentials: 'include',
+      headers: expect.objectContaining({
+        'Content-Type': 'application/json',
+      }),
+    }))
+  })
+
+  it('does not force JSON content type for FormData payloads', async () => {
+    installBrowser()
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { uploaded: true } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { apiFetch } = await import('./api')
+    await apiFetch('/uploads', { method: 'POST', body: new FormData() })
+
+    expect((fetchMock as any).mock.calls[0]?.[1].headers).not.toHaveProperty('Content-Type')
+    expect((fetchMock as any).mock.calls[0]?.[1]).toEqual(expect.objectContaining({ credentials: 'include' }))
+  })
+
+  it('surfaces API error details on failed responses', async () => {
+    installBrowser()
+    Object.defineProperty(globalThis, 'fetch', {
+      configurable: true,
+      value: vi.fn(async () => ({
+        ok: false,
+        status: 403,
+        json: async () => ({ message: 'Forbidden', error: 'FORBIDDEN' }),
+      })),
+    })
+
+    const { apiFetch } = await import('./api')
+    await expect(apiFetch('/team')).rejects.toMatchObject({ message: 'Forbidden', code: 'FORBIDDEN', statusCode: 403 })
+  })
+
+  it('uses explicit server token and disables caching for server requests', async () => {
+    Reflect.deleteProperty(globalThis, 'window')
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { ok: true } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    const { apiFetchServer } = await import('./api')
+    await apiFetchServer('/fleet', 'server-token')
+
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:4000/api/v1/fleet', expect.objectContaining({
+      cache: 'no-store',
+      headers: expect.objectContaining({ Authorization: 'Bearer server-token' }),
+    }))
+  })
+})
diff --git a/dashboard/src/lib/api.ts b/dashboard/src/lib/api.ts
new file mode 100644
index 0000000..1aab9d9
--- /dev/null
+++ b/dashboard/src/lib/api.ts
@@ -0,0 +1,68 @@
+export const API_BASE =
+  typeof window === 'undefined'
+    ? (process.env.API_INTERNAL_URL || 'http://localhost:4000/api/v1')
+    : (process.env.NEXT_PUBLIC_API_URL || '/dashboard/api/v1')
+
+export const EMPLOYEE_PROFILE_KEY = 'employee_profile'
+
+export async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> {
+  const isFormData = typeof FormData !== 'undefined' && options?.body instanceof FormData
+
+  const headers: Record<string, string> = {
+    ...(options?.headers as Record<string, string> ?? {}),
+  }
+
+  if (!isFormData) {
+    headers['Content-Type'] = 'application/json'
+  }
+
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers,
+    credentials: 'include',
+  })
+
+  let json: any
+  try {
+    json = await res.json()
+  } catch {
+    throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+  }
+
+  if (!res.ok) {
+    const err = new Error(json?.message ?? json?.error ?? `Request failed with status ${res.status}`) as any
+    err.code = json?.error
+    err.statusCode = res.status
+    throw err
+  }
+
+  return (json?.data ?? json) as T
+}
+
+export async function apiFetchServer<T>(path: string, token: string, options?: RequestInit): Promise<T> {
+  const isFormData = typeof FormData !== 'undefined' && options?.body instanceof FormData
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
+      'Authorization': `Bearer ${token}`,
+      ...(options?.headers as Record<string, string> ?? {}),
+    },
+    cache: 'no-store',
+  })
+
+  let json: any
+  try {
+    json = await res.json()
+  } catch {
+    throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+  }
+
+  if (!res.ok) {
+    const err = new Error(json?.message ?? `Request failed with status ${res.status}`) as any
+    err.statusCode = res.status
+    throw err
+  }
+
+  return (json?.data ?? json) as T
+}
diff --git a/dashboard/src/lib/appUrls.test.ts b/dashboard/src/lib/appUrls.test.ts
new file mode 100644
index 0000000..71d82f4
--- /dev/null
+++ b/dashboard/src/lib/appUrls.test.ts
@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveBrowserAppUrl } from './appUrls'
+
+function installWindow(hostname: string, protocol = 'https:') {
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: { location: { hostname, protocol } },
+  })
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+})
+
+describe('dashboard resolveBrowserAppUrl', () => {
+  it('returns the fallback untouched on the server', () => {
+    expect(resolveBrowserAppUrl('http://localhost:3001/dashboard')).toBe('http://localhost:3001/dashboard')
+  })
+
+  it('keeps local browser fallbacks local and removes trailing slash', () => {
+    installWindow('localhost')
+    expect(resolveBrowserAppUrl('http://localhost:3001/dashboard/')).toBe('http://localhost:3001/dashboard')
+  })
+
+  it('rewrites fallback origin to the current production host', () => {
+    installWindow('tenant.example.com', 'https:')
+    expect(resolveBrowserAppUrl('http://localhost:3001/dashboard')).toBe('https://tenant.example.com/dashboard')
+  })
+
+  it('falls back safely when the configured value is not a URL', () => {
+    installWindow('tenant.example.com')
+    expect(resolveBrowserAppUrl('/dashboard/')).toBe('/dashboard/')
+  })
+})
diff --git a/dashboard/src/lib/appUrls.ts b/dashboard/src/lib/appUrls.ts
new file mode 100644
index 0000000..c3b9625
--- /dev/null
+++ b/dashboard/src/lib/appUrls.ts
@@ -0,0 +1,15 @@
+export function resolveBrowserAppUrl(fallback: string): string {
+  if (typeof window === 'undefined') return fallback
+  const h = window.location.hostname
+  if (h === 'localhost' || h === '127.0.0.1') return fallback.replace(/\/$/, '')
+
+  try {
+    const target = new URL(fallback)
+    target.protocol = window.location.protocol
+    target.hostname = h
+    target.port = ''
+    return target.toString().replace(/\/$/, '')
+  } catch {
+    return fallback
+  }
+}
diff --git a/dashboard/src/lib/dashboardPaths.test.ts b/dashboard/src/lib/dashboardPaths.test.ts
new file mode 100644
index 0000000..cdd842a
--- /dev/null
+++ b/dashboard/src/lib/dashboardPaths.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { toDashboardAppPath, toPublicDashboardPath } from './dashboardPaths'
+
+describe('dashboard path normalization', () => {
+  it('collapses empty and root values to the app root', () => {
+    expect(toDashboardAppPath()).toBe('/')
+    expect(toDashboardAppPath('')).toBe('/')
+    expect(toDashboardAppPath('/')).toBe('/')
+  })
+
+  it('strips repeated dashboard base prefixes', () => {
+    expect(toDashboardAppPath('/dashboard')).toBe('/')
+    expect(toDashboardAppPath('/dashboard/fleet')).toBe('/fleet')
+    expect(toDashboardAppPath('/dashboard/dashboard/reservations')).toBe('/reservations')
+  })
+
+  it('adds the public deployment prefix exactly once', () => {
+    expect(toPublicDashboardPath('/')).toBe('/dashboard')
+    expect(toPublicDashboardPath('/dashboard/fleet')).toBe('/dashboard/fleet')
+    expect(toPublicDashboardPath('customers')).toBe('/dashboard/customers')
+  })
+})
diff --git a/dashboard/src/lib/dashboardPaths.ts b/dashboard/src/lib/dashboardPaths.ts
new file mode 100644
index 0000000..df0b8c1
--- /dev/null
+++ b/dashboard/src/lib/dashboardPaths.ts
@@ -0,0 +1,19 @@
+const DASHBOARD_BASE_PATH = '/dashboard'
+
+export function toDashboardAppPath(path?: string | null): string {
+  const value = (path ?? '').trim()
+  if (!value || value === '/') return '/'
+
+  let normalized = value.startsWith('/') ? value : `/${value}`
+
+  while (normalized === DASHBOARD_BASE_PATH || normalized.startsWith(`${DASHBOARD_BASE_PATH}/`)) {
+    normalized = normalized.slice(DASHBOARD_BASE_PATH.length) || '/'
+  }
+
+  return normalized
+}
+
+export function toPublicDashboardPath(path?: string | null): string {
+  const appPath = toDashboardAppPath(path)
+  return appPath === '/' ? DASHBOARD_BASE_PATH : `${DASHBOARD_BASE_PATH}${appPath}`
+}
diff --git a/dashboard/src/lib/preferences.test.ts b/dashboard/src/lib/preferences.test.ts
new file mode 100644
index 0000000..739ed82
--- /dev/null
+++ b/dashboard/src/lib/preferences.test.ts
@@ -0,0 +1,96 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  getScopedPreferenceCookieName,
+  getScopedPreferenceKey,
+  readCurrentUserScopedPreference,
+  readScopedPreference,
+  writeScopedPreference,
+} from './preferences'
+
+function installBrowser(cookie = '') {
+  const store = new Map<string, string>()
+  let cookieValue = cookie
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      localStorage: {
+        getItem: (key: string) => store.get(key) ?? null,
+        setItem: (key: string, value: string) => store.set(key, value),
+        removeItem: (key: string) => store.delete(key),
+      },
+    },
+  })
+  Object.defineProperty(globalThis, 'document', {
+    configurable: true,
+    value: {
+      get cookie() {
+        return cookieValue
+      },
+      set cookie(value: string) {
+        const [pair] = value.split(';')
+        const [name, val] = pair.split('=')
+        const existing = cookieValue
+          .split(';')
+          .map((chunk) => chunk.trim())
+          .filter(Boolean)
+          .filter((chunk) => !chunk.startsWith(`${name}=`))
+        existing.push(`${name}=${val}`)
+        cookieValue = existing.join('; ')
+      },
+    },
+  })
+  Object.defineProperty(globalThis, 'atob', {
+    configurable: true,
+    value: (value: string) => Buffer.from(value, 'base64').toString('binary'),
+  })
+  return { store, get cookie() { return cookieValue } }
+}
+
+beforeEach(() => {
+  installBrowser()
+})
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+  Reflect.deleteProperty(globalThis, 'document')
+  Reflect.deleteProperty(globalThis, 'atob')
+})
+
+describe('dashboard scoped preferences', () => {
+  it('uses base keys when no employee token is available', () => {
+    expect(getScopedPreferenceKey('theme')).toBe('theme')
+    expect(getScopedPreferenceCookieName('theme')).toBe('theme')
+  })
+
+  it('prefers scoped cookie/current user values before local storage', () => {
+    Reflect.deleteProperty(globalThis, 'window')
+    Reflect.deleteProperty(globalThis, 'document')
+    const browser = installBrowser('theme=dark')
+    browser.store.set('theme', 'local-dark')
+
+    expect(readCurrentUserScopedPreference('theme')).toBe('dark')
+    expect(readScopedPreference('theme')).toBe('dark')
+  })
+
+  it('falls back through shared cookie, scoped local storage, base key, and legacy keys', () => {
+    const browser = installBrowser('theme=dark')
+    expect(readScopedPreference('theme', ['legacy-theme'])).toBe('dark')
+
+    Reflect.deleteProperty(globalThis, 'window')
+    Reflect.deleteProperty(globalThis, 'document')
+    const second = installBrowser()
+    second.store.set('theme', 'base')
+    second.store.set('legacy-theme', 'legacy')
+    expect(readScopedPreference('theme', ['legacy-theme'])).toBe('base')
+  })
+
+  it('writes shared and legacy preference values without auth-token scoping', () => {
+    const browser = installBrowser()
+
+    writeScopedPreference('language', 'fr', ['old-language'])
+
+    expect(browser.store.get('language')).toBe('fr')
+    expect(browser.store.get('old-language')).toBe('fr')
+    expect(browser.cookie).toContain('language=fr')
+  })
+})
diff --git a/apps/homepage/src/lib/preferences.ts b/dashboard/src/lib/preferences.ts
similarity index 100%
rename from apps/homepage/src/lib/preferences.ts
rename to dashboard/src/lib/preferences.ts
diff --git a/dashboard/src/lib/urls.test.ts b/dashboard/src/lib/urls.test.ts
new file mode 100644
index 0000000..651af3c
--- /dev/null
+++ b/dashboard/src/lib/urls.test.ts
@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+function installWindow(hostname: string, protocol = 'https:') {
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: { location: { hostname, protocol } },
+  })
+}
+
+async function loadUrls(env: Record<string, string | undefined> = {}) {
+  vi.resetModules()
+  for (const key of ['NEXT_PUBLIC_MARKETPLACE_URL', 'NEXT_PUBLIC_ADMIN_URL']) {
+    if (env[key] === undefined) {
+      delete process.env[key]
+    } else {
+      process.env[key] = env[key]
+    }
+  }
+  return import('./urls')
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+  delete process.env.NEXT_PUBLIC_MARKETPLACE_URL
+  delete process.env.NEXT_PUBLIC_ADMIN_URL
+  vi.resetModules()
+})
+
+describe('dashboard cross-app URLs', () => {
+  it('uses default marketplace and admin bases on the server', async () => {
+    const { marketplaceUrl, adminUrl } = await loadUrls()
+
+    expect(marketplaceUrl).toBe('http://localhost:3000')
+    expect(adminUrl).toBe('http://localhost:3000/admin')
+  })
+
+  it('strips trailing slashes from configured absolute URLs', async () => {
+    const { marketplaceUrl, adminUrl } = await loadUrls({
+      NEXT_PUBLIC_MARKETPLACE_URL: 'https://market.example.com/',
+      NEXT_PUBLIC_ADMIN_URL: 'https://ops.example.com/admin/',
+    })
+
+    expect(marketplaceUrl).toBe('https://market.example.com')
+    expect(adminUrl).toBe('https://ops.example.com/admin')
+  })
+
+  it('rewrites local browser fallbacks onto the current production host', async () => {
+    installWindow('tenant.rentaldrivego.com', 'https:')
+    const { marketplaceUrl, adminUrl } = await loadUrls()
+
+    expect(marketplaceUrl).toBe('https://tenant.rentaldrivego.com')
+    expect(adminUrl).toBe('https://tenant.rentaldrivego.com/admin')
+  })
+
+  it('preserves non-URL values after normalizing their trailing slash', async () => {
+    const { marketplaceUrl, adminUrl } = await loadUrls({
+      NEXT_PUBLIC_MARKETPLACE_URL: '/marketplace/',
+      NEXT_PUBLIC_ADMIN_URL: '/admin/',
+    })
+
+    expect(marketplaceUrl).toBe('/marketplace')
+    expect(adminUrl).toBe('/admin')
+  })
+})
diff --git a/dashboard/src/lib/urls.ts b/dashboard/src/lib/urls.ts
new file mode 100644
index 0000000..95ebdaa
--- /dev/null
+++ b/dashboard/src/lib/urls.ts
@@ -0,0 +1,18 @@
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+function toAppBase(url: string): string {
+  try {
+    const u = new URL(url)
+    return (u.origin + u.pathname).replace(/\/$/, '')
+  } catch {
+    return url.replace(/\/$/, '')
+  }
+}
+
+export const marketplaceUrl = toAppBase(
+  resolveBrowserAppUrl(process.env.NEXT_PUBLIC_MARKETPLACE_URL ?? 'http://localhost:3000'),
+)
+
+export const adminUrl = toAppBase(
+  resolveBrowserAppUrl(process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3000/admin'),
+)
diff --git a/dashboard/src/middleware.test.ts b/dashboard/src/middleware.test.ts
new file mode 100644
index 0000000..e1deda3
--- /dev/null
+++ b/dashboard/src/middleware.test.ts
@@ -0,0 +1,125 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const nextServer = vi.hoisted(() => {
+  const redirect = vi.fn((url: URL) => ({ kind: 'redirect', url: url.toString() }))
+  const next = vi.fn(() => ({ kind: 'next' }))
+  const MockNextResponse = vi.fn((body?: string, init?: { status?: number }) => ({
+    kind: 'response',
+    body,
+    status: init?.status,
+  })) as any
+  MockNextResponse.redirect = redirect
+  MockNextResponse.next = next
+  return { redirect, next, MockNextResponse }
+})
+
+vi.mock('next/server', () => ({
+  NextResponse: nextServer.MockNextResponse,
+}))
+
+function cloneableUrl(input: string): URL {
+  const url = new URL(input)
+  ;(url as URL & { clone: () => URL }).clone = () => cloneableUrl(url.toString())
+  return url
+}
+
+function request(input: string, options: { token?: string; headers?: Record<string, string> } = {}) {
+  const headers = new Map(Object.entries(options.headers ?? {}).map(([key, value]) => [key.toLowerCase(), value]))
+  return {
+    nextUrl: cloneableUrl(input),
+    cookies: {
+      get: vi.fn((name: string) => (name === 'employee_session' && options.token ? { value: options.token } : undefined)),
+    },
+    headers: {
+      get: vi.fn((name: string) => headers.get(name.toLowerCase()) ?? null),
+      has: vi.fn((name: string) => headers.has(name.toLowerCase())),
+    },
+  }
+}
+
+async function loadMiddleware(marketplaceUrl = 'https://market.example.com') {
+  vi.resetModules()
+  process.env.NEXT_PUBLIC_MARKETPLACE_URL = marketplaceUrl
+  return import('./middleware')
+}
+
+beforeEach(() => {
+  nextServer.redirect.mockClear()
+  nextServer.next.mockClear()
+})
+
+afterEach(() => {
+  delete process.env.NEXT_PUBLIC_MARKETPLACE_URL
+  vi.resetModules()
+})
+
+describe('dashboard middleware', () => {
+  it('redirects duplicate dashboard prefixes to the clean dashboard URL', async () => {
+    const { default: middleware } = await loadMiddleware()
+
+    const response = middleware(request('https://workspace.example.com/dashboard/dashboard?x=1') as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://workspace.example.com/dashboard?x=1' })
+  })
+
+  it('rejects middleware subrequest headers at the app layer', async () => {
+    const { default: middleware } = await loadMiddleware()
+
+    const response = middleware(request('https://workspace.example.com/dashboard', {
+      headers: { 'x-middleware-subrequest': 'middleware:middleware' },
+    }) as never)
+
+    expect(response).toEqual({ kind: 'response', body: 'Unsupported internal request header', status: 400 })
+  })
+
+  it('redirects unauthenticated protected internal-host requests to dashboard sign-in on the resolved origin', async () => {
+    const { default: middleware } = await loadMiddleware('https://rentaldrivego.example')
+
+    const response = middleware(request('http://dashboard:3001/dashboard/team') as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://rentaldrivego.example:3001/dashboard/sign-in?redirect=%2Fdashboard%2Fteam' })
+  })
+
+  it('uses trusted forwarded host/proto when building the dashboard sign-in redirect', async () => {
+    const { default: middleware } = await loadMiddleware('https://market.example.com')
+
+    const response = middleware(request('http://dashboard:3001/dashboard/billing', {
+      headers: {
+        'x-forwarded-host': 'workspace.customer.example',
+        'x-forwarded-proto': 'https',
+      },
+    }) as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://workspace.customer.example:3001/dashboard/sign-in?redirect=%2Fdashboard%2Fbilling' })
+  })
+
+  it('ignores internal forwarded hosts when building the dashboard sign-in redirect', async () => {
+    const { default: middleware } = await loadMiddleware('https://market.example.com')
+
+    const response = middleware(request('http://dashboard:3001/dashboard/fleet', {
+      headers: {
+        'x-forwarded-host': 'api:4000',
+        'x-forwarded-proto': 'https',
+      },
+    }) as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://market.example.com:3001/dashboard/sign-in?redirect=%2Fdashboard%2Ffleet' })
+  })
+
+  it('redirects signed-in users away from the sign-in page', async () => {
+    const { default: middleware } = await loadMiddleware()
+
+    const response = middleware(request('https://workspace.example.com/dashboard/sign-in?redirect=/dashboard/fleet', { token: 'employee-token' }) as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'https://workspace.example.com/dashboard' })
+  })
+
+  it('allows public dashboard auth pages without a token', async () => {
+    const { default: middleware } = await loadMiddleware()
+
+    const response = middleware(request('https://workspace.example.com/dashboard/forgot-password') as never)
+
+    expect(response).toEqual({ kind: 'next' })
+    expect(nextServer.next).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/dashboard/src/middleware.ts b/dashboard/src/middleware.ts
new file mode 100644
index 0000000..592c05e
--- /dev/null
+++ b/dashboard/src/middleware.ts
@@ -0,0 +1,97 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+const MARKETPLACE_URL = process.env.NEXT_PUBLIC_MARKETPLACE_URL ?? 'http://localhost:3000'
+const HOMEPAGE_URL = process.env.NEXT_PUBLIC_HOMEPAGE_URL ?? 'http://localhost:3000'
+const DASHBOARD_BASE_PATH = '/dashboard'
+
+function toDashboardAppPath(pathname: string): string {
+  let normalized = pathname || '/'
+
+  while (normalized === DASHBOARD_BASE_PATH || normalized.startsWith(`${DASHBOARD_BASE_PATH}/`)) {
+    normalized = normalized.slice(DASHBOARD_BASE_PATH.length) || '/'
+  }
+
+  return normalized
+}
+
+function toPublicDashboardPath(pathname: string): string {
+  const appPath = toDashboardAppPath(pathname)
+  return appPath === '/' ? DASHBOARD_BASE_PATH : `${DASHBOARD_BASE_PATH}${appPath}`
+}
+
+function deduplicatePublicDashboardPath(pathname: string): string | null {
+  if (!pathname.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) return null
+
+  let normalized = pathname
+  while (normalized.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) {
+    normalized = normalized.slice(DASHBOARD_BASE_PATH.length)
+  }
+  return normalized || DASHBOARD_BASE_PATH
+}
+
+function resolveProxyUrl(req: NextRequest, pathname: string): URL {
+  const forwardedHost = req.headers.get('x-forwarded-host')
+  const forwardedProto = req.headers.get('x-forwarded-proto')
+  const marketplaceOrigin = new URL(MARKETPLACE_URL)
+
+  const url = new URL(pathname, req.nextUrl.origin)
+  if (forwardedHost && !isInternalHost(forwardedHost)) {
+    url.host = forwardedHost
+    url.protocol = (forwardedProto ?? 'http') + ':'
+  } else if (!isInternalHost(req.nextUrl.host)) {
+    url.host = req.nextUrl.host
+    url.protocol = req.nextUrl.protocol
+  } else {
+    url.host = marketplaceOrigin.host
+    url.protocol = marketplaceOrigin.protocol
+  }
+  return url
+}
+
+function isInternalHost(host: string | null): boolean {
+  if (!host) return false
+  const hostname = host.split(':')[0]?.toLowerCase()
+  return ['host.docker.internal', 'dashboard', 'admin', 'api', 'marketplace'].includes(hostname)
+}
+
+function isProtectedRoute(req: NextRequest) {
+  const pathname = toDashboardAppPath(req.nextUrl.pathname)
+  if (['/sign-up', '/onboarding'].some((p) => pathname === p || pathname.startsWith(p + '/'))) return false
+  return pathname === '/' || (pathname.startsWith('/') && !pathname.startsWith('/_next'))
+}
+
+function localJwtMiddleware(req: NextRequest): NextResponse {
+  const token = req.cookies.get('employee_session')?.value
+
+  if (!isProtectedRoute(req)) return NextResponse.next()
+
+  if (!token) {
+    const signInUrl = new URL('/sign-in', HOMEPAGE_URL)
+    signInUrl.searchParams.set('redirect', req.nextUrl.pathname)
+    return NextResponse.redirect(signInUrl)
+  }
+  return NextResponse.next()
+}
+
+export default function middleware(req: NextRequest) {
+  if (req.headers.has('x-middleware-subrequest')) {
+    return new NextResponse('Unsupported internal request header', { status: 400 })
+  }
+
+  const dedupedPath = deduplicatePublicDashboardPath(req.nextUrl.pathname)
+  if (dedupedPath) {
+    const redirectUrl = req.nextUrl.clone()
+    redirectUrl.pathname = dedupedPath
+    return NextResponse.redirect(redirectUrl)
+  }
+
+  return localJwtMiddleware(req)
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    '/(api|trpc)(.*)',
+  ],
+}
diff --git a/dashboard/src/next-config.test.ts b/dashboard/src/next-config.test.ts
new file mode 100644
index 0000000..33ac6f5
--- /dev/null
+++ b/dashboard/src/next-config.test.ts
@@ -0,0 +1,27 @@
+import { createRequire } from 'node:module'
+
+import { describe, expect, it } from 'vitest'
+
+const require = createRequire(import.meta.url)
+
+describe('dashboard next config', () => {
+  it('allows generated static media assets to be loaded across local app origins', async () => {
+    const nextConfig = require('../next.config.js')
+
+    const headers = await nextConfig.headers()
+
+    expect(headers).toEqual(
+      expect.arrayContaining([
+        {
+          source: '/_next/static/media/:path*',
+          headers: expect.arrayContaining([
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: '*',
+            },
+          ]),
+        },
+      ]),
+    )
+  })
+})
diff --git a/dashboard/src/styles/phase16-tokens.css b/dashboard/src/styles/phase16-tokens.css
new file mode 100644
index 0000000..c53154b
--- /dev/null
+++ b/dashboard/src/styles/phase16-tokens.css
@@ -0,0 +1,162 @@
+/* RentalDriveGo Phase 16 design tokens.
+ * Kept deliberately identical across the homepage, operator dashboard, and
+ * platform admin so the product behaves like one system rather than three
+ * unrelated Tailwind experiments.
+ */
+:root {
+  --rdg-blue-50: #eff6ff;
+  --rdg-blue-100: #dbeafe;
+  --rdg-blue-200: #bfdbfe;
+  --rdg-blue-500: #2874e8;
+  --rdg-blue-600: #1b5dd8;
+  --rdg-blue-700: #174bb5;
+  --rdg-blue-800: #183d88;
+  --rdg-orange-100: #ffedd5;
+  --rdg-orange-400: #fb923c;
+  --rdg-orange-600: #ea580c;
+  --rdg-orange-700: #c2410c;
+  --rdg-navy-950: #081426;
+  --rdg-navy-900: #0d1b2e;
+  --rdg-navy-850: #11233b;
+  --rdg-navy-800: #162b46;
+  --rdg-gray-25: #fbfdff;
+  --rdg-gray-50: #f7f9fc;
+  --rdg-gray-100: #eef2f7;
+  --rdg-gray-200: #dbe3ed;
+  --rdg-gray-300: #c6d0dc;
+  --rdg-gray-500: #64748b;
+  --rdg-gray-600: #475569;
+  --rdg-gray-700: #334155;
+  --rdg-gray-800: #1e293b;
+  --rdg-gray-900: #0f172a;
+  --rdg-green-100: #dcfce7;
+  --rdg-green-700: #15803d;
+  --rdg-amber-100: #fef3c7;
+  --rdg-amber-800: #92400e;
+  --rdg-red-100: #fee2e2;
+  --rdg-red-700: #b91c1c;
+
+  --rdg-space-1: 4px;
+  --rdg-space-2: 8px;
+  --rdg-space-3: 12px;
+  --rdg-space-4: 16px;
+  --rdg-space-5: 20px;
+  --rdg-space-6: 24px;
+  --rdg-space-8: 32px;
+  --rdg-space-10: 40px;
+  --rdg-space-12: 48px;
+  --rdg-space-16: 64px;
+  --rdg-space-20: 80px;
+  --rdg-space-24: 96px;
+
+  --rdg-radius-sm: 10px;
+  --rdg-radius-md: 16px;
+  --rdg-radius-lg: 24px;
+  --rdg-radius-xl: 32px;
+  --rdg-radius-pill: 999px;
+  --rdg-touch-min: 44px;
+  --rdg-header-size: 76px;
+  --rdg-sidebar-size: 272px;
+  --rdg-container-max: 1440px;
+  --rdg-content-max: 1280px;
+  --rdg-duration-fast: 120ms;
+  --rdg-duration-standard: 160ms;
+  --rdg-duration-overlay: 220ms;
+  --rdg-easing: cubic-bezier(0.2, 0, 0, 1);
+  --rdg-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --rdg-font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
+
+  --rdg-surface-page: var(--rdg-gray-25);
+  --rdg-surface-primary: #ffffff;
+  --rdg-surface-elevated: #ffffff;
+  --rdg-surface-muted: #f2f6fb;
+  --rdg-surface-strong: #e8f0fa;
+  --rdg-text-primary: #102035;
+  --rdg-text-secondary: #52647a;
+  --rdg-text-subdued: var(--rdg-gray-500);
+  --rdg-text-inverse: #f8fafc;
+  --rdg-border: #d8e2ee;
+  --rdg-border-strong: #bdcad9;
+  --rdg-action-primary: var(--rdg-blue-700);
+  --rdg-action-primary-hover: var(--rdg-blue-800);
+  --rdg-action-conversion: var(--rdg-orange-700);
+  --rdg-action-conversion-hover: #9a3412;
+  --rdg-focus: #f97316;
+  --rdg-soft-blue: #eef5ff;
+  --rdg-soft-orange: #fff7ed;
+  --rdg-overlay: rgba(8, 20, 38, 0.62);
+  --rdg-shadow-color: rgba(8, 20, 38, 0.12);
+  --rdg-shadow-subtle: 0 1px 2px var(--rdg-shadow-color);
+  --rdg-shadow-card: 0 20px 60px var(--rdg-shadow-color);
+  --rdg-shadow-overlay: 0 28px 80px var(--rdg-shadow-color);
+
+  /* Compatibility aliases retained for existing pages. */
+  --primary: var(--rdg-action-primary);
+  --primary-hover: var(--rdg-action-primary-hover);
+  --accent: var(--rdg-action-conversion);
+  --bg-elevated: var(--rdg-surface-elevated);
+  --border-accent: var(--rdg-border);
+  --glass-bg: color-mix(in srgb, var(--rdg-surface-elevated) 90%, transparent);
+  --shadow-card: var(--rdg-shadow-card);
+  --shadow-glow: 0 0 20px color-mix(in srgb, var(--rdg-action-primary) 16%, transparent);
+}
+
+html.dark,
+html[data-theme='dark'] {
+  --rdg-surface-page: var(--rdg-navy-950);
+  --rdg-surface-primary: var(--rdg-navy-900);
+  --rdg-surface-elevated: var(--rdg-navy-850);
+  --rdg-surface-muted: #0b1a2d;
+  --rdg-surface-strong: #172d48;
+  --rdg-text-primary: #eef5ff;
+  --rdg-text-secondary: #adbed2;
+  --rdg-text-subdued: var(--rdg-gray-300);
+  --rdg-text-inverse: var(--rdg-navy-950);
+  --rdg-border: #263c56;
+  --rdg-border-strong: #3a536e;
+  --rdg-action-primary: #76a9ff;
+  --rdg-action-primary-hover: #9bc2ff;
+  --rdg-action-conversion: var(--rdg-orange-400);
+  --rdg-action-conversion-hover: #fdba74;
+  --rdg-focus: var(--rdg-orange-400);
+  --rdg-soft-blue: #10284a;
+  --rdg-soft-orange: #3a2015;
+  --rdg-overlay: rgba(2, 8, 18, 0.76);
+  --rdg-shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+html.light,
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+html[lang='ar'] body {
+  font-family: var(--rdg-font-arabic);
+  line-height: 1.8;
+}
+
+::selection {
+  background: var(--rdg-blue-200);
+  color: var(--rdg-gray-900);
+}
+
+html.dark ::selection,
+html[data-theme='dark'] ::selection {
+  background: var(--rdg-blue-800);
+  color: var(--rdg-gray-25);
+}
+
+:focus-visible {
+  outline: 3px solid var(--rdg-focus);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/dashboard/tailwind.config.ts b/dashboard/tailwind.config.ts
new file mode 100644
index 0000000..72a006b
--- /dev/null
+++ b/dashboard/tailwind.config.ts
@@ -0,0 +1,27 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          900: '#1e3a8a',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
new file mode 100644
index 0000000..b575f7d
--- /dev/null
+++ b/dashboard/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/dashboard/vitest.config.ts b/dashboard/vitest.config.ts
new file mode 100644
index 0000000..474502a
--- /dev/null
+++ b/dashboard/vitest.config.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['src/**/*.test.ts'],
+    clearMocks: true,
+    restoreMocks: true,
+  },
+})
diff --git a/docs/fleet_lue.html b/docs/fleet_lue.html
index d1e2c88..6a27968 100644
--- a/docs/fleet_lue.html
+++ b/docs/fleet_lue.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FleetOS — Rental Fleet Operating System</title>
+    <title>RentalDriveGo — Rental Fleet Operating System</title>
     <script src="https://cdn.tailwindcss.com">
     </script>
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js">
@@ -408,7 +408,7 @@
                 <span style="color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.5px;">F</span>
             </div>
             <div>
-                <span style="font-size: 15px; font-weight: 600; letter-spacing: -0.3px; background: linear-gradient(135deg, #E8EDF5, #60A5FA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">FleetOS</span>
+                <span style="font-size: 15px; font-weight: 600; letter-spacing: -0.3px; background: linear-gradient(135deg, #E8EDF5, #60A5FA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">RentalDriveGo</span>
             </div>
         </div>
 
@@ -1138,7 +1138,7 @@
             <i data-lucide="bot" style="width: 18px; height: 18px; color: #fff;"></i>
         </div>
         <div>
-            <h2 style="font-size: 15px; font-weight: 600;">FleetOS Copilot</h2>
+            <h2 style="font-size: 15px; font-weight: 600;">RentalDriveGo Copilot</h2>
             <p style="font-size: 11px; color: var(--text-secondary);">AI Operations Assistant</p>
         </div>
         <button onclick="toggleCopilot()" style="margin-left: auto; background: rgba(255,255,255,0.04); border: none; cursor: pointer; color: var(--text-secondary); font-size: 20px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.2s;"
@@ -1193,7 +1193,7 @@
             </button>
         </div>
         <p style="font-size: 10px; color: var(--text-secondary); margin-top: 8px; text-align: center;">
-            FleetOS Copilot • v2.4.1 • Powered by AI
+            RentalDriveGo Copilot • v2.4.1 • Powered by AI
         </p>
     </div>
 </div>
diff --git a/homepage/eslint.config.mjs b/homepage/eslint.config.mjs
new file mode 100644
index 0000000..da90fbc
--- /dev/null
+++ b/homepage/eslint.config.mjs
@@ -0,0 +1,40 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTypeScript from 'eslint-config-next/typescript';
+import prettier from 'eslint-config-prettier';
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTypeScript,
+  prettier,
+  {
+    rules: {
+      'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+      ],
+      '@typescript-eslint/no-floating-promises': 'error',
+      '@typescript-eslint/switch-exhaustiveness-check': 'error',
+    },
+  },
+  globalIgnores([
+    '.next/**',
+    'coverage/**',
+    'playwright-report/**',
+    'test-results/**',
+    'contracts/**',
+    'next-env.d.ts',
+  ]),
+]);
diff --git a/homepage/next-env.d.ts b/homepage/next-env.d.ts
new file mode 100644
index 0000000..c4b7818
--- /dev/null
+++ b/homepage/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/homepage/next.config.ts b/homepage/next.config.ts
new file mode 100644
index 0000000..df98054
--- /dev/null
+++ b/homepage/next.config.ts
@@ -0,0 +1,79 @@
+import type { NextConfig } from 'next';
+
+const securityHeaders = [
+  { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
+  { key: 'X-Content-Type-Options', value: 'nosniff' },
+  { key: 'X-Frame-Options', value: 'DENY' },
+  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
+];
+
+const nextConfig: NextConfig = {
+  allowedDevOrigins: ['192.168.3.3'],
+  compress: true,
+  poweredByHeader: false,
+  reactStrictMode: true,
+
+  transpilePackages: ['@rentaldrivego/types'],
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+    ],
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ];
+  },
+
+  async redirects() {
+    return [
+      {
+        source: '/dashboard/dashboard',
+        destination: '/dashboard',
+        permanent: false,
+      },
+      {
+        source: '/dashboard/dashboard/:path*',
+        destination: '/dashboard/:path*',
+        permanent: false,
+      },
+    ];
+  },
+
+  async rewrites() {
+    const dashboardOrigin =
+      process.env.DASHBOARD_INTERNAL_URL ?? 'http://dashboard:3001';
+    const adminOrigin =
+      process.env.ADMIN_INTERNAL_URL ?? 'http://admin:3002';
+
+    return [
+      {
+        source: '/dashboard',
+        destination: `${dashboardOrigin}/dashboard`,
+      },
+      {
+        source: '/dashboard/:path*',
+        destination: `${dashboardOrigin}/dashboard/:path*`,
+      },
+      {
+        source: '/admin',
+        destination: `${adminOrigin}/admin`,
+      },
+      {
+        source: '/admin/:path*',
+        destination: `${adminOrigin}/admin/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/homepage/package.json b/homepage/package.json
new file mode 100644
index 0000000..e8e059b
--- /dev/null
+++ b/homepage/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@rentaldrivego/homepage",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "next dev -H 0.0.0.0 -p 3000",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "next build",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "next start -H 0.0.0.0 -p 3000",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --max-warnings=0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/noto-sans-arabic": "^5.2.10",
+    "@rentaldrivego/types": "*",
+    "next": "^16.2.7",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.61.0",
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.0",
+    "@types/node": "^20.12.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^16.2.0",
+    "eslint-config-prettier": "^10.1.0",
+    "globals": "^17.0.0",
+    "jsdom": "^29.0.0",
+    "prettier": "^3.8.0",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.1.0"
+  }
+}
diff --git a/homepage/playwright.config.ts b/homepage/playwright.config.ts
new file mode 100644
index 0000000..39ab4a6
--- /dev/null
+++ b/homepage/playwright.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:3000';
+const executablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
+const serverCommand = process.env.PLAYWRIGHT_SERVER_COMMAND ?? 'pnpm start';
+
+export default defineConfig({
+  testDir: './tests',
+  testMatch: ['browser/**/*.spec.ts', 'a11y/**/*.spec.ts', 'visual/**/*.spec.ts'],
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  ...(process.env.CI ? { workers: 2 } : {}),
+  reporter: process.env.CI ? [['html', { open: 'never' }], ['github']] : 'list',
+  expect: {
+    timeout: 5_000,
+    toHaveScreenshot: {
+      animations: 'disabled',
+      caret: 'hide',
+      maxDiffPixelRatio: 0.005,
+    },
+  },
+  use: {
+    baseURL,
+    locale: 'en-US',
+    timezoneId: 'UTC',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video:
+      process.env.PLAYWRIGHT_VIDEO === 'off' ? 'off' : process.env.CI ? 'retain-on-failure' : 'off',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        ...(executablePath ? { launchOptions: { executablePath } } : {}),
+      },
+    },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
+    { name: 'mobile-safari', use: { ...devices['iPhone 15'] } },
+  ],
+  webServer: {
+    command: serverCommand,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    env: {
+      SITE_ORIGIN: baseURL,
+      PUBLIC_RELEASE_APPROVED: 'false',
+      COMPONENT_FIXTURES_ENABLED: 'true',
+      NEXT_PUBLIC_DEMO_ENABLED: 'true',
+      DEMO_SUBMISSION_MODE: 'local',
+      DEMO_LOCAL_TEST_MODE: 'true',
+      DEMO_TEST_SCENARIOS_ENABLED: 'true',
+      NEXT_PUBLIC_ANALYTICS_MODE: 'disabled',
+      HOSTNAME: '127.0.0.1',
+      PORT: '3000',
+    },
+  },
+});
diff --git a/homepage/prettier.config.mjs b/homepage/prettier.config.mjs
new file mode 100644
index 0000000..b1f4351
--- /dev/null
+++ b/homepage/prettier.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  plugins: [],
+};
+
+export default config;
diff --git a/homepage/public/.gitkeep b/homepage/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/homepage/public/rentaldrivego.jpeg b/homepage/public/rentaldrivego.jpeg
new file mode 100644
index 0000000..3ba550b
Binary files /dev/null and b/homepage/public/rentaldrivego.jpeg differ
diff --git a/homepage/src/app/[locale]/[slug]/page.tsx b/homepage/src/app/[locale]/[slug]/page.tsx
new file mode 100644
index 0000000..ad928cd
--- /dev/null
+++ b/homepage/src/app/[locale]/[slug]/page.tsx
@@ -0,0 +1,89 @@
+import { StateAction, StateActions, StateShell } from '@/components/app-shell/StateShell';
+import { SignInForm } from '@/components/auth/SignInForm';
+import { ForgotPasswordForm } from '@/components/auth/ForgotPasswordForm';
+import { ResetPasswordForm } from '@/components/auth/ResetPasswordForm';
+import {
+  isLocale,
+  localizedPath,
+  routeIdFromSlug,
+  type Locale,
+  type RouteId,
+} from '@/lib/localization/config';
+import { getMessages, type ShellMessages } from '@/lib/localization/messages';
+import { buildLocalizedMetadata } from '@/lib/metadata/build-metadata';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+interface PendingRouteProps {
+  params: Promise<{ locale: string; slug: string }>;
+}
+
+function routeLabel(messages: ShellMessages, routeId: RouteId): string {
+  const labels = messages.footer.links;
+  switch (routeId) {
+    case 'sign-in':
+      return labels.login;
+    case 'forgot-password':
+      return 'Forgot password';
+    case 'reset-password':
+      return 'Reset password';
+    case 'privacy':
+      return labels.privacy;
+    case 'terms':
+      return labels.terms;
+    case 'accessibility':
+      return labels.accessibility;
+    case 'home':
+      return 'RentalDriveGo';
+  }
+}
+
+async function resolveParams(params: PendingRouteProps['params']) {
+  const { locale: localeValue, slug } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const routeId = routeIdFromSlug(localeValue, slug);
+  if (!routeId || routeId === 'home') notFound();
+  return { locale: localeValue as Locale, routeId };
+}
+
+export async function generateMetadata({ params }: PendingRouteProps): Promise<Metadata> {
+  const { locale, routeId } = await resolveParams(params);
+  const messages = getMessages(locale).shell;
+  const label = routeLabel(messages, routeId);
+  return buildLocalizedMetadata({
+    locale,
+    routeId,
+    title: `${label} | ${messages.metadata.pendingTitle}`,
+    description: messages.metadata.pendingDescription,
+    indexable: false,
+  });
+}
+
+export default async function PendingRoute({ params }: PendingRouteProps) {
+  const { locale, routeId } = await resolveParams(params);
+  const messages = getMessages(locale).shell;
+  const label = routeLabel(messages, routeId);
+
+  if (routeId === 'sign-in') {
+    return <SignInForm locale={locale} />;
+  }
+
+  if (routeId === 'forgot-password') {
+    return <ForgotPasswordForm locale={locale} />;
+  }
+
+  if (routeId === 'reset-password') {
+    return <ResetPasswordForm locale={locale} />;
+  }
+
+  return (
+    <StateShell
+      title={`${label}: ${messages.states.pendingTitle}`}
+      body={messages.states.pendingBody}
+    >
+      <StateActions>
+        <StateAction href={localizedPath('home', locale)}>{messages.states.backHome}</StateAction>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx b/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx
new file mode 100644
index 0000000..1cba5e1
--- /dev/null
+++ b/homepage/src/app/[locale]/component-lab/ComponentLabInteractive.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { Accordion } from '@/components/controls/Accordion';
+import { SegmentedControl } from '@/components/controls/SegmentedControl';
+import { Tabs } from '@/components/controls/Tabs';
+import { Alert } from '@/components/feedback/Alert';
+import { Checkbox, Switch } from '@/components/forms/ChoiceControls';
+import { FormField } from '@/components/forms/FormField';
+import { TextInput } from '@/components/forms/TextInput';
+import { DropdownMenu } from '@/components/overlays/DropdownMenu';
+import { Dialog } from '@/components/overlays/Dialog';
+import type { ComponentLabCopy } from '@/content/development/component-lab';
+import { useRef, useState } from 'react';
+import styles from './page.module.css';
+
+export function ComponentLabInteractive({ copy }: { copy: ComponentLabCopy }) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [segment, setSegment] = useState('comfortable');
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  return (
+    <div className={styles.interactiveGrid}>
+      <section className={styles.group} aria-labelledby="lab-actions">
+        <h2 id="lab-actions">Actions</h2>
+        <div className={styles.cluster}>
+          <Button>{copy.actions.primary}</Button>
+          <Button intent="conversion">{copy.actions.conversion}</Button>
+          <Button loading>{copy.actions.loading}</Button>
+          <Button disabled>{copy.actions.disabled}</Button>
+          <Button ref={triggerRef} intent="secondary" onClick={() => setDialogOpen(true)}>
+            {copy.dialog.open}
+          </Button>
+          <DropdownMenu
+            label={copy.menu.label}
+            items={[
+              { id: 'review', label: copy.menu.first, onSelect: () => undefined },
+              {
+                id: 'archive',
+                label: copy.menu.second,
+                onSelect: () => undefined,
+                destructive: true,
+              },
+            ]}
+          />
+        </div>
+      </section>
+      <section className={styles.group} aria-labelledby="lab-form">
+        <h2 id="lab-form">Form controls</h2>
+        <FormField
+          id="fixture-email"
+          label={copy.form.label}
+          supportingText={copy.form.supporting}
+          error={copy.form.error}
+          required
+        >
+          <TextInput
+            id="fixture-email"
+            type="email"
+            placeholder={copy.form.placeholder}
+            invalid
+            describedBy="fixture-email-help fixture-email-error"
+          />
+        </FormField>
+        <Checkbox label={copy.form.checkbox} />
+        <Switch label={copy.form.switch} />
+        <SegmentedControl
+          label="Density"
+          value={segment}
+          onChange={setSegment}
+          options={[
+            { value: 'comfortable', label: 'Comfortable' },
+            { value: 'compact', label: 'Compact' },
+          ]}
+        />
+      </section>
+      <section className={styles.group} aria-labelledby="lab-controls">
+        <h2 id="lab-controls">Selection and disclosure</h2>
+        <Tabs label={copy.tabs.label} items={copy.tabs.items} />
+        <Accordion items={copy.accordion.items} />
+      </section>
+      <Alert tone="warning" title={copy.alert.title}>
+        {copy.alert.body}
+      </Alert>
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title={copy.dialog.title}
+        description={copy.dialog.description}
+        closeLabel={copy.dialog.close}
+        returnFocusRef={triggerRef}
+      >
+        <p>{copy.dialog.content}</p>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/homepage/src/app/[locale]/component-lab/page.module.css b/homepage/src/app/[locale]/component-lab/page.module.css
new file mode 100644
index 0000000..52517f5
--- /dev/null
+++ b/homepage/src/app/[locale]/component-lab/page.module.css
@@ -0,0 +1,32 @@
+.main {
+  min-block-size: 100dvh;
+}
+.interactiveGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+.group {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  min-inline-size: 0;
+  padding: var(--space-6);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+}
+.group h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+@media (max-width: 767px) {
+  .interactiveGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/homepage/src/app/[locale]/component-lab/page.tsx b/homepage/src/app/[locale]/component-lab/page.tsx
new file mode 100644
index 0000000..120134c
--- /dev/null
+++ b/homepage/src/app/[locale]/component-lab/page.tsx
@@ -0,0 +1,81 @@
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { Comparison } from '@/components/marketing/Comparison';
+import { CTA } from '@/components/marketing/CTA';
+import { Metric } from '@/components/marketing/Evidence';
+import { ProductPreview } from '@/components/marketing/ProductPreview';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { Workflow } from '@/components/marketing/Workflow';
+import { getComponentLabCopy } from '@/content/development/component-lab';
+import { isLocale, type Locale } from '@/lib/localization/config';
+import { notFound } from 'next/navigation';
+import { ComponentLabInteractive } from './ComponentLabInteractive';
+import styles from './page.module.css';
+
+export const metadata = { robots: { index: false, follow: false } };
+
+export default async function ComponentLabPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  if (process.env.COMPONENT_FIXTURES_ENABLED !== 'true') notFound();
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const resolvedLocale: Locale = locale;
+  const copy = getComponentLabCopy(resolvedLocale);
+  return (
+    <main id="main-content" className={styles.main}>
+      <Section>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={copy.developmentLabel}
+              title={copy.title}
+              body={copy.body}
+              headingLevel={1}
+            />
+            <ComponentLabInteractive copy={copy} />
+            <Workflow label={copy.title} items={copy.workflow} />
+            <Comparison
+              columns={[
+                {
+                  title: copy.comparison.beforeTitle,
+                  items: copy.comparison.before,
+                  tone: 'problem',
+                },
+                {
+                  title: copy.comparison.afterTitle,
+                  items: copy.comparison.after,
+                  tone: 'solution',
+                },
+              ]}
+            />
+            <ProductPreview
+              title={copy.preview.title}
+              caption={copy.preview.caption}
+              illustrativeLabel={copy.preview.illustrative}
+              rows={copy.preview.rows.map((row, index) => ({
+                ...row,
+                statusTone: index === 0 ? 'success' : 'warning',
+              }))}
+            />
+            <Metric
+              content={{
+                value: copy.metric.value,
+                label: copy.metric.label,
+                qualification: copy.metric.qualification,
+                status: 'research-only',
+              }}
+              statusLabel={copy.metric.status}
+            />
+            <CTA
+              title={copy.cta.title}
+              body={copy.cta.body}
+              primary={{ label: copy.cta.primary, disabledReason: copy.cta.unavailable }}
+            />
+          </Stack>
+        </Container>
+      </Section>
+    </main>
+  );
+}
diff --git a/homepage/src/app/[locale]/error.tsx b/homepage/src/app/[locale]/error.tsx
new file mode 100644
index 0000000..d516598
--- /dev/null
+++ b/homepage/src/app/[locale]/error.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { StateButton, StateActions, StateShell } from '@/components/app-shell/StateShell';
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { useParams } from 'next/navigation';
+
+export default function ErrorPage({
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const params = useParams<{ locale?: string }>();
+  const messages = getClientShellMessages(params?.locale);
+
+  return (
+    <StateShell title={messages.states.errorTitle} body={messages.states.errorBody}>
+      <StateActions>
+        <StateButton onClick={reset}>{messages.states.retry}</StateButton>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/homepage/src/app/[locale]/layout.tsx b/homepage/src/app/[locale]/layout.tsx
new file mode 100644
index 0000000..c42b913
--- /dev/null
+++ b/homepage/src/app/[locale]/layout.tsx
@@ -0,0 +1,99 @@
+import '@fontsource-variable/inter/index.css';
+import '@fontsource-variable/noto-sans-arabic/index.css';
+import '@/styles/tokens.css';
+import '@/styles/component-tokens.css';
+import '@/styles/globals.css';
+
+import { SiteFooter } from '@/components/app-shell/SiteFooter';
+import { DemoDialogHost } from '@/components/integrations/DemoDialogHost';
+import { SiteHeader } from '@/components/app-shell/SiteHeader';
+import { ThemeController } from '@/components/app-shell/ThemeController';
+import { getPublicIntegrationConfig } from '@/lib/integrations/environment';
+import { getDirection, isLocale, type Locale } from '@/lib/localization/config';
+import { getMessages } from '@/lib/localization/messages';
+import { themeBootstrapScript } from '@/lib/theme/bootstrap-script';
+import {
+  isThemePreference,
+  serverResolvedTheme,
+  themeCookie,
+  type ThemePreference,
+} from '@/lib/theme/config';
+import { cookies, headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
+  const { locale } = await params;
+  return {
+    icons: {
+      icon: '/rentaldrivego.jpeg',
+      apple: '/rentaldrivego.jpeg',
+    },
+  };
+}
+
+export const dynamic = 'force-dynamic';
+
+interface LocaleLayoutProps {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const locale: Locale = localeValue;
+  const messages = getMessages(locale);
+  const integrationConfig = getPublicIntegrationConfig();
+  const requestHeaders = await headers();
+  const nonce = requestHeaders.get('x-nonce') ?? undefined;
+  const cookieStore = await cookies();
+  const cookiePreference = cookieStore.get(themeCookie)?.value;
+  const preference: ThemePreference = isThemePreference(cookiePreference)
+    ? cookiePreference
+    : 'system';
+  const resolvedTheme = serverResolvedTheme(preference);
+
+  return (
+    <html
+      lang={locale}
+      dir={getDirection(locale)}
+      data-theme-preference={preference}
+      data-theme={resolvedTheme}
+      suppressHydrationWarning
+    >
+      <head>
+        <script
+          id="theme-bootstrap"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: themeBootstrapScript }}
+        />
+      </head>
+      <body>
+        <ThemeController />
+        <a className="skip-link" href="#main-content">
+          {messages.shell.skipToContent}
+        </a>
+        <SiteHeader
+          locale={locale}
+          messages={messages.shell}
+          themePreference={preference}
+          demoEnabled={integrationConfig.demoSubmissionEnabled}
+        />
+        {children}
+        <DemoDialogHost
+          locale={locale}
+          messages={messages.homepage.form}
+          enabled={integrationConfig.demoSubmissionEnabled}
+        />
+        <SiteFooter
+          locale={locale}
+          messages={messages.shell}
+          demoEnabled={integrationConfig.demoSubmissionEnabled}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/homepage/src/app/[locale]/loading.tsx b/homepage/src/app/[locale]/loading.tsx
new file mode 100644
index 0000000..12cd6ed
--- /dev/null
+++ b/homepage/src/app/[locale]/loading.tsx
@@ -0,0 +1,5 @@
+import { LocalizedLoading } from '@/components/app-shell/LocalizedLoading';
+
+export default function Loading() {
+  return <LocalizedLoading />;
+}
diff --git a/homepage/src/app/[locale]/not-found.tsx b/homepage/src/app/[locale]/not-found.tsx
new file mode 100644
index 0000000..83b5b9a
--- /dev/null
+++ b/homepage/src/app/[locale]/not-found.tsx
@@ -0,0 +1,5 @@
+import { LocalizedNotFound } from '@/components/app-shell/LocalizedNotFound';
+
+export default function NotFound() {
+  return <LocalizedNotFound />;
+}
diff --git a/homepage/src/app/[locale]/page.module.css b/homepage/src/app/[locale]/page.module.css
new file mode 100644
index 0000000..3bc0ade
--- /dev/null
+++ b/homepage/src/app/[locale]/page.module.css
@@ -0,0 +1,219 @@
+.main {
+  min-block-size: calc(100dvh - var(--header-min-block-size));
+  overflow: clip;
+}
+
+.hero {
+  position: relative;
+  isolation: isolate;
+  padding-block: clamp(var(--space-12), 9vw, var(--space-24));
+  background:
+    radial-gradient(
+      circle at 12% 18%,
+      color-mix(in srgb, var(--status-info-surface) 82%, transparent),
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 88% 72%,
+      color-mix(in srgb, var(--surface-strong) 78%, transparent),
+      transparent 42%
+    ),
+    var(--surface-page);
+}
+
+.hero::after {
+  position: absolute;
+  z-index: -1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: 1px;
+  background: var(--border-standard);
+  content: '';
+}
+
+.heroGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.98fr);
+  align-items: center;
+  gap: clamp(var(--space-10), 7vw, var(--space-20));
+}
+
+.heroCopy {
+  display: grid;
+  gap: var(--space-5);
+  min-inline-size: 0;
+}
+
+.heroCopy > p:last-of-type {
+  max-inline-size: 58ch;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding-block-start: var(--space-2);
+}
+
+.previewStage {
+  position: relative;
+  min-inline-size: 0;
+  padding: clamp(var(--space-3), 2.5vw, var(--space-6));
+}
+
+.previewStage::before,
+.previewStage::after {
+  position: absolute;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  content: '';
+}
+
+.previewStage::before {
+  inset: 0;
+  background: var(--surface-strong);
+  transform: rotate(-2deg);
+}
+
+.previewStage::after {
+  inset-block-start: 8%;
+  inset-inline: 8%;
+  block-size: 88%;
+  border: 1px solid var(--border-strong);
+  transform: rotate(2deg);
+}
+
+.sectionBorder {
+  border-block-end: 1px solid var(--border-standard);
+}
+
+.splitSection,
+.pricingGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
+  align-items: start;
+  gap: clamp(var(--space-8), 7vw, var(--space-16));
+}
+
+.capabilityList,
+.factorList,
+.methodList {
+  margin: 0;
+}
+
+.capabilityList,
+.factorList {
+  display: grid;
+  gap: var(--space-4);
+  padding: 0;
+  list-style: none;
+}
+
+.capabilityList {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.capabilityList li,
+.factorList li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-3);
+}
+
+.capabilityList svg,
+.factorList svg {
+  margin-block-start: 0.28rem;
+  color: var(--interactive-primary);
+}
+
+.methodList {
+  display: grid;
+  gap: var(--space-2);
+  padding-inline-start: var(--space-5);
+}
+
+.pricingCopy {
+  display: grid;
+  gap: var(--space-8);
+}
+
+.pricingCard {
+  display: grid;
+  gap: var(--space-5);
+}
+
+.pricingCard > svg {
+  color: var(--interactive-primary);
+}
+
+.pricingCard > :last-child {
+  justify-self: start;
+}
+
+.finalSection {
+  padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
+}
+
+@media (max-width: 1023px) {
+  .heroGrid {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
+    gap: var(--space-10);
+  }
+
+  .splitSection,
+  .pricingGrid {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .heroGrid,
+  .splitSection,
+  .pricingGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .heroCopy {
+    justify-items: start;
+  }
+
+  .heroActions,
+  .heroActions > *,
+  .pricingCard > :last-child {
+    inline-size: 100%;
+  }
+
+  .previewStage {
+    padding-inline: 0;
+  }
+
+  .previewStage::before,
+  .previewStage::after {
+    display: none;
+  }
+
+  .capabilityList {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 359px) {
+  .hero {
+    padding-block: var(--space-10);
+  }
+}
+
+@media (forced-colors: active) {
+  .previewStage::before,
+  .previewStage::after {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .previewStage::before,
+  .previewStage::after {
+    transform: none;
+  }
+}
diff --git a/homepage/src/app/[locale]/page.tsx b/homepage/src/app/[locale]/page.tsx
new file mode 100644
index 0000000..f27f88c
--- /dev/null
+++ b/homepage/src/app/[locale]/page.tsx
@@ -0,0 +1,352 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Accordion } from '@/components/controls/Accordion';
+import { Icon } from '@/components/foundation/Icon';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
+import { CTA } from '@/components/marketing/CTA';
+import { Comparison } from '@/components/marketing/Comparison';
+import { FeatureCard } from '@/components/marketing/FeatureCard';
+import { ProductPreview } from '@/components/marketing/ProductPreview';
+import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import { Workflow } from '@/components/marketing/Workflow';
+import { Callout } from '@/components/surfaces/Callout';
+import { Card } from '@/components/surfaces/Card';
+import { Eyebrow, Heading, Text } from '@/components/typography/Typography';
+import { buildHomepageContent } from '@/content/homepage-model';
+import { getPublicIntegrationConfig } from '@/lib/integrations/environment';
+import { isLocale, localizedPath, type Locale } from '@/lib/localization/config';
+import { getMessages } from '@/lib/localization/messages';
+import { buildLocalizedMetadata } from '@/lib/metadata/build-metadata';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import styles from './page.module.css';
+
+interface LocalePageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: LocalePageProps): Promise<Metadata> {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const messages = getMessages(localeValue);
+  return buildLocalizedMetadata({
+    locale: localeValue,
+    routeId: 'home',
+    title: messages.homepage.meta.title,
+    description: messages.homepage.meta.description,
+    indexable: true,
+  });
+}
+
+export default async function LocaleHomePage({ params }: LocalePageProps) {
+  const { locale: localeValue } = await params;
+  if (!isLocale(localeValue)) notFound();
+  const locale: Locale = localeValue;
+  const messages = getMessages(locale);
+  const content = buildHomepageContent(messages.homepage, messages.shell);
+  const integrationConfig = getPublicIntegrationConfig();
+  const homePath = localizedPath('home', locale);
+
+  return (
+    <main id="main-content" className={styles.main} tabIndex={-1}>
+      <Section id="product" className={styles.hero} aria-label={content.hero.title}>
+        <Container>
+          <div className={styles.heroGrid}>
+            <div className={styles.heroCopy}>
+              <Eyebrow>{content.hero.eyebrow}</Eyebrow>
+              <Heading level={1} appearance="display">
+                {content.hero.title}
+              </Heading>
+              <Text variant="lead">{content.hero.body}</Text>
+              <div className={styles.heroActions} role="group" aria-label={content.hero.eyebrow}>
+                <DemoTrigger
+                  label={content.hero.primary.label}
+                  source="hero"
+                  size="large"
+                  disabledReason={
+                    integrationConfig.demoSubmissionEnabled
+                      ? undefined
+                      : content.hero.primary.disabledReason
+                  }
+                />
+                <ActionLink
+                  href={homePath}
+                  variant="button-primary"
+                  disabledReason={content.hero.secondary.disabledReason}
+                >
+                  {content.hero.secondary.label}
+                </ActionLink>
+              </div>
+            </div>
+            <div className={styles.previewStage}>
+              <ProductPreview {...content.hero.preview} headingLevel={2} />
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      <Section className={styles.sectionBorder} aria-label={content.trust.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.trust.eyebrow}
+              title={content.trust.title}
+              body={content.trust.body}
+              alignment="center"
+            />
+            <FeatureGrid>
+              {content.trust.items.map((item) => (
+                <FeatureCard
+                  key={item.id}
+                  title={item.title}
+                  description={item.description}
+                  {...(item.icon ? { icon: item.icon } : {})}
+                  emphasis="muted"
+                />
+              ))}
+            </FeatureGrid>
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section tone="muted" aria-label={content.comparison.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.comparison.eyebrow}
+              title={content.comparison.title}
+              body={content.comparison.body}
+            />
+            <Comparison
+              columns={[
+                {
+                  title: content.comparison.beforeTitle,
+                  items: content.comparison.beforeItems,
+                  tone: 'problem',
+                },
+                {
+                  title: content.comparison.afterTitle,
+                  items: content.comparison.afterItems,
+                  tone: 'solution',
+                },
+              ]}
+            />
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section id="workflow" aria-label={content.workflow.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.workflow.eyebrow}
+              title={content.workflow.title}
+              body={content.workflow.body}
+            />
+            <Workflow items={content.workflow.steps} label={content.workflow.title} />
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section tone="strong" aria-label={content.roles.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.roles.eyebrow}
+              title={content.roles.title}
+              alignment="center"
+            />
+            <FeatureGrid>
+              {content.roles.items.map((item) => (
+                <FeatureCard
+                  key={item.id}
+                  title={item.title}
+                  description={item.description}
+                  {...(item.icon ? { icon: item.icon } : {})}
+                  emphasis="primary"
+                />
+              ))}
+            </FeatureGrid>
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section id="modules" aria-label={content.modules.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.modules.eyebrow}
+              title={content.modules.title}
+              body={content.modules.body}
+            />
+            <FeatureGrid>
+              {content.modules.items.map((item) => (
+                <FeatureCard
+                  key={item.id}
+                  title={item.title}
+                  description={item.description}
+                  {...(item.icon ? { icon: item.icon } : {})}
+                />
+              ))}
+            </FeatureGrid>
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section tone="muted" aria-label={content.results.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.results.eyebrow}
+              title={content.results.title}
+              body={content.results.body}
+            />
+            <FeatureGrid>
+              {content.results.metrics.map((metric) => (
+                <FeatureCard
+                  key={metric.id}
+                  title={metric.title}
+                  description={metric.description}
+                  {...(metric.icon ? { icon: metric.icon } : {})}
+                  emphasis="muted"
+                />
+              ))}
+            </FeatureGrid>
+            <Callout icon="info" title={content.results.methodTitle}>
+              <ol className={styles.methodList}>
+                {content.results.method.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ol>
+            </Callout>
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section aria-label={content.integrations.title}>
+        <Container>
+          <div className={styles.splitSection}>
+            <SectionHeader
+              eyebrow={content.integrations.eyebrow}
+              title={content.integrations.title}
+              body={content.integrations.body}
+            />
+            <Card as="div" tone="elevated" padding="spacious">
+              <ul className={styles.capabilityList}>
+                {content.integrations.items.map((item) => (
+                  <li key={item}>
+                    <Icon name="plus" size="sm" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          </div>
+        </Container>
+      </Section>
+
+      <Section tone="strong" aria-label={content.security.title}>
+        <Container>
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.security.eyebrow}
+              title={content.security.title}
+              body={content.security.body}
+            />
+            <FeatureGrid>
+              {content.security.checks.map((check) => (
+                <FeatureCard
+                  key={check.id}
+                  title={check.title}
+                  description={check.description}
+                  {...(check.icon ? { icon: check.icon } : {})}
+                  emphasis="primary"
+                />
+              ))}
+            </FeatureGrid>
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section id="pricing" aria-label={content.pricing.title}>
+        <Container>
+          <div className={styles.pricingGrid}>
+            <div className={styles.pricingCopy}>
+              <SectionHeader
+                eyebrow={content.pricing.eyebrow}
+                title={content.pricing.title}
+                body={content.pricing.body}
+              />
+              <ul className={styles.factorList}>
+                {content.pricing.factors.map((factor) => (
+                  <li key={factor}>
+                    <Icon name="check" size="sm" />
+                    <span>{factor}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <aside>
+              <Card as="div" tone="elevated" padding="spacious" className={styles.pricingCard}>
+                <Icon name="info" size="lg" />
+                <Text variant="supporting">{content.pricing.note}</Text>
+                <ActionLink
+                  href={homePath}
+                  variant="button-conversion"
+                  disabledReason={content.pricing.action.disabledReason}
+                >
+                  {content.pricing.action.label}
+                </ActionLink>
+              </Card>
+            </aside>
+          </div>
+        </Container>
+      </Section>
+
+      <Section id="faq" tone="muted" aria-label={content.faq.title}>
+        <Container width="content">
+          <Stack gap="large">
+            <SectionHeader
+              eyebrow={content.faq.eyebrow}
+              title={content.faq.title}
+              alignment="center"
+            />
+            <Accordion
+              items={content.faq.items.map((item, index) => ({
+                id: item.id,
+                title: item.title,
+                content: <Text variant="supporting">{item.body}</Text>,
+                open: index === 0,
+              }))}
+            />
+          </Stack>
+        </Container>
+      </Section>
+
+      <Section className={styles.finalSection} aria-label={content.final.title}>
+        <Container>
+          <CTA
+            eyebrow={content.final.eyebrow}
+            title={content.final.title}
+            body={content.final.body}
+            primary={content.final.primary}
+            secondary={content.final.secondary}
+            primaryNode={
+              <DemoTrigger
+                label={content.final.primary.label}
+                source="final-cta"
+                size="large"
+                disabledReason={
+                  integrationConfig.demoSubmissionEnabled
+                    ? undefined
+                    : content.final.primary.disabledReason
+                }
+              />
+            }
+          />
+        </Container>
+      </Section>
+    </main>
+  );
+}
diff --git a/homepage/src/app/api/demo/route.ts b/homepage/src/app/api/demo/route.ts
new file mode 100644
index 0000000..47d0182
--- /dev/null
+++ b/homepage/src/app/api/demo/route.ts
@@ -0,0 +1,159 @@
+import { randomUUID } from 'node:crypto';
+import {
+  demoSubmissionEnvelopeSchema,
+  zodFieldErrors,
+  type DemoSubmissionResult,
+} from '@/lib/demo/schema';
+import { submitDemoLead } from '@/lib/demo/service';
+import { getIntegrationEnvironment } from '@/lib/integrations/environment';
+import { isApplicationJson } from '@/lib/security/content-type';
+import { NextResponse } from 'next/server';
+
+const maximumBodyBytes = 16_384;
+const responseHeaders = { 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' };
+
+function failure(
+  status: number,
+  result: Extract<DemoSubmissionResult, { ok: false }>,
+): NextResponse<DemoSubmissionResult> {
+  return NextResponse.json(result, { status, headers: responseHeaders });
+}
+
+function isAllowedOrigin(
+  request: Request,
+  approvedOrigin: string | undefined,
+  production: boolean,
+) {
+  const origin = request.headers.get('origin');
+  if (!origin) return !production;
+  const requestOrigin = new URL(request.url).origin;
+  if (origin === requestOrigin) return true;
+  return approvedOrigin ? origin === new URL(approvedOrigin).origin : false;
+}
+
+export async function POST(request: Request): Promise<NextResponse<DemoSubmissionResult>> {
+  const correlationId = randomUUID();
+  let environment;
+  try {
+    environment = getIntegrationEnvironment();
+  } catch {
+    return failure(503, {
+      ok: false,
+      category: 'configuration',
+      formErrorCode: 'integration_environment_invalid',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (request.headers.get('x-rdg-form') !== 'demo-v1') {
+    return failure(403, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'invalid_request_marker',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (!isAllowedOrigin(request, environment.SITE_ORIGIN, environment.NODE_ENV === 'production')) {
+    return failure(403, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'invalid_origin',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const contentType = request.headers.get('content-type');
+  if (!isApplicationJson(contentType)) {
+    return failure(415, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'unsupported_content_type',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const declaredLength = Number(request.headers.get('content-length') ?? '0');
+  if (Number.isFinite(declaredLength) && declaredLength > maximumBodyBytes) {
+    return failure(413, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'request_too_large',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  let body: unknown;
+  try {
+    const raw = await request.text();
+    if (new TextEncoder().encode(raw).byteLength > maximumBodyBytes) {
+      return failure(413, {
+        ok: false,
+        category: 'validation',
+        formErrorCode: 'request_too_large',
+        retryable: false,
+        correlationId,
+      });
+    }
+    body = JSON.parse(raw);
+  } catch {
+    return failure(400, {
+      ok: false,
+      category: 'validation',
+      formErrorCode: 'malformed_json',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const parsed = demoSubmissionEnvelopeSchema.safeParse(body);
+  if (!parsed.success) {
+    return failure(400, {
+      ok: false,
+      category: 'validation',
+      fieldErrors: zodFieldErrors(parsed.error),
+      formErrorCode: 'validation_failed',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  if (parsed.data.guard.honeypot.length > 0) {
+    return failure(400, {
+      ok: false,
+      category: 'abuse',
+      formErrorCode: 'request_rejected',
+      retryable: false,
+      correlationId,
+    });
+  }
+
+  const scenarioHeader = request.headers.get('x-rdg-test-scenario');
+  const testScenario =
+    environment.NODE_ENV !== 'production' &&
+    environment.DEMO_TEST_SCENARIOS_ENABLED &&
+    ['success', 'duplicate', 'timeout', 'integration-error'].includes(scenarioHeader ?? '')
+      ? (scenarioHeader as 'success' | 'duplicate' | 'timeout' | 'integration-error')
+      : undefined;
+
+  const result = await submitDemoLead(parsed.data.lead, {
+    environment,
+    ...(testScenario ? { testScenario } : {}),
+  });
+
+  const status = result.ok
+    ? 202
+    : result.category === 'timeout'
+      ? 504
+      : result.category === 'configuration'
+        ? 503
+        : result.category === 'duplicate'
+          ? 409
+          : 502;
+  return NextResponse.json(result, { status, headers: responseHeaders });
+}
diff --git a/homepage/src/app/robots.ts b/homepage/src/app/robots.ts
new file mode 100644
index 0000000..2eb6cfc
--- /dev/null
+++ b/homepage/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from 'next';
+import { getSiteOrigin } from '@/lib/localization/site-origin';
+
+export default function robots(): MetadataRoute.Robots {
+  const origin = getSiteOrigin();
+  const approved = process.env.PUBLIC_RELEASE_APPROVED === 'true';
+  return {
+    rules: approved ? { userAgent: '*', allow: '/' } : { userAgent: '*', disallow: '/' },
+    host: origin.href,
+  };
+}
diff --git a/homepage/src/components/actions/ActionLink.module.css b/homepage/src/components/actions/ActionLink.module.css
new file mode 100644
index 0000000..eba1e5d
--- /dev/null
+++ b/homepage/src/components/actions/ActionLink.module.css
@@ -0,0 +1,59 @@
+.link {
+  display: inline-flex;
+  min-block-size: 2.75rem;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 650;
+  text-underline-offset: 0.18em;
+}
+.inline {
+  min-block-size: auto;
+  font-weight: inherit;
+  text-decoration-thickness: 0.08em;
+}
+.navigation {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+.navigation:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+.standalone {
+  text-decoration: none;
+}
+.standalone:hover {
+  text-decoration: underline;
+}
+.button-primary,
+.button-conversion {
+  justify-content: center;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-5);
+  border-radius: var(--radius-sm);
+  color: var(--text-inverse);
+  text-decoration: none;
+}
+.button-primary {
+  background: var(--interactive-primary);
+}
+.button-primary:hover {
+  background: var(--interactive-primary-hover);
+  color: var(--text-inverse);
+}
+.button-conversion {
+  background: var(--interactive-conversion);
+}
+.button-conversion:hover {
+  background: var(--interactive-conversion-hover);
+  color: var(--text-inverse);
+}
+.muted {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.disabled {
+  cursor: not-allowed;
+  color: var(--control-disabled-text);
+  text-decoration: none;
+}
diff --git a/homepage/src/components/actions/ActionLink.tsx b/homepage/src/components/actions/ActionLink.tsx
new file mode 100644
index 0000000..982c0bd
--- /dev/null
+++ b/homepage/src/components/actions/ActionLink.tsx
@@ -0,0 +1,76 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import styles from './ActionLink.module.css';
+
+type LinkVariant =
+  | 'inline'
+  | 'navigation'
+  | 'standalone'
+  | 'button-primary'
+  | 'button-conversion'
+  | 'muted';
+
+interface ActionLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  href: string;
+  children: ReactNode;
+  variant?: LinkVariant;
+  icon?: ApprovedIconName;
+  external?: boolean;
+  newTab?: boolean;
+  disabledReason?: string;
+}
+
+export function ActionLink({
+  href,
+  children,
+  variant = 'inline',
+  icon,
+  external = false,
+  newTab = false,
+  disabledReason,
+  className,
+  ...props
+}: ActionLinkProps) {
+  if (disabledReason) {
+    return (
+      <span
+        className={classNames(styles.link, styles[variant], styles.disabled, className)}
+        aria-disabled="true"
+        title={disabledReason}
+      >
+        <span>{children}</span>
+        <span className="visually-hidden">: {disabledReason}</span>
+      </span>
+    );
+  }
+  const isExternal = external || /^https?:\/\//.test(href);
+  const trailingIcon = icon ?? (isExternal ? 'external' : undefined);
+  const content = (
+    <>
+      <span>{children}</span>
+      {trailingIcon ? (
+        <Icon
+          name={trailingIcon}
+          size="sm"
+          directionBehavior={
+            trailingIcon === 'chevron-forward' || trailingIcon === 'arrow-forward'
+              ? 'mirror'
+              : 'fixed'
+          }
+        />
+      ) : null}
+      {newTab ? <span className="visually-hidden"> (opens in a new tab)</span> : null}
+    </>
+  );
+  const shared = {
+    className: classNames(styles.link, styles[variant], className),
+    ...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+    ...props,
+  };
+  return (
+    <a href={href} {...shared}>
+      {content}
+    </a>
+  );
+}
diff --git a/homepage/src/components/actions/Button.module.css b/homepage/src/components/actions/Button.module.css
new file mode 100644
index 0000000..43187c3
--- /dev/null
+++ b/homepage/src/components/actions/Button.module.css
@@ -0,0 +1,139 @@
+.button {
+  display: inline-flex;
+  min-block-size: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-weight: 750;
+  line-height: 1.25;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background-color var(--duration-fast) var(--easing-productive),
+    border-color var(--duration-fast) var(--easing-productive),
+    color var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.button:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.small {
+  min-block-size: 2.5rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  font-size: var(--type-label-size);
+}
+.medium {
+  padding-block: var(--space-3);
+  padding-inline: var(--space-5);
+}
+.large {
+  min-block-size: 3.25rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-6);
+  font-size: var(--type-body-large-size);
+}
+.primary {
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+}
+.primary:hover:not(:disabled) {
+  background: var(--interactive-primary-hover);
+}
+.conversion {
+  background: var(--interactive-conversion);
+  color: var(--text-inverse);
+}
+.conversion:hover:not(:disabled) {
+  background: var(--interactive-conversion-hover);
+}
+.secondary {
+  border-color: var(--interactive-primary);
+  background: var(--surface-primary);
+  color: var(--interactive-primary);
+}
+.secondary:hover:not(:disabled) {
+  background: var(--status-info-surface);
+}
+.tertiary {
+  border-color: var(--border-standard);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+.tertiary:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--surface-muted);
+}
+.ghost {
+  background: transparent;
+  color: var(--text-primary);
+}
+.ghost:hover:not(:disabled) {
+  background: var(--surface-muted);
+}
+.destructive {
+  background: var(--interactive-danger);
+  color: var(--text-inverse);
+}
+.destructive:hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+.link {
+  min-block-size: 2.75rem;
+  padding-inline: 0;
+  background: transparent;
+  color: var(--link-default);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+.link:hover:not(:disabled) {
+  color: var(--link-hover);
+}
+.iconOnly {
+  aspect-ratio: 1;
+  padding: var(--space-3);
+}
+.fullWidth {
+  inline-size: 100%;
+}
+.loading {
+  position: relative;
+}
+.spinner {
+  position: absolute;
+  animation: spin 0.9s linear infinite;
+}
+.loadingContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  opacity: 0;
+}
+.label {
+  min-inline-size: 0;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .spinner {
+    animation-duration: 1.8s;
+  }
+}
+@media (forced-colors: active) {
+  .button {
+    border-color: ButtonText;
+  }
+}
diff --git a/homepage/src/components/actions/Button.tsx b/homepage/src/components/actions/Button.tsx
new file mode 100644
index 0000000..126bf14
--- /dev/null
+++ b/homepage/src/components/actions/Button.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import styles from './Button.module.css';
+
+export type ButtonIntent =
+  | 'primary'
+  | 'conversion'
+  | 'secondary'
+  | 'tertiary'
+  | 'ghost'
+  | 'destructive'
+  | 'link';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+interface CommonButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  intent?: ButtonIntent;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+  leadingIcon?: ApprovedIconName;
+  trailingIcon?: ApprovedIconName;
+  children: ReactNode;
+}
+
+interface IconOnlyButtonProps extends Omit<
+  CommonButtonProps,
+  'children' | 'leadingIcon' | 'trailingIcon'
+> {
+  icon: ApprovedIconName;
+  'aria-label': string;
+  children?: never;
+}
+
+export type ButtonProps = CommonButtonProps | IconOnlyButtonProps;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  const {
+    intent = 'primary',
+    size = 'medium',
+    loading = false,
+    fullWidth = false,
+    disabled = false,
+    className,
+    type = 'button',
+    ...rest
+  } = props;
+  const iconOnly = 'icon' in props;
+  const content = iconOnly ? (
+    <Icon name={props.icon} />
+  ) : (
+    <>
+      {props.leadingIcon ? <Icon name={props.leadingIcon} /> : null}
+      <span className={styles.label}>{props.children}</span>
+      {props.trailingIcon ? (
+        <Icon
+          name={props.trailingIcon}
+          directionBehavior={
+            props.trailingIcon === 'arrow-forward' || props.trailingIcon === 'chevron-forward'
+              ? 'mirror'
+              : 'fixed'
+          }
+        />
+      ) : null}
+    </>
+  );
+
+  const nativeProps = { ...rest } as ButtonHTMLAttributes<HTMLButtonElement>;
+  delete (nativeProps as Partial<CommonButtonProps>).leadingIcon;
+  delete (nativeProps as Partial<CommonButtonProps>).trailingIcon;
+  delete (nativeProps as Partial<IconOnlyButtonProps>).icon;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={classNames(
+        styles.button,
+        styles[intent],
+        styles[size],
+        iconOnly && styles.iconOnly,
+        fullWidth && styles.fullWidth,
+        loading && styles.loading,
+        className,
+      )}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      data-loading={loading || undefined}
+      {...nativeProps}
+    >
+      {loading ? <Icon name="spinner" className={styles.spinner} /> : null}
+      <span className={loading ? styles.loadingContent : undefined}>{content}</span>
+    </button>
+  );
+});
diff --git a/homepage/src/components/app-shell/BrandLink.tsx b/homepage/src/components/app-shell/BrandLink.tsx
new file mode 100644
index 0000000..ceebd68
--- /dev/null
+++ b/homepage/src/components/app-shell/BrandLink.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import styles from './SiteHeader.module.css';
+
+export function BrandLink({ locale, label }: { locale: Locale; label: string }) {
+  const pathname = usePathname();
+  return (
+    <a
+      className={styles.brand}
+      href={localizedPath('home', locale)}
+      aria-label={label}
+      aria-current={routeIdFromPathname(pathname) === 'home' ? 'page' : undefined}
+    >
+      <Image
+        src="/rentaldrivego.jpeg"
+        alt=""
+        width={36}
+        height={36}
+        className={styles.mark}
+        priority
+      />
+      <span className={styles.brandName}>RentalDriveGo</span>
+    </a>
+  );
+}
diff --git a/homepage/src/components/app-shell/Controls.module.css b/homepage/src/components/app-shell/Controls.module.css
new file mode 100644
index 0000000..c03a3b0
--- /dev/null
+++ b/homepage/src/components/app-shell/Controls.module.css
@@ -0,0 +1,38 @@
+.field {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.label {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  font-weight: 700;
+}
+
+.select {
+  min-block-size: var(--size-touch-min);
+  min-inline-size: 7.25rem;
+  max-inline-size: 100%;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3) var(--space-8);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+
+.select:hover {
+  border-color: var(--interactive-primary);
+}
+
+.compactLabel {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/homepage/src/components/app-shell/DisabledAction.tsx b/homepage/src/components/app-shell/DisabledAction.tsx
new file mode 100644
index 0000000..8650f92
--- /dev/null
+++ b/homepage/src/components/app-shell/DisabledAction.tsx
@@ -0,0 +1,29 @@
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import styles from './SiteHeader.module.css';
+
+interface DisabledActionProps {
+  label: string;
+  reason: string;
+  pendingLabel?: string;
+  conversion?: boolean;
+}
+
+export function DisabledAction({
+  label,
+  reason,
+  pendingLabel,
+  conversion = false,
+}: DisabledActionProps) {
+  return (
+    <span
+      className={conversion ? styles.conversionDisabled : styles.actionDisabled}
+      role="link"
+      aria-disabled="true"
+      aria-label={`${label}. ${reason}`}
+      title={reason}
+    >
+      <span>{label}</span>
+      {pendingLabel ? <StatusBadge>{pendingLabel}</StatusBadge> : null}
+    </span>
+  );
+}
diff --git a/homepage/src/components/app-shell/HeaderNavigation.tsx b/homepage/src/components/app-shell/HeaderNavigation.tsx
new file mode 100644
index 0000000..347851d
--- /dev/null
+++ b/homepage/src/components/app-shell/HeaderNavigation.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { localizedPath, routeIdFromPathname, type Locale } from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import styles from './SiteHeader.module.css';
+
+export type HeaderNavId = 'product' | 'workflow' | 'modules' | 'pricing' | 'faq';
+
+interface HeaderNavigationProps {
+  locale: Locale;
+  label: string;
+  labels: Record<HeaderNavId, string>;
+  onNavigate?: () => void;
+  mobile?: boolean;
+}
+
+const navigationIds: HeaderNavId[] = ['product', 'workflow', 'modules', 'pricing', 'faq'];
+
+export function HeaderNavigation({
+  locale,
+  label,
+  labels,
+  onNavigate,
+  mobile = false,
+}: HeaderNavigationProps) {
+  const pathname = usePathname();
+  const currentRoute = routeIdFromPathname(pathname);
+  const [currentHash, setCurrentHash] = useState('');
+
+  useEffect(() => {
+    const updateHash = () => setCurrentHash(window.location.hash.replace(/^#/, ''));
+    updateHash();
+    window.addEventListener('hashchange', updateHash);
+    return () => window.removeEventListener('hashchange', updateHash);
+  }, []);
+
+  const home = localizedPath('home', locale);
+
+  return (
+    <nav aria-label={label} className={mobile ? styles.drawerNavigation : styles.navigation}>
+      <ul>
+        {navigationIds.map((id) => (
+          <li key={id}>
+            <a
+              href={`${home}#${id}`}
+              aria-current={currentRoute === 'home' && currentHash === id ? 'location' : undefined}
+              onClick={onNavigate}
+            >
+              {labels[id]}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/homepage/src/components/app-shell/LocaleSelector.tsx b/homepage/src/components/app-shell/LocaleSelector.tsx
new file mode 100644
index 0000000..197d2e5
--- /dev/null
+++ b/homepage/src/components/app-shell/LocaleSelector.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { persistLocale } from '@/lib/localization/client';
+import {
+  localeSwitchUrl,
+  locales,
+  routeIdFromPathname,
+  type Locale,
+} from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import styles from './Controls.module.css';
+
+interface LocaleSelectorProps {
+  currentLocale: Locale;
+  label: string;
+  localeNames: Record<Locale, string>;
+  compact?: boolean;
+}
+
+export function LocaleSelector({
+  currentLocale,
+  label,
+  localeNames,
+  compact = false,
+}: LocaleSelectorProps) {
+  const pathname = usePathname();
+  const routeId = routeIdFromPathname(pathname) ?? 'home';
+
+  return (
+    <label className={styles.field}>
+      <span className={compact ? styles.compactLabel : styles.label}>{label}</span>
+      <select
+        className={styles.select}
+        aria-label={label}
+        value={currentLocale}
+        onChange={(event) => {
+          const targetLocale = event.target.value as Locale;
+          persistLocale(targetLocale);
+          window.location.assign(
+            localeSwitchUrl(new URL(window.location.href), targetLocale, routeId),
+          );
+        }}
+      >
+        {locales.map((locale) => (
+          <option key={locale} value={locale}>
+            {localeNames[locale]}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/homepage/src/components/app-shell/LocalizedLoading.tsx b/homepage/src/components/app-shell/LocalizedLoading.tsx
new file mode 100644
index 0000000..5939538
--- /dev/null
+++ b/homepage/src/components/app-shell/LocalizedLoading.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { useParams } from 'next/navigation';
+import { LoadingSkeleton, StateShell } from './StateShell';
+
+export function LocalizedLoading() {
+  const params = useParams<{ locale?: string }>();
+  const messages = getClientShellMessages(params?.locale);
+  return (
+    <StateShell title={messages.states.loadingTitle} body={messages.states.loadingBody} status>
+      <LoadingSkeleton />
+    </StateShell>
+  );
+}
diff --git a/homepage/src/components/app-shell/LocalizedNotFound.tsx b/homepage/src/components/app-shell/LocalizedNotFound.tsx
new file mode 100644
index 0000000..9c74d22
--- /dev/null
+++ b/homepage/src/components/app-shell/LocalizedNotFound.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { getClientShellMessages } from '@/lib/localization/client-messages';
+import { isLocale, localizedPath } from '@/lib/localization/config';
+import { usePathname } from 'next/navigation';
+import { StateAction, StateActions, StateShell } from './StateShell';
+
+export function LocalizedNotFound() {
+  const pathname = usePathname();
+  const localeValue = pathname.split('/').filter(Boolean)[0];
+  const locale = isLocale(localeValue) ? localeValue : 'en';
+  const messages = getClientShellMessages(locale);
+  return (
+    <StateShell title={messages.states.notFoundTitle} body={messages.states.notFoundBody}>
+      <StateActions>
+        <StateAction href={localizedPath('home', locale)}>{messages.states.backHome}</StateAction>
+      </StateActions>
+    </StateShell>
+  );
+}
diff --git a/homepage/src/components/app-shell/MobileNavigation.tsx b/homepage/src/components/app-shell/MobileNavigation.tsx
new file mode 100644
index 0000000..eea8f58
--- /dev/null
+++ b/homepage/src/components/app-shell/MobileNavigation.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import { ActionLink } from '@/components/actions/ActionLink';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import type { ShellMessages } from '@/lib/localization/messages';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ThemePreference } from '@/lib/theme/config';
+import { useEffect, useRef, useState } from 'react';
+import { HeaderNavigation } from './HeaderNavigation';
+import { LocaleSelector } from './LocaleSelector';
+import styles from './SiteHeader.module.css';
+import { ThemeSelector } from './ThemeSelector';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface MobileNavigationProps {
+  locale: Locale;
+  messages: ShellMessages;
+  themePreference: ThemePreference;
+  demoEnabled: boolean;
+}
+
+export function MobileNavigation({
+  locale,
+  messages,
+  themePreference,
+  demoEnabled,
+}: MobileNavigationProps) {
+  const [open, setOpen] = useState(false);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (open && !dialog.open) {
+      dialog.showModal();
+      document.body.dataset.navigationOpen = 'true';
+      closeRef.current?.focus();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+
+    return () => {
+      delete document.body.dataset.navigationOpen;
+    };
+  }, [open]);
+
+  const close = () => {
+    dialogRef.current?.close();
+    setOpen(false);
+    delete document.body.dataset.navigationOpen;
+    window.requestAnimationFrame(() => triggerRef.current?.focus());
+  };
+
+  return (
+    <div className={styles.mobileNavigation}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={styles.menuButton}
+        aria-label={messages.header.menuOpen}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+      >
+        <span aria-hidden="true" className={styles.menuIcon}>
+          <span />
+          <span />
+          <span />
+        </span>
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        className={styles.drawer}
+        aria-label={messages.header.navigationLabel}
+        onClose={() => {
+          setOpen(false);
+          delete document.body.dataset.navigationOpen;
+        }}
+        onCancel={(event) => {
+          event.preventDefault();
+          close();
+        }}
+      >
+        <div className={styles.drawerPanel}>
+          <div className={styles.drawerHeader}>
+            <strong>RentalDriveGo</strong>
+            <button
+              ref={closeRef}
+              type="button"
+              className={styles.closeButton}
+              aria-label={messages.header.menuClose}
+              onClick={close}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <HeaderNavigation
+            locale={locale}
+            label={messages.header.navigationLabel}
+            labels={messages.header.nav}
+            mobile
+            onNavigate={close}
+          />
+
+          <div
+            className={styles.drawerControls}
+            role="group"
+            aria-label={messages.header.controlsLabel}
+          >
+            <LocaleSelector
+              currentLocale={locale}
+              label={messages.controls.language}
+              localeNames={messages.controls.localeNames}
+            />
+            <ThemeSelector
+              initialPreference={themePreference}
+              label={messages.controls.theme}
+              statusTemplate={messages.controls.themeStatus}
+              optionLabels={messages.controls.themes}
+            />
+          </div>
+
+          <div className={styles.drawerActions}>
+            <ActionLink href={signInUrl(locale)} variant="button-primary">
+              {messages.header.login}
+            </ActionLink>
+            <DemoTrigger
+              label={messages.header.demo}
+              source="mobile-header"
+              fullWidth
+              disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+            />
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}
diff --git a/homepage/src/components/app-shell/SiteFooter.module.css b/homepage/src/components/app-shell/SiteFooter.module.css
new file mode 100644
index 0000000..1ebad0a
--- /dev/null
+++ b/homepage/src/components/app-shell/SiteFooter.module.css
@@ -0,0 +1,118 @@
+.footer {
+  border-block-start: 1px solid var(--border-standard);
+  background: var(--surface-primary);
+}
+
+.inner {
+  display: grid;
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-block: var(--space-12) var(--space-6);
+  padding-inline: var(--layout-gutter);
+  gap: var(--space-10);
+}
+
+.brandColumn {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  max-inline-size: 32rem;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 800;
+}
+
+.mark {
+  display: inline-grid;
+  min-inline-size: var(--size-touch-min);
+  min-block-size: var(--size-touch-min);
+  padding-inline: var(--space-2);
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-size: var(--type-caption-size);
+}
+
+.tagline,
+.releaseNotice {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+  gap: var(--space-8);
+}
+
+.group h2 {
+  margin-block-end: var(--space-3);
+  font-size: var(--type-label-size);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+}
+
+html[dir='rtl'] .group h2 {
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.group ul {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-2);
+  list-style: none;
+}
+
+.group a,
+.pendingItem {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.group a:hover {
+  color: var(--interactive-primary);
+  text-decoration: underline;
+}
+
+.pendingItem {
+  flex-wrap: wrap;
+  opacity: var(--opacity-disabled);
+}
+
+.legalLink {
+  flex-wrap: wrap;
+}
+
+.bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block-start: var(--space-6);
+  border-block-start: 1px solid var(--border-standard);
+  color: var(--text-subdued);
+  font-size: var(--type-caption-size);
+}
+
+@media (min-width: 768px) {
+  .inner {
+    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 2fr);
+  }
+
+  .bottom {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/homepage/src/components/app-shell/SiteFooter.tsx b/homepage/src/components/app-shell/SiteFooter.tsx
new file mode 100644
index 0000000..213b7f8
--- /dev/null
+++ b/homepage/src/components/app-shell/SiteFooter.tsx
@@ -0,0 +1,161 @@
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ShellMessages } from '@/lib/localization/messages';
+import styles from './SiteFooter.module.css';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface SiteFooterProps {
+  locale: Locale;
+  messages: ShellMessages;
+  demoEnabled: boolean;
+}
+
+function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
+  return <a href={`${localizedPath('home', locale)}#${hash}`}>{children}</a>;
+}
+
+function PendingRouteLink({
+  locale,
+  routeId,
+  label,
+  pending,
+}: {
+  locale: Locale;
+  routeId: 'sign-in' | 'forgot-password' | 'privacy' | 'terms' | 'accessibility';
+  label: string;
+  pending: string;
+}) {
+  return (
+    <a className={styles.legalLink} href={localizedPath(routeId, locale)}>
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </a>
+  );
+}
+
+function PendingItem({ label, pending }: { label: string; pending: string }) {
+  return (
+    <span className={styles.pendingItem} aria-disabled="true">
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </span>
+  );
+}
+
+export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
+  const footer = messages.footer;
+  const year = new Date().getUTCFullYear();
+
+  return (
+    <footer className={styles.footer} aria-label={footer.landmarkLabel}>
+      <div className={styles.inner}>
+        <div className={styles.brandColumn}>
+          <div className={styles.brand}>
+            <span aria-hidden="true" className={styles.mark}>
+              RDG
+            </span>
+            <span>RentalDriveGo</span>
+          </div>
+          <p className={styles.tagline}>{footer.tagline}</p>
+          <p className={styles.releaseNotice}>{footer.releaseNotice}</p>
+        </div>
+
+        <div className={styles.groups}>
+          <section className={styles.group} aria-labelledby="footer-product">
+            <h2 id="footer-product">{footer.groups.product}</h2>
+            <ul>
+              <li>
+                <HashLink locale={locale} hash="workflow">
+                  {footer.links.workflow}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="modules">
+                  {footer.links.modules}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="pricing">
+                  {footer.links.pricing}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="faq">
+                  {footer.links.faq}
+                </HashLink>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-company">
+            <h2 id="footer-company">{footer.groups.company}</h2>
+            <ul>
+              <li>
+                <PendingItem label={footer.links.contact} pending={footer.pending} />
+              </li>
+              <li>
+                <DemoTrigger
+                  label={footer.links.demo}
+                  source="footer"
+                  size="small"
+                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+                />
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-account">
+            <h2 id="footer-account">{footer.groups.account}</h2>
+            <ul>
+              <li>
+                <a href={signInUrl(locale)}>
+                  {footer.links.login}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-legal">
+            <h2 id="footer-legal">{footer.groups.legal}</h2>
+            <ul>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="privacy"
+                  label={footer.links.privacy}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="terms"
+                  label={footer.links.terms}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="accessibility"
+                  label={footer.links.accessibility}
+                  pending={footer.pending}
+                />
+              </li>
+            </ul>
+          </section>
+        </div>
+
+        <div className={styles.bottom}>
+          <span>
+            {footer.copyrightPrefix} {year} RentalDriveGo
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/homepage/src/components/app-shell/SiteHeader.module.css b/homepage/src/components/app-shell/SiteHeader.module.css
new file mode 100644
index 0000000..9051b96
--- /dev/null
+++ b/homepage/src/components/app-shell/SiteHeader.module.css
@@ -0,0 +1,287 @@
+.header {
+  position: sticky;
+  z-index: var(--layer-sticky);
+  inset-block-start: 0;
+  border-block-end: 1px solid var(--border-standard);
+  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
+  box-shadow: var(--shadow-subtle);
+  backdrop-filter: blur(var(--space-3));
+}
+
+.inner {
+  display: grid;
+  min-block-size: var(--header-min-block-size);
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-inline: var(--layout-gutter);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-5);
+}
+
+.brand {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 800;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.mark {
+  inline-size: 36px;
+  block-size: 36px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+
+.navigation ul,
+.drawerNavigation ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navigation ul {
+  justify-content: center;
+  gap: var(--space-1);
+}
+
+.navigation a,
+.drawerNavigation a {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.navigation a {
+  padding-inline: var(--space-3);
+}
+
+.navigation a:hover,
+.navigation a[aria-current],
+.drawerNavigation a:hover,
+.drawerNavigation a[aria-current] {
+  background: var(--surface-muted);
+  color: var(--interactive-primary);
+}
+
+.desktopControls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.actionDisabled,
+.conversionDisabled {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  background: var(--control-disabled-surface);
+  color: var(--control-disabled-text);
+  font-weight: 700;
+  opacity: var(--opacity-disabled);
+  white-space: nowrap;
+}
+
+.actionLink {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  color: var(--text-primary);
+  font-weight: 700;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.actionLink:hover {
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  border-color: var(--interactive-primary);
+}
+
+.conversionDisabled {
+  border-color: var(--interactive-conversion);
+}
+
+.mobileActions,
+.mobileNavigation {
+  display: none;
+}
+
+.menuButton,
+.closeButton {
+  display: inline-grid;
+  min-inline-size: var(--size-touch-min);
+  min-block-size: var(--size-touch-min);
+  place-items: center;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+}
+
+.menuIcon {
+  display: grid;
+  inline-size: var(--space-5);
+  gap: var(--space-1);
+}
+
+.menuIcon span {
+  display: block;
+  block-size: 2px;
+  border-radius: var(--radius-pill);
+  background: currentColor;
+}
+
+.drawer {
+  inline-size: min(88vw, 384px);
+  max-inline-size: none;
+  block-size: 100dvh;
+  max-block-size: none;
+  margin-block: 0;
+  margin-inline: 0 auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+}
+
+html[dir='rtl'] .drawer {
+  margin-inline: auto 0;
+}
+
+.drawer::backdrop {
+  background: var(--overlay-scrim);
+}
+
+.drawerPanel {
+  display: flex;
+  block-size: 100%;
+  flex-direction: column;
+  gap: var(--space-6);
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+
+.drawerHeader {
+  display: flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.closeButton {
+  font-size: var(--type-heading-3-size);
+  line-height: 1;
+}
+
+.drawerNavigation ul {
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.drawerNavigation a {
+  inline-size: 100%;
+  padding-inline: var(--space-3);
+}
+
+.drawerControls,
+.drawerActions {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.drawerActions {
+  margin-block-start: auto;
+}
+
+@media (min-width: 1120px) and (max-width: 1279px) {
+  .brandName {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 1119px) {
+  .inner {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .desktopNavigation,
+  .desktopControls {
+    display: none;
+  }
+
+  .mobileActions,
+  .mobileNavigation {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}
+
+@media (max-width: 559px) {
+  .brandName {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .mobileActions > .conversionDisabled {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .header {
+    backdrop-filter: none;
+  }
+
+  .mark,
+  .actionDisabled,
+  .conversionDisabled,
+  .menuButton,
+  .closeButton {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (max-width: 559px) {
+  .mobileDemoTrigger {
+    display: none;
+  }
+}
diff --git a/homepage/src/components/app-shell/SiteHeader.tsx b/homepage/src/components/app-shell/SiteHeader.tsx
new file mode 100644
index 0000000..2d65917
--- /dev/null
+++ b/homepage/src/components/app-shell/SiteHeader.tsx
@@ -0,0 +1,85 @@
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ShellMessages } from '@/lib/localization/messages';
+import type { ThemePreference } from '@/lib/theme/config';
+import { ActionLink } from '@/components/actions/ActionLink';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { BrandLink } from './BrandLink';
+import { HeaderNavigation } from './HeaderNavigation';
+import { LocaleSelector } from './LocaleSelector';
+import { MobileNavigation } from './MobileNavigation';
+import styles from './SiteHeader.module.css';
+import { ThemeSelector } from './ThemeSelector';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface SiteHeaderProps {
+  locale: Locale;
+  messages: ShellMessages;
+  themePreference: ThemePreference;
+  demoEnabled: boolean;
+}
+
+export function SiteHeader({ locale, messages, themePreference, demoEnabled }: SiteHeaderProps) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <BrandLink locale={locale} label={messages.brandLabel} />
+
+        <div className={styles.desktopNavigation}>
+          <HeaderNavigation
+            locale={locale}
+            label={messages.header.navigationLabel}
+            labels={messages.header.nav}
+          />
+        </div>
+
+        <div
+          className={styles.desktopControls}
+          role="group"
+          aria-label={messages.header.controlsLabel}
+        >
+          <LocaleSelector
+            currentLocale={locale}
+            label={messages.controls.language}
+            localeNames={messages.controls.localeNames}
+            compact
+          />
+          <ThemeSelector
+            initialPreference={themePreference}
+            label={messages.controls.theme}
+            statusTemplate={messages.controls.themeStatus}
+            optionLabels={messages.controls.themes}
+            compact
+          />
+          <ActionLink href={signInUrl(locale)} variant="button-primary">
+            {messages.header.login}
+          </ActionLink>
+          <DemoTrigger
+            label={messages.header.demo}
+            source="header"
+            size="small"
+            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+          />
+        </div>
+
+        <div className={styles.mobileActions}>
+          <DemoTrigger
+            label={messages.header.demo}
+            source="mobile-header"
+            size="small"
+            className={styles.mobileDemoTrigger}
+            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+          />
+          <MobileNavigation
+            locale={locale}
+            messages={messages}
+            themePreference={themePreference}
+            demoEnabled={demoEnabled}
+          />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/homepage/src/components/app-shell/StateShell.module.css b/homepage/src/components/app-shell/StateShell.module.css
new file mode 100644
index 0000000..e9cc77a
--- /dev/null
+++ b/homepage/src/components/app-shell/StateShell.module.css
@@ -0,0 +1,104 @@
+.main {
+  display: grid;
+  min-block-size: calc(100dvh - var(--header-min-block-size));
+  place-items: center;
+  padding-block: var(--section-space);
+  padding-inline: var(--layout-gutter);
+}
+
+.panel {
+  display: grid;
+  inline-size: min(100%, var(--container-reading));
+  gap: var(--space-5);
+  padding: clamp(var(--space-6), 6vw, var(--space-12));
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-card);
+  text-align: start;
+}
+
+.panel h1 {
+  margin: 0;
+  font-size: var(--type-heading-1-size);
+}
+
+.panel p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-body-large-size);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.action {
+  display: inline-flex;
+  min-block-size: var(--size-touch-min);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--interactive-primary);
+  border-radius: var(--radius-sm);
+  padding-block: var(--space-2);
+  padding-inline: var(--space-4);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.action:hover {
+  background: var(--interactive-primary-hover);
+  color: var(--text-inverse);
+}
+
+.skeleton {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.skeleton span {
+  display: block;
+  block-size: var(--space-4);
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base),
+    var(--skeleton-highlight),
+    var(--skeleton-base)
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shift 1.4s var(--easing-standard) infinite;
+}
+
+.skeleton span:first-child {
+  inline-size: 64%;
+}
+
+.skeleton span:last-child {
+  inline-size: 82%;
+}
+
+@keyframes skeleton-shift {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton span {
+    animation: none;
+  }
+}
+
+.content {
+  display: grid;
+  gap: var(--space-4);
+}
diff --git a/homepage/src/components/app-shell/StateShell.tsx b/homepage/src/components/app-shell/StateShell.tsx
new file mode 100644
index 0000000..c542313
--- /dev/null
+++ b/homepage/src/components/app-shell/StateShell.tsx
@@ -0,0 +1,55 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import styles from './StateShell.module.css';
+
+interface StateShellProps {
+  title: string;
+  body: string;
+  children?: ReactNode;
+  status?: boolean;
+}
+
+export function StateShell({ title, body, children, status = false }: StateShellProps) {
+  return (
+    <main id="main-content" className={styles.main} tabIndex={-1}>
+      <section
+        className={styles.panel}
+        role={status ? 'status' : undefined}
+        aria-live={status ? 'polite' : undefined}
+      >
+        <h1>{title}</h1>
+        <p>{body}</p>
+        {children ? <div className={styles.content}>{children}</div> : null}
+      </section>
+    </main>
+  );
+}
+
+export function StateActions({ children }: { children: ReactNode }) {
+  return <div className={styles.actions}>{children}</div>;
+}
+
+export function StateAction({ children, ...props }: ComponentPropsWithoutRef<'a'>) {
+  return (
+    <a className={styles.action} {...props}>
+      {children}
+    </a>
+  );
+}
+
+export function StateButton({ children, ...props }: ComponentPropsWithoutRef<'button'>) {
+  return (
+    <button className={styles.action} type="button" {...props}>
+      {children}
+    </button>
+  );
+}
+
+export function LoadingSkeleton() {
+  return (
+    <div className={styles.skeleton} aria-hidden="true">
+      <span />
+      <span />
+      <span />
+    </div>
+  );
+}
diff --git a/homepage/src/components/app-shell/ThemeController.tsx b/homepage/src/components/app-shell/ThemeController.tsx
new file mode 100644
index 0000000..f801100
--- /dev/null
+++ b/homepage/src/components/app-shell/ThemeController.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { applyTheme, currentThemePreference } from '@/lib/theme/client';
+import { themeStorageKey } from '@/lib/theme/config';
+import { useEffect } from 'react';
+
+export function ThemeController() {
+  useEffect(() => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleSystemChange = () => {
+      if (currentThemePreference() === 'system') applyTheme('system');
+    };
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === themeStorageKey && event.newValue) {
+        const preference = event.newValue;
+        if (preference === 'light' || preference === 'dark' || preference === 'system') {
+          applyTheme(preference);
+        }
+      }
+    };
+
+    media.addEventListener('change', handleSystemChange);
+    window.addEventListener('storage', handleStorage);
+    return () => {
+      media.removeEventListener('change', handleSystemChange);
+      window.removeEventListener('storage', handleStorage);
+    };
+  }, []);
+
+  return null;
+}
diff --git a/homepage/src/components/app-shell/ThemeSelector.tsx b/homepage/src/components/app-shell/ThemeSelector.tsx
new file mode 100644
index 0000000..904dfdb
--- /dev/null
+++ b/homepage/src/components/app-shell/ThemeSelector.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { persistTheme, themePreferenceEvent } from '@/lib/theme/client';
+import { themePreferences, themeStorageKey, type ThemePreference } from '@/lib/theme/config';
+import { useEffect, useId, useState } from 'react';
+import styles from './Controls.module.css';
+
+interface ThemeSelectorProps {
+  initialPreference: ThemePreference;
+  label: string;
+  statusTemplate: string;
+  optionLabels: Record<ThemePreference, string>;
+  compact?: boolean;
+}
+
+export function ThemeSelector({
+  initialPreference,
+  label,
+  statusTemplate,
+  optionLabels,
+  compact = false,
+}: ThemeSelectorProps) {
+  const [preference, setPreference] = useState<ThemePreference>(initialPreference);
+  const statusId = useId();
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (
+        event.key === themeStorageKey &&
+        (event.newValue === 'light' || event.newValue === 'dark' || event.newValue === 'system')
+      ) {
+        setPreference(event.newValue);
+      }
+    };
+    const handlePreference = (event: Event) => {
+      const preferenceEvent = event as CustomEvent<ThemePreference>;
+      setPreference(preferenceEvent.detail);
+    };
+    window.addEventListener('storage', handleStorage);
+    window.addEventListener(themePreferenceEvent, handlePreference);
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+      window.removeEventListener(themePreferenceEvent, handlePreference);
+    };
+  }, []);
+
+  const status = statusTemplate.replace('{value}', optionLabels[preference]);
+
+  return (
+    <label className={styles.field}>
+      <span className={compact ? styles.compactLabel : styles.label}>{label}</span>
+      <select
+        className={styles.select}
+        aria-label={label}
+        aria-describedby={statusId}
+        value={preference}
+        onChange={(event) => {
+          const nextPreference = event.target.value as ThemePreference;
+          setPreference(nextPreference);
+          persistTheme(nextPreference);
+        }}
+      >
+        {themePreferences.map((option) => (
+          <option key={option} value={option}>
+            {optionLabels[option]}
+          </option>
+        ))}
+      </select>
+      <span id={statusId} className="visually-hidden" aria-live="polite">
+        {status}
+      </span>
+    </label>
+  );
+}
diff --git a/homepage/src/components/auth/AuthShell.tsx b/homepage/src/components/auth/AuthShell.tsx
new file mode 100644
index 0000000..c46f969
--- /dev/null
+++ b/homepage/src/components/auth/AuthShell.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import Image from 'next/image'
+import type { ReactNode } from 'react'
+
+interface AuthShellProps {
+  locale: Locale
+  title: string
+  subtitle?: string
+  children: ReactNode
+}
+
+export function AuthShell({ locale, title, subtitle, children }: AuthShellProps) {
+  return (
+    <main
+      id="main-content"
+      tabIndex={-1}
+      style={{
+        display: 'flex',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem 1rem',
+        minHeight: 'calc(100vh - 80px)',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '28rem' }}>
+        <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
+          <a href={localizedPath('home', locale)}>
+            <Image
+              src="/rentaldrivego.jpeg"
+              alt="RentalDriveGo"
+              width={96}
+              height={96}
+              priority
+              style={{
+                borderRadius: '1.5rem',
+                border: '1px solid var(--color-border)',
+                background: 'var(--color-surface)',
+                padding: '0.375rem',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+              }}
+            />
+          </a>
+          <p
+            style={{
+              marginTop: '1rem',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              textTransform: 'uppercase',
+              letterSpacing: '0.28em',
+              color: 'var(--color-accent)',
+            }}
+          >
+            RentalDriveGo
+          </p>
+          <h1
+            style={{
+              marginTop: '0.5rem',
+              fontSize: '1.75rem',
+              fontWeight: 800,
+              letterSpacing: '-0.03em',
+              color: 'var(--color-heading)',
+            }}
+          >
+            {title}
+          </h1>
+          {subtitle ? (
+            <p
+              style={{
+                marginTop: '0.5rem',
+                fontSize: '0.875rem',
+                color: 'var(--color-text-secondary)',
+              }}
+            >
+              {subtitle}
+            </p>
+          ) : null}
+        </div>
+
+        <section
+          style={{
+            borderRadius: '2rem',
+            border: '1px solid var(--color-border)',
+            background: 'var(--color-surface)',
+            padding: '2rem',
+            boxShadow: '0 30px 80px rgba(28,25,23,0.06)',
+          }}
+        >
+          {children}
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/homepage/src/components/auth/ForgotPasswordForm.tsx b/homepage/src/components/auth/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..e61ab51
--- /dev/null
+++ b/homepage/src/components/auth/ForgotPasswordForm.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+import { Button } from '@/components/actions/Button'
+import { TextInput } from '@/components/forms/TextInput'
+import { FormField } from '@/components/forms/FormField'
+import { AuthShell } from '@/components/auth/AuthShell'
+import { API_BASE } from '@/lib/api'
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import { useState } from 'react'
+
+interface Dict {
+  title: string
+  subtitle: string
+  email: string
+  emailPlaceholder: string
+  submit: string
+  submitting: string
+  backToLogin: string
+  successTitle: string
+  successBody: string
+  error: string
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Forgot your password?',
+    subtitle: "Enter your work email and we'll send you a reset link.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Send reset link',
+    submitting: 'Sending…',
+    backToLogin: 'Back to sign in',
+    successTitle: 'Check your email',
+    successBody: 'If that email is registered, a reset link has been sent. It expires in 60 minutes.',
+    error: 'Something went wrong. Please try again.',
+  },
+  fr: {
+    title: 'Mot de passe oublié ?',
+    subtitle: "Entrez votre email professionnel et nous vous enverrons un lien de réinitialisation.",
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'Envoyer le lien',
+    submitting: 'Envoi…',
+    backToLogin: 'Retour à la connexion',
+    successTitle: 'Vérifiez votre email',
+    successBody: "Si cet email est enregistré, un lien de réinitialisation a été envoyé. Il expire dans 60 minutes.",
+    error: 'Une erreur est survenue. Veuillez réessayer.',
+  },
+  ar: {
+    title: 'نسيت كلمة المرور؟',
+    subtitle: 'أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.',
+    email: 'البريد الإلكتروني',
+    emailPlaceholder: 'owner@company.com',
+    submit: 'إرسال رابط إعادة التعيين',
+    submitting: 'جارٍ الإرسال…',
+    backToLogin: 'العودة إلى تسجيل الدخول',
+    successTitle: 'تحقق من بريدك الإلكتروني',
+    successBody: 'إذا كان البريد الإلكتروني مسجلاً، فقد تم إرسال رابط إعادة التعيين. تنتهي صلاحيته خلال 60 دقيقة.',
+    error: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+  },
+}
+
+export function ForgotPasswordForm({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      const [empRes, adminRes] = await Promise.all([
+        fetch(`${API_BASE}/auth/employee/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+        fetch(`${API_BASE}/admin/auth/forgot-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        }),
+      ])
+      if (!empRes.ok && !adminRes.ok) throw new Error()
+      setSent(true)
+    } catch {
+      setError(dict.error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const signInHref = localizedPath('sign-in', locale)
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      {sent ? (
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              margin: '0 auto 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '3.5rem',
+              height: '3.5rem',
+              borderRadius: '50%',
+              background: 'var(--color-success-bg, #ecfdf5)',
+            }}
+          >
+            <svg
+              style={{ width: '1.75rem', height: '1.75rem', color: 'var(--color-success-text, #059669)' }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+            {dict.successTitle}
+          </h2>
+          <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+            {dict.successBody}
+          </p>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          {error ? (
+            <div
+              style={{
+                borderRadius: '1.5rem',
+                border: '1px solid var(--color-error-border, #fecaca)',
+                background: 'var(--color-error-bg, #fef2f2)',
+                padding: '0.75rem 1rem',
+                fontSize: '0.875rem',
+                color: 'var(--color-error-text, #b91c1c)',
+              }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <FormField id="forgot-email" label={dict.email} required>
+            <TextInput
+              id="forgot-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={dict.emailPlaceholder}
+              autoComplete="email"
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.submitting : dict.submit}
+          </Button>
+        </form>
+      )}
+
+      <div
+        style={{
+          marginTop: '1.5rem',
+          borderTop: '1px solid var(--color-border)',
+          paddingTop: '1.5rem',
+          textAlign: 'center',
+          fontSize: '0.875rem',
+        }}
+      >
+        <a
+          href={signInHref}
+          style={{
+            fontWeight: 600,
+            color: 'var(--color-heading)',
+            textDecoration: 'underline',
+            textUnderlineOffset: '4px',
+          }}
+        >
+          {dict.backToLogin}
+        </a>
+      </div>
+    </AuthShell>
+  )
+}
diff --git a/homepage/src/components/auth/ResetPasswordForm.tsx b/homepage/src/components/auth/ResetPasswordForm.tsx
new file mode 100644
index 0000000..4104d31
--- /dev/null
+++ b/homepage/src/components/auth/ResetPasswordForm.tsx
@@ -0,0 +1,293 @@
+'use client'
+
+import { Button } from '@/components/actions/Button'
+import { FormField } from '@/components/forms/FormField'
+import { AuthShell } from '@/components/auth/AuthShell'
+import { API_BASE } from '@/lib/api'
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import { useSearchParams } from 'next/navigation'
+import { Suspense, useState } from 'react'
+
+interface Dict {
+  title: string
+  subtitle: string
+  newPassword: string
+  confirmPassword: string
+  submit: string
+  submitting: string
+  backToLogin: string
+  successTitle: string
+  successBody: string
+  signIn: string
+  errorMismatch: string
+  errorShort: string
+  errorInvalidToken: string
+  errorGeneric: string
+  noToken: string
+  requestNew: string
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Set new password',
+    subtitle: 'Choose a strong password for your account.',
+    newPassword: 'New password',
+    confirmPassword: 'Confirm password',
+    submit: 'Reset password',
+    submitting: 'Resetting…',
+    backToLogin: 'Back to sign in',
+    successTitle: 'Password updated',
+    successBody: 'Your password has been reset. You can now sign in with your new password.',
+    signIn: 'Sign in',
+    errorMismatch: 'Passwords do not match.',
+    errorShort: 'Password must be at least 8 characters.',
+    errorInvalidToken: 'This reset link is invalid or has expired. Please request a new one.',
+    errorGeneric: 'Something went wrong. Please try again.',
+    noToken: 'No reset token found. Please request a new password reset.',
+    requestNew: 'Request new reset link',
+  },
+  fr: {
+    title: 'Nouveau mot de passe',
+    subtitle: 'Choisissez un mot de passe fort pour votre compte.',
+    newPassword: 'Nouveau mot de passe',
+    confirmPassword: 'Confirmer le mot de passe',
+    submit: 'Réinitialiser',
+    submitting: 'Traitement…',
+    backToLogin: 'Retour à la connexion',
+    successTitle: 'Mot de passe mis à jour',
+    successBody: 'Votre mot de passe a été réinitialisé. Vous pouvez maintenant vous connecter.',
+    signIn: 'Se connecter',
+    errorMismatch: 'Les mots de passe ne correspondent pas.',
+    errorShort: 'Le mot de passe doit contenir au moins 8 caractères.',
+    errorInvalidToken: 'Ce lien est invalide ou a expiré. Veuillez en demander un nouveau.',
+    errorGeneric: 'Une erreur est survenue. Veuillez réessayer.',
+    noToken: 'Aucun jeton de réinitialisation trouvé. Veuillez demander un nouveau lien.',
+    requestNew: 'Demander un nouveau lien',
+  },
+  ar: {
+    title: 'تعيين كلمة مرور جديدة',
+    subtitle: 'اختر كلمة مرور قوية لحسابك.',
+    newPassword: 'كلمة المرور الجديدة',
+    confirmPassword: 'تأكيد كلمة المرور',
+    submit: 'إعادة تعيين',
+    submitting: 'جارٍ المعالجة…',
+    backToLogin: 'العودة إلى تسجيل الدخول',
+    successTitle: 'تم تحديث كلمة المرور',
+    successBody: 'تم إعادة تعيين كلمة المرور. يمكنك الآن تسجيل الدخول.',
+    signIn: 'تسجيل الدخول',
+    errorMismatch: 'كلمتا المرور غير متطابقتين.',
+    errorShort: 'يجب أن تتكون كلمة المرور من 8 أحرف على الأقل.',
+    errorInvalidToken: 'رابط إعادة التعيين غير صالح أو منتهي الصلاحية.',
+    errorGeneric: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+    noToken: 'لم يتم العثور على رمز إعادة التعيين. يرجى طلب رابط جديد.',
+    requestNew: 'طلب رابط جديد',
+  },
+}
+
+function ResetPasswordContent({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [done, setDone] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (password.length < 8) { setError(dict.errorShort); return }
+    if (password !== confirm) { setError(dict.errorMismatch); return }
+    setLoading(true)
+    setError(null)
+    try {
+      // Try employee endpoint first, fall back to admin
+      let res = await fetch(`${API_BASE}/auth/employee/reset-password`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      })
+
+      if (!res.ok) {
+        res = await fetch(`${API_BASE}/admin/auth/reset-password`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, password }),
+        })
+      }
+
+      const json = await res.json()
+      if (!res.ok) {
+        if (json?.error === 'invalid_token') throw new Error(dict.errorInvalidToken)
+        throw new Error(dict.errorGeneric)
+      }
+      setDone(true)
+    } catch (err: any) {
+      setError(err.message ?? dict.errorGeneric)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const signInHref = localizedPath('sign-in', locale)
+  const forgotHref = localizedPath('forgot-password', locale)
+
+  if (!token) {
+    return (
+      <AuthShell locale={locale} title={dict.title}>
+        <p style={{ textAlign: 'center', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+          {dict.noToken}
+        </p>
+        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
+          <a href={forgotHref}>
+            <Button intent="primary">{dict.requestNew}</Button>
+          </a>
+        </div>
+      </AuthShell>
+    )
+  }
+
+  if (done) {
+    return (
+      <AuthShell locale={locale} title={dict.title}>
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              margin: '0 auto 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '3.5rem',
+              height: '3.5rem',
+              borderRadius: '50%',
+              background: 'var(--color-success-bg, #ecfdf5)',
+            }}
+          >
+            <svg
+              style={{ width: '1.75rem', height: '1.75rem', color: 'var(--color-success-text, #059669)' }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-heading)' }}>
+            {dict.successTitle}
+          </h2>
+          <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+            {dict.successBody}
+          </p>
+          <div style={{ marginTop: '1rem' }}>
+            <a href={signInHref}>
+              <Button intent="primary" fullWidth>{dict.signIn}</Button>
+            </a>
+          </div>
+        </div>
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+        {error ? (
+          <div
+            style={{
+              borderRadius: '1.5rem',
+              border: '1px solid var(--color-error-border, #fecaca)',
+              background: 'var(--color-error-bg, #fef2f2)',
+              padding: '0.75rem 1rem',
+              fontSize: '0.875rem',
+              color: 'var(--color-error-text, #b91c1c)',
+            }}
+          >
+            {error}
+          </div>
+        ) : null}
+
+        <FormField id="reset-password" label={dict.newPassword} required>
+            <input
+              id="reset-password"
+              type="password"
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              autoComplete="new-password"
+              style={{
+                width: '100%',
+                minHeight: '2.875rem',
+                padding: 'var(--space-3) var(--space-4)',
+                border: '1px solid var(--border-strong)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--surface-primary)',
+                color: 'var(--text-primary)',
+                fontSize: '0.875rem',
+              }}
+            />
+          </FormField>
+
+          <FormField id="reset-confirm" label={dict.confirmPassword} required>
+            <input
+              id="reset-confirm"
+              type="password"
+              required
+              minLength={8}
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              placeholder="••••••••"
+              autoComplete="new-password"
+              style={{
+                width: '100%',
+                minHeight: '2.875rem',
+                padding: 'var(--space-3) var(--space-4)',
+                border: '1px solid var(--border-strong)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--surface-primary)',
+                color: 'var(--text-primary)',
+                fontSize: '0.875rem',
+              }}
+            />
+          </FormField>
+
+        <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+          {loading ? dict.submitting : dict.submit}
+        </Button>
+      </form>
+
+      <div
+        style={{
+          marginTop: '1.5rem',
+          borderTop: '1px solid var(--color-border)',
+          paddingTop: '1.5rem',
+          textAlign: 'center',
+          fontSize: '0.875rem',
+        }}
+      >
+        <a
+          href={signInHref}
+          style={{
+            fontWeight: 600,
+            color: 'var(--color-heading)',
+            textDecoration: 'underline',
+            textUnderlineOffset: '4px',
+          }}
+        >
+          {dict.backToLogin}
+        </a>
+      </div>
+    </AuthShell>
+  )
+}
+
+export function ResetPasswordForm({ locale }: { locale: Locale }) {
+  return (
+    <Suspense>
+      <ResetPasswordContent locale={locale} />
+    </Suspense>
+  )
+}
diff --git a/homepage/src/components/auth/SignInForm.tsx b/homepage/src/components/auth/SignInForm.tsx
new file mode 100644
index 0000000..2c7db3c
--- /dev/null
+++ b/homepage/src/components/auth/SignInForm.tsx
@@ -0,0 +1,364 @@
+'use client'
+
+import { Button } from '@/components/actions/Button'
+import { TextInput } from '@/components/forms/TextInput'
+import { FormField } from '@/components/forms/FormField'
+import { AuthShell } from '@/components/auth/AuthShell'
+import { API_BASE, EMPLOYEE_PROFILE_KEY } from '@/lib/api'
+import { localizedPath, type Locale } from '@/lib/localization/config'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+interface Dict {
+  title: string
+  subtitle: string
+  email: string
+  emailPlaceholder: string
+  password: string
+  signIn: string
+  signingIn: string
+  verify: string
+  verifying: string
+  authCode: string
+  enterCode: string
+  totpPlaceholder: string
+  back: string
+  forgotPassword: string
+  invalidCredentials: string
+  passwordNotSet: string
+  tooManyRequests: string
+  emailNotVerified: string
+  unexpectedError: string
+}
+
+const dicts: Record<string, Dict> = {
+  en: {
+    title: 'Sign in',
+    subtitle: 'Enter your credentials to access your account.',
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    password: 'Password',
+    signIn: 'Sign in',
+    signingIn: 'Signing in…',
+    verify: 'Verify code',
+    verifying: 'Verifying…',
+    authCode: 'Authentication code',
+    enterCode: 'Enter the 6-digit code from your authenticator app.',
+    totpPlaceholder: '000000 or XXXX-XXXX-XXXX',
+    back: 'Back to credentials',
+    forgotPassword: 'Forgot your password?',
+    invalidCredentials: 'Invalid email or password.',
+    passwordNotSet: 'No password set yet. Check your invitation email or use "Forgot your password?"',
+    tooManyRequests: 'Too many attempts. Please try again later.',
+    emailNotVerified: 'Please verify your email first. Check your inbox for the verification link.',
+    unexpectedError: 'Something went wrong. Please try again.',
+  },
+  fr: {
+    title: 'Connexion',
+    subtitle: 'Saisissez vos identifiants pour accéder à votre compte.',
+    email: 'Email',
+    emailPlaceholder: 'owner@company.com',
+    password: 'Mot de passe',
+    signIn: 'Connexion',
+    signingIn: 'Connexion…',
+    verify: 'Vérifier le code',
+    verifying: 'Vérification…',
+    authCode: "Code d'authentification",
+    enterCode: "Entrez le code à 6 chiffres de votre application d'authentification.",
+    totpPlaceholder: '000000 ou XXXX-XXXX-XXXX',
+    back: 'Retour aux identifiants',
+    forgotPassword: 'Mot de passe oublié ?',
+    invalidCredentials: 'Adresse e-mail ou mot de passe invalide.',
+    passwordNotSet: "Aucun mot de passe défini. Vérifiez votre e-mail d'invitation ou utilisez « Mot de passe oublié ? »",
+    tooManyRequests: 'Trop de tentatives. Veuillez réessayer plus tard.',
+    emailNotVerified: 'Veuillez vérifier votre adresse email. Consultez votre boîte de réception.',
+    unexpectedError: 'Une erreur est survenue. Veuillez réessayer.',
+  },
+  ar: {
+    title: 'تسجيل الدخول',
+    subtitle: 'أدخل بياناتك للوصول إلى حسابك.',
+    email: 'البريد الإلكتروني',
+    emailPlaceholder: 'owner@company.com',
+    password: 'كلمة المرور',
+    signIn: 'تسجيل الدخول',
+    signingIn: 'جارٍ تسجيل الدخول…',
+    verify: 'تحقق من الرمز',
+    verifying: 'جارٍ التحقق…',
+    authCode: 'رمز المصادقة',
+    enterCode: 'أدخل الرمز المكون من 6 أرقام من تطبيق المصادقة.',
+    totpPlaceholder: '000000 أو XXXX-XXXX-XXXX',
+    back: 'العودة إلى بيانات الدخول',
+    forgotPassword: 'نسيت كلمة المرور؟',
+    invalidCredentials: 'البريد الإلكتروني أو كلمة المرور غير صحيحة.',
+    passwordNotSet: 'لم يتم تعيين كلمة مرور بعد. تحقق من بريد الدعوة أو استخدم "نسيت كلمة المرور؟"',
+    tooManyRequests: 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
+    emailNotVerified: 'يرجى التحقق من بريدك الإلكتروني أولاً. تحقق من صندوق الوارد.',
+    unexpectedError: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+  },
+}
+
+export function SignInForm({ locale }: { locale: Locale }) {
+  const dict = (dicts[locale] ?? dicts.en) as Dict
+  const searchParams = useSearchParams()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [totpCode, setTotpCode] = useState('')
+  const [step, setStep] = useState<'credentials' | 'totp'>('credentials')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const requestedPortal = searchParams.get('portal')
+  const employeeRedirect = searchParams.get('redirect') || '/dashboard'
+  const preferAdminAuth = requestedPortal === 'admin'
+
+  async function handleCredentials(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      const tryAdminLogin = async () => {
+        const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ email, password }),
+        })
+        const adminJson = await adminRes.json()
+
+        if (adminRes.ok && adminJson?.data?.admin) {
+          window.location.href = `${window.location.origin}/admin/dashboard`
+          return true
+        }
+
+        if (adminRes.status === 401 && adminJson?.error === 'totp_required') {
+          setStep('totp')
+          return true
+        }
+
+        if (adminRes.status === 429) {
+          setError(dict.tooManyRequests)
+          return true
+        }
+
+        return false
+      }
+
+      const tryEmployeeLogin = async () => {
+        const empRes = await fetch(`${API_BASE}/auth/employee/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ email, password }),
+        })
+        const empJson = await empRes.json()
+
+        if (empRes.ok && empJson?.data?.employee) {
+          if (empJson?.data?.employee) {
+            localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(empJson.data.employee))
+            const prefLang = empJson.data.employee?.preferredLanguage
+            if (prefLang === 'en' || prefLang === 'fr' || prefLang === 'ar') {
+              document.cookie = `rentaldrivego-language=${prefLang}; path=/; max-age=31536000; samesite=lax`
+            }
+          }
+          window.dispatchEvent(new CustomEvent('rentaldrivego:auth-changed'))
+          window.location.replace(employeeRedirect)
+          return true
+        }
+
+        if (empJson?.error === 'password_not_set') {
+          setError(dict.passwordNotSet)
+          return true
+        }
+
+        if (empJson?.error === 'email_not_verified') {
+          setError(dict.emailNotVerified)
+          return true
+        }
+
+        if (empRes.status === 429) {
+          setError(dict.tooManyRequests)
+          return true
+        }
+
+        return false
+      }
+
+      if (preferAdminAuth) {
+        if (await tryAdminLogin()) return
+        setError(dict.invalidCredentials)
+        return
+      }
+
+      if (await tryEmployeeLogin()) return
+
+      setError(dict.invalidCredentials)
+    } catch {
+      setError(dict.unexpectedError)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleTotp(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      const normalizedCode = totpCode.trim().toUpperCase()
+      const secondFactor = /^\d{6}$/.test(normalizedCode)
+        ? { totpCode: normalizedCode }
+        : { recoveryCode: normalizedCode }
+
+      const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password, ...secondFactor }),
+      })
+      const adminJson = await adminRes.json()
+
+      if (adminRes.ok && adminJson?.data?.admin) {
+        window.location.href = `${window.location.origin}/admin/dashboard`
+        return
+      }
+
+      setError(dict.invalidCredentials)
+    } catch {
+      setError(dict.unexpectedError)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const hrefBase = localizedPath('forgot-password', locale)
+
+  return (
+    <AuthShell locale={locale} title={dict.title} subtitle={dict.subtitle}>
+      {error ? (
+        <div
+          style={{
+            marginBottom: '1.25rem',
+            borderRadius: '1.5rem',
+            border: '1px solid var(--color-error-border, #fecaca)',
+            background: 'var(--color-error-bg, #fef2f2)',
+            padding: '0.75rem 1rem',
+            fontSize: '0.875rem',
+            color: 'var(--color-error-text, #b91c1c)',
+          }}
+        >
+          {error}
+        </div>
+      ) : null}
+
+      {step === 'credentials' ? (
+        <form onSubmit={handleCredentials} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          <FormField id="signin-email" label={dict.email} required>
+            <TextInput
+              id="signin-email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={dict.emailPlaceholder}
+              autoComplete="email"
+            />
+          </FormField>
+
+          <FormField id="signin-password" label={dict.password} required>
+            <input
+              id="signin-password"
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              autoComplete="current-password"
+              style={{
+                width: '100%',
+                minHeight: '2.875rem',
+                padding: 'var(--space-3) var(--space-4)',
+                border: '1px solid var(--border-strong)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--surface-primary)',
+                color: 'var(--text-primary)',
+                fontSize: '0.875rem',
+              }}
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.signingIn : dict.signIn}
+          </Button>
+
+          <div style={{ textAlign: 'center' }}>
+            <a
+              href={hrefBase}
+              style={{
+                fontSize: '0.875rem',
+                color: 'var(--color-text-tertiary)',
+                textDecoration: 'underline',
+                textUnderlineOffset: '4px',
+              }}
+            >
+              {dict.forgotPassword}
+            </a>
+          </div>
+        </form>
+      ) : (
+        <form onSubmit={handleTotp} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          <div
+            style={{
+              borderRadius: '1.5rem',
+              border: '1px solid var(--color-border)',
+              background: 'var(--color-surface-secondary)',
+              padding: '1rem',
+              textAlign: 'center',
+              fontSize: '0.875rem',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {dict.enterCode}
+          </div>
+
+          <FormField id="signin-totp" label={dict.authCode} required>
+            <TextInput
+              id="signin-totp"
+              type="text"
+              inputMode="text"
+              required
+              maxLength={14}
+              value={totpCode}
+              onChange={(e) => setTotpCode(e.target.value.replace(/[^0-9A-Za-z-]/g, '').toUpperCase())}
+              placeholder={dict.totpPlaceholder}
+              style={{ textAlign: 'center', fontSize: '1.25rem', letterSpacing: '0.45em' }}
+            />
+          </FormField>
+
+          <Button type="submit" intent="primary" fullWidth loading={loading} disabled={loading}>
+            {loading ? dict.verifying : dict.verify}
+          </Button>
+
+          <button
+            type="button"
+            onClick={() => {
+              setStep('credentials')
+              setTotpCode('')
+              setError(null)
+            }}
+            style={{
+              width: '100%',
+              fontSize: '0.875rem',
+              color: 'var(--color-text-tertiary)',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+            }}
+          >
+            {dict.back}
+          </button>
+        </form>
+      )}
+    </AuthShell>
+  )
+}
diff --git a/homepage/src/components/controls/Accordion.module.css b/homepage/src/components/controls/Accordion.module.css
new file mode 100644
index 0000000..1ef9c16
--- /dev/null
+++ b/homepage/src/components/controls/Accordion.module.css
@@ -0,0 +1,41 @@
+.accordion {
+  border-block-start: 1px solid var(--border-standard);
+}
+.item {
+  border-block-end: 1px solid var(--border-standard);
+}
+.summary {
+  display: flex;
+  min-block-size: 3.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  cursor: pointer;
+  list-style: none;
+}
+.summary::-webkit-details-marker {
+  display: none;
+}
+.heading {
+  margin: 0;
+  font-size: var(--type-body-large-size);
+}
+.icon {
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+.item[open] .icon {
+  transform: rotate(180deg);
+}
+.content {
+  padding-block-end: var(--space-5);
+  color: var(--text-secondary);
+}
+.content > :last-child {
+  margin-block-end: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    transition: none;
+  }
+}
diff --git a/homepage/src/components/controls/Accordion.tsx b/homepage/src/components/controls/Accordion.tsx
new file mode 100644
index 0000000..8bff959
--- /dev/null
+++ b/homepage/src/components/controls/Accordion.tsx
@@ -0,0 +1,33 @@
+import { Icon } from '@/components/foundation/Icon';
+import type { ReactNode } from 'react';
+import styles from './Accordion.module.css';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  open?: boolean;
+}
+
+export function Accordion({
+  items,
+  headingLevel = 3,
+}: {
+  items: AccordionItem[];
+  headingLevel?: 2 | 3 | 4;
+}) {
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <div className={styles.accordion}>
+      {items.map((item) => (
+        <details key={item.id} className={styles.item} open={item.open}>
+          <summary className={styles.summary}>
+            <Heading className={styles.heading}>{item.title}</Heading>
+            <Icon name="chevron-down" className={styles.icon} />
+          </summary>
+          <div className={styles.content}>{item.content}</div>
+        </details>
+      ))}
+    </div>
+  );
+}
diff --git a/homepage/src/components/controls/Pagination.module.css b/homepage/src/components/controls/Pagination.module.css
new file mode 100644
index 0000000..d829147
--- /dev/null
+++ b/homepage/src/components/controls/Pagination.module.css
@@ -0,0 +1,33 @@
+.pagination {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--space-4);
+}
+.pagination > :last-child {
+  justify-self: end;
+}
+.pages {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.page {
+  min-inline-size: 2.75rem;
+  justify-content: center;
+  text-decoration: none;
+}
+.page[aria-current='page'] {
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+}
+@media (max-width: 479px) {
+  .pages {
+    display: none;
+  }
+}
diff --git a/homepage/src/components/controls/Pagination.tsx b/homepage/src/components/controls/Pagination.tsx
new file mode 100644
index 0000000..e9526d7
--- /dev/null
+++ b/homepage/src/components/controls/Pagination.tsx
@@ -0,0 +1,51 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import styles from './Pagination.module.css';
+
+export interface PaginationPage {
+  number: number;
+  href: string;
+  current?: boolean;
+}
+
+interface PaginationProps {
+  label: string;
+  pages: PaginationPage[];
+  previous?: { href: string; label: string };
+  next?: { href: string; label: string };
+}
+
+export function Pagination({ label, pages, previous, next }: PaginationProps) {
+  return (
+    <nav aria-label={label} className={styles.pagination}>
+      {previous ? (
+        <ActionLink href={previous.href} variant="navigation">
+          <Icon name="arrow-back" directionBehavior="mirror" /> {previous.label}
+        </ActionLink>
+      ) : (
+        <span />
+      )}
+      <ol className={styles.pages}>
+        {pages.map((page) => (
+          <li key={page.number}>
+            <ActionLink
+              href={page.href}
+              variant="navigation"
+              aria-current={page.current ? 'page' : undefined}
+              className={styles.page}
+            >
+              {page.number}
+            </ActionLink>
+          </li>
+        ))}
+      </ol>
+      {next ? (
+        <ActionLink href={next.href} variant="navigation">
+          {next.label} <Icon name="arrow-forward" directionBehavior="mirror" />
+        </ActionLink>
+      ) : (
+        <span />
+      )}
+    </nav>
+  );
+}
diff --git a/homepage/src/components/controls/SegmentedControl.module.css b/homepage/src/components/controls/SegmentedControl.module.css
new file mode 100644
index 0000000..101532f
--- /dev/null
+++ b/homepage/src/components/controls/SegmentedControl.module.css
@@ -0,0 +1,31 @@
+.control {
+  display: inline-flex;
+  max-inline-size: 100%;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+  overflow-x: auto;
+}
+.option {
+  flex: none;
+  min-block-size: 2.5rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-4);
+  border: 0;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-weight: 700;
+}
+.option[aria-checked='true'] {
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-subtle);
+}
+.option:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
diff --git a/homepage/src/components/controls/SegmentedControl.tsx b/homepage/src/components/controls/SegmentedControl.tsx
new file mode 100644
index 0000000..3271d6c
--- /dev/null
+++ b/homepage/src/components/controls/SegmentedControl.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import styles from './SegmentedControl.module.css';
+
+export interface SegmentOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SegmentedControlProps {
+  label: string;
+  value: string;
+  options: SegmentOption[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function SegmentedControl({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+}: SegmentedControlProps) {
+  return (
+    <div className={classNames(styles.control, className)} role="radiogroup" aria-label={label}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={option.value === value}
+          disabled={option.disabled}
+          className={styles.option}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/homepage/src/components/controls/Tabs.module.css b/homepage/src/components/controls/Tabs.module.css
new file mode 100644
index 0000000..47b5f78
--- /dev/null
+++ b/homepage/src/components/controls/Tabs.module.css
@@ -0,0 +1,33 @@
+.tabs {
+  min-inline-size: 0;
+}
+.list {
+  display: flex;
+  gap: var(--space-1);
+  overflow-x: auto;
+  border-block-end: 1px solid var(--border-standard);
+  scrollbar-width: thin;
+}
+.tab {
+  flex: none;
+  min-block-size: 2.75rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border: 0;
+  border-block-end: 3px solid transparent;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-weight: 700;
+}
+.tab[aria-selected='true'] {
+  border-block-end-color: var(--interactive-primary);
+  color: var(--text-primary);
+}
+.tab:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.panel {
+  padding-block: var(--space-5);
+}
diff --git a/homepage/src/components/controls/Tabs.tsx b/homepage/src/components/controls/Tabs.tsx
new file mode 100644
index 0000000..eb2085a
--- /dev/null
+++ b/homepage/src/components/controls/Tabs.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import styles from './Tabs.module.css';
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  items: TabItem[];
+  label: string;
+  defaultActiveId?: string;
+  activation?: 'automatic' | 'manual';
+  className?: string;
+}
+
+export function Tabs({
+  items,
+  label,
+  defaultActiveId,
+  activation = 'automatic',
+  className,
+}: TabsProps) {
+  const available = items.filter((item) => !item.disabled);
+  const initial =
+    defaultActiveId && available.some((item) => item.id === defaultActiveId)
+      ? defaultActiveId
+      : (available[0]?.id ?? '');
+  const [activeId, setActiveId] = useState(initial);
+  const [focusedId, setFocusedId] = useState(initial);
+  const refs = useRef(new Map<string, HTMLButtonElement>());
+  const prefix = useId().replaceAll(':', '');
+
+  const focusByOffset = (currentId: string, offset: number) => {
+    const currentIndex = available.findIndex((item) => item.id === currentId);
+    if (currentIndex < 0 || available.length === 0) return;
+    const next = available[(currentIndex + offset + available.length) % available.length];
+    if (!next) return;
+    setFocusedId(next.id);
+    if (activation === 'automatic') setActiveId(next.id);
+    refs.current.get(next.id)?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, id: string) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      focusByOffset(id, document.documentElement.dir === 'rtl' ? -1 : 1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      focusByOffset(id, document.documentElement.dir === 'rtl' ? 1 : -1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      const first = available[0];
+      if (first) focusByOffset(first.id, 0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      const last = available.at(-1);
+      if (last) focusByOffset(last.id, 0);
+    } else if ((event.key === 'Enter' || event.key === ' ') && activation === 'manual') {
+      event.preventDefault();
+      setActiveId(id);
+    }
+  };
+
+  return (
+    <div className={classNames(styles.tabs, className)}>
+      <div className={styles.list} role="tablist" aria-label={label}>
+        {items.map((item) => {
+          const selected = item.id === activeId;
+          return (
+            <button
+              key={item.id}
+              ref={(node) => {
+                if (node) refs.current.set(item.id, node);
+                else refs.current.delete(item.id);
+              }}
+              type="button"
+              role="tab"
+              id={`${prefix}-tab-${item.id}`}
+              aria-controls={`${prefix}-panel-${item.id}`}
+              aria-selected={selected}
+              tabIndex={item.id === focusedId ? 0 : -1}
+              disabled={item.disabled}
+              className={styles.tab}
+              onClick={() => {
+                setFocusedId(item.id);
+                setActiveId(item.id);
+              }}
+              onKeyDown={(event) => handleKeyDown(event, item.id)}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          role="tabpanel"
+          id={`${prefix}-panel-${item.id}`}
+          aria-labelledby={`${prefix}-tab-${item.id}`}
+          hidden={item.id !== activeId}
+          tabIndex={0}
+          className={styles.panel}
+        >
+          {item.content}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/homepage/src/components/feedback/Alert.module.css b/homepage/src/components/feedback/Alert.module.css
new file mode 100644
index 0000000..4584410
--- /dev/null
+++ b/homepage/src/components/feedback/Alert.module.css
@@ -0,0 +1,34 @@
+.alert {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid currentColor;
+  border-radius: var(--radius-sm);
+}
+.inline {
+  padding: var(--space-3);
+}
+.info {
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.success {
+  background: var(--status-success-surface);
+  color: var(--status-success-text);
+}
+.warning {
+  background: var(--status-warning-surface);
+  color: var(--status-warning-text);
+}
+.error {
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
+.title {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+.content > :last-child {
+  margin-block-end: 0;
+}
diff --git a/homepage/src/components/feedback/Alert.tsx b/homepage/src/components/feedback/Alert.tsx
new file mode 100644
index 0000000..0c27cb8
--- /dev/null
+++ b/homepage/src/components/feedback/Alert.tsx
@@ -0,0 +1,45 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './Alert.module.css';
+
+export type AlertTone = 'info' | 'success' | 'warning' | 'error';
+
+const toneIcon: Record<AlertTone, ApprovedIconName> = {
+  info: 'info',
+  success: 'check',
+  warning: 'warning',
+  error: 'error',
+};
+
+interface AlertProps {
+  tone?: AlertTone;
+  title?: string;
+  children: ReactNode;
+  live?: 'off' | 'polite' | 'assertive';
+  inline?: boolean;
+  className?: string;
+}
+
+export function Alert({
+  tone = 'info',
+  title,
+  children,
+  live = 'off',
+  inline = false,
+  className,
+}: AlertProps) {
+  return (
+    <div
+      className={classNames(styles.alert, styles[tone], inline && styles.inline, className)}
+      role={live === 'assertive' ? 'alert' : live === 'polite' ? 'status' : undefined}
+      aria-live={live === 'off' ? undefined : live}
+    >
+      <Icon name={toneIcon[tone]} />
+      <div>
+        {title ? <strong className={styles.title}>{title}</strong> : null}
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/homepage/src/components/feedback/Loading.module.css b/homepage/src/components/feedback/Loading.module.css
new file mode 100644
index 0000000..53c588c
--- /dev/null
+++ b/homepage/src/components/feedback/Loading.module.css
@@ -0,0 +1,43 @@
+.spinnerGroup {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner {
+  animation: spin 0.9s linear infinite;
+}
+.skeleton {
+  display: grid;
+  gap: var(--space-3);
+}
+.skeleton span {
+  block-size: 0.9rem;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base),
+    var(--skeleton-highlight),
+    var(--skeleton-base)
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 1.8s;
+  }
+  .skeleton span {
+    animation: none;
+    background: var(--skeleton-base);
+  }
+}
diff --git a/homepage/src/components/feedback/Loading.tsx b/homepage/src/components/feedback/Loading.tsx
new file mode 100644
index 0000000..3c96592
--- /dev/null
+++ b/homepage/src/components/feedback/Loading.tsx
@@ -0,0 +1,38 @@
+import { Icon } from '@/components/foundation/Icon';
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes } from 'react';
+import styles from './Loading.module.css';
+
+export function Spinner({ label, className }: { label: string; className?: string }) {
+  return (
+    <span className={classNames(styles.spinnerGroup, className)} role="status">
+      <Icon name="spinner" className={styles.spinner} />
+      <span className="visually-hidden">{label}</span>
+    </span>
+  );
+}
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  lines?: number;
+  label?: string;
+}
+
+export function Skeleton({
+  lines = 3,
+  label = 'Loading content',
+  className,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={classNames(styles.skeleton, className)}
+      aria-label={label}
+      aria-busy="true"
+      {...props}
+    >
+      {Array.from({ length: lines }, (_, index) => (
+        <span key={index} style={{ inlineSize: index === lines - 1 ? '68%' : '100%' }} />
+      ))}
+    </div>
+  );
+}
diff --git a/homepage/src/components/feedback/Progress.module.css b/homepage/src/components/feedback/Progress.module.css
new file mode 100644
index 0000000..68266a7
--- /dev/null
+++ b/homepage/src/components/feedback/Progress.module.css
@@ -0,0 +1,16 @@
+.group {
+  display: grid;
+  gap: var(--space-2);
+}
+.labelRow {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+.progress {
+  inline-size: 100%;
+  block-size: 0.75rem;
+  accent-color: var(--interactive-primary);
+}
diff --git a/homepage/src/components/feedback/Progress.tsx b/homepage/src/components/feedback/Progress.tsx
new file mode 100644
index 0000000..a1f411e
--- /dev/null
+++ b/homepage/src/components/feedback/Progress.tsx
@@ -0,0 +1,31 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { classNames } from '@/lib/components/classNames';
+import styles from './Progress.module.css';
+
+interface ProgressProps {
+  value?: number;
+  max?: number;
+  label: string;
+  showValue?: boolean;
+  className?: string;
+}
+
+export function Progress({ value, max = 100, label, showValue = false, className }: ProgressProps) {
+  const normalized = value === undefined ? undefined : Math.min(max, Math.max(0, value));
+  return (
+    <div className={classNames(styles.group, className)}>
+      <div className={styles.labelRow}>
+        <span>{label}</span>
+        {showValue && normalized !== undefined ? (
+          <BidiText>{`${Math.round((normalized / max) * 100)}%`}</BidiText>
+        ) : null}
+      </div>
+      <progress
+        className={styles.progress}
+        max={max}
+        aria-label={label}
+        {...(normalized === undefined ? {} : { value: normalized })}
+      />
+    </div>
+  );
+}
diff --git a/homepage/src/components/feedback/StateMessage.module.css b/homepage/src/components/feedback/StateMessage.module.css
new file mode 100644
index 0000000..c0be04e
--- /dev/null
+++ b/homepage/src/components/feedback/StateMessage.module.css
@@ -0,0 +1,17 @@
+.state {
+  display: grid;
+  justify-items: start;
+  max-inline-size: var(--container-reading);
+  gap: var(--space-3);
+  padding: var(--space-8);
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+}
+.state h2,
+.state p {
+  margin: 0;
+}
+.state p {
+  color: var(--text-secondary);
+}
diff --git a/homepage/src/components/feedback/StateMessage.tsx b/homepage/src/components/feedback/StateMessage.tsx
new file mode 100644
index 0000000..7a3b18e
--- /dev/null
+++ b/homepage/src/components/feedback/StateMessage.tsx
@@ -0,0 +1,25 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import styles from './StateMessage.module.css';
+
+interface StateMessageProps {
+  icon?: ApprovedIconName;
+  title: string;
+  body: string;
+  action?: { label: string; href: string };
+}
+
+export function StateMessage({ icon = 'info', title, body, action }: StateMessageProps) {
+  return (
+    <section className={styles.state}>
+      <Icon name={icon} size="lg" />
+      <h2>{title}</h2>
+      <p>{body}</p>
+      {action ? (
+        <ActionLink href={action.href} variant="standalone" icon="arrow-forward">
+          {action.label}
+        </ActionLink>
+      ) : null}
+    </section>
+  );
+}
diff --git a/homepage/src/components/forms/ChoiceControls.module.css b/homepage/src/components/forms/ChoiceControls.module.css
new file mode 100644
index 0000000..e0d7e08
--- /dev/null
+++ b/homepage/src/components/forms/ChoiceControls.module.css
@@ -0,0 +1,77 @@
+.choice {
+  display: flex;
+  min-block-size: 2.75rem;
+  align-items: flex-start;
+  gap: var(--space-3);
+  cursor: pointer;
+}
+.choice > input:not(.switchInput) {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-block-start: 0.2rem;
+  accent-color: var(--interactive-primary);
+}
+.content {
+  display: grid;
+  gap: var(--space-1);
+}
+.label {
+  font-weight: 700;
+}
+.description {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.invalid .label {
+  color: var(--status-error-text);
+}
+.switchInput {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+.switchTrack {
+  position: relative;
+  flex: none;
+  inline-size: 2.75rem;
+  block-size: 1.5rem;
+  margin-block-start: 0.1rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--surface-strong);
+  transition: background var(--duration-fast) var(--easing-productive);
+}
+.switchTrack span {
+  position: absolute;
+  inset-block-start: 0.18rem;
+  inset-inline-start: 0.2rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border-radius: 50%;
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-subtle);
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+.switchInput:checked + .switchTrack {
+  background: var(--interactive-primary);
+}
+.switchInput:checked + .switchTrack span {
+  transform: translateX(1.2rem);
+}
+html[dir='rtl'] .switchInput:checked + .switchTrack span {
+  transform: translateX(-1.2rem);
+}
+.switchInput:focus-visible + .switchTrack {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+.switchInput:disabled + .switchTrack {
+  opacity: var(--opacity-disabled);
+}
+@media (prefers-reduced-motion: reduce) {
+  .switchTrack,
+  .switchTrack span {
+    transition: none;
+  }
+}
diff --git a/homepage/src/components/forms/ChoiceControls.tsx b/homepage/src/components/forms/ChoiceControls.tsx
new file mode 100644
index 0000000..3ad64ee
--- /dev/null
+++ b/homepage/src/components/forms/ChoiceControls.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import styles from './ChoiceControls.module.css';
+
+interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: ReactNode;
+  description?: ReactNode;
+  invalid?: boolean;
+}
+
+function Choice({
+  label,
+  description,
+  invalid = false,
+  className,
+  type,
+  ...props
+}: ChoiceProps & { type: 'checkbox' | 'radio' }) {
+  return (
+    <label className={classNames(styles.choice, invalid && styles.invalid, className)}>
+      <input type={type} aria-invalid={invalid || undefined} {...props} />
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}
+
+export function Checkbox(props: ChoiceProps) {
+  return <Choice type="checkbox" {...props} />;
+}
+
+export function Radio(props: ChoiceProps) {
+  return <Choice type="radio" {...props} />;
+}
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+export function Switch({ label, description, className, ...props }: SwitchProps) {
+  return (
+    <label className={classNames(styles.choice, className)}>
+      <input type="checkbox" role="switch" className={styles.switchInput} {...props} />
+      <span aria-hidden="true" className={styles.switchTrack}>
+        <span />
+      </span>
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}
diff --git a/homepage/src/components/forms/ErrorSummary.module.css b/homepage/src/components/forms/ErrorSummary.module.css
new file mode 100644
index 0000000..cc762c8
--- /dev/null
+++ b/homepage/src/components/forms/ErrorSummary.module.css
@@ -0,0 +1,24 @@
+.summary {
+  padding: var(--space-5);
+  border: 2px solid var(--status-error-text);
+  border-radius: var(--radius-sm);
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
+.heading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.heading h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.summary ul {
+  margin-block-end: 0;
+  padding-inline-start: var(--space-6);
+}
+.summary a {
+  color: currentColor;
+  font-weight: 700;
+}
diff --git a/homepage/src/components/forms/ErrorSummary.tsx b/homepage/src/components/forms/ErrorSummary.tsx
new file mode 100644
index 0000000..42dd53d
--- /dev/null
+++ b/homepage/src/components/forms/ErrorSummary.tsx
@@ -0,0 +1,31 @@
+import { Icon } from '@/components/foundation/Icon';
+import styles from './ErrorSummary.module.css';
+
+export interface FormErrorItem {
+  fieldId: string;
+  message: string;
+}
+
+export function ErrorSummary({ title, errors }: { title: string; errors: FormErrorItem[] }) {
+  if (errors.length === 0) return null;
+  return (
+    <section
+      className={styles.summary}
+      role="alert"
+      aria-labelledby="form-error-summary-title"
+      tabIndex={-1}
+    >
+      <div className={styles.heading}>
+        <Icon name="error" />
+        <h2 id="form-error-summary-title">{title}</h2>
+      </div>
+      <ul>
+        {errors.map((error) => (
+          <li key={error.fieldId}>
+            <a href={`#${error.fieldId}`}>{error.message}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/homepage/src/components/forms/FormField.module.css b/homepage/src/components/forms/FormField.module.css
new file mode 100644
index 0000000..6ac2f55
--- /dev/null
+++ b/homepage/src/components/forms/FormField.module.css
@@ -0,0 +1,47 @@
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+.label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+  font-weight: 700;
+}
+.required {
+  color: var(--status-error-text);
+}
+.optional {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  font-weight: 500;
+}
+.help,
+.error {
+  margin: 0;
+  font-size: var(--type-label-size);
+}
+.help {
+  color: var(--text-secondary);
+}
+.error {
+  color: var(--status-error-text);
+  font-weight: 650;
+}
+.invalid .label {
+  color: var(--status-error-text);
+}
+.fieldset {
+  display: grid;
+  gap: var(--space-4);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.legend {
+  margin-block-end: var(--space-3);
+  padding: 0;
+  font-weight: 750;
+}
diff --git a/homepage/src/components/forms/FormField.tsx b/homepage/src/components/forms/FormField.tsx
new file mode 100644
index 0000000..0010f83
--- /dev/null
+++ b/homepage/src/components/forms/FormField.tsx
@@ -0,0 +1,69 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './FormField.module.css';
+
+interface FormFieldProps {
+  id: string;
+  label: string;
+  required?: boolean;
+  optionalLabel?: string | undefined;
+  supportingText?: string | undefined;
+  error?: string | undefined;
+  children: ReactNode;
+  className?: string | undefined;
+}
+
+export function FormField({
+  id,
+  label,
+  required = false,
+  optionalLabel,
+  supportingText,
+  error,
+  children,
+  className,
+}: FormFieldProps) {
+  return (
+    <div className={classNames(styles.field, error && styles.invalid, className)}>
+      <label className={styles.label} htmlFor={id}>
+        <span>{label}</span>
+        {required ? (
+          <span aria-hidden="true" className={styles.required}>
+            *
+          </span>
+        ) : null}
+        {!required && optionalLabel ? (
+          <span className={styles.optional}>{optionalLabel}</span>
+        ) : null}
+      </label>
+      {children}
+      {supportingText ? (
+        <p id={`${id}-help`} className={styles.help}>
+          {supportingText}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={`${id}-error`} className={styles.error}>
+          <span aria-hidden="true">!</span> {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function Fieldset({
+  legend,
+  children,
+  className,
+}: {
+  legend: string;
+  children: ReactNode;
+  className?: string | undefined;
+}) {
+  return (
+    <fieldset className={classNames(styles.fieldset, className)}>
+      <legend className={styles.legend}>{legend}</legend>
+      {children}
+    </fieldset>
+  );
+}
diff --git a/homepage/src/components/forms/TextInput.module.css b/homepage/src/components/forms/TextInput.module.css
new file mode 100644
index 0000000..0a7ad44
--- /dev/null
+++ b/homepage/src/components/forms/TextInput.module.css
@@ -0,0 +1,43 @@
+.control {
+  inline-size: 100%;
+  min-block-size: 2.875rem;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-primary);
+  color: var(--text-primary);
+}
+.control::placeholder {
+  color: var(--text-subdued);
+  opacity: 1;
+}
+.control:hover:not(:disabled) {
+  border-color: var(--interactive-primary);
+}
+.control[aria-invalid='true'] {
+  border-color: var(--status-error-text);
+  box-shadow: 0 0 0 1px var(--status-error-text);
+}
+.control:disabled {
+  background: var(--control-disabled-surface);
+  color: var(--control-disabled-text);
+  cursor: not-allowed;
+}
+.textarea {
+  min-block-size: 8rem;
+  resize: vertical;
+}
+.textareaGroup {
+  display: grid;
+  gap: var(--space-1);
+}
+.count {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  text-align: end;
+}
+.select {
+  appearance: auto;
+}
diff --git a/homepage/src/components/forms/TextInput.tsx b/homepage/src/components/forms/TextInput.tsx
new file mode 100644
index 0000000..1b52f91
--- /dev/null
+++ b/homepage/src/components/forms/TextInput.tsx
@@ -0,0 +1,93 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { classNames } from '@/lib/components/classNames';
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
+import styles from './TextInput.module.css';
+
+export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search';
+
+interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  type?: TextInputType;
+  invalid?: boolean;
+  describedBy?: string | undefined;
+  bidiValue?: boolean;
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { type = 'text', invalid = false, describedBy, bidiValue = false, className, ...props },
+  ref,
+) {
+  const dir = bidiValue || type === 'email' || type === 'tel' || type === 'url' ? 'ltr' : undefined;
+  return (
+    <input
+      ref={ref}
+      type={type}
+      dir={dir}
+      className={classNames(styles.control, className)}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedBy}
+      {...props}
+    />
+  );
+});
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+  describedBy?: string | undefined;
+  characterCount?: { current: number; max: number; label: string };
+}
+
+export function TextArea({
+  invalid = false,
+  describedBy,
+  characterCount,
+  className,
+  ...props
+}: TextAreaProps) {
+  const countId = characterCount && props.id ? `${props.id}-count` : undefined;
+  const ids = [describedBy, countId].filter(Boolean).join(' ') || undefined;
+  return (
+    <div className={styles.textareaGroup}>
+      <textarea
+        className={classNames(styles.control, styles.textarea, className)}
+        aria-invalid={invalid || undefined}
+        aria-describedby={ids}
+        {...props}
+      />
+      {characterCount ? (
+        <p id={countId} className={styles.count} aria-live="polite">
+          <BidiText>{`${characterCount.current}/${characterCount.max}`}</BidiText>{' '}
+          {characterCount.label}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  invalid?: boolean;
+  describedBy?: string | undefined;
+}
+
+export function Select({
+  invalid = false,
+  describedBy,
+  className,
+  children,
+  ...props
+}: SelectProps) {
+  return (
+    <select
+      className={classNames(styles.control, styles.select, className)}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedBy}
+      {...props}
+    >
+      {children}
+    </select>
+  );
+}
diff --git a/homepage/src/components/foundation/AccessibleIcon.tsx b/homepage/src/components/foundation/AccessibleIcon.tsx
new file mode 100644
index 0000000..c0cc76a
--- /dev/null
+++ b/homepage/src/components/foundation/AccessibleIcon.tsx
@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+
+interface AccessibleIconProps {
+  icon: ReactElement;
+  label?: string;
+}
+
+export function AccessibleIcon({ icon, label }: AccessibleIconProps) {
+  if (label) {
+    return (
+      <span role="img" aria-label={label}>
+        {icon}
+      </span>
+    );
+  }
+  return <span aria-hidden="true">{icon}</span>;
+}
diff --git a/homepage/src/components/foundation/BidiText.module.css b/homepage/src/components/foundation/BidiText.module.css
new file mode 100644
index 0000000..e2a2701
--- /dev/null
+++ b/homepage/src/components/foundation/BidiText.module.css
@@ -0,0 +1,3 @@
+.noWrap {
+  white-space: nowrap;
+}
diff --git a/homepage/src/components/foundation/BidiText.tsx b/homepage/src/components/foundation/BidiText.tsx
new file mode 100644
index 0000000..f532c29
--- /dev/null
+++ b/homepage/src/components/foundation/BidiText.tsx
@@ -0,0 +1,23 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './BidiText.module.css';
+
+interface BidiTextProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  children: ReactNode;
+  direction?: 'ltr' | 'rtl' | 'auto';
+  noWrap?: boolean;
+}
+
+export function BidiText({
+  children,
+  direction = 'ltr',
+  noWrap = true,
+  className,
+  ...props
+}: BidiTextProps) {
+  return (
+    <bdi dir={direction} className={classNames(noWrap && styles.noWrap, className)} {...props}>
+      {children}
+    </bdi>
+  );
+}
diff --git a/homepage/src/components/foundation/Icon.module.css b/homepage/src/components/foundation/Icon.module.css
new file mode 100644
index 0000000..d185c7e
--- /dev/null
+++ b/homepage/src/components/foundation/Icon.module.css
@@ -0,0 +1,25 @@
+.icon {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+.sm {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+.md {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+.lg {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+html[dir='rtl'] .mirror {
+  transform: scaleX(-1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    animation: none !important;
+  }
+}
diff --git a/homepage/src/components/foundation/Icon.tsx b/homepage/src/components/foundation/Icon.tsx
new file mode 100644
index 0000000..041439f
--- /dev/null
+++ b/homepage/src/components/foundation/Icon.tsx
@@ -0,0 +1,139 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode, SVGProps } from 'react';
+import styles from './Icon.module.css';
+
+export const approvedIconNames = [
+  'arrow-back',
+  'arrow-forward',
+  'calendar',
+  'car',
+  'check',
+  'chevron-down',
+  'chevron-forward',
+  'close',
+  'error',
+  'external',
+  'globe',
+  'info',
+  'menu',
+  'minus',
+  'plus',
+  'search',
+  'settings',
+  'spinner',
+  'warning',
+] as const;
+
+export type ApprovedIconName = (typeof approvedIconNames)[number];
+export type IconSize = 'sm' | 'md' | 'lg';
+export type IconDirectionBehavior = 'fixed' | 'mirror';
+
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+  name: ApprovedIconName;
+  size?: IconSize;
+  decorative?: boolean;
+  label?: string;
+  directionBehavior?: IconDirectionBehavior;
+}
+
+const paths: Record<ApprovedIconName, ReactNode> = {
+  'arrow-back': <path d="m15 18-6-6 6-6M9 12h10" />,
+  'arrow-forward': <path d="m9 18 6-6-6-6m6 6H5" />,
+  calendar: (
+    <>
+      <rect x="3" y="5" width="18" height="16" rx="2" />
+      <path d="M16 3v4M8 3v4M3 10h18" />
+    </>
+  ),
+  car: (
+    <>
+      <path d="m5 11 2-5h10l2 5" />
+      <path d="M3 11h18v7H3zM6 18v2m12-2v2M7 14h.01M17 14h.01" />
+    </>
+  ),
+  check: <path d="m5 12 4 4L19 6" />,
+  'chevron-down': <path d="m6 9 6 6 6-6" />,
+  'chevron-forward': <path d="m9 18 6-6-6-6" />,
+  close: <path d="M6 6l12 12M18 6 6 18" />,
+  error: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v6m0 4h.01" />
+    </>
+  ),
+  external: (
+    <>
+      <path d="M14 4h6v6M20 4l-9 9" />
+      <path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6" />
+    </>
+  ),
+  globe: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" />
+    </>
+  ),
+  info: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v6m0-10h.01" />
+    </>
+  ),
+  menu: <path d="M4 7h16M4 12h16M4 17h16" />,
+  minus: <path d="M5 12h14" />,
+  plus: <path d="M12 5v14M5 12h14" />,
+  search: (
+    <>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m16 16 5 5" />
+    </>
+  ),
+  settings: (
+    <>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
+    </>
+  ),
+  spinner: <path d="M21 12a9 9 0 1 1-9-9" />,
+  warning: (
+    <>
+      <path d="M12 3 2.5 20h19L12 3Z" />
+      <path d="M12 9v5m0 3h.01" />
+    </>
+  ),
+};
+
+export function Icon({
+  name,
+  size = 'md',
+  decorative = true,
+  label,
+  directionBehavior = 'fixed',
+  className,
+  ...props
+}: IconProps) {
+  const accessibleProps = decorative
+    ? ({ 'aria-hidden': true } as const)
+    : ({ role: 'img', 'aria-label': label ?? name } as const);
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      focusable="false"
+      className={classNames(
+        styles.icon,
+        styles[size],
+        directionBehavior === 'mirror' && styles.mirror,
+        className,
+      )}
+      {...accessibleProps}
+      {...props}
+    >
+      {paths[name]}
+    </svg>
+  );
+}
diff --git a/homepage/src/components/foundation/LiveRegion.module.css b/homepage/src/components/foundation/LiveRegion.module.css
new file mode 100644
index 0000000..7ebf42b
--- /dev/null
+++ b/homepage/src/components/foundation/LiveRegion.module.css
@@ -0,0 +1,11 @@
+.region {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/homepage/src/components/foundation/LiveRegion.tsx b/homepage/src/components/foundation/LiveRegion.tsx
new file mode 100644
index 0000000..8d0020b
--- /dev/null
+++ b/homepage/src/components/foundation/LiveRegion.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import styles from './LiveRegion.module.css';
+
+interface LiveRegionProps {
+  children: ReactNode;
+  politeness?: 'polite' | 'assertive';
+}
+
+export function LiveRegion({ children, politeness = 'polite' }: LiveRegionProps) {
+  return (
+    <span className={styles.region} role="status" aria-live={politeness} aria-atomic="true">
+      {children}
+    </span>
+  );
+}
diff --git a/homepage/src/components/foundation/StatusBadge.module.css b/homepage/src/components/foundation/StatusBadge.module.css
new file mode 100644
index 0000000..4c1100d
--- /dev/null
+++ b/homepage/src/components/foundation/StatusBadge.module.css
@@ -0,0 +1,34 @@
+.badge {
+  display: inline-flex;
+  min-block-size: 1.75rem;
+  align-items: center;
+  gap: var(--space-1);
+  inline-size: fit-content;
+  padding-block: var(--space-1);
+  padding-inline: var(--space-3);
+  border: 1px solid currentColor;
+  border-radius: var(--radius-pill);
+  font-size: var(--type-caption-size);
+  font-weight: 800;
+  line-height: 1.2;
+}
+.neutral {
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+}
+.info {
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.success {
+  background: var(--status-success-surface);
+  color: var(--status-success-text);
+}
+.warning {
+  background: var(--status-warning-surface);
+  color: var(--status-warning-text);
+}
+.error {
+  background: var(--status-error-surface);
+  color: var(--status-error-text);
+}
diff --git a/homepage/src/components/foundation/StatusBadge.tsx b/homepage/src/components/foundation/StatusBadge.tsx
new file mode 100644
index 0000000..2792fcb
--- /dev/null
+++ b/homepage/src/components/foundation/StatusBadge.tsx
@@ -0,0 +1,29 @@
+import { Icon, type ApprovedIconName } from './Icon';
+import styles from './StatusBadge.module.css';
+
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+
+const icons: Partial<Record<StatusTone, ApprovedIconName>> = {
+  info: 'info',
+  success: 'check',
+  warning: 'warning',
+  error: 'error',
+};
+
+export function StatusBadge({
+  children,
+  tone = 'neutral',
+  showIcon = false,
+}: {
+  children: string;
+  tone?: StatusTone;
+  showIcon?: boolean;
+}) {
+  const icon = icons[tone];
+  return (
+    <span className={`${styles.badge} ${styles[tone]}`}>
+      {showIcon && icon ? <Icon name={icon} size="sm" /> : null}
+      {children}
+    </span>
+  );
+}
diff --git a/homepage/src/components/foundation/VisuallyHidden.tsx b/homepage/src/components/foundation/VisuallyHidden.tsx
new file mode 100644
index 0000000..3958dd3
--- /dev/null
+++ b/homepage/src/components/foundation/VisuallyHidden.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function VisuallyHidden({ children, className, ...props }: VisuallyHiddenProps) {
+  const classes = ['visually-hidden', className].filter(Boolean).join(' ');
+  return (
+    <span className={classes} {...props}>
+      {children}
+    </span>
+  );
+}
diff --git a/homepage/src/components/foundation/client-hooks.ts b/homepage/src/components/foundation/client-hooks.ts
new file mode 100644
index 0000000..6297d33
--- /dev/null
+++ b/homepage/src/components/foundation/client-hooks.ts
@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect, useId, useState, useSyncExternalStore, type RefObject } from 'react';
+
+export function useAccessibleId(prefix = 'rdg'): string {
+  return `${prefix}-${useId().replaceAll(':', '')}`;
+}
+
+const subscribeHydration = () => () => undefined;
+
+export function useHydrated(): boolean {
+  return useSyncExternalStore(
+    subscribeHydration,
+    () => true,
+    () => false,
+  );
+}
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const update = () => setMatches(media.matches);
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, [query]);
+  return matches;
+}
+
+export function useReducedMotion(): boolean {
+  return useMediaQuery('(prefers-reduced-motion: reduce)');
+}
+
+export function useEscapeKey(onEscape: () => void, enabled = true): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onEscape();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [enabled, onEscape]);
+}
+
+export function useOutsideClick<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  onOutside: () => void,
+  enabled = true,
+): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) onOutside();
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [enabled, onOutside, ref]);
+}
+
+export function useScrollLock(locked: boolean): void {
+  useEffect(() => {
+    if (!locked) return;
+    const previousOverflow = document.body.style.overflow;
+    const previousPadding = document.body.style.paddingInlineEnd;
+    const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = 'hidden';
+    if (scrollbar > 0) document.body.style.paddingInlineEnd = `${scrollbar}px`;
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.body.style.paddingInlineEnd = previousPadding;
+    };
+  }, [locked]);
+}
diff --git a/homepage/src/components/integrations/DemoDialogHost.module.css b/homepage/src/components/integrations/DemoDialogHost.module.css
new file mode 100644
index 0000000..568069d
--- /dev/null
+++ b/homepage/src/components/integrations/DemoDialogHost.module.css
@@ -0,0 +1,76 @@
+.form {
+  display: grid;
+  gap: var(--space-5);
+}
+
+.notice {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+}
+
+.notice p,
+.statusText {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.spanAll {
+  grid-column: 1 / -1;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.success {
+  display: grid;
+  gap: var(--space-4);
+  text-align: start;
+}
+
+.success h3,
+.success p {
+  margin: 0;
+}
+
+.honeypot {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 639px) {
+  .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .spanAll {
+    grid-column: auto;
+  }
+
+  .actions > * {
+    inline-size: 100%;
+  }
+}
+
+@media (forced-colors: active) {
+  .notice {
+    border: 1px solid CanvasText;
+  }
+}
diff --git a/homepage/src/components/integrations/DemoDialogHost.tsx b/homepage/src/components/integrations/DemoDialogHost.tsx
new file mode 100644
index 0000000..0d77336
--- /dev/null
+++ b/homepage/src/components/integrations/DemoDialogHost.tsx
@@ -0,0 +1,449 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { ErrorSummary, type FormErrorItem } from '@/components/forms/ErrorSummary';
+import { FormField } from '@/components/forms/FormField';
+import { Select, TextArea, TextInput } from '@/components/forms/TextInput';
+import { LiveRegion } from '@/components/foundation/LiveRegion';
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { Dialog } from '@/components/overlays/Dialog';
+import type { HomepageMessages } from '@/lib/localization/messages';
+import { trackAnalytics } from '@/lib/analytics/client';
+import type { AnalyticsContext } from '@/lib/analytics/events';
+import {
+  demoLeadSchema,
+  fleetSizeValues,
+  type DemoSource,
+  type DemoSubmissionResult,
+} from '@/lib/demo/schema';
+import type { Locale } from '@/lib/localization/config';
+import { getDirection } from '@/lib/localization/config';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { demoOpenEventName, type DemoOpenEventDetail } from './DemoTrigger';
+import styles from './DemoDialogHost.module.css';
+
+interface DemoDialogHostProps {
+  locale: Locale;
+  messages: HomepageMessages['form'];
+  enabled: boolean;
+}
+
+type FormStatus = 'idle' | 'submitting' | 'success' | 'error';
+type FieldErrors = Record<string, string>;
+
+function messageForCode(code: string, messages: DemoDialogHostProps['messages']): string {
+  switch (code) {
+    case 'required':
+      return messages.requiredError;
+    case 'invalid_email':
+      return messages.emailError;
+    case 'invalid_fleet_size':
+    case 'invalid_source':
+    case 'invalid_idempotency_key':
+      return messages.invalidOptionError;
+    case 'too_long':
+      return messages.tooLongError;
+    default:
+      return messages.genericError;
+  }
+}
+
+function formMessage(
+  result: Extract<DemoSubmissionResult, { ok: false }>,
+  messages: DemoDialogHostProps['messages'],
+) {
+  switch (result.category) {
+    case 'configuration':
+    case 'consent':
+      return messages.configurationError;
+    case 'timeout':
+      return messages.timeoutError;
+    case 'duplicate':
+      return messages.duplicateError;
+    case 'rate-limit':
+      return messages.rateLimitError;
+    case 'validation':
+      return messages.errorSummary;
+    case 'integration':
+    case 'abuse':
+      return messages.genericError;
+  }
+}
+
+function analyticsContext(
+  locale: Locale,
+  source: DemoSource,
+  extra: Partial<Pick<AnalyticsContext, 'errorCode' | 'errorCount' | 'reason'>> = {},
+): AnalyticsContext {
+  const theme = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+  return {
+    routeId: 'home',
+    locale,
+    direction: getDirection(locale),
+    resolvedTheme: theme,
+    source,
+    ...extra,
+  };
+}
+
+export function DemoDialogHost({ locale, messages, enabled }: DemoDialogHostProps) {
+  const [open, setOpen] = useState(false);
+  const [source, setSource] = useState<DemoSource>('hero');
+  const [status, setStatus] = useState<FormStatus>('idle');
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [formError, setFormError] = useState('');
+  const [messageLength, setMessageLength] = useState(0);
+  const formRef = useRef<HTMLFormElement>(null);
+  const firstFieldRef = useRef<HTMLInputElement>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+  const idempotencyKeyRef = useRef('');
+  const startedAtRef = useRef(0);
+  const closeTrackedRef = useRef(false);
+
+  const summaryErrors = useMemo<FormErrorItem[]>(
+    () =>
+      Object.entries(fieldErrors).map(([fieldId, code]) => ({
+        fieldId,
+        message: messageForCode(code, messages),
+      })),
+    [fieldErrors, messages],
+  );
+
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const detail = (event as CustomEvent<DemoOpenEventDetail>).detail;
+      if (!detail || !enabled) return;
+      returnFocusRef.current = detail.trigger;
+      setSource(detail.source);
+      closeTrackedRef.current = false;
+      setOpen(true);
+      setStatus('idle');
+      setFieldErrors({});
+      setFormError('');
+      idempotencyKeyRef.current = crypto.randomUUID();
+      startedAtRef.current = Date.now();
+      trackAnalytics('demo_open', analyticsContext(locale, detail.source));
+    };
+    window.addEventListener(demoOpenEventName, handleOpen);
+    return () => window.removeEventListener(demoOpenEventName, handleOpen);
+  }, [enabled, locale]);
+
+  const reset = () => {
+    formRef.current?.reset();
+    setMessageLength(0);
+    setStatus('idle');
+    setFieldErrors({});
+    setFormError('');
+    idempotencyKeyRef.current = crypto.randomUUID();
+    startedAtRef.current = Date.now();
+    window.requestAnimationFrame(() => firstFieldRef.current?.focus());
+  };
+
+  const close = () => {
+    if (status === 'submitting' || closeTrackedRef.current) return;
+    closeTrackedRef.current = true;
+    setOpen(false);
+    trackAnalytics('demo_close', analyticsContext(locale, source, { reason: 'user' }));
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) close();
+        else {
+          closeTrackedRef.current = false;
+          setOpen(true);
+        }
+      }}
+      title={messages.title}
+      description={messages.body}
+      closeLabel={messages.close}
+      initialFocusRef={firstFieldRef}
+      returnFocusRef={returnFocusRef}
+      dismissible={status !== 'submitting'}
+    >
+      {status === 'success' ? (
+        <section className={styles.success} aria-live="polite">
+          <StatusBadge tone="success">{messages.localModeLabel}</StatusBadge>
+          <h3>{messages.successTitle}</h3>
+          <p>{messages.successBody}</p>
+          <div className={styles.actions}>
+            <Button intent="primary" onClick={reset}>
+              {messages.submitAnother}
+            </Button>
+            <Button intent="secondary" onClick={close}>
+              {messages.close}
+            </Button>
+          </div>
+        </section>
+      ) : (
+        <form
+          ref={formRef}
+          className={styles.form}
+          noValidate
+          onSubmit={async (event) => {
+            event.preventDefault();
+            if (status === 'submitting') return;
+
+            const form = event.currentTarget;
+            const values = new FormData(form);
+            const leadInput = {
+              fullName: String(values.get('fullName') ?? ''),
+              workEmail: String(values.get('workEmail') ?? ''),
+              company: String(values.get('company') ?? ''),
+              fleetSize: String(values.get('fleetSize') ?? ''),
+              market: String(values.get('market') ?? ''),
+              preferredLanguage: String(values.get('preferredLanguage') ?? locale),
+              message: String(values.get('message') ?? ''),
+              idempotencyKey: idempotencyKeyRef.current || crypto.randomUUID(),
+              source,
+            };
+
+            const clientResult = demoLeadSchema.safeParse(leadInput);
+            if (!clientResult.success) {
+              const nextErrors: FieldErrors = {};
+              for (const issue of clientResult.error.issues) {
+                const field = issue.path.at(-1);
+                if (typeof field === 'string' && !nextErrors[field])
+                  nextErrors[field] = issue.message;
+              }
+              setFieldErrors(nextErrors);
+              setFormError(messages.errorSummary);
+              trackAnalytics(
+                'demo_validation_error',
+                analyticsContext(locale, source, { errorCount: Object.keys(nextErrors).length }),
+              );
+              window.requestAnimationFrame(() => {
+                const firstInvalid = form.querySelector<HTMLElement>('[aria-invalid="true"]');
+                firstInvalid?.focus();
+              });
+              return;
+            }
+
+            setStatus('submitting');
+            setFieldErrors({});
+            setFormError('');
+            trackAnalytics('demo_submit_attempt', analyticsContext(locale, source));
+
+            try {
+              const response = await fetch('/api/demo', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-RDG-Form': 'demo-v1' },
+                body: JSON.stringify({
+                  lead: clientResult.data,
+                  guard: {
+                    honeypot: String(values.get('website') ?? ''),
+                    startedAtMs: startedAtRef.current,
+                  },
+                }),
+              });
+              const result = (await response.json()) as DemoSubmissionResult;
+              if (result.ok) {
+                setStatus('success');
+                trackAnalytics('demo_submit_success', analyticsContext(locale, source));
+                return;
+              }
+
+              const serverErrors = Object.fromEntries(
+                Object.entries(result.fieldErrors ?? {}).map(([field, code]) => [field, code]),
+              );
+              setFieldErrors(serverErrors);
+              setFormError(formMessage(result, messages));
+              setStatus('error');
+              trackAnalytics(
+                'demo_submit_failure',
+                analyticsContext(locale, source, { errorCode: result.category }),
+              );
+              window.requestAnimationFrame(() => {
+                const firstInvalid = form.querySelector<HTMLElement>('[aria-invalid="true"]');
+                firstInvalid?.focus();
+              });
+            } catch {
+              setFormError(messages.genericError);
+              setStatus('error');
+              trackAnalytics(
+                'demo_submit_failure',
+                analyticsContext(locale, source, { errorCode: 'network' }),
+              );
+            }
+          }}
+        >
+          <div className={styles.notice}>
+            <StatusBadge tone="info">{messages.localModeLabel}</StatusBadge>
+            <p>{messages.privacy}</p>
+          </div>
+
+          {formError ? (
+            <ErrorSummary
+              title={formError}
+              errors={
+                summaryErrors.length > 0
+                  ? summaryErrors
+                  : [{ fieldId: 'demo-submit', message: formError }]
+              }
+            />
+          ) : null}
+
+          <div className={styles.grid}>
+            <FormField
+              id="fullName"
+              label={messages.name}
+              required
+              error={
+                fieldErrors.fullName ? messageForCode(fieldErrors.fullName, messages) : undefined
+              }
+            >
+              <TextInput
+                ref={firstFieldRef}
+                id="fullName"
+                name="fullName"
+                autoComplete="name"
+                required
+                maxLength={120}
+                invalid={Boolean(fieldErrors.fullName)}
+                describedBy={fieldErrors.fullName ? 'fullName-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="workEmail"
+              label={messages.email}
+              required
+              error={
+                fieldErrors.workEmail ? messageForCode(fieldErrors.workEmail, messages) : undefined
+              }
+            >
+              <TextInput
+                id="workEmail"
+                name="workEmail"
+                type="email"
+                inputMode="email"
+                autoComplete="email"
+                required
+                maxLength={254}
+                invalid={Boolean(fieldErrors.workEmail)}
+                describedBy={fieldErrors.workEmail ? 'workEmail-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="company"
+              label={messages.company}
+              required
+              error={
+                fieldErrors.company ? messageForCode(fieldErrors.company, messages) : undefined
+              }
+            >
+              <TextInput
+                id="company"
+                name="company"
+                autoComplete="organization"
+                required
+                maxLength={160}
+                invalid={Boolean(fieldErrors.company)}
+                describedBy={fieldErrors.company ? 'company-error' : undefined}
+              />
+            </FormField>
+
+            <FormField
+              id="fleetSize"
+              label={messages.fleet}
+              required
+              error={
+                fieldErrors.fleetSize ? messageForCode(fieldErrors.fleetSize, messages) : undefined
+              }
+            >
+              <Select
+                id="fleetSize"
+                name="fleetSize"
+                required
+                defaultValue=""
+                invalid={Boolean(fieldErrors.fleetSize)}
+                describedBy={fieldErrors.fleetSize ? 'fleetSize-error' : undefined}
+              >
+                <option value="">{messages.fleetOptions[0]}</option>
+                {fleetSizeValues.map((value, index) => (
+                  <option key={value} value={value}>
+                    {messages.fleetOptions[index + 1]}
+                  </option>
+                ))}
+              </Select>
+            </FormField>
+
+            <FormField id="market" label={messages.market} optionalLabel={messages.optional}>
+              <TextInput id="market" name="market" defaultValue={messages.marketDefault} autoComplete="country-name" maxLength={100} />
+            </FormField>
+
+            <FormField
+              id="preferredLanguage"
+              label={messages.language}
+              optionalLabel={messages.optional}
+            >
+              <Select id="preferredLanguage" name="preferredLanguage" defaultValue={locale}>
+                {(['en', 'fr', 'ar'] as const).map((value, index) => (
+                  <option key={value} value={value}>
+                    {messages.langOptions[index]}
+                  </option>
+                ))}
+              </Select>
+            </FormField>
+
+            <FormField
+              id="message"
+              label={messages.message}
+              optionalLabel={messages.optional}
+              supportingText={messages.messageHelp}
+              className={styles.spanAll}
+              error={
+                fieldErrors.message ? messageForCode(fieldErrors.message, messages) : undefined
+              }
+            >
+              <TextArea
+                id="message"
+                name="message"
+                rows={5}
+                maxLength={1000}
+                invalid={Boolean(fieldErrors.message)}
+                describedBy={fieldErrors.message ? 'message-help message-error' : 'message-help'}
+                characterCount={{ current: messageLength, max: 1000, label: messages.messageCount }}
+                onInput={(event) => setMessageLength(event.currentTarget.value.length)}
+              />
+            </FormField>
+          </div>
+
+          <div className={styles.honeypot} aria-hidden="true">
+            <label htmlFor="website">Website</label>
+            <input id="website" name="website" tabIndex={-1} autoComplete="off" />
+          </div>
+
+          <div className={styles.actions}>
+            <Button
+              id="demo-submit"
+              type="submit"
+              intent="conversion"
+              loading={status === 'submitting'}
+            >
+              {status === 'submitting'
+                ? messages.submitting
+                : status === 'error'
+                  ? messages.retry
+                  : messages.submit}
+            </Button>
+            <Button
+              type="button"
+              intent="tertiary"
+              disabled={status === 'submitting'}
+              onClick={close}
+            >
+              {messages.close}
+            </Button>
+          </div>
+          <LiveRegion politeness="polite">
+            {status === 'submitting' ? messages.submitting : ''}
+          </LiveRegion>
+        </form>
+      )}
+    </Dialog>
+  );
+}
diff --git a/homepage/src/components/integrations/DemoTrigger.tsx b/homepage/src/components/integrations/DemoTrigger.tsx
new file mode 100644
index 0000000..ba3ed80
--- /dev/null
+++ b/homepage/src/components/integrations/DemoTrigger.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { ActionLink } from '@/components/actions/ActionLink';
+import type { DemoSource } from '@/lib/demo/schema';
+
+export const demoOpenEventName = 'rdg:demo-open';
+
+export interface DemoOpenEventDetail {
+  source: DemoSource;
+  trigger: HTMLElement;
+}
+
+interface DemoTriggerProps {
+  label: string;
+  source: DemoSource;
+  disabledReason?: string | undefined;
+  size?: 'small' | 'medium' | 'large';
+  fullWidth?: boolean;
+  className?: string | undefined;
+}
+
+export function DemoTrigger({
+  label,
+  source,
+  disabledReason,
+  size = 'medium',
+  fullWidth = false,
+  className,
+}: DemoTriggerProps) {
+  if (disabledReason) {
+    return (
+      <ActionLink
+        href="/"
+        variant="button-conversion"
+        disabledReason={disabledReason}
+        className={className}
+      >
+        {label}
+      </ActionLink>
+    );
+  }
+
+  return (
+    <Button
+      intent="conversion"
+      size={size}
+      fullWidth={fullWidth}
+      className={className}
+      data-demo-source={source}
+      onClick={(event) => {
+        window.dispatchEvent(
+          new CustomEvent<DemoOpenEventDetail>(demoOpenEventName, {
+            detail: { source, trigger: event.currentTarget },
+          }),
+        );
+      }}
+    >
+      {label}
+    </Button>
+  );
+}
diff --git a/homepage/src/components/layout/LayoutPrimitives.module.css b/homepage/src/components/layout/LayoutPrimitives.module.css
new file mode 100644
index 0000000..71b34f2
--- /dev/null
+++ b/homepage/src/components/layout/LayoutPrimitives.module.css
@@ -0,0 +1,81 @@
+.container {
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-inline: var(--layout-gutter);
+}
+
+.content {
+  max-inline-size: var(--container-content);
+}
+
+.reading {
+  max-inline-size: var(--container-reading);
+}
+
+.full {
+  max-inline-size: none;
+}
+
+.section {
+  padding-block: var(--section-space);
+}
+
+.sectionMuted {
+  background: var(--surface-muted);
+}
+
+.sectionStrong {
+  background: var(--surface-strong);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.stackSmall {
+  gap: var(--space-3);
+}
+
+.stackMedium {
+  gap: var(--space-6);
+}
+
+.stackLarge {
+  gap: var(--space-12);
+}
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.clusterSmall {
+  gap: var(--space-2);
+}
+
+.clusterMedium {
+  gap: var(--space-4);
+}
+
+.clusterLarge {
+  gap: var(--space-8);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  gap: var(--space-6);
+}
+
+.bleed {
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+}
+
+.sticky {
+  position: sticky;
+  z-index: var(--layer-sticky);
+  inset-block-start: 0;
+}
diff --git a/homepage/src/components/layout/LayoutPrimitives.tsx b/homepage/src/components/layout/LayoutPrimitives.tsx
new file mode 100644
index 0000000..6332295
--- /dev/null
+++ b/homepage/src/components/layout/LayoutPrimitives.tsx
@@ -0,0 +1,92 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './LayoutPrimitives.module.css';
+
+type ContainerWidth = 'wide' | 'content' | 'reading' | 'full';
+type Gap = 'small' | 'medium' | 'large';
+type SectionTone = 'default' | 'muted' | 'strong';
+
+function classes(...values: Array<string | false | undefined>): string {
+  return values.filter(Boolean).join(' ');
+}
+
+export function Container({
+  children,
+  width = 'wide',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; width?: ContainerWidth }) {
+  return (
+    <div className={classes(styles.container, styles[width], className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function Section({
+  children,
+  tone = 'default',
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement> & { children: ReactNode; tone?: SectionTone }) {
+  return (
+    <section
+      className={classes(
+        styles.section,
+        tone === 'muted' && styles.sectionMuted,
+        tone === 'strong' && styles.sectionStrong,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+}
+
+export function Stack({
+  children,
+  gap = 'medium',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
+  const gapClass = {
+    small: styles.stackSmall,
+    medium: styles.stackMedium,
+    large: styles.stackLarge,
+  }[gap];
+  return (
+    <div className={classes(styles.stack, gapClass, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function Cluster({
+  children,
+  gap = 'medium',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode; gap?: Gap }) {
+  const gapClass = {
+    small: styles.clusterSmall,
+    medium: styles.clusterMedium,
+    large: styles.clusterLarge,
+  }[gap];
+  return (
+    <div className={classes(styles.cluster, gapClass, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function ResponsiveGrid({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return (
+    <div className={classes(styles.grid, className)} {...props}>
+      {children}
+    </div>
+  );
+}
diff --git a/homepage/src/components/marketing/CTA.module.css b/homepage/src/components/marketing/CTA.module.css
new file mode 100644
index 0000000..d42d4c6
--- /dev/null
+++ b/homepage/src/components/marketing/CTA.module.css
@@ -0,0 +1,42 @@
+.cta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-8);
+}
+.copy {
+  display: grid;
+  gap: var(--space-3);
+}
+.eyebrow {
+  margin: 0;
+  color: var(--interactive-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+.inline {
+  border-radius: var(--radius-sm);
+}
+.card {
+  grid-template-columns: 1fr;
+}
+.card .actions {
+  justify-content: flex-start;
+}
+@media (max-width: 767px) {
+  .cta {
+    grid-template-columns: 1fr;
+  }
+  .actions {
+    justify-content: flex-start;
+  }
+  .actions > * {
+    inline-size: 100%;
+  }
+}
diff --git a/homepage/src/components/marketing/CTA.tsx b/homepage/src/components/marketing/CTA.tsx
new file mode 100644
index 0000000..5f883a3
--- /dev/null
+++ b/homepage/src/components/marketing/CTA.tsx
@@ -0,0 +1,73 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import type { ReactNode } from 'react';
+import styles from './CTA.module.css';
+
+export interface CTAAction {
+  label: string;
+  href?: string;
+  disabledReason?: string;
+}
+
+interface CTAProps {
+  eyebrow?: string;
+  title: string;
+  body?: string;
+  primary: CTAAction;
+  secondary?: CTAAction;
+  headingLevel?: HeadingLevel;
+  layout?: 'inline' | 'section' | 'card';
+  primaryNode?: ReactNode;
+  secondaryNode?: ReactNode;
+}
+
+export function CTA({
+  eyebrow,
+  title,
+  body,
+  primary,
+  secondary,
+  headingLevel = 2,
+  layout = 'section',
+  primaryNode,
+  secondaryNode,
+}: CTAProps) {
+  return (
+    <Card
+      as="section"
+      tone={layout === 'section' ? 'strong' : 'elevated'}
+      padding={layout === 'inline' ? 'compact' : 'spacious'}
+      className={`${styles.cta} ${styles[layout]}`}
+    >
+      <div className={styles.copy}>
+        {eyebrow ? <p className={styles.eyebrow}>{eyebrow}</p> : null}
+        <Heading level={headingLevel} appearance={layout === 'inline' ? 'subheading' : 'section'}>
+          {title}
+        </Heading>
+        {body ? <Text variant="supporting">{body}</Text> : null}
+      </div>
+      <div className={styles.actions}>
+        {primaryNode ?? (
+          <ActionLink
+            href={primary.href ?? '/'}
+            variant="button-conversion"
+            {...(primary.disabledReason ? { disabledReason: primary.disabledReason } : {})}
+          >
+            {primary.label}
+          </ActionLink>
+        )}
+        {secondaryNode ??
+          (secondary ? (
+            <ActionLink
+              href={secondary.href ?? '/'}
+              variant="button-primary"
+              {...(secondary.disabledReason ? { disabledReason: secondary.disabledReason } : {})}
+            >
+              {secondary.label}
+            </ActionLink>
+          ) : null)}
+      </div>
+    </Card>
+  );
+}
diff --git a/homepage/src/components/marketing/Comparison.module.css b/homepage/src/components/marketing/Comparison.module.css
new file mode 100644
index 0000000..ca40c0a
--- /dev/null
+++ b/homepage/src/components/marketing/Comparison.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+  display: grid;
+  gap: var(--space-6);
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+.column {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+}
+.column ul {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.column li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-2);
+  align-items: start;
+}
+.column li svg {
+  margin-block-start: 0.25rem;
+}
+@media (max-width: 767px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/homepage/src/components/marketing/Comparison.tsx b/homepage/src/components/marketing/Comparison.tsx
new file mode 100644
index 0000000..935a38b
--- /dev/null
+++ b/homepage/src/components/marketing/Comparison.tsx
@@ -0,0 +1,51 @@
+import { Icon } from '@/components/foundation/Icon';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './Comparison.module.css';
+
+export interface ComparisonColumn {
+  title: string;
+  items: string[];
+  tone: 'problem' | 'solution';
+}
+
+interface ComparisonProps {
+  title?: string;
+  body?: string;
+  columns: [ComparisonColumn, ComparisonColumn];
+  headingLevel?: HeadingLevel;
+}
+
+export function Comparison({ title, body, columns, headingLevel = 2 }: ComparisonProps) {
+  return (
+    <div className={styles.wrapper}>
+      {title ? (
+        <Heading level={headingLevel} appearance="section">
+          {title}
+        </Heading>
+      ) : null}
+      {body ? <Text variant="lead">{body}</Text> : null}
+      <div className={styles.grid}>
+        {columns.map((column) => (
+          <Card
+            key={column.title}
+            tone={column.tone === 'solution' ? 'elevated' : 'muted'}
+            className={styles.column}
+          >
+            <Heading level={(headingLevel + 1) as 2 | 3 | 4 | 5 | 6} appearance="subheading">
+              {column.title}
+            </Heading>
+            <ul>
+              {column.items.map((item) => (
+                <li key={item}>
+                  <Icon name={column.tone === 'solution' ? 'check' : 'minus'} size="sm" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/homepage/src/components/marketing/Evidence.module.css b/homepage/src/components/marketing/Evidence.module.css
new file mode 100644
index 0000000..3d600b9
--- /dev/null
+++ b/homepage/src/components/marketing/Evidence.module.css
@@ -0,0 +1,25 @@
+.metric {
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+}
+.value {
+  display: block;
+  font-size: var(--type-heading-1-size);
+  font-weight: 850;
+  line-height: 1;
+}
+.source {
+  color: var(--text-secondary);
+}
+.shell {
+  display: grid;
+  gap: var(--space-4);
+}
+.shellHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
diff --git a/homepage/src/components/marketing/Evidence.tsx b/homepage/src/components/marketing/Evidence.tsx
new file mode 100644
index 0000000..b74dd11
--- /dev/null
+++ b/homepage/src/components/marketing/Evidence.tsx
@@ -0,0 +1,81 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import type { ReactNode } from 'react';
+import styles from './Evidence.module.css';
+
+export type EvidenceStatus = 'approved' | 'pending-review' | 'research-only' | 'prohibited';
+
+export interface MetricContent {
+  value: string;
+  label: string;
+  qualification?: string;
+  sourceReference?: string;
+  status: EvidenceStatus;
+}
+
+const statusTone = {
+  approved: 'success',
+  'pending-review': 'warning',
+  'research-only': 'info',
+  prohibited: 'error',
+} as const;
+
+export function canRenderProductionEvidence(status: EvidenceStatus): boolean {
+  return status === 'approved';
+}
+
+interface MetricProps {
+  content: MetricContent;
+  statusLabel: string;
+  production?: boolean;
+  headingLevel?: HeadingLevel;
+}
+
+export function Metric({
+  content,
+  statusLabel,
+  production = false,
+  headingLevel = 3,
+}: MetricProps) {
+  if (production && !canRenderProductionEvidence(content.status)) return null;
+  return (
+    <Card className={styles.metric}>
+      <StatusBadge tone={statusTone[content.status]}>{statusLabel}</StatusBadge>
+      <BidiText className={styles.value}>{content.value}</BidiText>
+      <Heading level={headingLevel} appearance="subheading">
+        {content.label}
+      </Heading>
+      {content.qualification ? <Text variant="supporting">{content.qualification}</Text> : null}
+      {content.sourceReference ? (
+        <small className={styles.source}>{content.sourceReference}</small>
+      ) : null}
+    </Card>
+  );
+}
+
+export function EvidenceShell({
+  title,
+  status,
+  statusLabel,
+  children,
+}: {
+  title: string;
+  status: EvidenceStatus;
+  statusLabel: string;
+  children?: ReactNode;
+}) {
+  if (status === 'prohibited') return null;
+  return (
+    <Card className={styles.shell} tone="muted">
+      <div className={styles.shellHeader}>
+        <Heading level={3} appearance="subheading">
+          {title}
+        </Heading>
+        <StatusBadge tone={statusTone[status]}>{statusLabel}</StatusBadge>
+      </div>
+      {children}
+    </Card>
+  );
+}
diff --git a/homepage/src/components/marketing/FeatureCard.module.css b/homepage/src/components/marketing/FeatureCard.module.css
new file mode 100644
index 0000000..9c1c6bd
--- /dev/null
+++ b/homepage/src/components/marketing/FeatureCard.module.css
@@ -0,0 +1,18 @@
+.card {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  block-size: 100%;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border-radius: var(--radius-sm);
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.card > :last-child {
+  margin-block-start: auto;
+}
diff --git a/homepage/src/components/marketing/FeatureCard.tsx b/homepage/src/components/marketing/FeatureCard.tsx
new file mode 100644
index 0000000..b22dbcd
--- /dev/null
+++ b/homepage/src/components/marketing/FeatureCard.tsx
@@ -0,0 +1,50 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './FeatureCard.module.css';
+
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+  headingLevel?: HeadingLevel;
+  emphasis?: 'default' | 'primary' | 'muted';
+  action?: { label: string; href: string; disabledReason?: string };
+}
+
+export function FeatureCard({
+  title,
+  description,
+  icon,
+  headingLevel = 3,
+  emphasis = 'default',
+  action,
+}: FeatureCardProps) {
+  return (
+    <Card
+      tone={emphasis === 'muted' ? 'muted' : emphasis === 'primary' ? 'elevated' : 'default'}
+      className={styles.card}
+    >
+      {icon ? (
+        <span className={styles.icon}>
+          <Icon name={icon} size="lg" />
+        </span>
+      ) : null}
+      <Heading level={headingLevel} appearance="subheading">
+        {title}
+      </Heading>
+      <Text variant="supporting">{description}</Text>
+      {action ? (
+        <ActionLink
+          href={action.href}
+          variant="standalone"
+          icon="arrow-forward"
+          {...(action.disabledReason ? { disabledReason: action.disabledReason } : {})}
+        >
+          {action.label}
+        </ActionLink>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/homepage/src/components/marketing/ProductPreview.module.css b/homepage/src/components/marketing/ProductPreview.module.css
new file mode 100644
index 0000000..2dafc15
--- /dev/null
+++ b/homepage/src/components/marketing/ProductPreview.module.css
@@ -0,0 +1,69 @@
+.figure {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+}
+.preview {
+  overflow: hidden;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border-block-end: 1px solid var(--border-standard);
+}
+.header > div {
+  display: grid;
+  gap: var(--space-1);
+}
+.dots {
+  display: flex;
+  gap: var(--space-1);
+}
+.dots i {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--border-strong);
+}
+.table {
+  display: grid;
+}
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-block-end: 1px solid var(--border-standard);
+}
+.row:last-child {
+  border-block-end: 0;
+}
+.row > div:first-child {
+  display: grid;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+.secondary {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+  overflow-wrap: anywhere;
+}
+.empty {
+  margin: 0;
+  padding: var(--space-8);
+  color: var(--text-secondary);
+  text-align: center;
+}
+.figure figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+@media (max-width: 479px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/homepage/src/components/marketing/ProductPreview.tsx b/homepage/src/components/marketing/ProductPreview.tsx
new file mode 100644
index 0000000..2a4cfd9
--- /dev/null
+++ b/homepage/src/components/marketing/ProductPreview.tsx
@@ -0,0 +1,71 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { StatusBadge, type StatusTone } from '@/components/foundation/StatusBadge';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './ProductPreview.module.css';
+
+export interface PreviewRow {
+  id: string;
+  primary: string;
+  secondary: string;
+  status: string;
+  statusTone?: StatusTone;
+}
+
+interface ProductPreviewProps {
+  title: string;
+  caption: string;
+  rows: PreviewRow[];
+  illustrativeLabel: string;
+  emptyLabel?: string;
+  headingLevel?: HeadingLevel;
+}
+
+export function ProductPreview({
+  title,
+  caption,
+  rows,
+  illustrativeLabel,
+  emptyLabel = 'No preview data',
+  headingLevel = 3,
+}: ProductPreviewProps) {
+  return (
+    <figure className={styles.figure}>
+      <Card tone="elevated" padding="none" className={styles.preview}>
+        <header className={styles.header}>
+          <div>
+            <Heading level={headingLevel} appearance="subheading">
+              {title}
+            </Heading>
+            <Text variant="caption">{illustrativeLabel}</Text>
+          </div>
+          <span className={styles.dots} aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+        </header>
+        {rows.length > 0 ? (
+          <div className={styles.table} role="table" aria-label={title}>
+            {rows.map((row) => (
+              <div key={row.id} className={styles.row} role="row">
+                <div role="cell">
+                  <strong>{row.primary}</strong>
+                  <BidiText className={styles.secondary}>{row.secondary}</BidiText>
+                </div>
+                <div role="cell">
+                  <StatusBadge {...(row.statusTone ? { tone: row.statusTone } : {})}>
+                    {row.status}
+                  </StatusBadge>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className={styles.empty}>{emptyLabel}</p>
+        )}
+      </Card>
+      <figcaption>{caption}</figcaption>
+    </figure>
+  );
+}
diff --git a/homepage/src/components/marketing/SectionHeader.module.css b/homepage/src/components/marketing/SectionHeader.module.css
new file mode 100644
index 0000000..9c95cef
--- /dev/null
+++ b/homepage/src/components/marketing/SectionHeader.module.css
@@ -0,0 +1,13 @@
+.header {
+  display: grid;
+  gap: var(--space-4);
+  max-inline-size: var(--container-reading);
+}
+.center {
+  margin-inline: auto;
+  justify-items: center;
+  text-align: center;
+}
+.center p {
+  margin-inline: auto;
+}
diff --git a/homepage/src/components/marketing/SectionHeader.tsx b/homepage/src/components/marketing/SectionHeader.tsx
new file mode 100644
index 0000000..38e6a0e
--- /dev/null
+++ b/homepage/src/components/marketing/SectionHeader.tsx
@@ -0,0 +1,31 @@
+import { Eyebrow, Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import { classNames } from '@/lib/components/classNames';
+import styles from './SectionHeader.module.css';
+
+interface SectionHeaderProps {
+  eyebrow?: string;
+  title: string;
+  body?: string;
+  headingLevel?: HeadingLevel;
+  alignment?: 'start' | 'center';
+  className?: string;
+}
+
+export function SectionHeader({
+  eyebrow,
+  title,
+  body,
+  headingLevel = 2,
+  alignment = 'start',
+  className,
+}: SectionHeaderProps) {
+  return (
+    <header className={classNames(styles.header, styles[alignment], className)}>
+      {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
+      <Heading level={headingLevel} appearance="section">
+        {title}
+      </Heading>
+      {body ? <Text variant="lead">{body}</Text> : null}
+    </header>
+  );
+}
diff --git a/homepage/src/components/marketing/SectionPatterns.module.css b/homepage/src/components/marketing/SectionPatterns.module.css
new file mode 100644
index 0000000..66d56ad
--- /dev/null
+++ b/homepage/src/components/marketing/SectionPatterns.module.css
@@ -0,0 +1,44 @@
+.featureGrid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+}
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(var(--space-8), 7vw, var(--space-16));
+}
+.copy {
+  min-inline-size: 0;
+}
+.media {
+  min-inline-size: 0;
+}
+.reverse .copy {
+  order: 2;
+}
+.reverse .media {
+  order: 1;
+}
+.metricStrip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: var(--space-4);
+}
+.logoStrip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  padding: var(--space-6);
+  border-block: 1px solid var(--border-standard);
+}
+@media (max-width: 767px) {
+  .split {
+    grid-template-columns: 1fr;
+  }
+  .reverse .copy,
+  .reverse .media {
+    order: initial;
+  }
+}
diff --git a/homepage/src/components/marketing/SectionPatterns.tsx b/homepage/src/components/marketing/SectionPatterns.tsx
new file mode 100644
index 0000000..91d697d
--- /dev/null
+++ b/homepage/src/components/marketing/SectionPatterns.tsx
@@ -0,0 +1,36 @@
+import { ResponsiveGrid } from '@/components/layout/LayoutPrimitives';
+import type { ReactNode } from 'react';
+import styles from './SectionPatterns.module.css';
+
+export function FeatureGrid({ children }: { children: ReactNode }) {
+  return <ResponsiveGrid className={styles.featureGrid}>{children}</ResponsiveGrid>;
+}
+
+export function SplitContent({
+  copy,
+  media,
+  reverse = false,
+}: {
+  copy: ReactNode;
+  media: ReactNode;
+  reverse?: boolean;
+}) {
+  return (
+    <div className={`${styles.split} ${reverse ? styles.reverse : ''}`}>
+      <div className={styles.copy}>{copy}</div>
+      <div className={styles.media}>{media}</div>
+    </div>
+  );
+}
+
+export function MetricStrip({ children }: { children: ReactNode }) {
+  return <div className={styles.metricStrip}>{children}</div>;
+}
+
+export function LogoStripShell({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className={styles.logoStrip} role="group" aria-label={label}>
+      {children}
+    </div>
+  );
+}
diff --git a/homepage/src/components/marketing/Workflow.module.css b/homepage/src/components/marketing/Workflow.module.css
new file mode 100644
index 0000000..0217ccd
--- /dev/null
+++ b/homepage/src/components/marketing/Workflow.module.css
@@ -0,0 +1,48 @@
+.workflow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: workflow;
+}
+.step {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-content: start;
+  gap: var(--space-4);
+  min-inline-size: 0;
+}
+.marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border: 2px solid var(--interactive-primary);
+  border-radius: 50%;
+  background: var(--surface-elevated);
+  color: var(--interactive-primary);
+  font-weight: 800;
+}
+.content {
+  display: grid;
+  gap: var(--space-2);
+}
+.connector {
+  position: absolute;
+  inset-block-start: 0.8rem;
+  inset-inline-end: calc(var(--space-6) * -0.75);
+  color: var(--text-subdued);
+}
+@media (max-width: 767px) {
+  .workflow {
+    grid-template-columns: 1fr;
+  }
+  .connector {
+    display: none;
+  }
+}
diff --git a/homepage/src/components/marketing/Workflow.tsx b/homepage/src/components/marketing/Workflow.tsx
new file mode 100644
index 0000000..9edbecb
--- /dev/null
+++ b/homepage/src/components/marketing/Workflow.tsx
@@ -0,0 +1,43 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './Workflow.module.css';
+
+export interface WorkflowItem {
+  id: string;
+  ordinal: string;
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+}
+
+interface WorkflowProps {
+  items: WorkflowItem[];
+  label: string;
+  headingLevel?: HeadingLevel;
+}
+
+export function Workflow({ items, label, headingLevel = 3 }: WorkflowProps) {
+  return (
+    <ol className={styles.workflow} aria-label={label}>
+      {items.map((item, index) => (
+        <li key={item.id} className={styles.step}>
+          <div className={styles.marker} aria-hidden="true">
+            {item.icon ? <Icon name={item.icon} /> : <BidiText>{item.ordinal}</BidiText>}
+          </div>
+          <div className={styles.content}>
+            <Heading level={headingLevel} appearance="subheading">
+              {item.title}
+            </Heading>
+            <Text variant="supporting">{item.description}</Text>
+          </div>
+          {index < items.length - 1 ? (
+            <span className={styles.connector} aria-hidden="true">
+              <Icon name="arrow-forward" directionBehavior="mirror" />
+            </span>
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  );
+}
diff --git a/homepage/src/components/media/MediaFrame.module.css b/homepage/src/components/media/MediaFrame.module.css
new file mode 100644
index 0000000..00eb591
--- /dev/null
+++ b/homepage/src/components/media/MediaFrame.module.css
@@ -0,0 +1,39 @@
+.figure {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+}
+.frame {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-inline-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+}
+.square {
+  aspect-ratio: 1;
+}
+.landscape {
+  aspect-ratio: 4 / 3;
+}
+.wide {
+  aspect-ratio: 16 / 9;
+}
+.portrait {
+  aspect-ratio: 3 / 4;
+}
+.auto {
+  aspect-ratio: auto;
+}
+.image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.figure figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
diff --git a/homepage/src/components/media/MediaFrame.tsx b/homepage/src/components/media/MediaFrame.tsx
new file mode 100644
index 0000000..831cddf
--- /dev/null
+++ b/homepage/src/components/media/MediaFrame.tsx
@@ -0,0 +1,47 @@
+import { classNames } from '@/lib/components/classNames';
+import Image, { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+import styles from './MediaFrame.module.css';
+
+export type MediaRatio = 'square' | 'landscape' | 'wide' | 'portrait' | 'auto';
+
+interface MediaFrameProps {
+  ratio?: MediaRatio;
+  children: ReactNode;
+  caption?: string;
+  decorative?: boolean;
+  className?: string;
+}
+
+export function MediaFrame({
+  ratio = 'landscape',
+  children,
+  caption,
+  decorative = false,
+  className,
+}: MediaFrameProps) {
+  return (
+    <figure className={classNames(styles.figure, className)} aria-hidden={decorative || undefined}>
+      <div className={classNames(styles.frame, styles[ratio])}>{children}</div>
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+}
+
+interface ResponsiveImageProps extends Omit<ImageProps, 'fill'> {
+  ratio?: MediaRatio;
+  caption?: string;
+}
+
+export function ResponsiveImage({
+  ratio = 'landscape',
+  caption,
+  alt,
+  ...props
+}: ResponsiveImageProps) {
+  return (
+    <MediaFrame ratio={ratio} decorative={alt === ''} {...(caption ? { caption } : {})}>
+      <Image alt={alt} {...props} className={classNames(styles.image, props.className)} />
+    </MediaFrame>
+  );
+}
diff --git a/homepage/src/components/navigation/Breadcrumbs.module.css b/homepage/src/components/navigation/Breadcrumbs.module.css
new file mode 100644
index 0000000..d4cfed8
--- /dev/null
+++ b/homepage/src/components/navigation/Breadcrumbs.module.css
@@ -0,0 +1,18 @@
+.nav ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.separator {
+  color: var(--text-subdued);
+}
diff --git a/homepage/src/components/navigation/Breadcrumbs.tsx b/homepage/src/components/navigation/Breadcrumbs.tsx
new file mode 100644
index 0000000..770e2d0
--- /dev/null
+++ b/homepage/src/components/navigation/Breadcrumbs.tsx
@@ -0,0 +1,39 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import styles from './Breadcrumbs.module.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumbs({ label, items }: { label: string; items: BreadcrumbItem[] }) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ol>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+          return (
+            <li key={`${item.label}-${index}`}>
+              {index > 0 ? (
+                <Icon
+                  name="chevron-forward"
+                  size="sm"
+                  directionBehavior="mirror"
+                  className={styles.separator}
+                />
+              ) : null}
+              {item.href && !current ? (
+                <ActionLink href={item.href} variant="inline">
+                  {item.label}
+                </ActionLink>
+              ) : (
+                <span aria-current={current ? 'page' : undefined}>{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/homepage/src/components/navigation/FooterLinkGroup.module.css b/homepage/src/components/navigation/FooterLinkGroup.module.css
new file mode 100644
index 0000000..2e5251e
--- /dev/null
+++ b/homepage/src/components/navigation/FooterLinkGroup.module.css
@@ -0,0 +1,11 @@
+.group h2 {
+  margin: 0;
+  font-size: var(--type-body-size);
+}
+.group ul {
+  display: grid;
+  gap: var(--space-2);
+  margin: var(--space-3) 0 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/homepage/src/components/navigation/FooterLinkGroup.tsx b/homepage/src/components/navigation/FooterLinkGroup.tsx
new file mode 100644
index 0000000..0783a58
--- /dev/null
+++ b/homepage/src/components/navigation/FooterLinkGroup.tsx
@@ -0,0 +1,30 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './FooterLinkGroup.module.css';
+
+export interface FooterLinkItem {
+  id: string;
+  label: string;
+  href?: string;
+  disabledReason?: string;
+}
+
+export function FooterLinkGroup({ title, links }: { title: string; links: FooterLinkItem[] }) {
+  return (
+    <section className={styles.group}>
+      <h2>{title}</h2>
+      <ul>
+        {links.map((link) => (
+          <li key={link.id}>
+            <ActionLink
+              href={link.href ?? '/'}
+              variant="muted"
+              {...(link.disabledReason ? { disabledReason: link.disabledReason } : {})}
+            >
+              {link.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/homepage/src/components/navigation/SectionNavigation.module.css b/homepage/src/components/navigation/SectionNavigation.module.css
new file mode 100644
index 0000000..e2e52d3
--- /dev/null
+++ b/homepage/src/components/navigation/SectionNavigation.module.css
@@ -0,0 +1,20 @@
+.nav {
+  overflow-x: auto;
+  border-block-end: 1px solid var(--border-standard);
+}
+.nav ul {
+  display: flex;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav a {
+  border-block-end: 3px solid transparent;
+}
+.nav a[aria-current='location'] {
+  border-block-end-color: var(--interactive-primary);
+  color: var(--text-primary);
+}
diff --git a/homepage/src/components/navigation/SectionNavigation.tsx b/homepage/src/components/navigation/SectionNavigation.tsx
new file mode 100644
index 0000000..ba09602
--- /dev/null
+++ b/homepage/src/components/navigation/SectionNavigation.tsx
@@ -0,0 +1,35 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './SectionNavigation.module.css';
+
+export interface SectionNavigationItem {
+  id: string;
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+export function SectionNavigation({
+  label,
+  items,
+}: {
+  label: string;
+  items: SectionNavigationItem[];
+}) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ul>
+        {items.map((item) => (
+          <li key={item.id}>
+            <ActionLink
+              href={item.href}
+              variant="navigation"
+              aria-current={item.current ? 'location' : undefined}
+            >
+              {item.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/homepage/src/components/overlays/Dialog.module.css b/homepage/src/components/overlays/Dialog.module.css
new file mode 100644
index 0000000..59ace84
--- /dev/null
+++ b/homepage/src/components/overlays/Dialog.module.css
@@ -0,0 +1,71 @@
+.dialog {
+  max-inline-size: none;
+  max-block-size: none;
+  margin: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  overflow: visible;
+}
+.dialog::backdrop {
+  background: var(--overlay-scrim);
+}
+.panel {
+  display: grid;
+  max-block-size: calc(100dvh - var(--space-8));
+  overflow: hidden;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+.modal .panel {
+  inline-size: min(44rem, calc(100vw - var(--space-8)));
+}
+.drawer {
+  margin-block: 0;
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+.drawer .panel {
+  inline-size: min(24rem, 88vw);
+  min-block-size: 100dvh;
+  border-radius: 0;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border-block-end: 1px solid var(--border-standard);
+}
+.header h2 {
+  margin: 0;
+  font-size: var(--type-heading-3-size);
+}
+.header p {
+  margin-block: var(--space-2) 0;
+  color: var(--text-secondary);
+}
+.content {
+  min-block-size: 0;
+  padding: var(--space-6);
+  overflow-y: auto;
+}
+@media (max-width: 479px) {
+  .modal .panel {
+    inline-size: calc(100vw - var(--space-4));
+    max-block-size: calc(100dvh - var(--space-4));
+  }
+  .header,
+  .content {
+    padding: var(--space-4);
+  }
+}
+@media (forced-colors: active) {
+  .panel {
+    border: 2px solid CanvasText;
+  }
+}
diff --git a/homepage/src/components/overlays/Dialog.tsx b/homepage/src/components/overlays/Dialog.tsx
new file mode 100644
index 0000000..8d4323d
--- /dev/null
+++ b/homepage/src/components/overlays/Dialog.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { useScrollLock } from '@/components/foundation/client-hooks';
+import { classNames } from '@/lib/components/classNames';
+import { useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';
+import styles from './Dialog.module.css';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  closeLabel: string;
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  returnFocusRef?: RefObject<HTMLElement | null>;
+  variant?: 'modal' | 'drawer';
+  dismissible?: boolean;
+  className?: string;
+}
+
+export function Dialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  closeLabel,
+  initialFocusRef,
+  returnFocusRef,
+  variant = 'modal',
+  dismissible = true,
+  className,
+}: DialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  useScrollLock(open);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+      window.requestAnimationFrame(() => (initialFocusRef?.current ?? closeRef.current)?.focus());
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [initialFocusRef, open]);
+
+  const close = () => {
+    dialogRef.current?.close();
+    onOpenChange(false);
+    window.requestAnimationFrame(() => returnFocusRef?.current?.focus());
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={classNames(styles.dialog, styles[variant], className)}
+      aria-labelledby={titleId}
+      aria-describedby={description ? descriptionId : undefined}
+      onCancel={(event) => {
+        if (!dismissible) {
+          event.preventDefault();
+          return;
+        }
+        event.preventDefault();
+        close();
+      }}
+      onClose={() => onOpenChange(false)}
+      onClick={(event) => {
+        if (dismissible && event.target === dialogRef.current) close();
+      }}
+    >
+      <div className={styles.panel}>
+        <header className={styles.header}>
+          <div>
+            <h2 id={titleId}>{title}</h2>
+            {description ? <p id={descriptionId}>{description}</p> : null}
+          </div>
+          {dismissible ? (
+            <Button
+              ref={closeRef}
+              intent="ghost"
+              size="small"
+              icon="close"
+              aria-label={closeLabel}
+              onClick={close}
+            />
+          ) : null}
+        </header>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/homepage/src/components/overlays/DropdownMenu.module.css b/homepage/src/components/overlays/DropdownMenu.module.css
new file mode 100644
index 0000000..143a549
--- /dev/null
+++ b/homepage/src/components/overlays/DropdownMenu.module.css
@@ -0,0 +1,39 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+.menu {
+  position: absolute;
+  z-index: var(--layer-overlay);
+  inset-block-start: calc(100% + var(--space-2));
+  inset-inline-end: 0;
+  display: grid;
+  min-inline-size: 13rem;
+  padding: var(--space-2);
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-sm);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-overlay);
+}
+.item {
+  min-block-size: 2.75rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  border: 0;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: start;
+}
+.item:hover:not(:disabled),
+.item:focus-visible {
+  background: var(--surface-muted);
+}
+.item:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.destructive {
+  color: var(--status-error-text);
+}
diff --git a/homepage/src/components/overlays/DropdownMenu.tsx b/homepage/src/components/overlays/DropdownMenu.tsx
new file mode 100644
index 0000000..31fba3f
--- /dev/null
+++ b/homepage/src/components/overlays/DropdownMenu.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@/components/actions/Button';
+import { useEscapeKey, useOutsideClick } from '@/components/foundation/client-hooks';
+import { classNames } from '@/lib/components/classNames';
+import { useRef, useState, type KeyboardEvent } from 'react';
+import styles from './DropdownMenu.module.css';
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  onSelect: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+
+interface DropdownMenuProps {
+  label: string;
+  items: MenuItem[];
+  className?: string;
+}
+
+export function DropdownMenu({ label, items, className }: DropdownMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  useOutsideClick(rootRef, () => setOpen(false), open);
+  useEscapeKey(() => setOpen(false), open);
+
+  const focusItem = (index: number) => {
+    const enabled = items
+      .map((item, itemIndex) => ({ item, itemIndex }))
+      .filter(({ item }) => !item.disabled);
+    const target = enabled[(index + enabled.length) % enabled.length];
+    if (target) itemRefs.current[target.itemIndex]?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const currentIndex = itemRefs.current.findIndex((node) => node === document.activeElement);
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusItem(currentIndex + 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusItem(currentIndex - 1);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    }
+  };
+
+  return (
+    <div ref={rootRef} className={classNames(styles.root, className)} onKeyDown={handleKeyDown}>
+      <Button
+        intent="tertiary"
+        trailingIcon="chevron-down"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {label}
+      </Button>
+      {open ? (
+        <div className={styles.menu} role="menu">
+          {items.map((item, index) => (
+            <button
+              key={item.id}
+              ref={(node) => {
+                itemRefs.current[index] = node;
+              }}
+              type="button"
+              role="menuitem"
+              disabled={item.disabled}
+              className={classNames(styles.item, item.destructive && styles.destructive)}
+              onClick={() => {
+                item.onSelect();
+                setOpen(false);
+              }}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/homepage/src/components/overlays/Tooltip.module.css b/homepage/src/components/overlays/Tooltip.module.css
new file mode 100644
index 0000000..046e648
--- /dev/null
+++ b/homepage/src/components/overlays/Tooltip.module.css
@@ -0,0 +1,41 @@
+.root {
+  position: relative;
+  display: inline-flex;
+}
+.tooltip {
+  position: absolute;
+  z-index: var(--layer-overlay);
+  inset-block-end: calc(100% + var(--space-2));
+  inset-inline-start: 50%;
+  inline-size: max-content;
+  max-inline-size: 16rem;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--surface-strong);
+  color: var(--text-primary);
+  font-size: var(--type-caption-size);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(var(--space-1));
+  transition:
+    opacity var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.root:hover .tooltip,
+.root:focus-within .tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+html[dir='rtl'] .tooltip {
+  transform: translateX(50%) translateY(var(--space-1));
+}
+html[dir='rtl'] .root:hover .tooltip,
+html[dir='rtl'] .root:focus-within .tooltip {
+  transform: translateX(50%) translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}
diff --git a/homepage/src/components/overlays/Tooltip.tsx b/homepage/src/components/overlays/Tooltip.tsx
new file mode 100644
index 0000000..98062ba
--- /dev/null
+++ b/homepage/src/components/overlays/Tooltip.tsx
@@ -0,0 +1,22 @@
+import { classNames } from '@/lib/components/classNames';
+import type { ReactNode } from 'react';
+import styles from './Tooltip.module.css';
+
+export function Tooltip({
+  content,
+  children,
+  className,
+}: {
+  content: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span className={classNames(styles.root, className)}>
+      {children}
+      <span role="tooltip" className={styles.tooltip}>
+        {content}
+      </span>
+    </span>
+  );
+}
diff --git a/homepage/src/components/surfaces/Callout.module.css b/homepage/src/components/surfaces/Callout.module.css
new file mode 100644
index 0000000..6ad7d3a
--- /dev/null
+++ b/homepage/src/components/surfaces/Callout.module.css
@@ -0,0 +1,16 @@
+.callout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border-inline-start: 4px solid var(--interactive-primary);
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.callout strong {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+.callout :last-child {
+  margin-block-end: 0;
+}
diff --git a/homepage/src/components/surfaces/Callout.tsx b/homepage/src/components/surfaces/Callout.tsx
new file mode 100644
index 0000000..dde932d
--- /dev/null
+++ b/homepage/src/components/surfaces/Callout.tsx
@@ -0,0 +1,23 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import type { ReactNode } from 'react';
+import styles from './Callout.module.css';
+
+export function Callout({
+  icon = 'info',
+  title,
+  children,
+}: {
+  icon?: ApprovedIconName;
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <aside className={styles.callout}>
+      <Icon name={icon} size="lg" />
+      <div>
+        <strong>{title}</strong>
+        <div>{children}</div>
+      </div>
+    </aside>
+  );
+}
diff --git a/homepage/src/components/surfaces/Card.module.css b/homepage/src/components/surfaces/Card.module.css
new file mode 100644
index 0000000..1bfd137
--- /dev/null
+++ b/homepage/src/components/surfaces/Card.module.css
@@ -0,0 +1,50 @@
+.card {
+  min-inline-size: 0;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+}
+.default {
+  background: var(--surface-primary);
+}
+.muted {
+  background: var(--surface-muted);
+}
+.elevated {
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-card);
+}
+.strong {
+  background: var(--surface-strong);
+}
+.none {
+  padding: 0;
+}
+.compact {
+  padding: var(--space-4);
+}
+.comfortable {
+  padding: var(--space-6);
+}
+.spacious {
+  padding: clamp(var(--space-6), 5vw, var(--space-10));
+}
+.interactive {
+  transition:
+    border-color var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.interactive:hover {
+  border-color: var(--interactive-primary);
+  transform: translateY(-2px);
+}
+.interactive:focus-within {
+  border-color: var(--focus-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+  .interactive {
+    transition: none;
+  }
+  .interactive:hover {
+    transform: none;
+  }
+}
diff --git a/homepage/src/components/surfaces/Card.tsx b/homepage/src/components/surfaces/Card.tsx
new file mode 100644
index 0000000..a2b5fc0
--- /dev/null
+++ b/homepage/src/components/surfaces/Card.tsx
@@ -0,0 +1,43 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Card.module.css';
+
+export type SurfaceTone = 'default' | 'muted' | 'elevated' | 'strong';
+export type SurfacePadding = 'none' | 'compact' | 'comfortable' | 'spacious';
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+  as?: 'article' | 'section' | 'div';
+  tone?: SurfaceTone;
+  padding?: SurfacePadding;
+  interactive?: boolean;
+  children: ReactNode;
+}
+
+export function Card({
+  as: Component = 'article',
+  tone = 'default',
+  padding = 'comfortable',
+  interactive = false,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <Component
+      className={classNames(
+        styles.card,
+        styles[tone],
+        styles[padding],
+        interactive && styles.interactive,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function Panel(props: Omit<CardProps, 'as'>) {
+  return <Card as="section" {...props} />;
+}
diff --git a/homepage/src/components/typography/Typography.module.css b/homepage/src/components/typography/Typography.module.css
new file mode 100644
index 0000000..4606fbb
--- /dev/null
+++ b/homepage/src/components/typography/Typography.module.css
@@ -0,0 +1,70 @@
+.heading {
+  margin: 0;
+  color: var(--text-primary);
+}
+.display {
+  max-inline-size: 16ch;
+  font-size: var(--type-display-size);
+  line-height: var(--line-display);
+  letter-spacing: var(--tracking-display);
+}
+.section {
+  font-size: var(--type-heading-2-size);
+}
+.subheading {
+  font-size: var(--type-heading-3-size);
+}
+.eyebrow {
+  margin: 0;
+  color: var(--interactive-primary);
+  font-size: var(--type-label-size);
+  font-weight: 800;
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+}
+html[dir='rtl'] .eyebrow {
+  letter-spacing: normal;
+  text-transform: none;
+}
+.text {
+  margin: 0;
+}
+.lead {
+  max-inline-size: 62ch;
+  color: var(--text-secondary);
+  font-size: var(--type-body-large-size);
+}
+.body {
+  max-inline-size: 70ch;
+}
+.supporting {
+  max-inline-size: 70ch;
+  color: var(--text-secondary);
+}
+.caption {
+  color: var(--text-secondary);
+  font-size: var(--type-caption-size);
+}
+.label {
+  font-size: var(--type-label-size);
+  font-weight: 700;
+}
+.quote {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding-inline-start: var(--space-6);
+  border-inline-start: 4px solid var(--interactive-primary);
+}
+.quote blockquote {
+  margin: 0;
+  font-size: var(--type-body-large-size);
+}
+.quote figcaption {
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+html[lang='ar'] .display {
+  letter-spacing: normal;
+  line-height: 1.25;
+}
diff --git a/homepage/src/components/typography/Typography.tsx b/homepage/src/components/typography/Typography.tsx
new file mode 100644
index 0000000..8fd8c44
--- /dev/null
+++ b/homepage/src/components/typography/Typography.tsx
@@ -0,0 +1,67 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Typography.module.css';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingStyle = 'display' | 'section' | 'subheading';
+
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: HeadingLevel;
+  appearance?: HeadingStyle;
+  children: ReactNode;
+}
+
+export function Heading({
+  level,
+  appearance = 'section',
+  className,
+  children,
+  ...props
+}: HeadingProps) {
+  const Component = `h${level}` as const;
+  return (
+    <Component className={classNames(styles.heading, styles[appearance], className)} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export function Eyebrow({ children, className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={classNames(styles.eyebrow, className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export type TextVariant = 'lead' | 'body' | 'supporting' | 'caption' | 'label';
+
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+  variant?: TextVariant;
+  children: ReactNode;
+}
+
+export function Text({ variant = 'body', className, children, ...props }: TextProps) {
+  return (
+    <p className={classNames(styles.text, styles[variant], className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function Quote({
+  children,
+  cite,
+  className,
+}: {
+  children: ReactNode;
+  cite?: string;
+  className?: string;
+}) {
+  return (
+    <figure className={classNames(styles.quote, className)}>
+      <blockquote>{children}</blockquote>
+      {cite ? <figcaption>{cite}</figcaption> : null}
+    </figure>
+  );
+}
diff --git a/homepage/src/content/development/component-lab.ts b/homepage/src/content/development/component-lab.ts
new file mode 100644
index 0000000..5f9b587
--- /dev/null
+++ b/homepage/src/content/development/component-lab.ts
@@ -0,0 +1,373 @@
+import type { Locale } from '@/lib/localization/config';
+
+export interface ComponentLabCopy {
+  developmentLabel: string;
+  title: string;
+  body: string;
+  actions: { primary: string; conversion: string; loading: string; disabled: string };
+  form: {
+    label: string;
+    supporting: string;
+    placeholder: string;
+    error: string;
+    checkbox: string;
+    switch: string;
+  };
+  tabs: { label: string; items: Array<{ id: string; label: string; content: string }> };
+  accordion: { items: Array<{ id: string; title: string; content: string }> };
+  alert: { title: string; body: string };
+  workflow: Array<{ id: string; ordinal: string; title: string; description: string }>;
+  comparison: { beforeTitle: string; afterTitle: string; before: string[]; after: string[] };
+  preview: {
+    title: string;
+    caption: string;
+    illustrative: string;
+    rows: Array<{ id: string; primary: string; secondary: string; status: string }>;
+  };
+  metric: { value: string; label: string; qualification: string; status: string };
+  cta: { title: string; body: string; primary: string; unavailable: string };
+  dialog: { open: string; title: string; description: string; close: string; content: string };
+  menu: { label: string; first: string; second: string };
+}
+
+const copy = {
+  en: {
+    developmentLabel: 'Development fixture, not production content',
+    title: 'Core component system',
+    body: 'A deterministic test surface for accessible, localized, theme-aware, and RTL-native components.',
+    actions: {
+      primary: 'Primary action',
+      conversion: 'Create account',
+      loading: 'Submitting',
+      disabled: 'Unavailable action',
+    },
+    form: {
+      label: 'Work email',
+      supporting: 'Use a fictional address in this development fixture.',
+      placeholder: 'name@fictional.invalid',
+      error: 'Enter an address in the required format.',
+      checkbox: 'Send a fictional confirmation',
+      switch: 'Enable compact preview',
+    },
+    tabs: {
+      label: 'Operations views',
+      items: [
+        { id: 'reservations', label: 'Reservations', content: 'Reservation fixture content.' },
+        {
+          id: 'fleet',
+          label: 'Fleet availability',
+          content: 'Fleet fixture content with intentionally expanded wording.',
+        },
+        { id: 'returns', label: 'Returns', content: 'Return inspection fixture content.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'How does the component system handle localization?',
+          content:
+            'Copy is passed as complete localized values rather than concatenated fragments.',
+        },
+        {
+          id: 'a2',
+          title: 'Does this submit data?',
+          content: 'No. External submission remains blocked pending CRM and legal approval.',
+        },
+      ],
+    },
+    alert: {
+      title: 'Development-only fixture',
+      body: 'This surface demonstrates behavior without publishing customer evidence or operational claims.',
+    },
+    workflow: [
+      {
+        id: 'reserve',
+        ordinal: '1',
+        title: 'Reservation',
+        description: 'Capture an illustrative reservation request.',
+      },
+      {
+        id: 'prepare',
+        ordinal: '2',
+        title: 'Preparation',
+        description: 'Review a fictional vehicle readiness state.',
+      },
+      {
+        id: 'handover',
+        ordinal: '3',
+        title: 'Handover',
+        description: 'Present a controlled pickup checklist.',
+      },
+      {
+        id: 'return',
+        ordinal: '4',
+        title: 'Return',
+        description: 'Record an illustrative inspection outcome.',
+      },
+    ],
+    comparison: {
+      beforeTitle: 'Fragmented operations',
+      afterTitle: 'Connected workflow',
+      before: ['Repeated manual entry', 'Scattered status checks', 'Unclear ownership'],
+      after: ['One shared workflow', 'Visible state changes', 'Explicit responsibility'],
+    },
+    preview: {
+      title: 'Fleet availability preview',
+      caption: 'Illustrative interface fixture. It is not live operational data.',
+      illustrative: 'Illustrative data',
+      rows: [
+        { id: 'RDG-1042', primary: 'Compact vehicle', secondary: 'RDG-1042', status: 'Available' },
+        { id: 'RDG-2088', primary: 'Utility vehicle', secondary: 'RDG-2088', status: 'Preparing' },
+      ],
+    },
+    metric: {
+      value: '24',
+      label: 'Illustrative workflow checkpoints',
+      qualification: 'Development fixture only. Not a public performance claim.',
+      status: 'Research only',
+    },
+    cta: {
+      title: 'CTA destination remains governed',
+      body: 'The conversion treatment is reusable, while unresolved destinations stay disabled.',
+      primary: 'Create account',
+      unavailable: 'Destination pending approval',
+    },
+    dialog: {
+      open: 'Open dialog',
+      title: 'Accessible dialog fixture',
+      description: 'Focus moves into this native modal and returns to the trigger.',
+      close: 'Close dialog',
+      content: 'No data is submitted from this component fixture.',
+    },
+    menu: { label: 'More actions', first: 'Review fixture', second: 'Archive fixture' },
+  },
+  fr: {
+    developmentLabel: 'Exemple de développement, contenu non destiné à la production',
+    title: 'Système de composants principal',
+    body: 'Une surface de test déterministe pour des composants accessibles, localisés, adaptés aux thèmes et natifs en RTL.',
+    actions: {
+      primary: 'Action principale',
+      conversion: 'Créer un compte',
+      loading: 'Envoi en cours',
+      disabled: 'Action indisponible',
+    },
+    form: {
+      label: 'Adresse e-mail professionnelle',
+      supporting: 'Utilisez une adresse fictive dans cet exemple de développement.',
+      placeholder: 'nom@fictif.invalid',
+      error: 'Saisissez une adresse au format requis.',
+      checkbox: 'Envoyer une confirmation fictive',
+      switch: 'Activer l’aperçu compact',
+    },
+    tabs: {
+      label: 'Vues des opérations',
+      items: [
+        { id: 'reservations', label: 'Réservations', content: 'Contenu fictif des réservations.' },
+        {
+          id: 'fleet',
+          label: 'Disponibilité du parc automobile',
+          content: 'Contenu fictif du parc avec un libellé volontairement plus long.',
+        },
+        { id: 'returns', label: 'Retours', content: 'Contenu fictif de l’inspection au retour.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'Comment le système gère-t-il la localisation ?',
+          content:
+            'Le texte est transmis sous forme de valeurs localisées complètes, sans concaténation de fragments.',
+        },
+        {
+          id: 'a2',
+          title: 'Ces composants transmettent-ils des données ?',
+          content:
+            'Non. La transmission externe reste bloquée jusqu’à l’approbation du CRM et du contenu juridique.',
+        },
+      ],
+    },
+    alert: {
+      title: 'Exemple réservé au développement',
+      body: 'Cette surface démontre les comportements sans publier de preuves client ni d’allégations opérationnelles.',
+    },
+    workflow: [
+      {
+        id: 'reserve',
+        ordinal: '1',
+        title: 'Réservation',
+        description: 'Saisir une demande de réservation illustrative.',
+      },
+      {
+        id: 'prepare',
+        ordinal: '2',
+        title: 'Préparation',
+        description: 'Examiner un état fictif de préparation du véhicule.',
+      },
+      {
+        id: 'handover',
+        ordinal: '3',
+        title: 'Remise du véhicule',
+        description: 'Présenter une liste de contrôle maîtrisée.',
+      },
+      {
+        id: 'return',
+        ordinal: '4',
+        title: 'Retour',
+        description: 'Consigner un résultat d’inspection illustratif.',
+      },
+    ],
+    comparison: {
+      beforeTitle: 'Opérations fragmentées',
+      afterTitle: 'Flux de travail connecté',
+      before: ['Saisie manuelle répétée', 'Vérifications dispersées', 'Responsabilités imprécises'],
+      after: ['Un flux partagé', 'Des changements d’état visibles', 'Une responsabilité explicite'],
+    },
+    preview: {
+      title: 'Aperçu de la disponibilité du parc',
+      caption:
+        'Exemple d’interface illustratif. Il ne s’agit pas de données opérationnelles en direct.',
+      illustrative: 'Données illustratives',
+      rows: [
+        {
+          id: 'RDG-1042',
+          primary: 'Véhicule compact',
+          secondary: 'RDG-1042',
+          status: 'Disponible',
+        },
+        {
+          id: 'RDG-2088',
+          primary: 'Véhicule utilitaire',
+          secondary: 'RDG-2088',
+          status: 'En préparation',
+        },
+      ],
+    },
+    metric: {
+      value: '24',
+      label: 'Points de contrôle illustratifs',
+      qualification: 'Exemple de développement uniquement. Ce n’est pas une allégation publique.',
+      status: 'Recherche uniquement',
+    },
+    cta: {
+      title: 'La destination du CTA reste contrôlée',
+      body: 'Le traitement de conversion est réutilisable, tandis que les destinations non résolues restent désactivées.',
+      primary: 'Créer un compte',
+      unavailable: 'Destination en attente d’approbation',
+    },
+    dialog: {
+      open: 'Ouvrir la boîte de dialogue',
+      title: 'Exemple de boîte de dialogue accessible',
+      description: 'Le focus entre dans la fenêtre modale native puis revient au déclencheur.',
+      close: 'Fermer la boîte de dialogue',
+      content: 'Aucune donnée n’est transmise depuis cet exemple.',
+    },
+    menu: { label: 'Autres actions', first: 'Examiner l’exemple', second: 'Archiver l’exemple' },
+  },
+  ar: {
+    developmentLabel: 'نموذج للتطوير وليس محتوى للإنتاج',
+    title: 'نظام المكوّنات الأساسي',
+    body: 'سطح اختبار ثابت لمكوّنات قابلة للوصول ومترجمة ومتوافقة مع السمات وداعمة لاتجاه الكتابة من اليمين إلى اليسار.',
+    actions: {
+      primary: 'إجراء أساسي',
+      conversion: 'حجز عرض توضيحي',
+      loading: 'جارٍ الإرسال',
+      disabled: 'إجراء غير متاح',
+    },
+    form: {
+      label: 'البريد الإلكتروني للعمل',
+      supporting: 'استخدم عنواناً افتراضياً في نموذج التطوير هذا.',
+      placeholder: 'name@fictional.invalid',
+      error: 'أدخل عنواناً بالتنسيق المطلوب.',
+      checkbox: 'إرسال تأكيد افتراضي',
+      switch: 'تفعيل المعاينة المدمجة',
+    },
+    tabs: {
+      label: 'عروض العمليات',
+      items: [
+        { id: 'reservations', label: 'الحجوزات', content: 'محتوى افتراضي للحجوزات.' },
+        {
+          id: 'fleet',
+          label: 'توفر أسطول المركبات',
+          content: 'محتوى افتراضي للأسطول مع نص موسّع عمداً.',
+        },
+        { id: 'returns', label: 'عمليات الإرجاع', content: 'محتوى افتراضي لفحص الإرجاع.' },
+      ],
+    },
+    accordion: {
+      items: [
+        {
+          id: 'a1',
+          title: 'كيف يتعامل نظام المكوّنات مع الترجمة؟',
+          content: 'يُمرر النص كقيم مترجمة كاملة بدلاً من تجميع أجزاء الجمل.',
+        },
+        {
+          id: 'a2',
+          title: 'هل ترسل هذه المكوّنات بيانات؟',
+          content:
+            'لا. يظل الإرسال الخارجي محظوراً إلى حين اعتماد نظام إدارة علاقات العملاء والمحتوى القانوني.',
+        },
+      ],
+    },
+    alert: {
+      title: 'نموذج مخصص للتطوير',
+      body: 'يوضح هذا السطح السلوك من دون نشر أدلة عملاء أو ادعاءات تشغيلية.',
+    },
+    workflow: [
+      { id: 'reserve', ordinal: '١', title: 'الحجز', description: 'تسجيل طلب حجز توضيحي.' },
+      {
+        id: 'prepare',
+        ordinal: '٢',
+        title: 'تجهيز المركبة',
+        description: 'مراجعة حالة افتراضية لجاهزية المركبة.',
+      },
+      {
+        id: 'handover',
+        ordinal: '٣',
+        title: 'التسليم',
+        description: 'عرض قائمة تحقق مضبوطة للاستلام.',
+      },
+      { id: 'return', ordinal: '٤', title: 'الإرجاع', description: 'تسجيل نتيجة فحص توضيحية.' },
+    ],
+    comparison: {
+      beforeTitle: 'عمليات مجزأة',
+      afterTitle: 'سير عمل مترابط',
+      before: ['إدخال يدوي متكرر', 'فحوصات حالة متفرقة', 'مسؤولية غير واضحة'],
+      after: ['سير عمل مشترك', 'تغييرات حالة مرئية', 'مسؤولية محددة'],
+    },
+    preview: {
+      title: 'معاينة توفر الأسطول',
+      caption: 'نموذج واجهة توضيحي وليس بيانات تشغيلية مباشرة.',
+      illustrative: 'بيانات توضيحية',
+      rows: [
+        { id: 'RDG-1042', primary: 'مركبة مدمجة', secondary: 'RDG-1042', status: 'متاحة' },
+        { id: 'RDG-2088', primary: 'مركبة خدمية', secondary: 'RDG-2088', status: 'قيد التجهيز' },
+      ],
+    },
+    metric: {
+      value: '٢٤',
+      label: 'نقاط تحقق توضيحية لسير العمل',
+      qualification: 'نموذج تطوير فقط وليس ادعاءً عاماً عن الأداء.',
+      status: 'للبحث فقط',
+    },
+    cta: {
+      title: 'تظل وجهة الدعوة إلى الإجراء خاضعة للحوكمة',
+      body: 'يمكن إعادة استخدام نمط التحويل، بينما تبقى الوجهات غير المحسومة معطلة.',
+      primary: 'حجز عرض توضيحي',
+      unavailable: 'الوجهة بانتظار الاعتماد',
+    },
+    dialog: {
+      open: 'فتح مربع الحوار',
+      title: 'نموذج مربع حوار قابل للوصول',
+      description: 'ينتقل التركيز إلى النافذة الأصلية ثم يعود إلى زر الفتح.',
+      close: 'إغلاق مربع الحوار',
+      content: 'لا تُرسل أي بيانات من نموذج المكوّن هذا.',
+    },
+    menu: { label: 'إجراءات إضافية', first: 'مراجعة النموذج', second: 'أرشفة النموذج' },
+  },
+} satisfies Record<Locale, ComponentLabCopy>;
+
+export function getComponentLabCopy(locale: Locale): ComponentLabCopy {
+  return copy[locale];
+}
diff --git a/homepage/src/content/homepage-model.ts b/homepage/src/content/homepage-model.ts
new file mode 100644
index 0000000..280a4a4
--- /dev/null
+++ b/homepage/src/content/homepage-model.ts
@@ -0,0 +1,273 @@
+import type { ApprovedIconName } from '@/components/foundation/Icon';
+import type { PreviewRow } from '@/components/marketing/ProductPreview';
+import type { HomepageMessages, ShellMessages } from '@/lib/localization/messages';
+
+export interface HomepageAction {
+  label: string;
+  disabledReason: string;
+}
+
+export interface TitledDescription {
+  id: string;
+  title: string;
+  description: string;
+  icon?: ApprovedIconName;
+}
+
+export interface HomepageWorkflowStep extends TitledDescription {
+  ordinal: string;
+}
+
+export interface HomepageFaqItem {
+  id: string;
+  title: string;
+  body: string;
+}
+
+export interface HomepageContent {
+  hero: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    primary: HomepageAction;
+    secondary: HomepageAction;
+    preview: {
+      title: string;
+      caption: string;
+      illustrativeLabel: string;
+      rows: PreviewRow[];
+    };
+  };
+  trust: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: TitledDescription[];
+  };
+  comparison: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    beforeTitle: string;
+    beforeItems: string[];
+    afterTitle: string;
+    afterItems: string[];
+  };
+  workflow: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    steps: HomepageWorkflowStep[];
+  };
+  roles: {
+    eyebrow: string;
+    title: string;
+    items: TitledDescription[];
+  };
+  modules: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: TitledDescription[];
+  };
+  results: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    metrics: TitledDescription[];
+    methodTitle: string;
+    method: string[];
+  };
+  integrations: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    items: string[];
+  };
+  security: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    checks: TitledDescription[];
+  };
+  pricing: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    factors: string[];
+    action: HomepageAction;
+    note: string;
+  };
+  faq: {
+    eyebrow: string;
+    title: string;
+    items: HomepageFaqItem[];
+  };
+  final: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    primary: HomepageAction;
+    secondary: HomepageAction;
+  };
+}
+
+const trustIcons: ApprovedIconName[] = ['calendar', 'car', 'check', 'settings'];
+const roleIcons: ApprovedIconName[] = ['settings', 'calendar', 'car', 'check'];
+const moduleIcons: ApprovedIconName[] = ['calendar', 'car', 'check', 'search', 'globe', 'settings'];
+const resultIcons: ApprovedIconName[] = ['calendar', 'settings', 'car', 'warning'];
+const securityIcons: ApprovedIconName[] = ['settings', 'search', 'globe', 'warning'];
+
+function pair(value: readonly string[], context: string): { title: string; description: string } {
+  const title = value[0];
+  const description = value[1];
+  if (title === undefined || description === undefined) {
+    throw new Error(`${context} must contain a title and description.`);
+  }
+  return { title, description };
+}
+
+function triple(
+  value: readonly string[],
+  context: string,
+): { ordinal: string; title: string; description: string } {
+  const ordinal = value[0];
+  const title = value[1];
+  const description = value[2];
+  if (ordinal === undefined || title === undefined || description === undefined) {
+    throw new Error(`${context} must contain an ordinal, title, and description.`);
+  }
+  return { ordinal, title, description };
+}
+
+function mapPairs(
+  values: readonly (readonly string[])[],
+  prefix: string,
+  icons: readonly ApprovedIconName[] = [],
+): TitledDescription[] {
+  return values.map((value, index) => {
+    const item = pair(value, `${prefix}[${index}]`);
+    const icon = icons[index];
+    return {
+      id: `${prefix}-${index + 1}`,
+      ...item,
+      ...(icon ? { icon } : {}),
+    };
+  });
+}
+
+export function buildHomepageContent(
+  homepage: HomepageMessages,
+  shell: ShellMessages,
+): HomepageContent {
+  const pendingReason = shell.states.pendingBody;
+
+  return {
+    hero: {
+      eyebrow: homepage.hero.eyebrow,
+      title: homepage.hero.title,
+      body: homepage.hero.body,
+      primary: { label: homepage.hero.primary, disabledReason: shell.header.demoUnavailable },
+      secondary: { label: homepage.hero.secondary, disabledReason: pendingReason },
+      preview: {
+        title: homepage.preview.title,
+        caption: homepage.hero.caption,
+        illustrativeLabel: `${homepage.preview.today} · ${homepage.preview.branch}`,
+        rows: [
+          {
+            id: 'preview-reservation-1',
+            primary: `${homepage.preview.r1} · ${homepage.preview.taskAssign}`,
+            secondary: homepage.preview.plate1,
+            status: homepage.preview.statusReady,
+            statusTone: 'success',
+          },
+          {
+            id: 'preview-reservation-2',
+            primary: `${homepage.preview.r2} · ${homepage.preview.taskInspect}`,
+            secondary: homepage.preview.plate2,
+            status: homepage.preview.statusDue,
+            statusTone: 'warning',
+          },
+        ],
+      },
+    },
+    trust: {
+      eyebrow: homepage.trust.eyebrow,
+      title: homepage.trust.title,
+      body: homepage.trust.body,
+      items: mapPairs(homepage.trust.items, 'lifecycle', trustIcons),
+    },
+    comparison: {
+      eyebrow: homepage.comparison.eyebrow,
+      title: homepage.comparison.title,
+      body: homepage.comparison.body,
+      beforeTitle: homepage.comparison.beforeTitle,
+      beforeItems: homepage.comparison.beforeItems,
+      afterTitle: homepage.comparison.afterTitle,
+      afterItems: homepage.comparison.afterItems,
+    },
+    workflow: {
+      eyebrow: homepage.workflow.eyebrow,
+      title: homepage.workflow.title,
+      body: homepage.workflow.body,
+      steps: homepage.workflow.steps.map((value, index) => ({
+        id: `workflow-${index + 1}`,
+        ...triple(value, `workflow.steps[${index}]`),
+      })),
+    },
+    roles: {
+      eyebrow: homepage.roles.eyebrow,
+      title: homepage.roles.title,
+      items: mapPairs(homepage.roles.roles, 'role', roleIcons),
+    },
+    modules: {
+      eyebrow: homepage.modules.eyebrow,
+      title: homepage.modules.title,
+      body: homepage.modules.body,
+      items: mapPairs(homepage.modules.items, 'module', moduleIcons),
+    },
+    results: {
+      eyebrow: homepage.results.eyebrow,
+      title: homepage.results.title,
+      body: homepage.results.body,
+      metrics: mapPairs(homepage.results.metrics, 'measurement', resultIcons),
+      methodTitle: homepage.results.methodTitle,
+      method: homepage.results.method,
+    },
+    integrations: {
+      eyebrow: homepage.integrations.eyebrow,
+      title: homepage.integrations.title,
+      body: homepage.integrations.body,
+      items: homepage.integrations.items,
+    },
+    security: {
+      eyebrow: homepage.security.eyebrow,
+      title: homepage.security.title,
+      body: homepage.security.body,
+      checks: mapPairs(homepage.security.checks, 'security', securityIcons),
+    },
+    pricing: {
+      eyebrow: homepage.pricing.eyebrow,
+      title: homepage.pricing.title,
+      body: homepage.pricing.body,
+      factors: homepage.pricing.factors,
+      action: { label: homepage.pricing.primary, disabledReason: pendingReason },
+      note: homepage.pricing.note,
+    },
+    faq: {
+      eyebrow: homepage.faq.eyebrow,
+      title: homepage.faq.title,
+      items: homepage.faq.items.map((value, index) => {
+        const item = pair(value, `faq.items[${index}]`);
+        return { id: `faq-${index + 1}`, title: item.title, body: item.description };
+      }),
+    },
+    final: {
+      eyebrow: homepage.final.eyebrow,
+      title: homepage.final.title,
+      body: homepage.final.body,
+      primary: { label: homepage.final.primary, disabledReason: shell.header.demoUnavailable },
+      secondary: { label: homepage.final.secondary, disabledReason: pendingReason },
+    },
+  };
+}
diff --git a/homepage/src/content/locales/ar/homepage.json b/homepage/src/content/locales/ar/homepage.json
new file mode 100644
index 0000000..3de56fc
--- /dev/null
+++ b/homepage/src/content/locales/ar/homepage.json
@@ -0,0 +1,446 @@
+{
+  "meta": {
+    "langName": "العربية",
+    "dir": "rtl",
+    "title": "RentalDriveGo | تشغيل مترابط لتأجير السيارات",
+    "description": "أدِر الحجوزات والمركبات والعقود والتسليم والإرجاع ضمن منصة تشغيل مترابطة."
+  },
+  "header": {
+    "nav": [
+      [
+        "product",
+        "المنتج"
+      ],
+      [
+        "workflow",
+        "سير العمل"
+      ],
+      [
+        "modules",
+        "الوحدات"
+      ],
+      [
+        "pricing",
+        "التسعير"
+      ],
+      [
+        "faq",
+        "الأسئلة الشائعة"
+      ]
+    ],
+    "login": "تسجيل الدخول",
+    "demo": "أنشئ حسابًا",
+    "menu": "فتح القائمة",
+    "language": "اللغة",
+    "theme": "المظهر",
+    "light": "فاتح",
+    "dark": "داكن",
+    "system": "النظام"
+  },
+  "hero": {
+    "eyebrow": "تشغيل تأجير السيارات ضمن نظام مترابط",
+    "title": "أدِر كل عملية تأجير من الحجز حتى إعادة المركبة في نظام واحد.",
+    "body": "اجمع الحجوزات والمركبات والعقود والتسليم والإرجاع في سجل تشغيلي واحد، كي يرى كل فريق ما يتطلب المتابعة بعد ذلك.",
+    "primary": "أنشئ حسابًا للمنتج",
+    "secondary": "شاهد جولة المنتج",
+    "caption": "واجهة توضيحية للمنتج. يجب أن تستخدم الشاشات النهائية بيانات ولقطات معتمدة."
+  },
+  "trust": {
+    "eyebrow": "تغطية تشغيلية",
+    "title": "سير عمل واحد يغطي دورة التأجير كاملة.",
+    "body": "حافظ على ترابط سياق العميل والمركبة والعقد والمهام مع تقدم عملية التأجير.",
+    "items": [
+      [
+        "الحجز",
+        "سجّل الطلب والبيانات المطلوبة."
+      ],
+      [
+        "المركبة",
+        "تابع التوافر والجاهزية."
+      ],
+      [
+        "العقد",
+        "اجمع مهام التسليم والسجلات في موضع واحد."
+      ],
+      [
+        "الإرجاع",
+        "سجّل الحالة وأغلق أعمال المتابعة."
+      ]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "لماذا التغيير",
+    "title": "استبدل عمليات التسليم المجزأة بسير تشغيلي مشترك.",
+    "body": "تكلفة الأدوات المنفصلة لا تظهر دائمًا في عطل كبير، بل تتراكم يوميًا عبر تكرار الإدخال وضياع السياق وتأخر المتابعة.",
+    "beforeTitle": "تشغيل مجزأ",
+    "beforeItems": [
+      "نسخ بيانات الحجز بين أدوات متعددة",
+      "تأكيد حالة المركبة عبر الرسائل",
+      "متابعة مهام العقد بالاعتماد على الذاكرة",
+      "اكتشاف مشكلات الإرجاع بعد مغادرة العميل"
+    ],
+    "afterTitle": "تشغيل مترابط",
+    "afterItems": [
+      "حالة حجز واحدة يراها الفريق",
+      "ربط جاهزية المركبة بعملية التأجير",
+      "إظهار متطلبات التسليم قبل تسليم المركبة",
+      "إنشاء متابعة الإرجاع بينما لا يزال السياق واضحًا"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "سير عمل متكامل",
+    "title": "حرّك عملية التأجير إلى الأمام من دون فقدان السياق.",
+    "body": "توضح كل خطوة القرار والمسؤول والإجراء التالي بدل دفن التشغيل داخل قائمة عامة من الميزات.",
+    "steps": [
+      [
+        "01",
+        "تسجيل الحجز",
+        "سجّل التواريخ وبيانات السائق والمتطلبات والمصدر."
+      ],
+      [
+        "02",
+        "تخصيص مركبة جاهزة",
+        "طابق التوافر مع الفئة والموقع وحالة الجاهزية."
+      ],
+      [
+        "03",
+        "إكمال التسليم",
+        "تحقق من المستندات والفحص والعقد ومهام تسليم المركبة."
+      ],
+      [
+        "04",
+        "معالجة الإرجاع",
+        "سجّل الحالة وأغلق الأعمال المفتوحة وأعد المركبة إلى التوافر."
+      ]
+    ]
+  },
+  "roles": {
+    "eyebrow": "مصمم لفريق التشغيل",
+    "title": "امنح كل دور السياق الذي يحتاجه من دون إنشاء نسخ متعددة من الحقيقة.",
+    "roles": [
+      [
+        "المالك أو المدير",
+        "اطّلع على عبء العمل والاستثناءات والمؤشرات التشغيلية عبر النشاط."
+      ],
+      [
+        "فريق الحجوزات",
+        "حوّل الطلبات إلى حجوزات مؤكدة مع عدد أقل من عمليات التسليم."
+      ],
+      [
+        "الأسطول والتشغيل",
+        "اعرف المركبات المتاحة أو المحجوبة أو المستحقة أو التي تنتظر إجراءً."
+      ],
+      [
+        "مكتب الاستقبال",
+        "حضّر مهام التسليم والإرجاع قبل انتظار العميل."
+      ]
+    ]
+  },
+  "modules": {
+    "eyebrow": "وحدات المنتج",
+    "title": "نواة مترابطة منظّمة حول أعمال التأجير الفعلية.",
+    "body": "توضح حدود الوحدات المسؤوليات، بينما تمنع السجلات المشتركة فوضى النسخ واللصق المعتادة.",
+    "items": [
+      [
+        "الحجوزات",
+        "التوافر والتواريخ ومتطلبات العميل والحالة ضمن سير واحد."
+      ],
+      [
+        "جاهزية الأسطول",
+        "توافر المركبات والحجوزات التشغيلية وحالة الخدمة وسياق الموقع."
+      ],
+      [
+        "عقود الإيجار",
+        "متطلبات التسليم وحالة العقد والسجلات التشغيلية."
+      ],
+      [
+        "فحص المركبة",
+        "فحوص منظمة عند التسليم والإرجاع مع مهام متابعة."
+      ],
+      [
+        "سجلات العملاء",
+        "سجل التأجير وبيانات الاتصال المرتبطة بالعمل الجاري."
+      ],
+      [
+        "التقارير التشغيلية",
+        "تعريفات وعروض تشغيلية يمكن التحقق منها مقابل النشاط المصدر."
+      ]
+    ]
+  },
+  "results": {
+    "eyebrow": "نتائج قابلة للقياس",
+    "title": "قِس التغيير، لا الخطاب التسويقي.",
+    "body": "لا ينبغي نشر أي نتيجة قبل اعتماد خط أساس حقيقي لعميل وفترة مقارنة وتعريف واضح للبيانات. لذلك تعرض هذه النسخة منهجية القياس بدل نسب مئوية مختلقة.",
+    "metrics": [
+      [
+        "زمن معالجة الحجز",
+        "من استلام طلب صالح للعمل حتى تأكيد الحجز."
+      ],
+      [
+        "زمن إعادة المركبة إلى الجاهزية",
+        "من تسجيل الإرجاع حتى حالة جاهز للتأجير."
+      ],
+      [
+        "معدل استخدام الأسطول",
+        "مقارنة أيام التوافر بأيام التأجير وفق تعريف واحد معتمد."
+      ],
+      [
+        "متابعة حالات التأخير",
+        "عمليات التأجير المتأخرة المفتوحة مع مسؤول وإجراء تالٍ."
+      ]
+    ],
+    "methodTitle": "المنهجية المطلوبة قبل نشر أي نتيجة",
+    "method": [
+      "سجّل خط أساس قبل الإطلاق باستخدام تعريفات المؤشرات نفسها.",
+      "قارن مواقع وفئات أسطول وفترات تشغيل متكافئة.",
+      "انشر حجم العينة والاستثناءات وفترة القياس.",
+      "اربط كل نتيجة منشورة بسجل دليل معتمد."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "التكاملات",
+    "title": "اربط الأنظمة التي يعتمد عليها تشغيلك حاليًا.",
+    "body": "يُعتمد نطاق التكامل خلال مرحلة الاستكشاف ليتوافق مع سوقك وبنيتك الحالية وملكية البيانات. لا تُعرض أسماء شركاء قبل التحقق من توافر الموصل.",
+    "items": [
+      "المحاسبة والمالية",
+      "المدفوعات ومبالغ الضمان",
+      "الاتصال بالمركبات وبياناتها",
+      "خدمات الهوية والمستندات",
+      "البريد الإلكتروني والرسائل والإشعارات",
+      "الموقع الإلكتروني وقنوات الحجز"
+    ]
+  },
+  "security": {
+    "eyebrow": "الأمن والموثوقية",
+    "title": "قيّم المنصة بالأدلة، لا بالشعارات.",
+    "body": "لا تُنشر شهادات أو وعود بمستوى الخدمة قبل وجود وثائق معتمدة. أثناء التقييم، اطلب إجابات محددة حول الضوابط المهمة لنشاطك.",
+    "checks": [
+      [
+        "التحكم في الوصول",
+        "الأدوار والصلاحيات وإجراءات المسؤول وإنهاء وصول المستخدم."
+      ],
+      [
+        "قابلية التدقيق",
+        "التغييرات المسجلة والقابلة للبحث والتصدير."
+      ],
+      [
+        "معالجة البيانات",
+        "الملكية والاحتفاظ والتصدير والحذف والجهات الفرعية."
+      ],
+      [
+        "استمرارية العمل",
+        "النسخ الاحتياطي والاستعادة والتواصل عند الحوادث والدعم."
+      ]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "معاينة التسعير",
+    "title": "يجب أن يعكس التسعير طبيعة التشغيل الفعلية.",
+    "body": "لا يُعرض سعر عام قبل اعتماد النموذج التجاري والحدود المشمولة. يبدأ التقييم بالعوامل التي تؤثر فعلًا في النطاق.",
+    "factors": [
+      "حجم الأسطول وعدد المواقع النشطة",
+      "الوحدات المطلوبة وأدوار المستخدمين",
+      "نطاق ترحيل البيانات والتهيئة",
+      "متطلبات التكامل والدعم"
+    ],
+    "primary": "اطلب عرض سعر",
+    "note": "لا تنشر هذه النسخة أسعار بطاقات أو خصومات أو حدود باقات."
+  },
+  "faq": {
+    "eyebrow": "الأسئلة الشائعة",
+    "title": "أسئلة ينبغي للمشتري طرحها قبل إنشاء الحساب.",
+    "items": [
+      [
+        "هل RentalDriveGo مخصص فقط لشركات التأجير الكبيرة؟",
+        "لا يزال السوق المستهدف وهيكل الباقات قيد الاعتماد. يجب أن يحدد إنشاء الحساب حجم الأسطول والمواقع وسير العمل والوحدات المطلوبة بدل افتراض أن إعدادًا واحدًا يناسب الجميع."
+      ],
+      [
+        "هل يمكننا الاحتفاظ بأنظمتنا الحالية؟",
+        "تُراجع التكاملات المحتملة خلال الاستكشاف. يجب تأكيد توافر الموصل وملكية البيانات وجهد الترحيل والمزامنة المستمرة قبل تقديم أي وعد."
+      ],
+      [
+        "هل تدعم المنصة لغات متعددة؟",
+        "يدعم الموقع ونظام التصميم المعتمد الإنجليزية والفرنسية والعربية. تستخدم العربية اتجاهًا حقيقيًا للمستند من اليمين إلى اليسار، لا مجرد محاذاة شكلية."
+      ],
+      [
+        "كيف يُحسب السعر؟",
+        "النموذج التجاري قيد الاعتماد. حتى ذلك الحين، يجب أن يوضح كل عرض النطاق والوحدات والحدود والتهيئة والتكاملات والدعم."
+      ],
+      [
+        "ما الشهادات الأمنية المتوفرة؟",
+        "لا تدّعي هذه النسخة وجود أي شهادة. يجب تقديم الأدلة الأمنية عبر وثائق معتمدة أثناء التقييم وعدم نشرها إلا بعد التحقق."
+      ],
+      [
+        "ماذا يحدث أثناء إنشاء الحساب؟",
+        "ينبغي أن ترسم الجلسة سير عملك من الحجز حتى الإرجاع، وتعرض المسار المناسب في المنتج، وتحدد احتياجات التكامل، وتوثق أسئلة الملاءمة غير المحسومة."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "شاهد سير العمل كاملًا",
+    "title": "أحضر عملية تأجير حقيقية.",
+    "body": "سنتتبع عمليات التسليم والاستثناءات والمعلومات التي يحتاجها فريقك من الحجز حتى إعادة المركبة.",
+    "primary": "أنشئ حسابًا للمنتج",
+    "secondary": "تواصل مع المبيعات"
+  },
+  "footer": {
+    "tagline": "تشغيل مترابط لتأجير السيارات من الحجز حتى الإرجاع.",
+    "groups": [
+      [
+        "المنتج",
+        [
+          [
+            "سير العمل",
+            "#workflow"
+          ],
+          [
+            "الوحدات",
+            "#modules"
+          ],
+          [
+            "التسعير",
+            "#pricing"
+          ]
+        ]
+      ],
+      [
+        "الشركة",
+        [
+          [
+            "تواصل مع المبيعات",
+            "#contact"
+          ],
+          [
+            "أنشئ حسابًا",
+            "#signup"
+          ]
+        ]
+      ],
+      [
+        "الحساب",
+        [
+          [
+            "تسجيل الدخول",
+            "#login"
+          ],
+          [
+            "اللغة",
+            "#language"
+          ],
+          [
+            "المظهر",
+            "#theme"
+          ]
+        ]
+      ],
+      [
+        "قانوني",
+        [
+          [
+            "الخصوصية",
+            "#!"
+          ],
+          [
+            "الشروط",
+            "#!"
+          ],
+          [
+            "إمكانية الوصول",
+            "#!"
+          ]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. تظل الأدلة والادعاءات التجارية خاضعة للاعتماد."
+  },
+  "form": {
+    "title": "أنشئ حسابًا للمنتج",
+    "body": "أخبرنا كيف يعمل نشاط تأجير السيارات لديك. الحقول المطلوبة مميزة.",
+    "name": "الاسم الكامل",
+    "email": "البريد الإلكتروني للعمل",
+    "company": "الشركة",
+    "fleet": "الحجم التقريبي للأسطول",
+    "market": "الدولة أو سوق التشغيل",
+    "language": "اللغة المفضلة",
+    "message": "ما الموضوع الذي ينبغي أن نركز عليه؟",
+    "submit": "إنشاء حسابي",
+    "privacy": "يتحقق وضع غير الإنتاج من سير العمل ثم يتخلص من الطلب. لا يُرسل أي عميل محتمل إلى نظام مبيعات. يظل نص الخصوصية والموافقة النهائي محظورًا إلى حين الاعتماد القانوني.",
+    "close": "إغلاق",
+    "required": "مطلوب",
+    "emailError": "أدخل عنوان بريد إلكتروني صالحًا للعمل.",
+    "requiredError": "هذا الحقل مطلوب.",
+    "fleetOptions": [
+      "اختر خيارًا",
+      "من 1 إلى 9 مركبات",
+      "من 10 إلى 24 مركبة",
+      "من 25 إلى 49 مركبة",
+      "من 50 إلى 99 مركبة",
+      "من 100 إلى 249 مركبة",
+      "250 مركبة أو أكثر"
+    ],
+    "langOptions": [
+      "English",
+      "Français",
+      "العربية"
+    ],
+    "successTitle": "تم تسجيل إنشاء الحساب",
+    "successBody": "اكتمل مسار الحجز في هذا النموذج الأولي. لم يُرسل أي طلب إلى نظام مبيعات فعلي.",
+    "submitAnother": "إرسال طلب آخر",
+    "submissionError": "تعذر على النموذج الأولي إكمال الطلب. ما زالت بياناتك متاحة. حاول مرة أخرى.",
+    "errorSummary": "راجع الحقول المميزة ثم حاول مرة أخرى.",
+    "optional": "اختياري",
+    "messageHelp": "لا تُدرج معلومات شخصية حساسة أو معلومات دفع.",
+    "messageCount": "حرفًا",
+    "submitting": "جارٍ إرسال الطلب",
+    "retry": "حاول مرة أخرى",
+    "closeBlocked": "انتظر حتى يكتمل الإرسال الحالي قبل الإغلاق.",
+    "invalidOptionError": "اختر خيارًا صالحًا.",
+    "tooLongError": "هذا الإدخال طويل جدًا.",
+    "configurationError": "إنشاء الحساب غير متاح لأن اعتماد تكامل الإنتاج لم يكتمل.",
+    "timeoutError": "انتهت مهلة الطلب. لا تزال بياناتك متاحة؛ حاول مرة أخرى.",
+    "duplicateError": "تمت معالجة هذا الطلب بالفعل. لم يُنشأ عميل محتمل ثانٍ.",
+    "rateLimitError": "تم استلام عدد كبير جدًا من الطلبات. حاول مرة أخرى لاحقًا.",
+    "genericError": "تعذر إكمال الطلب. لا تزال بياناتك متاحة.",
+    "localModeLabel": "موصل محلي آمن",
+    "marketDefault": "المغرب"
+  },
+  "preview": {
+    "today": "اليوم",
+    "branch": "الفرع المركزي",
+    "title": "نظرة عامة على التشغيل",
+    "reservations": "الحجوزات",
+    "ready": "مركبات جاهزة",
+    "attention": "تحتاج متابعة",
+    "active": "عمليات تأجير نشطة",
+    "r1": "تسليم الساعة 10:30",
+    "r2": "إرجاع مستحق الساعة 14:00",
+    "r3": "الفحص مطلوب",
+    "vehicle": "المركبة",
+    "customer": "العميل",
+    "status": "الحالة",
+    "task": "الإجراء التالي",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "جاهزة",
+    "statusDue": "مستحقة اليوم",
+    "taskAssign": "تأكيد مستندات السائق",
+    "taskInspect": "إكمال فحص الإرجاع"
+  },
+  "tour": {
+    "title": "جولة في المنتج",
+    "intro": "تابع عملية تأجير واحدة من الحجز حتى الإرجاع.",
+    "back": "السابق",
+    "next": "التالي",
+    "finish": "إنهاء الجولة",
+    "close": "إغلاق جولة المنتج",
+    "step": "الخطوة",
+    "of": "من"
+  },
+  "research": {
+    "title": "وضع البحث",
+    "events": "أحداث",
+    "export": "تصدير الأحداث",
+    "clear": "مسح",
+    "close": "إغلاق"
+  }
+}
diff --git a/homepage/src/content/locales/ar/shell.json b/homepage/src/content/locales/ar/shell.json
new file mode 100644
index 0000000..275b99d
--- /dev/null
+++ b/homepage/src/content/locales/ar/shell.json
@@ -0,0 +1,94 @@
+{
+  "skipToContent": "الانتقال إلى المحتوى الرئيسي",
+  "brandLabel": "الصفحة الرئيسية لـ RentalDriveGo",
+  "foundationLabel": "أساس التطبيق",
+  "header": {
+    "navigationLabel": "التنقل الرئيسي",
+    "controlsLabel": "عناصر التحكم في العرض واللغة",
+    "menuOpen": "فتح قائمة التنقل",
+    "menuClose": "إغلاق قائمة التنقل",
+    "nav": {
+      "product": "المنتج",
+      "workflow": "سير العمل",
+      "modules": "الوحدات",
+      "pricing": "التسعير",
+      "faq": "الأسئلة الشائعة"
+    },
+    "login": "تسجيل الدخول",
+    "loginUnavailable": "وجهة تسجيل الدخول في انتظار الاعتماد",
+    "demo": "أنشئ حسابًا",
+    "demoUnavailable": "إنشاء الحساب في انتظار اعتماد التكامل"
+  },
+  "controls": {
+    "language": "اللغة",
+    "theme": "المظهر",
+    "themeStatus": "تفضيل المظهر الحالي: {value}",
+    "localeNames": {
+      "en": "الإنجليزية",
+      "fr": "الفرنسية",
+      "ar": "العربية"
+    },
+    "themes": {
+      "light": "فاتح",
+      "dark": "داكن",
+      "system": "النظام"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "تذييل الموقع",
+    "tagline": "تشغيل مترابط لتأجير السيارات من الحجز حتى الإرجاع.",
+    "groups": {
+      "product": "المنتج",
+      "company": "الشركة",
+      "account": "الحساب",
+      "legal": "قانوني"
+    },
+    "links": {
+      "workflow": "سير العمل",
+      "modules": "الوحدات",
+      "pricing": "التسعير",
+      "faq": "الأسئلة الشائعة",
+      "contact": "تواصل مع المبيعات",
+      "demo": "أنشئ حسابًا",
+      "login": "تسجيل الدخول",
+      "privacy": "الخصوصية",
+      "terms": "الشروط",
+      "accessibility": "إمكانية الوصول"
+    },
+    "pending": "في انتظار الاعتماد",
+    "copyrightPrefix": "©",
+    "releaseNotice": "يظل النشر العام متوقفًا حتى معالجة العوائق الموثقة."
+  },
+  "states": {
+    "loadingTitle": "جارٍ التحميل",
+    "loadingBody": "جارٍ تجهيز هيكل التطبيق.",
+    "errorTitle": "حدث خطأ",
+    "errorBody": "تعذر عرض الصفحة، ولم تُكشف أي تفاصيل تقنية.",
+    "retry": "إعادة المحاولة",
+    "notFoundTitle": "الصفحة غير موجودة",
+    "notFoundBody": "لا يطابق هذا العنوان مسارًا محليًا معتمدًا.",
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "pendingTitle": "الوجهة غير متاحة",
+    "pendingBody": "هذا المسار معرّف، لكن محتواه أو وجهته الإنتاجية ما زالت في انتظار الاعتماد."
+  },
+  "foundation": {
+    "eyebrow": "أساس المرحلة 11",
+    "title": "هيكل تطبيق محلي ومتوافق مع المظاهر",
+    "body": "تثبت هذه النسخة الأسس المرئية وأسس التوجيه والاتجاه وإمكانية الوصول والبيانات الوصفية من دون الادعاء بأن الصفحة التسويقية الكاملة أصبحت جاهزة.",
+    "readinessLabel": "مجالات الأساس المنفذة",
+    "items": [
+      ["الرموز الدلالية", "تستهلك أنماط المكونات طبقة دلالية موثقة."],
+      ["سلوك المظهر", "تُحل تفضيلات المظهر الفاتح والداكن والنظام وتُحفظ."],
+      ["التوطين", "تُعرض الإنجليزية والفرنسية والعربية من مسارات مسبوقة باللغة."],
+      ["اتجاه المستند", "تُعرض العربية باتجاه حقيقي من اليمين إلى اليسار على مستوى المستند."],
+      ["إمكانية الوصول", "رابط التخطي والتركيز المرئي والمعالم وتقليل الحركة مدمجة."],
+      ["هيكل التطبيق", "يتوفر رأس متجاوب وتنقل للجوال وتذييل وحالات عامة."]
+    ],
+    "deferredLabel": "وجهات الصفحة الرئيسية المؤجلة",
+    "deferredBody": "ترتبط وجهة التنقل المعتمدة هذه ببيان المسارات، بينما يظل قسمها الإنتاجي خارج نطاق المرحلة 11."
+  },
+  "metadata": {
+    "pendingTitle": "وجهة غير متاحة | RentalDriveGo",
+    "pendingDescription": "وجهة RentalDriveGo المحلية هذه معرّفة، لكن نشرها في بيئة الإنتاج غير معتمد."
+  }
+}
diff --git a/homepage/src/content/locales/en/homepage.json b/homepage/src/content/locales/en/homepage.json
new file mode 100644
index 0000000..a256abe
--- /dev/null
+++ b/homepage/src/content/locales/en/homepage.json
@@ -0,0 +1,324 @@
+{
+  "meta": {
+    "langName": "English",
+    "dir": "ltr",
+    "title": "RentalDriveGo | Connected rental-car operations",
+    "description": "Run reservations, vehicles, agreements, handovers, and returns in one connected rental operations platform."
+  },
+  "header": {
+    "nav": [
+      ["product", "Product"],
+      ["workflow", "Workflow"],
+      ["modules", "Modules"],
+      ["pricing", "Pricing"],
+      ["faq", "FAQ"]
+    ],
+    "login": "Log in",
+    "demo": "Create account",
+    "menu": "Open menu",
+    "language": "Language",
+    "theme": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "hero": {
+    "eyebrow": "Rental operations, connected",
+    "title": "Run every rental from reservation to return in one system.",
+    "body": "Give reservations, fleet, agreements, handovers, and returns one operational record, so each team sees what needs attention next.",
+    "primary": "Create account",
+    "secondary": "Watch product tour",
+    "caption": "Illustrative product interface. Final screens must use approved product data and captures."
+  },
+  "trust": {
+    "eyebrow": "Operational coverage",
+    "title": "One workflow across the rental lifecycle.",
+    "body": "Keep the customer, vehicle, agreement, and task context connected as the rental moves forward.",
+    "items": [
+      ["Reservation", "Capture the request and required details."],
+      ["Vehicle", "Track availability and readiness."],
+      ["Agreement", "Keep pickup tasks and records together."],
+      ["Return", "Record condition and close follow-up work."]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "Why change",
+    "title": "Replace fragmented handoffs with a shared operating flow.",
+    "body": "The cost of disconnected tools is rarely one dramatic failure. It is the daily accumulation of duplicate entry, missing context, and delayed follow-up.",
+    "beforeTitle": "Fragmented operation",
+    "beforeItems": [
+      "Reservation details copied between tools",
+      "Vehicle status confirmed through messages",
+      "Agreement tasks tracked from memory",
+      "Return issues discovered after the customer leaves"
+    ],
+    "afterTitle": "Connected operation",
+    "afterItems": [
+      "One reservation status visible to the team",
+      "Vehicle readiness attached to the rental",
+      "Pickup requirements shown before handover",
+      "Return follow-up created while context is fresh"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "End-to-end workflow",
+    "title": "Move the rental forward without losing the thread.",
+    "body": "Each step exposes the decision, owner, and next action instead of burying operations inside a generic feature list.",
+    "steps": [
+      ["01", "Capture the reservation", "Record dates, driver details, requirements, and source."],
+      ["02", "Assign a ready vehicle", "Match availability with class, location, and readiness."],
+      ["03", "Complete pickup", "Confirm documents, inspection, agreement, and handover tasks."],
+      ["04", "Process the return", "Record condition, close open work, and release the vehicle."]
+    ]
+  },
+  "roles": {
+    "eyebrow": "Built for the operating team",
+    "title": "Give each role the context it needs, without creating separate versions of the truth.",
+    "roles": [
+      ["Owner or manager", "See workload, exceptions, and operating signals across the business."],
+      ["Reservations team", "Move requests from inquiry to confirmed rental with fewer handoffs."],
+      [
+        "Fleet and operations",
+        "Know which vehicles are available, blocked, due, or awaiting action."
+      ],
+      ["Front desk", "Prepare pickup and return tasks before the customer is waiting."]
+    ]
+  },
+  "modules": {
+    "eyebrow": "Product modules",
+    "title": "A connected core, organized around real rental work.",
+    "body": "Module boundaries clarify responsibility while shared records prevent the usual copy-and-paste archaeology.",
+    "items": [
+      ["Reservations", "Availability, dates, customer requirements, and status in one flow."],
+      ["Fleet readiness", "Vehicle availability, blocks, service state, and location context."],
+      ["Rental agreements", "Pickup requirements, agreement status, and operational records."],
+      [
+        "Vehicle inspections",
+        "Structured pickup and return condition checks with follow-up tasks."
+      ],
+      ["Customer records", "Rental history and contact context attached to active work."],
+      [
+        "Operations reporting",
+        "Definitions and operational views that can be validated against source activity."
+      ]
+    ]
+  },
+  "results": {
+    "eyebrow": "Measured results",
+    "title": "Measure the change, not the marketing.",
+    "body": "No outcome claim should appear until a real customer baseline, comparison period, and data definition are approved. The production page therefore shows the measurement plan instead of fictional percentages.",
+    "metrics": [
+      ["Reservation handling time", "From usable request to confirmed reservation."],
+      ["Vehicle turnaround time", "From return recorded to ready-for-rental status."],
+      [
+        "Fleet utilization",
+        "Available rental days compared with rented days, using one approved definition."
+      ],
+      ["Overdue follow-up", "Open overdue rentals with an assigned owner and next action."]
+    ],
+    "methodTitle": "Methodology required before publishing results",
+    "method": [
+      "Capture a pre-launch baseline using the same KPI definitions.",
+      "Compare equivalent locations, fleet classes, and operating periods.",
+      "Report sample size, exclusions, and measurement window.",
+      "Link every public result to an approved evidence record."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "Integrations",
+    "title": "Connect the systems your operation already depends on.",
+    "body": "Integration scope is confirmed during discovery so the proposal reflects your market, current stack, and data ownership. Named partners are not shown until connector availability is verified.",
+    "items": [
+      "Accounting and finance",
+      "Payments and deposits",
+      "Telematics and vehicle data",
+      "Identity and document services",
+      "Email, SMS, and notifications",
+      "Website and booking channels"
+    ]
+  },
+  "security": {
+    "eyebrow": "Security and reliability",
+    "title": "Evaluate the platform with evidence, not badges.",
+    "body": "Certifications and service-level claims remain unpublished until approved documentation exists. During evaluation, request concrete answers for the controls that matter to your operation.",
+    "checks": [
+      ["Access control", "Roles, permissions, administrator actions, and offboarding."],
+      ["Auditability", "Which changes are recorded, searchable, and exportable."],
+      ["Data handling", "Ownership, retention, export, deletion, and subprocessors."],
+      ["Continuity", "Backup, recovery, incident communication, and support process."]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Pricing preview",
+    "title": "Pricing should match the operation you actually run.",
+    "body": "A public price is not shown until the commercial model and included limits are approved. The evaluation starts with the factors that materially affect scope.",
+    "factors": [
+      "Fleet size and active locations",
+      "Required modules and user roles",
+      "Migration and onboarding scope",
+      "Integration and support requirements"
+    ],
+    "primary": "Request pricing",
+    "note": "No card prices, discounts, or package limits are published in this baseline."
+  },
+  "faq": {
+    "eyebrow": "FAQ",
+    "title": "Questions buyers should ask before creating an account.",
+    "items": [
+      [
+        "Is RentalDriveGo only for large rental companies?",
+        "The final market and packaging are still being defined. The onboarding should qualify fleet size, locations, workflows, and required modules rather than pretend one setup fits everyone."
+      ],
+      [
+        "Can we keep our existing systems?",
+        "Potential integrations are reviewed during discovery. Connector availability, data ownership, migration effort, and ongoing synchronization must be confirmed before they are promised."
+      ],
+      [
+        "Does the platform support multiple languages?",
+        "The website and approved design system support English, French, and Arabic. Arabic uses true document-level right-to-left behavior rather than a mirrored-looking patch."
+      ],
+      [
+        "How is pricing calculated?",
+        "The commercial model is pending approval. Until then, proposals should state the scope, included modules, limits, onboarding, integrations, and support explicitly."
+      ],
+      [
+        "What security certifications do you have?",
+        "No certification is claimed in this baseline. Security evidence should be supplied through approved documentation during evaluation and published only after verification."
+      ],
+      [
+        "What happens during account creation?",
+        "The session should map your current reservation-to-return flow, show the relevant product path, identify integration needs, and document unresolved fit questions."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "See the full workflow",
+    "title": "Bring one real rental process.",
+    "body": "We will trace the handoffs, exceptions, and information your team needs from reservation through vehicle return.",
+    "primary": "Create account",
+    "secondary": "Contact sales"
+  },
+  "footer": {
+    "tagline": "Connected rental-car operations from reservation to return.",
+    "groups": [
+      [
+        "Product",
+        [
+          ["Workflow", "#workflow"],
+          ["Modules", "#modules"],
+          ["Pricing", "#pricing"]
+        ]
+      ],
+      [
+        "Company",
+        [
+          ["Contact sales", "#contact"],
+          ["Create account", "#signup"]
+        ]
+      ],
+      [
+        "Account",
+        [
+          ["Log in", "#login"],
+          ["Language", "#language"],
+          ["Theme", "#theme"]
+        ]
+      ],
+      [
+        "Legal",
+        [
+          ["Privacy", "#!"],
+          ["Terms", "#!"],
+          ["Accessibility", "#!"]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. Evidence and commercial claims remain subject to approval."
+  },
+  "form": {
+    "title": "Create account",
+    "body": "Tell us how your rental operation works. Required fields are marked.",
+    "name": "Full name",
+    "email": "Work email",
+    "company": "Company",
+    "fleet": "Approximate fleet size",
+    "market": "Country or operating market",
+    "marketDefault": "Morocco",
+    "language": "Preferred language",
+    "message": "What should we focus on?",
+    "submit": "Create my account",
+    "privacy": "Non-production mode validates the workflow and discards the request. No lead is sent to a sales system. Final privacy and consent text remains blocked pending legal approval.",
+    "close": "Close",
+    "required": "Required",
+    "emailError": "Enter a valid work email address.",
+    "requiredError": "This field is required.",
+    "fleetOptions": [
+      "Select an option",
+      "1–9 vehicles",
+      "10–24 vehicles",
+      "25–49 vehicles",
+      "50–99 vehicles",
+      "100–249 vehicles",
+      "250 or more vehicles"
+    ],
+    "langOptions": ["English", "Français", "العربية"],
+    "successTitle": "Account creation recorded",
+    "successBody": "This prototype has completed the booking flow. No request was sent to a real sales system.",
+    "submitAnother": "Submit another request",
+    "submissionError": "The prototype could not complete the request. Your entries are still available. Try again.",
+    "errorSummary": "Review the highlighted fields and try again.",
+    "optional": "Optional",
+    "messageHelp": "Do not include sensitive personal or payment information.",
+    "messageCount": "characters",
+    "submitting": "Submitting request",
+    "retry": "Try again",
+    "closeBlocked": "Wait for the current submission to finish before closing.",
+    "invalidOptionError": "Select a valid option.",
+    "tooLongError": "This entry is too long.",
+    "configurationError": "Account creation is not available because production integration approval is incomplete.",
+    "timeoutError": "The request timed out. Your entries are still available; try again.",
+    "duplicateError": "This request has already been processed. No second lead was created.",
+    "rateLimitError": "Too many requests were received. Try again later.",
+    "genericError": "The request could not be completed. Your entries are still available.",
+    "localModeLabel": "Safe local adapter"
+  },
+  "preview": {
+    "today": "Today",
+    "branch": "Central branch",
+    "title": "Operations overview",
+    "reservations": "Reservations",
+    "ready": "Vehicles ready",
+    "attention": "Needs attention",
+    "active": "Active rentals",
+    "r1": "Pickup at 10:30",
+    "r2": "Return due at 14:00",
+    "r3": "Inspection required",
+    "vehicle": "Vehicle",
+    "customer": "Customer",
+    "status": "Status",
+    "task": "Next action",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "Ready",
+    "statusDue": "Due today",
+    "taskAssign": "Confirm driver documents",
+    "taskInspect": "Complete return inspection"
+  },
+  "tour": {
+    "title": "Product tour",
+    "intro": "Follow one rental from reservation through return.",
+    "back": "Previous",
+    "next": "Next",
+    "finish": "Finish tour",
+    "close": "Close product tour",
+    "step": "Step",
+    "of": "of"
+  },
+  "research": {
+    "title": "Research mode",
+    "events": "events",
+    "export": "Export events",
+    "clear": "Clear",
+    "close": "Close"
+  }
+}
diff --git a/homepage/src/content/locales/en/shell.json b/homepage/src/content/locales/en/shell.json
new file mode 100644
index 0000000..7e6097c
--- /dev/null
+++ b/homepage/src/content/locales/en/shell.json
@@ -0,0 +1,100 @@
+{
+  "skipToContent": "Skip to main content",
+  "brandLabel": "RentalDriveGo home",
+  "foundationLabel": "Application foundation",
+  "header": {
+    "navigationLabel": "Primary navigation",
+    "controlsLabel": "Display and language controls",
+    "menuOpen": "Open navigation menu",
+    "menuClose": "Close navigation menu",
+    "nav": {
+      "product": "Product",
+      "workflow": "Workflow",
+      "modules": "Modules",
+      "pricing": "Pricing",
+      "faq": "FAQ"
+    },
+    "login": "Log in",
+    "loginUnavailable": "Login destination pending approval",
+    "demo": "Create account",
+    "demoUnavailable": "Account creation pending integration approval"
+  },
+  "controls": {
+    "language": "Language",
+    "theme": "Theme",
+    "themeStatus": "Current theme preference: {value}",
+    "localeNames": {
+      "en": "English",
+      "fr": "French",
+      "ar": "Arabic"
+    },
+    "themes": {
+      "light": "Light",
+      "dark": "Dark",
+      "system": "System"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "Site footer",
+    "tagline": "Connected rental-car operations from reservation to return.",
+    "groups": {
+      "product": "Product",
+      "company": "Company",
+      "account": "Account",
+      "legal": "Legal"
+    },
+    "links": {
+      "workflow": "Workflow",
+      "modules": "Modules",
+      "pricing": "Pricing",
+      "faq": "FAQ",
+      "contact": "Contact sales",
+      "demo": "Create account",
+      "login": "Log in",
+      "privacy": "Privacy",
+      "terms": "Terms",
+      "accessibility": "Accessibility"
+    },
+    "pending": "Pending approval",
+    "copyrightPrefix": "©",
+    "releaseNotice": "Public release remains gated until documented blockers are resolved."
+  },
+  "states": {
+    "loadingTitle": "Loading",
+    "loadingBody": "Preparing the application shell.",
+    "errorTitle": "Something went wrong",
+    "errorBody": "The page could not be displayed. Technical details were not exposed.",
+    "retry": "Try again",
+    "notFoundTitle": "Page not found",
+    "notFoundBody": "This address does not match an approved localized route.",
+    "backHome": "Return home",
+    "pendingTitle": "Destination not available",
+    "pendingBody": "This route is defined, but its production content or destination is still awaiting approval."
+  },
+  "foundation": {
+    "eyebrow": "Phase 11 foundation",
+    "title": "A localized, theme-aware application shell",
+    "body": "This implementation proves the shared visual, routing, direction, accessibility, and metadata foundations without pretending the full marketing homepage already exists.",
+    "readinessLabel": "Implemented foundation areas",
+    "items": [
+      ["Semantic tokens", "Component styles consume a documented semantic layer."],
+      ["Theme behavior", "Light, dark, and system preferences resolve and persist."],
+      ["Localization", "English, French, and Arabic render from locale-prefixed routes."],
+      ["Directionality", "Arabic renders with document-level right-to-left direction."],
+      [
+        "Accessibility",
+        "Skip navigation, focus treatment, landmarks, and reduced motion are built in."
+      ],
+      [
+        "Application shell",
+        "Responsive header, mobile navigation, footer, and global states are available."
+      ]
+    ],
+    "deferredLabel": "Deferred homepage destinations",
+    "deferredBody": "This approved navigation destination is wired to the route manifest, while its production section remains outside Phase 11."
+  },
+  "metadata": {
+    "pendingTitle": "Unavailable destination | RentalDriveGo",
+    "pendingDescription": "This localized RentalDriveGo destination is defined but not approved for production publication."
+  }
+}
diff --git a/homepage/src/content/locales/fr/homepage.json b/homepage/src/content/locales/fr/homepage.json
new file mode 100644
index 0000000..a9db26e
--- /dev/null
+++ b/homepage/src/content/locales/fr/homepage.json
@@ -0,0 +1,446 @@
+{
+  "meta": {
+    "langName": "Français",
+    "dir": "ltr",
+    "title": "RentalDriveGo | Opérations de location connectées",
+    "description": "Pilotez les réservations, véhicules, contrats, remises et retours dans une plateforme connectée."
+  },
+  "header": {
+    "nav": [
+      [
+        "product",
+        "Produit"
+      ],
+      [
+        "workflow",
+        "Parcours"
+      ],
+      [
+        "modules",
+        "Modules"
+      ],
+      [
+        "pricing",
+        "Tarifs"
+      ],
+      [
+        "faq",
+        "FAQ"
+      ]
+    ],
+    "login": "Se connecter",
+    "demo": "Créer un compte",
+    "menu": "Ouvrir le menu",
+    "language": "Langue",
+    "theme": "Thème",
+    "light": "Clair",
+    "dark": "Sombre",
+    "system": "Système"
+  },
+  "hero": {
+    "eyebrow": "Opérations de location connectées",
+    "title": "Pilotez chaque location, de la réservation au retour du véhicule, dans un seul système.",
+    "body": "Reliez les réservations, le parc, les contrats, les remises et les retours dans un même dossier opérationnel, afin que chaque équipe sache quelle action vient ensuite.",
+    "primary": "Créer un compte",
+    "secondary": "Voir la visite du produit",
+    "caption": "Interface produit illustrative. Les écrans définitifs doivent utiliser des données et captures approuvées."
+  },
+  "trust": {
+    "eyebrow": "Couverture opérationnelle",
+    "title": "Un même parcours pour tout le cycle de location.",
+    "body": "Conservez le contexte du client, du véhicule, du contrat et des tâches au fil de la location.",
+    "items": [
+      [
+        "Réservation",
+        "Saisir la demande et les informations nécessaires."
+      ],
+      [
+        "Véhicule",
+        "Suivre la disponibilité et l’état de préparation."
+      ],
+      [
+        "Contrat",
+        "Regrouper les tâches de départ et les documents."
+      ],
+      [
+        "Retour",
+        "Enregistrer l’état et clôturer les actions de suivi."
+      ]
+    ]
+  },
+  "comparison": {
+    "eyebrow": "Pourquoi changer",
+    "title": "Remplacez les transmissions fragmentées par un flux opérationnel partagé.",
+    "body": "Le coût des outils déconnectés n’est pas toujours une panne spectaculaire. Il s’accumule dans les doubles saisies, le contexte perdu et les suivis tardifs.",
+    "beforeTitle": "Fonctionnement fragmenté",
+    "beforeItems": [
+      "Informations de réservation recopiées entre plusieurs outils",
+      "État du véhicule confirmé par messages",
+      "Tâches contractuelles suivies de mémoire",
+      "Problèmes de retour découverts après le départ du client"
+    ],
+    "afterTitle": "Fonctionnement connecté",
+    "afterItems": [
+      "Un statut de réservation visible par l’équipe",
+      "Préparation du véhicule rattachée à la location",
+      "Exigences de départ affichées avant la remise",
+      "Suivi du retour créé pendant que le contexte est encore précis"
+    ]
+  },
+  "workflow": {
+    "eyebrow": "Parcours de bout en bout",
+    "title": "Faites avancer la location sans perdre le fil.",
+    "body": "Chaque étape met en évidence la décision, le responsable et l’action suivante, au lieu d’enfouir le travail dans une liste générique de fonctionnalités.",
+    "steps": [
+      [
+        "01",
+        "Saisir la réservation",
+        "Enregistrer les dates, le conducteur, les exigences et la source."
+      ],
+      [
+        "02",
+        "Affecter un véhicule prêt",
+        "Faire correspondre disponibilité, catégorie, agence et état de préparation."
+      ],
+      [
+        "03",
+        "Finaliser le départ",
+        "Confirmer documents, inspection, contrat et tâches de remise."
+      ],
+      [
+        "04",
+        "Traiter le retour",
+        "Enregistrer l’état, clôturer les actions et libérer le véhicule."
+      ]
+    ]
+  },
+  "roles": {
+    "eyebrow": "Conçu pour l’équipe opérationnelle",
+    "title": "Donnez à chaque rôle le contexte utile, sans multiplier les versions de la vérité.",
+    "roles": [
+      [
+        "Direction ou responsable",
+        "Voir la charge, les exceptions et les signaux d’exploitation."
+      ],
+      [
+        "Équipe réservations",
+        "Faire passer les demandes vers une location confirmée avec moins de transmissions."
+      ],
+      [
+        "Parc et opérations",
+        "Savoir quels véhicules sont disponibles, bloqués, attendus ou en attente d’action."
+      ],
+      [
+        "Comptoir",
+        "Préparer les tâches de départ et de retour avant que le client n’attende."
+      ]
+    ]
+  },
+  "modules": {
+    "eyebrow": "Modules produit",
+    "title": "Un socle connecté, organisé autour du travail réel de location.",
+    "body": "Les modules clarifient les responsabilités, tandis que les dossiers partagés évitent l’archéologie du copier-coller.",
+    "items": [
+      [
+        "Réservations",
+        "Disponibilités, dates, besoins du client et statut dans un même flux."
+      ],
+      [
+        "Préparation du parc",
+        "Disponibilité, blocages, état de service et contexte d’agence."
+      ],
+      [
+        "Contrats de location",
+        "Exigences de départ, état du contrat et dossiers opérationnels."
+      ],
+      [
+        "Inspections des véhicules",
+        "Contrôles structurés au départ et au retour avec actions de suivi."
+      ],
+      [
+        "Dossiers clients",
+        "Historique de location et coordonnées rattachés au travail en cours."
+      ],
+      [
+        "Rapports opérationnels",
+        "Définitions et vues vérifiables par rapport à l’activité source."
+      ]
+    ]
+  },
+  "results": {
+    "eyebrow": "Résultats mesurés",
+    "title": "Mesurez le changement, pas le discours commercial.",
+    "body": "Aucun résultat ne doit être publié sans référence client, période de comparaison et définition de données approuvées. Cette version présente donc la méthode plutôt que des pourcentages fictifs.",
+    "metrics": [
+      [
+        "Temps de traitement des réservations",
+        "De la demande exploitable à la réservation confirmée."
+      ],
+      [
+        "Temps de remise en service",
+        "Du retour enregistré au statut prêt à louer."
+      ],
+      [
+        "Taux d’utilisation du parc",
+        "Jours louables comparés aux jours loués, selon une définition approuvée."
+      ],
+      [
+        "Suivi des retards",
+        "Locations en retard avec responsable et prochaine action."
+      ]
+    ],
+    "methodTitle": "Méthode requise avant toute publication",
+    "method": [
+      "Établir une référence avant lancement avec les mêmes définitions de KPI.",
+      "Comparer des agences, catégories de parc et périodes équivalentes.",
+      "Publier la taille de l’échantillon, les exclusions et la fenêtre de mesure.",
+      "Relier chaque résultat public à une preuve approuvée."
+    ]
+  },
+  "integrations": {
+    "eyebrow": "Intégrations",
+    "title": "Reliez les systèmes dont votre exploitation dépend déjà.",
+    "body": "Le périmètre d’intégration est confirmé pendant la découverte afin de refléter votre marché, votre environnement actuel et la propriété des données. Aucun partenaire n’est nommé avant vérification du connecteur.",
+    "items": [
+      "Comptabilité et finance",
+      "Paiements et dépôts",
+      "Télématique et données véhicules",
+      "Identité et documents",
+      "E-mail, SMS et notifications",
+      "Site web et canaux de réservation"
+    ]
+  },
+  "security": {
+    "eyebrow": "Sécurité et fiabilité",
+    "title": "Évaluez la plateforme avec des preuves, pas avec des badges.",
+    "body": "Aucune certification ni promesse de niveau de service n’est publiée sans documentation approuvée. Pendant l’évaluation, demandez des réponses concrètes sur les contrôles utiles à votre activité.",
+    "checks": [
+      [
+        "Contrôle des accès",
+        "Rôles, autorisations, actions administrateur et départs."
+      ],
+      [
+        "Traçabilité",
+        "Modifications enregistrées, recherchables et exportables."
+      ],
+      [
+        "Gestion des données",
+        "Propriété, conservation, export, suppression et sous-traitants."
+      ],
+      [
+        "Continuité",
+        "Sauvegarde, reprise, communication d’incident et support."
+      ]
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Aperçu des tarifs",
+    "title": "Le tarif doit correspondre à l’exploitation que vous gérez réellement.",
+    "body": "Aucun prix public n’est affiché tant que le modèle commercial et les limites incluses ne sont pas approuvés. L’évaluation commence par les facteurs qui influencent réellement le périmètre.",
+    "factors": [
+      "Taille du parc et agences actives",
+      "Modules requis et rôles utilisateurs",
+      "Migration et accompagnement au démarrage",
+      "Intégrations et niveau de support"
+    ],
+    "primary": "Demander un tarif",
+    "note": "Aucun prix, remise ou plafond de forfait n’est publié dans cette version."
+  },
+  "faq": {
+    "eyebrow": "FAQ",
+    "title": "Les questions à poser avant de créer un compte.",
+    "items": [
+      [
+        "RentalDriveGo est-il réservé aux grands loueurs ?",
+        "Le marché cible et les offres finales restent à définir. La création de compte doit qualifier la taille du parc, les agences, les flux et les modules nécessaires au lieu de prétendre qu’une configuration convient à tous."
+      ],
+      [
+        "Pouvons-nous conserver nos systèmes actuels ?",
+        "Les intégrations possibles sont examinées pendant la découverte. La disponibilité du connecteur, la propriété des données, l’effort de migration et la synchronisation doivent être confirmés avant toute promesse."
+      ],
+      [
+        "La plateforme prend-elle en charge plusieurs langues ?",
+        "Le site et le système de design approuvé prennent en charge l’anglais, le français et l’arabe. L’arabe utilise une vraie direction de document de droite à gauche."
+      ],
+      [
+        "Comment les tarifs sont-ils calculés ?",
+        "Le modèle commercial est en attente d’approbation. En attendant, toute proposition doit préciser le périmètre, les modules, les limites, l’accompagnement, les intégrations et le support."
+      ],
+      [
+        "Quelles certifications de sécurité possédez-vous ?",
+        "Aucune certification n’est revendiquée dans cette version. Les preuves de sécurité doivent être fournies pendant l’évaluation puis publiées uniquement après vérification."
+      ],
+      [
+        "Que se passe-t-il pendant la création du compte ?",
+        "La session doit cartographier votre flux de la réservation au retour, montrer le parcours produit pertinent, identifier les intégrations et consigner les questions de compatibilité non résolues."
+      ]
+    ]
+  },
+  "final": {
+    "eyebrow": "Voir le parcours complet",
+    "title": "Apportez un processus de location réel ",
+    "body": "Nous suivrons les transmissions, les exceptions et les informations dont votre équipe a besoin de la réservation au retour du véhicule.",
+    "primary": "Créer un compte",
+    "secondary": "Contacter le service commercial"
+  },
+  "footer": {
+    "tagline": "Des opérations de location connectées, de la réservation au retour.",
+    "groups": [
+      [
+        "Produit",
+        [
+          [
+            "Parcours",
+            "#workflow"
+          ],
+          [
+            "Modules",
+            "#modules"
+          ],
+          [
+            "Tarifs",
+            "#pricing"
+          ]
+        ]
+      ],
+      [
+        "Entreprise",
+        [
+          [
+            "Contacter le service commercial",
+            "#contact"
+          ],
+          [
+            "Créer un compte",
+            "#signup"
+          ]
+        ]
+      ],
+      [
+        "Compte",
+        [
+          [
+            "Se connecter",
+            "#login"
+          ],
+          [
+            "Langue",
+            "#language"
+          ],
+          [
+            "Thème",
+            "#theme"
+          ]
+        ]
+      ],
+      [
+        "Mentions légales",
+        [
+          [
+            "Confidentialité",
+            "#!"
+          ],
+          [
+            "Conditions",
+            "#!"
+          ],
+          [
+            "Accessibilité",
+            "#!"
+          ]
+        ]
+      ]
+    ],
+    "copyright": "© 2026 RentalDriveGo. Les preuves et conditions commerciales restent soumises à approbation."
+  },
+  "form": {
+    "title": "Créer un compte du produit",
+    "body": "Décrivez-nous le fonctionnement de votre activité de location. Les champs obligatoires sont signalés.",
+    "name": "Nom complet",
+    "email": "Adresse e-mail professionnelle",
+    "company": "Entreprise",
+    "fleet": "Taille approximative du parc",
+    "market": "Pays ou marché d’exploitation",
+    "language": "Langue souhaitée",
+    "message": "Sur quoi devons-nous nous concentrer ?",
+    "submit": "Créer mon compte",
+    "privacy": "Le mode hors production valide le parcours puis supprime la demande. Aucun prospect n’est envoyé à un système commercial. Le texte final de confidentialité et de consentement reste bloqué dans l’attente de l’approbation juridique.",
+    "close": "Fermer",
+    "required": "Obligatoire",
+    "emailError": "Saisissez une adresse e-mail professionnelle valide.",
+    "requiredError": "Ce champ est obligatoire.",
+    "fleetOptions": [
+      "Sélectionnez une option",
+      "1 à 9 véhicules",
+      "10 à 24 véhicules",
+      "25 à 49 véhicules",
+      "50 à 99 véhicules",
+      "100 à 249 véhicules",
+      "250 véhicules ou plus"
+    ],
+    "langOptions": [
+      "English",
+      "Français",
+      "العربية"
+    ],
+    "successTitle": "Création de compte enregistrée",
+    "successBody": "Ce prototype a terminé le parcours de réservation. Aucune demande n’a été envoyée à un véritable système commercial.",
+    "submitAnother": "Envoyer une autre demande",
+    "submissionError": "Le prototype n’a pas pu terminer la demande. Vos informations sont conservées. Réessayez.",
+    "errorSummary": "Vérifiez les champs signalés, puis réessayez.",
+    "optional": "Facultatif",
+    "messageHelp": "N’incluez aucune donnée personnelle sensible ni information de paiement.",
+    "messageCount": "caractères",
+    "submitting": "Envoi de la demande",
+    "retry": "Réessayer",
+    "closeBlocked": "Attendez la fin de l’envoi en cours avant de fermer.",
+    "invalidOptionError": "Sélectionnez une option valide.",
+    "tooLongError": "Cette saisie est trop longue.",
+    "configurationError": "L’envoi de création de compte est indisponible car l’intégration de production n’est pas encore approuvée.",
+    "timeoutError": "La demande a expiré. Vos informations sont toujours disponibles ; réessayez.",
+    "duplicateError": "Cette demande a déjà été traitée. Aucun deuxième prospect n’a été créé.",
+    "rateLimitError": "Trop de demandes ont été reçues. Réessayez plus tard.",
+    "genericError": "La demande n’a pas pu être terminée. Vos informations sont toujours disponibles.",
+    "localModeLabel": "Adaptateur local sécurisé",
+    "marketDefault": "Maroc"
+  },
+  "preview": {
+    "today": "Aujourd’hui",
+    "branch": "Agence centrale",
+    "title": "Vue des opérations",
+    "reservations": "Réservations",
+    "ready": "Véhicules prêts",
+    "attention": "À traiter",
+    "active": "Locations actives",
+    "r1": "Départ à 10 h 30",
+    "r2": "Retour prévu à 14 h 00",
+    "r3": "Inspection requise",
+    "vehicle": "Véhicule",
+    "customer": "Client",
+    "status": "Statut",
+    "task": "Prochaine action",
+    "plate1": "ABC-2048",
+    "plate2": "RNT-7712",
+    "statusReady": "Prêt",
+    "statusDue": "Prévu aujourd’hui",
+    "taskAssign": "Confirmer les documents du conducteur",
+    "taskInspect": "Finaliser l’inspection de retour"
+  },
+  "tour": {
+    "title": "Visite du produit",
+    "intro": "Suivez une location de la réservation au retour.",
+    "back": "Précédent",
+    "next": "Suivant",
+    "finish": "Terminer la visite",
+    "close": "Fermer la visite du produit",
+    "step": "Étape",
+    "of": "sur"
+  },
+  "research": {
+    "title": "Mode recherche",
+    "events": "événements",
+    "export": "Exporter les événements",
+    "clear": "Effacer",
+    "close": "Fermer"
+  }
+}
diff --git a/homepage/src/content/locales/fr/shell.json b/homepage/src/content/locales/fr/shell.json
new file mode 100644
index 0000000..5ecc868
--- /dev/null
+++ b/homepage/src/content/locales/fr/shell.json
@@ -0,0 +1,112 @@
+{
+  "skipToContent": "Aller au contenu principal",
+  "brandLabel": "Accueil RentalDriveGo",
+  "foundationLabel": "Fondation de l’application",
+  "header": {
+    "navigationLabel": "Navigation principale",
+    "controlsLabel": "Commandes d’affichage et de langue",
+    "menuOpen": "Ouvrir le menu de navigation",
+    "menuClose": "Fermer le menu de navigation",
+    "nav": {
+      "product": "Produit",
+      "workflow": "Parcours",
+      "modules": "Modules",
+      "pricing": "Tarifs",
+      "faq": "FAQ"
+    },
+    "login": "Se connecter",
+    "loginUnavailable": "Destination de connexion en attente d’approbation",
+    "demo": "Créer un compte",
+    "demoUnavailable": "Création de compte en attente d’approbation de l’intégration"
+  },
+  "controls": {
+    "language": "Langue",
+    "theme": "Thème",
+    "themeStatus": "Préférence de thème actuelle : {value}",
+    "localeNames": {
+      "en": "Anglais",
+      "fr": "Français",
+      "ar": "Arabe"
+    },
+    "themes": {
+      "light": "Clair",
+      "dark": "Sombre",
+      "system": "Système"
+    }
+  },
+  "footer": {
+    "landmarkLabel": "Pied de page du site",
+    "tagline": "Des opérations de location connectées, de la réservation au retour.",
+    "groups": {
+      "product": "Produit",
+      "company": "Entreprise",
+      "account": "Compte",
+      "legal": "Mentions légales"
+    },
+    "links": {
+      "workflow": "Parcours",
+      "modules": "Modules",
+      "pricing": "Tarifs",
+      "faq": "FAQ",
+      "contact": "Contacter le service commercial",
+      "demo": "Créer un compte",
+      "login": "Se connecter",
+      "privacy": "Confidentialité",
+      "terms": "Conditions",
+      "accessibility": "Accessibilité"
+    },
+    "pending": "En attente d’approbation",
+    "copyrightPrefix": "©",
+    "releaseNotice": "La publication reste bloquée jusqu’à la résolution des obstacles documentés."
+  },
+  "states": {
+    "loadingTitle": "Chargement",
+    "loadingBody": "Préparation de la structure de l’application.",
+    "errorTitle": "Une erreur s’est produite",
+    "errorBody": "La page n’a pas pu être affichée. Aucun détail technique n’a été exposé.",
+    "retry": "Réessayer",
+    "notFoundTitle": "Page introuvable",
+    "notFoundBody": "Cette adresse ne correspond à aucune route localisée approuvée.",
+    "backHome": "Retour à l’accueil",
+    "pendingTitle": "Destination indisponible",
+    "pendingBody": "Cette route est définie, mais son contenu ou sa destination de production attend encore une approbation."
+  },
+  "foundation": {
+    "eyebrow": "Fondation de la phase 11",
+    "title": "Une structure localisée compatible avec les thèmes",
+    "body": "Cette implémentation valide les fondations visuelles, de routage, de direction, d’accessibilité et de métadonnées sans prétendre que la page marketing complète existe déjà.",
+    "readinessLabel": "Fondations implémentées",
+    "items": [
+      [
+        "Jetons sémantiques",
+        "Les styles des composants consomment une couche sémantique documentée."
+      ],
+      [
+        "Gestion des thèmes",
+        "Les préférences claire, sombre et système sont résolues et conservées."
+      ],
+      [
+        "Localisation",
+        "L’anglais, le français et l’arabe utilisent des routes préfixées par la langue."
+      ],
+      [
+        "Direction",
+        "L’arabe utilise une direction droite-à-gauche au niveau du document."
+      ],
+      [
+        "Accessibilité",
+        "Le lien d’évitement, le focus visible, les repères et le mouvement réduit sont intégrés."
+      ],
+      [
+        "Structure de l’application",
+        "L’en-tête adaptatif, la navigation mobile, le pied de page et les états globaux sont disponibles."
+      ]
+    ],
+    "deferredLabel": "Destinations de la page d’accueil différées",
+    "deferredBody": "Cette destination de navigation approuvée est reliée au manifeste de routes, tandis que sa section de production reste hors du périmètre de la phase 11."
+  },
+  "metadata": {
+    "pendingTitle": "Destination indisponible | RentalDriveGo",
+    "pendingDescription": "Cette destination localisée de RentalDriveGo est définie, mais sa publication en production n’est pas approuvée."
+  }
+}
diff --git a/homepage/src/contracts/phase9/analytics-contract.ts b/homepage/src/contracts/phase9/analytics-contract.ts
new file mode 100644
index 0000000..4df44fd
--- /dev/null
+++ b/homepage/src/contracts/phase9/analytics-contract.ts
@@ -0,0 +1,41 @@
+export type AnalyticsEventName =
+  | 'page_view'
+  | 'section_view'
+  | 'navigation_click'
+  | 'locale_change'
+  | 'theme_change'
+  | 'mobile_nav_open'
+  | 'mobile_nav_close'
+  | 'product_tour_open'
+  | 'product_tour_step'
+  | 'product_tour_complete'
+  | 'product_tour_close'
+  | 'demo_open'
+  | 'demo_submit_attempt'
+  | 'demo_validation_error'
+  | 'demo_submit_success'
+  | 'demo_submit_failure'
+  | 'demo_close'
+  | 'faq_open';
+export interface AnalyticsContext {
+  routeId: string;
+  locale: 'en' | 'fr' | 'ar';
+  direction: 'ltr' | 'rtl';
+  resolvedTheme: 'light' | 'dark';
+  source?: string;
+  step?: number;
+  errorCode?: string;
+}
+export interface AnalyticsAdapter {
+  consentGranted(): boolean;
+  track(name: AnalyticsEventName, context: AnalyticsContext): void;
+}
+export const forbiddenPayloadKeys = [
+  'name',
+  'email',
+  'company',
+  'message',
+  'phone',
+  'fieldValue',
+  'serverResponse',
+] as const;
diff --git a/homepage/src/contracts/phase9/analytics-event-spec.csv b/homepage/src/contracts/phase9/analytics-event-spec.csv
new file mode 100644
index 0000000..5b7c4ee
--- /dev/null
+++ b/homepage/src/contracts/phase9/analytics-event-spec.csv
@@ -0,0 +1,19 @@
+Event,Trigger,Properties,PII_Allowed,Purpose
+page_view,Prototype loaded,"locale,theme,path,hash,session_id,test_mode,referrer_origin",No,Session start and denominator
+section_view,Section reaches 35% visibility,"section,locale,theme,hash,session_id",No,Discovery sequence
+navigation_click,Primary/mobile nav link used,"target,locale,theme,hash,session_id",No,Navigation path
+product_tour_open,Tour opened,"locale,theme,hash,session_id",No,Tour discovery
+product_tour_step,Tour step rendered,"step,locale,theme,session_id",No,Progress/drop-off
+product_tour_complete,Final tour step completed,"locale,theme,session_id",No,Completion
+product_tour_close,Tour closed,"reason,last_step,locale,theme,session_id",No,Abandonment point
+locale_change,Language selected,"from,to,context,session_id",No,Locale use/context preservation
+theme_change,Theme selected,"from,to,locale,session_id",No,Theme use
+mobile_nav_open,Drawer opened,"locale,theme,session_id",No,Mobile discovery
+mobile_nav_close,Drawer closed,"locale,theme,session_id",No,Drawer completion
+demo_open,Demo opened,"source,locale,theme,session_id",No,CTA source
+demo_validation_error,Validation blocked submit,"source,error_count,locale,theme,session_id",No,Error rate; never field values
+demo_submit_attempt,Submit activated,"source,locale,theme,session_id",No,Funnel attempt
+demo_submit_failure,Simulated service failure,"source,scenario,locale,theme,session_id",No,Failure recovery
+demo_submit_success,Prototype confirmation reached,"source,locale,theme,session_id",No,Completion
+demo_close,Demo closed,"reason,locale,theme,session_id",No,Abandonment
+faq_open,FAQ disclosure opened,"index,locale,theme,session_id",No,Question discovery
diff --git a/homepage/src/contracts/phase9/component-contracts.ts b/homepage/src/contracts/phase9/component-contracts.ts
new file mode 100644
index 0000000..24b527e
--- /dev/null
+++ b/homepage/src/contracts/phase9/component-contracts.ts
@@ -0,0 +1,136 @@
+export type Locale = 'en' | 'fr' | 'ar';
+export type Direction = 'ltr' | 'rtl';
+export type EvidenceStatus = 'approved' | 'illustrative' | 'pending' | 'expired' | 'rejected';
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export interface LinkModel {
+  id: string;
+  label: string;
+  href: string;
+  external?: boolean;
+}
+export interface SiteHeaderProps {
+  locale: Locale;
+  direction: Direction;
+  links: LinkModel[];
+  login?: LinkModel;
+  onDemo(): void;
+}
+export interface DrawerProps extends SiteHeaderProps {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  returnFocusRef?: HTMLElement | null;
+}
+export interface LocaleSelectorProps {
+  locale: Locale;
+  routeId: string;
+  hash?: string;
+  onLocaleChange(locale: Locale): void;
+}
+export interface ThemeSelectorProps {
+  preference: ThemePreference;
+  onPreferenceChange(value: ThemePreference): void;
+}
+export interface HeroModel {
+  eyebrow: string;
+  title: string;
+  body: string;
+  primaryLabel: string;
+  secondaryLabel: string;
+}
+export interface ProductPreviewModel {
+  status: EvidenceStatus;
+  caption: string;
+  locale: Locale;
+  direction: Direction;
+  theme: 'light' | 'dark';
+  assetId?: string;
+}
+export interface LifecycleItem {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+}
+export interface ComparisonModel {
+  title: string;
+  body: string;
+  before: { title: string; items: string[] };
+  after: { title: string; items: string[] };
+}
+export interface WorkflowStep {
+  id: string;
+  ordinal: string;
+  title: string;
+  description: string;
+}
+export interface RoleCard {
+  id: string;
+  title: string;
+  description: string;
+}
+export interface ModuleCard {
+  id: string;
+  title: string;
+  description: string;
+  evidenceStatus: EvidenceStatus;
+}
+export interface MetricDefinition {
+  id: string;
+  title: string;
+  definition: string;
+  publishedValue?: never;
+}
+export interface IntegrationCategory {
+  id: string;
+  label: string;
+  verifiedPartners?: never;
+}
+export interface SecurityCheck {
+  id: string;
+  title: string;
+  description: string;
+  certificationBadge?: never;
+}
+export interface PricingModel {
+  mode: 'quote-only' | 'approved-pricing';
+  title: string;
+  body: string;
+  factors: string[];
+  note: string;
+}
+export interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+export interface DemoFormValues {
+  fullName: string;
+  workEmail: string;
+  company: string;
+  fleetSize: string;
+  market?: string;
+  preferredLanguage?: Locale;
+  message?: string;
+}
+export type DemoFormState =
+  | 'idle'
+  | 'validating'
+  | 'submitting'
+  | 'success'
+  | 'recoverable_error'
+  | 'terminal_error';
+export interface DemoFormProps {
+  state: DemoFormState;
+  values: DemoFormValues;
+  fieldErrors: Partial<Record<keyof DemoFormValues, string>>;
+  formError?: string;
+  onSubmit(values: DemoFormValues): Promise<void>;
+}
+export interface TourProps {
+  steps: WorkflowStep[];
+  activeIndex: number;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onStepChange(index: number): void;
+}
diff --git a/homepage/src/contracts/phase9/demo-form-contract.ts b/homepage/src/contracts/phase9/demo-form-contract.ts
new file mode 100644
index 0000000..2e7b66e
--- /dev/null
+++ b/homepage/src/contracts/phase9/demo-form-contract.ts
@@ -0,0 +1,23 @@
+export const fleetSizeValues = ['1-9', '10-24', '25-49', '50-99', '100-249', '250+'] as const;
+export type FleetSize = (typeof fleetSizeValues)[number];
+export interface DemoRequest {
+  fullName: string;
+  workEmail: string;
+  company: string;
+  fleetSize: FleetSize;
+  market?: string;
+  preferredLanguage?: 'en' | 'fr' | 'ar';
+  message?: string;
+  idempotencyKey: string;
+  source: string;
+}
+export interface DemoSuccess {
+  requestId: string;
+  acceptedAt: string;
+  nextStepCode: 'sales_followup' | 'manual_review';
+}
+export interface DemoFailure {
+  code: 'validation' | 'rate_limited' | 'duplicate' | 'unavailable' | 'unknown';
+  retryable: boolean;
+  fieldErrors?: Record<string, string>;
+}
diff --git a/homepage/src/contracts/phase9/design-tokens.json b/homepage/src/contracts/phase9/design-tokens.json
new file mode 100644
index 0000000..03e916f
--- /dev/null
+++ b/homepage/src/contracts/phase9/design-tokens.json
@@ -0,0 +1,150 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "version": "1.0",
+  "raw": {
+    "color": {
+      "blue": {
+        "50": "#eff6ff",
+        "100": "#dbeafe",
+        "200": "#bfdbfe",
+        "500": "#2874e8",
+        "600": "#1b5dd8",
+        "700": "#174bb5",
+        "800": "#183d88"
+      },
+      "orange": {
+        "100": "#ffedd5",
+        "400": "#fb923c",
+        "600": "#ea580c",
+        "700": "#c2410c"
+      },
+      "navy": {
+        "950": "#081426",
+        "900": "#0d1b2e",
+        "850": "#11233b",
+        "800": "#162b46"
+      },
+      "gray": {
+        "25": "#fbfdff",
+        "50": "#f7f9fc",
+        "100": "#eef2f7",
+        "200": "#dbe3ed",
+        "300": "#c6d0dc",
+        "500": "#64748b",
+        "600": "#475569",
+        "700": "#334155",
+        "800": "#1e293b",
+        "900": "#0f172a"
+      },
+      "green": {
+        "100": "#dcfce7",
+        "700": "#15803d"
+      },
+      "amber": {
+        "100": "#fef3c7",
+        "800": "#92400e"
+      },
+      "red": {
+        "100": "#fee2e2",
+        "700": "#b91c1c"
+      }
+    },
+    "space": {
+      "0": "0px",
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "5": "20px",
+      "6": "24px",
+      "7": "28px",
+      "8": "32px",
+      "9": "36px",
+      "10": "40px",
+      "11": "44px",
+      "12": "48px",
+      "13": "52px",
+      "14": "56px",
+      "15": "60px",
+      "16": "64px",
+      "17": "68px",
+      "18": "72px",
+      "19": "76px",
+      "20": "80px",
+      "21": "84px",
+      "22": "88px",
+      "23": "92px",
+      "24": "96px"
+    },
+    "radius": {
+      "sm": "10px",
+      "md": "16px",
+      "lg": "24px",
+      "xl": "32px",
+      "pill": "999px"
+    },
+    "size": {
+      "touch-min": "44px",
+      "container-max": "1280px"
+    },
+    "duration": {
+      "fast": "120ms",
+      "standard": "160ms",
+      "overlay": "220ms"
+    },
+    "easing": {
+      "standard": "ease",
+      "productive": "cubic-bezier(.2,0,0,1)"
+    },
+    "font": {
+      "latin": "Inter Variable, Inter, Arial, sans-serif",
+      "arabic": "Noto Sans Arabic, Arial, sans-serif"
+    },
+    "breakpoint": {
+      "medium": "768px",
+      "wide": "1120px"
+    }
+  },
+  "semantic": {
+    "light": {
+      "color.canvas": "{color.gray.25}",
+      "color.surface": "#ffffff",
+      "color.surface.raised": "#ffffff",
+      "color.surface.muted": "#f2f6fb",
+      "color.surface.strong": "#e8f0fa",
+      "color.text": "#102035",
+      "color.text.muted": "#52647a",
+      "color.border": "#d8e2ee",
+      "color.border.strong": "#bdcad9",
+      "color.action.primary": "{color.blue.700}",
+      "color.action.primary.hover": "{color.blue.800}",
+      "color.action.conversion": "{color.orange.700}",
+      "color.action.conversion.hover": "#9a3412",
+      "color.focus": "#f97316",
+      "color.on.inverse": "#f8fafc",
+      "color.soft.blue": "#eef5ff",
+      "color.soft.orange": "#fff7ed",
+      "shadow.color": "rgba(8,20,38,.12)"
+    },
+    "dark": {
+      "color.canvas": "{color.navy.950}",
+      "color.surface": "{color.navy.900}",
+      "color.surface.raised": "{color.navy.850}",
+      "color.surface.muted": "#0b1a2d",
+      "color.surface.strong": "#172d48",
+      "color.text": "#eef5ff",
+      "color.text.muted": "#adbed2",
+      "color.border": "#263c56",
+      "color.border.strong": "#3a536e",
+      "color.action.primary": "#76a9ff",
+      "color.action.primary.hover": "#9bc2ff",
+      "color.action.conversion": "{color.orange.400}",
+      "color.action.conversion.hover": "#fdba74",
+      "color.focus": "{color.orange.400}",
+      "color.on.inverse": "{color.navy.950}",
+      "color.soft.blue": "#10284a",
+      "color.soft.orange": "#3a2015",
+      "shadow.color": "rgba(0,0,0,.36)"
+    }
+  }
+}
diff --git a/homepage/src/contracts/phase9/performance-budgets.json b/homepage/src/contracts/phase9/performance-budgets.json
new file mode 100644
index 0000000..d0639f3
--- /dev/null
+++ b/homepage/src/contracts/phase9/performance-budgets.json
@@ -0,0 +1,28 @@
+{
+  "version": "1.0",
+  "measurement": "75th percentile real-user data where available; otherwise repeatable lab median on defined mobile profile",
+  "core": {
+    "LCP_ms_max": 2500,
+    "INP_ms_max": 200,
+    "CLS_max": 0.1,
+    "TTFB_ms_max": 800
+  },
+  "transfer_gzip": {
+    "initial_javascript_kb_max": 180,
+    "initial_css_kb_max": 60,
+    "initial_html_kb_max": 100,
+    "hero_media_kb_max": 250,
+    "font_total_kb_max": 220
+  },
+  "requests": {
+    "initial_third_party_max": 2,
+    "initial_font_files_max": 2
+  },
+  "rules": [
+    "No marketing tag may block first paint.",
+    "Load analytics after consent and idle where possible.",
+    "Reserve media dimensions to prevent layout shift.",
+    "No autoplay video on initial load.",
+    "Test EN, FR, and AR because font and copy costs differ."
+  ]
+}
diff --git a/homepage/src/contracts/phase9/route-manifest.json b/homepage/src/contracts/phase9/route-manifest.json
new file mode 100644
index 0000000..1d1aee8
--- /dev/null
+++ b/homepage/src/contracts/phase9/route-manifest.json
@@ -0,0 +1,88 @@
+{
+  "version": "1.0",
+  "defaultLocale": "en",
+  "locales": ["en", "fr", "ar"],
+  "rootDetection": true,
+  "routes": [
+    {
+      "id": "home",
+      "slugs": {
+        "en": "",
+        "fr": "",
+        "ar": ""
+      },
+      "indexable": true,
+      "hashes": ["top", "product", "workflow", "modules", "pricing", "faq", "contact"]
+    },
+    {
+      "id": "sign-in",
+      "slugs": {
+        "en": "sign-in",
+        "fr": "connexion",
+        "ar": "تسجيل-الدخول"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "forgot-password",
+      "slugs": {
+        "en": "forgot-password",
+        "fr": "mot-de-passe-oublie",
+        "ar": "نسيت-كلمة-المرور"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "reset-password",
+      "slugs": {
+        "en": "reset-password",
+        "fr": "reinitialiser-mot-de-passe",
+        "ar": "اعادة-تعيين-كلمة-المرور"
+      },
+      "indexable": false,
+      "hashes": []
+    },
+    {
+      "id": "privacy",
+      "slugs": {
+        "en": "privacy",
+        "fr": "confidentialite",
+        "ar": "الخصوصية"
+      },
+      "indexable": true,
+      "hashes": []
+    },
+    {
+      "id": "terms",
+      "slugs": {
+        "en": "terms",
+        "fr": "conditions",
+        "ar": "الشروط"
+      },
+      "indexable": true,
+      "hashes": []
+    },
+    {
+      "id": "accessibility",
+      "slugs": {
+        "en": "accessibility",
+        "fr": "accessibilite",
+        "ar": "إمكانية-الوصول"
+      },
+      "indexable": true,
+      "hashes": []
+    }
+  ],
+  "switching": {
+    "preserveQueryAllowlist": ["utm_source", "utm_medium", "utm_campaign", "utm_content", "gclid"],
+    "preserveValidHash": true,
+    "dropUnknownQuery": true
+  },
+  "hreflang": {
+    "values": ["en", "fr", "ar"],
+    "xDefaultLocale": "en",
+    "selfCanonical": true
+  }
+}
diff --git a/homepage/src/contracts/phase9/visual-regression-scenarios.json b/homepage/src/contracts/phase9/visual-regression-scenarios.json
new file mode 100644
index 0000000..c11dbc2
--- /dev/null
+++ b/homepage/src/contracts/phase9/visual-regression-scenarios.json
@@ -0,0 +1,62 @@
+{
+  "version": "1.0",
+  "pixelDiffThreshold": 0.01,
+  "scenarios": [
+    {
+      "id": "VR-001",
+      "route": "/en",
+      "viewport": [1440, 1000],
+      "theme": "light",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-002",
+      "route": "/fr",
+      "viewport": [1024, 900],
+      "theme": "dark",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-003",
+      "route": "/ar",
+      "viewport": [390, 844],
+      "theme": "light",
+      "state": "homepage-top"
+    },
+    {
+      "id": "VR-004",
+      "route": "/ar",
+      "viewport": [390, 844],
+      "theme": "dark",
+      "state": "drawer-open"
+    },
+    {
+      "id": "VR-005",
+      "route": "/en",
+      "viewport": [390, 844],
+      "theme": "light",
+      "state": "demo-invalid"
+    },
+    {
+      "id": "VR-006",
+      "route": "/fr",
+      "viewport": [768, 1024],
+      "theme": "dark",
+      "state": "tour-step-3"
+    },
+    {
+      "id": "VR-007",
+      "route": "/ar",
+      "viewport": [320, 800],
+      "theme": "dark",
+      "state": "reflow-gate"
+    },
+    {
+      "id": "VR-008",
+      "route": "/en",
+      "viewport": [1440, 1000],
+      "theme": "dark",
+      "state": "pricing-and-final-cta"
+    }
+  ]
+}
diff --git a/homepage/src/lib/analytics/client.ts b/homepage/src/lib/analytics/client.ts
new file mode 100644
index 0000000..a2c4b92
--- /dev/null
+++ b/homepage/src/lib/analytics/client.ts
@@ -0,0 +1,25 @@
+'use client';
+
+import { validateAnalyticsEvent, type AnalyticsContext, type AnalyticsEventName } from './events';
+
+declare global {
+  interface Window {
+    __rdgAnalyticsTestSink?: Array<{ name: AnalyticsEventName; context: AnalyticsContext }>;
+  }
+}
+
+function analyticsMode(): 'disabled' | 'test' {
+  return process.env.NEXT_PUBLIC_ANALYTICS_MODE === 'test' ? 'test' : 'disabled';
+}
+
+function consentGranted(): boolean {
+  return document.documentElement.dataset.analyticsConsent === 'granted';
+}
+
+export function trackAnalytics(name: AnalyticsEventName, context: AnalyticsContext): boolean {
+  const event = validateAnalyticsEvent(name, context);
+  if (!event || analyticsMode() !== 'test' || !consentGranted()) return false;
+  window.__rdgAnalyticsTestSink ??= [];
+  window.__rdgAnalyticsTestSink.push(event);
+  return true;
+}
diff --git a/homepage/src/lib/analytics/events.ts b/homepage/src/lib/analytics/events.ts
new file mode 100644
index 0000000..8d15662
--- /dev/null
+++ b/homepage/src/lib/analytics/events.ts
@@ -0,0 +1,82 @@
+import { z } from 'zod';
+
+export const analyticsEventNames = [
+  'page_view',
+  'section_view',
+  'navigation_click',
+  'locale_change',
+  'theme_change',
+  'mobile_nav_open',
+  'mobile_nav_close',
+  'product_tour_open',
+  'product_tour_step',
+  'product_tour_complete',
+  'product_tour_close',
+  'demo_open',
+  'demo_submit_attempt',
+  'demo_validation_error',
+  'demo_submit_success',
+  'demo_submit_failure',
+  'demo_close',
+  'faq_open',
+] as const;
+
+export type AnalyticsEventName = (typeof analyticsEventNames)[number];
+
+const safeText = z
+  .string()
+  .min(1)
+  .max(80)
+  .regex(/^[a-zA-Z0-9_-]+$/);
+
+export const analyticsContextSchema = z
+  .object({
+    routeId: safeText,
+    locale: z.enum(['en', 'fr', 'ar']),
+    direction: z.enum(['ltr', 'rtl']),
+    resolvedTheme: z.enum(['light', 'dark']),
+    source: safeText.optional(),
+    step: z.number().int().min(1).max(100).optional(),
+    errorCode: safeText.optional(),
+    errorCount: z.number().int().min(1).max(20).optional(),
+    reason: safeText.optional(),
+  })
+  .strict();
+
+export type AnalyticsContext = z.output<typeof analyticsContextSchema>;
+
+export interface AnalyticsEventDefinition {
+  name: AnalyticsEventName;
+  purpose: string;
+  consentCategory: 'analytics';
+  personalData: false;
+}
+
+export const analyticsEventRegistry: readonly AnalyticsEventDefinition[] = analyticsEventNames.map(
+  (name) => ({
+    name,
+    purpose: `Phase 9 approved ${name} interaction measurement.`,
+    consentCategory: 'analytics',
+    personalData: false,
+  }),
+);
+
+const forbiddenPayloadKeys = new Set([
+  'name',
+  'email',
+  'company',
+  'message',
+  'phone',
+  'fieldvalue',
+  'serverresponse',
+]);
+
+export function validateAnalyticsEvent(name: unknown, context: unknown) {
+  const event = z.enum(analyticsEventNames).safeParse(name);
+  const payload = analyticsContextSchema.safeParse(context);
+  if (!event.success || !payload.success) return null;
+  if (Object.keys(payload.data).some((key) => forbiddenPayloadKeys.has(key.toLowerCase()))) {
+    return null;
+  }
+  return { name: event.data, context: payload.data } as const;
+}
diff --git a/homepage/src/lib/api.ts b/homepage/src/lib/api.ts
new file mode 100644
index 0000000..f91fe1b
--- /dev/null
+++ b/homepage/src/lib/api.ts
@@ -0,0 +1,6 @@
+export const API_BASE =
+  typeof window === 'undefined'
+    ? (process.env.API_INTERNAL_URL || 'http://localhost:4000/api/v1')
+    : (process.env.NEXT_PUBLIC_API_URL || '/api/v1')
+
+export const EMPLOYEE_PROFILE_KEY = 'employee_profile'
diff --git a/homepage/src/lib/components/classNames.ts b/homepage/src/lib/components/classNames.ts
new file mode 100644
index 0000000..582dbc1
--- /dev/null
+++ b/homepage/src/lib/components/classNames.ts
@@ -0,0 +1,3 @@
+export function classNames(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(' ');
+}
diff --git a/homepage/src/lib/demo/adapters/blocked.ts b/homepage/src/lib/demo/adapters/blocked.ts
new file mode 100644
index 0000000..b921783
--- /dev/null
+++ b/homepage/src/lib/demo/adapters/blocked.ts
@@ -0,0 +1,14 @@
+import type { LeadDestinationAdapter, LeadDestinationResult } from './types';
+
+export class BlockedLeadDestinationAdapter implements LeadDestinationAdapter {
+  readonly name = 'blocked';
+
+  async submitLead(): Promise<LeadDestinationResult> {
+    return {
+      ok: false,
+      category: 'configuration',
+      retryable: false,
+      code: 'lead_destination_not_approved',
+    };
+  }
+}
diff --git a/homepage/src/lib/demo/adapters/index.ts b/homepage/src/lib/demo/adapters/index.ts
new file mode 100644
index 0000000..66ecc26
--- /dev/null
+++ b/homepage/src/lib/demo/adapters/index.ts
@@ -0,0 +1,17 @@
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { BlockedLeadDestinationAdapter } from './blocked';
+import { LocalLeadDestinationAdapter } from './local';
+import type { LeadDestinationAdapter } from './types';
+
+export function createLeadDestinationAdapter(
+  environment: IntegrationEnvironment,
+): LeadDestinationAdapter {
+  const approvedLocalRuntime =
+    environment.NODE_ENV !== 'production' || environment.DEMO_LOCAL_TEST_MODE;
+  if (approvedLocalRuntime && environment.DEMO_SUBMISSION_MODE === 'local') {
+    return new LocalLeadDestinationAdapter();
+  }
+  return new BlockedLeadDestinationAdapter();
+}
+
+export type { IntegrationContext, LeadDestinationAdapter, LeadDestinationResult } from './types';
diff --git a/homepage/src/lib/demo/adapters/local.ts b/homepage/src/lib/demo/adapters/local.ts
new file mode 100644
index 0000000..3d3142d
--- /dev/null
+++ b/homepage/src/lib/demo/adapters/local.ts
@@ -0,0 +1,46 @@
+import type { LeadDestinationAdapter, LeadDestinationResult } from './types';
+
+function abortError(): Error {
+  return new DOMException('Operation aborted', 'AbortError');
+}
+
+export class LocalLeadDestinationAdapter implements LeadDestinationAdapter {
+  readonly name = 'local-discard';
+
+  async submitLead(
+    _lead: Parameters<LeadDestinationAdapter['submitLead']>[0],
+    context: Parameters<LeadDestinationAdapter['submitLead']>[1],
+  ): Promise<LeadDestinationResult> {
+    if (context.signal.aborted) throw abortError();
+
+    switch (context.testScenario) {
+      case 'duplicate':
+        return { ok: false, category: 'duplicate', retryable: false, code: 'local_duplicate' };
+      case 'integration-error':
+        return { ok: false, category: 'integration', retryable: true, code: 'local_error' };
+      case 'timeout':
+        await new Promise<void>((resolve, reject) => {
+          const timer = setTimeout(resolve, 30_000);
+          context.signal.addEventListener(
+            'abort',
+            () => {
+              clearTimeout(timer);
+              reject(abortError());
+            },
+            { once: true },
+          );
+        });
+        break;
+      case 'success':
+      case undefined:
+        break;
+    }
+
+    return {
+      ok: true,
+      externalId: `local_${context.correlationId}`,
+      acceptedAt: new Date().toISOString(),
+      mode: 'local',
+    };
+  }
+}
diff --git a/homepage/src/lib/demo/adapters/types.ts b/homepage/src/lib/demo/adapters/types.ts
new file mode 100644
index 0000000..8ba56e4
--- /dev/null
+++ b/homepage/src/lib/demo/adapters/types.ts
@@ -0,0 +1,23 @@
+import type { DemoLead } from '../schema';
+
+export interface IntegrationContext {
+  correlationId: string;
+  idempotencyKey: string;
+  signal: AbortSignal;
+  environment: 'development' | 'test' | 'production';
+  testScenario?: 'success' | 'duplicate' | 'timeout' | 'integration-error';
+}
+
+export type LeadDestinationResult =
+  | { ok: true; externalId: string; acceptedAt: string; mode: 'local' }
+  | {
+      ok: false;
+      category: 'duplicate' | 'integration' | 'timeout' | 'configuration';
+      retryable: boolean;
+      code: string;
+    };
+
+export interface LeadDestinationAdapter {
+  readonly name: string;
+  submitLead(lead: DemoLead, context: IntegrationContext): Promise<LeadDestinationResult>;
+}
diff --git a/homepage/src/lib/demo/idempotency.ts b/homepage/src/lib/demo/idempotency.ts
new file mode 100644
index 0000000..993231f
--- /dev/null
+++ b/homepage/src/lib/demo/idempotency.ts
@@ -0,0 +1,46 @@
+import type { DemoSubmissionResult } from './schema';
+
+interface StoredOperation {
+  expiresAt: number;
+  result: Promise<DemoSubmissionResult>;
+}
+
+const globalStore = globalThis as typeof globalThis & {
+  __rdgDemoIdempotencyStore?: Map<string, StoredOperation>;
+};
+
+const store = globalStore.__rdgDemoIdempotencyStore ?? new Map<string, StoredOperation>();
+globalStore.__rdgDemoIdempotencyStore = store;
+
+function purgeExpired(now: number) {
+  for (const [key, operation] of store) {
+    if (operation.expiresAt <= now) store.delete(key);
+  }
+}
+
+export async function executeIdempotent(
+  key: string,
+  ttlSeconds: number,
+  operation: () => Promise<DemoSubmissionResult>,
+): Promise<DemoSubmissionResult> {
+  const now = Date.now();
+  purgeExpired(now);
+  const existing = store.get(key);
+  if (existing) return existing.result;
+
+  const result = operation();
+  store.set(key, { expiresAt: now + ttlSeconds * 1_000, result });
+
+  try {
+    const settled = await result;
+    if (!settled.ok && settled.retryable) store.delete(key);
+    return settled;
+  } catch (error) {
+    store.delete(key);
+    throw error;
+  }
+}
+
+export function clearIdempotencyStoreForTests() {
+  store.clear();
+}
diff --git a/homepage/src/lib/demo/redaction.ts b/homepage/src/lib/demo/redaction.ts
new file mode 100644
index 0000000..c69b4eb
--- /dev/null
+++ b/homepage/src/lib/demo/redaction.ts
@@ -0,0 +1,32 @@
+const sensitiveKeys = new Set([
+  'fullname',
+  'name',
+  'workemail',
+  'email',
+  'company',
+  'market',
+  'message',
+  'phone',
+  'fieldvalue',
+  'serverresponse',
+]);
+
+export function redactSensitive(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(redactSensitive);
+  if (!value || typeof value !== 'object') return value;
+
+  return Object.fromEntries(
+    Object.entries(value).map(([key, child]) => [
+      key,
+      sensitiveKeys.has(key.toLowerCase()) ? '[REDACTED]' : redactSensitive(child),
+    ]),
+  );
+}
+
+export function containsSensitiveKey(value: unknown): boolean {
+  if (Array.isArray(value)) return value.some(containsSensitiveKey);
+  if (!value || typeof value !== 'object') return false;
+  return Object.entries(value).some(
+    ([key, child]) => sensitiveKeys.has(key.toLowerCase()) || containsSensitiveKey(child),
+  );
+}
diff --git a/homepage/src/lib/demo/schema.ts b/homepage/src/lib/demo/schema.ts
new file mode 100644
index 0000000..a1c82b8
--- /dev/null
+++ b/homepage/src/lib/demo/schema.ts
@@ -0,0 +1,94 @@
+import { z } from 'zod';
+
+export const fleetSizeValues = ['1-9', '10-24', '25-49', '50-99', '100-249', '250+'] as const;
+export const demoSourceValues = ['header', 'mobile-header', 'hero', 'final-cta', 'footer'] as const;
+
+const compactText = (maximum: number) =>
+  z
+    .string()
+    .transform((value) => value.trim().replace(/\s+/g, ' '))
+    .pipe(z.string().min(1, 'required').max(maximum, 'too_long'));
+
+const optionalCompactText = (maximum: number) =>
+  z
+    .string()
+    .transform((value) => value.trim().replace(/\s+/g, ' '))
+    .pipe(z.string().max(maximum, 'too_long'))
+    .transform((value) => (value.length === 0 ? undefined : value))
+    .optional();
+
+export const demoLeadSchema = z
+  .object({
+    fullName: compactText(120),
+    workEmail: z
+      .string()
+      .transform((value) => value.trim().toLowerCase())
+      .pipe(
+        z
+          .string()
+          .min(1, 'required')
+          .max(254, 'too_long')
+          .regex(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'invalid_email'),
+      ),
+    company: compactText(160),
+    fleetSize: z.enum(fleetSizeValues, { error: 'invalid_fleet_size' }),
+    market: optionalCompactText(100),
+    preferredLanguage: z.enum(['en', 'fr', 'ar']).optional(),
+    message: optionalCompactText(1_000),
+    idempotencyKey: z.string().uuid('invalid_idempotency_key'),
+    source: z.enum(demoSourceValues, { error: 'invalid_source' }),
+  })
+  .strict();
+
+export const demoSubmissionEnvelopeSchema = z
+  .object({
+    lead: demoLeadSchema,
+    guard: z
+      .object({
+        honeypot: z.string().max(200).default(''),
+        startedAtMs: z.number().int().nonnegative(),
+      })
+      .strict(),
+  })
+  .strict();
+
+export type DemoLeadInput = z.input<typeof demoLeadSchema>;
+export type DemoLead = z.output<typeof demoLeadSchema>;
+export type DemoSubmissionEnvelope = z.output<typeof demoSubmissionEnvelopeSchema>;
+export type DemoSource = (typeof demoSourceValues)[number];
+
+export type DemoFailureCategory =
+  | 'validation'
+  | 'consent'
+  | 'duplicate'
+  | 'rate-limit'
+  | 'integration'
+  | 'timeout'
+  | 'configuration'
+  | 'abuse';
+
+export type DemoSubmissionResult =
+  | {
+      ok: true;
+      submissionId: string;
+      acceptedAt: string;
+      nextAction: { type: 'success'; mode: 'local' };
+    }
+  | {
+      ok: false;
+      category: DemoFailureCategory;
+      fieldErrors?: Record<string, string>;
+      formErrorCode: string;
+      retryable: boolean;
+      correlationId?: string;
+    };
+
+export function zodFieldErrors(error: z.ZodError): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const issue of error.issues) {
+    const path = issue.path.at(-1);
+    if (typeof path !== 'string' || result[path]) continue;
+    result[path] = issue.message;
+  }
+  return result;
+}
diff --git a/homepage/src/lib/demo/service.ts b/homepage/src/lib/demo/service.ts
new file mode 100644
index 0000000..06860d7
--- /dev/null
+++ b/homepage/src/lib/demo/service.ts
@@ -0,0 +1,69 @@
+import { randomUUID } from 'node:crypto';
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { createLeadDestinationAdapter, type LeadDestinationAdapter } from './adapters';
+import { executeIdempotent } from './idempotency';
+import type { DemoLead, DemoSubmissionResult } from './schema';
+
+export interface SubmitDemoOptions {
+  environment: IntegrationEnvironment;
+  adapter?: LeadDestinationAdapter;
+  testScenario?: 'success' | 'duplicate' | 'timeout' | 'integration-error';
+}
+
+export async function submitDemoLead(
+  lead: DemoLead,
+  options: SubmitDemoOptions,
+): Promise<DemoSubmissionResult> {
+  const { environment } = options;
+  const adapter = options.adapter ?? createLeadDestinationAdapter(environment);
+
+  return executeIdempotent(
+    lead.idempotencyKey,
+    environment.DEMO_IDEMPOTENCY_TTL_SECONDS,
+    async () => {
+      const correlationId = randomUUID();
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), environment.DEMO_REQUEST_TIMEOUT_MS);
+
+      try {
+        const destinationResult = await adapter.submitLead(lead, {
+          correlationId,
+          idempotencyKey: lead.idempotencyKey,
+          signal: controller.signal,
+          environment: environment.NODE_ENV,
+          ...(options.testScenario ? { testScenario: options.testScenario } : {}),
+        });
+
+        if (!destinationResult.ok) {
+          return {
+            ok: false,
+            category: destinationResult.category,
+            formErrorCode: destinationResult.code,
+            retryable: destinationResult.retryable,
+            correlationId,
+          };
+        }
+
+        return {
+          ok: true,
+          submissionId: destinationResult.externalId,
+          acceptedAt: destinationResult.acceptedAt,
+          nextAction: { type: 'success', mode: destinationResult.mode },
+        };
+      } catch (error) {
+        const timedOut =
+          controller.signal.aborted ||
+          (error instanceof DOMException && error.name === 'AbortError');
+        return {
+          ok: false,
+          category: timedOut ? 'timeout' : 'integration',
+          formErrorCode: timedOut ? 'lead_destination_timeout' : 'lead_destination_failure',
+          retryable: true,
+          correlationId,
+        };
+      } finally {
+        clearTimeout(timeout);
+      }
+    },
+  );
+}
diff --git a/homepage/src/lib/integrations/destinations.ts b/homepage/src/lib/integrations/destinations.ts
new file mode 100644
index 0000000..cb6faf6
--- /dev/null
+++ b/homepage/src/lib/integrations/destinations.ts
@@ -0,0 +1,174 @@
+import { localizedPath, type Locale, type RouteId } from '@/lib/localization/config';
+
+export type DestinationStatus = 'active' | 'disabled' | 'placeholder' | 'blocked';
+export type DestinationKind =
+  | 'internal-route'
+  | 'external-url'
+  | 'modal'
+  | 'drawer'
+  | 'form'
+  | 'scheduler';
+
+export type DestinationKey =
+  | 'book-demo'
+  | 'contact-sales'
+  | 'product-tour'
+  | 'pricing'
+  | 'sign-in'
+  | 'forgot-password'
+  | 'privacy'
+  | 'terms'
+  | 'accessibility'
+  | 'cookie-settings'
+  | 'support';
+
+export interface DestinationReference {
+  key: DestinationKey;
+  kind: DestinationKind;
+  status: DestinationStatus;
+  routeId?: RouteId;
+  href?: string;
+  featureFlag?: string;
+  issueId?: string;
+  external?: boolean;
+  allowedLocales: readonly Locale[];
+  reason: string;
+}
+
+const allLocales = ['en', 'fr', 'ar'] as const satisfies readonly Locale[];
+
+const baseDestinations: Record<DestinationKey, DestinationReference> = {
+  'book-demo': {
+    key: 'book-demo',
+    kind: 'modal',
+    status: 'blocked',
+    featureFlag: 'demoSubmissionEnabled',
+    issueId: 'P9-002/P9-003',
+    allowedLocales: allLocales,
+    reason: 'Production CRM and legal consent decisions are not approved.',
+  },
+  'contact-sales': {
+    key: 'contact-sales',
+    kind: 'external-url',
+    status: 'blocked',
+    issueId: 'P9-015',
+    allowedLocales: allLocales,
+    reason: 'No approved sales destination exists.',
+  },
+  'product-tour': {
+    key: 'product-tour',
+    kind: 'modal',
+    status: 'blocked',
+    issueId: 'P9-012',
+    allowedLocales: allLocales,
+    reason: 'No approved product-tour medium or transcript exists.',
+  },
+  pricing: {
+    key: 'pricing',
+    kind: 'internal-route',
+    status: 'placeholder',
+    issueId: 'P9-008',
+    allowedLocales: allLocales,
+    reason: 'Public pricing and packaging are not approved.',
+  },
+  'sign-in': {
+    key: 'sign-in',
+    kind: 'internal-route',
+    status: 'active',
+    routeId: 'sign-in',
+    allowedLocales: allLocales,
+    reason: 'Sign-in is now served from the homepage app.',
+  },
+  'forgot-password': {
+    key: 'forgot-password',
+    kind: 'internal-route',
+    status: 'active',
+    routeId: 'forgot-password',
+    allowedLocales: allLocales,
+    reason: 'Password reset flow is now served from the homepage app.',
+  },
+  privacy: {
+    key: 'privacy',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'privacy',
+    issueId: 'P9-003',
+    allowedLocales: allLocales,
+    reason: 'The privacy destination resolves to a gated placeholder pending legal copy.',
+  },
+  terms: {
+    key: 'terms',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'terms',
+    issueId: 'P9-003',
+    allowedLocales: allLocales,
+    reason: 'The terms destination resolves to a gated placeholder pending legal copy.',
+  },
+  accessibility: {
+    key: 'accessibility',
+    kind: 'internal-route',
+    status: 'placeholder',
+    routeId: 'accessibility',
+    issueId: 'P13-002',
+    allowedLocales: allLocales,
+    reason: 'The accessibility destination resolves to a gated placeholder pending approval.',
+  },
+  'cookie-settings': {
+    key: 'cookie-settings',
+    kind: 'modal',
+    status: 'blocked',
+    issueId: 'P9-004',
+    allowedLocales: allLocales,
+    reason: 'Consent categories and a consent-management mechanism are not approved.',
+  },
+  support: {
+    key: 'support',
+    kind: 'external-url',
+    status: 'blocked',
+    issueId: 'P9-015',
+    allowedLocales: allLocales,
+    reason: 'No approved public support destination exists.',
+  },
+};
+
+export interface DestinationRuntimeContext {
+  demoSubmissionEnabled: boolean;
+  demoMode: 'blocked' | 'local';
+}
+
+export function destinationRegistry(
+  context: DestinationRuntimeContext,
+): Record<DestinationKey, DestinationReference> {
+  const demo = baseDestinations['book-demo'];
+  return {
+    ...baseDestinations,
+    'book-demo': {
+      ...demo,
+      status: context.demoSubmissionEnabled && context.demoMode === 'local' ? 'active' : 'blocked',
+      reason:
+        context.demoSubmissionEnabled && context.demoMode === 'local'
+          ? 'Local validation adapter is active; no external lead is created.'
+          : demo.reason,
+    },
+  };
+}
+
+export function resolveDestination(
+  key: DestinationKey,
+  locale: Locale,
+  context: DestinationRuntimeContext,
+): DestinationReference {
+  const destination = destinationRegistry(context)[key];
+  if (!destination.allowedLocales.includes(locale)) {
+    return {
+      ...destination,
+      status: 'blocked',
+      reason: 'Destination is unavailable for this locale.',
+    };
+  }
+  if (destination.routeId) {
+    return { ...destination, href: localizedPath(destination.routeId, locale) };
+  }
+  return destination;
+}
diff --git a/homepage/src/lib/integrations/environment.ts b/homepage/src/lib/integrations/environment.ts
new file mode 100644
index 0000000..3daf280
--- /dev/null
+++ b/homepage/src/lib/integrations/environment.ts
@@ -0,0 +1,119 @@
+import 'server-only';
+
+import { z } from 'zod';
+
+const booleanText = z
+  .enum(['true', 'false'])
+  .default('false')
+  .transform((value) => value === 'true');
+
+const environmentSchema = z.object({
+  NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+  NEXT_PUBLIC_DEMO_ENABLED: booleanText,
+  DEMO_SUBMISSION_MODE: z.enum(['blocked', 'local']).default('blocked'),
+  DEMO_REQUEST_TIMEOUT_MS: z.coerce.number().int().min(250).max(15_000).default(4_000),
+  DEMO_IDEMPOTENCY_TTL_SECONDS: z.coerce.number().int().min(60).max(86_400).default(900),
+  DEMO_TEST_SCENARIOS_ENABLED: booleanText,
+  DEMO_LOCAL_TEST_MODE: booleanText,
+  NEXT_PUBLIC_ANALYTICS_MODE: z.enum(['disabled', 'test']).default('disabled'),
+  SITE_ORIGIN: z.string().url().optional(),
+});
+
+export type IntegrationEnvironment = z.infer<typeof environmentSchema>;
+
+export interface EnvironmentValidationResult {
+  ok: boolean;
+  errors: string[];
+  environment?: IntegrationEnvironment;
+}
+
+export function validateIntegrationEnvironment(
+  source: NodeJS.ProcessEnv = process.env,
+): EnvironmentValidationResult {
+  const inferredNodeEnv =
+    source.NODE_ENV === 'production' || source.NODE_ENV === 'test'
+      ? source.NODE_ENV
+      : 'development';
+  const normalizedSource = {
+    ...source,
+    DEMO_SUBMISSION_MODE:
+      source.DEMO_SUBMISSION_MODE ?? (inferredNodeEnv === 'production' ? 'blocked' : 'local'),
+  };
+  const parsed = environmentSchema.safeParse(normalizedSource);
+  if (!parsed.success) {
+    return {
+      ok: false,
+      errors: parsed.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`),
+    };
+  }
+
+  const environment = parsed.data;
+  const errors: string[] = [];
+  const localTestOrigin =
+    environment.SITE_ORIGIN &&
+    ['127.0.0.1', 'localhost'].includes(new URL(environment.SITE_ORIGIN).hostname);
+  const productionLocalTest =
+    environment.NODE_ENV === 'production' && environment.DEMO_LOCAL_TEST_MODE && localTestOrigin;
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.NEXT_PUBLIC_DEMO_ENABLED &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'NEXT_PUBLIC_DEMO_ENABLED must remain false until an approved production lead adapter and legal consent decision are implemented.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.DEMO_SUBMISSION_MODE === 'local' &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'DEMO_SUBMISSION_MODE=local is prohibited outside an explicit loopback test runtime.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.DEMO_TEST_SCENARIOS_ENABLED &&
+    !productionLocalTest
+  ) {
+    errors.push(
+      'DEMO_TEST_SCENARIOS_ENABLED is prohibited outside an explicit loopback test runtime.',
+    );
+  }
+  if (
+    environment.NODE_ENV === 'production' &&
+    environment.NEXT_PUBLIC_ANALYTICS_MODE !== 'disabled'
+  ) {
+    errors.push('Analytics must remain disabled until provider and consent approval are recorded.');
+  }
+
+  return errors.length > 0 ? { ok: false, errors, environment } : { ok: true, errors, environment };
+}
+
+export function getIntegrationEnvironment(): IntegrationEnvironment {
+  const result = validateIntegrationEnvironment();
+  if (!result.ok || !result.environment) {
+    throw new Error(`Invalid Phase 14 integration environment: ${result.errors.join(' | ')}`);
+  }
+  return result.environment;
+}
+
+export interface PublicIntegrationConfig {
+  demoSubmissionEnabled: boolean;
+  demoMode: 'blocked' | 'local';
+  analyticsMode: 'disabled' | 'test';
+}
+
+export function getPublicIntegrationConfig(): PublicIntegrationConfig {
+  const environment = getIntegrationEnvironment();
+  const developmentDefault = environment.NODE_ENV !== 'production';
+  const demoSubmissionEnabled =
+    environment.DEMO_SUBMISSION_MODE === 'local' &&
+    (environment.NEXT_PUBLIC_DEMO_ENABLED || developmentDefault);
+  return {
+    demoSubmissionEnabled,
+    demoMode: demoSubmissionEnabled ? 'local' : 'blocked',
+    analyticsMode: environment.NEXT_PUBLIC_ANALYTICS_MODE,
+  };
+}
diff --git a/homepage/src/lib/integrations/feature-flags.ts b/homepage/src/lib/integrations/feature-flags.ts
new file mode 100644
index 0000000..e7d598a
--- /dev/null
+++ b/homepage/src/lib/integrations/feature-flags.ts
@@ -0,0 +1,25 @@
+import type { PublicIntegrationConfig } from './environment';
+
+export interface FeatureFlags {
+  demoSubmissionEnabled: boolean;
+  crmIntegrationEnabled: false;
+  schedulerEnabled: false;
+  analyticsEnabled: boolean;
+  marketingConsentEnabled: false;
+  productTourEnabled: false;
+  pricingDestinationEnabled: false;
+  loginDestinationEnabled: false;
+}
+
+export function buildFeatureFlags(config: PublicIntegrationConfig): FeatureFlags {
+  return {
+    demoSubmissionEnabled: config.demoSubmissionEnabled,
+    crmIntegrationEnabled: false,
+    schedulerEnabled: false,
+    analyticsEnabled: config.analyticsMode === 'test',
+    marketingConsentEnabled: false,
+    productTourEnabled: false,
+    pricingDestinationEnabled: false,
+    loginDestinationEnabled: false,
+  };
+}
diff --git a/homepage/src/lib/localization/client-messages.ts b/homepage/src/lib/localization/client-messages.ts
new file mode 100644
index 0000000..2e81429
--- /dev/null
+++ b/homepage/src/lib/localization/client-messages.ts
@@ -0,0 +1,15 @@
+import arShell from '@/content/locales/ar/shell.json';
+import enShell from '@/content/locales/en/shell.json';
+import frShell from '@/content/locales/fr/shell.json';
+import { isLocale, type Locale } from './config';
+import type { ShellMessages } from './messages';
+
+const shells = {
+  en: enShell,
+  fr: frShell,
+  ar: arShell,
+} satisfies Record<Locale, ShellMessages>;
+
+export function getClientShellMessages(value: unknown): ShellMessages {
+  return isLocale(value) ? shells[value] : shells.en;
+}
diff --git a/homepage/src/lib/localization/client.ts b/homepage/src/lib/localization/client.ts
new file mode 100644
index 0000000..180473d
--- /dev/null
+++ b/homepage/src/lib/localization/client.ts
@@ -0,0 +1,18 @@
+import { localeCookie, localeCookieMaxAgeSeconds, localeStorageKey, type Locale } from './config';
+
+export function persistLocale(locale: Locale): void {
+  try {
+    window.localStorage.setItem(localeStorageKey, locale);
+  } catch {
+    // The route and first-party cookie remain sufficient when storage is unavailable.
+  }
+
+  const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie =
+    [
+      `${localeCookie}=${encodeURIComponent(locale)}`,
+      'Path=/',
+      `Max-Age=${localeCookieMaxAgeSeconds}`,
+      'SameSite=Lax',
+    ].join('; ') + secure;
+}
diff --git a/homepage/src/lib/localization/config.ts b/homepage/src/lib/localization/config.ts
new file mode 100644
index 0000000..8ff4d2b
--- /dev/null
+++ b/homepage/src/lib/localization/config.ts
@@ -0,0 +1,140 @@
+import rawManifest from '@/contracts/phase9/route-manifest.json';
+import { z } from 'zod';
+
+export const locales = ['en', 'fr', 'ar'] as const;
+export type Locale = (typeof locales)[number];
+export type Direction = 'ltr' | 'rtl';
+export type RouteId = 'home' | 'sign-in' | 'forgot-password' | 'reset-password' | 'privacy' | 'terms' | 'accessibility';
+
+export const defaultLocale: Locale = 'en';
+export const localeCookie = 'hpc-locale';
+export const localeStorageKey = 'hpc.locale';
+export const localeCookieMaxAgeSeconds = 31_536_000;
+export const directionByLocale: Record<Locale, Direction> = {
+  en: 'ltr',
+  fr: 'ltr',
+  ar: 'rtl',
+};
+
+const localeSchema = z.enum(locales);
+const routeSchema = z.object({
+  id: z.enum(['home', 'sign-in', 'forgot-password', 'reset-password', 'privacy', 'terms', 'accessibility']),
+  slugs: z.object({ en: z.string(), fr: z.string(), ar: z.string() }),
+  indexable: z.boolean(),
+  hashes: z.array(z.string()),
+});
+const routeManifestSchema = z.object({
+  version: z.string(),
+  defaultLocale: localeSchema,
+  locales: z.array(localeSchema).length(locales.length),
+  rootDetection: z.boolean(),
+  routes: z.array(routeSchema),
+  switching: z.object({
+    preserveQueryAllowlist: z.array(z.string()),
+    preserveValidHash: z.boolean(),
+    dropUnknownQuery: z.boolean(),
+  }),
+  hreflang: z.object({
+    values: z.array(localeSchema),
+    xDefaultLocale: localeSchema,
+    selfCanonical: z.boolean(),
+  }),
+});
+
+export const routeManifest = routeManifestSchema.parse(rawManifest);
+export const campaignQueryAllowlist = routeManifest.switching.preserveQueryAllowlist;
+
+export function isLocale(value: unknown): value is Locale {
+  return typeof value === 'string' && (locales as readonly string[]).includes(value);
+}
+
+export function getDirection(locale: Locale): Direction {
+  return directionByLocale[locale];
+}
+
+export function localizedPath(routeId: RouteId, locale: Locale): string {
+  const route = routeManifest.routes.find((item) => item.id === routeId);
+  if (!route) {
+    throw new Error(`Unknown route ID: ${routeId}`);
+  }
+  const slug = route.slugs[locale];
+  return slug.length > 0 ? `/${locale}/${slug}` : `/${locale}`;
+}
+
+export function routeById(routeId: RouteId) {
+  const route = routeManifest.routes.find((item) => item.id === routeId);
+  if (!route) {
+    throw new Error(`Unknown route ID: ${routeId}`);
+  }
+  return route;
+}
+
+export function localeFromAcceptLanguage(headerValue: string | null): Locale {
+  if (!headerValue) return defaultLocale;
+
+  const requested = headerValue
+    .split(',')
+    .map((entry) => {
+      const [tag = '', ...parameters] = entry.trim().split(';');
+      const qualityParameter = parameters.find((parameter) => parameter.trim().startsWith('q='));
+      const quality = qualityParameter ? Number(qualityParameter.trim().slice(2)) : 1;
+      return { tag: tag.toLowerCase(), quality: Number.isFinite(quality) ? quality : 0 };
+    })
+    .sort((a, b) => b.quality - a.quality);
+
+  for (const request of requested) {
+    const base = request.tag.split('-')[0];
+    if (isLocale(base)) return base;
+  }
+  return defaultLocale;
+}
+
+export function localeSwitchUrl(current: URL, targetLocale: Locale, routeId: RouteId): URL {
+  const target = new URL(localizedPath(routeId, targetLocale), current.origin);
+  for (const key of campaignQueryAllowlist) {
+    const value = current.searchParams.get(key);
+    if (value !== null) target.searchParams.set(key, value);
+  }
+
+  const route = routeById(routeId);
+  const hash = current.hash.replace(/^#/, '');
+  if (routeManifest.switching.preserveValidHash && route.hashes.includes(hash)) {
+    target.hash = hash;
+  }
+  return target;
+}
+
+export function routeIdFromSlug(locale: Locale, slug: string): RouteId | null {
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(slug);
+  } catch {
+    return null;
+  }
+  const normalized = decoded.replace(/^\/+|\/+$/g, '');
+  const route = routeManifest.routes.find((item) => item.slugs[locale] === normalized);
+  return route?.id ?? null;
+}
+
+export function routeIdFromPathname(pathname: string): RouteId | null {
+  const [localeValue, ...segments] = pathname.split('/').filter(Boolean);
+  if (!isLocale(localeValue)) return null;
+  if (segments.length === 0) return 'home';
+  return routeIdFromSlug(localeValue, segments.join('/'));
+}
+
+export function localizedUrl(origin: URL, routeId: RouteId, locale: Locale): URL {
+  return new URL(localizedPath(routeId, locale), origin);
+}
+
+export function hreflangMap(origin: URL, routeId: RouteId): Record<string, string> {
+  const entries = locales.map((locale) => [
+    locale,
+    new URL(localizedPath(routeId, locale), origin).href,
+  ]);
+  entries.push([
+    'x-default',
+    new URL(localizedPath(routeId, routeManifest.hreflang.xDefaultLocale), origin).href,
+  ]);
+  return Object.fromEntries(entries);
+}
diff --git a/homepage/src/lib/localization/format.ts b/homepage/src/lib/localization/format.ts
new file mode 100644
index 0000000..4912bad
--- /dev/null
+++ b/homepage/src/lib/localization/format.ts
@@ -0,0 +1,88 @@
+import type { Locale } from './config';
+
+const localeTag: Record<Locale, string> = {
+  en: 'en',
+  fr: 'fr',
+  ar: 'ar',
+};
+
+export interface DateFormattingContext {
+  locale: Locale;
+  timeZone: string;
+}
+
+export function formatDate(
+  value: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' },
+): string {
+  return new Intl.DateTimeFormat(localeTag[context.locale], {
+    calendar: 'gregory',
+    numberingSystem: 'latn',
+    timeZone: context.timeZone,
+    ...options,
+  }).format(value);
+}
+
+export function formatTime(
+  value: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { timeStyle: 'short' },
+): string {
+  return formatDate(value, context, options);
+}
+
+export function formatDateRange(
+  start: Date | number,
+  end: Date | number,
+  context: DateFormattingContext,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' },
+): string {
+  const formatter = new Intl.DateTimeFormat(localeTag[context.locale], {
+    calendar: 'gregory',
+    numberingSystem: 'latn',
+    timeZone: context.timeZone,
+    ...options,
+  });
+  return formatter.formatRange(start, end);
+}
+
+export function formatNumber(
+  value: number,
+  locale: Locale,
+  options: Intl.NumberFormatOptions = {},
+): string {
+  return new Intl.NumberFormat(localeTag[locale], {
+    numberingSystem: 'latn',
+    ...options,
+  }).format(value);
+}
+
+export function formatPercent(value: number, locale: Locale): string {
+  return formatNumber(value, locale, { style: 'percent', maximumFractionDigits: 1 });
+}
+
+export function formatCurrency(value: number, locale: Locale, currency: string): string {
+  if (!/^[A-Z]{3}$/.test(currency)) {
+    throw new Error('Currency must be an explicit ISO 4217 code.');
+  }
+  return formatNumber(value, locale, { style: 'currency', currency });
+}
+
+export function formatRelativeTime(
+  value: number,
+  unit: Intl.RelativeTimeFormatUnit,
+  locale: Locale,
+): string {
+  return new Intl.RelativeTimeFormat(`${localeTag[locale]}-u-nu-latn`, {
+    numeric: 'auto',
+  }).format(value, unit);
+}
+
+export function formatPhoneNumber(value: string): string {
+  return value.replace(/[^+\d]/g, '').replace(/(?!^)\+/g, '');
+}
+
+export function preserveIdentifier(value: string): string {
+  return value.replace(/\s+/g, ' ');
+}
diff --git a/homepage/src/lib/localization/messages.ts b/homepage/src/lib/localization/messages.ts
new file mode 100644
index 0000000..44e1623
--- /dev/null
+++ b/homepage/src/lib/localization/messages.ts
@@ -0,0 +1,26 @@
+import 'server-only';
+
+import arHomepage from '@/content/locales/ar/homepage.json';
+import arShell from '@/content/locales/ar/shell.json';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import frHomepage from '@/content/locales/fr/homepage.json';
+import frShell from '@/content/locales/fr/shell.json';
+import type { Locale } from './config';
+
+export type HomepageMessages = typeof enHomepage;
+export type ShellMessages = typeof enShell;
+export interface Messages {
+  homepage: HomepageMessages;
+  shell: ShellMessages;
+}
+
+const messages = {
+  en: { homepage: enHomepage, shell: enShell },
+  fr: { homepage: frHomepage, shell: frShell },
+  ar: { homepage: arHomepage, shell: arShell },
+} satisfies Record<Locale, Messages>;
+
+export function getMessages(locale: Locale): Messages {
+  return messages[locale];
+}
diff --git a/homepage/src/lib/localization/site-origin.ts b/homepage/src/lib/localization/site-origin.ts
new file mode 100644
index 0000000..d045d69
--- /dev/null
+++ b/homepage/src/lib/localization/site-origin.ts
@@ -0,0 +1,22 @@
+const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]']);
+
+export function getSiteOrigin(): URL {
+  const configured = process.env.SITE_ORIGIN;
+  if (!configured) {
+    if (process.env.NODE_ENV !== 'production') return new URL('http://localhost:3000');
+    throw new Error('SITE_ORIGIN is required in production. No canonical domain is approved yet.');
+  }
+
+  const origin = new URL(configured);
+  if (origin.pathname !== '/' || origin.search || origin.hash) {
+    throw new Error('SITE_ORIGIN must contain only scheme and host.');
+  }
+  if (
+    process.env.NODE_ENV === 'production' &&
+    origin.protocol !== 'https:' &&
+    !LOOPBACK_HOSTS.has(origin.hostname)
+  ) {
+    throw new Error('SITE_ORIGIN must use HTTPS in production.');
+  }
+  return origin;
+}
diff --git a/homepage/src/lib/metadata/build-metadata.ts b/homepage/src/lib/metadata/build-metadata.ts
new file mode 100644
index 0000000..4dff5e0
--- /dev/null
+++ b/homepage/src/lib/metadata/build-metadata.ts
@@ -0,0 +1,57 @@
+import {
+  hreflangMap,
+  localizedPath,
+  locales,
+  type Locale,
+  type RouteId,
+} from '@/lib/localization/config';
+import { getSiteOrigin } from '@/lib/localization/site-origin';
+import type { Metadata } from 'next';
+
+interface LocalizedMetadataInput {
+  locale: Locale;
+  routeId: RouteId;
+  title: string;
+  description: string;
+  indexable: boolean;
+}
+
+export function buildLocalizedMetadata({
+  locale,
+  routeId,
+  title,
+  description,
+  indexable,
+}: LocalizedMetadataInput): Metadata {
+  const origin = getSiteOrigin();
+  const publicReleaseApproved = process.env.PUBLIC_RELEASE_APPROVED === 'true';
+  const canIndex = publicReleaseApproved && indexable;
+  const canonicalPath = localizedPath(routeId, locale);
+
+  return {
+    metadataBase: origin,
+    title,
+    description,
+    alternates: {
+      canonical: canonicalPath,
+      languages: hreflangMap(origin, routeId),
+    },
+    openGraph: {
+      type: 'website',
+      siteName: 'RentalDriveGo',
+      title,
+      description,
+      url: canonicalPath,
+      locale,
+      alternateLocale: locales.filter((candidate) => candidate !== locale),
+    },
+    twitter: {
+      card: 'summary',
+      title,
+      description,
+    },
+    robots: canIndex
+      ? { index: true, follow: true }
+      : { index: false, follow: false, noarchive: true },
+  };
+}
diff --git a/homepage/src/lib/security/content-type.ts b/homepage/src/lib/security/content-type.ts
new file mode 100644
index 0000000..fc08ff3
--- /dev/null
+++ b/homepage/src/lib/security/content-type.ts
@@ -0,0 +1,9 @@
+/**
+ * Accept JSON requests with optional media-type parameters while rejecting
+ * look-alike types such as application/jsonp or application/json-patch+json.
+ */
+export function isApplicationJson(contentType: string | null): boolean {
+  if (!contentType) return false;
+  const [mediaType] = contentType.split(';', 1);
+  return mediaType?.trim().toLowerCase() === 'application/json';
+}
diff --git a/homepage/src/lib/security/csp.ts b/homepage/src/lib/security/csp.ts
new file mode 100644
index 0000000..7ea0b27
--- /dev/null
+++ b/homepage/src/lib/security/csp.ts
@@ -0,0 +1,25 @@
+export function createNonce(): string {
+  return crypto.randomUUID().replaceAll('-', '');
+}
+
+export function buildContentSecurityPolicy(nonce: string, development: boolean): string {
+  const scriptSources = ["'self'", `'nonce-${nonce}'`, "'strict-dynamic'"];
+  if (development) scriptSources.push("'unsafe-eval'");
+
+  const directives = [
+    "default-src 'self'",
+    `script-src ${scriptSources.join(' ')}`,
+    `style-src 'self'${development ? " 'unsafe-inline'" : ` 'nonce-${nonce}'`}`,
+    "img-src 'self' data: blob:",
+    "font-src 'self' data:",
+    `connect-src 'self'${development ? ' ws: wss:' : ''}`,
+    "media-src 'self'",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+    "worker-src 'self' blob:",
+    ...(development ? [] : ['upgrade-insecure-requests']),
+  ];
+  return directives.join('; ');
+}
diff --git a/homepage/src/lib/theme/bootstrap-script.ts b/homepage/src/lib/theme/bootstrap-script.ts
new file mode 100644
index 0000000..137cf3b
--- /dev/null
+++ b/homepage/src/lib/theme/bootstrap-script.ts
@@ -0,0 +1,13 @@
+export const themeBootstrapScript = `(function () {
+  var allowed = { light: true, dark: true, system: true };
+  var cookieMatch = document.cookie.match(/(?:^|; )hpc-theme=([^;]+)/);
+  var cookieValue = cookieMatch ? decodeURIComponent(cookieMatch[1]) : null;
+  var stored = null;
+  try { stored = localStorage.getItem("hpc.theme.preference"); } catch (_) {}
+  var preference = allowed[cookieValue] ? cookieValue : (allowed[stored] ? stored : "system");
+  var dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  var resolved = preference === "system" ? (dark ? "dark" : "light") : preference;
+  var root = document.documentElement;
+  root.dataset.themePreference = preference;
+  root.dataset.theme = resolved;
+})();`;
diff --git a/homepage/src/lib/theme/client.ts b/homepage/src/lib/theme/client.ts
new file mode 100644
index 0000000..d9eae63
--- /dev/null
+++ b/homepage/src/lib/theme/client.ts
@@ -0,0 +1,44 @@
+import {
+  isThemePreference,
+  resolveTheme,
+  themeCookie,
+  themeCookieMaxAgeSeconds,
+  themeStorageKey,
+  type ThemePreference,
+} from './config';
+
+export const themePreferenceEvent = 'rentaldrivego:theme-preference';
+
+export function applyTheme(preference: ThemePreference): void {
+  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const resolved = resolveTheme(preference, systemDark);
+  const root = document.documentElement;
+  root.dataset.themePreference = preference;
+  root.dataset.theme = resolved;
+}
+
+export function persistTheme(preference: ThemePreference): void {
+  try {
+    window.localStorage.setItem(themeStorageKey, preference);
+  } catch {
+    // Storage can be unavailable; the first-party cookie remains canonical.
+  }
+
+  const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie =
+    [
+      `${themeCookie}=${encodeURIComponent(preference)}`,
+      'Path=/',
+      `Max-Age=${themeCookieMaxAgeSeconds}`,
+      'SameSite=Lax',
+    ].join('; ') + secure;
+  applyTheme(preference);
+  window.dispatchEvent(
+    new CustomEvent<ThemePreference>(themePreferenceEvent, { detail: preference }),
+  );
+}
+
+export function currentThemePreference(): ThemePreference {
+  const value = document.documentElement.dataset.themePreference;
+  return isThemePreference(value) ? value : 'system';
+}
diff --git a/homepage/src/lib/theme/config.ts b/homepage/src/lib/theme/config.ts
new file mode 100644
index 0000000..1745de6
--- /dev/null
+++ b/homepage/src/lib/theme/config.ts
@@ -0,0 +1,19 @@
+export const themeCookie = 'hpc-theme';
+export const themeStorageKey = 'hpc.theme.preference';
+export const themePreferences = ['light', 'dark', 'system'] as const;
+export type ThemePreference = (typeof themePreferences)[number];
+export type ResolvedTheme = 'light' | 'dark';
+
+export const themeCookieMaxAgeSeconds = 31_536_000;
+
+export function isThemePreference(value: unknown): value is ThemePreference {
+  return typeof value === 'string' && (themePreferences as readonly string[]).includes(value);
+}
+
+export function resolveTheme(preference: ThemePreference, systemDark: boolean): ResolvedTheme {
+  return preference === 'system' ? (systemDark ? 'dark' : 'light') : preference;
+}
+
+export function serverResolvedTheme(preference: ThemePreference): ResolvedTheme {
+  return preference === 'dark' ? 'dark' : 'light';
+}
diff --git a/homepage/src/proxy.ts b/homepage/src/proxy.ts
new file mode 100644
index 0000000..bc86433
--- /dev/null
+++ b/homepage/src/proxy.ts
@@ -0,0 +1,71 @@
+import {
+  defaultLocale,
+  isLocale,
+  localeCookie,
+  localeCookieMaxAgeSeconds,
+  localeFromAcceptLanguage,
+} from '@/lib/localization/config';
+import { buildContentSecurityPolicy, createNonce } from '@/lib/security/csp';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+function applySecurityHeaders(response: NextResponse, contentSecurityPolicy: string): NextResponse {
+  response.headers.set('Content-Security-Policy', contentSecurityPolicy);
+  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+  response.headers.set('X-Content-Type-Options', 'nosniff');
+  response.headers.set('X-Frame-Options', 'DENY');
+  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+  response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
+  return response;
+}
+
+export function proxy(request: NextRequest): NextResponse {
+  const nonce = createNonce();
+  const csp = buildContentSecurityPolicy(nonce, process.env.NODE_ENV !== 'production');
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('x-nonce', nonce);
+  requestHeaders.set('Content-Security-Policy', csp);
+
+  if (request.nextUrl.pathname === '/') {
+    const cookieLocale = request.cookies.get(localeCookie)?.value;
+    const locale = isLocale(cookieLocale)
+      ? cookieLocale
+      : localeFromAcceptLanguage(request.headers.get('accept-language')) || defaultLocale;
+    const destination = request.nextUrl.clone();
+    destination.pathname = `/${locale}`;
+    const response = NextResponse.redirect(destination);
+    response.cookies.set(localeCookie, locale, {
+      path: '/',
+      sameSite: 'lax',
+      maxAge: localeCookieMaxAgeSeconds,
+      secure: process.env.NODE_ENV === 'production',
+      httpOnly: false,
+    });
+    return applySecurityHeaders(response, csp);
+  }
+
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
+  const explicitLocale = request.nextUrl.pathname.split('/')[1];
+  if (isLocale(explicitLocale)) {
+    response.cookies.set(localeCookie, explicitLocale, {
+      path: '/',
+      sameSite: 'lax',
+      maxAge: localeCookieMaxAgeSeconds,
+      secure: process.env.NODE_ENV === 'production',
+      httpOnly: false,
+    });
+  }
+  return applySecurityHeaders(response, csp);
+}
+
+export const config = {
+  matcher: [
+    {
+      source: '/((?!api|_next/static|_next/image|assets|favicon.ico|robots.txt|sitemap.xml).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+};
diff --git a/homepage/src/styles/component-tokens.css b/homepage/src/styles/component-tokens.css
new file mode 100644
index 0000000..b70c74b
--- /dev/null
+++ b/homepage/src/styles/component-tokens.css
@@ -0,0 +1,127 @@
+/*
+ * Phase 11 component-facing token layer.
+ * Raw palette values remain in the immutable Phase 9 token source. Components consume only
+ * the semantic aliases below. Added roles are documented in docs/TOKEN_IMPLEMENTATION_v1.0.md.
+ */
+:root {
+  --surface-page: var(--color-canvas);
+  --surface-primary: var(--color-surface);
+  --surface-elevated: var(--color-surface-raised);
+  --surface-muted: var(--color-surface-muted);
+  --surface-strong: var(--color-surface-strong);
+  --text-primary: var(--color-text);
+  --text-secondary: var(--color-text-muted);
+  --text-subdued: var(--color-gray-500);
+  --text-inverse: var(--color-on-inverse);
+  --border-standard: var(--color-border);
+  --border-strong: var(--color-border-strong);
+  --interactive-primary: var(--color-action-primary);
+  --interactive-primary-hover: var(--color-action-primary-hover);
+  --interactive-conversion: var(--color-action-conversion);
+  --interactive-conversion-hover: var(--color-action-conversion-hover);
+  --interactive-danger: var(--color-red-700);
+  --link-default: var(--color-action-primary);
+  --link-hover: var(--color-action-primary-hover);
+  --focus-ring: var(--color-focus);
+  --status-success-surface: var(--color-green-100);
+  --status-success-text: var(--color-green-700);
+  --status-warning-surface: var(--color-amber-100);
+  --status-warning-text: var(--color-amber-800);
+  --status-error-surface: var(--color-red-100);
+  --status-error-text: var(--color-red-700);
+  --status-info-surface: var(--color-soft-blue);
+  --status-info-text: var(--color-blue-800);
+  --overlay-scrim: color-mix(in srgb, var(--color-navy-950) 72%, transparent);
+  --control-disabled-surface: var(--color-gray-100);
+  --control-disabled-text: var(--color-gray-600);
+  --selection-surface: var(--color-blue-200);
+  --selection-text: var(--color-gray-900);
+  --skeleton-base: var(--color-surface-strong);
+  --skeleton-highlight: var(--color-surface-raised);
+  --shadow-subtle: 0 1px 2px var(--shadow-color);
+  --shadow-card: 0 20px 60px var(--shadow-color);
+  --shadow-overlay: 0 28px 80px var(--shadow-color);
+  --container-wide: var(--size-container-max);
+  --container-content: 960px;
+  --container-reading: 720px;
+  --layout-gutter: clamp(var(--space-4), 4vw, var(--space-10));
+  --section-space: clamp(var(--space-12), 8vw, var(--space-24));
+  --header-min-block-size: 76px;
+  --header-offset: 92px;
+  --layer-base: 0;
+  --layer-sticky: 100;
+  --layer-overlay: 500;
+  --layer-skip-link: 1000;
+  --opacity-disabled: 0.62;
+  --type-display-size: clamp(2.25rem, 6vw, 4.75rem);
+  --type-heading-1-size: clamp(2rem, 5vw, 4rem);
+  --type-heading-2-size: clamp(1.75rem, 3vw, 2.75rem);
+  --type-heading-3-size: clamp(1.25rem, 2vw, 1.75rem);
+  --type-body-large-size: clamp(1.0625rem, 1.5vw, 1.25rem);
+  --type-body-size: 1rem;
+  --type-label-size: 0.875rem;
+  --type-caption-size: 0.8125rem;
+  --line-display: 1.05;
+  --line-heading: 1.18;
+  --line-body: 1.65;
+  --line-arabic-body: 1.85;
+  --tracking-display: -0.035em;
+  --tracking-label: 0.04em;
+}
+
+html[data-theme='dark'] {
+  --text-subdued: var(--color-gray-300);
+  --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+  --status-success-text: var(--color-green-100);
+  --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+  --status-warning-text: var(--color-amber-100);
+  --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+  --status-error-text: var(--color-red-100);
+  --status-info-text: var(--color-blue-100);
+  --control-disabled-surface: var(--color-navy-800);
+  --control-disabled-text: var(--color-gray-300);
+  --selection-surface: var(--color-blue-800);
+  --selection-text: var(--color-gray-25);
+}
+
+/* CSS-only fallback for system theme when JavaScript is unavailable or delayed. */
+@media (prefers-color-scheme: dark) {
+  html[data-theme-preference='system'] {
+    --surface-page: var(--color-navy-950);
+    --surface-primary: var(--color-navy-900);
+    --surface-elevated: var(--color-navy-850);
+    --surface-muted: var(--color-navy-900);
+    --surface-strong: var(--color-navy-800);
+    --text-primary: var(--color-blue-50);
+    --text-secondary: var(--color-gray-300);
+    --text-subdued: var(--color-gray-300);
+    --text-inverse: var(--color-navy-950);
+    --border-standard: var(--color-navy-800);
+    --border-strong: var(--color-gray-600);
+    --interactive-primary: var(--color-blue-200);
+    --interactive-primary-hover: var(--color-blue-100);
+    --interactive-conversion: var(--color-orange-400);
+    --interactive-conversion-hover: var(--color-orange-100);
+    --link-default: var(--color-blue-200);
+    --link-hover: var(--color-blue-100);
+    --focus-ring: var(--color-orange-400);
+    --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
+    --status-success-text: var(--color-green-100);
+    --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
+    --status-warning-text: var(--color-amber-100);
+    --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
+    --status-error-text: var(--color-red-100);
+    --status-info-surface: var(--color-navy-800);
+    --status-info-text: var(--color-blue-100);
+    --control-disabled-surface: var(--color-navy-800);
+    --control-disabled-text: var(--color-gray-300);
+    --selection-surface: var(--color-blue-800);
+    --selection-text: var(--color-gray-25);
+    --skeleton-base: var(--color-navy-800);
+    --skeleton-highlight: var(--color-navy-850);
+    --shadow-subtle: 0 1px 2px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-card: 0 20px 60px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
+    --shadow-overlay: 0 28px 80px color-mix(in srgb, var(--color-navy-950) 78%, transparent);
+    color-scheme: dark;
+  }
+}
diff --git a/homepage/src/styles/globals.css b/homepage/src/styles/globals.css
new file mode 100644
index 0000000..b20121e
--- /dev/null
+++ b/homepage/src/styles/globals.css
@@ -0,0 +1,156 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-inline-size: 320px;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  color-scheme: light;
+  scroll-behavior: smooth;
+  scroll-padding-block-start: var(--header-offset);
+  text-rendering: optimizeLegibility;
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+body {
+  min-block-size: 100dvh;
+  margin: 0;
+  overflow-wrap: anywhere;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  font-family: var(--font-latin);
+  font-size: var(--type-body-size);
+  line-height: var(--line-body);
+}
+
+body[data-navigation-open='true'] {
+  overflow: hidden;
+}
+
+html[lang='ar'] body {
+  font-family: var(--font-arabic);
+  line-height: var(--line-arabic-body);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+select,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-inline-size: 100%;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-block-start: 0;
+}
+
+h1,
+h2,
+h3 {
+  line-height: var(--line-heading);
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--link-default);
+  text-underline-offset: 0.18em;
+}
+
+a:hover {
+  color: var(--link-hover);
+}
+
+::selection {
+  background: var(--selection-surface);
+  color: var(--selection-text);
+}
+
+:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+:target {
+  scroll-margin-block-start: var(--header-offset);
+}
+
+.skip-link {
+  position: fixed;
+  z-index: var(--layer-skip-link);
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--interactive-primary);
+  color: var(--text-inverse);
+  font-weight: 700;
+  text-decoration: none;
+  transform: translateY(-160%);
+  transition: transform var(--duration-fast) var(--easing-productive);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+bdi,
+[data-bidi-isolate='true'] {
+  unicode-bidi: isolate;
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 3px solid CanvasText;
+  }
+
+  .skip-link {
+    border: 1px solid CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
diff --git a/homepage/src/styles/tokens.css b/homepage/src/styles/tokens.css
new file mode 100644
index 0000000..23e3812
--- /dev/null
+++ b/homepage/src/styles/tokens.css
@@ -0,0 +1,130 @@
+:root {
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-500: #2874e8;
+  --color-blue-600: #1b5dd8;
+  --color-blue-700: #174bb5;
+  --color-blue-800: #183d88;
+  --color-orange-100: #ffedd5;
+  --color-orange-400: #fb923c;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-navy-950: #081426;
+  --color-navy-900: #0d1b2e;
+  --color-navy-850: #11233b;
+  --color-navy-800: #162b46;
+  --color-gray-25: #fbfdff;
+  --color-gray-50: #f7f9fc;
+  --color-gray-100: #eef2f7;
+  --color-gray-200: #dbe3ed;
+  --color-gray-300: #c6d0dc;
+  --color-gray-500: #64748b;
+  --color-gray-600: #475569;
+  --color-gray-700: #334155;
+  --color-gray-800: #1e293b;
+  --color-gray-900: #0f172a;
+  --color-green-100: #dcfce7;
+  --color-green-700: #15803d;
+  --color-amber-100: #fef3c7;
+  --color-amber-800: #92400e;
+  --color-red-100: #fee2e2;
+  --color-red-700: #b91c1c;
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-11: 44px;
+  --space-12: 48px;
+  --space-13: 52px;
+  --space-14: 56px;
+  --space-15: 60px;
+  --space-16: 64px;
+  --space-17: 68px;
+  --space-18: 72px;
+  --space-19: 76px;
+  --space-20: 80px;
+  --space-21: 84px;
+  --space-22: 88px;
+  --space-23: 92px;
+  --space-24: 96px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --radius-pill: 999px;
+  --size-touch-min: 44px;
+  --size-container-max: 1280px;
+  --duration-fast: 120ms;
+  --duration-standard: 160ms;
+  --duration-overlay: 220ms;
+  --easing-standard: ease;
+  --easing-productive: cubic-bezier(0.2, 0, 0, 1);
+  --font-latin: Inter Variable, Inter, Arial, sans-serif;
+  --font-arabic: Noto Sans Arabic, Arial, sans-serif;
+  --breakpoint-medium: 768px;
+  --breakpoint-wide: 1120px;
+}
+
+html[data-theme='light'] {
+  --color-canvas: var(--color-gray-25);
+  --color-surface: #ffffff;
+  --color-surface-raised: #ffffff;
+  --color-surface-muted: #f2f6fb;
+  --color-surface-strong: #e8f0fa;
+  --color-text: #102035;
+  --color-text-muted: #52647a;
+  --color-border: #d8e2ee;
+  --color-border-strong: #bdcad9;
+  --color-action-primary: var(--color-blue-700);
+  --color-action-primary-hover: var(--color-blue-800);
+  --color-action-conversion: var(--color-orange-700);
+  --color-action-conversion-hover: #9a3412;
+  --color-focus: #f97316;
+  --color-on-inverse: #f8fafc;
+  --color-soft-blue: #eef5ff;
+  --color-soft-orange: #fff7ed;
+  --shadow-color: rgba(8, 20, 38, 0.12);
+  color-scheme: light;
+}
+html[data-theme='dark'] {
+  --color-canvas: var(--color-navy-950);
+  --color-surface: var(--color-navy-900);
+  --color-surface-raised: var(--color-navy-850);
+  --color-surface-muted: #0b1a2d;
+  --color-surface-strong: #172d48;
+  --color-text: #eef5ff;
+  --color-text-muted: #adbed2;
+  --color-border: #263c56;
+  --color-border-strong: #3a536e;
+  --color-action-primary: #76a9ff;
+  --color-action-primary-hover: #9bc2ff;
+  --color-action-conversion: var(--color-orange-400);
+  --color-action-conversion-hover: #fdba74;
+  --color-focus: var(--color-orange-400);
+  --color-on-inverse: var(--color-navy-950);
+  --color-soft-blue: #10284a;
+  --color-soft-orange: #3a2015;
+  --shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/homepage/tests/a11y/component-system.a11y.spec.ts b/homepage/tests/a11y/component-system.a11y.spec.ts
new file mode 100644
index 0000000..e257d4e
--- /dev/null
+++ b/homepage/tests/a11y/component-system.a11y.spec.ts
@@ -0,0 +1,12 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} component fixture has no detectable accessibility violations`, async ({
+    page,
+  }) => {
+    await page.goto(`/${locale}/component-lab`);
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
diff --git a/homepage/tests/a11y/homepage.a11y.spec.ts b/homepage/tests/a11y/homepage.a11y.spec.ts
new file mode 100644
index 0000000..59503a8
--- /dev/null
+++ b/homepage/tests/a11y/homepage.a11y.spec.ts
@@ -0,0 +1,24 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} homepage has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
+
+test('homepage keeps a coherent heading outline', async ({ page }) => {
+  await page.goto('/en');
+  const levels = await page
+    .locator('main h1, main h2, main h3')
+    .evaluateAll((headings) => headings.map((heading) => Number(heading.tagName.slice(1))));
+
+  expect(levels[0]).toBe(1);
+  for (let index = 1; index < levels.length; index += 1) {
+    expect((levels[index] ?? 1) - (levels[index - 1] ?? 1)).toBeLessThanOrEqual(1);
+  }
+});
diff --git a/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts b/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts
new file mode 100644
index 0000000..1f1bf68
--- /dev/null
+++ b/homepage/tests/a11y/integrations/demo-workflow.a11y.spec.ts
@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} demo dialog has no detectable WCAG A/AA violations`, async ({ page }) => {
+    await page.goto(`/${locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    const results = await new AxeBuilder({ page })
+      .include('dialog')
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+}
diff --git a/homepage/tests/a11y/shell.a11y.spec.ts b/homepage/tests/a11y/shell.a11y.spec.ts
new file mode 100644
index 0000000..c000c81
--- /dev/null
+++ b/homepage/tests/a11y/shell.a11y.spec.ts
@@ -0,0 +1,27 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  for (const theme of ['light', 'dark'] as const) {
+    test(`${locale} ${theme} shell has no detectable WCAG A/AA violations`, async ({
+      page,
+      context,
+    }) => {
+      await context.addCookies([
+        {
+          name: 'hpc-theme',
+          value: theme,
+          domain: '127.0.0.1',
+          path: '/',
+          secure: false,
+          sameSite: 'Lax',
+        },
+      ]);
+      await page.goto(`/${locale}`);
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+  }
+}
diff --git a/homepage/tests/browser/component-system.spec.ts b/homepage/tests/browser/component-system.spec.ts
new file mode 100644
index 0000000..7d7a2bb
--- /dev/null
+++ b/homepage/tests/browser/component-system.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} component fixture renders without horizontal overflow`, async ({ page }) => {
+    await page.goto(`/${locale}/component-lab`);
+    await expect(page.locator('h1')).toBeVisible();
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
+    );
+    expect(overflow).toBe(false);
+    await expect(page.locator('html')).toHaveAttribute('dir', locale === 'ar' ? 'rtl' : 'ltr');
+  });
+}
+
+test('component controls support keyboard interaction and dialog focus return', async ({
+  page,
+}) => {
+  await page.goto('/en/component-lab');
+  const firstTab = page.getByRole('tab', { name: 'Reservations' });
+  await firstTab.focus();
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('tab', { name: 'Fleet availability' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  const trigger = page.getByRole('button', { name: 'Open dialog' });
+  await trigger.click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('dialog')).toBeHidden();
+  await expect(trigger).toBeFocused();
+});
+
+test('component fixture reflows at narrow mobile and 200 percent zoom equivalent', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 320, height: 800 });
+  await page.goto('/fr/component-lab');
+  await page.evaluate(() => (document.body.style.zoom = '2'));
+  const overflow = await page.evaluate(
+    () => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
+  );
+  expect(overflow).toBe(false);
+});
diff --git a/homepage/tests/browser/homepage.spec.ts b/homepage/tests/browser/homepage.spec.ts
new file mode 100644
index 0000000..7d1d678
--- /dev/null
+++ b/homepage/tests/browser/homepage.spec.ts
@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', dir: 'ltr' },
+  { locale: 'fr', dir: 'ltr' },
+  { locale: 'ar', dir: 'rtl' },
+] as const) {
+  test(`${scenario.locale} homepage assembles the approved section sequence`, async ({ page }) => {
+    await page.goto(`/${scenario.locale}`);
+
+    await expect(page.locator('html')).toHaveAttribute('dir', scenario.dir);
+    await expect(page.locator('main h1')).toHaveCount(1);
+    await expect(page.locator('#product')).toBeVisible();
+    await expect(page.locator('#workflow')).toBeVisible();
+    await expect(page.locator('#modules')).toBeVisible();
+    await expect(page.locator('#pricing')).toBeVisible();
+    await expect(page.locator('#faq')).toBeVisible();
+    await expect(page.locator('main > section')).toHaveCount(12);
+  });
+
+  test(`${scenario.locale} unresolved actions remain non-navigable`, async ({ page }) => {
+    await page.goto(`/${scenario.locale}`);
+
+    const disabledActions = page.locator('main [aria-disabled="true"]');
+    await expect(disabledActions).toHaveCount(3);
+    await expect(disabledActions.first()).not.toHaveAttribute('href');
+  });
+}
+
+test('Arabic preview preserves left-to-right vehicle identifiers', async ({ page }) => {
+  await page.goto('/ar');
+  const identifiers = page.locator('[role="table"] bdi');
+  await expect(identifiers).toHaveCount(2);
+  await expect(identifiers.first()).toHaveAttribute('dir', 'ltr');
+});
+
+test('homepage navigation targets resolve to real sections', async ({ page }) => {
+  await page.goto('/en');
+  for (const hash of ['product', 'workflow', 'modules', 'pricing', 'faq']) {
+    await expect(page.locator(`#${hash}`)).toHaveCount(1);
+    await expect(page.locator(`header a[href="/en#${hash}"]`)).toHaveCount(2);
+  }
+});
+
+test('FAQ uses native disclosure behavior', async ({ page }) => {
+  await page.goto('/en');
+  const firstItem = page.locator('#faq details').first();
+  await expect(firstItem).toHaveAttribute('open', '');
+  await firstItem.locator('summary').click();
+  await expect(firstItem).not.toHaveAttribute('open', '');
+});
diff --git a/homepage/tests/browser/integrations/demo-workflow.spec.ts b/homepage/tests/browser/integrations/demo-workflow.spec.ts
new file mode 100644
index 0000000..7913e4e
--- /dev/null
+++ b/homepage/tests/browser/integrations/demo-workflow.spec.ts
@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test';
+
+const localeData = {
+  en: {
+    button: /Book a demo|Book a product demo/,
+    title: 'Book a product demo',
+    success: 'Demo request recorded',
+  },
+  fr: {
+    button: /Réserver une démonstration/,
+    title: 'Réserver une démonstration du produit',
+    success: 'Demande de démonstration enregistrée',
+  },
+  ar: {
+    button: /احجز عرضًا توضيحيًا|احجز عرض/,
+    title: 'احجز عرضًا توضيحيًا للمنتج',
+    success: 'تم تسجيل طلب العرض',
+  },
+} as const;
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  test(`${locale} demo flow validates and succeeds through the local adapter`, async ({ page }) => {
+    const labels = localeData[locale];
+    await page.goto(`/${locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+
+    const dialog = page.getByRole('dialog', { name: labels.title });
+    await expect(dialog).toBeVisible();
+    await dialog
+      .getByRole('button', { name: /Request my demo|Demander ma démonstration|إرسال طلب العرض/ })
+      .click();
+    await expect(dialog.locator('[role="alert"]')).toBeVisible();
+    await expect(dialog.locator('#fullName')).toBeFocused();
+
+    await dialog.locator('#fullName').fill('Avery Example');
+    await dialog.locator('#workEmail').fill('avery@example.test');
+    await dialog.locator('#company').fill('Example Rental Lab');
+    await dialog.locator('#fleetSize').selectOption('10-24');
+    await dialog
+      .getByRole('button', { name: /Request my demo|Demander ma démonstration|إرسال طلب العرض/ })
+      .click();
+
+    await expect(dialog.getByRole('heading', { name: labels.success })).toBeVisible();
+    await expect(page).toHaveURL(new RegExp(`/${locale}$`));
+  });
+}
+
+test('duplicate clicks create only one request while submission is pending', async ({ page }) => {
+  await page.goto('/en');
+  await page.locator('main button[data-demo-source="hero"]').click();
+  const dialog = page.getByRole('dialog', { name: 'Book a product demo' });
+  await dialog.locator('#fullName').fill('Avery Example');
+  await dialog.locator('#workEmail').fill('avery@example.test');
+  await dialog.locator('#company').fill('Example Rental Lab');
+  await dialog.locator('#fleetSize').selectOption('10-24');
+  const submit = dialog.getByRole('button', { name: 'Request my demo' });
+  await submit.dblclick();
+  await expect(dialog.getByRole('heading', { name: 'Demo request recorded' })).toBeVisible();
+});
+
+test('demo form does not place personal data in the URL or analytics sink', async ({ page }) => {
+  await page.goto('/en');
+  await page.locator('main button[data-demo-source="hero"]').click();
+  const dialog = page.getByRole('dialog', { name: 'Book a product demo' });
+  await dialog.locator('#fullName').fill('Private Example');
+  await dialog.locator('#workEmail').fill('private@example.test');
+  await dialog.locator('#company').fill('Private Rentals');
+  await dialog.locator('#fleetSize').selectOption('1-9');
+  await dialog.getByRole('button', { name: 'Request my demo' }).click();
+  await expect(dialog.getByRole('heading', { name: 'Demo request recorded' })).toBeVisible();
+  expect(page.url()).not.toContain('private');
+  const analytics = await page.evaluate(() => window.__rdgAnalyticsTestSink ?? []);
+  expect(JSON.stringify(analytics)).not.toContain('private');
+});
diff --git a/homepage/tests/browser/navigation.spec.ts b/homepage/tests/browser/navigation.spec.ts
new file mode 100644
index 0000000..fcef635
--- /dev/null
+++ b/homepage/tests/browser/navigation.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+
+test.use({ viewport: { width: 390, height: 844 } });
+
+test('mobile navigation opens modally, closes with Escape, and returns focus', async ({ page }) => {
+  await page.goto('/en');
+  const trigger = page.getByRole('button', { name: 'Open navigation menu' });
+  await trigger.focus();
+  await trigger.click();
+
+  const dialog = page.getByRole('dialog', { name: 'Primary navigation' });
+  await expect(dialog).toBeVisible();
+  await expect(page.locator('body')).toHaveAttribute('data-navigation-open', 'true');
+  await expect(page.getByRole('button', { name: 'Close navigation menu' })).toBeFocused();
+
+  await page.keyboard.press('Escape');
+  await expect(dialog).not.toBeVisible();
+  await expect(trigger).toBeFocused();
+});
+
+test('skip navigation moves focus to the main landmark', async ({ page }) => {
+  await page.goto('/en');
+  await page.keyboard.press('Tab');
+  const skip = page.getByRole('link', { name: 'Skip to main content' });
+  await expect(skip).toBeFocused();
+  await skip.press('Enter');
+  await expect(page.locator('#main-content')).toBeFocused();
+});
diff --git a/homepage/tests/browser/no-javascript.spec.ts b/homepage/tests/browser/no-javascript.spec.ts
new file mode 100644
index 0000000..407ceff
--- /dev/null
+++ b/homepage/tests/browser/no-javascript.spec.ts
@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+test('server shell remains readable with JavaScript disabled', async ({ browser }) => {
+  const context = await browser.newContext({ javaScriptEnabled: false, colorScheme: 'dark' });
+  const page = await context.newPage();
+  await page.goto('/ar');
+  await expect(page.locator('html')).toHaveAttribute('lang', 'ar');
+  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');
+  await expect(page.locator('h1')).toBeVisible();
+  await expect(page.locator('footer')).toBeVisible();
+  await context.close();
+});
diff --git a/homepage/tests/browser/responsive.spec.ts b/homepage/tests/browser/responsive.spec.ts
new file mode 100644
index 0000000..8fb6151
--- /dev/null
+++ b/homepage/tests/browser/responsive.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+const widths = [320, 390, 768, 1024, 1440];
+
+for (const locale of ['en', 'fr', 'ar'] as const) {
+  for (const width of widths) {
+    test(`${locale} has no horizontal overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto(`/${locale}`);
+      const overflow = await page.evaluate(
+        () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+      );
+      expect(overflow).toBeLessThanOrEqual(1);
+    });
+  }
+}
+
+test('shell remains operable at a 320 CSS pixel reflow equivalent to 200 percent zoom', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 640, height: 800 });
+  await page.goto('/fr');
+  await expect(page.getByRole('button', { name: 'Ouvrir le menu de navigation' })).toBeVisible();
+});
diff --git a/homepage/tests/browser/shell.spec.ts b/homepage/tests/browser/shell.spec.ts
new file mode 100644
index 0000000..6dd93d1
--- /dev/null
+++ b/homepage/tests/browser/shell.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', dir: 'ltr', title: /RentalDriveGo/ },
+  { locale: 'fr', dir: 'ltr', title: /RentalDriveGo/ },
+  { locale: 'ar', dir: 'rtl', title: /RentalDriveGo/ },
+] as const) {
+  test(`${scenario.locale} shell is server rendered`, async ({ page, request }) => {
+    const raw = await request.get(`/${scenario.locale}`);
+    const html = await raw.text();
+    expect(raw.status()).toBe(200);
+    expect(html).toMatch(
+      new RegExp(`<html[^>]*lang=\"${scenario.locale}\"[^>]*dir=\"${scenario.dir}\"`),
+    );
+
+    const response = await page.goto(`/${scenario.locale}`);
+    expect(response?.status()).toBe(200);
+    await expect(page.locator('html')).toHaveAttribute('lang', scenario.locale);
+    await expect(page.locator('html')).toHaveAttribute('dir', scenario.dir);
+    await expect(page).toHaveTitle(scenario.title);
+    await expect(page.locator('h1')).toBeVisible();
+    await expect(page.locator('header')).toBeVisible();
+    await expect(page.locator('footer')).toBeVisible();
+    await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
+      'href',
+      new RegExp(`/${scenario.locale}$`),
+    );
+    for (const language of ['en', 'fr', 'ar', 'x-default']) {
+      await expect(page.locator(`link[rel="alternate"][hreflang="${language}"]`)).toHaveCount(1);
+    }
+    await expect(page.locator('meta[property="og:locale"]')).toHaveAttribute(
+      'content',
+      scenario.locale,
+    );
+  });
+}
+
+test('root locale detection honors Accept-Language', async ({ browser }) => {
+  const context = await browser.newContext({
+    extraHTTPHeaders: { 'Accept-Language': 'ar;q=1,en;q=0.8' },
+  });
+  const page = await context.newPage();
+  await page.goto('/');
+  await expect(page).toHaveURL(/\/ar$/);
+  await context.close();
+});
+
+test('locale switching keeps the semantic route and approved campaign state', async ({ page }) => {
+  await page.goto('/en/privacy?utm_source=qa&email=drop-me#ignored');
+  await page.getByLabel('Language').first().selectOption('fr');
+  await expect(page).toHaveURL('/fr/confidentialite?utm_source=qa');
+});
+
+test('pending route shells are localized and noindex', async ({ page }) => {
+  await page.goto('/fr/confidentialite');
+  await expect(page.locator('h1')).toContainText('Confidentialité');
+  await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', /noindex/);
+});
diff --git a/homepage/tests/browser/text-expansion.spec.ts b/homepage/tests/browser/text-expansion.spec.ts
new file mode 100644
index 0000000..10e7187
--- /dev/null
+++ b/homepage/tests/browser/text-expansion.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+
+for (const locale of ['fr', 'ar'] as const) {
+  test(`${locale} shell tolerates long content expansion`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 900 });
+    await page.goto(`/${locale}`);
+    await page
+      .locator('main article h3')
+      .first()
+      .evaluate((element) => {
+        element.textContent = [element.textContent, element.textContent, element.textContent]
+          .filter(Boolean)
+          .join(' ');
+      });
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+}
diff --git a/homepage/tests/browser/theme-csp.spec.ts b/homepage/tests/browser/theme-csp.spec.ts
new file mode 100644
index 0000000..fd020f2
--- /dev/null
+++ b/homepage/tests/browser/theme-csp.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+
+test('explicit dark theme is present on the server-rendered root', async ({ browser, baseURL }) => {
+  const origin = new URL(baseURL ?? 'http://127.0.0.1:3000');
+  const context = await browser.newContext();
+  await context.addCookies([
+    {
+      name: 'hpc-theme',
+      value: 'dark',
+      domain: origin.hostname,
+      path: '/',
+      secure: false,
+      sameSite: 'Lax',
+    },
+  ]);
+  const page = await context.newPage();
+  const response = await page.goto('/en');
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  const csp = response?.headers()['content-security-policy'] ?? '';
+  const nonce = await page.locator('#theme-bootstrap').getAttribute('nonce');
+  expect(nonce).toBeTruthy();
+  expect(csp).toContain(`'nonce-${nonce}'`);
+  await context.close();
+});
+
+test('system preference resolves before interaction', async ({ browser }) => {
+  const context = await browser.newContext({ colorScheme: 'dark' });
+  const page = await context.newPage();
+  await page.goto('/en');
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'system');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await context.close();
+});
+
+test('system follows operating-system changes while explicit preferences ignore them', async ({
+  page,
+}) => {
+  await page.goto('/en');
+  const selector = page.getByLabel('Theme').first();
+
+  await selector.selectOption('system');
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+
+  await selector.selectOption('dark');
+  await page.emulateMedia({ colorScheme: 'light' });
+  await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  expect(await page.evaluate(() => window.localStorage.getItem('hpc.theme.preference'))).toBe(
+    'dark',
+  );
+  expect(await page.context().cookies()).toEqual(
+    expect.arrayContaining([expect.objectContaining({ name: 'hpc-theme', value: 'dark' })]),
+  );
+});
diff --git a/homepage/tests/fixtures/README.md b/homepage/tests/fixtures/README.md
new file mode 100644
index 0000000..f849acc
--- /dev/null
+++ b/homepage/tests/fixtures/README.md
@@ -0,0 +1,5 @@
+# Phase 11 foundation fixtures
+
+Phase 10 did not approve a component-workbench dependency. The repository therefore uses the live localized shell plus the matrix in `foundation-matrix.json` as the approved equivalent fixture strategy.
+
+Playwright functional, accessibility, responsive, and visual suites consume the same production routes and components. This avoids a parallel story-only rendering path that could pass while production quietly fails, a trick software is distressingly good at.
diff --git a/homepage/tests/fixtures/component-system/component-matrix.json b/homepage/tests/fixtures/component-system/component-matrix.json
new file mode 100644
index 0000000..c710a0a
--- /dev/null
+++ b/homepage/tests/fixtures/component-system/component-matrix.json
@@ -0,0 +1,9 @@
+{
+  "fixtureRoute": "/{locale}/component-lab",
+  "productionGuard": "COMPONENT_FIXTURES_ENABLED=true",
+  "locales": ["en", "fr", "ar"],
+  "themes": ["light", "dark", "system"],
+  "widths": [320, 390, 768, 1024, 1440],
+  "states": ["default", "focus-visible", "disabled", "loading", "error", "long-content", "rtl"],
+  "contentPolicy": "Fictional deterministic development data only; no production claims, customers, personal data, or live operations."
+}
diff --git a/homepage/tests/fixtures/foundation-matrix.json b/homepage/tests/fixtures/foundation-matrix.json
new file mode 100644
index 0000000..8f33b68
--- /dev/null
+++ b/homepage/tests/fixtures/foundation-matrix.json
@@ -0,0 +1,22 @@
+{
+  "locales": ["en", "fr", "ar"],
+  "directions": ["ltr", "rtl"],
+  "themes": ["light", "dark", "system"],
+  "viewports": [
+    { "name": "mobile", "width": 390, "height": 844 },
+    { "name": "tablet", "width": 1024, "height": 900 },
+    { "name": "desktop", "width": 1440, "height": 1000 }
+  ],
+  "shell_states": [
+    "default",
+    "mobile-navigation-open",
+    "keyboard-focus",
+    "loading",
+    "error",
+    "not-found",
+    "pending-destination",
+    "long-text",
+    "reduced-motion"
+  ],
+  "coverage_source": ["tests/browser", "tests/a11y", "tests/visual"]
+}
diff --git a/homepage/tests/integration/demo-service.test.ts b/homepage/tests/integration/demo-service.test.ts
new file mode 100644
index 0000000..8f16644
--- /dev/null
+++ b/homepage/tests/integration/demo-service.test.ts
@@ -0,0 +1,97 @@
+import { clearIdempotencyStoreForTests } from '@/lib/demo/idempotency';
+import type { LeadDestinationAdapter } from '@/lib/demo/adapters';
+import { submitDemoLead } from '@/lib/demo/service';
+import type { DemoLead } from '@/lib/demo/schema';
+import type { IntegrationEnvironment } from '@/lib/integrations/environment';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const environment: IntegrationEnvironment = {
+  NODE_ENV: 'test',
+  NEXT_PUBLIC_DEMO_ENABLED: true,
+  DEMO_SUBMISSION_MODE: 'local',
+  DEMO_REQUEST_TIMEOUT_MS: 250,
+  DEMO_IDEMPOTENCY_TTL_SECONDS: 900,
+  DEMO_TEST_SCENARIOS_ENABLED: true,
+  DEMO_LOCAL_TEST_MODE: false,
+  NEXT_PUBLIC_ANALYTICS_MODE: 'disabled',
+};
+
+const lead: DemoLead = {
+  fullName: 'Avery Example',
+  workEmail: 'avery@example.test',
+  company: 'Example Rental Lab',
+  fleetSize: '10-24',
+  preferredLanguage: 'en',
+  idempotencyKey: '6b4992d5-d88e-4e44-9b66-adc18fd8ee37',
+  source: 'hero',
+};
+
+beforeEach(clearIdempotencyStoreForTests);
+
+describe('demo submission orchestration', () => {
+  it('confirms acceptance before returning success', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-success',
+      submitLead: vi.fn(async () => ({
+        ok: true as const,
+        externalId: 'local_test',
+        acceptedAt: '2026-06-25T00:00:00.000Z',
+        mode: 'local' as const,
+      })),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result.ok).toBe(true);
+    expect(adapter.submitLead).toHaveBeenCalledOnce();
+  });
+
+  it('coalesces repeated transport with the same idempotency key', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-idempotent',
+      submitLead: vi.fn(async () => ({
+        ok: true as const,
+        externalId: 'local_once',
+        acceptedAt: '2026-06-25T00:00:00.000Z',
+        mode: 'local' as const,
+      })),
+    };
+    const [first, second] = await Promise.all([
+      submitDemoLead(lead, { environment, adapter }),
+      submitDemoLead(lead, { environment, adapter }),
+    ]);
+    expect(first).toEqual(second);
+    expect(adapter.submitLead).toHaveBeenCalledOnce();
+  });
+
+  it('normalizes adapter failures without exposing vendor bodies', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-error',
+      submitLead: async () => ({
+        ok: false,
+        category: 'integration',
+        retryable: true,
+        code: 'normalized_failure',
+      }),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result).toMatchObject({
+      ok: false,
+      category: 'integration',
+      formErrorCode: 'normalized_failure',
+      retryable: true,
+    });
+  });
+
+  it('bounds a hung integration with a timeout', async () => {
+    const adapter: LeadDestinationAdapter = {
+      name: 'test-timeout',
+      submitLead: (_lead, context) =>
+        new Promise((_resolve, reject) => {
+          context.signal.addEventListener('abort', () =>
+            reject(new DOMException('Aborted', 'AbortError')),
+          );
+        }),
+    };
+    const result = await submitDemoLead(lead, { environment, adapter });
+    expect(result).toMatchObject({ ok: false, category: 'timeout', retryable: true });
+  });
+});
diff --git a/homepage/tests/setup.ts b/homepage/tests/setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/homepage/tests/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/homepage/tests/types/component-contracts.test-d.tsx b/homepage/tests/types/component-contracts.test-d.tsx
new file mode 100644
index 0000000..5d6fa4a
--- /dev/null
+++ b/homepage/tests/types/component-contracts.test-d.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@/components/actions/Button';
+import type { MetricContent } from '@/components/marketing/Evidence';
+
+void Button;
+
+const approvedMetric: MetricContent = {
+  value: '1',
+  label: 'Fixture',
+  status: 'approved',
+  sourceReference: 'SRC-001',
+};
+void approvedMetric;
+
+// @ts-expect-error icon-only buttons require an accessible label.
+const invalidIconButton = <Button icon="close" />;
+void invalidIconButton;
diff --git a/homepage/tests/unit/components/actions.test.tsx b/homepage/tests/unit/components/actions.test.tsx
new file mode 100644
index 0000000..60f2129
--- /dev/null
+++ b/homepage/tests/unit/components/actions.test.tsx
@@ -0,0 +1,35 @@
+import { Button } from '@/components/actions/Button';
+import { ActionLink } from '@/components/actions/ActionLink';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+describe('action components', () => {
+  it('prevents duplicate interaction while loading and preserves the accessible name', () => {
+    const onClick = vi.fn();
+    render(
+      <Button loading onClick={onClick}>
+        Save reservation
+      </Button>,
+    );
+    const button = screen.getByRole('button', { name: 'Save reservation' });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    fireEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('requires an accessible label for icon-only use through its public contract', () => {
+    render(<Button icon="close" aria-label="Close panel" />);
+    expect(screen.getByRole('button', { name: 'Close panel' })).toBeVisible();
+  });
+
+  it('renders unresolved navigation as a disabled non-link', () => {
+    render(
+      <ActionLink href="/en" disabledReason="Destination pending approval">
+        Book a demo
+      </ActionLink>,
+    );
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByText('Book a demo').closest('[aria-disabled="true"]')).toBeInTheDocument();
+  });
+});
diff --git a/homepage/tests/unit/components/controls.test.tsx b/homepage/tests/unit/components/controls.test.tsx
new file mode 100644
index 0000000..bc9434d
--- /dev/null
+++ b/homepage/tests/unit/components/controls.test.tsx
@@ -0,0 +1,31 @@
+import { Accordion } from '@/components/controls/Accordion';
+import { Tabs } from '@/components/controls/Tabs';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+describe('selection and disclosure controls', () => {
+  it('moves tab focus and selection with arrow keys', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs
+        label="Views"
+        items={[
+          { id: 'one', label: 'One', content: 'Panel one' },
+          { id: 'two', label: 'Two', content: 'Panel two' },
+        ]}
+      />,
+    );
+    const first = screen.getByRole('tab', { name: 'One' });
+    await user.click(first);
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tabpanel', { name: 'Two' })).toHaveTextContent('Panel two');
+  });
+
+  it('uses native disclosure semantics for accordion items', () => {
+    render(<Accordion items={[{ id: 'faq', title: 'Question', content: 'Answer' }]} />);
+    expect(screen.getByText('Question').closest('summary')).toBeInTheDocument();
+    expect(screen.getByText('Answer').closest('details')).not.toHaveAttribute('open');
+  });
+});
diff --git a/homepage/tests/unit/components/evidence.test.tsx b/homepage/tests/unit/components/evidence.test.tsx
new file mode 100644
index 0000000..4b240a9
--- /dev/null
+++ b/homepage/tests/unit/components/evidence.test.tsx
@@ -0,0 +1,39 @@
+import { canRenderProductionEvidence, Metric } from '@/components/marketing/Evidence';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('evidence governance', () => {
+  it('allows only approved evidence in production mode', () => {
+    expect(canRenderProductionEvidence('approved')).toBe(true);
+    expect(canRenderProductionEvidence('pending-review')).toBe(false);
+    expect(canRenderProductionEvidence('research-only')).toBe(false);
+    expect(canRenderProductionEvidence('prohibited')).toBe(false);
+  });
+
+  it('suppresses research-only metrics in production mode', () => {
+    const { container } = render(
+      <Metric
+        production
+        statusLabel="Research only"
+        content={{ value: '24', label: 'Fixture', status: 'research-only' }}
+      />,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders approved evidence with its source reference', () => {
+    render(
+      <Metric
+        production
+        statusLabel="Approved"
+        content={{
+          value: '1',
+          label: 'Approved fixture',
+          status: 'approved',
+          sourceReference: 'SRC-001',
+        }}
+      />,
+    );
+    expect(screen.getByText('SRC-001')).toBeVisible();
+  });
+});
diff --git a/homepage/tests/unit/components/forms.test.tsx b/homepage/tests/unit/components/forms.test.tsx
new file mode 100644
index 0000000..6c17105
--- /dev/null
+++ b/homepage/tests/unit/components/forms.test.tsx
@@ -0,0 +1,41 @@
+import { ErrorSummary } from '@/components/forms/ErrorSummary';
+import { FormField } from '@/components/forms/FormField';
+import { TextInput } from '@/components/forms/TextInput';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('form primitives', () => {
+  it('associates labels, help, required state, and errors', () => {
+    render(
+      <FormField
+        id="work-email"
+        label="Work email"
+        required
+        supportingText="Use work email"
+        error="Enter a valid address"
+      >
+        <TextInput
+          id="work-email"
+          type="email"
+          required
+          invalid
+          describedBy="work-email-help work-email-error"
+        />
+      </FormField>,
+    );
+    const input = screen.getByLabelText(/Work email/);
+    expect(input).toHaveAttribute('required');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('Use work email Enter a valid address');
+  });
+
+  it('links summary errors back to fields', () => {
+    render(
+      <ErrorSummary
+        title="Correct the fields"
+        errors={[{ fieldId: 'work-email', message: 'Enter a valid address' }]}
+      />,
+    );
+    expect(screen.getByRole('alert').querySelector('a')).toHaveAttribute('href', '#work-email');
+  });
+});
diff --git a/homepage/tests/unit/csp.test.ts b/homepage/tests/unit/csp.test.ts
new file mode 100644
index 0000000..c4df084
--- /dev/null
+++ b/homepage/tests/unit/csp.test.ts
@@ -0,0 +1,20 @@
+import { buildContentSecurityPolicy, createNonce } from '@/lib/security/csp';
+import { describe, expect, it } from 'vitest';
+
+describe('CSP foundation', () => {
+  it('generates unpredictable nonce-shaped values', () => {
+    const first = createNonce();
+    const second = createNonce();
+    expect(first).toMatch(/^[a-f0-9]{32}$/);
+    expect(second).not.toBe(first);
+  });
+
+  it('allows development evaluation only in development', () => {
+    expect(buildContentSecurityPolicy('abc', true)).toContain("'unsafe-eval'");
+    expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-eval'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("'nonce-abc'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("style-src 'self' 'nonce-abc'");
+    expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-inline'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain("frame-ancestors 'none'");
+  });
+});
diff --git a/homepage/tests/unit/format.test.ts b/homepage/tests/unit/format.test.ts
new file mode 100644
index 0000000..6f15575
--- /dev/null
+++ b/homepage/tests/unit/format.test.ts
@@ -0,0 +1,40 @@
+import {
+  formatCurrency,
+  formatDate,
+  formatDateRange,
+  formatNumber,
+  formatPercent,
+  formatPhoneNumber,
+  formatRelativeTime,
+  preserveIdentifier,
+} from '@/lib/localization/format';
+import { describe, expect, it } from 'vitest';
+
+const instant = new Date('2026-06-25T12:00:00.000Z');
+
+describe('locale-aware formatting primitives', () => {
+  it('formats Gregorian dates with explicit time zones', () => {
+    expect(formatDate(instant, { locale: 'en', timeZone: 'UTC' })).toContain('2026');
+    expect(formatDate(instant, { locale: 'fr', timeZone: 'UTC' })).toContain('2026');
+    expect(formatDate(instant, { locale: 'ar', timeZone: 'UTC' })).toContain('2026');
+  });
+
+  it('formats ranges, numbers, percentages, and explicit currencies', () => {
+    expect(
+      formatDateRange(instant, new Date('2026-06-27T12:00:00.000Z'), {
+        locale: 'en',
+        timeZone: 'UTC',
+      }),
+    ).toContain('2026');
+    expect(formatNumber(1234.5, 'fr')).toMatch(/1.*234/);
+    expect(formatPercent(0.125, 'en')).toContain('12.5');
+    expect(formatCurrency(125, 'en', 'USD')).toContain('$');
+    expect(() => formatCurrency(125, 'en', 'usd')).toThrow(/ISO 4217/);
+  });
+
+  it('formats relative time and preserves atomic mixed-direction values', () => {
+    expect(formatRelativeTime(-1, 'day', 'en')).toBe('yesterday');
+    expect(formatPhoneNumber('+1 (202) 555-0100')).toBe('+12025550100');
+    expect(preserveIdentifier('RES  2026  0042')).toBe('RES 2026 0042');
+  });
+});
diff --git a/homepage/tests/unit/homepage-content.test.ts b/homepage/tests/unit/homepage-content.test.ts
new file mode 100644
index 0000000..6ba23e5
--- /dev/null
+++ b/homepage/tests/unit/homepage-content.test.ts
@@ -0,0 +1,42 @@
+import arHomepage from '@/content/locales/ar/homepage.json';
+import arShell from '@/content/locales/ar/shell.json';
+import enHomepage from '@/content/locales/en/homepage.json';
+import enShell from '@/content/locales/en/shell.json';
+import frHomepage from '@/content/locales/fr/homepage.json';
+import frShell from '@/content/locales/fr/shell.json';
+import { buildHomepageContent } from '@/content/homepage-model';
+import { describe, expect, it } from 'vitest';
+
+describe('homepage content model', () => {
+  it.each([
+    ['en', enHomepage, enShell],
+    ['fr', frHomepage, frShell],
+    ['ar', arHomepage, arShell],
+  ] as const)('builds complete %s route content', (_locale, homepage, shell) => {
+    const content = buildHomepageContent(homepage, shell);
+
+    expect(content.hero.title).toBeTruthy();
+    expect(content.trust.items).toHaveLength(4);
+    expect(content.workflow.steps).toHaveLength(4);
+    expect(content.modules.items).toHaveLength(6);
+    expect(content.faq.items).toHaveLength(6);
+    expect(content.hero.preview.rows).toHaveLength(2);
+  });
+
+  it('keeps unresolved conversion destinations disabled', () => {
+    const content = buildHomepageContent(enHomepage, enShell);
+
+    expect(content.hero.primary.disabledReason).toBe(enShell.header.demoUnavailable);
+    expect(content.pricing.action.disabledReason).toBe(enShell.states.pendingBody);
+    expect(content.final.secondary.disabledReason).toBe(enShell.states.pendingBody);
+  });
+
+  it('keeps preview identifiers isolated from translated prose', () => {
+    const content = buildHomepageContent(arHomepage, arShell);
+
+    expect(content.hero.preview.rows.map((row) => row.secondary)).toEqual([
+      arHomepage.preview.plate1,
+      arHomepage.preview.plate2,
+    ]);
+  });
+});
diff --git a/homepage/tests/unit/integrations/analytics.test.ts b/homepage/tests/unit/integrations/analytics.test.ts
new file mode 100644
index 0000000..c575084
--- /dev/null
+++ b/homepage/tests/unit/integrations/analytics.test.ts
@@ -0,0 +1,30 @@
+import { analyticsEventRegistry, validateAnalyticsEvent } from '@/lib/analytics/events';
+import { describe, expect, it } from 'vitest';
+
+const context = {
+  routeId: 'home',
+  locale: 'en',
+  direction: 'ltr',
+  resolvedTheme: 'light',
+  source: 'hero',
+} as const;
+
+describe('analytics contract', () => {
+  it('accepts allowlisted non-personal demo events', () => {
+    expect(validateAnalyticsEvent('demo_open', context)).toEqual({ name: 'demo_open', context });
+  });
+
+  it('rejects unknown events and payload properties', () => {
+    expect(validateAnalyticsEvent('lead_created', context)).toBeNull();
+    expect(
+      validateAnalyticsEvent('demo_open', { ...context, email: 'person@example.test' }),
+    ).toBeNull();
+  });
+
+  it('marks every registry entry as non-personal and consent-gated', () => {
+    expect(analyticsEventRegistry.every((event) => !event.personalData)).toBe(true);
+    expect(analyticsEventRegistry.every((event) => event.consentCategory === 'analytics')).toBe(
+      true,
+    );
+  });
+});
diff --git a/homepage/tests/unit/integrations/content-type.test.ts b/homepage/tests/unit/integrations/content-type.test.ts
new file mode 100644
index 0000000..897501a
--- /dev/null
+++ b/homepage/tests/unit/integrations/content-type.test.ts
@@ -0,0 +1,19 @@
+import { isApplicationJson } from '@/lib/security/content-type';
+import { describe, expect, it } from 'vitest';
+
+describe('demo API content type validation', () => {
+  it.each([
+    'application/json',
+    'application/json; charset=utf-8',
+    ' Application/JSON ; charset=UTF-8',
+  ])('accepts %s', (value) => {
+    expect(isApplicationJson(value)).toBe(true);
+  });
+
+  it.each([null, '', 'text/plain', 'application/jsonp', 'application/json-patch+json'])(
+    'rejects %s',
+    (value) => {
+      expect(isApplicationJson(value)).toBe(false);
+    },
+  );
+});
diff --git a/homepage/tests/unit/integrations/demo-schema.test.ts b/homepage/tests/unit/integrations/demo-schema.test.ts
new file mode 100644
index 0000000..9bbd017
--- /dev/null
+++ b/homepage/tests/unit/integrations/demo-schema.test.ts
@@ -0,0 +1,46 @@
+import { demoLeadSchema, demoSubmissionEnvelopeSchema, fleetSizeValues } from '@/lib/demo/schema';
+import { describe, expect, it } from 'vitest';
+
+const validLead = {
+  fullName: '  Ada   Example ',
+  workEmail: ' ADA@EXAMPLE.TEST ',
+  company: ' Rental Test Labs ',
+  fleetSize: '25-49',
+  market: '',
+  preferredLanguage: 'en',
+  message: '  Reservation   workflow ',
+  idempotencyKey: '154249a8-0c3c-4ad8-bda6-91b1ffb361a8',
+  source: 'hero',
+} as const;
+
+describe('demo lead schema', () => {
+  it('normalizes approved fields without adding sales-enrichment data', () => {
+    const result = demoLeadSchema.parse(validLead);
+    expect(result).toEqual({
+      ...validLead,
+      fullName: 'Ada Example',
+      workEmail: 'ada@example.test',
+      company: 'Rental Test Labs',
+      market: undefined,
+      message: 'Reservation workflow',
+    });
+  });
+
+  it('rejects unknown fields and unsupported fleet sizes', () => {
+    expect(() => demoLeadSchema.parse({ ...validLead, phone: '+1 555 0100' })).toThrow();
+    expect(() => demoLeadSchema.parse({ ...validLead, fleetSize: '5000+' })).toThrow();
+  });
+
+  it('keeps the Phase 9 fleet ranges stable', () => {
+    expect(fleetSizeValues).toEqual(['1-9', '10-24', '25-49', '50-99', '100-249', '250+']);
+  });
+
+  it('rejects transport fields outside the approved envelope', () => {
+    expect(() =>
+      demoSubmissionEnvelopeSchema.parse({
+        lead: validLead,
+        guard: { honeypot: '', startedAtMs: 1, fingerprint: 'nope' },
+      }),
+    ).toThrow();
+  });
+});
diff --git a/homepage/tests/unit/integrations/destinations.test.ts b/homepage/tests/unit/integrations/destinations.test.ts
new file mode 100644
index 0000000..6439d1e
--- /dev/null
+++ b/homepage/tests/unit/integrations/destinations.test.ts
@@ -0,0 +1,27 @@
+import { destinationRegistry, resolveDestination } from '@/lib/integrations/destinations';
+import { describe, expect, it } from 'vitest';
+
+describe('destination registry', () => {
+  it('activates only the safe local demo destination', () => {
+    const registry = destinationRegistry({ demoSubmissionEnabled: true, demoMode: 'local' });
+    expect(registry['book-demo'].status).toBe('active');
+    expect(registry['contact-sales'].status).toBe('blocked');
+    expect(registry['sign-in'].status).toBe('active');
+    expect(registry.pricing.status).toBe('placeholder');
+  });
+
+  it('fails the demo destination closed when integration is disabled', () => {
+    const registry = destinationRegistry({ demoSubmissionEnabled: false, demoMode: 'blocked' });
+    expect(registry['book-demo'].status).toBe('blocked');
+  });
+
+  it('resolves approved localized placeholder routes without guessing external URLs', () => {
+    expect(
+      resolveDestination('privacy', 'fr', { demoSubmissionEnabled: false, demoMode: 'blocked' })
+        .href,
+    ).toBe('/fr/confidentialite');
+    expect(
+      resolveDestination('sign-in', 'en', { demoSubmissionEnabled: false, demoMode: 'blocked' }).href,
+    ).toBe('/en/sign-in');
+  });
+});
diff --git a/homepage/tests/unit/integrations/redaction.test.ts b/homepage/tests/unit/integrations/redaction.test.ts
new file mode 100644
index 0000000..543406f
--- /dev/null
+++ b/homepage/tests/unit/integrations/redaction.test.ts
@@ -0,0 +1,21 @@
+import { containsSensitiveKey, redactSensitive } from '@/lib/demo/redaction';
+import { describe, expect, it } from 'vitest';
+
+describe('privacy-safe diagnostics', () => {
+  it('redacts nested personal fields', () => {
+    expect(
+      redactSensitive({
+        category: 'validation',
+        lead: { workEmail: 'person@example.test', company: 'Example Rentals' },
+      }),
+    ).toEqual({
+      category: 'validation',
+      lead: { workEmail: '[REDACTED]', company: '[REDACTED]' },
+    });
+  });
+
+  it('detects sensitive diagnostic structures', () => {
+    expect(containsSensitiveKey({ context: { message: 'private' } })).toBe(true);
+    expect(containsSensitiveKey({ category: 'timeout', correlationId: 'abc' })).toBe(false);
+  });
+});
diff --git a/homepage/tests/unit/localization.test.ts b/homepage/tests/unit/localization.test.ts
new file mode 100644
index 0000000..c5d3b8f
--- /dev/null
+++ b/homepage/tests/unit/localization.test.ts
@@ -0,0 +1,58 @@
+import {
+  getDirection,
+  hreflangMap,
+  isLocale,
+  localeFromAcceptLanguage,
+  localeSwitchUrl,
+  localizedPath,
+  routeById,
+  routeIdFromPathname,
+  routeIdFromSlug,
+} from '@/lib/localization/config';
+import { describe, expect, it } from 'vitest';
+
+describe('localization foundations', () => {
+  it('selects a supported locale by quality', () => {
+    expect(localeFromAcceptLanguage('de-DE;q=0.9, ar;q=0.8, fr;q=0.7')).toBe('ar');
+    expect(localeFromAcceptLanguage('fr-CA, en;q=0.8')).toBe('fr');
+    expect(localeFromAcceptLanguage(null)).toBe('en');
+  });
+
+  it('validates locale direction and route lookup', () => {
+    expect(isLocale('fr')).toBe(true);
+    expect(isLocale('de')).toBe(false);
+    expect(getDirection('ar')).toBe('rtl');
+    expect(routeById('home').id).toBe('home');
+  });
+
+  it('generates and resolves localized stable route paths', () => {
+    expect(localizedPath('home', 'ar')).toBe('/ar');
+    expect(localizedPath('privacy', 'fr')).toBe('/fr/confidentialite');
+    expect(localizedPath('sign-in', 'ar')).toBe('/ar/تسجيل-الدخول');
+    expect(routeIdFromSlug('fr', 'confidentialite')).toBe('privacy');
+    expect(routeIdFromPathname('/ar/%D8%A7%D9%84%D8%AE%D8%B5%D9%88%D8%B5%D9%8A%D8%A9')).toBe(
+      'privacy',
+    );
+    expect(routeIdFromPathname('/de')).toBeNull();
+  });
+
+  it('generates reciprocal hreflang values', () => {
+    const links = hreflangMap(new URL('https://approved.test'), 'home');
+    expect(links.en).toBe('https://approved.test/en');
+    expect(links.ar).toBe('https://approved.test/ar');
+    expect(links['x-default']).toBe('https://approved.test/en');
+  });
+
+  it('preserves only approved campaign query values and valid hashes', () => {
+    const current = new URL(
+      'https://approved.test/en?utm_source=campaign&email=private%40approved.test#gibberish',
+    );
+    const switched = localeSwitchUrl(current, 'fr', 'home');
+    expect(switched.pathname).toBe('/fr');
+    expect(switched.search).toBe('?utm_source=campaign');
+    expect(switched.hash).toBe('');
+
+    current.hash = '#workflow';
+    expect(localeSwitchUrl(current, 'ar', 'home').hash).toBe('#workflow');
+  });
+});
diff --git a/homepage/tests/unit/theme.test.ts b/homepage/tests/unit/theme.test.ts
new file mode 100644
index 0000000..c4f374f
--- /dev/null
+++ b/homepage/tests/unit/theme.test.ts
@@ -0,0 +1,18 @@
+import { isThemePreference, resolveTheme, serverResolvedTheme } from '@/lib/theme/config';
+import { describe, expect, it } from 'vitest';
+
+describe('theme foundations', () => {
+  it('accepts only approved preferences', () => {
+    expect(isThemePreference('light')).toBe(true);
+    expect(isThemePreference('dark')).toBe(true);
+    expect(isThemePreference('system')).toBe(true);
+    expect(isThemePreference('sepia')).toBe(false);
+  });
+
+  it('keeps preference and resolved theme separate', () => {
+    expect(resolveTheme('system', true)).toBe('dark');
+    expect(resolveTheme('system', false)).toBe('light');
+    expect(resolveTheme('light', true)).toBe('light');
+    expect(serverResolvedTheme('system')).toBe('light');
+  });
+});
diff --git a/homepage/tests/visual/README.md b/homepage/tests/visual/README.md
new file mode 100644
index 0000000..f49a8c0
--- /dev/null
+++ b/homepage/tests/visual/README.md
@@ -0,0 +1,10 @@
+# Visual baselines
+
+The Playwright scenarios define the Phase 11 locale, theme, viewport, drawer, and focus-state matrix.
+Canonical PNG snapshots must be generated with the pinned Chromium build in an unblocked environment:
+
+```bash
+pnpm test:visual:update --project=chromium
+```
+
+No fabricated or manually composed screenshots are stored here. The local execution environment blocked browser installation and loopback browser navigation, so baseline approval remains an explicit release gate in the Phase 11 issue register.
diff --git a/homepage/tests/visual/component-system.visual.spec.ts b/homepage/tests/visual/component-system.visual.spec.ts
new file mode 100644
index 0000000..cff4953
--- /dev/null
+++ b/homepage/tests/visual/component-system.visual.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', theme: 'light', width: 1440, height: 1200 },
+  { locale: 'fr', theme: 'dark', width: 1024, height: 1200 },
+  { locale: 'ar', theme: 'dark', width: 390, height: 1200 },
+] as const) {
+  test(`${scenario.locale}-${scenario.theme} component matrix`, async ({ page }) => {
+    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
+    await page.addInitScript(
+      (theme) => localStorage.setItem('hpc.theme.preference', theme),
+      scenario.theme,
+    );
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await page.goto(`/${scenario.locale}/component-lab`);
+    await expect(page).toHaveScreenshot(
+      `component-system-${scenario.locale}-${scenario.theme}-${scenario.width}.png`,
+      { fullPage: true },
+    );
+  });
+}
diff --git a/homepage/tests/visual/homepage.visual.spec.ts b/homepage/tests/visual/homepage.visual.spec.ts
new file mode 100644
index 0000000..ac7a0b9
--- /dev/null
+++ b/homepage/tests/visual/homepage.visual.spec.ts
@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  { name: 'homepage-en-light-desktop', locale: 'en', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-en-dark-mobile', locale: 'en', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-fr-light-tablet', locale: 'fr', theme: 'light', width: 1024, height: 900 },
+  { name: 'homepage-fr-dark-mobile', locale: 'fr', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-ar-light-desktop', locale: 'ar', theme: 'light', width: 1440, height: 1000 },
+  { name: 'homepage-ar-dark-mobile', locale: 'ar', theme: 'dark', width: 390, height: 844 },
+  { name: 'homepage-en-light-320', locale: 'en', theme: 'light', width: 320, height: 800 },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} baseline`, async ({ page, context }) => {
+    test.skip(test.info().project.name !== 'chromium');
+    await page.setViewportSize({ width: scenario.width, height: scenario.height });
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
diff --git a/homepage/tests/visual/integrations.visual.spec.ts b/homepage/tests/visual/integrations.visual.spec.ts
new file mode 100644
index 0000000..6f2f39a
--- /dev/null
+++ b/homepage/tests/visual/integrations.visual.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of [
+  { locale: 'en', theme: 'light' },
+  { locale: 'en', theme: 'dark' },
+  { locale: 'fr', theme: 'light' },
+  { locale: 'ar', theme: 'light' },
+  { locale: 'ar', theme: 'dark' },
+] as const) {
+  test(`${scenario.locale} ${scenario.theme} demo initial and validation states`, async ({
+    page,
+  }) => {
+    test.skip(test.info().project.name !== 'chromium', 'Canonical visual baselines use Chromium.');
+    await page.emulateMedia({ colorScheme: scenario.theme });
+    await page.goto(`/${scenario.locale}`);
+    await page.locator('main button[data-demo-source="hero"]').click();
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toHaveScreenshot(`demo-${scenario.locale}-${scenario.theme}-initial.png`);
+    await dialog.locator('button[type="submit"]').click();
+    await expect(dialog).toHaveScreenshot(
+      `demo-${scenario.locale}-${scenario.theme}-validation.png`,
+    );
+  });
+}
diff --git a/homepage/tests/visual/shell.visual.spec.ts b/homepage/tests/visual/shell.visual.spec.ts
new file mode 100644
index 0000000..c01e530
--- /dev/null
+++ b/homepage/tests/visual/shell.visual.spec.ts
@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+
+const scenarios = [
+  {
+    name: 'desktop-en-light',
+    locale: 'en',
+    theme: 'light',
+    viewport: { width: 1440, height: 1000 },
+  },
+  { name: 'desktop-en-dark', locale: 'en', theme: 'dark', viewport: { width: 1440, height: 1000 } },
+  { name: 'tablet-fr-light', locale: 'fr', theme: 'light', viewport: { width: 1024, height: 900 } },
+  { name: 'tablet-fr-dark', locale: 'fr', theme: 'dark', viewport: { width: 1024, height: 900 } },
+  { name: 'mobile-ar-light', locale: 'ar', theme: 'light', viewport: { width: 390, height: 844 } },
+  { name: 'mobile-ar-dark', locale: 'ar', theme: 'dark', viewport: { width: 390, height: 844 } },
+] as const;
+
+for (const scenario of scenarios) {
+  test(`${scenario.name} visual baseline`, async ({ page, context }) => {
+    test.skip(
+      test.info().project.name !== 'chromium',
+      'Canonical visual baselines use Chromium; other projects run functional coverage.',
+    );
+    await page.setViewportSize(scenario.viewport);
+    await context.addCookies([
+      {
+        name: 'hpc-theme',
+        value: scenario.theme,
+        domain: '127.0.0.1',
+        path: '/',
+        secure: false,
+        sameSite: 'Lax',
+      },
+    ]);
+    await page.goto(`/${scenario.locale}`);
+    await expect(page).toHaveScreenshot(`${scenario.name}.png`, { fullPage: true });
+  });
+}
+
+test('mobile navigation open baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.context().addCookies([
+    {
+      name: 'hpc-theme',
+      value: 'dark',
+      domain: '127.0.0.1',
+      path: '/',
+      secure: false,
+      sameSite: 'Lax',
+    },
+  ]);
+  await page.goto('/ar');
+  await page.getByRole('button', { name: 'فتح قائمة التنقل' }).click();
+  await expect(page).toHaveScreenshot('mobile-ar-dark-navigation-open.png', { fullPage: true });
+});
+
+test('keyboard focus baseline', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium');
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/en');
+  await page.keyboard.press('Tab');
+  await expect(page).toHaveScreenshot('desktop-en-light-focus.png', { fullPage: true });
+});
diff --git a/homepage/tsconfig.json b/homepage/tsconfig.json
new file mode 100644
index 0000000..7fb8402
--- /dev/null
+++ b/homepage/tsconfig.json
@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "lib": ["dom", "dom.iterable", "es2024"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "vitest.config.ts",
+    "playwright.config.ts",
+    "next.config.ts",
+    "vitest.integration.config.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules", "contracts"]
+}
diff --git a/homepage/vitest.config.ts b/homepage/vitest.config.ts
new file mode 100644
index 0000000..a947d44
--- /dev/null
+++ b/homepage/vitest.config.ts
@@ -0,0 +1,29 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/unit/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json-summary'],
+      thresholds: {
+        lines: 85,
+        functions: 85,
+        branches: 80,
+        statements: 85,
+      },
+      include: [
+        'src/lib/localization/config.ts',
+        'src/lib/security/csp.ts',
+        'src/lib/theme/config.ts',
+      ],
+    },
+  },
+});
diff --git a/homepage/vitest.integration.config.ts b/homepage/vitest.integration.config.ts
new file mode 100644
index 0000000..777c9eb
--- /dev/null
+++ b/homepage/vitest.integration.config.ts
@@ -0,0 +1,13 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['tests/integration/**/*.test.ts'],
+  },
+});
diff --git a/package-lock.json b/package-lock.json
index 69b5174..102be32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -103,6 +103,8 @@
       "name": "@rentaldrivego/dashboard",
       "version": "1.0.0",
       "dependencies": {
+        "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/noto-sans-arabic": "^5.2.10",
         "@rentaldrivego/types": "*",
         "autoprefixer": "^10.4.19",
         "dayjs": "^1.11.11",
@@ -127,23 +129,700 @@
     },
     "apps/homepage": {
       "name": "@rentaldrivego/homepage",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "dependencies": {
-        "@rentaldrivego/types": "*",
-        "autoprefixer": "^10.4.19",
-        "lucide-react": "^0.376.0",
+        "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/noto-sans-arabic": "^5.2.10",
         "next": "^16.2.7",
-        "postcss": "^8.4.38",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "tailwindcss": "^3.4.3"
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "zod": "^4.4.0"
       },
       "devDependencies": {
+        "@axe-core/playwright": "^4.12.1",
+        "@eslint/js": "^9.0.0",
+        "@playwright/test": "^1.61.0",
+        "@testing-library/jest-dom": "^6.9.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.0",
         "@types/node": "^20.12.0",
-        "@types/react": "^18.3.1",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^19.2.0",
+        "@types/react-dom": "^19.2.0",
+        "@vitest/coverage-v8": "^4.1.0",
+        "eslint": "^9.0.0",
+        "eslint-config-next": "^16.2.0",
+        "eslint-config-prettier": "^10.1.0",
+        "globals": "^17.0.0",
+        "jsdom": "^29.0.0",
+        "prettier": "^3.8.0",
         "typescript": "^5.4.0",
-        "vitest": "^1.6.0"
+        "typescript-eslint": "^8.0.0",
+        "vitest": "^4.1.0"
+      }
+    },
+    "apps/homepage/node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "apps/homepage/node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/homepage/node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "apps/homepage/node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "apps/homepage/node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "apps/homepage/node_modules/@vitest/coverage-v8": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.9.tgz",
+      "integrity": "sha512-G9/lgqibheLVBDRuya45EbsEXTYcWoSG+TLg7i2axuzx0Eq62eXn+aWXyaVdV5vKvFSWd6ywcX8hA7la9Pvu8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.9",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.1.9",
+        "vitest": "4.1.9"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "apps/homepage/node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "apps/homepage/node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "apps/homepage/node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "apps/homepage/node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "apps/homepage/node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "apps/homepage/node_modules/eslint": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/eslint-config-next": {
+      "version": "16.2.9",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.2.9.tgz",
+      "integrity": "sha512-olGtBrs07bQchpaJWeqbk9GaMoU0oGmN/pYNEBXSbfgKngb5uHnPe37X6tVeh6DJfaWFQildvinGEOrolo5fmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "16.2.9",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "globals": "16.4.0",
+        "typescript-eslint": "^8.46.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/eslint-config-next/node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/homepage/node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "apps/homepage/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "apps/homepage/node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "apps/homepage/node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "apps/homepage/node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "apps/homepage/node_modules/globals": {
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz",
+      "integrity": "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/homepage/node_modules/pathe": {
+      "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"
+    },
+    "apps/homepage/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "apps/homepage/node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "apps/homepage/node_modules/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.7"
+      }
+    },
+    "apps/homepage/node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "apps/homepage/node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "apps/homepage/node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "apps/homepage/node_modules/vitest/node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/vitest/node_modules/vite": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
+      "integrity": "sha512-BuJcQK/56NQTWDGn4ABea3q4SSBdNPWwNZKTkkUpcMPnLoquSYH8llRtSUIgoL1KSCpHt5eghLShn50mH36y7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.15",
+        "rolldown": "~1.1.2",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.3.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "apps/homepage/node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
       }
     },
     "apps/marketplace": {
@@ -214,6 +893,13 @@
         "vitest": "^1.6.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -226,6 +912,299 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.12.1.tgz",
+      "integrity": "sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.12.1"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.29.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
@@ -235,6 +1214,77 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -259,6 +1309,158 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.9.tgz",
+      "integrity": "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.5.tgz",
+      "integrity": "sha512-oNjBvzLq2GPZtJphCjLqXow/cHySHSgtxvKZb7OqSZ/xHgw6NWNhfad+6AB9cLeVm6eA9d/qMll3JdEHjy6M+A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
@@ -269,6 +1471,17 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -689,6 +1902,47 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
@@ -723,6 +1977,48 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@fastify/busboy": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.2.0.tgz",
@@ -814,6 +2110,24 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/noto-sans-arabic": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-arabic/-/noto-sans-arabic-5.2.10.tgz",
+      "integrity": "sha512-6vP9gU5yQQE/4ClrVoS92rjwc3qUnSkoxaw/Hkrha1Nqn9UEwuh3WVxT2+DMlMdV49uxvxUKVauSd2nwLu/WBA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@google-cloud/firestore": {
       "version": "7.11.6",
       "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-7.11.6.tgz",
@@ -942,6 +2256,44 @@
         "node": ">=6"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -980,6 +2332,20 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -1570,6 +2936,17 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1606,6 +2983,65 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "16.2.9",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.9.tgz",
+      "integrity": "sha512-UZi8+YT/MLgTC9nrrn2Xd4lBYv1B7lVmtWHfPcthAI5Tt/C1LuDe6DfmtCtJ+WQod3ksY4VrKSvk3oMVAnL7qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/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==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@next/swc-linux-arm64-musl": {
       "version": "16.2.8",
       "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.8.tgz",
@@ -1693,6 +3129,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
     "node_modules/@one-ini/wasm": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
@@ -1759,6 +3205,16 @@
         "@otplib/plugin-thirty-two": "^12.0.1"
       }
     },
+    "node_modules/@oxc-project/types": {
+      "version": "0.137.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.137.0.tgz",
+      "integrity": "sha512-WT+Gb24i8hmvo85AIv2oEYouEXkRlKAlT9WaCa3TfLgNCN+GhrJOGZuIlMouAh38Qe4QOx26eUOVsq70qXrywA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
     "node_modules/@paralleldrive/cuid2": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.3.1.tgz",
@@ -1779,6 +3235,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@prisma/client": {
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
@@ -2207,6 +3679,304 @@
       "resolved": "packages/types",
       "link": true
     },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.3.tgz",
+      "integrity": "sha512-DT6Z3PhvioeHMvxo+xHc3KtqggrI7CCTXCmC2h/5zUlp5jVitv7XEy+9q5/7v8IolhlioawpMo8Kg0EEBy7J0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.3.tgz",
+      "integrity": "sha512-0NwgwsjM7LrsuVnXMK3koTpagBNOhloc/BNjKqZjv4V5zI5r13qx69uVhRx+o5Z0yy4Hzq+lpy7TAgUG/ocvrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.3.tgz",
+      "integrity": "sha512-YtiBp4disu6V560loT6PjMdiRaWmVvDNrUunAalbiFx2ggeJwxdAsgZMcoGP17uyAsTwAj5V1niksxlHnVQ1Sw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.3.tgz",
+      "integrity": "sha512-yD3EkEdXk2LypPxnf/kSZHirarsI8gcPzc62SukhR9VJTyvV+F9Q/GxWNuCojc7sXyuVC4DxRGhdDK4X8VSsbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.3.tgz",
+      "integrity": "sha512-c+8vieQbsD7HNAHKIA34w0GJ9FedFFuJGD+7E6vz7Q3uqAIugL5p45fhlsj4UaAsHpcmlqugBWMhA0/j7o0sIg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.3.tgz",
+      "integrity": "sha512-50jD0uUwLvur7Zz9LHz17kaAdTPjn5wN93hEgjvmYFRZwiR7ZJYovTd5ipyWJDAnXKvZ+wgc+/Ika6dwSF5OcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.3.tgz",
+      "integrity": "sha512-BO9+oPL8K9poZJBfYPsXNtYjPE5uM3qeehT3aFcW4LITOl+iSqhp0abzjR2nWBUNjIZeKXjAEWBZ64WjNoHd6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.3.tgz",
+      "integrity": "sha512-f3VpLB1vQ0Eo6ecr/6cekLnvYMFF4YBFoVGkfkvPLq1bAkbAwHYQPZKoAmG6OJyTcxxoC+AvezGx/S1obNC0Mw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.3.tgz",
+      "integrity": "sha512-AmurZ26Pqx/RI9N1gzEOCklkKXl927yjfXWUUS0O7Puh8ARM/Ob8qfrD3qnWksScdw6cSrW5PSHE9DyLu7+PtA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.3.tgz",
+      "integrity": "sha512-JJpqs8bRGITDOdbkNKnlojzBabbOHrqjSvDr0IVsZObE1lBcPjxItUEY9eWIDbxaJ3cGrXPWGfGkIxFijg/URg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.3.tgz",
+      "integrity": "sha512-rSJcdjPxzA/by/6/rYs+v+bXU7UjvnbUWz8MJb6kh6+knqB1dCrtHg0uu7C/4haqJvqdkYHQ5IGn+tCH9GLW/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.3.tgz",
+      "integrity": "sha512-hQ3/PYkDJICgevvyNcVrihVeqq7k1Pp3VZ9lY+dauAYUJKO+auqApvANhvR1An9BhmqYKvW2Mu1F9u4DXSMLxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.3.tgz",
+      "integrity": "sha512-Elcv/BtML9lXrV6JuKITc/grN2kYV9gjsQpW8Jfw4ioK0TOkjBjye0nnyqQNy9STNaI20lXNaQBRrD5gSgR0Yg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.3.tgz",
+      "integrity": "sha512-2DrEfhluH9yhiaFApmsjsjwrSYbNcY1oFTzYSP1a535jDbV98zCFanA/96TBUd0iDFcxGmw9QRExwGCXz3U+/g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.3.tgz",
+      "integrity": "sha512-OL4OMk7UPXOeVGGd3qo5zJyPIljf4AFgk5QAkPPS+OoLuOOozhuaQGC18MxVTnw/06q93gShAJzlwnSCY9YtqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.60.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.4.tgz",
@@ -2557,6 +4327,13 @@
         "win32"
       ]
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@scarf/scarf": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
@@ -2590,6 +4367,13 @@
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
@@ -2599,6 +4383,134 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.1.tgz",
@@ -2637,6 +4549,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/bcryptjs": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
@@ -2662,6 +4593,27 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/chai/node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -2751,6 +4703,13 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -2791,6 +4750,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/jsonwebtoken": {
       "version": "9.0.10",
       "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
@@ -3054,6 +5027,288 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.62.0.tgz",
+      "integrity": "sha512-o+mpz7EYiMzXoySXiKmzlabIvTVqUuK5yLrAedRPRDA0IpPFMUV1IXt6OqljIxX/kumN6EjUYp41Hqelh6p/Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/type-utils": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.62.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.62.0.tgz",
+      "integrity": "sha512-dzHeT2gySzZtLDsuqxU9AkYgIsQoHAHtRBpOqM+Ofzx1Bwrd2RcCjQJ+6iQbsHOIR6NS33bF2W1k3blN1zLDrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.62.0.tgz",
+      "integrity": "sha512-wexnCqiTg7BOGtbLDftYpRWlmLq4xfoMd7BKFR6Y75sZS3QmRKLdN3yWLhmIYgqMmP/OXWpj3H8odkb5nGURCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.62.0",
+        "@typescript-eslint/types": "^8.62.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.62.0.tgz",
+      "integrity": "sha512-1lX38kNxXIRb8mEc3lbq5mdHq1Pf2+U0nFU65KfT18mtPxxl0fvjuEE92mHuXPuCtElJhOrddOpyMlM3Z0umEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.62.0.tgz",
+      "integrity": "sha512-y2GAdB6ykaXUvuspbYnizQc4oDDz0Tz/Yc7iWrXf9mx8vm/L/0vLHCe0tS2boG96Zy+DivnVDQ9ZUEWoHqqx1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.62.0.tgz",
+      "integrity": "sha512-+g5O3j0w2ldzC86Pv6fvbO/xhAonbJFIdf/MKQ1d30gndlsVzUOE83ldfSE15Qrl9fhFjK6AovHs5Wpp6vx86w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.62.0.tgz",
+      "integrity": "sha512-KvAclkktORPvM54TgLgA4z9HIV1M8zOgw9ZVNXl9f/8dLYfXYX1wkMXP7qmabpijQRV5bHJLOmoyGQbLMaUYeg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.62.0.tgz",
+      "integrity": "sha512-+hVbNxtW64pIcZWDPGbyaKF7vp2IBTVY5ma1blwwksrjdsbdqqEKvJWMGbBofei4F6Dovx1M0RJgoFeNu2279A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.62.0",
+        "@typescript-eslint/tsconfig-utils": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/visitor-keys": "8.62.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.62.0.tgz",
+      "integrity": "sha512-82r66fi9zYwZ+mTq3vKgwjbZ1PVk/DJzrXFLpG6RnBbdvH8TEGVHIs9H4d2drhkOzf0syZuD/OZvvlu6GDbP4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.62.0",
+        "@typescript-eslint/types": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.62.0.tgz",
+      "integrity": "sha512-CY3uyFSRbcQv3nnSv8S0+lDftMVz6P963PoRlxrV7ew/Md564g9ut60PYzdLM5qW4jFn93GBF+Soi90ISAN+GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -3061,6 +5316,319 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
+      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
+      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz",
+      "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
+      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
+      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
+      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
+      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
+      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
+      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
+      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
+      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
+      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
+      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
+      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
+      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
+      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
+      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-openharmony-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
+      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
+      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
+      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
+      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
+      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@vitest/expect": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.1.tgz",
@@ -3076,6 +5644,19 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@vitest/runner": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.1.tgz",
@@ -3330,12 +5911,182 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/arrify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
@@ -3363,6 +6114,42 @@
         "node": "*"
       }
     },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.4.tgz",
+      "integrity": "sha512-0bC0/4bTSrnwdhU3IsZDwEdojvuPrSg59OYZfKsLRtJZ0u8VBx9DebfqqG8bRdCC0I7vjgxmPi41P0lpkhJHtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/async-retry": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
@@ -3415,6 +6202,32 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/axios": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.17.0.tgz",
@@ -3468,6 +6281,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3725,6 +6548,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -4054,6 +6896,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cookie-signature": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
@@ -4120,6 +6969,27 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
       "license": "MIT"
     },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4259,6 +7129,119 @@
         "node": ">=12"
       }
     },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.20",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
@@ -4291,6 +7274,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -4326,6 +7316,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -4353,6 +7379,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -4440,6 +7476,14 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -4699,6 +7743,94 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+      "integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract-get": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-abstract-get/-/es-abstract-get-1.0.0.tgz",
+      "integrity": "sha512-6PMWXpdhshVvFp+FoWYs1EvG1Nj0tvk0dZM+XcK0xMEM1czRVcP6ohqPWHy6qPagSpC8j4+p89WXlT+xXJs/fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.2",
+        "is-callable": "^1.2.7",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -4717,10 +7849,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.3.tgz",
+      "integrity": "sha512-0PuBxFi+4uPanB97iDxCLWuHeYud2FALrw5HFZGtAF38UpJDbDC8frwp2cnDyae692CQ0dou60UwWfhgsa4U/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+      "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -4744,6 +7911,39 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.3.tgz",
+      "integrity": "sha512-3OJmZ3m4VNhTWEfn/bPv7yoSd/7Kx0MYdm27o7SqgS45l03O4purW3zO4B/4JroAWHluvmQaXqrPXFtT4IKYEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-abstract-get": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.1.0",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4868,6 +8068,310 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.10.tgz",
+      "integrity": "sha512-tRrKqFyCaKict5hOd244sL6EQFNycnMQnBe+j8uqGNXYzsImGbGUU4ibtoaBmv5FLwJwcFJNeg1GeVjQfbMrDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.16.1",
+        "resolve": "^2.0.0-next.6"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/resolve": {
+      "version": "2.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
+      "integrity": "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.13.0.tgz",
+      "integrity": "sha512-bLohSkT6469rRs8czj0tLTD8vaeIS/whvPRJVjDr7IuoTT1k5DYDERlNycjDj/HkOlvQdYurmfZ/g3fG5bgeLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
+      "integrity": "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -5043,6 +8547,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/express": {
       "version": "4.22.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz",
@@ -5443,6 +8957,22 @@
         "unicode-trie": "^2.0.0"
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -5556,6 +9086,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.2.0.tgz",
+      "integrity": "sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2",
+        "hasown": "^2.0.4",
+        "is-callable": "^1.2.7",
+        "is-document.all": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -5563,6 +9117,16 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gaxios": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.7.1.tgz",
@@ -5610,6 +9174,26 @@
         "node": ">=14"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -5679,6 +9263,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.14.0.tgz",
+      "integrity": "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -5729,6 +9344,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/google-auth-library": {
       "version": "9.15.1",
       "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.15.1.tgz",
@@ -5829,6 +9461,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5839,6 +9484,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -5867,9 +9541,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
-      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -5887,6 +9561,23 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/hsl-to-hex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
@@ -5902,6 +9593,19 @@
       "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
       "license": "ISC"
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/html-entities": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
@@ -5919,6 +9623,13 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/html-to-text": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
@@ -6087,6 +9798,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6111,6 +9832,21 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -6162,12 +9898,66 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
       "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
       "license": "MIT"
     },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "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",
@@ -6180,13 +9970,104 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.2"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-document.all": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-document.all/-/is-document.all-1.0.0.tgz",
+      "integrity": "sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6204,6 +10085,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -6213,6 +10110,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -6225,6 +10142,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -6234,6 +10177,23 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
@@ -6244,6 +10204,61 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -6257,18 +10272,179 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-url": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
       "license": "MIT"
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -6408,6 +10584,108 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-bigint": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
@@ -6439,6 +10717,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
@@ -6461,6 +10752,22 @@
         "npm": ">=6"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/jwa": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
@@ -6508,6 +10815,26 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/leac": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
@@ -6531,6 +10858,267 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -6746,6 +11334,17 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -6756,6 +11355,34 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magicast": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz",
+      "integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.3",
+        "@babel/types": "^7.29.0",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -6772,6 +11399,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/media-engine": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
@@ -6881,6 +11515,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -7013,9 +11657,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
       "funding": [
         {
           "type": "github",
@@ -7030,6 +11674,22 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7296,6 +11956,35 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/node-exports-info": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.2.tgz",
+      "integrity": "sha512-kXs9Go0cah0qHVV2v389IXQLdLCeE1xfFtjOAF+iobu0OIoG1pje8At2vMHyaPMiPMnG/LWP50twML21eMcAag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -7432,6 +12121,120 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -7508,6 +12311,24 @@
         "@otplib/preset-v11": "^12.0.1"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -7580,6 +12401,32 @@
       "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/parseley": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
@@ -7761,6 +12608,52 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/png-js": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/png-js/-/png-js-2.0.0.tgz",
@@ -7778,10 +12671,20 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.5.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
-      "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -7798,7 +12701,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -8463,6 +13366,20 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/redis-errors": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
@@ -8484,6 +13401,50 @@
         "node": ">=4"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8551,6 +13512,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "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"
+      }
+    },
     "node_modules/restructure": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
@@ -8609,6 +13580,40 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rolldown": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz",
+      "integrity": "sha512-1F1eEtUBtFvcGm1HQ9TiUIUHPQG7mSAODrhIzjxoUEFuo8OcbrGLiVLkevNgj84TE4lnHvnumwFjhJO5Eu135g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.137.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.1.3",
+        "@rolldown/binding-darwin-arm64": "1.1.3",
+        "@rolldown/binding-darwin-x64": "1.1.3",
+        "@rolldown/binding-freebsd-x64": "1.1.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.3",
+        "@rolldown/binding-linux-arm64-musl": "1.1.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.3",
+        "@rolldown/binding-linux-x64-gnu": "1.1.3",
+        "@rolldown/binding-linux-x64-musl": "1.1.3",
+        "@rolldown/binding-openharmony-arm64": "1.1.3",
+        "@rolldown/binding-wasm32-wasi": "1.1.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.3",
+        "@rolldown/binding-win32-x64-msvc": "1.1.3"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.60.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz",
@@ -8684,6 +13689,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
+      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -8704,12 +13729,60 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz",
@@ -8823,6 +13896,55 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -9079,6 +14201,13 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -9108,6 +14237,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/stream-events": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
@@ -9183,6 +14326,120 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.11.tgz",
+      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.10.tgz",
+      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -9231,6 +14488,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -9446,6 +14716,13 @@
         "express": ">=4.0.0 || >=5.0.0-beta"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
@@ -9597,10 +14874,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
-      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -9652,6 +14939,16 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tinyspy": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
@@ -9662,6 +14959,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.4.tgz",
+      "integrity": "sha512-kFXFK7O4WPextIUAOk8qtnw9dxR9UIXP9CjuH1cTBVBZMDeQcUPgr/IazGiw1B0Yiw5L75gHLWeW4iD793r90g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.4"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.4.tgz",
+      "integrity": "sha512-vwVLJVvvpslm7vqAH7+XNj/neA/Ynq7DT2EEcMuwc5YzN5XaMyRAqxwU+uX3azZ1FQtB2gvrvnLnAEkvYlVdfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -9683,6 +15000,19 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -9699,6 +15029,19 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -9831,6 +15174,32 @@
         "strip-json-comments": "^2.0.0"
       }
     },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
     "node_modules/tsconfig/node_modules/strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -10041,6 +15410,84 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.8.tgz",
+      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -10061,6 +15508,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.62.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.62.0.tgz",
+      "integrity": "sha512-8QxXi+ZACKX0kaqO4gY8kn0RSD9gFfaHDWwjqtEN48aWCBkX4MJaufWN+c3BzlrXLOxfywDL8CaoqUwcRq4j4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.62.0",
+        "@typescript-eslint/parser": "8.62.0",
+        "@typescript-eslint/typescript-estree": "8.62.0",
+        "@typescript-eslint/utils": "8.62.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
@@ -10068,6 +15539,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -10109,6 +15609,44 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/unrs-resolver": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
+      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -10379,6 +15917,19 @@
         }
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -10408,6 +15959,16 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -10433,12 +15994,101 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
       "license": "ISC"
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.22.tgz",
+      "integrity": "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -10529,6 +16179,16 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/xml-naming": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/xml-naming/-/xml-naming-0.1.0.tgz",
@@ -10554,6 +16214,13 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/xmlhttprequest-ssl": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
@@ -10664,6 +16331,19 @@
         "zod": "^3.25.28 || ^4"
       }
     },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "packages/database": {
       "name": "@rentaldrivego/database",
       "version": "1.0.0",
diff --git a/packages/types/src/marketplace-homepage.ts b/packages/types/src/marketplace-homepage.ts
index e7744c9..6658f92 100644
--- a/packages/types/src/marketplace-homepage.ts
+++ b/packages/types/src/marketplace-homepage.ts
@@ -97,7 +97,7 @@ export const defaultMarketplaceHomepageSections: MarketplaceHomepageSectionType[
 export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
   en: {
     sections: defaultMarketplaceHomepageSections,
-    heroKicker: 'FleetOS',
+    heroKicker: 'RentalDriveGo',
     heroTitle: 'The operating system for modern fleet management.',
     heroBody:
       'Run your entire rental operation from one platform — inventory, bookings, payments, and customer experience, all under your own brand.',
@@ -106,7 +106,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     surfaceLabel: 'Unified dashboard',
     surfaceTitle: 'One platform. Every operation.',
     surfaceBody:
-      'Fleet operators need power, renters need simplicity. FleetOS delivers both without compromise — no templates, no generic workflows.',
+      'Fleet operators need power, renters need simplicity. RentalDriveGo delivers both without compromise — no templates, no generic workflows.',
     liveLabel: 'Live platform',
     trustedFleets: 'Real-time fleet control',
     brandedFlows: 'White-label booking engine',
@@ -118,7 +118,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     renterKicker: 'Customer experience',
     renterTitle: 'Give renters a fast, transparent booking journey that ends on your branded checkout.',
     renterBody:
-      'FleetOS powers discovery and conversion — not a walled garden. Browse here, book there, and pay directly to the fleet owner.',
+      'RentalDriveGo powers discovery and conversion — not a walled garden. Browse here, book there, and pay directly to the fleet owner.',
     pillars: [
       ['Unified command', 'Vehicle inventory, dynamic pricing, and promotional offers flow from one admin hub into marketplace discovery and your own branded storefront.'],
       ['Smart discovery', 'Location-aware search, reputation scoring, and AI-curated listings help renters find the right vehicle in seconds.'],
@@ -129,7 +129,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       ['02', 'White-label booking experience'],
       ['03', 'Direct-to-owner payments'],
     ].map(([value, label]) => ({ value: value!, label: label! })),
-    featureLabel: 'What FleetOS covers',
+    featureLabel: 'What RentalDriveGo covers',
     features: [
       'Fleet inventory with multi-photo uploads and condition tracking',
       'Dynamic pricing engine with seasonal and promotional rules',
@@ -155,11 +155,11 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
         description: 'Customers discover your fleet, book through your branded site, and payments land directly in your account.',
       },
     ],
-    stepsTitle: 'How fleets launch on FleetOS',
+    stepsTitle: 'How fleets launch on RentalDriveGo',
     steps: [
       ['1', 'Create your fleet workspace', 'Choose a plan, start your 90-day trial, and verify your operator account.'],
       ['2', 'Publish vehicles and offers', 'Upload vehicle data once and control exactly what appears on every channel.'],
-      ['3', 'Accept bookings on your terms', 'Customers discover your fleet on FleetOS, then complete the booking on your own branded checkout.'],
+      ['3', 'Accept bookings on your terms', 'Customers discover your fleet on RentalDriveGo, then complete the booking on your own branded checkout.'],
     ].map(([step, title, body]) => ({ step: step!, title: title!, body: body! })),
     stepLabel: 'Step',
     testimonialsKicker: 'CUSTOMER STORIES',
@@ -167,7 +167,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     testimonials: [
       {
         quote:
-          'FleetOS transformed how we manage our 200+ vehicle fleet. The unified dashboard cut our admin time by half and our bookings doubled in three months.',
+          'RentalDriveGo transformed how we manage our 200+ vehicle fleet. The unified dashboard cut our admin time by half and our bookings doubled in three months.',
         author: 'Sarah Johnson',
         role: 'Fleet Director',
         company: 'Premium Auto Rentals',
@@ -181,7 +181,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       },
       {
         quote:
-          'We evaluated six platforms before FleetOS. The multi-tenant architecture and direct payment model made it the obvious choice for our growing operation.',
+          'We evaluated six platforms before RentalDriveGo. The multi-tenant architecture and direct payment model made it the obvious choice for our growing operation.',
         author: 'Marie Dubois',
         role: 'CEO',
         company: 'Provence Car Hire',
@@ -190,13 +190,13 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     readyKicker: 'Ready to launch',
     readyTitle: 'Your fleet deserves an operating system, not just a listing site.',
     readyBody:
-      'FleetOS gives you the tools to run your entire rental business — from inventory to invoicing — while keeping your brand front and center at every touchpoint.',
+      'RentalDriveGo gives you the tools to run your entire rental business — from inventory to invoicing — while keeping your brand front and center at every touchpoint.',
     viewPricing: 'View pricing',
     createWorkspace: 'Create workspace',
   },
   fr: {
     sections: defaultMarketplaceHomepageSections,
-    heroKicker: 'FleetOS',
+    heroKicker: 'RentalDriveGo',
     heroTitle: "Le système d'exploitation pour la gestion de flotte moderne.",
     heroBody:
       "Gérez l'ensemble de votre activité de location depuis une seule plateforme — inventaire, réservations, paiements et expérience client, le tout sous votre propre marque.",
@@ -205,7 +205,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     surfaceLabel: 'Tableau de bord unifié',
     surfaceTitle: 'Une plateforme. Toutes les opérations.',
     surfaceBody:
-      'Les opérateurs de flotte ont besoin de puissance, les clients ont besoin de simplicité. FleetOS offre les deux sans compromis — aucun modèle générique.',
+      'Les opérateurs de flotte ont besoin de puissance, les clients ont besoin de simplicité. RentalDriveGo offre les deux sans compromis — aucun modèle générique.',
     liveLabel: 'Plateforme active',
     trustedFleets: 'Contrôle de flotte en temps réel',
     brandedFlows: 'Moteur de réservation en marque blanche',
@@ -217,7 +217,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     renterKicker: 'Expérience client',
     renterTitle: 'Offrez aux clients un parcours de réservation rapide et transparent qui se termine sur votre page de marque.',
     renterBody:
-      'FleetOS alimente la découverte et la conversion — pas un jardin fermé. Parcourez ici, réservez là-bas et payez directement au propriétaire de la flotte.',
+      'RentalDriveGo alimente la découverte et la conversion — pas un jardin fermé. Parcourez ici, réservez là-bas et payez directement au propriétaire de la flotte.',
     pillars: [
       ["Commande unifiée", "L'inventaire, la tarification dynamique et les offres promotionnelles circulent depuis un hub d'administration unique vers la marketplace et votre vitrine de marque."],
       ['Découverte intelligente', 'Recherche géolocalisée, score de réputation et annonces optimisées aident les clients à trouver le bon véhicule en quelques secondes.'],
@@ -228,7 +228,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       ['02', 'Expérience de réservation en marque blanche'],
       ['03', 'Paiements directs au propriétaire'],
     ].map(([value, label]) => ({ value: value!, label: label! })),
-    featureLabel: 'Ce que FleetOS couvre',
+    featureLabel: 'Ce que RentalDriveGo couvre',
     features: [
       "Inventaire de flotte avec photos multiples et suivi d'état",
       'Moteur de tarification dynamique avec règles saisonnières et promotionnelles',
@@ -254,11 +254,11 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
         description: 'Les clients découvrent votre flotte, réservent via votre site de marque et les paiements arrivent directement sur votre compte.',
       },
     ],
-    stepsTitle: 'Comment les flottes se lancent sur FleetOS',
+    stepsTitle: 'Comment les flottes se lancent sur RentalDriveGo',
     steps: [
       ['1', 'Créez votre espace de flotte', 'Choisissez un plan, démarrez votre essai de 90 jours et vérifiez votre compte opérateur.'],
       ['2', 'Publiez véhicules et offres', 'Ajoutez vos données une seule fois et contrôlez précisément ce qui apparaît sur chaque canal.'],
-      ['3', 'Acceptez les réservations selon vos conditions', 'Les clients découvrent votre flotte sur FleetOS, puis finalisent sur votre propre page de réservation.'],
+      ['3', 'Acceptez les réservations selon vos conditions', 'Les clients découvrent votre flotte sur RentalDriveGo, puis finalisent sur votre propre page de réservation.'],
     ].map(([step, title, body]) => ({ step: step!, title: title!, body: body! })),
     stepLabel: 'Étape',
     testimonialsKicker: 'HISTOIRES DE CLIENTS',
@@ -266,7 +266,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     testimonials: [
       {
         quote:
-          "FleetOS a transformé la gestion de notre flotte de plus de 200 véhicules. Le tableau de bord unifié a réduit notre temps d'administration de moitié et nos réservations ont doublé en trois mois.",
+          "RentalDriveGo a transformé la gestion de notre flotte de plus de 200 véhicules. Le tableau de bord unifié a réduit notre temps d'administration de moitié et nos réservations ont doublé en trois mois.",
         author: 'Sophie Martin',
         role: 'Directrice de Flotte',
         company: 'Location Premium',
@@ -280,7 +280,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       },
       {
         quote:
-          "Nous avons évalué six plateformes avant FleetOS. L'architecture multi-tenant et le modèle de paiement direct en ont fait le choix évident pour notre croissance.",
+          "Nous avons évalué six plateformes avant RentalDriveGo. L'architecture multi-tenant et le modèle de paiement direct en ont fait le choix évident pour notre croissance.",
         author: 'Isabelle Leclerc',
         role: 'PDG',
         company: 'Provence Auto',
@@ -289,13 +289,13 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     readyKicker: 'Prêt à vous lancer',
     readyTitle: "Votre flotte mérite un système d'exploitation, pas juste un site d'annonces.",
     readyBody:
-      "FleetOS vous donne les outils pour gérer l'ensemble de votre activité de location — de l'inventaire à la facturation — tout en gardant votre marque au premier plan à chaque point de contact.",
+      "RentalDriveGo vous donne les outils pour gérer l'ensemble de votre activité de location — de l'inventaire à la facturation — tout en gardant votre marque au premier plan à chaque point de contact.",
     viewPricing: 'Voir les tarifs',
     createWorkspace: "Créer l'espace",
   },
   ar: {
     sections: defaultMarketplaceHomepageSections,
-    heroKicker: 'FleetOS',
+    heroKicker: 'RentalDriveGo',
     heroTitle: 'نظام التشغيل لإدارة الأساطيل الحديثة.',
     heroBody:
       'قم بإدارة كامل نشاط التأجير الخاص بك من منصة واحدة — المخزون، الحجوزات، المدفوعات وتجربة العملاء، كل ذلك تحت علامتك التجارية الخاصة.',
@@ -304,7 +304,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     surfaceLabel: 'لوحة تحكم موحدة',
     surfaceTitle: 'منصة واحدة. كل العمليات.',
     surfaceBody:
-      'مشغلو الأساطيل يحتاجون إلى القوة، والمستأجرون يحتاجون إلى البساطة. FleetOS يقدم كليهما بدون تنازلات — لا قوالب جاهزة ولا سير عمل عام.',
+      'مشغلو الأساطيل يحتاجون إلى القوة، والمستأجرون يحتاجون إلى البساطة. RentalDriveGo يقدم كليهما بدون تنازلات — لا قوالب جاهزة ولا سير عمل عام.',
     liveLabel: 'منصة نشطة',
     trustedFleets: 'تحكم فوري بالأسطول',
     brandedFlows: 'محرك حجز بالعلامة البيضاء',
@@ -316,7 +316,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     renterKicker: 'تجربة المستأجر',
     renterTitle: 'امنح المستأجرين رحلة حجز سريعة وشفافة تنتهي على صفحة الدفع الخاصة بك.',
     renterBody:
-      'FleetOS يشغّل الاكتشاف والتحويل — وليس حديقة مغلقة. تصفح هنا، احجز هناك، وادفع مباشرة لمالك الأسطول.',
+      'RentalDriveGo يشغّل الاكتشاف والتحويل — وليس حديقة مغلقة. تصفح هنا، احجز هناك، وادفع مباشرة لمالك الأسطول.',
     pillars: [
       ['قيادة موحدة', 'المخزون، التسعير الديناميكي والعروض الترويجية تتدفق من مركز إدارة واحد إلى marketplace السوق وواجهة متجرك الخاصة.'],
       ['اكتشاف ذكي', 'بحث حسب الموقع، تقييم السمعة وقوائم منسقة بالذكاء الاصطناعي تساعد المستأجرين في العثور على المركبة المناسبة بثوانٍ.'],
@@ -327,7 +327,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       ['02', 'تجربة حجز بالعلامة البيضاء'],
       ['03', 'مدفوعات مباشرة للمالك'],
     ].map(([value, label]) => ({ value: value!, label: label! })),
-    featureLabel: 'ما الذي يغطيه FleetOS',
+    featureLabel: 'ما الذي يغطيه RentalDriveGo',
     features: [
       'مخزون الأسطول مع رفع صور متعددة وتتبع الحالة',
       'محرك تسعير ديناميكي مع قواعد موسمية وترويجية',
@@ -353,11 +353,11 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
         description: 'يكتشف العملاء أسطولك، ويحجزون عبر موقعك التجاري، وتصل المدفوعات مباشرة إلى حسابك.',
       },
     ],
-    stepsTitle: 'كيف تنطلق الأساطيل على FleetOS',
+    stepsTitle: 'كيف تنطلق الأساطيل على RentalDriveGo',
     steps: [
       ['1', 'أنشئ مساحة عمل أسطولك', 'اختر الخطة وابدأ تجربتك لمدة 90 يوماً وتحقق من حساب المشغل الخاص بك.'],
       ['2', 'انشر المركبات والعروض', 'أضف بيانات المركبات مرة واحدة وتحكم بدقة فيما يظهر على كل قناة.'],
-      ['3', 'استقبل الحجوزات بشروطك', 'يكتشف العملاء أسطولك على FleetOS، ثم يكملون الحجز على صفحة الدفع الخاصة بك.'],
+      ['3', 'استقبل الحجوزات بشروطك', 'يكتشف العملاء أسطولك على RentalDriveGo، ثم يكملون الحجز على صفحة الدفع الخاصة بك.'],
     ].map(([step, title, body]) => ({ step: step!, title: title!, body: body! })),
     stepLabel: 'الخطوة',
     testimonialsKicker: 'قصص العملاء',
@@ -365,7 +365,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     testimonials: [
       {
         quote:
-          'غيّر FleetOS طريقة إدارة أسطولنا المكون من أكثر من 200 مركبة. لوحة التحكم الموحدة قلصت وقت الإدارة إلى النصف وتضاعفت حجوزاتنا في ثلاثة أشهر.',
+          'غيّر RentalDriveGo طريقة إدارة أسطولنا المكون من أكثر من 200 مركبة. لوحة التحكم الموحدة قلصت وقت الإدارة إلى النصف وتضاعفت حجوزاتنا في ثلاثة أشهر.',
         author: 'فاطمة الزهراء',
         role: 'مديرة الأسطول',
         company: 'تأجير السيارات الممتازة',
@@ -379,7 +379,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
       },
       {
         quote:
-          'قيمنا ست منصات قبل FleetOS. البنية متعددة الشركات ونموذج الدفع المباشر جعلاه الخيار الواضح لنمونا المتسارع.',
+          'قيمنا ست منصات قبل RentalDriveGo. البنية متعددة الشركات ونموذج الدفع المباشر جعلاه الخيار الواضح لنمونا المتسارع.',
         author: 'ليلى حسن',
         role: 'المديرة التنفيذية',
         company: 'تأجير سيارات البحر الأبيض',
@@ -388,7 +388,7 @@ export const defaultMarketplaceHomepageContent: MarketplaceHomepageConfig = {
     readyKicker: 'جاهز للانطلاق',
     readyTitle: 'أسطولك يستحق نظام تشغيل، وليس مجرد موقع إعلانات.',
     readyBody:
-      'يمنحك FleetOS الأدوات اللازمة لإدارة كامل نشاط التأجير — من المخزون إلى الفوترة — مع إبقاء علامتك التجارية في المقدمة عند كل نقطة اتصال.',
+      'يمنحك RentalDriveGo الأدوات اللازمة لإدارة كامل نشاط التأجير — من المخزون إلى الفوترة — مع إبقاء علامتك التجارية في المقدمة عند كل نقطة اتصال.',
     viewPricing: 'عرض الأسعار',
     createWorkspace: 'إنشاء المساحة',
   },
diff --git a/scripts/validate-phase16-design.mjs b/scripts/validate-phase16-design.mjs
new file mode 100644
index 0000000..a144c7f
--- /dev/null
+++ b/scripts/validate-phase16-design.mjs
@@ -0,0 +1,54 @@
+import { readFile, readdir, stat } from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+
+const root = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..');
+const apps = ['admin', 'dashboard', 'storefront'];
+const errors = [];
+
+async function walk(directory) {
+  const files = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    if (['node_modules', '.next', '.turbo', 'dist'].includes(entry.name)) continue;
+    const target = path.join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...(await walk(target)));
+    else files.push(target);
+  }
+  return files;
+}
+
+for (const app of apps) {
+  const tokenPath = path.join(root, app, 'src', 'styles', 'phase16-tokens.css');
+  const globalsPath = path.join(root, app, 'src', 'app', 'globals.css');
+  try {
+    await stat(tokenPath);
+  } catch {
+    errors.push(`${app}: missing Phase 16 token file`);
+  }
+  const globals = await readFile(globalsPath, 'utf8');
+  if (!globals.includes('phase16-tokens.css')) {
+    errors.push(`${app}: globals.css does not import Phase 16 tokens`);
+  }
+}
+
+for (const app of apps) {
+  for (const file of await walk(path.join(root, app, 'src'))) {
+    if (!/\.(ts|tsx|css|json)$/.test(file)) continue;
+    const contents = await readFile(file, 'utf8');
+    if (contents.includes('RentalDriveGo')) {
+      errors.push(`${path.relative(root, file)}: retired RentalDriveGo brand remains`);
+    }
+  }
+}
+
+const adminLayout = await readFile(path.join(root, 'admin/src/app/dashboard/layout.tsx'), 'utf8');
+for (const required of ['navigationOpen', 'aria-current', 'RentalDriveGo', 'bg-blue-700']) {
+  if (!adminLayout.includes(required)) errors.push(`admin dashboard shell missing ${required}`);
+}
+
+if (errors.length) {
+  console.error(errors.join('\n'));
+  process.exit(1);
+}
+
+console.log('Phase 16 design migration checks passed.');
diff --git a/storefront/next-env.d.ts b/storefront/next-env.d.ts
new file mode 100644
index 0000000..c4b7818
--- /dev/null
+++ b/storefront/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/homepage/next.config.js b/storefront/next.config.js
similarity index 100%
rename from apps/homepage/next.config.js
rename to storefront/next.config.js
diff --git a/storefront/package.json b/storefront/package.json
new file mode 100644
index 0000000..337d1c4
--- /dev/null
+++ b/storefront/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@rentaldrivego/storefront",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "next dev -H 0.0.0.0 -p 3004",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "next build",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "next start -H 0.0.0.0 -p 3004",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@rentaldrivego/types": "*",
+    "autoprefixer": "^10.4.19",
+    "lucide-react": "^0.376.0",
+    "next": "^16.2.7",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/storefront/postcss.config.js b/storefront/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/storefront/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/homepage/public/favicon.ico b/storefront/public/favicon.ico
similarity index 100%
rename from apps/homepage/public/favicon.ico
rename to storefront/public/favicon.ico
diff --git a/storefront/public/icon.svg b/storefront/public/icon.svg
new file mode 100644
index 0000000..d2dee78
--- /dev/null
+++ b/storefront/public/icon.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#0f172a" />
+  <text
+    x="16"
+    y="21"
+    text-anchor="middle"
+    font-family="Inter, Arial, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    R
+  </text>
+</svg>
diff --git a/storefront/public/rentalcardrive.png b/storefront/public/rentalcardrive.png
new file mode 100644
index 0000000..2fee055
Binary files /dev/null and b/storefront/public/rentalcardrive.png differ
diff --git a/apps/homepage/src/app/(public)/app-policy-pages.test.ts b/storefront/src/app/(public)/app-policy-pages.test.ts
similarity index 100%
rename from apps/homepage/src/app/(public)/app-policy-pages.test.ts
rename to storefront/src/app/(public)/app-policy-pages.test.ts
diff --git a/apps/homepage/src/app/(public)/app-privacy-ar/page.tsx b/storefront/src/app/(public)/app-privacy-ar/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-privacy-ar/page.tsx
rename to storefront/src/app/(public)/app-privacy-ar/page.tsx
diff --git a/apps/homepage/src/app/(public)/app-privacy-en/page.tsx b/storefront/src/app/(public)/app-privacy-en/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-privacy-en/page.tsx
rename to storefront/src/app/(public)/app-privacy-en/page.tsx
diff --git a/apps/homepage/src/app/(public)/app-privacy-fr/page.tsx b/storefront/src/app/(public)/app-privacy-fr/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-privacy-fr/page.tsx
rename to storefront/src/app/(public)/app-privacy-fr/page.tsx
diff --git a/apps/homepage/src/app/(public)/app-tc-ar/page.tsx b/storefront/src/app/(public)/app-tc-ar/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-tc-ar/page.tsx
rename to storefront/src/app/(public)/app-tc-ar/page.tsx
diff --git a/apps/homepage/src/app/(public)/app-tc-en/page.tsx b/storefront/src/app/(public)/app-tc-en/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-tc-en/page.tsx
rename to storefront/src/app/(public)/app-tc-en/page.tsx
diff --git a/apps/homepage/src/app/(public)/app-tc-fr/page.tsx b/storefront/src/app/(public)/app-tc-fr/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/app-tc-fr/page.tsx
rename to storefront/src/app/(public)/app-tc-fr/page.tsx
diff --git a/apps/homepage/src/app/(public)/company-workspace/page.tsx b/storefront/src/app/(public)/company-workspace/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/company-workspace/page.tsx
rename to storefront/src/app/(public)/company-workspace/page.tsx
diff --git a/storefront/src/app/(public)/explore/ExploreSearchForm.tsx b/storefront/src/app/(public)/explore/ExploreSearchForm.tsx
new file mode 100644
index 0000000..408cd02
--- /dev/null
+++ b/storefront/src/app/(public)/explore/ExploreSearchForm.tsx
@@ -0,0 +1,295 @@
+'use client'
+
+import { CalendarDays, Clock3, Info, MapPin, TicketPercent } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+type ExploreSearchFormDict = {
+  searchTitle: string
+  pickupLocation: string
+  dropoffLocation: string
+  sameDropoff: string
+  differentDropoff: string
+  sameAsPickup: string
+  pickupDate: string
+  returnDate: string
+  hour: string
+  promoCode: string
+  myAge: string
+  ageDescription: string
+  search: string
+  ageOptions: string[]
+}
+
+function toUtcDateTime(date: string, time: string) {
+  if (!date) return ''
+  return `${date}T${time || '10:00'}:00.000Z`
+}
+
+const inputBase = 'w-full border-0 bg-white dark:bg-blue-900/30 px-4 py-4 text-sm text-stone-900 dark:text-stone-100 outline-none placeholder:text-stone-400 dark:placeholder:text-stone-500'
+const selectBase = 'w-full border-0 bg-white dark:bg-blue-900/30 py-4 text-sm text-stone-900 dark:text-stone-100 outline-none'
+
+export default function ExploreSearchForm({
+  pickupLocation,
+  dropoffLocation,
+  dropoffMode,
+  pickupDate,
+  pickupTime,
+  returnDate,
+  returnTime,
+  promoCode,
+  driverAge,
+  cities,
+  dict,
+}: {
+  pickupLocation: string
+  dropoffLocation: string
+  dropoffMode: 'same' | 'different'
+  pickupDate: string
+  pickupTime: string
+  returnDate: string
+  returnTime: string
+  promoCode: string
+  driverAge: string
+  cities: string[]
+  dict: ExploreSearchFormDict
+}) {
+  const router = useRouter()
+  const cityOptions = Array.isArray(cities) ? cities : []
+  const ageOptions = Array.isArray(dict.ageOptions) ? dict.ageOptions : []
+  const [filters, setFilters] = useState({
+    pickupLocation,
+    dropoffLocation,
+    dropoffMode,
+    pickupDate,
+    pickupTime: pickupTime || '10:00',
+    returnDate,
+    returnTime: returnTime || '10:00',
+    promoCode,
+    driverAge: driverAge || '25+',
+  })
+  const [ageHelpOpen, setAgeHelpOpen] = useState(false)
+
+  function updateFilter(name: keyof typeof filters, value: string) {
+    setFilters((current) => ({ ...current, [name]: value }))
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const query = new URLSearchParams()
+    const normalizedPickup = filters.pickupLocation.trim()
+    const normalizedDropoff = filters.dropoffMode === 'different'
+      ? filters.dropoffLocation.trim()
+      : normalizedPickup
+    const normalizedPromo = filters.promoCode.trim()
+
+    if (normalizedPickup) {
+      query.set('pickupLocation', normalizedPickup)
+      query.set('city', normalizedPickup)
+    }
+    query.set('dropoffMode', filters.dropoffMode)
+    if (filters.dropoffMode === 'different' && normalizedDropoff) {
+      query.set('dropoffLocation', normalizedDropoff)
+    }
+    if (filters.pickupDate) query.set('pickupDate', filters.pickupDate)
+    if (filters.pickupTime) query.set('pickupTime', filters.pickupTime)
+    if (filters.returnDate) query.set('returnDate', filters.returnDate)
+    if (filters.returnTime) query.set('returnTime', filters.returnTime)
+    if (normalizedPromo) query.set('promoCode', normalizedPromo)
+    if (filters.driverAge) query.set('driverAge', filters.driverAge)
+
+    const startDateTime = toUtcDateTime(filters.pickupDate, filters.pickupTime)
+    const endDateTime = toUtcDateTime(filters.returnDate, filters.returnTime)
+    if (startDateTime) query.set('startDate', startDateTime)
+    if (endDateTime) query.set('endDate', endDateTime)
+
+    const target = query.toString() ? `/explore?${query.toString()}` : '/explore'
+    router.push(target)
+  }
+
+  return (
+    <div className="mt-8 rounded-[1.75rem] bg-white dark:bg-blue-950 p-5 text-stone-900 dark:text-stone-100 shadow-[0_24px_80px_rgba(0,0,0,0.16)]">
+      <h2 className="text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{dict.searchTitle}</h2>
+      <form onSubmit={handleSubmit} className="mt-5 space-y-4">
+        <div className="grid gap-px overflow-hidden rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 md:grid-cols-2">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
+            <MapPin className="h-5 w-5 text-stone-300 dark:text-stone-500" />
+            <select
+              name="pickupLocation"
+              value={filters.pickupLocation}
+              onChange={(event) => updateFilter('pickupLocation', event.target.value)}
+              className={selectBase}
+            >
+              <option value="">{dict.pickupLocation}</option>
+              {cityOptions.map((city) => (
+                <option key={`pickup-${city}`} value={city}>{city}</option>
+              ))}
+            </select>
+          </label>
+          <div className="bg-white dark:bg-blue-900/30 px-4 py-3">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.dropoffLocation}</span>
+              <div className="inline-flex rounded-full border border-stone-200 dark:border-blue-800 bg-stone-100 dark:bg-blue-950 p-1">
+                <button
+                  type="button"
+                  onClick={() => setFilters((current) => ({ ...current, dropoffMode: 'same', dropoffLocation: '' }))}
+                  className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+                    filters.dropoffMode === 'same'
+                      ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
+                      : 'text-stone-500 dark:text-stone-400'
+                  }`}
+                >
+                  {dict.sameDropoff}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setFilters((current) => ({ ...current, dropoffMode: 'different' }))}
+                  className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+                    filters.dropoffMode === 'different'
+                      ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
+                      : 'text-stone-500 dark:text-stone-400'
+                  }`}
+                >
+                  {dict.differentDropoff}
+                </button>
+              </div>
+            </div>
+            {filters.dropoffMode === 'different' ? (
+              <label className="mt-3 flex items-center gap-3">
+                <MapPin className="h-5 w-5 text-stone-300 dark:text-stone-500" />
+                <select
+                  name="dropoffLocation"
+                  value={filters.dropoffLocation}
+                  onChange={(event) => updateFilter('dropoffLocation', event.target.value)}
+                  className={selectBase}
+                >
+                  <option value="">{dict.dropoffLocation}</option>
+                  {cityOptions.map((city) => (
+                    <option key={`dropoff-${city}`} value={city}>{city}</option>
+                  ))}
+                </select>
+              </label>
+            ) : (
+              <div className="mt-3 flex items-center gap-3 rounded-2xl bg-stone-50 px-4 py-4 text-sm font-medium text-stone-500 dark:bg-blue-950 dark:text-stone-300">
+                <MapPin className="h-5 w-5 text-stone-300 dark:text-stone-500" />
+                <span>{filters.pickupLocation || dict.sameAsPickup}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="grid gap-px overflow-hidden rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 md:grid-cols-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
+            <CalendarDays className="h-5 w-5 text-stone-500 dark:text-stone-400" />
+            <div className="flex w-full flex-col py-3">
+              <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.pickupDate}</span>
+              <input
+                name="pickupDate"
+                type="date"
+                value={filters.pickupDate}
+                min={new Date().toISOString().slice(0, 10)}
+                onChange={(event) => updateFilter('pickupDate', event.target.value)}
+                className="border-0 bg-transparent px-0 py-0 text-sm text-stone-900 dark:text-stone-100 outline-none [color-scheme:light] dark:[color-scheme:dark]"
+              />
+            </div>
+          </label>
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
+            <Clock3 className="h-5 w-5 text-stone-500 dark:text-stone-400" />
+            <div className="flex w-full flex-col py-3">
+              <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.hour}</span>
+              <input
+                name="pickupTime"
+                type="time"
+                value={filters.pickupTime}
+                onChange={(event) => updateFilter('pickupTime', event.target.value)}
+                className="border-0 bg-transparent px-0 py-0 text-sm text-stone-900 dark:text-stone-100 outline-none [color-scheme:light] dark:[color-scheme:dark]"
+              />
+            </div>
+          </label>
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
+            <CalendarDays className="h-5 w-5 text-stone-500 dark:text-stone-400" />
+            <div className="flex w-full flex-col py-3">
+              <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.returnDate}</span>
+              <input
+                name="returnDate"
+                type="date"
+                value={filters.returnDate}
+                min={filters.pickupDate || new Date().toISOString().slice(0, 10)}
+                onChange={(event) => updateFilter('returnDate', event.target.value)}
+                className="border-0 bg-transparent px-0 py-0 text-sm text-stone-900 dark:text-stone-100 outline-none [color-scheme:light] dark:[color-scheme:dark]"
+              />
+            </div>
+          </label>
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
+            <Clock3 className="h-5 w-5 text-stone-500 dark:text-stone-400" />
+            <div className="flex w-full flex-col py-3">
+              <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.hour}</span>
+              <input
+                name="returnTime"
+                type="time"
+                value={filters.returnTime}
+                onChange={(event) => updateFilter('returnTime', event.target.value)}
+                className="border-0 bg-transparent px-0 py-0 text-sm text-stone-900 dark:text-stone-100 outline-none [color-scheme:light] dark:[color-scheme:dark]"
+              />
+            </div>
+          </label>
+        </div>
+
+        <div className="relative z-10 grid gap-px overflow-visible rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 lg:grid-cols-[1.1fr_1.1fr_1.35fr]">
+          <label className="flex items-center gap-3 rounded-t-[1.35rem] bg-white dark:bg-blue-900/30 px-4 lg:rounded-l-[1.35rem] lg:rounded-tr-none">
+            <TicketPercent className="h-5 w-5 text-stone-300 dark:text-stone-500" />
+            <input
+              name="promoCode"
+              value={filters.promoCode}
+              onChange={(event) => updateFilter('promoCode', event.target.value)}
+              placeholder={dict.promoCode}
+              className={`${inputBase} pl-2`}
+            />
+          </label>
+          <label className="flex items-center justify-between gap-3 bg-white dark:bg-blue-900/30 px-4 py-3">
+            <div className="flex min-w-0 items-center gap-3">
+              <span className="text-sm font-semibold text-stone-600 dark:text-stone-300">{dict.myAge}</span>
+              <select
+                name="driverAge"
+                value={filters.driverAge}
+                onChange={(event) => updateFilter('driverAge', event.target.value)}
+                className="border-0 bg-transparent text-sm font-semibold text-stone-900 dark:text-stone-100 outline-none"
+              >
+                {ageOptions.map((option) => (
+                  <option key={option} value={option}>{option}</option>
+                ))}
+              </select>
+            </div>
+            <div
+              className="relative shrink-0"
+              onMouseEnter={() => setAgeHelpOpen(true)}
+              onMouseLeave={() => setAgeHelpOpen(false)}
+            >
+              <button
+                type="button"
+                aria-label={dict.ageDescription}
+                onClick={() => setAgeHelpOpen((open) => !open)}
+                className="text-stone-400 dark:text-stone-500 transition hover:text-stone-600 dark:hover:text-stone-300"
+              >
+                <Info className="h-5 w-5" />
+              </button>
+              {ageHelpOpen ? (
+                <div className="absolute bottom-[calc(100%+0.85rem)] right-0 z-30 w-72 rounded-2xl border border-orange-300 dark:border-orange-600 bg-white dark:bg-blue-950 px-4 py-3 text-left text-sm leading-6 text-stone-700 dark:text-stone-200 shadow-[0_16px_40px_rgba(0,0,0,0.14)]">
+                  {dict.ageDescription}
+                  <span className="absolute right-6 top-full h-3 w-3 -translate-y-1/2 rotate-45 border-b border-r border-orange-300 dark:border-orange-600 bg-white dark:bg-blue-950" />
+                </div>
+              ) : null}
+            </div>
+          </label>
+          <button
+            type="submit"
+            className="min-h-[76px] rounded-b-[1.35rem] bg-orange-600 px-6 text-sm font-black uppercase tracking-[0.08em] text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 lg:rounded-b-none lg:rounded-r-[1.35rem]"
+          >
+            {dict.search}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/storefront/src/app/(public)/explore/ExploreVehicleGrid.tsx b/storefront/src/app/(public)/explore/ExploreVehicleGrid.tsx
new file mode 100644
index 0000000..52b8586
--- /dev/null
+++ b/storefront/src/app/(public)/explore/ExploreVehicleGrid.tsx
@@ -0,0 +1,112 @@
+import Link from 'next/link'
+import { formatCurrency, type Locale } from '@rentaldrivego/types'
+
+interface Vehicle {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  dailyRate: number
+  photos: string[]
+  availability?: boolean | null
+  availabilityStatus?: 'AVAILABLE' | 'RESERVED' | 'MAINTENANCE' | 'UNAVAILABLE'
+  nextAvailableAt?: string | null
+  company: {
+    slug: string
+    brand: {
+      displayName: string
+      logoUrl: string | null
+      subdomain: string
+      marketplaceRating: number | null
+    } | null
+  }
+}
+
+interface Dict {
+  rentalCompany: string
+  checkAvailability: string
+  available: string
+  reserved: string
+  maintenance: string
+  unavailableStatus: string
+  from: string
+  viewVehicle: string
+  availableFrom: string
+  unavailableNoDate: string
+  vehicleUnavailable: string
+  listings: string
+  availableVehicles: string
+}
+
+function formatCents(cents: number, language: Locale) {
+  return formatCurrency(cents, 'MAD', language)
+}
+
+function formatAvailabilityDate(value?: string | null) {
+  if (!value) return null
+  return new Date(value).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+function getStatusCopy(vehicle: Vehicle, dict: Dict) {
+  if (vehicle.availabilityStatus === 'RESERVED') return dict.reserved
+  if (vehicle.availabilityStatus === 'MAINTENANCE') return dict.maintenance
+  if (vehicle.availabilityStatus === 'UNAVAILABLE') return dict.unavailableStatus
+  if (vehicle.availability === false) return dict.checkAvailability
+  return dict.available
+}
+
+export default function ExploreVehicleGrid({ vehicles, dict, language }: { vehicles: Vehicle[]; dict: Dict; language: Locale }) {
+  return (
+    <section>
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.availableVehicles}</h2>
+        <p className="text-sm text-stone-500 dark:text-stone-400">{vehicles.length} {dict.listings}</p>
+      </div>
+      <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+        {vehicles.map((vehicle) => (
+          <article key={vehicle.id} className="card">
+            <div className="aspect-[16/10] overflow-hidden rounded-t-[2rem] bg-stone-100 dark:bg-blue-900/30">
+              {vehicle.photos[0] ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
+              ) : null}
+            </div>
+            <div className="p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-xs uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
+                  <h3 className="mt-2 truncate text-lg font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
+                  <p className="mt-1 truncate text-sm text-stone-500 dark:text-stone-400">{vehicle.year} · {vehicle.category}</p>
+                </div>
+                <span className={`shrink-0 rounded-full px-3 py-1 text-xs font-semibold ${vehicle.availability === false ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400'}`}>
+                  {getStatusCopy(vehicle, dict)}
+                </span>
+              </div>
+              {vehicle.availability === false && (
+                <p className="mt-3 text-sm text-stone-500 dark:text-stone-400">
+                  {vehicle.nextAvailableAt ? `${dict.availableFrom} ${formatAvailabilityDate(vehicle.nextAvailableAt)}` : dict.unavailableNoDate}
+                </p>
+              )}
+              <div className="mt-4 flex items-end justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="text-sm text-stone-500 dark:text-stone-400">{dict.from}</p>
+                  <p className="truncate text-xl font-black text-stone-900 dark:text-stone-100">{formatCents(vehicle.dailyRate, language)}</p>
+                </div>
+                <Link
+                  href={`/explore/${vehicle.company.slug}/vehicles/${vehicle.id}`}
+                  className="shrink-0 rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
+                >
+                  {dict.viewVehicle}
+                </Link>
+              </div>
+            </div>
+          </article>
+        ))}
+        {vehicles.length === 0 && (
+          <div className="card p-6 text-sm text-stone-500 dark:text-stone-400 md:col-span-2 xl:col-span-3">{dict.vehicleUnavailable}</div>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/storefront/src/app/(public)/explore/[slug]/page.tsx b/storefront/src/app/(public)/explore/[slug]/page.tsx
new file mode 100644
index 0000000..4325db8
--- /dev/null
+++ b/storefront/src/app/(public)/explore/[slug]/page.tsx
@@ -0,0 +1,159 @@
+import Link from 'next/link'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import { formatCurrency } from '@rentaldrivego/types'
+
+interface CompanyProfile {
+  id: string
+  name: string
+  slug: string
+  brand: {
+    displayName: string
+    logoUrl: string | null
+    publicCity: string | null
+    publicCountry: string | null
+    publicPhone: string | null
+    whatsappNumber: string | null
+    marketplaceRating: number | null
+  } | null
+  vehicles: Array<{ id: string; make: string; model: string; dailyRate: number; photos: string[]; category: string; availability: boolean; nextAvailableAt: string | null }>
+  offers: Array<{ id: string; title: string; discountValue: number; validUntil: string }>
+}
+
+export default async function CompanyProfilePage({ params }: { params: { slug: string } }) {
+  const language = await getMarketplaceLanguage()
+  const dict = {
+    en: {
+      unavailable: 'Marketplace unavailable',
+      unavailableTitle: 'Company details are temporarily unavailable.',
+      unavailableBody: 'The marketplace API is running, but the database is not reachable in this local environment.',
+      backToExplore: 'Back to explore',
+      partner: 'Marketplace partner',
+      vehicles: 'vehicles',
+      offers: 'active offers',
+      rating: 'Rating',
+      new: 'New',
+      currentOffers: 'Current offers',
+      validUntil: 'Valid until',
+      noOffers: 'No active offers right now.',
+      fleet: 'Fleet',
+      viewVehicle: 'View vehicle',
+      availableFrom: 'Available from',
+      unavailableNoDate: 'Temporarily unavailable for new reservations.',
+    },
+    fr: {
+      unavailable: 'Marketplace indisponible',
+      unavailableTitle: "Les détails de l'entreprise sont temporairement indisponibles.",
+      unavailableBody: "L'API marketplace fonctionne, mais la base de données n'est pas accessible dans cet environnement local.",
+      backToExplore: "Retour à l'exploration",
+      partner: 'Partenaire marketplace',
+      vehicles: 'véhicules',
+      offers: 'offres actives',
+      rating: 'Note',
+      new: 'Nouveau',
+      currentOffers: 'Offres actuelles',
+      validUntil: "Valable jusqu'au",
+      noOffers: 'Aucune offre active pour le moment.',
+      fleet: 'Flotte',
+      viewVehicle: 'Voir le véhicule',
+      availableFrom: 'Disponible à partir du',
+      unavailableNoDate: 'Temporairement indisponible pour les nouvelles réservations.',
+    },
+    ar: {
+      unavailable: 'السوق غير متاح',
+      unavailableTitle: 'تفاصيل الشركة غير متاحة مؤقتاً.',
+      unavailableBody: 'واجهة السوق تعمل، لكن قاعدة البيانات غير متاحة في هذه البيئة المحلية.',
+      backToExplore: 'العودة إلى الاستكشاف',
+      partner: 'شريك في السوق',
+      vehicles: 'مركبات',
+      offers: 'عروض نشطة',
+      rating: 'التقييم',
+      new: 'جديد',
+      currentOffers: 'العروض الحالية',
+      validUntil: 'صالح حتى',
+      noOffers: 'لا توجد عروض نشطة حالياً.',
+      fleet: 'الأسطول',
+      viewVehicle: 'عرض السيارة',
+      availableFrom: 'متاح ابتداءً من',
+      unavailableNoDate: 'غير متاحة مؤقتاً للحجوزات الجديدة.',
+    },
+  }[language]
+  const company = await marketplaceFetchOrDefault<CompanyProfile | null>(`/marketplace/${params.slug}`, null)
+
+  if (!company) {
+    return (
+      <main className="site-page">
+        <div className="site-section">
+          <section className="card p-8">
+            <p className="text-sm uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{dict.unavailable}</p>
+            <h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
+            <p className="mt-3 text-stone-600 dark:text-stone-400">{dict.unavailableBody}</p>
+            <div className="mt-6">
+              <Link href="/explore" className="rounded-full bg-blue-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.backToExplore}</Link>
+            </div>
+          </section>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="site-page">
+      <div className="site-section space-y-8">
+        <section className="card p-8">
+          <p className="text-sm uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{company.brand?.publicCity ?? dict.partner}</p>
+          <h1 className="mt-3 text-4xl font-black text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? company.name}</h1>
+          <p className="mt-3 text-stone-600 dark:text-stone-400">{company.brand?.publicCountry ?? ''}</p>
+          <div className="mt-6 flex flex-wrap gap-3 text-sm text-stone-500 dark:text-stone-400">
+            <span>{company.vehicles.length} {dict.vehicles}</span>
+            <span>{company.offers.length} {dict.offers}</span>
+            <span>{dict.rating} {company.brand?.marketplaceRating?.toFixed(1) ?? dict.new}</span>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.currentOffers}</h2>
+          <div className="mt-4 grid gap-4 md:grid-cols-2">
+            {company.offers.map((offer) => (
+              <div key={offer.id} className="card p-5">
+                <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{offer.title}</p>
+                <p className="mt-2 text-3xl font-black text-orange-700 dark:text-orange-400">{offer.discountValue}%</p>
+                <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.validUntil} {new Date(offer.validUntil).toLocaleDateString()}</p>
+              </div>
+            ))}
+            {company.offers.length === 0 && <div className="card p-6 text-sm text-stone-500 dark:text-stone-400">{dict.noOffers}</div>}
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.fleet}</h2>
+          <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+            {company.vehicles.map((vehicle) => (
+              <article key={vehicle.id} className="card">
+                <div className="aspect-[16/10] overflow-hidden rounded-t-[2rem] bg-stone-100 dark:bg-blue-900/30">
+                  {vehicle.photos[0] ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
+                  ) : null}
+                </div>
+                <div className="p-4">
+                  <h3 className="truncate text-lg font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
+                  <p className="mt-1 truncate text-sm text-stone-500 dark:text-stone-400">{vehicle.category}</p>
+                  {!vehicle.availability && (
+                    <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
+                      {vehicle.nextAvailableAt ? `${dict.availableFrom} ${new Date(vehicle.nextAvailableAt).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })}` : dict.unavailableNoDate}
+                    </p>
+                  )}
+                  <div className="mt-4 flex items-end justify-between gap-3">
+                    <p className="min-w-0 truncate text-xl font-black text-stone-900 dark:text-stone-100">{formatCurrency(vehicle.dailyRate, 'MAD', language)}</p>
+                    <Link href={`/explore/${params.slug}/vehicles/${vehicle.id}`} className="shrink-0 rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.viewVehicle}</Link>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/storefront/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx b/storefront/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
new file mode 100644
index 0000000..bafc3da
--- /dev/null
+++ b/storefront/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
@@ -0,0 +1,283 @@
+import Link from 'next/link'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import { formatCurrency } from '@rentaldrivego/types'
+import BookingForm from '@/components/BookingForm'
+
+interface VehicleDetail {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  seats: number
+  transmission: string
+  fuelType: string
+  features: string[]
+  dailyRate: number
+  photos: string[]
+  pickupLocations: string[]
+  allowDifferentDropoff: boolean
+  dropoffLocations: string[]
+  availability: boolean
+  availabilityStatus: 'AVAILABLE' | 'RESERVED' | 'MAINTENANCE' | 'UNAVAILABLE'
+  nextAvailableAt: string | null
+  company: {
+    brand: {
+      displayName: string
+      subdomain: string
+      publicPhone: string | null
+      whatsappNumber: string | null
+    } | null
+  }
+}
+
+export default async function VehicleDetailPage({ params }: { params: { slug: string; id: string } }) {
+  const language = await getMarketplaceLanguage()
+  const dict = {
+    en: {
+      unavailable: 'Marketplace unavailable',
+      unavailableTitle: 'Vehicle details are temporarily unavailable.',
+      unavailableBody: 'The marketplace frontend is running, but the backing database is not reachable right now.',
+      backToFleet: 'Back to fleet',
+      backToExplore: 'Back to explore',
+      noPhotos: 'No photos available.',
+      rentalCompany: 'Rental company',
+      perDay: '/ day',
+      availableFrom: 'Available from',
+      unavailableNoDate: 'This vehicle is temporarily unavailable for new reservations.',
+      specs: 'Specifications',
+      year: 'Year',
+      category: 'Category',
+      seats: 'Seats',
+      transmission: 'Transmission',
+      fuel: 'Fuel type',
+      features: 'Features & extras',
+      contact: 'Contact company',
+      phone: 'Phone',
+      whatsapp: 'WhatsApp',
+      photos: 'Photos',
+    },
+    fr: {
+      unavailable: 'Marketplace indisponible',
+      unavailableTitle: 'Les détails du véhicule sont temporairement indisponibles.',
+      unavailableBody: "Le frontend marketplace fonctionne, mais la base de données n'est pas accessible pour le moment.",
+      backToFleet: 'Retour à la flotte',
+      backToExplore: 'Retour à l’exploration',
+      noPhotos: 'Aucune photo disponible.',
+      rentalCompany: 'Société de location',
+      perDay: '/ jour',
+      availableFrom: 'Disponible à partir du',
+      unavailableNoDate: 'Ce véhicule est temporairement indisponible pour les nouvelles réservations.',
+      specs: 'Caractéristiques',
+      year: 'Année',
+      category: 'Catégorie',
+      seats: 'Places',
+      transmission: 'Transmission',
+      fuel: 'Carburant',
+      features: 'Équipements & extras',
+      contact: 'Contacter la société',
+      phone: 'Téléphone',
+      whatsapp: 'WhatsApp',
+      photos: 'Photos',
+    },
+    ar: {
+      unavailable: 'السوق غير متاح',
+      unavailableTitle: 'تفاصيل السيارة غير متاحة مؤقتاً.',
+      unavailableBody: 'واجهة السوق تعمل، لكن قاعدة البيانات في الخلفية غير متاحة حالياً.',
+      backToFleet: 'العودة إلى الأسطول',
+      backToExplore: 'العودة إلى الاستكشاف',
+      noPhotos: 'لا توجد صور متاحة.',
+      rentalCompany: 'شركة تأجير',
+      perDay: '/ يوم',
+      availableFrom: 'متاح ابتداءً من',
+      unavailableNoDate: 'هذه السيارة غير متاحة مؤقتاً للحجوزات الجديدة.',
+      specs: 'المواصفات',
+      year: 'السنة',
+      category: 'الفئة',
+      seats: 'المقاعد',
+      transmission: 'ناقل الحركة',
+      fuel: 'نوع الوقود',
+      features: 'المميزات والإضافات',
+      contact: 'تواصل مع الشركة',
+      phone: 'الهاتف',
+      whatsapp: 'واتساب',
+      photos: 'الصور',
+    },
+  }[language]
+
+  const vehicle = await marketplaceFetchOrDefault<VehicleDetail | null>(`/marketplace/${params.slug}/vehicles/${params.id}`, null)
+
+  if (!vehicle) {
+    return (
+      <main className="site-page">
+        <div className="site-section">
+          <section className="card p-8">
+            <p className="text-sm uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{dict.unavailable}</p>
+            <h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
+            <p className="mt-3 text-stone-600 dark:text-stone-400">{dict.unavailableBody}</p>
+            <div className="mt-6 flex gap-3">
+              <Link href={`/explore/${params.slug}`} className="rounded-full bg-blue-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.backToFleet}</Link>
+              <Link href="/explore" className="rounded-full border border-stone-200 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-stone-400 dark:border-blue-800 dark:text-stone-300 dark:hover:border-stone-500">{dict.backToExplore}</Link>
+            </div>
+          </section>
+        </div>
+      </main>
+    )
+  }
+
+  const availabilityDate = vehicle.nextAvailableAt
+    ? new Date(vehicle.nextAvailableAt).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })
+    : null
+
+  const [heroPhoto, ...galleryPhotos] = vehicle.photos
+
+  return (
+    <main className="site-page">
+      <div className="site-section space-y-8">
+
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-2 text-sm text-stone-500 dark:text-stone-400">
+          <Link href="/explore" className="hover:text-stone-900 dark:hover:text-stone-100 transition">{dict.backToExplore}</Link>
+          <span>/</span>
+          <Link href={`/explore/${params.slug}`} className="hover:text-stone-900 dark:hover:text-stone-100 transition">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</Link>
+          <span>/</span>
+          <span className="text-stone-900 dark:text-stone-100 font-medium">{vehicle.make} {vehicle.model}</span>
+        </nav>
+
+        <div className="grid gap-8 lg:grid-cols-[1fr_380px]">
+
+          {/* Left — photos + specs */}
+          <div className="space-y-6">
+
+            {/* Hero photo */}
+            {heroPhoto ? (
+              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-blue-900/30 aspect-[16/9]">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={heroPhoto} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
+              </div>
+            ) : (
+              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-blue-900/30 aspect-[16/9] flex items-center justify-center text-sm text-stone-400">{dict.noPhotos}</div>
+            )}
+
+            {/* Gallery */}
+            {galleryPhotos.length > 0 && (
+              <div>
+                <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">{dict.photos}</p>
+                <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+                  {galleryPhotos.map((photo, index) => (
+                    <div key={`${photo}-${index}`} className="overflow-hidden rounded-2xl bg-stone-100 dark:bg-blue-900/30 aspect-[4/3]">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img src={photo} alt={`${vehicle.make} ${vehicle.model} ${index + 2}`} className="h-full w-full object-cover" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Specs */}
+            <div className="card p-6 space-y-4">
+              <h2 className="text-lg font-bold text-stone-900 dark:text-stone-100">{dict.specs}</h2>
+              <dl className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-3">
+                <div>
+                  <dt className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.year}</dt>
+                  <dd className="mt-1 text-base font-semibold text-stone-900 dark:text-stone-100">{vehicle.year}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.category}</dt>
+                  <dd className="mt-1 text-base font-semibold text-stone-900 dark:text-stone-100">{vehicle.category}</dd>
+                </div>
+                {vehicle.seats > 0 && (
+                  <div>
+                    <dt className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.seats}</dt>
+                    <dd className="mt-1 text-base font-semibold text-stone-900 dark:text-stone-100">{vehicle.seats}</dd>
+                  </div>
+                )}
+                {vehicle.transmission && (
+                  <div>
+                    <dt className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.transmission}</dt>
+                    <dd className="mt-1 text-base font-semibold text-stone-900 dark:text-stone-100">{vehicle.transmission}</dd>
+                  </div>
+                )}
+                {vehicle.fuelType && (
+                  <div>
+                    <dt className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.fuel}</dt>
+                    <dd className="mt-1 text-base font-semibold text-stone-900 dark:text-stone-100">{vehicle.fuelType}</dd>
+                  </div>
+                )}
+              </dl>
+
+              {vehicle.features.length > 0 && (
+                <div className="pt-2 border-t border-stone-100 dark:border-blue-900">
+                  <p className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500 mb-3">{dict.features}</p>
+                  <div className="flex flex-wrap gap-2">
+                    {vehicle.features.map((feature) => (
+                      <span key={feature} className="rounded-full bg-stone-100 dark:bg-blue-900/30 px-3 py-1 text-xs font-medium text-stone-700 dark:text-stone-300">{feature}</span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Contact */}
+            {(vehicle.company.brand?.publicPhone || vehicle.company.brand?.whatsappNumber) && (
+              <div className="card p-6 space-y-3">
+                <h2 className="text-lg font-bold text-stone-900 dark:text-stone-100">{dict.contact}</h2>
+                <p className="text-sm text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
+                <div className="flex flex-wrap gap-3">
+                  {vehicle.company.brand?.publicPhone && (
+                    <a href={`tel:${vehicle.company.brand.publicPhone}`} className="inline-flex items-center gap-2 rounded-full border border-stone-300 dark:border-blue-800 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-blue-900/40 transition">
+                      {dict.phone}: {vehicle.company.brand.publicPhone}
+                    </a>
+                  )}
+                  {vehicle.company.brand?.whatsappNumber && (
+                    <a href={`https://wa.me/${vehicle.company.brand.whatsappNumber.replace(/\D/g, '')}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 rounded-full bg-orange-600 px-4 py-2 text-sm font-semibold text-white hover:bg-orange-700 transition">
+                      {dict.whatsapp}
+                    </a>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Right — sticky booking panel */}
+          <aside className="space-y-4">
+            <div className="card p-6 space-y-4 lg:sticky lg:top-20">
+              <p className="text-xs uppercase tracking-[0.18em] text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
+              <h1 className="text-3xl font-black text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h1>
+              <p className="text-stone-500 dark:text-stone-400">{vehicle.year} · {vehicle.category}</p>
+              <p className="text-3xl font-black text-stone-900 dark:text-stone-100">
+                {formatCurrency(vehicle.dailyRate, 'MAD', language)}
+                <span className="text-base font-medium text-stone-500 dark:text-stone-400"> {dict.perDay}</span>
+              </p>
+
+              {!vehicle.availability && (
+                <div className="rounded-2xl border border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-950/40 px-4 py-3 text-sm text-orange-800 dark:text-orange-300">
+                  {availabilityDate ? `${dict.availableFrom} ${availabilityDate}` : dict.unavailableNoDate}
+                </div>
+              )}
+
+              {vehicle.availability && (
+                <BookingForm
+                  vehicleId={vehicle.id}
+                  companySlug={params.slug}
+                  dailyRate={vehicle.dailyRate}
+                  pickupLocations={vehicle.pickupLocations}
+                  allowDifferentDropoff={vehicle.allowDifferentDropoff}
+                  dropoffLocations={vehicle.dropoffLocations}
+                />
+              )}
+
+              <Link
+                href={`/explore/${params.slug}`}
+                className="block rounded-full border border-stone-300 dark:border-blue-800 px-6 py-3 text-center text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-blue-900/40 transition"
+              >
+                {dict.backToFleet}
+              </Link>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/storefront/src/app/(public)/explore/page.tsx b/storefront/src/app/(public)/explore/page.tsx
new file mode 100644
index 0000000..1d657a4
--- /dev/null
+++ b/storefront/src/app/(public)/explore/page.tsx
@@ -0,0 +1,329 @@
+import Link from 'next/link'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import ExploreSearchForm from './ExploreSearchForm'
+import ExploreVehicleGrid from './ExploreVehicleGrid'
+
+interface Vehicle {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  dailyRate: number
+  photos: string[]
+  pickupLocations: string[]
+  allowDifferentDropoff: boolean
+  dropoffLocations: string[]
+  availability?: boolean | null
+  availabilityStatus?: 'AVAILABLE' | 'RESERVED' | 'MAINTENANCE' | 'UNAVAILABLE'
+  nextAvailableAt?: string | null
+  company: {
+    slug: string
+    brand: {
+      displayName: string
+      logoUrl: string | null
+      subdomain: string
+      marketplaceRating: number | null
+    } | null
+  }
+}
+
+interface Offer {
+  id: string
+  title: string
+  discountValue: number
+  validUntil: string
+  company: {
+    brand: {
+      displayName: string
+      subdomain: string
+    } | null
+  }
+}
+
+interface CompanyCard {
+  id: string
+  brand: {
+    displayName: string
+    subdomain: string
+    publicCity: string | null
+    marketplaceRating: number | null
+  } | null
+  _count: {
+    vehicles: number
+  }
+}
+
+const CATEGORY_VALUES = [
+  'ECONOMY',
+  'COMPACT',
+  'MIDSIZE',
+  'FULLSIZE',
+  'SUV',
+  'LUXURY',
+  'VAN',
+  'TRUCK',
+] as const
+
+export default async function ExplorePage({ searchParams }: { searchParams?: Promise<Record<string, string | string[] | undefined>> }) {
+  const resolvedSearchParams = await searchParams
+  const language = await getMarketplaceLanguage()
+  const dict = {
+    en: {
+      kicker: 'Discovery only',
+      title: 'Find your next rental from trusted local companies.',
+      body: 'Browse, filter, and reserve — the company confirms and contacts you directly.',
+      searchTitle: 'Find a vehicle',
+      pickupLocation: 'Pick-up location',
+      dropoffLocation: 'Drop-off location',
+      sameDropoff: 'Same drop-off',
+      differentDropoff: 'Different drop-off',
+      sameAsPickup: 'Return to the same location',
+      pickupDate: 'Start date',
+      returnDate: 'Return date',
+      hour: 'Hour',
+      promoCode: 'I have a promo code',
+      myAge: 'My age',
+      ageDescription: 'Driver age can affect availability, deposit amount, and final pricing.',
+      ageOptions: ['18+', '21+', '23+', '25+', '30+'],
+      search: 'Search',
+      currentDeals: 'Current deals',
+      featuredOffers: 'Featured marketplace offers',
+      company: 'Company',
+      validUntil: 'Valid until',
+      offersUnavailable: 'Marketplace offers are unavailable right now.',
+      availableVehicles: 'Available vehicles',
+      listings: 'listings',
+      rentalCompany: 'Rental company',
+      checkAvailability: 'Check availability',
+      available: 'Available',
+      reserved: 'Reserved',
+      maintenance: 'In maintenance',
+      unavailableStatus: 'Unavailable',
+      from: 'From',
+      viewVehicle: 'View vehicle',
+      availableFrom: 'Available from',
+      unavailableNoDate: 'This vehicle is temporarily unavailable for new reservations.',
+      vehicleUnavailable: 'Vehicle listings are unavailable right now.',
+      browseByCategory: 'Browse by category',
+      browseByCompany: 'Browse by company',
+      marketplacePartners: 'Marketplace partners',
+      marketplacePartner: 'Marketplace partner',
+      rating: 'Rating',
+      new: 'New',
+      publishedVehicles: 'published vehicles',
+      viewFleet: 'View fleet',
+      categories: ['Economy', 'Compact', 'Midsize', 'Full-size', 'SUV', 'Luxury', 'Van', 'Truck'],
+    },
+    fr: {
+      kicker: 'Découverte uniquement',
+      title: "Trouvez votre prochaine location auprès d'entreprises locales fiables.",
+      body: "Parcourez, filtrez et réservez — l'entreprise confirme et vous contacte directement.",
+      searchTitle: 'Trouver un véhicule',
+      pickupLocation: 'Lieu de départ',
+      dropoffLocation: "Lieu de retour",
+      sameDropoff: 'Même retour',
+      differentDropoff: 'Retour différent',
+      sameAsPickup: 'Retour au même lieu',
+      pickupDate: 'Date de départ',
+      returnDate: 'Date de retour',
+      hour: 'Heure',
+      promoCode: "J'ai un code promo",
+      myAge: 'Mon âge',
+      ageDescription: "L'âge du conducteur peut influencer la disponibilité, le dépôt de garantie et le prix final.",
+      ageOptions: ['18+', '21+', '23+', '25+', '30+'],
+      search: 'Rechercher',
+      currentDeals: 'Offres du moment',
+      featuredOffers: 'Offres marketplace mises en avant',
+      company: 'Entreprise',
+      validUntil: "Valable jusqu'au",
+      offersUnavailable: 'Les offres marketplace sont indisponibles pour le moment.',
+      availableVehicles: 'Véhicules disponibles',
+      listings: 'annonces',
+      rentalCompany: 'Société de location',
+      checkAvailability: 'Vérifier la disponibilité',
+      available: 'Disponible',
+      reserved: 'Réservé',
+      maintenance: 'En maintenance',
+      unavailableStatus: 'Indisponible',
+      from: 'À partir de',
+      viewVehicle: 'Voir le véhicule',
+      availableFrom: 'Disponible à partir du',
+      unavailableNoDate: 'Ce véhicule est temporairement indisponible pour les nouvelles réservations.',
+      vehicleUnavailable: 'Les annonces véhicules sont indisponibles pour le moment.',
+      browseByCategory: 'Parcourir par catégorie',
+      browseByCompany: 'Parcourir par entreprise',
+      marketplacePartners: 'Partenaires marketplace',
+      marketplacePartner: 'Partenaire marketplace',
+      rating: 'Note',
+      new: 'Nouveau',
+      publishedVehicles: 'véhicules publiés',
+      viewFleet: 'Voir la flotte',
+      categories: ['Économie', 'Compacte', 'Intermédiaire', 'Grande berline', 'SUV', 'Luxe', 'Van', 'Camion'],
+    },
+    ar: {
+      kicker: 'للاستكشاف فقط',
+      title: 'اعثر على سيارتك القادمة من شركات محلية موثوقة.',
+      body: 'تصفّح وابحث واحجز — تؤكد الشركة وتتواصل معك مباشرةً.',
+      searchTitle: 'احجز سيارة',
+      pickupLocation: 'موقع الاستلام',
+      dropoffLocation: 'موقع الإرجاع',
+      sameDropoff: 'نفس موقع الإرجاع',
+      differentDropoff: 'موقع إرجاع مختلف',
+      sameAsPickup: 'الإرجاع في نفس موقع الاستلام',
+      pickupDate: 'تاريخ البدء',
+      returnDate: 'تاريخ الإرجاع',
+      hour: 'الساعة',
+      promoCode: 'لدي رمز ترويجي',
+      myAge: 'عمري',
+      ageDescription: 'قد يؤثر عمر السائق على التوفر ومبلغ التأمين والسعر النهائي.',
+      ageOptions: ['18+', '21+', '23+', '25+', '30+'],
+      search: 'بحث',
+      currentDeals: 'العروض الحالية',
+      featuredOffers: 'عروض السوق المميزة',
+      company: 'شركة',
+      validUntil: 'صالح حتى',
+      offersUnavailable: 'عروض السوق غير متاحة حالياً.',
+      availableVehicles: 'السيارات المتاحة',
+      listings: 'إعلانات',
+      rentalCompany: 'شركة تأجير',
+      checkAvailability: 'تحقق من التوفر',
+      available: 'متاح',
+      reserved: 'محجوز',
+      maintenance: 'قيد الصيانة',
+      unavailableStatus: 'غير متاح',
+      from: 'ابتداءً من',
+      viewVehicle: 'عرض السيارة',
+      availableFrom: 'متاح ابتداءً من',
+      unavailableNoDate: 'هذه السيارة غير متاحة مؤقتاً للحجوزات الجديدة.',
+      vehicleUnavailable: 'قوائم السيارات غير متاحة حالياً.',
+      browseByCategory: 'تصفح حسب الفئة',
+      browseByCompany: 'تصفح حسب الشركة',
+      marketplacePartners: 'شركاء السوق',
+      marketplacePartner: 'شريك في السوق',
+      rating: 'التقييم',
+      new: 'جديد',
+      publishedVehicles: 'سيارات منشورة',
+      viewFleet: 'عرض الأسطول',
+      categories: ['اقتصادية', 'مدمجة', 'متوسطة', 'كبيرة', 'SUV', 'فاخرة', 'فان', 'شاحنة'],
+    },
+  }[language]
+
+  const city = typeof resolvedSearchParams?.city === 'string' ? resolvedSearchParams.city : ''
+  const pickupLocation = typeof resolvedSearchParams?.pickupLocation === 'string' ? resolvedSearchParams.pickupLocation : city
+  const dropoffLocation = typeof resolvedSearchParams?.dropoffLocation === 'string' ? resolvedSearchParams.dropoffLocation : ''
+  const dropoffMode = resolvedSearchParams?.dropoffMode === 'different' ? 'different' : 'same'
+  const pickupDate = typeof resolvedSearchParams?.pickupDate === 'string' ? resolvedSearchParams.pickupDate : ''
+  const pickupTime = typeof resolvedSearchParams?.pickupTime === 'string' ? resolvedSearchParams.pickupTime : '10:00'
+  const returnDate = typeof resolvedSearchParams?.returnDate === 'string' ? resolvedSearchParams.returnDate : ''
+  const returnTime = typeof resolvedSearchParams?.returnTime === 'string' ? resolvedSearchParams.returnTime : '10:00'
+  const promoCode = typeof resolvedSearchParams?.promoCode === 'string' ? resolvedSearchParams.promoCode : ''
+  const driverAge = typeof resolvedSearchParams?.driverAge === 'string' ? resolvedSearchParams.driverAge : '23+'
+  const category = typeof resolvedSearchParams?.category === 'string' ? resolvedSearchParams.category : ''
+  const transmission = typeof resolvedSearchParams?.transmission === 'string' ? resolvedSearchParams.transmission : ''
+  const make = typeof resolvedSearchParams?.make === 'string' ? resolvedSearchParams.make : ''
+  const model = typeof resolvedSearchParams?.model === 'string' ? resolvedSearchParams.model : ''
+  const startDate = typeof resolvedSearchParams?.startDate === 'string' ? resolvedSearchParams.startDate : ''
+  const endDate = typeof resolvedSearchParams?.endDate === 'string' ? resolvedSearchParams.endDate : ''
+
+  const query = new URLSearchParams()
+  if (pickupLocation) query.set('city', pickupLocation)
+  if (pickupLocation) query.set('pickupLocation', pickupLocation)
+  query.set('dropoffMode', dropoffMode)
+  if (dropoffMode === 'different' && dropoffLocation) query.set('dropoffLocation', dropoffLocation)
+  if (startDate) query.set('startDate', startDate)
+  if (endDate) query.set('endDate', endDate)
+  if (category) query.set('category', category)
+  if (transmission) query.set('transmission', transmission)
+  if (make) query.set('make', make)
+  if (model) query.set('model', model)
+  query.set('pageSize', '24')
+
+  const [offers, vehicles, companies] = await Promise.all([
+    marketplaceFetchOrDefault<Offer[]>('/marketplace/offers', []),
+    marketplaceFetchOrDefault<Vehicle[]>(`/marketplace/search?${query.toString()}`, []),
+    marketplaceFetchOrDefault<CompanyCard[]>('/marketplace/companies?pageSize=8', []),
+  ])
+  const cities = Array.from(
+    new Set(
+      companies
+        .map((company) => company.brand?.publicCity?.trim())
+        .filter((city): city is string => Boolean(city))
+    )
+  ).sort((left, right) => left.localeCompare(right))
+
+  return (
+    <main className="site-page">
+      <div className="site-section space-y-10">
+        <section className="site-panel-contrast bg-[linear-gradient(135deg,#0f2460,#1a3a8f)] dark:bg-[linear-gradient(135deg,#0a1735,#112d6e)] px-8 py-12">
+          <p className="site-kicker text-orange-300 dark:text-orange-300">{dict.kicker}</p>
+          <h1 className="mt-4 text-4xl font-black tracking-tight">{dict.title}</h1>
+          <p className="mt-4 max-w-2xl text-blue-100 dark:text-blue-100">{dict.body}</p>
+          <ExploreSearchForm
+            pickupLocation={pickupLocation}
+            dropoffLocation={dropoffLocation}
+            dropoffMode={dropoffMode}
+            pickupDate={pickupDate}
+            pickupTime={pickupTime}
+            returnDate={returnDate}
+            returnTime={returnTime}
+            promoCode={promoCode}
+            driverAge={driverAge}
+            cities={cities}
+            dict={dict}
+          />
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.currentDeals}</h2>
+            <p className="text-sm text-stone-500 dark:text-stone-400">{dict.featuredOffers}</p>
+          </div>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {offers.map((offer) => (
+              <Link key={offer.id} href={`/explore/${offer.company.brand?.subdomain ?? ''}#offers`} className="card flex flex-col p-5 transition-colors hover:border-orange-300 dark:hover:border-orange-500">
+                <p className="truncate text-xs uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{offer.company.brand?.displayName ?? dict.company}</p>
+                <h3 className="mt-3 truncate text-lg font-semibold text-stone-900 dark:text-stone-100">{offer.title}</h3>
+                <p className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{offer.discountValue}%</p>
+                <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.validUntil} {new Date(offer.validUntil).toLocaleDateString()}</p>
+              </Link>
+            ))}
+            {offers.length === 0 && <div className="card p-6 text-sm text-stone-500 dark:text-stone-400 md:col-span-2 xl:col-span-4">{dict.offersUnavailable}</div>}
+          </div>
+        </section>
+
+        <ExploreVehicleGrid vehicles={vehicles} dict={dict} language={language} />
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.browseByCategory}</h2>
+          <div className="mt-4 flex flex-wrap gap-3">
+            {dict.categories.map((categoryName, index) => (
+              <Link key={CATEGORY_VALUES[index] ?? categoryName} href={`/explore?category=${CATEGORY_VALUES[index]}`} className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-stone-400 dark:border-blue-800 dark:bg-blue-950 dark:text-stone-300 dark:hover:border-stone-500">
+                {categoryName}
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.browseByCompany}</h2>
+            <p className="text-sm text-stone-500 dark:text-stone-400">{dict.marketplacePartners}</p>
+          </div>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {companies.map((company) => (
+              <Link key={company.id} href={`/explore/${company.brand?.subdomain ?? ''}`} className="card flex flex-col p-5 transition-colors hover:border-orange-300 dark:hover:border-orange-500">
+                <p className="truncate text-xs uppercase tracking-[0.18em] text-stone-500 dark:text-stone-400">{company.brand?.publicCity ?? dict.marketplacePartner}</p>
+                <h3 className="mt-3 truncate text-lg font-semibold text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? dict.rentalCompany}</h3>
+                <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.rating} {company.brand?.marketplaceRating?.toFixed(1) ?? dict.new}</p>
+                <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{company._count.vehicles} {dict.publishedVehicles}</p>
+                <span className="mt-4 inline-flex self-start rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white dark:bg-orange-500 dark:text-white">{dict.viewFleet}</span>
+              </Link>
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/homepage/src/app/(public)/footer/[slug]/page.test.ts b/storefront/src/app/(public)/footer/[slug]/page.test.ts
similarity index 100%
rename from apps/homepage/src/app/(public)/footer/[slug]/page.test.ts
rename to storefront/src/app/(public)/footer/[slug]/page.test.ts
diff --git a/apps/homepage/src/app/(public)/footer/[slug]/page.tsx b/storefront/src/app/(public)/footer/[slug]/page.tsx
similarity index 100%
rename from apps/homepage/src/app/(public)/footer/[slug]/page.tsx
rename to storefront/src/app/(public)/footer/[slug]/page.tsx
diff --git a/storefront/src/app/(public)/layout.tsx b/storefront/src/app/(public)/layout.tsx
new file mode 100644
index 0000000..5bbcb07
--- /dev/null
+++ b/storefront/src/app/(public)/layout.tsx
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+import SitePageLayout from '@/components/public/SitePageLayout'
+
+export default function PublicLayout({ children }: { children: ReactNode }) {
+  return <SitePageLayout>{children}</SitePageLayout>
+}
diff --git a/storefront/src/app/(public)/page.tsx b/storefront/src/app/(public)/page.tsx
new file mode 100644
index 0000000..b227514
--- /dev/null
+++ b/storefront/src/app/(public)/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function StorefrontHomePage() {
+  redirect('/explore')
+}
diff --git a/storefront/src/app/globals.css b/storefront/src/app/globals.css
new file mode 100644
index 0000000..ef5ae67
--- /dev/null
+++ b/storefront/src/app/globals.css
@@ -0,0 +1,293 @@
+@import "../styles/phase16-tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
+}
+
+html.dark body {
+  background-image:
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+}
+
+.shell {
+  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
+.card {
+  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
+  border-color: rgb(231 229 228 / 0.8);
+  background-color: rgb(255 255 255 / 0.82);
+}
+
+html.dark .card {
+  border-color: rgb(30 60 140 / 0.40);
+  background-color: rgb(11 25 55 / 0.72);
+}
+
+.site-page {
+  @apply min-h-screen overflow-hidden text-blue-950;
+  background-image:
+    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+}
+
+html.dark .site-page {
+  @apply text-slate-100;
+  background-image:
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+}
+
+.site-glow {
+  background-image:
+    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
+    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
+}
+
+html.dark .site-glow {
+  background-image:
+    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
+    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
+}
+
+.site-section {
+  @apply shell py-10 sm:py-14 lg:py-16;
+}
+
+.site-panel {
+  @apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
+  border-color: rgb(231 229 228 / 0.8);
+  background-color: rgb(255 255 255 / 0.82);
+}
+
+html.dark .site-panel {
+  border-color: rgb(30 60 140 / 0.40);
+  background-color: rgb(11 25 55 / 0.72);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
+}
+
+.site-panel-muted {
+  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
+  border-color: rgb(231 229 228 / 0.8);
+  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
+}
+
+html.dark .site-panel-muted {
+  border-color: rgb(30 60 140 / 0.40);
+  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
+}
+
+.site-panel-contrast {
+  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
+  border-color: rgb(14 40 90 / 0.8);
+  background-color: rgb(10 25 75);
+}
+
+html.dark .site-panel-contrast {
+  border-color: rgb(30 64 175);
+}
+
+.site-kicker {
+  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
+}
+
+.site-title {
+  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
+}
+
+.site-lead {
+  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
+}
+
+.site-link-primary {
+  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
+}
+
+.site-link-secondary {
+  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
+}
+
+/* Phase 16 operational application layer */
+@layer base {
+  html {
+    min-width: 320px;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    scroll-behavior: smooth;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--rdg-surface-page);
+    color: var(--rdg-text-primary);
+    font-family: var(--rdg-font-latin);
+    line-height: 1.6;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--rdg-text-primary);
+    line-height: 1.18;
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  a,
+  button,
+  input,
+  select,
+  textarea {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+@layer components {
+  .shell {
+    width: min(100%, var(--rdg-container-max));
+  }
+
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+    box-shadow: var(--rdg-shadow-card);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+  }
+
+  .site-panel-muted {
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-lg);
+    background: var(--rdg-surface-muted);
+  }
+
+  .site-panel-contrast {
+    border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
+    border-radius: var(--rdg-radius-lg);
+    background:
+      radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
+      linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
+  }
+
+  .btn-primary,
+  .site-link-primary {
+    min-height: var(--rdg-touch-min);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-action-conversion);
+    color: #ffffff;
+    box-shadow: var(--rdg-shadow-subtle);
+  }
+
+  .btn-primary:hover,
+  .site-link-primary:hover {
+    background: var(--rdg-action-conversion-hover);
+  }
+
+  .btn-secondary,
+  .site-link-secondary {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border-strong);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-action-primary);
+  }
+
+  .btn-secondary:hover,
+  .site-link-secondary:hover {
+    border-color: var(--rdg-action-primary);
+    background: var(--rdg-soft-blue);
+    color: var(--rdg-action-primary-hover);
+  }
+
+  .input-field,
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  select,
+  textarea {
+    min-height: var(--rdg-touch-min);
+    border-color: var(--rdg-border);
+    border-radius: var(--rdg-radius-sm);
+    background: var(--rdg-surface-primary);
+    color: var(--rdg-text-primary);
+  }
+
+  .input-field::placeholder,
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--rdg-text-subdued);
+  }
+
+  table {
+    border-color: var(--rdg-border);
+  }
+
+  thead {
+    background: var(--rdg-surface-muted);
+    color: var(--rdg-text-secondary);
+  }
+
+  tbody tr {
+    border-color: var(--rdg-border);
+  }
+}
+
+@media (forced-colors: active) {
+  .panel,
+  .card,
+  .glass-card,
+  .site-panel,
+  .site-panel-muted,
+  .site-panel-contrast {
+    border: 1px solid CanvasText;
+    box-shadow: none;
+  }
+}
+
+html.dark body,
+html[data-theme='dark'] body,
+.site-page,
+html.dark .site-page,
+html[data-theme='dark'] .site-page {
+  background:
+    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--rdg-soft-blue) 78%, transparent), transparent 30%),
+    var(--rdg-surface-page);
+  color: var(--rdg-text-primary);
+}
+
+.site-glow,
+html.dark .site-glow,
+html[data-theme='dark'] .site-glow {
+  background-image:
+    radial-gradient(circle at top left, color-mix(in srgb, var(--rdg-soft-orange) 72%, transparent), transparent 34%),
+    radial-gradient(circle at top right, color-mix(in srgb, var(--rdg-soft-blue) 72%, transparent), transparent 28%);
+}
+
+html.dark .card,
+html.dark .site-panel,
+html.dark .site-panel-muted,
+html[data-theme='dark'] .card,
+html[data-theme='dark'] .site-panel,
+html[data-theme='dark'] .site-panel-muted {
+  border-color: var(--rdg-border);
+  background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
+  box-shadow: var(--rdg-shadow-card);
+}
diff --git a/apps/homepage/src/app/layout.tsx b/storefront/src/app/layout.tsx
similarity index 97%
rename from apps/homepage/src/app/layout.tsx
rename to storefront/src/app/layout.tsx
index 56f0218..b138745 100644
--- a/apps/homepage/src/app/layout.tsx
+++ b/storefront/src/app/layout.tsx
@@ -5,7 +5,7 @@ import { getMarketplaceLanguage } from '@/lib/i18n.server'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'FleetOS Marketplace',
+  title: 'RentalDriveGo Marketplace',
   description: 'Discover vehicles from trusted rental companies.',
   icons: {
     icon: '/rentalcardrive.png',
diff --git a/storefront/src/app/renter/dashboard/page.tsx b/storefront/src/app/renter/dashboard/page.tsx
new file mode 100644
index 0000000..68f6567
--- /dev/null
+++ b/storefront/src/app/renter/dashboard/page.tsx
@@ -0,0 +1,304 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+
+interface SavedCompany {
+  id: string
+  brand?: {
+    displayName: string
+    subdomain: string
+    logoUrl?: string | null
+  } | null
+}
+
+interface RenterProfile {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string | null
+  savedCompanies?: SavedCompany[]
+}
+
+type Status = 'loading' | 'ready' | 'error'
+
+export default function RenterDashboardPage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      loadProfile: 'Could not load profile.',
+      reachServer: 'Could not reach the server.',
+      backToExplore: 'Back to explore',
+      renterDashboard: 'Renter Dashboard',
+      welcome: 'Welcome back,',
+      exploreVehicles: 'Explore vehicles',
+      logout: 'Log out',
+      cards: [
+        ['Profile', 'Review your account details and preferences.'],
+        ['Saved companies', 'Jump back into companies you bookmarked.'],
+        ['Notifications', 'See booking updates and in-app alerts.'],
+      ],
+      yourProfile: 'Your profile',
+      firstName: 'First name',
+      lastName: 'Last name',
+      email: 'Email',
+      phone: 'Phone',
+      savedCompanies: 'Saved companies',
+      noneSaved: 'None saved yet',
+      saved: 'saved',
+      saveCompaniesPrompt: 'Save companies you like while browsing the marketplace.',
+      startExploring: 'Start exploring',
+      rentalCompany: 'Rental company',
+    },
+    fr: {
+      loadProfile: 'Impossible de charger le profil.',
+      reachServer: 'Impossible de joindre le serveur.',
+      backToExplore: 'Retour à l’exploration',
+      renterDashboard: 'Espace client',
+      welcome: 'Bon retour,',
+      exploreVehicles: 'Explorer les véhicules',
+      logout: 'Déconnexion',
+      cards: [
+        ['Profil', 'Consultez vos informations et préférences.'],
+        ['Entreprises sauvegardées', 'Revenez vers les entreprises que vous avez enregistrées.'],
+        ['Notifications', 'Consultez les mises à jour de réservation et les alertes.'],
+      ],
+      yourProfile: 'Votre profil',
+      firstName: 'Prénom',
+      lastName: 'Nom',
+      email: 'E-mail',
+      phone: 'Téléphone',
+      savedCompanies: 'Entreprises sauvegardées',
+      noneSaved: 'Aucune pour le moment',
+      saved: 'sauvegardées',
+      saveCompaniesPrompt: 'Enregistrez les entreprises que vous aimez en parcourant la marketplace.',
+      startExploring: 'Commencer à explorer',
+      rentalCompany: 'Société de location',
+    },
+    ar: {
+      loadProfile: 'تعذر تحميل الملف الشخصي.',
+      reachServer: 'تعذر الوصول إلى الخادم.',
+      backToExplore: 'العودة إلى الاستكشاف',
+      renterDashboard: 'بوابة المستأجر',
+      welcome: 'مرحباً بعودتك،',
+      exploreVehicles: 'استكشف السيارات',
+      logout: 'تسجيل الخروج',
+      cards: [
+        ['الملف الشخصي', 'راجع بيانات حسابك وتفضيلاتك.'],
+        ['الشركات المحفوظة', 'ارجع بسرعة إلى الشركات التي حفظتها.'],
+        ['الإشعارات', 'اطلع على تحديثات الحجز والتنبيهات داخل التطبيق.'],
+      ],
+      yourProfile: 'ملفك الشخصي',
+      firstName: 'الاسم الأول',
+      lastName: 'اسم العائلة',
+      email: 'البريد الإلكتروني',
+      phone: 'الهاتف',
+      savedCompanies: 'الشركات المحفوظة',
+      noneSaved: 'لا يوجد شيء محفوظ بعد',
+      saved: 'محفوظة',
+      saveCompaniesPrompt: 'احفظ الشركات التي تعجبك أثناء تصفح السوق.',
+      startExploring: 'ابدأ الاستكشاف',
+      rentalCompany: 'شركة تأجير',
+    },
+  }[language]
+
+  const [profile, setProfile] = useState<RenterProfile | null>(null)
+  const [status, setStatus]   = useState<Status>('loading')
+  const [errorMsg, setErrorMsg] = useState('')
+
+  useEffect(() => {
+    fetch(`${API_BASE}/auth/renter/me`, {
+      credentials: 'include',
+    })
+      .then(async (res) => {
+        const json = await res.json().catch(() => null)
+        if (!res.ok) {
+          if (res.status === 401) {
+            void fetch(`${API_BASE}/auth/renter/logout`, { method: 'POST', credentials: 'include' })
+            router.replace('/')
+          } else {
+            setErrorMsg(json?.message ?? dict.loadProfile)
+            setStatus('error')
+          }
+          return
+        }
+        setProfile(json?.data ?? json)
+        setStatus('ready')
+      })
+      .catch(() => {
+        setErrorMsg(dict.reachServer)
+        setStatus('error')
+      })
+  }, [router])
+
+  if (status === 'loading') {
+    return (
+      <div className="shell">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 w-48 rounded-xl bg-stone-200" />
+          <div className="h-40 rounded-2xl bg-stone-200" />
+          <div className="h-40 rounded-2xl bg-stone-200" />
+        </div>
+      </div>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="shell">
+        <div className="card p-8 text-center">
+          <p className="text-sm text-rose-600">{errorMsg}</p>
+          <Link
+            href="/explore"
+            className="mt-4 inline-flex rounded-full bg-orange-600 px-6 py-2.5 text-sm font-semibold text-white"
+          >
+            {dict.backToExplore}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const savedCompanies = profile?.savedCompanies ?? []
+
+  return (
+    <div className="shell space-y-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-orange-700">
+            {dict.renterDashboard}
+          </p>
+          <h1 className="mt-1 text-3xl font-black tracking-tight text-blue-900">
+            {dict.welcome} {profile?.firstName}
+          </h1>
+        </div>
+        <Link
+          href="/explore"
+          className="self-start rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700 shadow-sm hover:border-stone-300"
+        >
+          {dict.exploreVehicles}
+        </Link>
+      </div>
+
+        <section className="grid gap-4 sm:grid-cols-3">
+          {[
+            { href: '/renter/profile', label: dict.cards[0][0], copy: dict.cards[0][1] },
+            { href: '/renter/saved-companies', label: dict.cards[1][0], copy: dict.cards[1][1] },
+            { href: '/renter/notifications', label: dict.cards[2][0], copy: dict.cards[2][1] },
+          ].map((item) => (
+            <Link key={item.href} href={item.href} className="card p-5 hover:border-orange-300 transition-colors">
+              <p className="text-sm font-semibold text-blue-900">{item.label}</p>
+              <p className="mt-2 text-sm leading-6 text-stone-500">{item.copy}</p>
+            </Link>
+          ))}
+        </section>
+
+        {/* Profile card */}
+        <section className="card p-8">
+          <h2 className="text-lg font-bold text-blue-900">{dict.yourProfile}</h2>
+          <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {[
+              { label: dict.firstName,  value: profile?.firstName },
+              { label: dict.lastName,   value: profile?.lastName  },
+              { label: dict.email,       value: profile?.email     },
+              { label: dict.phone,       value: profile?.phone ?? '—' },
+            ].map(({ label, value }) => (
+              <div key={label}>
+                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">
+                  {label}
+                </p>
+                <p className="mt-1.5 text-sm font-medium text-blue-900 break-all">
+                  {value}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Saved companies */}
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-blue-900">{dict.savedCompanies}</h2>
+            <p className="text-sm text-stone-500">
+              {savedCompanies.length === 0
+                ? dict.noneSaved
+                : `${savedCompanies.length} ${dict.saved}`}
+            </p>
+          </div>
+
+          {savedCompanies.length === 0 ? (
+            <div className="card mt-4 flex flex-col items-center gap-4 py-16 text-center">
+              <svg
+                className="h-10 w-10 text-stone-300"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={1.5}
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
+                />
+              </svg>
+              <p className="text-sm text-stone-500">
+                {dict.saveCompaniesPrompt}
+              </p>
+              <Link
+                href="/explore"
+                className="rounded-full bg-orange-600 px-6 py-2.5 text-sm font-semibold text-white hover:bg-orange-700"
+              >
+                {dict.startExploring}
+              </Link>
+            </div>
+          ) : (
+            <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {savedCompanies.map((company) => (
+                <Link
+                  key={company.id}
+                  href={`/explore/${company.brand?.subdomain ?? company.id}`}
+                  className="card flex items-center gap-4 p-5 hover:border-orange-300 transition-colors"
+                >
+                  {company.brand?.logoUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={company.brand.logoUrl}
+                      alt={company.brand.displayName}
+                      className="h-10 w-10 rounded-lg object-contain"
+                    />
+                  ) : (
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100 text-orange-700 font-bold text-sm">
+                      {company.brand?.displayName?.charAt(0) ?? '?'}
+                    </div>
+                  )}
+                  <div className="min-w-0">
+                    <p className="truncate font-semibold text-blue-900">
+                      {company.brand?.displayName ?? dict.rentalCompany}
+                    </p>
+                    <p className="mt-0.5 text-xs text-stone-400">
+                      {company.brand?.subdomain ?? ''}
+                    </p>
+                  </div>
+                  <svg
+                    className="ml-auto h-4 w-4 shrink-0 text-stone-400"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  </svg>
+                </Link>
+              ))}
+            </div>
+          )}
+        </section>
+    </div>
+  )
+}
diff --git a/storefront/src/app/renter/layout.tsx b/storefront/src/app/renter/layout.tsx
new file mode 100644
index 0000000..19b0d61
--- /dev/null
+++ b/storefront/src/app/renter/layout.tsx
@@ -0,0 +1,5 @@
+import RenterShell from '@/components/RenterShell'
+
+export default function RenterLayout({ children }: { children: React.ReactNode }) {
+  return <RenterShell>{children}</RenterShell>
+}
diff --git a/storefront/src/app/renter/notifications/page.tsx b/storefront/src/app/renter/notifications/page.tsx
new file mode 100644
index 0000000..d4def24
--- /dev/null
+++ b/storefront/src/app/renter/notifications/page.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  RenterAuthError,
+  loadRenterNotifications,
+  markAllRenterNotificationsRead,
+  markRenterNotificationRead,
+  type RenterNotification,
+} from '@/lib/renter'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+export default function RenterNotificationsPage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      load: 'Could not load notifications.',
+      updateOne: 'Could not update the notification.',
+      updateAll: 'Could not update notifications.',
+      renter: 'Renter',
+      title: 'Notifications',
+      markAll: 'Mark all read',
+      back: 'Back to dashboard',
+      loading: 'Loading notifications…',
+      empty: 'No renter notifications yet.',
+      read: 'Read',
+      markRead: 'Mark read',
+    },
+    fr: {
+      load: 'Impossible de charger les notifications.',
+      updateOne: 'Impossible de mettre à jour la notification.',
+      updateAll: 'Impossible de mettre à jour les notifications.',
+      renter: 'Client',
+      title: 'Notifications',
+      markAll: 'Tout marquer comme lu',
+      back: 'Retour au tableau de bord',
+      loading: 'Chargement des notifications…',
+      empty: 'Aucune notification client pour le moment.',
+      read: 'Lu',
+      markRead: 'Marquer comme lu',
+    },
+    ar: {
+      load: 'تعذر تحميل الإشعارات.',
+      updateOne: 'تعذر تحديث الإشعار.',
+      updateAll: 'تعذر تحديث الإشعارات.',
+      renter: 'المستأجر',
+      title: 'الإشعارات',
+      markAll: 'تعيين الكل كمقروء',
+      back: 'العودة إلى بوابة المستأجر',
+      loading: 'جارٍ تحميل الإشعارات…',
+      empty: 'لا توجد إشعارات للمستأجر حالياً.',
+      read: 'مقروء',
+      markRead: 'تعيين كمقروء',
+    },
+  }[language]
+  const [notifications, setNotifications] = useState<RenterNotification[]>([])
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [updating, setUpdating] = useState(false)
+
+  useEffect(() => {
+    loadRenterNotifications()
+      .then((items) => setNotifications(items))
+      .catch((err) => {
+        if (err instanceof RenterAuthError) {
+          router.replace('/')
+          return
+        }
+        setErrorMsg(err instanceof Error ? err.message : dict.load)
+      })
+      .finally(() => setLoading(false))
+  }, [router])
+
+  async function markRead(id: string) {
+    setUpdating(true)
+    try {
+      await markRenterNotificationRead(id)
+      setNotifications((current) =>
+        current.map((item) => (item.id === id ? { ...item, readAt: item.readAt ?? new Date().toISOString() } : item)),
+      )
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : dict.updateOne)
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  async function markAllRead() {
+    setUpdating(true)
+    try {
+      await markAllRenterNotificationsRead()
+      setNotifications((current) => current.map((item) => ({ ...item, readAt: item.readAt ?? new Date().toISOString() })))
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : dict.updateAll)
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  return (
+    <div className="shell space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <h1 className="text-3xl font-black tracking-tight text-blue-900">{dict.title}</h1>
+        <button
+          type="button"
+          onClick={markAllRead}
+          disabled={loading || updating}
+          className="rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700"
+        >
+          {dict.markAll}
+        </button>
+      </div>
+
+      {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
+      {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}
+
+      {!loading && !errorMsg && notifications.length === 0 ? (
+        <div className="card p-10 text-center text-sm text-stone-500">{dict.empty}</div>
+      ) : null}
+
+      {!loading && !errorMsg && notifications.length > 0 ? (
+        <div className="space-y-4">
+          {notifications.map((notification) => (
+            <article key={notification.id} className="card p-6">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-orange-700">{notification.type.replaceAll('_', ' ')}</p>
+                  <h2 className="mt-2 text-lg font-bold text-blue-900">{notification.title}</h2>
+                </div>
+                {notification.readAt ? (
+                  <span className="rounded-full bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-600">{dict.read}</span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => markRead(notification.id)}
+                    disabled={updating}
+                    className="rounded-full bg-orange-100 px-3 py-1 text-xs font-semibold text-orange-800"
+                  >
+                    {dict.markRead}
+                  </button>
+                )}
+              </div>
+              <p className="mt-3 text-sm leading-7 text-stone-600">{notification.body}</p>
+              <p className="mt-4 text-xs text-stone-400">{new Date(notification.createdAt).toLocaleString()}</p>
+            </article>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/storefront/src/app/renter/profile/page.tsx b/storefront/src/app/renter/profile/page.tsx
new file mode 100644
index 0000000..95abee5
--- /dev/null
+++ b/storefront/src/app/renter/profile/page.tsx
@@ -0,0 +1,318 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  RenterAuthError,
+  clearRenterSession,
+  loadRenterPreferences,
+  loadRenterProfile,
+  updateRenterPreferences,
+  updateRenterProfile,
+  type RenterPreference,
+  type RenterProfile,
+} from '@/lib/renter'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+type Status = 'loading' | 'ready' | 'error'
+const RENTER_EVENTS = ['BOOKING_CONFIRMED', 'BOOKING_REMINDER', 'RETURN_REMINDER', 'REFUND_ISSUED', 'NEW_OFFER']
+const RENTER_CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'PUSH', 'IN_APP']
+
+export default function RenterProfilePage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      profile: 'Profile',
+      loading: 'Loading profile…',
+      loadFailed: 'Could not load profile.',
+      yourProfile: 'Your profile',
+      firstName: 'First name',
+      lastName: 'Last name',
+      email: 'Email',
+      phone: 'Phone',
+      locale: 'Locale',
+      currency: 'Currency',
+      saving: 'Saving…',
+      saveProfile: 'Save profile',
+      verification: 'Verification',
+      verified: 'Email verified',
+      pending: 'Email verification is still pending.',
+      notificationPrefs: 'Notification preferences',
+      notificationBody: 'Choose how reminders, offers, and booking updates reach you.',
+      savePreferences: 'Save preferences',
+      event: 'Event',
+      back: 'Back to dashboard',
+      savedCompanies: 'Saved companies',
+      notifications: 'Notifications',
+      logout: 'Log out',
+      renter: 'Renter',
+      saveFailed: 'Could not save profile.',
+      prefFailed: 'Could not save preferences.',
+    },
+    fr: {
+      profile: 'Profil',
+      loading: 'Chargement du profil…',
+      loadFailed: 'Impossible de charger le profil.',
+      yourProfile: 'Votre profil',
+      firstName: 'Prénom',
+      lastName: 'Nom',
+      email: 'Email',
+      phone: 'Téléphone',
+      locale: 'Langue',
+      currency: 'Devise',
+      saving: 'Enregistrement…',
+      saveProfile: 'Enregistrer le profil',
+      verification: 'Vérification',
+      verified: 'Email vérifié',
+      pending: 'La vérification de l’email est encore en attente.',
+      notificationPrefs: 'Préférences de notification',
+      notificationBody: 'Choisissez comment les rappels, offres et mises à jour vous parviennent.',
+      savePreferences: 'Enregistrer les préférences',
+      event: 'Événement',
+      back: 'Retour au dashboard',
+      savedCompanies: 'Entreprises sauvegardées',
+      notifications: 'Notifications',
+      logout: 'Déconnexion',
+      renter: 'Client',
+      saveFailed: 'Impossible d’enregistrer le profil.',
+      prefFailed: 'Impossible d’enregistrer les préférences.',
+    },
+    ar: {
+      profile: 'الملف الشخصي',
+      loading: 'جارٍ تحميل الملف الشخصي…',
+      loadFailed: 'تعذر تحميل الملف الشخصي.',
+      yourProfile: 'ملفك الشخصي',
+      firstName: 'الاسم الأول',
+      lastName: 'اسم العائلة',
+      email: 'البريد الإلكتروني',
+      phone: 'الهاتف',
+      locale: 'اللغة',
+      currency: 'العملة',
+      saving: 'جارٍ الحفظ…',
+      saveProfile: 'حفظ الملف الشخصي',
+      verification: 'التحقق',
+      verified: 'تم التحقق من البريد الإلكتروني',
+      pending: 'التحقق من البريد الإلكتروني ما زال قيد الانتظار.',
+      notificationPrefs: 'تفضيلات الإشعارات',
+      notificationBody: 'اختر كيف تصلك التذكيرات والعروض وتحديثات الحجز.',
+      savePreferences: 'حفظ التفضيلات',
+      event: 'الحدث',
+      back: 'العودة إلى اللوحة',
+      savedCompanies: 'الشركات المحفوظة',
+      notifications: 'الإشعارات',
+      logout: 'تسجيل الخروج',
+      renter: 'المستأجر',
+      saveFailed: 'تعذر حفظ الملف الشخصي.',
+      prefFailed: 'تعذر حفظ التفضيلات.',
+    },
+  }[language]
+  const [profile, setProfile] = useState<RenterProfile | null>(null)
+  const [preferences, setPreferences] = useState<Record<string, boolean>>({})
+  const [status, setStatus] = useState<Status>('loading')
+  const [errorMsg, setErrorMsg] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    Promise.all([loadRenterProfile(), loadRenterPreferences()])
+      .then(([profileData, preferenceData]) => {
+        setProfile(profileData)
+        setPreferences(
+          Object.fromEntries(
+            preferenceData.map((item) => [`${item.notificationType}:${item.channel}`, item.enabled]),
+          ),
+        )
+        setStatus('ready')
+      })
+      .catch((err) => {
+        if (err instanceof RenterAuthError) {
+          router.replace('/')
+          return
+        }
+        setErrorMsg(err instanceof Error ? err.message : dict.loadFailed)
+        setStatus('error')
+      })
+  }, [router])
+
+  if (status === 'loading') {
+    return <div className="shell"><div className="card p-8 text-sm text-stone-500">{dict.loading}</div></div>
+  }
+
+  if (status === 'error') {
+    return <div className="shell"><ErrorCard message={errorMsg} /></div>
+  }
+
+  return (
+    <div className="shell space-y-6">
+      <div className="card p-8">
+        <h1 className="text-3xl font-black tracking-tight text-blue-900">{dict.yourProfile}</h1>
+        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <EditableField label={dict.firstName} value={profile?.firstName ?? ''} onChange={(value) => setProfile((current) => current ? { ...current, firstName: value } : current)} />
+          <EditableField label={dict.lastName} value={profile?.lastName ?? ''} onChange={(value) => setProfile((current) => current ? { ...current, lastName: value } : current)} />
+          <Field label={dict.email} value={profile?.email} />
+          <EditableField label={dict.phone} value={profile?.phone ?? ''} onChange={(value) => setProfile((current) => current ? { ...current, phone: value } : current)} />
+          <SelectField
+            label={dict.locale}
+            value={profile?.preferredLocale || 'en'}
+            options={['en', 'fr', 'ar']}
+            onChange={(value) => setProfile((current) => current ? { ...current, preferredLocale: value } : current)}
+          />
+          <SelectField
+            label={dict.currency}
+            value="MAD"
+            options={['MAD']}
+            onChange={() => {}}
+          />
+        </div>
+        <div className="mt-8 flex justify-end">
+          <button
+            type="button"
+            onClick={async () => {
+              if (!profile) return
+              setSaving(true)
+              setErrorMsg('')
+              try {
+                const updated = await updateRenterProfile({
+                  firstName: profile.firstName,
+                  lastName: profile.lastName,
+                  phone: profile.phone,
+                  preferredLocale: profile.preferredLocale,
+                  preferredCurrency: profile.preferredCurrency,
+                })
+                setProfile(updated)
+              } catch (err) {
+                setErrorMsg(err instanceof Error ? err.message : dict.saveFailed)
+              } finally {
+                setSaving(false)
+              }
+            }}
+            className="rounded-full bg-orange-600 px-5 py-2 text-sm font-semibold text-white"
+          >
+            {saving ? dict.saving : dict.saveProfile}
+          </button>
+        </div>
+        <div className="mt-8 rounded-2xl border border-stone-200 bg-stone-50 p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-500">{dict.verification}</p>
+          <p className="mt-2 text-sm text-stone-700">
+            {profile?.emailVerified ? dict.verified : dict.pending}
+          </p>
+        </div>
+      </div>
+
+      <div className="card p-8">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <h2 className="text-2xl font-bold text-blue-900">{dict.notificationPrefs}</h2>
+            <p className="mt-2 text-sm text-stone-600">{dict.notificationBody}</p>
+          </div>
+          <button
+            type="button"
+            onClick={async () => {
+              setSaving(true)
+              setErrorMsg('')
+              try {
+                const payload: RenterPreference[] = Object.entries(preferences).map(([key, enabled]) => {
+                  const [notificationType, channel] = key.split(':')
+                  return { notificationType, channel, enabled }
+                })
+                await updateRenterPreferences(payload)
+              } catch (err) {
+                setErrorMsg(err instanceof Error ? err.message : dict.prefFailed)
+              } finally {
+                setSaving(false)
+              }
+            }}
+            className="rounded-full bg-orange-600 px-5 py-2 text-sm font-semibold text-white"
+          >
+            {saving ? dict.saving : dict.savePreferences}
+          </button>
+        </div>
+        <div className="mt-6 overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead className="bg-stone-50">
+              <tr>
+                <th className="px-4 py-3 text-left font-semibold text-stone-500">{dict.event}</th>
+                {RENTER_CHANNELS.map((channel) => (
+                  <th key={channel} className="px-4 py-3 text-center font-semibold text-stone-500">
+                    {channel}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {RENTER_EVENTS.map((eventName) => (
+                <tr key={eventName} className="border-t border-stone-100">
+                  <td className="px-4 py-3 font-medium text-blue-900">{eventName.replaceAll('_', ' ')}</td>
+                  {RENTER_CHANNELS.map((channel) => (
+                    <td key={`${eventName}-${channel}`} className="px-4 py-3 text-center">
+                      <input
+                        type="checkbox"
+                        checked={preferences[`${eventName}:${channel}`] ?? true}
+                        onChange={(event) =>
+                          setPreferences((current) => ({
+                            ...current,
+                            [`${eventName}:${channel}`]: event.target.checked,
+                          }))
+                        }
+                        className="h-4 w-4 rounded border-stone-300 text-orange-600"
+                      />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Field({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div>
+      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">{label}</p>
+      <p className="mt-2 text-sm font-medium text-blue-900 break-all">{value}</p>
+    </div>
+  )
+}
+
+function EditableField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
+  return (
+    <label className="block">
+      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">{label}</p>
+      <input
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="mt-2 w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-blue-900"
+      />
+    </label>
+  )
+}
+
+function SelectField({ label, value, options, onChange }: { label: string; value: string; options: string[]; onChange: (value: string) => void }) {
+  return (
+    <label className="block">
+      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">{label}</p>
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="mt-2 w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-blue-900"
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+function ErrorCard({ message }: { message: string }) {
+  return (
+    <div className="card p-8 text-center">
+      <p className="text-sm text-rose-600">{message}</p>
+    </div>
+  )
+}
diff --git a/storefront/src/app/renter/saved-companies/page.tsx b/storefront/src/app/renter/saved-companies/page.tsx
new file mode 100644
index 0000000..bed4cfe
--- /dev/null
+++ b/storefront/src/app/renter/saved-companies/page.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { RenterAuthError, loadRenterProfile, type SavedCompany } from '@/lib/renter'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+export default function RenterSavedCompaniesPage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      load: 'Could not load saved companies.',
+      renter: 'Renter',
+      title: 'Saved companies',
+      back: 'Back to dashboard',
+      loading: 'Loading saved companies…',
+      empty: 'You have not saved any companies yet.',
+      browse: 'Browse the marketplace',
+      rentalCompany: 'Rental company',
+    },
+    fr: {
+      load: 'Impossible de charger les entreprises sauvegardées.',
+      renter: 'Client',
+      title: 'Entreprises sauvegardées',
+      back: 'Retour au tableau de bord',
+      loading: 'Chargement des entreprises sauvegardées…',
+      empty: 'Vous n’avez encore enregistré aucune entreprise.',
+      browse: 'Parcourir la marketplace',
+      rentalCompany: 'Société de location',
+    },
+    ar: {
+      load: 'تعذر تحميل الشركات المحفوظة.',
+      renter: 'المستأجر',
+      title: 'الشركات المحفوظة',
+      back: 'العودة إلى بوابة المستأجر',
+      loading: 'جارٍ تحميل الشركات المحفوظة…',
+      empty: 'لم تقم بحفظ أي شركة بعد.',
+      browse: 'تصفح السوق',
+      rentalCompany: 'شركة تأجير',
+    },
+  }[language]
+  const [companies, setCompanies] = useState<SavedCompany[]>([])
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadRenterProfile()
+      .then((profile) => setCompanies(profile.savedCompanies ?? []))
+      .catch((err) => {
+        if (err instanceof RenterAuthError) {
+          router.replace('/')
+          return
+        }
+        setErrorMsg(err instanceof Error ? err.message : dict.load)
+      })
+      .finally(() => setLoading(false))
+  }, [router])
+
+  return (
+    <div className="shell space-y-6">
+      <h1 className="text-3xl font-black tracking-tight text-blue-900">{dict.title}</h1>
+
+      {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
+      {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}
+
+      {!loading && !errorMsg && companies.length === 0 ? (
+        <div className="card p-10 text-center">
+          <p className="text-sm text-stone-500">{dict.empty}</p>
+          <Link href="/explore" className="mt-5 inline-flex rounded-full bg-orange-600 px-6 py-2.5 text-sm font-semibold text-white">
+            {dict.browse}
+          </Link>
+        </div>
+      ) : null}
+
+      {!loading && !errorMsg && companies.length > 0 ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {companies.map((company) => (
+            <Link
+              key={company.id}
+              href={`/explore/${company.brand?.subdomain ?? company.id}`}
+              className="card flex items-center gap-4 p-5 hover:border-orange-300 transition-colors"
+            >
+              {company.brand?.logoUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={company.brand.logoUrl} alt={company.brand.displayName} className="h-11 w-11 rounded-xl object-contain" />
+              ) : (
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-orange-100 text-sm font-bold text-orange-700">
+                  {company.brand?.displayName?.charAt(0) ?? '?'}
+                </div>
+              )}
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold text-blue-900">{company.brand?.displayName ?? dict.rentalCompany}</p>
+                <p className="mt-1 truncate text-xs text-stone-400">{company.brand?.subdomain ?? company.id}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/storefront/src/app/renter/sign-in/page.tsx b/storefront/src/app/renter/sign-in/page.tsx
new file mode 100644
index 0000000..506429d
--- /dev/null
+++ b/storefront/src/app/renter/sign-in/page.tsx
@@ -0,0 +1,39 @@
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { resolveServerAppUrl } from '@/lib/appUrls'
+
+type SearchParams = Record<string, string | string[] | undefined>
+
+function buildSearch(params: SearchParams): string {
+  const nextParams = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === 'string') {
+      nextParams.set(key, value)
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      for (const entry of value) nextParams.append(key, entry)
+    }
+  }
+
+  const search = nextParams.toString()
+  return search ? `?${search}` : ''
+}
+
+export default async function RenterSignInPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const requestHeaders = await headers()
+  const dashboardUrl = resolveServerAppUrl(
+    process.env.NEXT_PUBLIC_HOMEPAGE_URL ?? 'http://localhost:3000',
+    requestHeaders.get('host'),
+    requestHeaders.get('x-forwarded-proto'),
+  )
+  const params = await searchParams
+
+  redirect(`${dashboardUrl}/sign-in${buildSearch(params)}`)
+}
diff --git a/storefront/src/app/renter/sign-up/page.tsx b/storefront/src/app/renter/sign-up/page.tsx
new file mode 100644
index 0000000..bc1f428
--- /dev/null
+++ b/storefront/src/app/renter/sign-up/page.tsx
@@ -0,0 +1,39 @@
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { resolveServerAppUrl } from '@/lib/appUrls'
+
+type SearchParams = Record<string, string | string[] | undefined>
+
+function buildSearch(params: SearchParams): string {
+  const nextParams = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === 'string') {
+      nextParams.set(key, value)
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      for (const entry of value) nextParams.append(key, entry)
+    }
+  }
+
+  const search = nextParams.toString()
+  return search ? `?${search}` : ''
+}
+
+export default async function RenterSignUpPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const requestHeaders = await headers()
+  const dashboardUrl = resolveServerAppUrl(
+    process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+    requestHeaders.get('host'),
+    requestHeaders.get('x-forwarded-proto'),
+  )
+  const params = await searchParams
+
+  redirect(`${dashboardUrl}/sign-up${buildSearch(params)}`)
+}
diff --git a/storefront/src/app/sign-in/page.tsx b/storefront/src/app/sign-in/page.tsx
new file mode 100644
index 0000000..9348c25
--- /dev/null
+++ b/storefront/src/app/sign-in/page.tsx
@@ -0,0 +1,40 @@
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { resolveServerAppUrl } from '@/lib/appUrls'
+
+type SearchParams = Record<string, string | string[] | undefined>
+
+function buildSearch(params: SearchParams): string {
+
+  const nextParams = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === 'string') {
+      nextParams.set(key, value)
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      for (const entry of value) nextParams.append(key, entry)
+    }
+  }
+
+  const search = nextParams.toString()
+  return search ? `?${search}` : ''
+}
+
+export default async function SignInPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const requestHeaders = await headers()
+  const dashboardUrl = resolveServerAppUrl(
+    process.env.NEXT_PUBLIC_HOMEPAGE_URL ?? 'http://localhost:3000',
+    requestHeaders.get('host'),
+    requestHeaders.get('x-forwarded-proto'),
+  )
+  const params = await searchParams
+
+  redirect(`${dashboardUrl}/sign-in${buildSearch(params)}`)
+}
diff --git a/storefront/src/components/BookingForm.boundary.test.ts b/storefront/src/components/BookingForm.boundary.test.ts
new file mode 100644
index 0000000..e531d53
--- /dev/null
+++ b/storefront/src/components/BookingForm.boundary.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { calculateBookingTotalDays, normalizeOptionalText, resolveReturnLocation } from './BookingForm'
+
+describe('BookingForm helpers', () => {
+  it('calculates booking nights from date-only inputs', () => {
+    expect(calculateBookingTotalDays('2026-06-09', '2026-06-10')).toBe(1)
+    expect(calculateBookingTotalDays('2026-06-09', '2026-06-16')).toBe(7)
+  })
+
+  it('never returns a negative total for reversed or incomplete dates', () => {
+    expect(calculateBookingTotalDays('2026-06-16', '2026-06-09')).toBe(0)
+    expect(calculateBookingTotalDays('', '2026-06-09')).toBe(0)
+    expect(calculateBookingTotalDays('2026-06-09', '')).toBe(0)
+  })
+
+  it('uses pickup location for same-location returns', () => {
+    expect(resolveReturnLocation({ dropoffMode: 'same', pickupLocation: 'Marrakesh Airport', returnLocation: 'Casablanca' })).toBe('Marrakesh Airport')
+  })
+
+  it('uses the explicit return location for different dropoffs and preserves an unset optional value', () => {
+    expect(resolveReturnLocation({ dropoffMode: 'different', pickupLocation: 'Marrakesh', returnLocation: 'Casablanca' })).toBe('Casablanca')
+    expect(resolveReturnLocation({ dropoffMode: 'different', pickupLocation: 'Marrakesh', returnLocation: '' })).toBeUndefined()
+  })
+
+  it('normalizes optional free-text fields without leaking empty strings into payloads', () => {
+    expect(normalizeOptionalText('  flight lands at 9  ')).toBe('flight lands at 9')
+    expect(normalizeOptionalText('   ')).toBeUndefined()
+  })
+})
diff --git a/storefront/src/components/BookingForm.tsx b/storefront/src/components/BookingForm.tsx
new file mode 100644
index 0000000..11818e0
--- /dev/null
+++ b/storefront/src/components/BookingForm.tsx
@@ -0,0 +1,721 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { formatCurrency } from '@rentaldrivego/types'
+import { MarketplaceApiError, marketplaceFetch, marketplacePost } from '@/lib/api'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+type Props = {
+  vehicleId: string
+  companySlug: string
+  dailyRate: number
+  pickupLocations: string[]
+  allowDifferentDropoff: boolean
+  dropoffLocations: string[]
+}
+
+type DropoffMode = 'same' | 'different'
+
+type BookingFields = {
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  pickupLocation: string
+  dropoffMode: DropoffMode
+  returnLocation: string
+  startDate: string
+  endDate: string
+  notes: string
+  dateOfBirth: string
+  nationality: string
+  identityDocumentNumber: string
+  fullAddress: string
+  driverLicense: string
+  licenseIssuedAt: string
+  licenseExpiry: string
+  licenseCountry: string
+  licenseCategory: string
+  internationalLicenseNumber: string
+}
+
+type AvailabilityState = {
+  status: 'idle' | 'checking' | 'available' | 'unavailable' | 'error'
+  nextAvailableAt: string | null
+}
+
+type AvailabilityResponse = {
+  available: boolean
+  availabilityStatus: string
+  nextAvailableAt: string | null
+  blockingReason: string | null
+}
+
+type BookingResponse = {
+  reservationId: string
+  bookingReference?: string | null
+  companyName?: string
+  vehicleName?: string
+  startDate?: string
+  endDate?: string
+  status?: string
+  message?: string
+}
+
+type FunnelEventName =
+  | 'booking_form_viewed'
+  | 'trip_dates_selected'
+  | 'contact_details_started'
+  | 'driver_details_expanded'
+  | 'booking_request_submitted'
+  | 'booking_request_failed'
+  | 'booking_request_success'
+
+const copy = {
+  en: {
+    title: 'Request this car in 1 minute',
+    subtitle: 'Send the essentials now. Driver documents can be added later if the company needs them.',
+    tripDetails: 'Trip details',
+    contactDetails: 'Contact details',
+    optionalDetails: 'Driver details, optional now',
+    optionalDetailsHint: 'Skip this unless you want to speed up final approval. The company can collect it after confirming availability.',
+    showDriverDetails: 'Add driver details now',
+    hideDriverDetails: 'Hide driver details',
+    firstName: 'First name',
+    lastName: 'Last name',
+    email: 'Email',
+    phone: 'Phone',
+    dateOfBirth: 'Date of birth',
+    nationality: 'Nationality',
+    identityDocumentNumber: 'CIN / Passport number',
+    fullAddress: 'Full address',
+    driverLicense: 'License number',
+    licenseIssuedAt: 'Issue date',
+    licenseExpiry: 'Expiry date',
+    licenseCountry: 'Country of issue',
+    licenseCategory: 'License category',
+    internationalLicenseNumber: 'International permit number',
+    pickupLocation: 'Pick-up location',
+    returnLocation: 'Drop-off location',
+    sameDropoff: 'Same drop-off',
+    differentDropoff: 'Different drop-off',
+    sameAsPickup: 'Return to the same location',
+    startDate: 'Pick-up date',
+    endDate: 'Return date',
+    notes: 'Anything the company should know? Optional.',
+    submit: 'Send booking request',
+    submitting: 'Sending…',
+    successTitle: 'Request sent.',
+    successBody: 'This first step is a request, not an instant booking. Here is what happens next.',
+    bookingReference: 'Booking reference',
+    pendingStatus: 'Pending',
+    invalidDates: 'Return date must be after pick-up date.',
+    required: 'Add your trip dates, name, email, and phone.',
+    perDay: '/ day',
+    estimatedTotal: 'Estimated total',
+    days: 'day(s)',
+    genericError: 'Something went wrong. Please try again.',
+    locationRequired: 'Select the required pick-up and drop-off locations.',
+    checkingAvailability: 'Checking availability for these dates…',
+    likelyAvailable: 'Likely available for these dates. Final confirmation still depends on the rental company.',
+    unavailableWithDate: 'Unavailable for these dates. Next likely availability: {date}.',
+    unavailableWithoutDate: 'Unavailable for these dates. Choose different trip dates to continue.',
+    availabilityError: 'Availability could not be checked right now. You can still try again in a moment.',
+    nextStepRequestSent: 'Request sent',
+    nextStepRequestSentBody: 'The company receives your dates and contact details first.',
+    nextStepAvailability: 'Company confirms availability',
+    nextStepAvailabilityBody: 'They review the request and accept it if the car is still open.',
+    nextStepDocuments: 'Driver documents if needed',
+    nextStepDocumentsBody: 'License and identity details can be collected after the company accepts the request.',
+    nextStepPayment: 'Payment or deposit',
+    nextStepPaymentBody: 'Any required payment is handled only after availability is confirmed.',
+    nextStepConfirmed: 'Booking confirmed',
+    nextStepConfirmedBody: 'The booking is final once availability, documents, and payment are all cleared.',
+  },
+  fr: {
+    title: 'Demander cette voiture en 1 minute',
+    subtitle: 'Envoyez l’essentiel maintenant. Les documents conducteur peuvent être ajoutés plus tard si l’agence les demande.',
+    tripDetails: 'Détails du trajet',
+    contactDetails: 'Coordonnées',
+    optionalDetails: 'Détails conducteur, optionnels maintenant',
+    optionalDetailsHint: 'Ignorez cette partie sauf si vous voulez accélérer la validation finale. L’agence pourra les demander après confirmation de disponibilité.',
+    showDriverDetails: 'Ajouter les détails conducteur',
+    hideDriverDetails: 'Masquer les détails conducteur',
+    firstName: 'Prénom',
+    lastName: 'Nom',
+    email: 'E-mail',
+    phone: 'Téléphone',
+    dateOfBirth: 'Date de naissance',
+    nationality: 'Nationalité',
+    identityDocumentNumber: 'N° CIN / passeport',
+    fullAddress: 'Adresse complète',
+    driverLicense: 'Numéro du permis',
+    licenseIssuedAt: 'Date de délivrance',
+    licenseExpiry: 'Date d’expiration',
+    licenseCountry: 'Pays de délivrance',
+    licenseCategory: 'Catégorie du permis',
+    internationalLicenseNumber: 'N° de permis international',
+    pickupLocation: 'Lieu de départ',
+    returnLocation: 'Lieu de retour',
+    sameDropoff: 'Même retour',
+    differentDropoff: 'Retour différent',
+    sameAsPickup: 'Retour au même lieu',
+    startDate: 'Date de départ',
+    endDate: 'Date de retour',
+    notes: 'Une information utile pour l’agence ? Optionnel.',
+    submit: 'Envoyer la demande',
+    submitting: 'Envoi…',
+    successTitle: 'Demande envoyée.',
+    successBody: 'Cette première étape reste une demande, pas une réservation instantanée. Voici la suite.',
+    bookingReference: 'Référence de réservation',
+    pendingStatus: 'En attente',
+    invalidDates: 'La date de retour doit être après la date de départ.',
+    required: 'Ajoutez vos dates, votre nom, votre e-mail et votre téléphone.',
+    perDay: '/ jour',
+    estimatedTotal: 'Total estimé',
+    days: 'jour(s)',
+    genericError: 'Une erreur est survenue. Veuillez réessayer.',
+    locationRequired: 'Sélectionnez les lieux de départ et de retour requis.',
+    checkingAvailability: 'Vérification de la disponibilité pour ces dates…',
+    likelyAvailable: 'Probablement disponible pour ces dates. La confirmation finale dépend encore de l’agence.',
+    unavailableWithDate: 'Indisponible pour ces dates. Prochaine disponibilité probable : {date}.',
+    unavailableWithoutDate: 'Indisponible pour ces dates. Choisissez d’autres dates pour continuer.',
+    availabilityError: 'La disponibilité ne peut pas être vérifiée pour le moment. Réessayez dans un instant.',
+    nextStepRequestSent: 'Demande envoyée',
+    nextStepRequestSentBody: 'L’agence reçoit d’abord vos dates et vos coordonnées.',
+    nextStepAvailability: 'Confirmation de disponibilité',
+    nextStepAvailabilityBody: 'L’agence vérifie la demande et l’accepte si la voiture est toujours libre.',
+    nextStepDocuments: 'Documents conducteur si nécessaires',
+    nextStepDocumentsBody: 'Le permis et les pièces d’identité peuvent être demandés après l’acceptation de la demande.',
+    nextStepPayment: 'Paiement ou dépôt',
+    nextStepPaymentBody: 'Le paiement demandé intervient seulement après la confirmation de disponibilité.',
+    nextStepConfirmed: 'Réservation confirmée',
+    nextStepConfirmedBody: 'La réservation devient finale une fois la disponibilité, les documents et le paiement validés.',
+  },
+  ar: {
+    title: 'اطلب هذه السيارة خلال دقيقة',
+    subtitle: 'أرسل المعلومات الأساسية الآن. يمكن إضافة وثائق السائق لاحقاً إذا احتاجت الشركة إليها.',
+    tripDetails: 'تفاصيل الرحلة',
+    contactDetails: 'بيانات التواصل',
+    optionalDetails: 'بيانات السائق، اختيارية الآن',
+    optionalDetailsHint: 'تجاوز هذا الجزء إلا إذا أردت تسريع الموافقة النهائية. يمكن للشركة طلبه بعد تأكيد التوفر.',
+    showDriverDetails: 'إضافة بيانات السائق الآن',
+    hideDriverDetails: 'إخفاء بيانات السائق',
+    firstName: 'الاسم الأول',
+    lastName: 'اسم العائلة',
+    email: 'البريد الإلكتروني',
+    phone: 'الهاتف',
+    dateOfBirth: 'تاريخ الميلاد',
+    nationality: 'الجنسية',
+    identityDocumentNumber: 'رقم البطاقة الوطنية / جواز السفر',
+    fullAddress: 'العنوان الكامل',
+    driverLicense: 'رقم الرخصة',
+    licenseIssuedAt: 'تاريخ الإصدار',
+    licenseExpiry: 'تاريخ الانتهاء',
+    licenseCountry: 'بلد الإصدار',
+    licenseCategory: 'فئة الرخصة',
+    internationalLicenseNumber: 'رقم الرخصة الدولية',
+    pickupLocation: 'موقع الاستلام',
+    returnLocation: 'موقع الإرجاع',
+    sameDropoff: 'نفس موقع الإرجاع',
+    differentDropoff: 'موقع إرجاع مختلف',
+    sameAsPickup: 'الإرجاع في نفس موقع الاستلام',
+    startDate: 'تاريخ الاستلام',
+    endDate: 'تاريخ الإرجاع',
+    notes: 'أي معلومة تريد إبلاغ الشركة بها؟ اختياري.',
+    submit: 'إرسال طلب الحجز',
+    submitting: 'جارٍ الإرسال…',
+    successTitle: 'تم إرسال الطلب.',
+    successBody: 'هذه الخطوة الأولى عبارة عن طلب وليست حجزاً فورياً. هذه هي الخطوات التالية.',
+    bookingReference: 'مرجع الحجز',
+    pendingStatus: 'قيد المراجعة',
+    invalidDates: 'يجب أن يكون تاريخ الإرجاع بعد تاريخ الاستلام.',
+    required: 'أضف تواريخ الرحلة والاسم والبريد والهاتف.',
+    perDay: '/ يوم',
+    estimatedTotal: 'الإجمالي التقديري',
+    days: 'يوم',
+    genericError: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
+    locationRequired: 'اختر مواقع الاستلام والإرجاع المطلوبة.',
+    checkingAvailability: 'جارٍ التحقق من التوفر لهذه التواريخ…',
+    likelyAvailable: 'السيارة متاحة غالباً لهذه التواريخ، لكن التأكيد النهائي يعود إلى شركة التأجير.',
+    unavailableWithDate: 'غير متاحة لهذه التواريخ. أقرب توفر متوقع: {date}.',
+    unavailableWithoutDate: 'غير متاحة لهذه التواريخ. اختر تواريخ مختلفة للمتابعة.',
+    availabilityError: 'تعذر التحقق من التوفر الآن. حاول مرة أخرى بعد قليل.',
+    nextStepRequestSent: 'تم إرسال الطلب',
+    nextStepRequestSentBody: 'تتلقى الشركة أولاً التواريخ وبيانات التواصل.',
+    nextStepAvailability: 'تأكيد التوفر',
+    nextStepAvailabilityBody: 'تراجع الشركة الطلب وتقبله إذا كانت السيارة ما زالت متاحة.',
+    nextStepDocuments: 'وثائق السائق عند الحاجة',
+    nextStepDocumentsBody: 'يمكن طلب الرخصة ووثائق الهوية بعد قبول الطلب.',
+    nextStepPayment: 'الدفع أو العربون',
+    nextStepPaymentBody: 'أي دفعة مطلوبة تتم فقط بعد تأكيد التوفر.',
+    nextStepConfirmed: 'تأكيد الحجز',
+    nextStepConfirmedBody: 'يصبح الحجز نهائياً بعد اعتماد التوفر والوثائق والدفع.',
+  },
+} as const
+
+const emptyFields: BookingFields = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  pickupLocation: '',
+  dropoffMode: 'same',
+  returnLocation: '',
+  startDate: '',
+  endDate: '',
+  notes: '',
+  dateOfBirth: '',
+  nationality: '',
+  identityDocumentNumber: '',
+  fullAddress: '',
+  driverLicense: '',
+  licenseIssuedAt: '',
+  licenseExpiry: '',
+  licenseCountry: '',
+  licenseCategory: '',
+  internationalLicenseNumber: '',
+}
+
+export function calculateBookingTotalDays(startDate: string, endDate: string): number {
+  if (!startDate || !endDate) return 0
+  return Math.max(0, Math.ceil((new Date(endDate).getTime() - new Date(startDate).getTime()) / 86_400_000))
+}
+
+export function resolveReturnLocation({
+  dropoffMode,
+  returnLocation,
+  pickupLocation,
+}: {
+  dropoffMode: DropoffMode
+  returnLocation: string
+  pickupLocation: string
+}): string | undefined {
+  if (dropoffMode === 'different') return returnLocation || undefined
+  return pickupLocation || undefined
+}
+
+export function normalizeOptionalText(value: string): string | undefined {
+  const trimmed = value.trim()
+  return trimmed || undefined
+}
+
+function interpolate(template: string, replacements: Record<string, string>) {
+  return Object.entries(replacements).reduce(
+    (current, [key, value]) => current.replace(`{${key}}`, value),
+    template,
+  )
+}
+
+function formatLocalizedDate(value: string, language: 'en' | 'fr' | 'ar') {
+  return new Intl.DateTimeFormat(language, { dateStyle: 'medium' }).format(new Date(value))
+}
+
+function getBookingSessionId() {
+  if (typeof window === 'undefined') return 'server'
+
+  const existing = window.sessionStorage.getItem('marketplace-booking-session-id')
+  if (existing) return existing
+
+  const created =
+    typeof window.crypto?.randomUUID === 'function'
+      ? window.crypto.randomUUID()
+      : `booking-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+
+  window.sessionStorage.setItem('marketplace-booking-session-id', created)
+  return created
+}
+
+function RequiredMark() {
+  return <span className="text-red-500">*</span>
+}
+
+type FieldProps = {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  required?: boolean
+  type?: string
+  textarea?: boolean
+}
+
+function Field({ label, value, onChange, required = false, type = 'text', textarea = false }: FieldProps) {
+  const className = 'w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500'
+
+  return (
+    <div className="space-y-1">
+      <label className="text-xs font-medium text-stone-600 dark:text-stone-400">
+        {label} {required ? <RequiredMark /> : null}
+      </label>
+      {textarea ? (
+        <textarea value={value} onChange={(e) => onChange(e.target.value)} rows={3} className={className} />
+      ) : (
+        <input required={required} type={type} value={value} onChange={(e) => onChange(e.target.value)} className={className} />
+      )}
+    </div>
+  )
+}
+
+export default function BookingForm({
+  vehicleId,
+  companySlug,
+  dailyRate,
+  pickupLocations,
+  allowDifferentDropoff,
+  dropoffLocations,
+}: Props) {
+  const { language } = useMarketplacePreferences()
+  const t = copy[language]
+  const pickupOptions = Array.isArray(pickupLocations) ? pickupLocations : []
+  const dropoffOptions = Array.isArray(dropoffLocations) ? dropoffLocations : []
+
+  const [fields, setFields] = useState<BookingFields>({
+    ...emptyFields,
+    pickupLocation: pickupOptions[0] ?? '',
+    returnLocation: dropoffOptions[0] ?? '',
+  })
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [successBooking, setSuccessBooking] = useState<BookingResponse | null>(null)
+  const [availability, setAvailability] = useState<AvailabilityState>({ status: 'idle', nextAvailableAt: null })
+
+  const totalDays = calculateBookingTotalDays(fields.startDate, fields.endDate)
+  const sessionIdRef = useRef<string>('')
+  const startedAtRef = useRef<number>(Date.now())
+  const trackedRef = useRef({
+    viewed: false,
+    tripDates: false,
+    contactStarted: false,
+  })
+
+  if (!sessionIdRef.current) {
+    sessionIdRef.current = getBookingSessionId()
+  }
+
+  function buildUnavailableMessage(nextAvailableAt: string | null) {
+    return nextAvailableAt
+      ? interpolate(t.unavailableWithDate, { date: formatLocalizedDate(nextAvailableAt, language) })
+      : t.unavailableWithoutDate
+  }
+
+  async function trackEvent(eventName: FunnelEventName, metadata?: Record<string, string | number | boolean | null>) {
+    await marketplacePost('/marketplace/events', {
+      eventName,
+      companySlug,
+      vehicleId,
+      sessionId: sessionIdRef.current,
+      path: typeof window === 'undefined' ? undefined : window.location.pathname,
+      metadata,
+    }).catch(() => null)
+  }
+
+  async function checkAvailability(startDate: string, endDate: string, signal?: AbortSignal) {
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+    const result = await marketplaceFetch<AvailabilityResponse>(
+      `/marketplace/${companySlug}/vehicles/${vehicleId}/availability?startDate=${encodeURIComponent(start.toISOString())}&endDate=${encodeURIComponent(end.toISOString())}`,
+      signal ? { signal } : undefined,
+    )
+
+    setAvailability({
+      status: result.available ? 'available' : 'unavailable',
+      nextAvailableAt: result.nextAvailableAt,
+    })
+
+    return result
+  }
+
+  function update<K extends keyof BookingFields>(key: K, value: BookingFields[K]) {
+    setFields((current) => ({ ...current, [key]: value }))
+  }
+
+  useEffect(() => {
+    if (trackedRef.current.viewed) return
+    trackedRef.current.viewed = true
+    void trackEvent('booking_form_viewed', {
+      allowDifferentDropoff,
+      hasPickupLocations: pickupOptions.length > 0,
+      hasDropoffLocations: dropoffOptions.length > 0,
+    })
+  }, [allowDifferentDropoff, dropoffOptions.length, pickupOptions.length])
+
+  useEffect(() => {
+    if (trackedRef.current.contactStarted) return
+    if (!fields.firstName.trim() && !fields.lastName.trim() && !fields.email.trim() && !fields.phone.trim()) return
+
+    trackedRef.current.contactStarted = true
+    void trackEvent('contact_details_started')
+  }, [fields.email, fields.firstName, fields.lastName, fields.phone])
+
+  useEffect(() => {
+    if (!fields.startDate || !fields.endDate) {
+      setAvailability({ status: 'idle', nextAvailableAt: null })
+      return
+    }
+
+    const start = new Date(fields.startDate)
+    const end = new Date(fields.endDate)
+    if (end <= start) {
+      setAvailability({ status: 'idle', nextAvailableAt: null })
+      return
+    }
+
+    if (!trackedRef.current.tripDates) {
+      trackedRef.current.tripDates = true
+      void trackEvent('trip_dates_selected', { totalDays: calculateBookingTotalDays(fields.startDate, fields.endDate) })
+    }
+
+    const controller = new AbortController()
+    setAvailability((current) => ({ ...current, status: 'checking' }))
+
+    void checkAvailability(fields.startDate, fields.endDate, controller.signal).catch((err) => {
+      if (controller.signal.aborted) return
+      if (err instanceof MarketplaceApiError && err.code === 'invalid_dates') {
+        setAvailability({ status: 'idle', nextAvailableAt: null })
+        return
+      }
+      setAvailability({ status: 'error', nextAvailableAt: null })
+    })
+
+    return () => controller.abort()
+  }, [companySlug, fields.endDate, fields.startDate, vehicleId])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (!fields.firstName.trim() || !fields.lastName.trim() || !fields.email.trim() || !fields.phone.trim() || !fields.startDate || !fields.endDate) {
+      setError(t.required)
+      return
+    }
+
+    if ((pickupOptions.length > 0 && !fields.pickupLocation) || (fields.dropoffMode === 'different' && dropoffOptions.length > 0 && !fields.returnLocation)) {
+      setError(t.locationRequired)
+      return
+    }
+
+    const start = new Date(fields.startDate)
+    const end = new Date(fields.endDate)
+    if (end <= start) {
+      setError(t.invalidDates)
+      return
+    }
+
+    setSubmitting(true)
+
+    try {
+      void trackEvent('booking_request_submitted', {
+        totalDays,
+      })
+
+      const availabilityResult = await checkAvailability(fields.startDate, fields.endDate)
+      if (!availabilityResult.available) {
+        const message = buildUnavailableMessage(availabilityResult.nextAvailableAt)
+        setError(message)
+        void trackEvent('booking_request_failed', {
+          reason: 'unavailable',
+          nextAvailableAt: availabilityResult.nextAvailableAt,
+        })
+        return
+      }
+
+      const booking = await marketplacePost<BookingResponse>('/marketplace/reservations', {
+        vehicleId,
+        companySlug,
+        firstName: fields.firstName.trim(),
+        lastName: fields.lastName.trim(),
+        email: fields.email.trim(),
+        phone: fields.phone.trim(),
+        startDate: start.toISOString(),
+        endDate: end.toISOString(),
+        pickupLocation: fields.pickupLocation || undefined,
+        returnLocation: resolveReturnLocation({
+          dropoffMode: fields.dropoffMode,
+          returnLocation: fields.returnLocation,
+          pickupLocation: fields.pickupLocation,
+        }),
+        notes: normalizeOptionalText(fields.notes),
+        language,
+      })
+
+      setSuccessBooking(booking)
+      setSuccess(true)
+      void trackEvent('booking_request_success', {
+        totalDays,
+        elapsedMs: Date.now() - startedAtRef.current,
+      })
+    } catch (err: unknown) {
+      if (err instanceof MarketplaceApiError && err.code === 'unavailable') {
+        setAvailability({ status: 'unavailable', nextAvailableAt: err.nextAvailableAt ?? null })
+        setError(buildUnavailableMessage(err.nextAvailableAt ?? null))
+      } else {
+        setError(err instanceof Error ? err.message : t.genericError)
+      }
+
+      void trackEvent('booking_request_failed', {
+        reason: err instanceof MarketplaceApiError ? err.code ?? 'request_failed' : 'request_failed',
+      })
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="rounded-2xl border border-green-200 bg-green-50 p-6 dark:border-green-800 dark:bg-green-950/40">
+        <p className="text-base font-semibold text-green-800 dark:text-green-300">{t.successTitle}</p>
+        <p className="mt-2 text-sm text-green-700 dark:text-green-400">{t.successBody}</p>
+        {successBooking?.bookingReference ? (
+          <div className="mt-4 rounded-2xl border border-green-200 bg-white/70 px-4 py-3 text-sm text-green-900 dark:border-green-800 dark:bg-green-950/20 dark:text-green-200">
+            <p className="font-semibold">{t.bookingReference}: {successBooking.bookingReference}</p>
+            <p className="mt-1 text-xs text-green-700 dark:text-green-400">
+              {successBooking.status ?? t.pendingStatus}
+            </p>
+          </div>
+        ) : null}
+        <div className="mt-4 space-y-3">
+          {[
+            { title: t.nextStepRequestSent, body: t.nextStepRequestSentBody, active: true },
+            { title: t.nextStepAvailability, body: t.nextStepAvailabilityBody },
+            { title: t.nextStepDocuments, body: t.nextStepDocumentsBody },
+            { title: t.nextStepPayment, body: t.nextStepPaymentBody },
+            { title: t.nextStepConfirmed, body: t.nextStepConfirmedBody },
+          ].map((step, index) => (
+            <div
+              key={step.title}
+              className={`rounded-2xl border px-4 py-3 ${step.active ? 'border-green-300 bg-white/80 dark:border-green-700 dark:bg-green-950/20' : 'border-green-100 bg-white/50 dark:border-green-900/60 dark:bg-transparent'}`}
+            >
+              <p className="text-sm font-semibold text-green-900 dark:text-green-200">{index + 1}. {step.title}</p>
+              <p className="mt-1 text-xs leading-5 text-green-700 dark:text-green-400">{step.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.title}</p>
+        <p className="mt-1 text-xs leading-5 text-stone-500 dark:text-stone-400">{t.subtitle}</p>
+      </div>
+
+      {error ? (
+        <p className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400">
+          {error}
+        </p>
+      ) : null}
+
+      <section className="space-y-3 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-blue-950">
+        <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.tripDetails}</p>
+
+        {pickupOptions.length > 0 ? (
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.pickupLocation} <RequiredMark /></label>
+            <select
+              value={fields.pickupLocation}
+              onChange={(e) => update('pickupLocation', e.target.value)}
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
+            >
+              {pickupOptions.map((location) => <option key={location} value={location}>{location}</option>)}
+            </select>
+          </div>
+        ) : null}
+
+        {allowDifferentDropoff ? (
+          <div className="space-y-3">
+            <div className="inline-flex rounded-full border border-stone-200 bg-white p-1 dark:border-blue-800 dark:bg-blue-900/30">
+              <button
+                type="button"
+                onClick={() => update('dropoffMode', 'same')}
+                className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${fields.dropoffMode === 'same' ? 'bg-blue-900 text-white dark:bg-orange-400' : 'text-stone-500 dark:text-stone-400'}`}
+              >
+                {t.sameDropoff}
+              </button>
+              <button
+                type="button"
+                onClick={() => update('dropoffMode', 'different')}
+                className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${fields.dropoffMode === 'different' ? 'bg-blue-900 text-white dark:bg-orange-400' : 'text-stone-500 dark:text-stone-400'}`}
+              >
+                {t.differentDropoff}
+              </button>
+            </div>
+
+            {fields.dropoffMode === 'different' && dropoffOptions.length > 0 ? (
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.returnLocation} <RequiredMark /></label>
+                <select
+                  value={fields.returnLocation}
+                  onChange={(e) => update('returnLocation', e.target.value)}
+                  className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
+                >
+                  {dropoffOptions.map((location) => <option key={location} value={location}>{location}</option>)}
+                </select>
+              </div>
+            ) : (
+              <p className="text-sm text-stone-500 dark:text-stone-400">{fields.pickupLocation || t.sameAsPickup}</p>
+            )}
+          </div>
+        ) : null}
+
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={t.startDate} required type="date" value={fields.startDate} onChange={(value) => update('startDate', value)} />
+          <Field label={t.endDate} required type="date" value={fields.endDate} onChange={(value) => update('endDate', value)} />
+        </div>
+
+        {totalDays > 0 ? (
+          <p className="text-sm text-stone-600 dark:text-stone-400">
+            {t.estimatedTotal}:{' '}
+            <strong className="text-stone-900 dark:text-stone-100">{formatCurrency(dailyRate * totalDays, 'MAD', language)}</strong>{' '}
+            ({totalDays} {t.days})
+          </p>
+        ) : null}
+
+        {availability.status === 'checking' ? (
+          <p className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-600 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-300">
+            {t.checkingAvailability}
+          </p>
+        ) : null}
+
+        {availability.status === 'available' ? (
+          <p className="rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-300">
+            {t.likelyAvailable}
+          </p>
+        ) : null}
+
+        {availability.status === 'unavailable' ? (
+          <p className="rounded-xl border border-orange-200 bg-orange-50 px-4 py-3 text-sm text-orange-800 dark:border-orange-800 dark:bg-orange-950/40 dark:text-orange-300">
+            {buildUnavailableMessage(availability.nextAvailableAt)}
+          </p>
+        ) : null}
+
+        {availability.status === 'error' ? (
+          <p className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-600 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-300">
+            {t.availabilityError}
+          </p>
+        ) : null}
+      </section>
+
+      <section className="space-y-3 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-blue-950">
+        <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.contactDetails}</p>
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={t.firstName} required value={fields.firstName} onChange={(value) => update('firstName', value)} />
+          <Field label={t.lastName} required value={fields.lastName} onChange={(value) => update('lastName', value)} />
+        </div>
+        <Field label={t.email} required type="email" value={fields.email} onChange={(value) => update('email', value)} />
+        <Field label={t.phone} required type="tel" value={fields.phone} onChange={(value) => update('phone', value)} />
+        <Field label={t.notes} textarea value={fields.notes} onChange={(value) => update('notes', value)} />
+      </section>
+
+      <button
+        type="submit"
+        disabled={submitting || availability.status === 'checking'}
+        className="w-full rounded-full bg-orange-600 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
+      >
+        {submitting ? t.submitting : t.submit}
+      </button>
+    </form>
+  )
+}
diff --git a/apps/homepage/src/components/FooterContentPage.test.ts b/storefront/src/components/FooterContentPage.test.ts
similarity index 100%
rename from apps/homepage/src/components/FooterContentPage.test.ts
rename to storefront/src/components/FooterContentPage.test.ts
diff --git a/apps/homepage/src/components/FooterContentPage.tsx b/storefront/src/components/FooterContentPage.tsx
similarity index 100%
rename from apps/homepage/src/components/FooterContentPage.tsx
rename to storefront/src/components/FooterContentPage.tsx
diff --git a/apps/homepage/src/components/MarketplaceFooter.tsx b/storefront/src/components/MarketplaceFooter.tsx
similarity index 98%
rename from apps/homepage/src/components/MarketplaceFooter.tsx
rename to storefront/src/components/MarketplaceFooter.tsx
index e52bcf0..b6e1090 100644
--- a/apps/homepage/src/components/MarketplaceFooter.tsx
+++ b/storefront/src/components/MarketplaceFooter.tsx
@@ -101,7 +101,7 @@ export default function MarketplaceFooter({
         </div>
 
         <p className="text-sm text-stone-500 dark:text-stone-400">
-          &copy; {new Date().getFullYear()} FleetOS. {rightsLabel}
+          &copy; {new Date().getFullYear()} RentalDriveGo. {rightsLabel}
         </p>
       </div>
     </footer>
diff --git a/apps/homepage/src/components/MarketplaceHeader.boundary.test.ts b/storefront/src/components/MarketplaceHeader.boundary.test.ts
similarity index 100%
rename from apps/homepage/src/components/MarketplaceHeader.boundary.test.ts
rename to storefront/src/components/MarketplaceHeader.boundary.test.ts
diff --git a/apps/homepage/src/components/MarketplaceHeader.tsx b/storefront/src/components/MarketplaceHeader.tsx
similarity index 94%
rename from apps/homepage/src/components/MarketplaceHeader.tsx
rename to storefront/src/components/MarketplaceHeader.tsx
index 7e01f9b..907235e 100644
--- a/apps/homepage/src/components/MarketplaceHeader.tsx
+++ b/storefront/src/components/MarketplaceHeader.tsx
@@ -9,9 +9,8 @@ export type Theme = 'light' | 'dark'
 export type Language = 'en' | 'fr' | 'ar'
 
 type Dictionary = {
-  home: string
-  features: string
-  pricing: string
+  marketplace: string
+  explore: string
   signIn: string
   ownerSignIn: string
   theme: string
@@ -108,13 +107,13 @@ export default function MarketplaceHeader({
           <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
             <Image
               src="/rentalcardrive.png"
-              alt="FleetOS"
+              alt="RentalDriveGo"
               width={36}
               height={36}
               priority
               className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
             />
-            <span>FleetOS</span>
+            <span>RentalDriveGo</span>
           </Link>
         </div>
 
@@ -124,19 +123,13 @@ export default function MarketplaceHeader({
               href="/"
               className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
             >
-              {dict.home}
+              {dict.marketplace}
             </Link>
             <Link
-              href="/features"
+              href="/explore"
               className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
             >
-              {dict.features}
-            </Link>
-            <Link
-              href="/pricing"
-              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
-            >
-              {dict.pricing}
+              {dict.explore}
             </Link>
             <a
               href={signInHref}
diff --git a/apps/homepage/src/components/MarketplaceShell.auth.test.ts b/storefront/src/components/MarketplaceShell.auth.test.ts
similarity index 100%
rename from apps/homepage/src/components/MarketplaceShell.auth.test.ts
rename to storefront/src/components/MarketplaceShell.auth.test.ts
diff --git a/apps/homepage/src/components/MarketplaceShell.content.test.ts b/storefront/src/components/MarketplaceShell.content.test.ts
similarity index 100%
rename from apps/homepage/src/components/MarketplaceShell.content.test.ts
rename to storefront/src/components/MarketplaceShell.content.test.ts
diff --git a/apps/homepage/src/components/MarketplaceShell.tsx b/storefront/src/components/MarketplaceShell.tsx
similarity index 96%
rename from apps/homepage/src/components/MarketplaceShell.tsx
rename to storefront/src/components/MarketplaceShell.tsx
index f39af1f..ce66e84 100644
--- a/apps/homepage/src/components/MarketplaceShell.tsx
+++ b/storefront/src/components/MarketplaceShell.tsx
@@ -9,9 +9,8 @@ import { SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference,
 type Theme = 'light' | 'dark'
 
 type Dictionary = {
-  home: string
-  features: string
-  pricing: string
+  marketplace: string
+  explore: string
   signIn: string
   ownerSignIn: string
   language: string
@@ -23,40 +22,37 @@ type Dictionary = {
 
 const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
   en: {
-    home: 'Home',
-    features: 'Features',
-    pricing: 'Pricing',
+    marketplace: 'Home',
+    explore: 'Marketplace',
     signIn: 'Sign in',
-    ownerSignIn: 'Get Started',
+    ownerSignIn: 'Create Agency Space',
     language: 'Language',
     theme: 'Theme',
     light: 'Light',
     dark: 'Dark',
-    preferences: 'Preferences',
+    preferences: 'Marketplace preferences',
   },
   fr: {
-    home: 'Accueil',
-    features: 'Fonctionnalités',
-    pricing: 'Tarifs',
+    marketplace: 'Accueil',
+    explore: 'Marketplace',
     signIn: 'Connexion',
-    ownerSignIn: 'Démarrer',
+    ownerSignIn: "Créer un espace d'agence",
     language: 'Langue',
     theme: 'Mode',
     light: 'Clair',
     dark: 'Sombre',
-    preferences: 'Préférences',
+    preferences: 'Préférences marketplace',
   },
   ar: {
-    home: 'الرئيسية',
-    features: 'الميزات',
-    pricing: 'الأسعار',
+    marketplace: 'الرئيسية',
+    explore: 'السوق',
     signIn: 'تسجيل الدخول',
-    ownerSignIn: 'ابدأ الآن',
+    ownerSignIn: 'إنشاء مساحة الوكالة',
     language: 'اللغة',
     theme: 'الوضع',
     light: 'فاتح',
     dark: 'داكن',
-    preferences: 'التفضيلات',
+    preferences: 'تفضيلات السوق',
   },
 }
 
diff --git a/storefront/src/components/RenterShell.tsx b/storefront/src/components/RenterShell.tsx
new file mode 100644
index 0000000..af6346d
--- /dev/null
+++ b/storefront/src/components/RenterShell.tsx
@@ -0,0 +1,223 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import {
+  LayoutDashboard,
+  User,
+  Bookmark,
+  Bell,
+  LogOut,
+  ChevronRight,
+  ChevronLeft,
+  Car,
+} from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import { clearRenterSession, loadRenterProfile } from '@/lib/renter'
+
+const NAV_ITEMS = [
+  { href: '/renter/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
+  { href: '/renter/profile', key: 'profile', icon: User },
+  { href: '/renter/saved-companies', key: 'savedCompanies', icon: Bookmark },
+  { href: '/renter/notifications', key: 'notifications', icon: Bell },
+] as const
+
+const dicts = {
+  en: {
+    dashboard: 'Dashboard',
+    profile: 'Profile',
+    savedCompanies: 'Saved companies',
+    notifications: 'Notifications',
+    signOut: 'Sign out',
+    renterPortal: 'Renter Portal',
+    rights: 'All rights reserved.',
+  },
+  fr: {
+    dashboard: 'Tableau de bord',
+    profile: 'Profil',
+    savedCompanies: 'Entreprises sauvegardées',
+    notifications: 'Notifications',
+    signOut: 'Déconnexion',
+    renterPortal: 'Espace client',
+    rights: 'Tous droits réservés.',
+  },
+  ar: {
+    dashboard: 'لوحة التحكم',
+    profile: 'الملف الشخصي',
+    savedCompanies: 'الشركات المحفوظة',
+    notifications: 'الإشعارات',
+    signOut: 'تسجيل الخروج',
+    renterPortal: 'بوابة المستأجر',
+    rights: 'جميع الحقوق محفوظة.',
+  },
+} as const
+
+function computeInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return 'R'
+  if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
+  return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
+}
+
+export default function RenterShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = dicts[language]
+  const isRtl = language === 'ar'
+  const [open, setOpen] = useState(false)
+  const [userInitials, setUserInitials] = useState('R')
+  const [userName, setUserName] = useState<string | null>(null)
+  const [userEmail, setUserEmail] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadRenterProfile()
+      .then((profile) => {
+        const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
+        setUserName(fullName || profile.email.split('@')[0])
+        setUserEmail(profile.email)
+        setUserInitials(computeInitials(fullName || profile.email))
+      })
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    setOpen(false)
+  }, [pathname])
+
+  function signOut() {
+    clearRenterSession()
+    router.push('/')
+  }
+
+  const isActive = (item: (typeof NAV_ITEMS)[number]) => {
+    if ('exact' in item && item.exact) return pathname === item.href
+    return pathname.startsWith(item.href)
+  }
+
+  const activeNav = NAV_ITEMS.find((item) => isActive(item))
+  const pageTitle = activeNav ? (dict[activeNav.key as keyof typeof dict] as string) : dict.dashboard
+
+  return (
+    <div className="site-page flex min-h-screen">
+      {open && (
+        <div
+          className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      {!open && (
+        <button
+          onClick={() => setOpen(true)}
+          aria-label="Open sidebar"
+          className={[
+            'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
+            isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
+          ].join(' ')}
+        >
+          {isRtl ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+        </button>
+      )}
+
+      <aside
+        className={[
+          'fixed inset-y-0 z-40 flex w-64 flex-col bg-blue-950 transition-transform duration-300',
+          isRtl ? 'right-0' : 'left-0',
+          'lg:translate-x-0',
+          open ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full',
+        ].join(' ')}
+      >
+        <div className="flex items-center gap-3 border-b border-blue-900/50 px-6 py-5">
+          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-500 overflow-hidden">
+            <Car className="h-4 w-4 text-white" />
+          </div>
+          <span className="truncate text-sm font-bold tracking-wide text-white">
+            {dict.renterPortal}
+          </span>
+        </div>
+
+        <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon
+            const active = isActive(item)
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={[
+                  'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                  active
+                    ? 'bg-orange-500 text-white'
+                    : 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
+                ].join(' ')}
+              >
+                <Icon className="h-4 w-4 flex-shrink-0" />
+                {dict[item.key as keyof typeof dict] as string}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="border-t border-stone-800 px-3 py-4">
+          <div className="flex items-center gap-3 rounded-lg px-3 py-2">
+            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
+              {userInitials}
+            </div>
+            <div className="min-w-0 flex-1">
+              {userName && (
+                <p className="truncate text-sm font-medium text-white">{userName}</p>
+              )}
+              {userEmail && (
+                <p className="truncate text-xs text-stone-400">{userEmail}</p>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={signOut}
+            className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-blue-900/40 hover:text-white"
+          >
+            <LogOut className="h-4 w-4" />
+            {dict.signOut}
+          </button>
+        </div>
+
+        <button
+          onClick={() => setOpen(false)}
+          aria-label="Close sidebar"
+          className={[
+            'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
+            isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
+          ].join(' ')}
+        >
+          {isRtl ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
+        </button>
+      </aside>
+
+      <div
+        className={[
+          'flex min-h-screen min-w-0 flex-1 flex-col',
+          isRtl ? 'lg:mr-64' : 'lg:ml-64',
+        ].join(' ')}
+      >
+        <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
+          <h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
+            {userInitials}
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto py-8">
+          {children}
+        </main>
+
+        <footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
+          <p className="text-center text-xs text-stone-400 dark:text-stone-500">
+            &copy; {new Date().getFullYear()} RentalDriveGo. {dict.rights}
+          </p>
+        </footer>
+      </div>
+    </div>
+  )
+}
diff --git a/storefront/src/components/WorkspaceFrame.boundary.test.ts b/storefront/src/components/WorkspaceFrame.boundary.test.ts
new file mode 100644
index 0000000..4ebe240
--- /dev/null
+++ b/storefront/src/components/WorkspaceFrame.boundary.test.ts
@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { buildFrameUrl, FRAME_HEIGHT, getDefaultFramePath } from './WorkspaceFrame'
+
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+function stubBrowser({ cookie = '', origin = 'https://market.example' }: { cookie?: string; origin?: string } = {}) {
+  const parsed = new URL(origin)
+  vi.stubGlobal('window', {
+    location: { origin, hostname: parsed.hostname, protocol: parsed.protocol, replace: vi.fn() },
+  })
+  vi.stubGlobal('document', { cookie })
+}
+
+describe('WorkspaceFrame helpers', () => {
+  it('uses the dashboard sign-in path during server rendering', () => {
+    vi.stubGlobal('window', undefined)
+
+    expect(getDefaultFramePath('sign-in')).toBe('/dashboard/sign-in')
+    expect(buildFrameUrl('https://dashboard.example/dashboard', '/dashboard/sign-in')).toBe('/dashboard/sign-in')
+  })
+
+  it('keeps users with an employee token on the embedded sign-in path until the dashboard confirms login', () => {
+    stubBrowser({ cookie: 'other=1; employee_session=token_123' })
+
+    expect(getDefaultFramePath('sign-in')).toBe('/dashboard/sign-in')
+  })
+
+  it('keeps unauthenticated visitors on the embedded sign-in path', () => {
+    stubBrowser({ cookie: 'marketplace-language=fr' })
+
+    expect(getDefaultFramePath('sign-in')).toBe('/dashboard/sign-in')
+  })
+
+  it('rewrites a configured app base to the requested embedded path and query', () => {
+    stubBrowser({ origin: 'https://market.example' })
+
+    expect(buildFrameUrl('https://dashboard.example/dashboard', '/dashboard/reset-password?token=abc')).toBe(
+      'https://market.example/dashboard/reset-password?token=abc',
+    )
+  })
+
+  it('documents the iframe height contract used by embedded dashboard surfaces', () => {
+    expect(FRAME_HEIGHT).toBe('calc(100vh - 56px)')
+  })
+})
diff --git a/storefront/src/components/WorkspaceFrame.tsx b/storefront/src/components/WorkspaceFrame.tsx
new file mode 100644
index 0000000..7a9f7d4
--- /dev/null
+++ b/storefront/src/components/WorkspaceFrame.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+import { useMarketplacePreferences } from './MarketplaceShell'
+
+export type FrameId = 'sign-in'
+
+const frameConfig: Record<FrameId, { label: string; appUrl: string; path: string }> = {
+  'sign-in': {
+    label: 'Sign in',
+    appUrl: process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+    path: '/dashboard/sign-in',
+  },
+}
+
+export function getDefaultFramePath(target: FrameId) {
+  if (typeof window === 'undefined') {
+    return frameConfig[target].path
+  }
+
+  return frameConfig[target].path
+}
+
+export function buildFrameUrl(appUrl: string, path: string) {
+  if (typeof window === 'undefined') return path
+
+  const resolvedAppUrl = resolveBrowserAppUrl(appUrl)
+  const appBase = new URL(resolvedAppUrl, window.location.origin)
+  const target = new URL(path, window.location.origin)
+  appBase.pathname = target.pathname
+  appBase.search = target.search
+  appBase.hash = ''
+  return appBase.toString()
+}
+
+export const FRAME_HEIGHT = 'calc(100vh - 56px)'
+
+export default function WorkspaceFrame({ target }: { target: FrameId }) {
+  const { language, theme } = useMarketplacePreferences()
+  const [src, setSrc] = useState('')
+  const [framePath, setFramePath] = useState(() => getDefaultFramePath(target))
+  const config = frameConfig[target]
+  const loadingLabel = {
+    en: 'Loading',
+    fr: 'Chargement',
+    ar: 'جارٍ تحميل',
+  }[language]
+
+  useEffect(() => {
+    setFramePath(getDefaultFramePath(target))
+  }, [target])
+
+  useEffect(() => {
+    function handleFrameMessage(event: MessageEvent) {
+      if (!event.data || typeof event.data !== 'object') return
+
+      const message = event.data as { type?: string; path?: string }
+
+      if (target === 'sign-in' && message.type === 'rentaldrivego:employee-login' && typeof message.path === 'string') {
+        window.location.replace(message.path)
+        return
+      }
+
+      if ((message.type === 'rentaldrivego:embedded-path' || message.type === 'rentaldrivego:employee-login') && typeof message.path === 'string') {
+        setFramePath(message.path)
+      }
+    }
+
+    window.addEventListener('message', handleFrameMessage)
+    return () => window.removeEventListener('message', handleFrameMessage)
+  }, [target])
+
+  useEffect(() => {
+    if (target === 'sign-in' && src) return
+
+    const nextUrl = new URL(buildFrameUrl(config.appUrl, framePath))
+    nextUrl.searchParams.set('theme', theme)
+    nextUrl.searchParams.set('lang', language)
+    nextUrl.searchParams.set('embedded', '1')
+    setSrc(nextUrl.toString())
+  }, [config.appUrl, framePath, language, src, target, theme])
+
+  const content = src ? (
+    <iframe
+      title={config.label}
+      src={src}
+      className="block w-full border-0 bg-white dark:bg-blue-950"
+      style={{ height: FRAME_HEIGHT }}
+    />
+  ) : (
+    <div
+      className="flex items-center justify-center text-sm text-stone-500 dark:text-stone-300"
+      style={{ height: FRAME_HEIGHT }}
+    >
+      {loadingLabel} {config.label}…
+    </div>
+  )
+
+  if (target === 'sign-in') {
+    return <main className="min-h-[calc(100vh-56px)]">{content}</main>
+  }
+
+  return (
+    <main className="site-page">
+      <div className="site-section py-6 sm:py-8 lg:py-10">
+        <section className="site-panel overflow-hidden p-0">{content}</section>
+      </div>
+    </main>
+  )
+}
diff --git a/storefront/src/components/public/SiteFooter.tsx b/storefront/src/components/public/SiteFooter.tsx
new file mode 100644
index 0000000..02bedcb
--- /dev/null
+++ b/storefront/src/components/public/SiteFooter.tsx
@@ -0,0 +1,4 @@
+'use client'
+
+// Public marketing footer used by the homepage and other storefront pages.
+export { default } from '@/components/MarketplaceFooter'
diff --git a/storefront/src/components/public/SiteNavbar.tsx b/storefront/src/components/public/SiteNavbar.tsx
new file mode 100644
index 0000000..41f133c
--- /dev/null
+++ b/storefront/src/components/public/SiteNavbar.tsx
@@ -0,0 +1,4 @@
+'use client'
+
+// Public marketing navbar used by the homepage and other storefront pages.
+export { default } from '@/components/MarketplaceHeader'
diff --git a/storefront/src/components/public/SitePageLayout.test.ts b/storefront/src/components/public/SitePageLayout.test.ts
new file mode 100644
index 0000000..b1e87e8
--- /dev/null
+++ b/storefront/src/components/public/SitePageLayout.test.ts
@@ -0,0 +1,15 @@
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+describe('storefront public page layout', () => {
+  it('keeps the navbar and footer in reusable component modules', () => {
+    const layoutPath = fileURLToPath(new URL('./SitePageLayout.tsx', import.meta.url))
+    const source = fs.readFileSync(layoutPath, 'utf8')
+
+    expect(source).toContain("import SiteNavbar from './SiteNavbar'")
+    expect(source).toContain("import SiteFooter from './SiteFooter'")
+    expect(source).toContain('<SiteNavbar')
+    expect(source).toContain('<SiteFooter')
+  })
+})
diff --git a/storefront/src/components/public/SitePageLayout.tsx b/storefront/src/components/public/SitePageLayout.tsx
new file mode 100644
index 0000000..0af1429
--- /dev/null
+++ b/storefront/src/components/public/SitePageLayout.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import SiteFooter from './SiteFooter'
+import SiteNavbar from './SiteNavbar'
+import {
+  getFooterContent,
+  localeOptions,
+  useMarketplacePreferences,
+} from '@/components/MarketplaceShell'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function SitePageLayout({ children }: { children: ReactNode }) {
+  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(
+    process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+  )
+  const footerContent = getFooterContent(language)
+  const available = localeOptions.filter((option) => option.value !== language)
+  const current = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
+
+  return (
+    <div className="site-page flex min-h-screen flex-col" data-site-page-layout="true">
+      <SiteNavbar
+        dict={dict}
+        theme={theme}
+        setTheme={setTheme}
+        companyName={companyName}
+        dashboardUrl={dashboardUrl}
+        currentLanguage={{
+          value: current.value,
+          flag: current.flag,
+          shortLabel: current.value.toUpperCase(),
+        }}
+        localeOptions={available.map((option) => ({
+          value: option.value,
+          flag: option.flag,
+          shortLabel: option.value.toUpperCase(),
+        }))}
+        onSelectLanguage={setLanguage}
+      />
+      <div className="flex flex-1 flex-col">
+        <div className="flex-1">{children}</div>
+        <SiteFooter
+          primaryItems={footerContent.primary}
+          secondaryItems={footerContent.secondary}
+          localeLabel={footerContent.localeLabel}
+          rightsLabel={footerContent.rightsLabel}
+          localeOptions={available}
+          currentLocale={current}
+          onSelectLanguage={setLanguage}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/storefront/src/components/public/index.ts b/storefront/src/components/public/index.ts
new file mode 100644
index 0000000..b900cd1
--- /dev/null
+++ b/storefront/src/components/public/index.ts
@@ -0,0 +1,5 @@
+'use client'
+
+export { default as SiteFooter } from './SiteFooter'
+export { default as SiteNavbar } from './SiteNavbar'
+export { default as SitePageLayout } from './SitePageLayout'
diff --git a/apps/homepage/src/lib/api.test.ts b/storefront/src/lib/api.test.ts
similarity index 100%
rename from apps/homepage/src/lib/api.test.ts
rename to storefront/src/lib/api.test.ts
diff --git a/storefront/src/lib/api.ts b/storefront/src/lib/api.ts
new file mode 100644
index 0000000..b5d9118
--- /dev/null
+++ b/storefront/src/lib/api.ts
@@ -0,0 +1,50 @@
+const API_BASE =
+  (typeof window === 'undefined' ? process.env.API_INTERNAL_URL : process.env.NEXT_PUBLIC_API_URL)
+  ?? process.env.NEXT_PUBLIC_API_URL
+  ?? 'http://localhost:4000/api/v1'
+
+export class MarketplaceApiError extends Error {
+  status: number
+  code?: string
+  nextAvailableAt?: string | null
+
+  constructor(message: string, status: number, code?: string, nextAvailableAt?: string | null) {
+    super(message)
+    this.name = 'MarketplaceApiError'
+    this.status = status
+    this.code = code
+    this.nextAvailableAt = nextAvailableAt
+  }
+}
+
+export async function marketplaceFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    cache: 'no-store',
+    credentials: 'include',
+    ...init,
+  })
+  const json = await res.json().catch(() => null)
+  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
+  return json.data as T
+}
+
+export async function marketplaceFetchOrDefault<T>(path: string, fallback: T): Promise<T> {
+  try {
+    return await marketplaceFetch<T>(path)
+  } catch {
+    return fallback
+  }
+}
+
+export async function marketplacePost<T>(path: string, body: unknown): Promise<T> {
+  const base = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+  const res = await fetch(`${base}${path}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const json = await res.json().catch(() => null)
+  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
+  return json.data as T
+}
diff --git a/apps/homepage/src/lib/appUrls.test.ts b/storefront/src/lib/appUrls.test.ts
similarity index 100%
rename from apps/homepage/src/lib/appUrls.test.ts
rename to storefront/src/lib/appUrls.test.ts
diff --git a/storefront/src/lib/appUrls.ts b/storefront/src/lib/appUrls.ts
new file mode 100644
index 0000000..c9ee9d3
--- /dev/null
+++ b/storefront/src/lib/appUrls.ts
@@ -0,0 +1,28 @@
+export function resolveBrowserAppUrl(fallback: string): string {
+  if (typeof window === 'undefined') return fallback
+  const h = window.location.hostname
+  if (h === 'localhost' || h === '127.0.0.1') return fallback.replace(/\/$/, '')
+
+  try {
+    const target = new URL(fallback)
+    target.protocol = window.location.protocol
+    target.hostname = h
+    target.port = ''
+    return target.toString().replace(/\/$/, '')
+  } catch {
+    return fallback
+  }
+}
+
+export function resolveServerAppUrl(fallback: string, host: string | null, proto?: string | null): string {
+  if (!host) return fallback
+
+  try {
+    const target = new URL(fallback)
+    target.protocol = `${proto || target.protocol.replace(':', '')}:`
+    target.host = host
+    return target.toString().replace(/\/$/, '')
+  } catch {
+    return fallback
+  }
+}
diff --git a/apps/homepage/src/lib/footerContent.test.ts b/storefront/src/lib/footerContent.test.ts
similarity index 100%
rename from apps/homepage/src/lib/footerContent.test.ts
rename to storefront/src/lib/footerContent.test.ts
diff --git a/apps/homepage/src/lib/footerContent.ts b/storefront/src/lib/footerContent.ts
similarity index 100%
rename from apps/homepage/src/lib/footerContent.ts
rename to storefront/src/lib/footerContent.ts
diff --git a/apps/homepage/src/lib/i18n.server.test.ts b/storefront/src/lib/i18n.server.test.ts
similarity index 100%
rename from apps/homepage/src/lib/i18n.server.test.ts
rename to storefront/src/lib/i18n.server.test.ts
diff --git a/apps/homepage/src/lib/i18n.server.ts b/storefront/src/lib/i18n.server.ts
similarity index 100%
rename from apps/homepage/src/lib/i18n.server.ts
rename to storefront/src/lib/i18n.server.ts
diff --git a/apps/homepage/src/lib/i18n.test.ts b/storefront/src/lib/i18n.test.ts
similarity index 100%
rename from apps/homepage/src/lib/i18n.test.ts
rename to storefront/src/lib/i18n.test.ts
diff --git a/apps/homepage/src/lib/i18n.ts b/storefront/src/lib/i18n.ts
similarity index 100%
rename from apps/homepage/src/lib/i18n.ts
rename to storefront/src/lib/i18n.ts
diff --git a/apps/homepage/src/lib/preferences.test.ts b/storefront/src/lib/preferences.test.ts
similarity index 100%
rename from apps/homepage/src/lib/preferences.test.ts
rename to storefront/src/lib/preferences.test.ts
diff --git a/storefront/src/lib/preferences.ts b/storefront/src/lib/preferences.ts
new file mode 100644
index 0000000..3b0b0d0
--- /dev/null
+++ b/storefront/src/lib/preferences.ts
@@ -0,0 +1,94 @@
+export const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
+export const SHARED_LANGUAGE_KEY = 'rentaldrivego-language'
+export const SHARED_THEME_KEY = 'rentaldrivego-theme'
+
+function readEmployeeToken() {
+  return null
+}
+
+function decodeEmployeeId(token: string | null) {
+  if (!token) return null
+
+  try {
+    const encoded = token.split('.')[1] ?? ''
+    const normalized = encoded.replace(/-/g, '+').replace(/_/g, '/')
+    const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=')
+    const payload = JSON.parse(atob(padded)) as { sub?: string }
+    return typeof payload.sub === 'string' && payload.sub ? payload.sub : null
+  } catch {
+    return null
+  }
+}
+
+export function getScopedPreferenceKey(baseKey: string) {
+  const employeeId = decodeEmployeeId(readEmployeeToken())
+  return employeeId ? `${baseKey}:${employeeId}` : baseKey
+}
+
+export function getScopedPreferenceCookieName(baseKey: string) {
+  const employeeId = decodeEmployeeId(readEmployeeToken())
+  return employeeId ? `${baseKey}--${employeeId}` : baseKey
+}
+
+function readCookie(name: string) {
+  if (typeof document === 'undefined') return null
+
+  return document.cookie
+    .split(';')
+    .map((chunk) => chunk.trim())
+    .find((chunk) => chunk.startsWith(`${name}=`))
+    ?.slice(name.length + 1) ?? null
+}
+
+function writeCookie(name: string, value: string) {
+  if (typeof document === 'undefined') return
+  document.cookie = `${name}=${value}; path=/; max-age=31536000; samesite=lax`
+}
+
+export function readCurrentUserScopedPreference(baseKey: string) {
+  if (typeof window === 'undefined') return null
+
+  const scopedCookie = readCookie(getScopedPreferenceCookieName(baseKey))
+  if (scopedCookie) return scopedCookie
+
+  return window.localStorage.getItem(getScopedPreferenceKey(baseKey))
+}
+
+export function readScopedPreference(baseKey: string, legacyKeys: string[] = []) {
+  if (typeof window === 'undefined') return null
+
+  const scopedCookie = readCookie(getScopedPreferenceCookieName(baseKey))
+  if (scopedCookie) return scopedCookie
+
+  const sharedCookie = readCookie(baseKey)
+  if (sharedCookie) return sharedCookie
+
+  const scopedKey = getScopedPreferenceKey(baseKey)
+  const candidates = [scopedKey, baseKey, ...legacyKeys]
+
+  for (const key of candidates) {
+    const value = window.localStorage.getItem(key)
+    if (value) return value
+  }
+
+  return null
+}
+
+export function writeScopedPreference(baseKey: string, value: string, legacyKeys: string[] = []) {
+  if (typeof window === 'undefined') return
+
+  const scopedKey = getScopedPreferenceKey(baseKey)
+  const scopedCookie = getScopedPreferenceCookieName(baseKey)
+
+  writeCookie(baseKey, value)
+  if (scopedCookie !== baseKey) {
+    writeCookie(scopedCookie, value)
+  }
+
+  window.localStorage.setItem(scopedKey, value)
+  window.localStorage.setItem(baseKey, value)
+
+  for (const key of legacyKeys) {
+    window.localStorage.setItem(key, value)
+  }
+}
diff --git a/storefront/src/lib/renter.test.ts b/storefront/src/lib/renter.test.ts
new file mode 100644
index 0000000..74a4ef3
--- /dev/null
+++ b/storefront/src/lib/renter.test.ts
@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+function installBrowser(_token?: string) {
+  const store = new Map<string, string>()
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      localStorage: {
+        getItem: vi.fn((key: string) => store.get(key) ?? null),
+        setItem: vi.fn((key: string, value: string) => store.set(key, value)),
+        removeItem: vi.fn((key: string) => store.delete(key)),
+      },
+    },
+  })
+  return store
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  Reflect.deleteProperty(globalThis, 'window')
+  Reflect.deleteProperty(globalThis, 'fetch')
+  vi.resetModules()
+})
+
+describe('renter client helpers', () => {
+  it('clears renter sessions through the API logout endpoint', async () => {
+    installBrowser('renter-token')
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { success: true } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+    const { clearRenterSession } = await import('./renter')
+
+    clearRenterSession()
+
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringMatching(/\/api\/v1\/auth\/renter\/logout$/), expect.objectContaining({
+      method: 'POST',
+      credentials: 'include',
+    }))
+  })
+
+  it('sends cookies and unwraps renter profile data', async () => {
+    installBrowser('renter-token')
+    const fetchMock = vi.fn(async () => ({ ok: true, status: 200, json: async () => ({ data: { id: 'renter_1' } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+    const { loadRenterProfile } = await import('./renter')
+
+    await expect(loadRenterProfile()).resolves.toEqual({ id: 'renter_1' })
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringMatching(/\/api\/v1\/auth\/renter\/me$/), expect.objectContaining({
+      credentials: 'include',
+      headers: expect.objectContaining({ 'Content-Type': 'application/json' }),
+    }))
+  })
+
+  it('removes stale tokens and throws renter auth errors on 401', async () => {
+    installBrowser('expired-token')
+    Object.defineProperty(globalThis, 'fetch', {
+      configurable: true,
+      value: vi.fn(async () => ({ ok: false, status: 401, json: async () => ({ message: 'Unauthorized' }) })),
+    })
+    const { loadRenterNotifications, RenterAuthError } = await import('./renter')
+
+    await expect(loadRenterNotifications()).rejects.toBeInstanceOf(RenterAuthError)
+
+  })
+
+  it('serializes preference updates to the renter notification endpoint', async () => {
+    installBrowser('renter-token')
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { success: true } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+    const { updateRenterPreferences } = await import('./renter')
+    const body = [{ notificationType: 'reservation', channel: 'email', enabled: true }]
+
+    await expect(updateRenterPreferences(body)).resolves.toEqual({ success: true })
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringMatching(/\/api\/v1\/notifications\/renter\/preferences$/), expect.objectContaining({
+      method: 'PATCH',
+      body: JSON.stringify(body),
+    }))
+  })
+})
diff --git a/storefront/src/lib/renter.ts b/storefront/src/lib/renter.ts
new file mode 100644
index 0000000..32f32df
--- /dev/null
+++ b/storefront/src/lib/renter.ts
@@ -0,0 +1,107 @@
+'use client'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+
+export interface SavedCompany {
+  id: string
+  brand?: {
+    displayName: string
+    subdomain: string
+    logoUrl?: string | null
+  } | null
+}
+
+export interface RenterProfile {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string | null
+  preferredLocale?: string
+  preferredCurrency?: string
+  emailVerified?: boolean
+  savedCompanies?: SavedCompany[]
+}
+
+export interface RenterPreference {
+  notificationType: string
+  channel: string
+  enabled: boolean
+}
+
+export interface RenterNotification {
+  id: string
+  title: string
+  body: string
+  type: string
+  status: string
+  readAt: string | null
+  createdAt: string
+}
+
+export class RenterAuthError extends Error {
+  constructor(message = 'Authentication required') {
+    super(message)
+    this.name = 'RenterAuthError'
+  }
+}
+
+async function renterFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...init,
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init?.headers ?? {}),
+    },
+  })
+
+  const json = await res.json().catch(() => null)
+  if (res.status === 401) {
+    throw new RenterAuthError()
+  }
+  if (!res.ok) throw new Error(json?.message ?? 'Request failed')
+  return (json?.data ?? json) as T
+}
+
+export function clearRenterSession() {
+  void fetch(`${API_BASE}/auth/renter/logout`, { method: 'POST', credentials: 'include' })
+}
+
+export function loadRenterProfile() {
+  return renterFetch<RenterProfile>('/auth/renter/me')
+}
+
+export function updateRenterProfile(body: Partial<RenterProfile>) {
+  return renterFetch<RenterProfile>('/auth/renter/me', {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+  })
+}
+
+export function loadRenterNotifications() {
+  return renterFetch<RenterNotification[]>('/notifications/renter')
+}
+
+export function markRenterNotificationRead(id: string) {
+  return renterFetch<{ success: boolean }>(`/notifications/renter/${id}/read`, {
+    method: 'POST',
+  })
+}
+
+export function markAllRenterNotificationsRead() {
+  return renterFetch<{ success: boolean }>('/notifications/renter/read-all', {
+    method: 'POST',
+  })
+}
+
+export function loadRenterPreferences() {
+  return renterFetch<RenterPreference[]>('/notifications/renter/preferences')
+}
+
+export function updateRenterPreferences(body: RenterPreference[]) {
+  return renterFetch<{ success: boolean }>('/notifications/renter/preferences', {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+  })
+}
diff --git a/apps/homepage/src/middleware.test.ts b/storefront/src/middleware.test.ts
similarity index 100%
rename from apps/homepage/src/middleware.test.ts
rename to storefront/src/middleware.test.ts
diff --git a/storefront/src/proxy.ts b/storefront/src/proxy.ts
new file mode 100644
index 0000000..075525a
--- /dev/null
+++ b/storefront/src/proxy.ts
@@ -0,0 +1,77 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
+const MARKETPLACE_LANGUAGE_COOKIE = 'marketplace-language'
+const DASHBOARD_BASE_PATH = '/dashboard'
+
+function rejectInternalSubrequest(request: NextRequest): NextResponse | null {
+  if (!request.headers.has('x-middleware-subrequest')) return null
+  return new NextResponse('Unsupported internal request header', { status: 400 })
+}
+
+function isValidLanguage(val: string | null | undefined): val is 'en' | 'fr' | 'ar' {
+  return val === 'en' || val === 'fr' || val === 'ar'
+}
+
+function detectFromAcceptLanguage(header: string | null): 'en' | 'fr' | 'ar' {
+  if (!header) return 'en'
+  for (const entry of header.split(',')) {
+    const code = entry.split(';')[0].trim().split('-')[0].toLowerCase()
+    if (code === 'ar' || code === 'fr' || code === 'en') return code as 'en' | 'fr' | 'ar'
+  }
+  return 'en'
+}
+
+function deduplicateDashboardPath(pathname: string): string | null {
+  if (!pathname.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) return null
+
+  let normalized = pathname
+  while (normalized.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) {
+    normalized = normalized.slice(DASHBOARD_BASE_PATH.length)
+  }
+  return normalized || DASHBOARD_BASE_PATH
+}
+
+export function proxy(request: NextRequest) {
+  const rejected = rejectInternalSubrequest(request)
+  if (rejected) return rejected
+
+  const deduped = deduplicateDashboardPath(request.nextUrl.pathname)
+  if (deduped) {
+    const url = request.nextUrl.clone()
+    url.pathname = deduped
+    return NextResponse.redirect(url, 307)
+  }
+
+  const sharedLang = request.cookies.get(SHARED_LANGUAGE_COOKIE)?.value
+
+  if (isValidLanguage(sharedLang)) return NextResponse.next()
+
+  const legacyLang = request.cookies.get(MARKETPLACE_LANGUAGE_COOKIE)?.value
+  const resolved: 'en' | 'fr' | 'ar' = isValidLanguage(legacyLang)
+    ? legacyLang
+    : detectFromAcceptLanguage(request.headers.get('accept-language'))
+
+  const requestHeaders = new Headers(request.headers)
+  const existing = request.headers.get('cookie') ?? ''
+  const injected = `${SHARED_LANGUAGE_COOKIE}=${resolved}`
+  requestHeaders.set('cookie', existing ? `${existing}; ${injected}` : injected)
+
+  const response = NextResponse.next({ request: { headers: requestHeaders } })
+
+  response.cookies.set(SHARED_LANGUAGE_COOKIE, resolved, {
+    maxAge: 365 * 24 * 60 * 60,
+    path: '/',
+    sameSite: 'lax',
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    '/dashboard/dashboard/:path*',
+    '/((?!_next/static|_next/image|_next/webpack-hmr|favicon\\.ico|.*\\.(?:png|ico|jpg|jpeg|svg|webp)$).*)',
+  ],
+}
diff --git a/storefront/src/styles/phase16-tokens.css b/storefront/src/styles/phase16-tokens.css
new file mode 100644
index 0000000..938313c
--- /dev/null
+++ b/storefront/src/styles/phase16-tokens.css
@@ -0,0 +1,143 @@
+/* RentalDriveGo Phase 16 application design tokens.
+ * Derived from the approved marketing-site token system and adapted for the
+ * class-based theme controls used by the operational applications.
+ */
+:root {
+  --rdg-blue-50: #eff6ff;
+  --rdg-blue-100: #dbeafe;
+  --rdg-blue-200: #bfdbfe;
+  --rdg-blue-500: #2874e8;
+  --rdg-blue-600: #1b5dd8;
+  --rdg-blue-700: #174bb5;
+  --rdg-blue-800: #183d88;
+  --rdg-orange-100: #ffedd5;
+  --rdg-orange-400: #fb923c;
+  --rdg-orange-600: #ea580c;
+  --rdg-orange-700: #c2410c;
+  --rdg-navy-950: #081426;
+  --rdg-navy-900: #0d1b2e;
+  --rdg-navy-850: #11233b;
+  --rdg-navy-800: #162b46;
+  --rdg-gray-25: #fbfdff;
+  --rdg-gray-50: #f7f9fc;
+  --rdg-gray-100: #eef2f7;
+  --rdg-gray-200: #dbe3ed;
+  --rdg-gray-300: #c6d0dc;
+  --rdg-gray-500: #64748b;
+  --rdg-gray-600: #475569;
+  --rdg-gray-700: #334155;
+  --rdg-gray-800: #1e293b;
+  --rdg-gray-900: #0f172a;
+  --rdg-green-100: #dcfce7;
+  --rdg-green-700: #15803d;
+  --rdg-amber-100: #fef3c7;
+  --rdg-amber-800: #92400e;
+  --rdg-red-100: #fee2e2;
+  --rdg-red-700: #b91c1c;
+
+  --rdg-radius-sm: 10px;
+  --rdg-radius-md: 16px;
+  --rdg-radius-lg: 24px;
+  --rdg-radius-pill: 999px;
+  --rdg-touch-min: 44px;
+  --rdg-container-max: 1280px;
+  --rdg-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --rdg-font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
+
+  --rdg-surface-page: var(--rdg-gray-25);
+  --rdg-surface-primary: #ffffff;
+  --rdg-surface-elevated: #ffffff;
+  --rdg-surface-muted: #f2f6fb;
+  --rdg-surface-strong: #e8f0fa;
+  --rdg-text-primary: #102035;
+  --rdg-text-secondary: #52647a;
+  --rdg-text-subdued: var(--rdg-gray-500);
+  --rdg-text-inverse: #f8fafc;
+  --rdg-border: #d8e2ee;
+  --rdg-border-strong: #bdcad9;
+  --rdg-action-primary: var(--rdg-blue-700);
+  --rdg-action-primary-hover: var(--rdg-blue-800);
+  --rdg-action-conversion: var(--rdg-orange-700);
+  --rdg-action-conversion-hover: #9a3412;
+  --rdg-focus: #f97316;
+  --rdg-soft-blue: #eef5ff;
+  --rdg-soft-orange: #fff7ed;
+  --rdg-shadow-color: rgba(8, 20, 38, 0.12);
+  --rdg-shadow-subtle: 0 1px 2px var(--rdg-shadow-color);
+  --rdg-shadow-card: 0 20px 60px var(--rdg-shadow-color);
+  --rdg-shadow-overlay: 0 28px 80px var(--rdg-shadow-color);
+
+  /* Compatibility aliases for the existing apps. */
+  --primary: var(--rdg-action-primary);
+  --primary-hover: var(--rdg-action-primary-hover);
+  --accent: var(--rdg-action-conversion);
+  --bg-elevated: var(--rdg-surface-elevated);
+  --border-accent: var(--rdg-border);
+  --glass-bg: color-mix(in srgb, var(--rdg-surface-elevated) 88%, transparent);
+  --shadow-card: var(--rdg-shadow-card);
+  --shadow-glow: 0 0 20px color-mix(in srgb, var(--rdg-action-conversion) 18%, transparent);
+}
+
+html.dark,
+html[data-theme='dark'] {
+  --rdg-surface-page: var(--rdg-navy-950);
+  --rdg-surface-primary: var(--rdg-navy-900);
+  --rdg-surface-elevated: var(--rdg-navy-850);
+  --rdg-surface-muted: #0b1a2d;
+  --rdg-surface-strong: #172d48;
+  --rdg-text-primary: #eef5ff;
+  --rdg-text-secondary: #adbed2;
+  --rdg-text-subdued: var(--rdg-gray-300);
+  --rdg-text-inverse: var(--rdg-navy-950);
+  --rdg-border: #263c56;
+  --rdg-border-strong: #3a536e;
+  --rdg-action-primary: #76a9ff;
+  --rdg-action-primary-hover: #9bc2ff;
+  --rdg-action-conversion: var(--rdg-orange-400);
+  --rdg-action-conversion-hover: #fdba74;
+  --rdg-focus: var(--rdg-orange-400);
+  --rdg-soft-blue: #10284a;
+  --rdg-soft-orange: #3a2015;
+  --rdg-shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+html.light,
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+html[lang='ar'] body {
+  font-family: var(--rdg-font-arabic);
+  line-height: 1.8;
+}
+
+::selection {
+  background: var(--rdg-blue-200);
+  color: var(--rdg-gray-900);
+}
+
+html.dark ::selection,
+html[data-theme='dark'] ::selection {
+  background: var(--rdg-blue-800);
+  color: var(--rdg-gray-25);
+}
+
+:focus-visible {
+  outline: 3px solid var(--rdg-focus);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/storefront/tailwind.config.ts b/storefront/tailwind.config.ts
new file mode 100644
index 0000000..8055fd6
--- /dev/null
+++ b/storefront/tailwind.config.ts
@@ -0,0 +1,16 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config
diff --git a/storefront/tsconfig.json b/storefront/tsconfig.json
new file mode 100644
index 0000000..b575f7d
--- /dev/null
+++ b/storefront/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/storefront/vitest.config.ts b/storefront/vitest.config.ts
new file mode 100644
index 0000000..474502a
--- /dev/null
+++ b/storefront/vitest.config.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['src/**/*.test.ts'],
+    clearMocks: true,
+    restoreMocks: true,
+  },
+})
diff --git a/validate-phase16-design.mjs b/validate-phase16-design.mjs
new file mode 100644
index 0000000..21fd2a9
--- /dev/null
+++ b/validate-phase16-design.mjs
@@ -0,0 +1,119 @@
+import { readFile, readdir, stat } from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const errors = [];
+
+async function exists(target) {
+  try { await stat(target); return true; } catch { return false; }
+}
+
+async function walk(directory) {
+  const files = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    if (['node_modules', '.next', '.turbo', 'dist', 'coverage'].includes(entry.name)) continue;
+    const target = path.join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...(await walk(target)));
+    else files.push(target);
+  }
+  return files;
+}
+
+function requireText(contents, required, label) {
+  for (const marker of required) {
+    if (!contents.includes(marker)) errors.push(`${label}: missing ${marker}`);
+  }
+}
+
+for (const app of ['admin', 'api', 'dashboard', 'homepage', 'storefront']) {
+  if (!(await exists(path.join(root, app)))) errors.push(`missing application directory: ${app}`);
+  if (!(await exists(path.join(root, app, 'package.json')))) errors.push(`${app}: missing package.json`);
+}
+
+for (const app of ['admin', 'dashboard']) {
+  const tokenPath = path.join(root, app, 'src/styles/phase16-tokens.css');
+  const globalsPath = path.join(root, app, 'src/app/globals.css');
+  if (!(await exists(tokenPath))) errors.push(`${app}: missing Phase 16 token file`);
+  if (!(await exists(globalsPath))) errors.push(`${app}: missing globals.css`);
+
+  const tokens = await readFile(tokenPath, 'utf8');
+  requireText(tokens, [
+    '--rdg-blue-700', '--rdg-orange-600', '--rdg-sidebar-size',
+    '--rdg-header-size', '--rdg-radius-lg', '--rdg-shadow-card',
+  ], `${app} tokens`);
+
+  const globals = await readFile(globalsPath, 'utf8');
+  requireText(globals, [
+    'phase16-tokens.css', '.rdg-app-shell', '.rdg-sidebar', '.rdg-topbar',
+    '.rdg-page-hero', '.rdg-page-heading', '.btn-primary', '.btn-conversion',
+    '.panel', '.field', '@media (forced-colors: active)',
+  ], `${app} globals`);
+
+  const withoutComments = globals.replace(/\/\*[\s\S]*?\*\//g, '');
+  const balance = [...withoutComments].reduce((value, character) =>
+    character === '{' ? value + 1 : character === '}' ? value - 1 : value, 0);
+  if (balance !== 0) errors.push(`${app}: unbalanced CSS braces (${balance})`);
+}
+
+const dashboardLayout = await readFile(path.join(root, 'dashboard/src/app/(dashboard)/layout.tsx'), 'utf8');
+requireText(dashboardLayout, ['rdg-app-shell', 'rdg-workspace', 'rdg-app-main', 'rdg-app-content'], 'dashboard shell');
+
+const dashboardSidebar = await readFile(path.join(root, 'dashboard/src/components/layout/Sidebar.tsx'), 'utf8');
+requireText(dashboardSidebar, ['rdg-sidebar', 'rdg-nav-item', 'aria-current', 'RentalDriveGo'], 'dashboard sidebar');
+
+const dashboardTopbar = await readFile(path.join(root, 'dashboard/src/components/layout/TopBar.tsx'), 'utf8');
+requireText(dashboardTopbar, ['rdg-topbar', 'rdg-system-status', 'rdg-search-field'], 'dashboard topbar');
+
+const adminLayout = await readFile(path.join(root, 'admin/src/app/dashboard/layout.tsx'), 'utf8');
+requireText(adminLayout, [
+  'rdg-app-shell', 'rdg-sidebar', 'rdg-nav-item', 'rdg-topbar',
+  'rdg-system-status', 'aria-current', 'RentalDriveGo',
+], 'admin shell');
+
+const routeRoots = [
+  path.join(root, 'admin/src/app/dashboard'),
+  path.join(root, 'dashboard/src/app/(dashboard)'),
+];
+for (const routeRoot of routeRoots) {
+  const pages = (await walk(routeRoot)).filter((file) => file.endsWith('page.tsx'));
+  for (const page of pages) {
+    const contents = await readFile(page, 'utf8');
+    if (!['rdg-page-heading', 'rdg-page-hero'].some((marker) => contents.includes(marker))) {
+      errors.push(`${path.relative(root, page)}: missing Phase 16 page heading or hero`);
+    }
+  }
+}
+
+for (const app of ['admin', 'dashboard']) {
+  for (const file of await walk(path.join(root, app, 'src'))) {
+    if (!/\.(ts|tsx|css|json)$/.test(file)) continue;
+    const contents = await readFile(file, 'utf8');
+    if (/RentalDriveGo/i.test(contents)) errors.push(`${path.relative(root, file)}: retired RentalDriveGo brand remains`);
+  }
+}
+
+const authChecks = [
+  'dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx',
+  'dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx',
+];
+for (const relative of authChecks) {
+  const contents = await readFile(path.join(root, relative), 'utf8');
+  if (!contents.includes('PublicPageLayout')) errors.push(`${relative}: shared public layout not applied`);
+}
+
+for (const relative of [
+  'storefront/src/components/public/SiteNavbar.tsx',
+  'storefront/src/components/public/SiteFooter.tsx',
+  'storefront/src/components/public/SitePageLayout.tsx',
+]) {
+  if (!(await exists(path.join(root, relative)))) errors.push(`missing shared storefront component: ${relative}`);
+}
+
+if (errors.length) {
+  console.error(errors.join('\n'));
+  process.exit(1);
+}
+
+console.log('Phase 16 dashboard/admin design checks passed.');