From 96df7edf88952e4c86c12354377d828eb6e5f359 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Mon, 10 Nov 2025 11:03:45 +0100
Subject: [PATCH] Refactor `useAuth` hook, settings components, and docs for
 formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
---
 frontend/.nycrc.json                          |  12 +-
 frontend/IMPLEMENTATION_PLAN.md               | 340 ++++++-
 frontend/docs/API_INTEGRATION.md              | 165 ++--
 frontend/docs/ARCHITECTURE.md                 | 140 ++-
 frontend/docs/CODING_STANDARDS.md             | 222 +++--
 frontend/docs/COMMON_PITFALLS.md              | 126 ++-
 frontend/docs/E2E_COVERAGE_GUIDE.md           |  33 +-
 frontend/docs/E2E_PERFORMANCE_OPTIMIZATION.md |  60 +-
 frontend/docs/FEATURE_EXAMPLES.md             |  15 +-
 frontend/docs/design-system/00-quick-start.md |  52 +-
 frontend/docs/design-system/01-foundations.md | 289 +++---
 frontend/docs/design-system/02-components.md  |  78 +-
 frontend/docs/design-system/03-layouts.md     |  70 +-
 .../design-system/04-spacing-philosophy.md    | 108 ++-
 .../design-system/05-component-creation.md    | 205 ++---
 frontend/docs/design-system/06-forms.md       | 232 ++---
 .../docs/design-system/07-accessibility.md    |  91 +-
 .../docs/design-system/08-ai-guidelines.md    | 151 +--
 frontend/docs/design-system/99-reference.md   | 255 ++---
 .../docs/design-system/PROJECT_PROGRESS.md    |  11 +
 frontend/docs/design-system/README.md         |  33 +-
 frontend/e2e/README.md                        |   3 +
 frontend/e2e/admin-access.spec.ts             |  38 +-
 frontend/e2e/admin-dashboard.spec.ts          |  18 +-
 .../e2e/admin-organization-members.spec.ts    |  21 +-
 frontend/e2e/admin-organizations.spec.ts      |   8 +-
 frontend/e2e/admin-users.spec.ts              |  77 +-
 frontend/e2e/auth-guard.spec.ts               |   4 +-
 frontend/e2e/auth-login.spec.ts               |  10 +-
 frontend/e2e/auth-password-reset.spec.ts      |  10 +-
 frontend/e2e/auth-register.spec.ts            |   5 +-
 frontend/e2e/helpers/auth.ts                  |  25 +-
 frontend/e2e/helpers/coverage.ts              |   6 +-
 frontend/e2e/homepage.spec.ts                 |  52 +-
 frontend/frontend-requirements.md             | 358 ++++++--
 frontend/jest.config.js                       |  13 +-
 frontend/jest.setup.js                        |   2 +-
 frontend/lighthouse-report.json               | 869 +++++-------------
 frontend/next.config.ts                       |  40 +-
 frontend/postcss.config.mjs                   |   2 +-
 frontend/scripts/convert-v8-to-istanbul.ts    |  10 +-
 frontend/scripts/merge-coverage.ts            |  38 +-
 frontend/src/app/(auth)/layout.tsx            |   6 +-
 frontend/src/app/(auth)/login/page.tsx        |   9 +-
 .../confirm/PasswordResetConfirmContent.tsx   |  12 +-
 .../(auth)/password-reset/confirm/page.tsx    |  18 +-
 .../src/app/(auth)/password-reset/page.tsx    |  11 +-
 frontend/src/app/(auth)/register/page.tsx     |   4 +-
 frontend/src/app/(authenticated)/layout.tsx   |  10 +-
 .../app/(authenticated)/settings/layout.tsx   |  18 +-
 .../settings/password/page.tsx                |   4 +-
 .../settings/preferences/page.tsx             |  10 +-
 .../(authenticated)/settings/profile/page.tsx |   8 +-
 .../settings/sessions/page.tsx                |   4 +-
 frontend/src/app/admin/layout.tsx             |   6 +-
 frontend/src/app/admin/page.tsx               |   8 +-
 frontend/src/app/admin/settings/page.tsx      |  16 +-
 frontend/src/app/admin/users/page.tsx         |   8 +-
 frontend/src/app/dev/components/page.tsx      |   4 +-
 .../dev/docs/design-system/[...slug]/page.tsx |  11 +-
 frontend/src/app/dev/docs/page.tsx            |  29 +-
 frontend/src/app/dev/forms/page.tsx           |  59 +-
 frontend/src/app/dev/layouts/page.tsx         |  77 +-
 frontend/src/app/dev/page.tsx                 |  48 +-
 frontend/src/app/dev/spacing/page.tsx         |  48 +-
 frontend/src/app/forbidden/page.tsx           |  13 +-
 frontend/src/app/globals.css                  |  80 +-
 frontend/src/app/layout.tsx                   |  32 +-
 frontend/src/app/page.tsx                     |   5 +-
 frontend/src/app/providers.tsx                |   3 +-
 .../src/components/admin/AdminSidebar.tsx     |  15 +-
 frontend/src/components/admin/Breadcrumbs.tsx |   5 +-
 .../src/components/admin/DashboardStats.tsx   |   5 +-
 frontend/src/components/admin/StatCard.tsx    |  30 +-
 .../admin/organizations/AddMemberDialog.tsx   |  24 +-
 .../admin/organizations/MemberActionMenu.tsx  |  19 +-
 .../organizations/OrganizationActionMenu.tsx  |   9 +-
 .../organizations/OrganizationFormDialog.tsx  |  22 +-
 .../organizations/OrganizationListTable.tsx   |  23 +-
 .../OrganizationManagementContent.tsx         |   4 +-
 .../OrganizationMembersContent.tsx            |   4 +-
 .../OrganizationMembersTable.tsx              |  24 +-
 .../admin/users/BulkActionToolbar.tsx         |   8 +-
 .../components/admin/users/UserActionMenu.tsx |   4 +-
 .../components/admin/users/UserFormDialog.tsx |  44 +-
 .../components/admin/users/UserListTable.tsx  |  36 +-
 .../admin/users/UserManagementContent.tsx     |  11 +-
 frontend/src/components/auth/AuthGuard.tsx    |   5 +-
 .../src/components/auth/AuthLayoutClient.tsx  |   4 +-
 frontend/src/components/auth/LoginForm.tsx    |  11 +-
 .../auth/PasswordResetConfirmForm.tsx         |  14 +-
 .../auth/PasswordResetRequestForm.tsx         |  11 +-
 frontend/src/components/auth/RegisterForm.tsx |  49 +-
 .../charts/OrganizationDistributionChart.tsx  |  11 +-
 .../charts/SessionActivityChart.tsx           |  11 +-
 .../src/components/charts/UserGrowthChart.tsx |  11 +-
 frontend/src/components/dev/BeforeAfter.tsx   |  19 +-
 frontend/src/components/dev/CodeSnippet.tsx   |  11 +-
 .../src/components/dev/ComponentShowcase.tsx  |  46 +-
 .../src/components/dev/DevBreadcrumbs.tsx     |   5 +-
 frontend/src/components/dev/Example.tsx       |  13 +-
 frontend/src/components/docs/CodeBlock.tsx    |   4 +-
 .../src/components/docs/MarkdownContent.tsx   |  39 +-
 frontend/src/components/forms/FormField.tsx   |   9 +-
 .../src/components/home/AnimatedTerminal.tsx  |  18 +-
 frontend/src/components/home/CTASection.tsx   |  28 +-
 .../src/components/home/ContextSection.tsx    |   4 +-
 .../components/home/DemoCredentialsModal.tsx  |   3 +-
 frontend/src/components/home/DemoSection.tsx  |   7 +-
 frontend/src/components/home/FeatureGrid.tsx  |   3 +-
 frontend/src/components/home/Header.tsx       |  21 +-
 frontend/src/components/home/HeroSection.tsx  |  46 +-
 .../src/components/home/PhilosophySection.tsx |  19 +-
 .../src/components/home/QuickStartCode.tsx    |   7 +-
 frontend/src/components/home/StatsSection.tsx |   3 +-
 .../src/components/home/TechStackSection.tsx  |   7 +-
 frontend/src/components/layout/Header.tsx     |  14 +-
 .../settings/PasswordChangeForm.tsx           |  52 +-
 .../settings/ProfileSettingsForm.tsx          |  20 +-
 .../src/components/settings/SessionCard.tsx   |   8 +-
 .../components/settings/SessionsManager.tsx   |  14 +-
 frontend/src/components/theme/ThemeToggle.tsx |   6 +-
 frontend/src/components/ui/alert-dialog.tsx   |  78 +-
 frontend/src/components/ui/alert.tsx          |  60 +-
 frontend/src/components/ui/avatar.tsx         |  31 +-
 frontend/src/components/ui/badge.tsx          |  27 +-
 frontend/src/components/ui/button.tsx         |  57 +-
 frontend/src/components/ui/card.tsx           | 115 +--
 frontend/src/components/ui/checkbox.tsx       |  22 +-
 frontend/src/components/ui/dialog.tsx         |  80 +-
 frontend/src/components/ui/dropdown-menu.tsx  | 107 +--
 frontend/src/components/ui/input.tsx          |  16 +-
 frontend/src/components/ui/label.tsx          |  29 +-
 frontend/src/components/ui/popover.tsx        |  24 +-
 frontend/src/components/ui/select.tsx         |  79 +-
 frontend/src/components/ui/separator.tsx      |  43 +-
 frontend/src/components/ui/sheet.tsx          |  99 +-
 frontend/src/components/ui/skeleton.tsx       |  16 +-
 frontend/src/components/ui/sonner.tsx         |  28 +-
 frontend/src/components/ui/table.tsx          | 110 +--
 frontend/src/components/ui/tabs.tsx           |  30 +-
 frontend/src/components/ui/textarea.tsx       |  37 +-
 frontend/src/lib/api/client.ts                |  18 +-
 frontend/src/lib/api/errors.ts                |  59 +-
 frontend/src/lib/api/hooks/useAdmin.tsx       |  90 +-
 frontend/src/lib/api/hooks/useAuth.ts         |  14 +-
 frontend/src/lib/api/hooks/useUser.ts         |  12 +-
 frontend/src/lib/auth/AuthContext.tsx         |  19 +-
 frontend/src/lib/auth/crypto.ts               |  34 +-
 frontend/src/lib/auth/index.ts                |   6 +-
 frontend/src/lib/auth/storage.ts              |  29 +-
 frontend/src/lib/chart-colors.ts              |  37 +-
 frontend/src/lib/stores/authStore.ts          |  34 +-
 frontend/src/types/api.d.ts                   |  10 +-
 .../PasswordResetConfirmContent.test.tsx      |   8 +-
 .../app/(auth)/password-reset/page.test.tsx   |   4 +-
 .../settings/password/page.test.tsx           |   6 +-
 .../settings/preferences/page.test.tsx        |   4 +-
 .../settings/profile/page.test.tsx            |   4 +-
 .../settings/sessions/page.test.tsx           |   6 +-
 frontend/tests/app/admin/layout.test.tsx      |   4 +-
 .../organizations/[id]/members/page.test.tsx  |   4 +-
 .../app/admin/organizations/page.test.tsx     |   4 +-
 frontend/tests/app/admin/page.test.tsx        |  20 +-
 .../tests/app/admin/settings/page.test.tsx    |  28 +-
 frontend/tests/app/admin/users/page.test.tsx  |  14 +-
 frontend/tests/app/forbidden/page.test.tsx    |   8 +-
 frontend/tests/app/page.test.tsx              |  23 +-
 .../components/admin/AdminSidebar.test.tsx    |   5 +-
 .../tests/components/admin/StatCard.test.tsx  |  36 +-
 .../organizations/AddMemberDialog.test.tsx    |   8 +-
 .../organizations/MemberActionMenu.test.tsx   |   4 +-
 .../OrganizationActionMenu.test.tsx           |  13 +-
 .../OrganizationFormDialog.test.tsx           |  27 +-
 .../OrganizationListTable.test.tsx            |  23 +-
 .../OrganizationManagementContent.test.tsx    |  28 +-
 .../admin/users/BulkActionToolbar.test.tsx    |  40 +-
 .../admin/users/UserActionMenu.test.tsx       | 202 +---
 .../admin/users/UserListTable.test.tsx        |  44 +-
 .../users/UserManagementContent.test.tsx      |  52 +-
 .../tests/components/auth/AuthGuard.test.tsx  |   8 +-
 .../tests/components/auth/LoginForm.test.tsx  |   8 +-
 .../auth/PasswordResetConfirmForm.test.tsx    |  39 +-
 .../auth/PasswordResetRequestForm.test.tsx    |  20 +-
 .../components/auth/RegisterForm.test.tsx     |   8 +-
 .../components/charts/ChartCard.test.tsx      |  12 +-
 .../tests/components/forms/FormField.test.tsx | 120 +--
 .../components/forms/useFormError.test.tsx    |  40 +-
 .../tests/components/home/CTASection.test.tsx |  98 +-
 .../home/DemoCredentialsModal.test.tsx        |  20 +-
 .../tests/components/home/Header.test.tsx     | 131 ++-
 .../components/home/HeroSection.test.tsx      | 101 +-
 .../components/home/StatsSection.test.tsx     |  13 +-
 .../tests/components/layout/Footer.test.tsx   |   4 +-
 .../tests/components/layout/Header.test.tsx   |   4 +-
 .../settings/PasswordChangeForm.test.tsx      |   4 +-
 .../settings/ProfileSettingsForm.test.tsx     |   6 +-
 .../components/settings/SessionCard.test.tsx  |   4 +-
 .../settings/SessionsManager.test.tsx         |  14 +-
 .../components/theme/ThemeToggle.test.tsx     |   1 -
 .../hooks/usePrefersReducedMotion.test.ts     |  18 +-
 frontend/tests/lib/api/errors.test.ts         |  24 +-
 .../tests/lib/api/hooks/useAdmin.test.tsx     |  44 +-
 frontend/tests/lib/api/hooks/useAuth.test.tsx |  10 +-
 .../tests/lib/api/hooks/useSession.test.tsx   |   4 +-
 frontend/tests/lib/api/hooks/useUser.test.tsx |   4 +-
 frontend/tests/lib/auth/storage.test.ts       |   5 +-
 frontend/tests/lib/stores/authStore.test.ts   |  81 +-
 208 files changed, 4056 insertions(+), 4556 deletions(-)

diff --git a/frontend/.nycrc.json b/frontend/.nycrc.json
index d1eb960..d42a262 100644
--- a/frontend/.nycrc.json
+++ b/frontend/.nycrc.json
@@ -1,8 +1,6 @@
 {
   "all": true,
-  "include": [
-    "src/**/*.{js,jsx,ts,tsx}"
-  ],
+  "include": ["src/**/*.{js,jsx,ts,tsx}"],
   "exclude": [
     "src/**/*.d.ts",
     "src/**/*.test.{js,jsx,ts,tsx}",
@@ -16,13 +14,7 @@
     "src/lib/utils/cn.ts",
     "src/middleware.ts"
   ],
-  "reporter": [
-    "text",
-    "text-summary",
-    "html",
-    "json",
-    "lcov"
-  ],
+  "reporter": ["text", "text-summary", "html", "json", "lcov"],
   "report-dir": "./coverage-combined",
   "temp-dir": "./.nyc_output",
   "sourceMap": true,
diff --git a/frontend/IMPLEMENTATION_PLAN.md b/frontend/IMPLEMENTATION_PLAN.md
index 7a296ec..19e9a35 100644
--- a/frontend/IMPLEMENTATION_PLAN.md
+++ b/frontend/IMPLEMENTATION_PLAN.md
@@ -20,6 +20,7 @@ Build a production-ready Next.js 15 frontend with full authentication, admin das
 ## Implementation Directives (MUST FOLLOW)
 
 ### Documentation-First Approach
+
 - Phase 0 created `/docs` folder with all architecture, standards, and guides ✅
 - ALL subsequent phases MUST reference and follow patterns in `/docs`
 - **If context is lost, `/docs` + this file + `frontend-requirements.md` are sufficient to resume**
@@ -27,6 +28,7 @@ Build a production-ready Next.js 15 frontend with full authentication, admin das
 ### Quality Assurance Protocol
 
 **1. Per-Task Quality Standards (MANDATORY):**
+
 - **Quality over Speed:** Each task developed carefully, no rushing
 - **Review Cycles:** Minimum 3 review-fix cycles per task before completion
 - **Test Coverage:** Maintain >80% coverage at all times
@@ -37,6 +39,7 @@ Build a production-ready Next.js 15 frontend with full authentication, admin das
 - **Standards Compliance:** Zero violations of `/docs/CODING_STANDARDS.md`
 
 **2. After Each Task:**
+
 - [ ] All tests passing (100% pass rate)
 - [ ] Coverage >80% for new code
 - [ ] TypeScript: 0 errors
@@ -49,6 +52,7 @@ Build a production-ready Next.js 15 frontend with full authentication, admin das
 
 **3. After Each Phase:**
 Launch multi-agent deep review to:
+
 - Verify phase objectives met
 - Check integration with previous phases
 - Identify critical issues requiring immediate fixes
@@ -57,6 +61,7 @@ Launch multi-agent deep review to:
 - **Generate phase review report** (e.g., `PHASE_X_REVIEW.md`)
 
 **4. Testing Requirements:**
+
 - Write tests alongside feature code (not after)
 - Unit tests: All hooks, utilities, services
 - Component tests: All reusable components
@@ -67,6 +72,7 @@ Launch multi-agent deep review to:
 - Use Jest + React Testing Library + Playwright
 
 **5. Context Preservation:**
+
 - Update `/docs` with implementation decisions
 - Document deviations from requirements in `ARCHITECTURE.md`
 - Keep `frontend-requirements.md` updated if backend changes
@@ -80,6 +86,7 @@ Launch multi-agent deep review to:
 ### ✅ What's Implemented
 
 **Project Infrastructure:**
+
 - Next.js 15 with App Router
 - TypeScript strict mode enabled
 - Tailwind CSS 4 configured
@@ -87,6 +94,7 @@ Launch multi-agent deep review to:
 - Path aliases configured (@/)
 
 **Authentication System:**
+
 - `src/lib/auth/crypto.ts` - AES-GCM encryption (82% coverage)
 - `src/lib/auth/storage.ts` - Secure token storage (72.85% coverage)
 - `src/stores/authStore.ts` - Zustand auth store (92.59% coverage)
@@ -94,12 +102,14 @@ Launch multi-agent deep review to:
 - SSR-safe implementations throughout
 
 **API Integration:**
+
 - `src/lib/api/client.ts` - Axios wrapper with interceptors (to be replaced)
 - `src/lib/api/errors.ts` - Error parsing utilities (to be replaced)
 - `scripts/generate-api-client.sh` - OpenAPI generation script
 - **NOTE:** Manual client files marked for replacement with generated client
 
 **Testing Infrastructure:**
+
 - Jest configured with Next.js integration
 - 66 tests passing (100%)
 - 81.6% code coverage (exceeds 70% target)
@@ -107,6 +117,7 @@ Launch multi-agent deep review to:
 - No mocks for security-critical code
 
 **Documentation:**
+
 - `/docs/ARCHITECTURE.md` - System design ✅
 - `/docs/CODING_STANDARDS.md` - Code standards ✅
 - `/docs/COMPONENT_GUIDE.md` - Component patterns ✅
@@ -134,6 +145,7 @@ stores                         |   92.59 |    97.91 |     100 |  93.87
 **E2E Tests:** 56 passed, 1 skipped, 57 total (7 test files)
 
 **Coverage Exclusions (Properly Configured):**
+
 - Auto-generated API client (`src/lib/api/generated/**`)
 - Manual API client (to be replaced)
 - Third-party UI components (`src/components/ui/**`)
@@ -219,16 +231,19 @@ frontend/
 ### ⚠️ Technical Improvements (Post-Phase 3 Enhancements)
 
 **Priority: HIGH**
+
 - Add React Error Boundary component
 - Add skip navigation links for accessibility
 
 **Priority: MEDIUM**
+
 - Add Content Security Policy (CSP) headers
 - Verify WCAG AA color contrast ratios
 - Add session timeout warnings
 - Add `lang="en"` to HTML root
 
 **Priority: LOW (Nice to Have)**
+
 - Add error tracking (Sentry/LogRocket)
 - Add password strength meter UI
 - Add offline detection/handling
@@ -246,6 +261,7 @@ frontend/
 **Completed:** October 31, 2025
 
 ### Task 0.1: Update Requirements Document ✅
+
 - ✅ Updated `frontend-requirements.md` with API corrections
 - ✅ Added Section 4.5 (Session Management UI)
 - ✅ Added Section 15 (API Endpoint Reference)
@@ -253,6 +269,7 @@ frontend/
 - ✅ Added missing User/Organization model fields
 
 ### Task 0.2: Create Architecture Documentation ✅
+
 - ✅ Created `docs/ARCHITECTURE.md`
 - ✅ System overview (Next.js App Router, TanStack Query, Zustand)
 - ✅ Technology stack rationale
@@ -261,6 +278,7 @@ frontend/
 - ✅ Design patterns documented
 
 ### Task 0.3: Create Coding Standards Documentation ✅
+
 - ✅ Created `docs/CODING_STANDARDS.md`
 - ✅ TypeScript standards (strict mode, no any)
 - ✅ React component patterns
@@ -271,6 +289,7 @@ frontend/
 - ✅ Testing standards
 
 ### Task 0.4: Create Component & Feature Guides ✅
+
 - ✅ Created `docs/COMPONENT_GUIDE.md`
 - ✅ Created `docs/FEATURE_EXAMPLES.md`
 - ✅ Created `docs/API_INTEGRATION.md`
@@ -287,10 +306,12 @@ frontend/
 **Completed:** October 31, 2025
 
 ### Task 1.1: Dependency Installation & Configuration ✅
+
 **Status:** COMPLETE
 **Blockers:** None
 
 **Installed Dependencies:**
+
 ```bash
 # Core
 @tanstack/react-query@5, zustand@4, axios@1
@@ -311,6 +332,7 @@ jest, @testing-library/react, @testing-library/jest-dom
 ```
 
 **Configuration:**
+
 - ✅ `components.json` for shadcn/ui
 - ✅ `tsconfig.json` with path aliases
 - ✅ Tailwind configured for dark mode
@@ -319,10 +341,12 @@ jest, @testing-library/react, @testing-library/jest-dom
 - ✅ `jest.setup.js` with global mocks
 
 ### Task 1.2: OpenAPI Client Generation Setup ✅
+
 **Status:** COMPLETE
 **Can run parallel with:** 1.3, 1.4
 
 **Completed:**
+
 - ✅ Created `scripts/generate-api-client.sh` using `@hey-api/openapi-ts`
 - ✅ Configured output to `src/lib/api/generated/`
 - ✅ Added npm script: `"generate:api": "./scripts/generate-api-client.sh"`
@@ -332,6 +356,7 @@ jest, @testing-library/react, @testing-library/jest-dom
 - ✅ TypeScript compilation passes with generated types
 
 **Generated Files:**
+
 - `src/lib/api/generated/index.ts` - Main exports
 - `src/lib/api/generated/types.gen.ts` - TypeScript types (35KB)
 - `src/lib/api/generated/sdk.gen.ts` - API functions (29KB)
@@ -340,15 +365,18 @@ jest, @testing-library/react, @testing-library/jest-dom
 - `src/lib/api/generated/core/` - Core utilities
 
 **To Regenerate (When Backend Changes):**
+
 ```bash
 npm run generate:api
 ```
 
 ### Task 1.3: Axios Client & Interceptors ✅
+
 **Status:** COMPLETE (needs replacement in Phase 2)
 **Can run parallel with:** 1.2, 1.4
 
 **Completed:**
+
 - ✅ Created `src/lib/api/client.ts` - Axios wrapper
   - Request interceptor: Add Authorization header
   - Response interceptor: Handle 401, 403, 429, 500
@@ -361,18 +389,22 @@ npm run generate:api
 **⚠️ Note:** This is a manual implementation. Will be replaced with generated client + thin interceptor wrapper once backend API is generated.
 
 ### Task 1.4: Folder Structure Creation ✅
+
 **Status:** COMPLETE
 **Can run parallel with:** 1.2, 1.3
 
 **Completed:**
+
 - ✅ All directories created per requirements
 - ✅ Placeholder index.ts files for exports
 - ✅ Structure matches `docs/ARCHITECTURE.md`
 
 ### Task 1.5: Authentication Core Implementation ✅
+
 **Status:** COMPLETE (additional work beyond original plan)
 
 **Completed:**
+
 - ✅ `src/lib/auth/crypto.ts` - AES-GCM encryption with random IVs
 - ✅ `src/lib/auth/storage.ts` - Encrypted token storage with localStorage
 - ✅ `src/stores/authStore.ts` - Complete Zustand auth store
@@ -383,6 +415,7 @@ npm run generate:api
 - ✅ Real crypto testing (no mocks)
 
 **Security Features:**
+
 - AES-GCM encryption with 256-bit keys
 - Random IV per encryption
 - Key stored in sessionStorage (per-session)
@@ -400,6 +433,7 @@ npm run generate:api
 **Critical Issues Fixed:** 5 ✅
 
 **Issues Resolved:**
+
 1. ✅ TypeScript compilation error (unused @ts-expect-error)
 2. ✅ Duplicate configuration files
 3. ✅ Test mocks didn't match real implementation
@@ -407,12 +441,14 @@ npm run generate:api
 5. ✅ API client exclusions documented
 
 **Final Metrics:**
+
 - Tests: 66/66 passing (100%)
 - Coverage: 81.6% (exceeds 70% target)
 - TypeScript: 0 errors
 - Security: No vulnerabilities
 
 **Audit Documents:**
+
 - `/tmp/AUDIT_SUMMARY.txt` - Executive summary
 - `/tmp/AUDIT_COMPLETE.md` - Full report
 - `/tmp/COVERAGE_CONFIG.md` - Coverage configuration
@@ -432,6 +468,7 @@ npm run generate:api
 Phase 2 delivered a complete, production-ready authentication system with exceptional quality. All authentication flows are fully functional and comprehensively tested. The codebase demonstrates professional-grade quality with 97.6% test coverage, zero build/lint/type errors, and strong security practices.
 
 **Quality Metrics (Post Deep Review):**
+
 - **Tests:** 234/234 passing (100%) ✅
 - **Coverage:** 97.6% (far exceeds 90% target) ⭐
 - **TypeScript:** 0 errors ✅
@@ -443,6 +480,7 @@ Phase 2 delivered a complete, production-ready authentication system with except
 - **Bundle Size:** 107-173 kB (excellent) ✅
 
 **What Was Accomplished:**
+
 - Complete authentication UI (login, register, password reset)
 - Route protection with AuthGuard
 - Comprehensive React Query hooks
@@ -459,9 +497,11 @@ Phase 2 delivered a complete, production-ready authentication system with except
 Phase 1 already implemented core authentication infrastructure (crypto, storage, auth store). Phase 2 built the UI layer and achieved exceptional test coverage through systematic testing of all components and edge cases.
 
 ### Task 2.1: Token Storage & Auth Store ✅ (Done in Phase 1)
+
 **Status:** COMPLETE (already done)
 
 This was completed as part of Phase 1 infrastructure:
+
 - ✅ `src/lib/auth/crypto.ts` - AES-GCM encryption
 - ✅ `src/lib/auth/storage.ts` - Token storage utilities
 - ✅ `src/stores/authStore.ts` - Complete Zustand store
@@ -471,11 +511,13 @@ This was completed as part of Phase 1 infrastructure:
 **Skip this task - move to 2.2**
 
 ### Task 2.2: Auth Interceptor Integration ✅
+
 **Status:** COMPLETE
 **Completed:** November 1, 2025
 **Depends on:** 2.1 ✅ (already complete)
 
 **Completed:**
+
 - ✅ `src/lib/api/client.ts` - Manual axios client with interceptors
   - Request interceptor adds Authorization header
   - Response interceptor handles 401, 403, 429, 500 errors
@@ -491,6 +533,7 @@ This was completed as part of Phase 1 infrastructure:
 - ✅ No infinite refresh loops (separate client for auth endpoints)
 
 **Architecture Decision:**
+
 - Using manual axios client for Phase 2 (proven, working)
 - Generated client prepared but not integrated (future migration)
 - See `docs/API_CLIENT_ARCHITECTURE.md` for full details and migration path
@@ -498,10 +541,12 @@ This was completed as part of Phase 1 infrastructure:
 **Reference:** `docs/API_CLIENT_ARCHITECTURE.md`, Requirements Section 5.2
 
 ### Task 2.3: Auth Hooks & Components ✅
+
 **Status:** COMPLETE
 **Completed:** October 31, 2025
 
 **Completed:**
+
 - ✅ `src/lib/api/hooks/useAuth.ts` - Complete React Query hooks
   - `useLogin` - Login mutation
   - `useRegister` - Register mutation
@@ -532,6 +577,7 @@ This was completed as part of Phase 1 infrastructure:
   - Link to login
 
 **Testing:**
+
 - ✅ Component tests created (9 passing)
 - ✅ Validates form fields
 - ✅ Tests password strength indicators
@@ -539,16 +585,19 @@ This was completed as part of Phase 1 infrastructure:
 - Note: 4 async tests need API mocking (low priority)
 
 ### Task 2.4: Login & Registration Pages ✅
+
 **Status:** COMPLETE
 **Completed:** October 31, 2025
 
 **Completed:**
 
 Forms (✅ Done in Task 2.3):
+
 - ✅ `src/components/auth/LoginForm.tsx`
 - ✅ `src/components/auth/RegisterForm.tsx`
 
 Pages:
+
 - ✅ `src/app/(auth)/layout.tsx` - Centered auth layout with responsive design
 - ✅ `src/app/(auth)/login/page.tsx` - Login page with title and description
 - ✅ `src/app/(auth)/register/page.tsx` - Registration page
@@ -556,11 +605,13 @@ Pages:
 - ✅ `src/app/layout.tsx` - Updated to include Providers
 
 **API Integration:**
+
 - ✅ Using manual client.ts for auth endpoints (with token refresh)
 - ✅ Generated SDK available in `src/lib/api/generated/sdk.gen.ts`
 - ✅ Wrapper at `src/lib/api/client-config.ts` configures both
 
 **Testing:**
+
 - [ ] Form validation tests
 - [ ] Submission success/error
 - [ ] E2E login flow
@@ -570,20 +621,24 @@ Pages:
 **Reference:** `docs/COMPONENT_GUIDE.md` (form patterns), Requirements Section 8.1
 
 ### Task 2.5: Password Reset Flow ✅
+
 **Status:** COMPLETE
 **Completed:** November 1, 2025
 
 **Completed Components:**
 
 Pages created:
+
 - ✅ `src/app/(auth)/password-reset/page.tsx` - Request reset page
 - ✅ `src/app/(auth)/password-reset/confirm/page.tsx` - Confirm reset with token
 
 Forms created:
+
 - ✅ `src/components/auth/PasswordResetRequestForm.tsx` - Email input form with validation
 - ✅ `src/components/auth/PasswordResetConfirmForm.tsx` - New password form with strength indicator
 
 **Implementation Details:**
+
 - ✅ Email validation with HTML5 + Zod
 - ✅ Password strength indicator (matches RegisterForm pattern)
 - ✅ Password confirmation matching
@@ -596,12 +651,14 @@ Forms created:
 - ✅ User-friendly error messages
 
 **API Integration:**
+
 - ✅ Uses `usePasswordResetRequest` hook
 - ✅ Uses `usePasswordResetConfirm` hook
 - ✅ POST `/api/v1/auth/password-reset/request` - Request reset email
 - ✅ POST `/api/v1/auth/password-reset/confirm` - Reset with token
 
 **Testing:**
+
 - ✅ PasswordResetRequestForm: 7 tests (100% passing)
 - ✅ PasswordResetConfirmForm: 10 tests (100% passing)
 - ✅ Form validation (required fields, email format, password requirements)
@@ -612,6 +669,7 @@ Forms created:
 - ✅ Accessibility attributes
 
 **Quality Assurance:**
+
 - ✅ 3 review-fix cycles completed
 - ✅ TypeScript: 0 errors
 - ✅ Lint: Clean (all files)
@@ -621,6 +679,7 @@ Forms created:
 - ✅ Memory leak prevention (timeout cleanup)
 
 **Security Implemented:**
+
 - ✅ Token passed via URL (standard practice)
 - ✅ Passwords use autocomplete="new-password"
 - ✅ No sensitive data logged
@@ -632,6 +691,7 @@ Forms created:
 ### Phase 2 Review Checklist ✅
 
 **Functionality:**
+
 - [x] All auth pages functional
 - [x] Forms have proper validation
 - [x] Error messages are user-friendly
@@ -641,6 +701,7 @@ Forms created:
 - [x] SSR-safe implementations
 
 **Quality Assurance:**
+
 - [x] Tests: 234/234 passing (100%)
 - [x] Coverage: 97.6% (far exceeds target)
 - [x] TypeScript: 0 errors
@@ -651,17 +712,20 @@ Forms created:
 - [x] Code quality audit: 9.5/10 score
 
 **Documentation:**
+
 - [x] Implementation plan updated
 - [x] Technical improvements documented
 - [x] Deep review report completed
 - [x] Architecture documented
 
 **Beyond Phase 2:**
+
 - [x] E2E tests (43 tests, 79% passing) - ✅ Setup complete!
 - [ ] Manual viewport testing (Phase 11)
 - [ ] Dark mode testing (Phase 11)
 
 **E2E Testing (Added November 1 Evening):**
+
 - [x] Playwright configured
 - [x] 43 E2E tests created across 4 test files
 - [x] 34/43 tests passing (79% pass rate)
@@ -686,6 +750,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 ### Design System Selection
 
 **Research & Decision Process:**
+
 - Evaluated modern design system approaches (shadcn/ui, Radix Themes, tweakcn.com)
 - Selected **Modern Minimal** preset from tweakcn.com
 - Color palette: Blue (primary) + Zinc (neutral)
@@ -693,6 +758,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 - Theme modes: Light, Dark, and System preference detection
 
 **Implementation:**
+
 - ✅ Generated complete theme CSS from tweakcn.com
 - ✅ Applied semantic color tokens (--primary, --background, --muted, etc.)
 - ✅ Updated `components.json` for Tailwind v4 and zinc base
@@ -702,6 +768,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 **Completed Components:**
 
 **ThemeProvider** (`src/components/theme/ThemeProvider.tsx`):
+
 - React Context-based theme management
 - localStorage persistence of theme preference
 - System preference detection via `prefers-color-scheme`
@@ -710,6 +777,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 - 16 comprehensive unit tests
 
 **ThemeToggle** (`src/components/theme/ThemeToggle.tsx`):
+
 - Dropdown menu with Light/Dark/System options
 - Visual indicators (Sun/Moon/Monitor icons)
 - Active theme checkmark display
@@ -717,12 +785,14 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 - 13 comprehensive unit tests
 
 **E2E Theme Tests** (`e2e/theme-toggle.spec.ts`):
+
 - Theme application on public pages
 - Theme persistence across navigation
 - Programmatic theme switching
 - 6 E2E tests (100% passing)
 
 **Testing:**
+
 - ✅ ThemeProvider: 16 tests (localStorage, system preference, theme application)
 - ✅ ThemeToggle: 13 tests (dropdown menu, theme selection, active indicators)
 - ✅ E2E: 6 tests (persistence, navigation, programmatic control)
@@ -730,6 +800,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 ### Task 2.5.2: Layout Components ✅
 
 **Header Component** (`src/components/layout/Header.tsx`):
+
 - Logo and navigation links
 - Theme toggle integration
 - User avatar with initials
@@ -739,17 +810,20 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 - 16 comprehensive unit tests
 
 **Footer Component** (`src/components/layout/Footer.tsx`):
+
 - Copyright and links
 - Semantic color tokens
 - 3 unit tests
 
 **AuthInitializer** (`src/components/auth/AuthInitializer.tsx`):
+
 - **Critical Bug Fix:** Solved infinite loading on /settings page
 - Calls `authStore.loadAuthFromStorage()` on app mount
 - Ensures tokens are loaded from encrypted storage
 - 2 unit tests
 
 **Testing:**
+
 - ✅ Header: 16 tests (navigation, user menu, logout, admin access)
 - ✅ Footer: 3 tests (rendering, links)
 - ✅ AuthInitializer: 2 tests (loading auth from storage)
@@ -757,6 +831,7 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 ### Task 2.5.3: Consistency Sweep ✅
 
 **Updated All Existing Pages:**
+
 - Replaced hardcoded colors with semantic tokens
 - Updated auth forms (LoginForm, RegisterForm, PasswordResetForms)
 - Updated settings layout and placeholder pages
@@ -764,22 +839,25 @@ After completing Phase 2 authentication, a critical UX issue was discovered: the
 - Ensured consistent design language throughout
 
 **Before:**
+
 ```tsx
-className="bg-gray-900 dark:bg-gray-700"
-className="text-gray-600 dark:text-gray-400"
-className="bg-white dark:bg-gray-900"
+className = 'bg-gray-900 dark:bg-gray-700';
+className = 'text-gray-600 dark:text-gray-400';
+className = 'bg-white dark:bg-gray-900';
 ```
 
 **After:**
+
 ```tsx
-className="bg-primary text-primary-foreground"
-className="text-muted-foreground"
-className="bg-background"
+className = 'bg-primary text-primary-foreground';
+className = 'text-muted-foreground';
+className = 'bg-background';
 ```
 
 ### Task 2.5.4: Component Showcase ✅
 
 **ComponentShowcase** (`src/components/dev/ComponentShowcase.tsx`):
+
 - Comprehensive demo of all design system components
 - Organized by category (Buttons, Forms, Cards, etc.)
 - Live theme switching demonstration
@@ -787,6 +865,7 @@ className="bg-background"
 - Accessible at `/dev/components`
 
 **Purpose:**
+
 - Visual reference for developers
 - Component documentation
 - Theme testing playground
@@ -795,6 +874,7 @@ className="bg-background"
 ### Task 2.5.5: Documentation ✅
 
 **DESIGN_SYSTEM.md** (`docs/DESIGN_SYSTEM.md`):
+
 - Complete 500+ line design system documentation
 - Color system with semantic tokens
 - Typography scale and usage
@@ -805,6 +885,7 @@ className="bg-background"
 - Code examples and best practices
 
 **Coverage:**
+
 - Colors (primary, secondary, accent, neutral)
 - Typography (font families, sizes, weights, line heights)
 - Spacing (consistent 4px base scale)
@@ -817,6 +898,7 @@ className="bg-background"
 ### Quality Achievements
 
 **Testing:**
+
 - ✅ 48 new unit tests created
 - ✅ 6 new E2E tests created
 - ✅ All 282 unit tests passing (100%)
@@ -824,6 +906,7 @@ className="bg-background"
 - ✅ Coverage improved: 78.61% → 97.57%
 
 **Code Quality:**
+
 - ✅ TypeScript: 0 errors
 - ✅ ESLint: 0 warnings
 - ✅ Build: PASSING
@@ -831,6 +914,7 @@ className="bg-background"
 - ✅ SSR-safe implementations
 
 **User Experience:**
+
 - ✅ Professional theme with OKLCH colors
 - ✅ Smooth theme transitions
 - ✅ Persistent theme preference
@@ -839,6 +923,7 @@ className="bg-background"
 - ✅ WCAG AA compliance
 
 **Documentation:**
+
 - ✅ Comprehensive DESIGN_SYSTEM.md
 - ✅ Component usage examples
 - ✅ Color and typography reference
@@ -847,28 +932,33 @@ className="bg-background"
 ### Issues Discovered & Fixed
 
 **Bug: Infinite Loading on /settings**
+
 - **Problem:** Page showed "Loading..." indefinitely
 - **Root Cause:** `authStore.loadAuthFromStorage()` never called
 - **Solution:** Created AuthInitializer component
 - **Result:** Auth state properly loaded on app mount
 
 **Issue: Broken Dropdown Menu**
+
 - **Problem:** Transparent dropdown background
 - **Root Cause:** Hardcoded colors incompatible with dark mode
 - **Solution:** Comprehensive design system with semantic tokens
 - **Result:** All UI components now theme-aware
 
 **Issue: User Type Mismatch**
+
 - **Problem:** Frontend had `full_name`, backend returns `first_name/last_name`
 - **Solution:** Updated User interface in authStore
 - **Result:** Type safety restored, all tests passing
 
 **Issue: Test Coverage Drop**
+
 - **Problem:** Coverage dropped from 97.6% to 78.61% with new components
 - **Solution:** Created 48 comprehensive unit tests
 - **Result:** Coverage restored to 97.57%
 
 **Issue: E2E Test Failures**
+
 - **Problem:** 34 E2E test failures with 30s timeouts
 - **Root Cause:** authenticated-navigation.spec.ts tried real backend login
 - **Solution:** Removed redundant tests, added theme tests
@@ -877,6 +967,7 @@ className="bg-background"
 ### Phase 2.5 Review Checklist ✅
 
 **Functionality:**
+
 - [x] Theme system fully functional (light/dark/system)
 - [x] Theme persists across page navigation
 - [x] Theme toggle accessible and intuitive
@@ -886,6 +977,7 @@ className="bg-background"
 - [x] AuthInitializer fixes infinite loading bug
 
 **Quality Assurance:**
+
 - [x] Tests: 282/282 passing (100%)
 - [x] E2E Tests: 92/92 passing (100%)
 - [x] Coverage: 97.57% (exceeds 90% target)
@@ -895,6 +987,7 @@ className="bg-background"
 - [x] Accessibility: WCAG AA compliant
 
 **Documentation:**
+
 - [x] DESIGN_SYSTEM.md comprehensive and accurate
 - [x] Component usage documented
 - [x] Implementation plan updated
@@ -918,6 +1011,7 @@ Comprehensive performance and architecture optimization phase. Achieved exceptio
 ### Final State (Completed Nov 2, 2025)
 
 **✅ ALL TASKS COMPLETED (9/9):**
+
 1. ✅ AuthInitializer optimized - working efficiently, Lighthouse 100% (Task 3.1.1)
 2. ✅ Theme FOUC fixed - inline script in layout.tsx (Task 3.1.2)
 3. ✅ React Query optimized - refetchOnWindowFocus disabled, staleTime added (Task 3.1.3)
@@ -929,6 +1023,7 @@ Comprehensive performance and architecture optimization phase. Achieved exceptio
 9. ✅ Medium severity issues - all resolved (Task 3.3.2)
 
 **Final Metrics:**
+
 - **Test Coverage:** 98.63% ⬆️ (improved from 97.57%)
 - **Unit Tests:** 381/381 passing (100%)
 - **E2E Tests:** 92/92 passing (100%)
@@ -942,6 +1037,7 @@ Comprehensive performance and architecture optimization phase. Achieved exceptio
 **Estimated Impact:** +20-25 Lighthouse points, 300-500ms faster load times
 
 #### Task 3.1.1: AuthInitializer Performance ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Optimized and performing excellently)
 **Impact:** Authentication loads efficiently, no performance issues
 **Complexity:** Resolved through multiple optimization iterations
@@ -949,6 +1045,7 @@ Comprehensive performance and architecture optimization phase. Achieved exceptio
 **Completed:** November 2, 2025
 
 **Current Implementation:**
+
 ```typescript
 useEffect(() => {
   loadAuthFromStorage(); // Optimized, fast, reliable
@@ -956,6 +1053,7 @@ useEffect(() => {
 ```
 
 **Performance Metrics:**
+
 - ✅ Lighthouse Performance: **100%** (perfect score)
 - ✅ All 473 tests passing (381 unit + 92 E2E)
 - ✅ Test coverage: 98.63%
@@ -964,23 +1062,27 @@ useEffect(() => {
 - ✅ Production-ready and stable
 
 **Optimization History:**
+
 - Multiple optimization iterations completed
 - Current implementation balances performance, reliability, and maintainability
 - No further optimization needed given perfect Lighthouse score
 
 #### Task 3.1.2: Fix Theme FOUC ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Implemented in Phase 2.5)
 **Impact:** -50-100ms FOUC eliminated, CLS removed
 **Completed:** November 2, 2025
 
 **Implementation:**
 Inline `<script>` added to `src/app/layout.tsx` (lines 33-56):
+
 - Reads localStorage before React hydration
 - Applies theme class immediately
 - No flash of wrong theme
 - ThemeProvider now reads from DOM, doesn't write
 
 **Verification:**
+
 ```html
 <!-- In app/layout.tsx <head> -->
 <script dangerouslySetInnerHTML={{__html: `
@@ -997,22 +1099,26 @@ Inline `<script>` added to `src/app/layout.tsx` (lines 33-56):
 ```
 
 **Files to Change:**
+
 - `src/app/layout.tsx` - Add inline script
 - `src/components/theme/ThemeProvider.tsx` - Simplify to read-only
 - `tests/components/theme/ThemeProvider.test.tsx` - Update tests
 
 **Testing Required:**
+
 - Verify no FOUC on page load
 - Verify SSR compatibility
 - Test localStorage edge cases
 - Update E2E tests
 
 #### Task 3.1.3: Optimize React Query Config ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Implemented in Phase 2.5)
 **Impact:** -40-60% unnecessary network calls eliminated
 **Completed:** November 2, 2025
 
 **Implementation in `src/app/providers.tsx`:**
+
 ```typescript
 new QueryClient({
   defaultOptions: {
@@ -1021,12 +1127,13 @@ new QueryClient({
       retry: 1,
       refetchOnWindowFocus: false, // ✅ Disabled
       refetchOnReconnect: true, // ✅ Kept for session data
-    }
-  }
-})
+    },
+  },
+});
 ```
 
 **Verification:**
+
 - ✅ Reduced unnecessary refetches
 - ✅ Session data still updates on reconnect
 - ✅ All tests passing
@@ -1036,6 +1143,7 @@ new QueryClient({
 **Estimated Impact:** Better maintainability, -30KB bundle size
 
 #### Task 3.2.1: Fix Stores Location ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Already implemented)
 **Impact:** Architecture compliance
 **Complexity:** Low
@@ -1044,12 +1152,14 @@ new QueryClient({
 
 **Implementation:**
 Stores are already in the correct location: `src/lib/stores/authStore.ts`
+
 - ✅ All imports use `@/lib/stores/authStore`
 - ✅ Architecture guidelines compliance verified
 - ✅ All tests passing
 - ✅ TypeScript compilation clean
 
 **Verification:**
+
 ```bash
 # Verified via file system check
 ls src/lib/stores/  # authStore.ts exists
@@ -1057,6 +1167,7 @@ ls src/stores/      # Directory doesn't exist
 ```
 
 **Files Using Correct Path:**
+
 - `src/components/auth/AuthGuard.tsx` - uses `@/lib/stores/authStore`
 - `src/components/auth/LoginForm.tsx` - uses `@/lib/stores/authStore`
 - `src/components/layout/Header.tsx` - uses `@/lib/stores/authStore`
@@ -1064,6 +1175,7 @@ ls src/stores/      # Directory doesn't exist
 - All test files - correct paths verified
 
 #### Task 3.2.2: Extract Shared Form Components ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Already implemented)
 **Impact:** -150 lines of duplication, better maintainability
 **Complexity:** Medium
@@ -1072,6 +1184,7 @@ ls src/stores/      # Directory doesn't exist
 
 **Implementation:**
 Shared form components already created:
+
 - ✅ `src/components/forms/FormField.tsx` - Reusable field with label, error, accessibility
 - ✅ `src/hooks/useFormError.ts` - Shared error handling hook
 - ✅ All auth forms using shared components
@@ -1079,6 +1192,7 @@ Shared form components already created:
 - ✅ Accessibility attributes (aria-required, aria-invalid, aria-describedby)
 
 **Verification:**
+
 ```typescript
 // FormField props interface
 export interface FormFieldProps {
@@ -1092,17 +1206,20 @@ export interface FormFieldProps {
 ```
 
 **Forms Using Shared Components:**
+
 - `src/components/auth/LoginForm.tsx` - uses FormField
 - `src/components/auth/RegisterForm.tsx` - uses FormField
 - `src/components/auth/PasswordResetRequestForm.tsx` - uses FormField
 - `src/components/auth/PasswordResetConfirmForm.tsx` - uses FormField
 
 **Testing:**
+
 - ✅ FormField: 13 tests (rendering, error display, accessibility)
 - ✅ All auth form tests passing
 - ✅ Coverage maintained at 97.57%
 
 #### Task 3.2.3: Code Split Heavy Components ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Already implemented)
 **Impact:** -30KB initial bundle
 **Complexity:** Medium
@@ -1111,12 +1228,14 @@ export interface FormFieldProps {
 
 **Implementation:**
 All auth pages already use code splitting with dynamic imports:
+
 - ✅ `src/app/(auth)/login/page.tsx` - LoginForm dynamically imported
 - ✅ `src/app/(auth)/register/page.tsx` - RegisterForm dynamically imported
 - ✅ `src/app/(auth)/password-reset/page.tsx` - PasswordResetRequestForm dynamically imported
 - ✅ `src/app/(auth)/password-reset/confirm/page.tsx` - PasswordResetConfirmForm dynamically imported
 
 **Verification:**
+
 ```typescript
 // Example from login/page.tsx
 const LoginForm = dynamic(
@@ -1133,6 +1252,7 @@ const LoginForm = dynamic(
 ```
 
 **Benefits:**
+
 - Reduced initial bundle size
 - Improved Time to Interactive (TTI)
 - Skeleton loading states provide visual feedback
@@ -1140,6 +1260,7 @@ const LoginForm = dynamic(
 - All E2E tests passing
 
 **Testing:**
+
 - ✅ Bundle size verified with `npm run build`
 - ✅ Loading states functional
 - ✅ 92/92 E2E tests passing
@@ -1150,6 +1271,7 @@ const LoginForm = dynamic(
 **Estimated Impact:** Production-ready code, zero known issues
 
 #### Task 3.3.1: Fix Token Refresh Race Condition ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Fixed TOCTOU race condition)
 **Impact:** Prevents rare authentication failures
 **Complexity:** Low
@@ -1158,26 +1280,30 @@ const LoginForm = dynamic(
 
 **Problem Identified:**
 TIME-OF-CHECK TO TIME-OF-USE (TOCTOU) race condition:
+
 ```typescript
 // BEFORE (had race condition):
 let isRefreshing = false;
 let refreshPromise: Promise<string> | null = null;
 
-if (isRefreshing && refreshPromise) {  // ← Check
+if (isRefreshing && refreshPromise) {
+  // ← Check
   return refreshPromise;
 }
 
-isRefreshing = true;  // ← Set (NOT ATOMIC!)
+isRefreshing = true; // ← Set (NOT ATOMIC!)
 // Race window here - two requests could both pass the check
 ```
 
 **Solution Implemented:**
 Removed redundant `isRefreshing` flag, use `refreshPromise` as atomic lock:
+
 ```typescript
 // AFTER (race condition fixed):
 let refreshPromise: Promise<string> | null = null;
 
-if (refreshPromise) {  // ← Atomic check
+if (refreshPromise) {
+  // ← Atomic check
   return refreshPromise;
 }
 
@@ -1190,15 +1316,18 @@ return refreshPromise;
 ```
 
 **Testing:**
+
 - ✅ All 381 unit tests passing
 - ✅ All 92 E2E tests passing
 - ✅ TypeScript: 0 errors
 - ✅ No regressions detected
 
 **Files Modified:**
+
 - `src/lib/api/client.ts` - Removed `isRefreshing`, simplified logic
 
 #### Task 3.3.2: Fix Medium Severity Issues ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (Already fixed)
 **Impact:** Code quality, maintainability
 **Complexity:** Low
@@ -1206,12 +1335,14 @@ return refreshPromise;
 **Completed:** November 2, 2025 (During Phase 2.5)
 
 **Issues Fixed:**
+
 1. ✅ setTimeout cleanup - Proper cleanup in password reset forms
 2. ✅ AuthInitializer dependency array - Correctly implemented with [loadAuthFromStorage]
 3. ✅ ESLint warnings - Zero warnings in production build
 4. ✅ Type assertions - All type-safe, no unsafe assertions
 
 **Verification:**
+
 ```bash
 # ESLint check
 npm run lint
@@ -1227,17 +1358,20 @@ npm run build
 ```
 
 **Files Verified:**
+
 - `src/lib/api/hooks/useAuth.ts` - No memory leaks, proper cleanup
 - `src/components/auth/AuthInitializer.tsx` - Dependency array correct
 - `src/components/auth/PasswordResetConfirmForm.tsx` - setTimeout cleanup implemented
 
 **Testing:**
+
 - ✅ All 282 unit tests passing
 - ✅ All 92 E2E tests passing
 - ✅ No memory leaks detected
 - ✅ Zero lint warnings
 
 #### Task 3.3.3: Remove console.log in Production ✅ COMPLETE
+
 **Status:** ✅ COMPLETE (All 6 statements production-safe)
 **Impact:** Clean console, smaller bundle
 **Complexity:** Low
@@ -1249,17 +1383,21 @@ All console.log statements properly conditionalized for production safety.
 
 **Production Code (4 statements - FIXED):**
 `src/lib/api/client.ts` - All wrapped in `config.debug.api` check:
+
 ```typescript
 if (config.debug.api) {
   console.log('[API Client] Refreshing access token...');
 }
 ```
+
 Where `config.debug.api = parseBool(ENV.DEBUG_API, false) && ENV.NODE_ENV === 'development'`
+
 - Defaults to `false` in production ✅
 - Only enabled if explicitly set AND in development mode ✅
 
 **Demo Code (2 statements - FIXED):**
 `src/app/dev/forms/page.tsx` - Wrapped in NODE_ENV check:
+
 ```typescript
 if (process.env.NODE_ENV === 'development') {
   console.log('Login form data:', data);
@@ -1267,6 +1405,7 @@ if (process.env.NODE_ENV === 'development') {
 ```
 
 **Verification:**
+
 - ✅ All 381 unit tests passing
 - ✅ All 92 E2E tests passing
 - ✅ TypeScript: 0 errors
@@ -1274,17 +1413,20 @@ if (process.env.NODE_ENV === 'development') {
 - ✅ Development mode: Logging works correctly
 
 **Files Modified:**
+
 - `src/app/dev/forms/page.tsx` - Added 2 conditionals
 
 ### Phase 3 Testing Strategy
 
 **Test Coverage Requirements:**
+
 - Maintain 97.57% coverage minimum
 - All new code must have tests
 - Refactored code must maintain existing tests
 - E2E tests: 92/92 passing (100%)
 
 **Regression Testing:**
+
 - Run full test suite after each priority
 - Verify no TypeScript errors
 - Verify no ESLint warnings
@@ -1292,6 +1434,7 @@ if (process.env.NODE_ENV === 'development') {
 - Manual smoke test of critical flows
 
 **Performance Testing:**
+
 - Lighthouse reports before/after each week
 - Bundle size analysis (npm run build)
 - Network tab monitoring (API calls)
@@ -1300,6 +1443,7 @@ if (process.env.NODE_ENV === 'development') {
 ### Success Criteria - ACHIEVED ✅
 
 **Task 3.1 Results:**
+
 - [✅] AuthInitializer optimized - COMPLETE (stable, Lighthouse 100%)
 - [✅] Theme FOUC eliminated - COMPLETE (inline script)
 - [✅] React Query refetch reduced by 40-60% - COMPLETE (refetchOnWindowFocus: false)
@@ -1308,6 +1452,7 @@ if (process.env.NODE_ENV === 'development') {
 - [✅] Lighthouse Performance: 100% ⭐ - **EXCEEDED TARGET** (user confirmed)
 
 **Task 3.2 Results:**
+
 - [✅] Stores moved to `src/lib/stores/` - COMPLETE
 - [✅] Shared form components extracted - COMPLETE (FormField, useFormError)
 - [✅] Bundle size reduced by 30KB - COMPLETE (code splitting verified)
@@ -1316,6 +1461,7 @@ if (process.env.NODE_ENV === 'development') {
 - [✅] Code duplication reduced by 60% - COMPLETE
 
 **Task 3.3 Results:**
+
 - [✅] Token refresh race condition FIXED - COMPLETE (TOCTOU bug fixed)
 - [✅] All medium severity issues resolved - COMPLETE
 - [✅] console.log production-safe - COMPLETE (all 6 conditionalized)
@@ -1324,6 +1470,7 @@ if (process.env.NODE_ENV === 'development') {
 - [✅] Production-ready code - COMPLETE
 
 **Phase 3 Final Results:**
+
 - [✅] 9/9 tasks completed - **ALL TASKS COMPLETE**
 - [✅] Tests: 381 passing (100%) - **INCREASED from 282**
 - [✅] E2E: 92 passing (100%)
@@ -1338,6 +1485,7 @@ if (process.env.NODE_ENV === 'development') {
 **Final Verdict:** ✅ PHASE 3 COMPLETE - **OUTSTANDING PROJECT DELIVERED** - All 9 tasks successfully completed
 
 **Key Achievements:**
+
 - 🎯 Lighthouse Performance: 100% (exceeded all targets)
 - 📈 Test Coverage: 98.63% (improved by 1.06%)
 - 🧪 473 Total Tests: 100% passing (381 unit + 92 E2E)
@@ -1364,6 +1512,7 @@ Complete user settings functionality implemented including profile management, p
 **Focus:** Fixed all failing tests to achieve 100% pass rate
 
 **Test Fixes Completed:**
+
 1. ✅ **useUser.test.tsx** - Fixed error message assertion (expected "An unexpected error occurred" instead of "Update failed")
 2. ✅ **SessionCard.test.tsx** - Fixed location test (component conditionally hides "Unknown location", not displays it)
 3. ✅ **SessionsManager.test.tsx (bulk revoke)** - Fixed button selection using `buttons.find()` instead of array index
@@ -1372,6 +1521,7 @@ Complete user settings functionality implemented including profile management, p
 6. ✅ **useSession.test.tsx (sessions not loaded)** - Changed from unrealistic edge case to realistic empty array scenario
 
 **Final Metrics:**
+
 - **Unit Tests:** 451/451 passing (100% pass rate) ⭐
 - **Test Suites:** 40/40 passing
 - **Coverage:** 98.38% overall (far exceeds 90% target) ⭐⭐
@@ -1384,18 +1534,21 @@ Complete user settings functionality implemented including profile management, p
 - **Build:** PASSING ✅
 
 **Coverage Exclusions (Properly Documented):**
+
 - PasswordChangeForm.tsx: Form submission logic excluded with istanbul ignore comments
 - ProfileSettingsForm.tsx: Form submission logic excluded with istanbul ignore comments
 - Reason: react-hook-form's isDirty state doesn't update synchronously in unit tests
 - E2E tests created to cover these flows ✅
 
 **Key Learnings:**
+
 - Test assertions must match actual implementation behavior (error parsers return generic messages)
 - Component conditional rendering requires testing for absence, not presence
 - Button selection needs precise regex to avoid false matches
 - Test scenarios should be realistic (empty arrays, not undefined caches)
 
 **Available SDK Functions:**
+
 - `getCurrentUserProfile` - GET /users/me
 - `updateCurrentUser` - PATCH /users/me
 - `changeCurrentUserPassword` - POST /users/me/password
@@ -1403,6 +1556,7 @@ Complete user settings functionality implemented including profile management, p
 - `revokeSession` - DELETE /sessions/{id}
 
 **Existing Infrastructure:**
+
 - ✅ Settings layout with tabbed navigation (`/settings/layout.tsx`)
 - ✅ Placeholder pages for profile, password, sessions, preferences
 - ✅ `usePasswordChange` hook already exists
@@ -1420,6 +1574,7 @@ Complete user settings functionality implemented including profile management, p
 **Implementation Completed:**
 
 ✅ **Hook:** `src/lib/api/hooks/useUser.ts` (84 lines)
+
 - `useUpdateProfile` mutation hook
 - Integrates with authStore to update user in global state
 - Invalidates auth queries on success
@@ -1427,6 +1582,7 @@ Complete user settings functionality implemented including profile management, p
 - Comprehensive error handling with parseAPIError
 
 ✅ **Component:** `src/components/settings/ProfileSettingsForm.tsx` (226 lines)
+
 - Fields: first_name (required), last_name (optional), email (read-only)
 - Zod validation schema with proper constraints
 - Server error display with Alert component
@@ -1436,17 +1592,20 @@ Complete user settings functionality implemented including profile management, p
 - Auto-populated with current user data via useEffect
 
 ✅ **Page:** `src/app/(authenticated)/settings/profile/page.tsx` (26 lines)
+
 - Clean client component
 - Imports and renders ProfileSettingsForm
 - Proper page header with description
 
 **Testing Complete:**
+
 - ✅ Unit test useUpdateProfile hook (195 lines, 5 test cases)
 - ✅ Unit test ProfileSettingsForm component (comprehensive)
 - ✅ Coverage: 96.15% for ProfileSettingsForm
 - ⚠️ E2E test profile update flow (recommended for future)
 
 **Quality Metrics:**
+
 - Professional code with JSDoc comments
 - Type-safe throughout
 - SSR-safe (client components)
@@ -1465,11 +1624,13 @@ Complete user settings functionality implemented including profile management, p
 **Implementation Completed:**
 
 ✅ **Hook:** `usePasswordChange` from `src/lib/api/hooks/useAuth.ts`
+
 - Already implemented in Phase 2
 - Mutation hook for password changes
 - Form auto-reset on success
 
 ✅ **Component:** `src/components/settings/PasswordChangeForm.tsx` (216 lines)
+
 - Fields: current_password, new_password, confirm_password
 - Strong password validation (min 8 chars, uppercase, lowercase, number, special char)
 - Password confirmation matching with Zod refine
@@ -1480,16 +1641,19 @@ Complete user settings functionality implemented including profile management, p
 - Cancel button for undo
 
 ✅ **Page:** `src/app/(authenticated)/settings/password/page.tsx` (26 lines)
+
 - Clean client component
 - Imports and renders PasswordChangeForm
 - Proper page header with description
 
 **Testing Complete:**
+
 - ✅ Unit test PasswordChangeForm component (comprehensive)
 - ✅ Coverage: 91.3% for PasswordChangeForm
 - ⚠️ E2E test password change flow (recommended for future)
 
 **Quality Metrics:**
+
 - Strong password requirements enforced
 - Security-focused (autocomplete="new-password")
 - User-friendly error messages
@@ -1507,6 +1671,7 @@ Complete user settings functionality implemented including profile management, p
 **Implementation Completed:**
 
 ✅ **Hooks:** `src/lib/api/hooks/useSession.ts` (178 lines)
+
 - `useListSessions` query hook
 - `useRevokeSession` mutation hook
 - `useRevokeAllOtherSessions` mutation hook (bulk revocation)
@@ -1515,6 +1680,7 @@ Complete user settings functionality implemented including profile management, p
 - 30s staleTime for performance
 
 ✅ **Component:** `src/components/settings/SessionCard.tsx` (182 lines)
+
 - Individual session display
 - Device icon (Monitor)
 - Session information: device name, IP, location, last activity
@@ -1525,6 +1691,7 @@ Complete user settings functionality implemented including profile management, p
 - date-fns for relative timestamps
 
 ✅ **Component:** `src/components/settings/SessionsManager.tsx` (243 lines)
+
 - Session list manager
 - Lists all active sessions with SessionCard components
 - Loading skeleton state
@@ -1535,10 +1702,12 @@ Complete user settings functionality implemented including profile management, p
 - Security tip displayed at bottom
 
 ✅ **Page:** `src/app/(authenticated)/settings/sessions/page.tsx` (26 lines)
+
 - Clean client component
 - Imports and renders SessionsManager
 
 **Testing Complete:**
+
 - ✅ Unit test useListSessions hook (339 lines, 11 test cases)
 - ✅ Unit test useRevokeSession hook (included in useSession.test.tsx)
 - ✅ Unit test SessionCard component (comprehensive)
@@ -1547,6 +1716,7 @@ Complete user settings functionality implemented including profile management, p
 - ⚠️ E2E test session revocation flow (recommended for future)
 
 **Quality Metrics:**
+
 - Comprehensive error handling
 - Loading states everywhere
 - User-friendly empty states
@@ -1560,12 +1730,14 @@ Complete user settings functionality implemented including profile management, p
 **Reason:** Not critical for MVP, theme already working
 
 **Future Implementation:**
+
 - Theme preference (already working via ThemeProvider)
 - Email notification preferences
 - Timezone selection
 - Language selection
 
 **Current State:**
+
 - Placeholder page exists
 - Can be implemented in future phase if needed
 
@@ -1578,6 +1750,7 @@ Complete user settings functionality implemented including profile management, p
 **Risk:** Low
 
 **Requirements Met:**
+
 - ✅ All unit tests passing (451/451 tests, 100% pass rate) ⭐
 - ✅ All test suites passing (40/40, 100% pass rate) ⭐
 - ⚠️ E2E tests for settings pages (recommended for future)
@@ -1588,6 +1761,7 @@ Complete user settings functionality implemented including profile management, p
 - ✅ Manual testing completed (all settings flows functional)
 
 **Test Coverage Achieved:**
+
 - ProfileSettingsForm: 96.15% coverage (form submission excluded with istanbul ignore)
 - PasswordChangeForm: 91.3% coverage (form submission excluded with istanbul ignore)
 - SessionsManager: 90.62% coverage
@@ -1595,12 +1769,14 @@ Complete user settings functionality implemented including profile management, p
 - All hooks: 100% coverage ⭐
 
 **Coverage Exclusions (Documented):**
+
 - Form submission logic in ProfileSettingsForm and PasswordChangeForm
 - Reason: react-hook-form's isDirty state doesn't update synchronously in unit tests
 - Properly documented with istanbul ignore comments
 - E2E tests recommended to cover these flows
 
 **E2E Test Status:**
+
 - ⚠️ Settings-specific E2E tests not yet created
 - Recommended scenarios for future:
   1. Update profile (first name, last name)
@@ -1612,6 +1788,7 @@ Complete user settings functionality implemented including profile management, p
 ### Success Criteria ✅ ALL MET
 
 **Task 4.1 Complete ✅:**
+
 - [x] useUpdateProfile hook implemented and tested
 - [x] ProfileSettingsForm component complete with validation
 - [x] Profile page functional (view + edit)
@@ -1619,6 +1796,7 @@ Complete user settings functionality implemented including profile management, p
 - [x] User can update first_name and last_name
 
 **Task 4.2 Complete ✅:**
+
 - [x] PasswordChangeForm component complete
 - [x] Password page functional
 - [x] Unit tests passing (91.3% coverage)
@@ -1626,6 +1804,7 @@ Complete user settings functionality implemented including profile management, p
 - [x] Error handling for wrong current password
 
 **Task 4.3 Complete ✅:**
+
 - [x] useListSessions and useRevokeSession hooks implemented
 - [x] SessionsManager component displays all sessions
 - [x] Session revocation works correctly
@@ -1634,6 +1813,7 @@ Complete user settings functionality implemented including profile management, p
 - [x] Bulk revocation supported
 
 **Phase 4 Complete ✅:**
+
 - [x] All tasks 4.1, 4.2, 4.3, 4.5 complete (4.4 deferred)
 - [x] Tests: 451 unit tests passing (100% pass rate) ⭐
 - [x] E2E Tests: 45 settings tests added ⭐
@@ -1664,6 +1844,7 @@ Component library and development tools already implemented via `/dev` routes. I
 **What Was Implemented:**
 
 ### Dev Routes & Tools ✅
+
 - ✅ `/dev` - Development hub with navigation
 - ✅ `/dev/components` - ComponentShowcase with all shadcn/ui components
 - ✅ `/dev/docs` - Design system documentation integration
@@ -1673,6 +1854,7 @@ Component library and development tools already implemented via `/dev` routes. I
 - ✅ `/dev/forms` - Form patterns and examples
 
 ### Dev Components ✅
+
 - ✅ `DevLayout.tsx` - Consistent dev section layout
 - ✅ `DevBreadcrumbs.tsx` - Navigation breadcrumbs
 - ✅ `ComponentShowcase.tsx` - Comprehensive component gallery
@@ -1681,6 +1863,7 @@ Component library and development tools already implemented via `/dev` routes. I
 - ✅ `CodeSnippet.tsx` - Syntax-highlighted code blocks
 
 ### Design System Documentation ✅
+
 - ✅ `docs/design-system/` - Complete design system guide
   - 00-quick-start.md - 5-minute crash course
   - 01-foundations.md - Colors, typography, spacing
@@ -1694,7 +1877,9 @@ Component library and development tools already implemented via `/dev` routes. I
   - 99-reference.md - Quick reference cheat sheet
 
 ### Component Library ✅
+
 All shadcn/ui components installed and configured:
+
 - ✅ Button, Card, Input, Label, Form, Select, Table
 - ✅ Dialog, Toast, Tabs, Dropdown Menu, Popover, Sheet
 - ✅ Avatar, Badge, Separator, Skeleton, Alert
@@ -1703,6 +1888,7 @@ All shadcn/ui components installed and configured:
 - ✅ Full accessibility support (WCAG AA)
 
 **Quality Metrics:**
+
 - Dev routes excluded from coverage (demo pages)
 - ComponentShowcase excluded from coverage (visual demo)
 - All reusable components included in coverage (98.38%)
@@ -1732,12 +1918,14 @@ Implement admin dashboard foundation with layout, navigation, and basic structur
 **Implementation:**
 
 **Step 1: Create Admin Layout** (`src/app/admin/layout.tsx`)
+
 - Separate layout from authenticated layout
 - Sidebar navigation for admin sections
 - Breadcrumbs for admin navigation
 - Admin-only route protection (requires `is_superuser: true`)
 
 **Step 2: Create Admin Sidebar Component** (`src/components/admin/AdminSidebar.tsx`)
+
 - Navigation links:
   - Dashboard (overview)
   - Users (user management)
@@ -1748,6 +1936,7 @@ Implement admin dashboard foundation with layout, navigation, and basic structur
 - User info at bottom
 
 **Step 3: Create Admin Dashboard Page** (`src/app/admin/page.tsx`)
+
 - Overview statistics:
   - Total users
   - Active users (last 30 days)
@@ -1757,17 +1946,20 @@ Implement admin dashboard foundation with layout, navigation, and basic structur
 - Quick actions (placeholder)
 
 **Step 4: Admin Route Protection**
+
 - Use `AuthGuard` with `requireAdmin` prop
 - Redirect non-admins to home page
 - Show error message for unauthorized access
 
 **Testing:**
+
 - [ ] Unit test AdminSidebar component
 - [ ] Unit test admin layout
 - [ ] E2E test admin access (superuser can access)
 - [ ] E2E test admin denial (regular user gets 403)
 
 **Files to Create:**
+
 - `src/app/admin/layout.tsx` - Admin layout
 - `src/app/admin/page.tsx` - Dashboard overview
 - `src/components/admin/AdminSidebar.tsx` - Navigation sidebar
@@ -1784,6 +1976,7 @@ Implement admin dashboard foundation with layout, navigation, and basic structur
 **Implementation:**
 
 **Step 1: Create Stats Hooks** (`src/lib/api/hooks/useAdmin.ts`)
+
 ```typescript
 export function useAdminStats() {
   return useQuery({
@@ -1795,29 +1988,34 @@ export function useAdminStats() {
 ```
 
 **Step 2: Create Stat Card Component** (`src/components/admin/StatCard.tsx`)
+
 - Display stat value with label
 - Trend indicator (up/down/neutral)
 - Icon for each stat type
 - Loading skeleton state
 
 **Step 3: Create Dashboard Stats Grid** (`src/components/admin/DashboardStats.tsx`)
+
 - Grid of StatCard components
 - Responsive layout (1-2-4 columns)
 - Loading state for all cards
 - Error state with retry
 
 **Step 4: Update Dashboard Page**
+
 - Render DashboardStats component
 - Add recent activity section (placeholder)
 - Add quick actions section (placeholder)
 
 **Testing:**
+
 - [ ] Unit test useAdminStats hook
 - [ ] Unit test StatCard component
 - [ ] Unit test DashboardStats component
 - [ ] E2E test dashboard rendering
 
 **Files to Create:**
+
 - `src/lib/api/hooks/useAdmin.ts` - Admin data hooks
 - `src/components/admin/StatCard.tsx` - Stat display card
 - `src/components/admin/DashboardStats.tsx` - Stats grid
@@ -1835,19 +2033,23 @@ export function useAdminStats() {
 **Implementation:**
 
 **Step 1: Create Users Page** (`src/app/admin/users/page.tsx`)
+
 - Placeholder for user list
 - Page header with title
 - "User Management coming in Phase 7" message
 
 **Step 2: Add to Sidebar**
+
 - Link to `/admin/users`
 - Active state highlighting
 
 **Testing:**
+
 - [ ] E2E test navigation to users page
 - [ ] E2E test placeholder content displays
 
 **Files to Create:**
+
 - `src/app/admin/users/page.tsx` - Users list page (placeholder)
 
 ### Task 6.4: Organizations Section Structure (Priority 2)
@@ -1860,24 +2062,29 @@ export function useAdminStats() {
 **Implementation:**
 
 **Step 1: Create Organizations Page** (`src/app/admin/organizations/page.tsx`)
+
 - Placeholder for org list
 - Page header with title
 - "Organization Management coming in Phase 8" message
 
 **Step 2: Add to Sidebar**
+
 - Link to `/admin/organizations`
 - Active state highlighting
 
 **Testing:**
+
 - [ ] E2E test navigation to organizations page
 - [ ] E2E test placeholder content displays
 
 **Files to Create:**
+
 - `src/app/admin/organizations/page.tsx` - Orgs list page (placeholder)
 
 ### Success Criteria
 
 **Task 6.1 Complete When:**
+
 - [ ] Admin layout created with sidebar
 - [ ] Admin sidebar navigation functional
 - [ ] Admin dashboard page displays
@@ -1886,6 +2093,7 @@ export function useAdminStats() {
 - [ ] Non-admin users cannot access admin routes
 
 **Task 6.2 Complete When:**
+
 - [ ] useAdminStats hook implemented
 - [ ] StatCard component complete
 - [ ] DashboardStats displays stats grid
@@ -1894,12 +2102,14 @@ export function useAdminStats() {
 - [ ] Dashboard shows real stats from API
 
 **Task 6.3 & 6.4 Complete When:**
+
 - [ ] Users and Organizations pages created (placeholders)
 - [ ] Sidebar navigation includes both sections
 - [ ] E2E tests for navigation passing
 - [ ] Placeholder content displays correctly
 
 **Phase 6 Complete When:**
+
 - [ ] All tasks 6.1, 6.2, 6.3, 6.4 complete
 - [ ] Tests: All new tests passing (100%)
 - [ ] E2E: Admin access tests passing
@@ -1915,6 +2125,7 @@ export function useAdminStats() {
 **Final Verdict:** ✅ Phase 6 COMPLETE - Admin foundation established successfully
 
 **Completion Summary (Nov 6, 2025):**
+
 - ✅ Admin layout with sidebar navigation implemented (`src/app/admin/layout.tsx`)
 - ✅ AdminSidebar component with collapsible navigation (`src/components/admin/AdminSidebar.tsx`)
 - ✅ Breadcrumbs component for navigation trail (`src/components/admin/Breadcrumbs.tsx`)
@@ -1934,6 +2145,7 @@ export function useAdminStats() {
 - ✅ Route protection with AuthGuard requiring `is_superuser: true`
 
 **Known Issues:**
+
 - E2E tests have some flakiness with `loginViaUI` helper timeouts - related to test infrastructure, not production code
 - Admin sessions stat shows 0 (backend endpoint `/api/v1/admin/sessions` not yet implemented)
 
@@ -1953,6 +2165,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 ### Implementation Completed
 
 **Hooks** (`src/lib/api/hooks/useAdmin.tsx`):
+
 - ✅ `useAdminUsers` - List users with pagination and filtering
 - ✅ `useCreateUser` - Create new user with validation
 - ✅ `useUpdateUser` - Update user details
@@ -1962,6 +2175,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 - ✅ `useBulkUserAction` - Bulk operations (activate, deactivate, delete)
 
 **Components** (`src/components/admin/users/`):
+
 - ✅ **UserManagementContent.tsx** - Main container with state management
   - URL-based state for filters (search, active, superuser, page)
   - User selection state for bulk operations
@@ -1996,6 +2210,7 @@ Complete admin user management system with full CRUD operations, advanced filter
   - Clear selection
 
 **Features Implemented:**
+
 - ✅ User list with pagination (20 per page)
 - ✅ Advanced filtering:
   - Search by name or email (debounced)
@@ -2013,6 +2228,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 ### Testing Complete
 
 **Unit Tests** (134 tests, 5 test suites):
+
 - ✅ `UserFormDialog.test.tsx` - Form validation, dialog states
 - ✅ `BulkActionToolbar.test.tsx` - Bulk actions, confirmations
 - ✅ `UserManagementContent.test.tsx` - State management, URL params
@@ -2020,6 +2236,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 - ✅ `UserListTable.test.tsx` - Table rendering, selection
 
 **E2E Tests** (51 tests in admin-users.spec.ts):
+
 - ✅ User list rendering and pagination
 - ✅ Search functionality (debounced)
 - ✅ Filter by active status
@@ -2031,6 +2248,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 - ✅ Accessibility features (headings, labels, ARIA)
 
 **Coverage:**
+
 - Overall: 97.22% statements
 - Components: All admin/users components 90%+
 - E2E: All critical flows covered
@@ -2038,6 +2256,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 ### Quality Metrics
 
 **Final Metrics:**
+
 - ✅ Unit Tests: 745/745 passing (100%)
 - ✅ E2E Tests: 51/51 admin user tests passing
 - ✅ Coverage: 97.22% (exceeds 90% target)
@@ -2047,6 +2266,7 @@ Complete admin user management system with full CRUD operations, advanced filter
 - ✅ All features functional and tested
 
 **User Experience:**
+
 - Professional UI with consistent design system
 - Responsive on all screen sizes
 - Clear feedback for all actions
@@ -2069,6 +2289,7 @@ Complete admin organization management system implemented following the same pat
 ### Implementation Completed ✅
 
 **Backend API Endpoints Integrated:**
+
 - ✅ `GET /api/v1/admin/organizations` - List organizations with pagination
 - ✅ `POST /api/v1/admin/organizations` - Create organization
 - ✅ `GET /api/v1/admin/organizations/{id}` - Get organization details
@@ -2082,6 +2303,7 @@ Complete admin organization management system implemented following the same pat
 ### Task 8.1: Organization Hooks & Components ✅
 
 **Hooks Implemented** (`src/lib/api/hooks/useAdmin.tsx`):
+
 - ✅ `useAdminOrganizations` - List organizations with pagination/filtering
 - ✅ `useCreateOrganization` - Create new organization
 - ✅ `useUpdateOrganization` - Update organization details
@@ -2092,6 +2314,7 @@ Complete admin organization management system implemented following the same pat
 - ✅ `useUpdateMemberRole` - Change member role (owner/admin/member)
 
 **Components Created** (`src/components/admin/organizations/`):
+
 - ✅ `OrganizationManagementContent.tsx` - Main container
 - ✅ `OrganizationListTable.tsx` - Data table with org list
 - ✅ `OrganizationFormDialog.tsx` - Create/edit organization
@@ -2104,6 +2327,7 @@ Complete admin organization management system implemented following the same pat
 ### Task 8.2: Organization Features ✅
 
 **Core Features Delivered:**
+
 - ✅ Organization list with pagination
 - ✅ Search by organization name
 - ✅ Filter by member count
@@ -2118,6 +2342,7 @@ Complete admin organization management system implemented following the same pat
 - ✅ Loading states and toast notifications
 
 **Business Rules Enforced:**
+
 - ✅ Organizations with members cannot be deleted (safety)
 - ✅ Organization must have at least one owner
 - ✅ Owners can manage all members
@@ -2127,6 +2352,7 @@ Complete admin organization management system implemented following the same pat
 ### Task 8.3: Testing Results ✅
 
 **Unit Tests Delivered:**
+
 - ✅ All hooks tested (organization CRUD, member management)
 - ✅ All components tested (table, dialogs, menus)
 - ✅ Form validation tested
@@ -2134,6 +2360,7 @@ Complete admin organization management system implemented following the same pat
 - ✅ **Result: 921 tests passing (100% pass rate)**
 
 **E2E Tests Delivered:**
+
 - ✅ `e2e/admin-organizations.spec.ts` (29 tests)
   - Organization list table and pagination
   - Create organization dialog and functionality
@@ -2157,6 +2384,7 @@ Complete admin organization management system implemented following the same pat
 ### Success Criteria - ALL MET ✅
 
 **Task 8.1 Complete:**
+
 - ✅ All hooks implemented and tested
 - ✅ All components created with proper styling
 - ✅ Organization CRUD functional
@@ -2166,6 +2394,7 @@ Complete admin organization management system implemented following the same pat
 - ✅ ESLint: 0 warnings
 
 **Task 8.2 Complete:**
+
 - ✅ All features functional
 - ✅ Business rules enforced
 - ✅ Permission system working
@@ -2174,12 +2403,14 @@ Complete admin organization management system implemented following the same pat
 - ✅ Loading states everywhere
 
 **Task 8.3 Complete:**
+
 - ✅ Unit tests: 100% pass rate (921 passing)
 - ✅ E2E tests: All critical flows covered (49 tests)
 - ✅ Coverage: 96.92% overall (exceeds target)
 - ✅ No regressions in existing features
 
 **Phase 8 Complete:**
+
 - ✅ All tasks 8.1, 8.2, 8.3 complete
 - ✅ Tests: All new tests passing (100%)
 - ✅ Coverage: 96.92% (exceeds 95% target)
@@ -2193,6 +2424,7 @@ Complete admin organization management system implemented following the same pat
 ### Quality Metrics
 
 **Test Results:**
+
 - Unit Tests: 921 passed (100%)
 - E2E Tests: 173 passed, 1 skipped
 - Coverage: 96.92%
@@ -2201,11 +2433,13 @@ Complete admin organization management system implemented following the same pat
 - Build: SUCCESS
 
 **Components Created:**
+
 - 8 new components (all tested)
 - 8 new hooks (all tested)
 - 2 new E2E test files (49 tests)
 
 **Code Quality:**
+
 - Zero regressions
 - Follows established design patterns
 - Comprehensive error handling
@@ -2224,6 +2458,7 @@ Complete admin organization management system implemented following the same pat
 ### Components Created
 
 **Chart Components** (`src/components/charts/`):
+
 1. ✅ **ChartCard.tsx** - Base wrapper component for all charts with consistent styling, loading states, and error handling
 2. ✅ **UserGrowthChart.tsx** - Line chart displaying total and active users over 30 days
 3. ✅ **OrganizationDistributionChart.tsx** - Bar chart showing member distribution across organizations
@@ -2234,6 +2469,7 @@ Complete admin organization management system implemented following the same pat
 ### Dashboard Integration
 
 ✅ Updated `/admin/page.tsx` to include:
+
 - Analytics Overview section with chart grid
 - All 4 charts displayed in responsive 2-column grid
 - Consistent spacing and layout with existing dashboard sections
@@ -2241,6 +2477,7 @@ Complete admin organization management system implemented following the same pat
 ### Testing
 
 **Unit Tests** (`tests/components/charts/`):
+
 - ✅ ChartCard.test.tsx - 8 tests covering loading, error, and content states
 - ✅ UserGrowthChart.test.tsx - 6 tests covering all chart states
 - ✅ OrganizationDistributionChart.test.tsx - 6 tests
@@ -2249,6 +2486,7 @@ Complete admin organization management system implemented following the same pat
 - **Total:** 32 new unit tests, all passing
 
 **E2E Tests** (`e2e/`):
+
 - ✅ admin-dashboard.spec.ts - 16 tests covering:
   - Dashboard page load and title
   - Statistics cards display
@@ -2258,6 +2496,7 @@ Complete admin organization management system implemented following the same pat
   - Accessibility (heading hierarchy, accessible links)
 
 **Unit Tests Updated:**
+
 - ✅ tests/app/admin/page.test.tsx - Added chart component mocks and 2 new tests
 
 ### Success Criteria
@@ -2277,6 +2516,7 @@ Complete admin organization management system implemented following the same pat
 ### Quality Metrics
 
 **Test Results:**
+
 - Unit Tests: 954 passed (100%) - Added 32 new tests
 - E2E Tests: 173+ tests (existing suite + 16 new dashboard tests)
 - Coverage: 95.6% overall
@@ -2285,11 +2525,13 @@ Complete admin organization management system implemented following the same pat
 - Build: SUCCESS
 
 **Components Created:**
+
 - 5 new chart components (all tested)
 - 5 new unit test files (32 tests)
 - 1 new E2E test file (16 tests)
 
 **Code Quality:**
+
 - Zero regressions
 - Follows established design patterns
 - Comprehensive error handling
@@ -2298,6 +2540,7 @@ Complete admin organization management system implemented following the same pat
 - Responsive layouts
 
 **Technical Implementation:**
+
 - Recharts library (already installed)
 - date-fns for date formatting
 - CSS variables for theming (already configured)
@@ -2313,6 +2556,7 @@ Complete admin organization management system implemented following the same pat
 **Status:** TODO 📋
 
 **Remaining Phases:**
+
 - **Phase 10:** Testing & Quality Assurance (3-4 days)
 - **Phase 11:** Documentation & Dev Tools (2-3 days)
 - **Phase 12:** Production Readiness & Final Optimization (2-3 days)
@@ -2326,28 +2570,29 @@ Complete admin organization management system implemented following the same pat
 
 ### Overall Progress Dashboard
 
-| Phase | Status | Started | Completed | Duration | Key Deliverables |
-|-------|--------|---------|-----------|----------|------------------|
-| 0: Foundation Docs | ✅ Complete | Oct 29 | Oct 29 | 1 day | 5 documentation files |
-| 1: Infrastructure | ✅ Complete | Oct 29 | Oct 31 | 3 days | Setup + auth core + tests |
-| 2: Auth System | ✅ Complete | Oct 31 | Nov 1 | 2 days | Login, register, reset flows |
-| 2.5: Design System | ✅ Complete | Nov 2 | Nov 2 | 1 day | Theme, layout, 48 tests |
-| 3: Optimization | ✅ Complete | Nov 2 | Nov 2 | <1 day | Performance fixes, race condition fix |
-| 4: User Settings | ✅ Complete | Nov 2 | Nov 3 | 1 day | Profile, password, sessions (451 tests, 98.38% coverage) |
-| 5: Component Library | ✅ Complete | Nov 2 | Nov 2 | With Phase 2.5 | /dev routes, docs, showcase (done with design system) |
-| 6: Admin Foundation | ✅ Complete | Nov 6 | Nov 6 | 1 day | Admin layout, dashboard, stats, navigation (557 tests, 97.25% coverage) |
-| 7: User Management | ✅ Complete | Nov 6 | Nov 6 | 1 day | Full CRUD, filters, bulk ops (745 tests, 97.22% coverage, 51 E2E tests) |
-| 8: Org Management | ✅ Complete | Nov 7 | Nov 7 | 1 day | Admin org CRUD + member management (921 tests, 96.92% coverage, 49 E2E tests) |
-| 9: Charts & Analytics | ✅ Complete | Nov 7 | Nov 7 | 1 day | 5 chart components, dashboard integration (954 tests, 95.6% coverage, 16 E2E tests) |
-| 10: Testing | 📋 TODO | - | - | 3-4 days | Comprehensive test suite |
-| 11: Documentation | 📋 TODO | - | - | 2-3 days | Final docs |
-| 12: Production Prep | 📋 TODO | - | - | 2-3 days | Final optimization, security |
-| 13: Handoff | 📋 TODO | - | - | 1-2 days | Final validation |
+| Phase                 | Status      | Started | Completed | Duration       | Key Deliverables                                                                    |
+| --------------------- | ----------- | ------- | --------- | -------------- | ----------------------------------------------------------------------------------- |
+| 0: Foundation Docs    | ✅ Complete | Oct 29  | Oct 29    | 1 day          | 5 documentation files                                                               |
+| 1: Infrastructure     | ✅ Complete | Oct 29  | Oct 31    | 3 days         | Setup + auth core + tests                                                           |
+| 2: Auth System        | ✅ Complete | Oct 31  | Nov 1     | 2 days         | Login, register, reset flows                                                        |
+| 2.5: Design System    | ✅ Complete | Nov 2   | Nov 2     | 1 day          | Theme, layout, 48 tests                                                             |
+| 3: Optimization       | ✅ Complete | Nov 2   | Nov 2     | <1 day         | Performance fixes, race condition fix                                               |
+| 4: User Settings      | ✅ Complete | Nov 2   | Nov 3     | 1 day          | Profile, password, sessions (451 tests, 98.38% coverage)                            |
+| 5: Component Library  | ✅ Complete | Nov 2   | Nov 2     | With Phase 2.5 | /dev routes, docs, showcase (done with design system)                               |
+| 6: Admin Foundation   | ✅ Complete | Nov 6   | Nov 6     | 1 day          | Admin layout, dashboard, stats, navigation (557 tests, 97.25% coverage)             |
+| 7: User Management    | ✅ Complete | Nov 6   | Nov 6     | 1 day          | Full CRUD, filters, bulk ops (745 tests, 97.22% coverage, 51 E2E tests)             |
+| 8: Org Management     | ✅ Complete | Nov 7   | Nov 7     | 1 day          | Admin org CRUD + member management (921 tests, 96.92% coverage, 49 E2E tests)       |
+| 9: Charts & Analytics | ✅ Complete | Nov 7   | Nov 7     | 1 day          | 5 chart components, dashboard integration (954 tests, 95.6% coverage, 16 E2E tests) |
+| 10: Testing           | 📋 TODO     | -       | -         | 3-4 days       | Comprehensive test suite                                                            |
+| 11: Documentation     | 📋 TODO     | -       | -         | 2-3 days       | Final docs                                                                          |
+| 12: Production Prep   | 📋 TODO     | -       | -         | 2-3 days       | Final optimization, security                                                        |
+| 13: Handoff           | 📋 TODO     | -       | -         | 1-2 days       | Final validation                                                                    |
 
 **Current:** Phase 9 Complete (Charts & Analytics) ✅
 **Next:** Phase 10 - Testing & Quality Assurance
 
 ### Task Status Legend
+
 - ✅ **Complete** - Finished and reviewed
 - ⚙ **In Progress** - Currently being worked on
 - 📋 **TODO** - Not started
@@ -2371,24 +2616,31 @@ Complete admin organization management system implemented following the same pat
 ### Parallelization Opportunities
 
 **Within Phase 2 (After Task 2.2):**
+
 - Tasks 2.3, 2.4, 2.5 can run in parallel (3 agents)
 
 **Within Phase 3:**
+
 - Tasks 3.1, 3.2, 3.3 should run sequentially (dependencies on each other)
 
 **Within Phase 4 (After Task 4.1):**
+
 - Tasks 4.2, 4.3, 4.4, 4.5 can run in parallel (4 agents)
 
 **Within Phase 5:**
+
 - All tasks 5.1, 5.2, 5.3 can run in parallel (3 agents)
 
 **Within Phase 6 (After Task 6.1):**
+
 - Tasks 6.2, 6.3, 6.4 can run in parallel (3 agents)
 
 **Phase 10 (Testing):**
+
 - All testing tasks can run in parallel (4 agents)
 
 **Estimated Timeline:**
+
 - **With 4 parallel agents:** 8-10 weeks
 - **With 2 parallel agents:** 12-14 weeks
 - **With 1 agent (sequential):** 18-20 weeks
@@ -2416,6 +2668,7 @@ Complete admin organization management system implemented following the same pat
 ### Per-Phase Success Criteria
 
 **Each phase must meet these before proceeding:**
+
 - [ ] All tasks complete
 - [ ] Tests written and passing
 - [ ] Code reviewed (self + multi-agent)
@@ -2481,12 +2734,14 @@ npm audit                    # Check for vulnerabilities
 ### Environment Variables
 
 **Required:**
+
 ```env
 NEXT_PUBLIC_API_URL=http://localhost:8000
 NEXT_PUBLIC_APP_NAME=Template Project
 ```
 
 **Optional:**
+
 ```env
 NEXT_PUBLIC_API_TIMEOUT=30000
 NEXT_PUBLIC_TOKEN_REFRESH_THRESHOLD=300000
@@ -2498,6 +2753,7 @@ See `.env.example` for complete list.
 ### Current Technical State
 
 **What Works:**
+
 - ✅ Authentication core (crypto, storage, store)
 - ✅ Configuration management
 - ✅ Test infrastructure
@@ -2508,12 +2764,14 @@ See `.env.example` for complete list.
 - ✅ Auth hooks (useAuth, useLogin, useRegister, etc.)
 
 **What's Needed Next:**
+
 - [ ] User profile management (Phase 3)
 - [ ] Password change UI (Phase 3)
 - [ ] Session management UI (Phase 3)
 - [ ] Authenticated layout (Phase 3)
 
 **Technical Debt:**
+
 - API mutation testing requires MSW (Phase 9)
 - Generated client lint errors (auto-generated, cannot fix)
 - API client architecture decision deferred to Phase 3
@@ -2525,6 +2783,7 @@ See `.env.example` for complete list.
 ### Always Reference During Implementation
 
 **Primary Documents:**
+
 - `IMPLEMENTATION_PLAN.md` (this file) - Implementation roadmap
 - `frontend-requirements.md` - Detailed requirements
 - `docs/ARCHITECTURE.md` - System design and patterns
@@ -2534,11 +2793,13 @@ See `.env.example` for complete list.
 - `docs/API_INTEGRATION.md` - Backend API integration
 
 **Backend References:**
+
 - `../backend/docs/ARCHITECTURE.md` - Backend patterns to mirror
 - `../backend/docs/CODING_STANDARDS.md` - Backend conventions
 - Backend OpenAPI spec: `http://localhost:8000/api/v1/openapi.json`
 
 **Testing References:**
+
 - `jest.config.js` - Test configuration
 - `jest.setup.js` - Global test setup
 - `tests/` directory - Existing test patterns
@@ -2546,6 +2807,7 @@ See `.env.example` for complete list.
 ### Audit & Quality Reports
 
 **Available in `/tmp/`:**
+
 - `AUDIT_SUMMARY.txt` - Quick reference
 - `AUDIT_COMPLETE.md` - Full audit results
 - `COVERAGE_CONFIG.md` - Coverage explanation
@@ -2555,15 +2817,15 @@ See `.env.example` for complete list.
 
 ## Version History
 
-| Version | Date | Changes | Author |
-|---------|------|---------|--------|
-| 1.0 | Oct 29, 2025 | Initial plan created | Claude |
-| 1.1 | Oct 31, 2025 | Phase 0 complete, updated structure | Claude |
-| 1.2 | Oct 31, 2025 | Phase 1 complete, comprehensive audit | Claude |
-| 1.3 | Oct 31, 2025 | **Major Update:** Reformatted as self-contained document | Claude |
-| 1.4 | Nov 1, 2025 | Phase 2 complete with accurate status and metrics | Claude |
-| 1.5 | Nov 1, 2025 | **Deep Review Update:** 97.6% coverage, 9.3/10 score, production-ready | Claude |
-| 1.6 | Nov 2, 2025 | **Design System + Optimization Plan:** Phase 2.5 complete, Phase 3.0 detailed | Claude |
+| Version | Date         | Changes                                                                       | Author |
+| ------- | ------------ | ----------------------------------------------------------------------------- | ------ |
+| 1.0     | Oct 29, 2025 | Initial plan created                                                          | Claude |
+| 1.1     | Oct 31, 2025 | Phase 0 complete, updated structure                                           | Claude |
+| 1.2     | Oct 31, 2025 | Phase 1 complete, comprehensive audit                                         | Claude |
+| 1.3     | Oct 31, 2025 | **Major Update:** Reformatted as self-contained document                      | Claude |
+| 1.4     | Nov 1, 2025  | Phase 2 complete with accurate status and metrics                             | Claude |
+| 1.5     | Nov 1, 2025  | **Deep Review Update:** 97.6% coverage, 9.3/10 score, production-ready        | Claude |
+| 1.6     | Nov 2, 2025  | **Design System + Optimization Plan:** Phase 2.5 complete, Phase 3.0 detailed | Claude |
 
 ---
 
@@ -2572,6 +2834,7 @@ See `.env.example` for complete list.
 ### Phase 3 Completed (November 2, 2025) ✅
 
 **Achievements:**
+
 - 🎯 Lighthouse Performance: 100% (perfect score)
 - 📈 Test Coverage: 98.63% (improved from 97.57%)
 - 🧪 473 Total Tests: 100% passing (381 unit + 92 E2E)
@@ -2580,6 +2843,7 @@ See `.env.example` for complete list.
 - ⏸️ Deferred: AuthInitializer optimization (stable, Lighthouse 100%)
 
 **Key Decisions:**
+
 - AuthInitializer optimization deferred due to previous failure and current perfect performance
 - Focus on stability over theoretical gains
 - All console.log statements conditionalized (config.debug.api + NODE_ENV checks)
diff --git a/frontend/docs/API_INTEGRATION.md b/frontend/docs/API_INTEGRATION.md
index bb97d24..7d174d7 100755
--- a/frontend/docs/API_INTEGRATION.md
+++ b/frontend/docs/API_INTEGRATION.md
@@ -110,6 +110,7 @@ src/lib/api/generated/
 ### 2.3 When to Regenerate
 
 Regenerate the API client when:
+
 - Backend API changes (new endpoints, updated models)
 - After pulling backend changes from git
 - When types don't match backend responses
@@ -122,6 +123,7 @@ Regenerate the API client when:
 ### 3.1 Using Generated Services
 
 **Example: Fetching users**
+
 ```typescript
 import { UsersService } from '@/lib/api/generated';
 
@@ -129,19 +131,20 @@ async function getUsers() {
   const users = await UsersService.getUsers({
     page: 1,
     pageSize: 20,
-    search: 'john'
+    search: 'john',
   });
   return users;
 }
 ```
 
 **Example: Creating a user**
+
 ```typescript
 import { AdminService } from '@/lib/api/generated';
 
 async function createUser(data: CreateUserDto) {
   const newUser = await AdminService.createUser({
-    requestBody: data
+    requestBody: data,
   });
   return newUser;
 }
@@ -156,19 +159,19 @@ import { apiClient } from '@/lib/api/client';
 
 // GET request
 const response = await apiClient.get<User[]>('/users', {
-  params: { page: 1, search: 'john' }
+  params: { page: 1, search: 'john' },
 });
 
 // POST request
 const response = await apiClient.post<User>('/admin/users', {
   email: 'user@example.com',
   first_name: 'John',
-  password: 'secure123'
+  password: 'secure123',
 });
 
 // PATCH request
 const response = await apiClient.patch<User>(`/users/${userId}`, {
-  first_name: 'Jane'
+  first_name: 'Jane',
 });
 
 // DELETE request
@@ -178,27 +181,30 @@ await apiClient.delete(`/users/${userId}`);
 ### 3.3 Request Configuration
 
 **Timeouts:**
+
 ```typescript
 const response = await apiClient.get('/users', {
-  timeout: 5000 // 5 seconds
+  timeout: 5000, // 5 seconds
 });
 ```
 
 **Custom Headers:**
+
 ```typescript
 const response = await apiClient.post('/users', data, {
   headers: {
-    'X-Custom-Header': 'value'
-  }
+    'X-Custom-Header': 'value',
+  },
 });
 ```
 
 **Request Cancellation:**
+
 ```typescript
 const controller = new AbortController();
 
 const response = await apiClient.get('/users', {
-  signal: controller.signal
+  signal: controller.signal,
 });
 
 // Cancel the request
@@ -215,15 +221,13 @@ The Axios client automatically adds the Authorization header to all requests:
 
 ```typescript
 // src/lib/api/client.ts
-apiClient.interceptors.request.use(
-  (config) => {
-    const token = useAuthStore.getState().accessToken;
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
+apiClient.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
   }
-);
+  return config;
+});
 ```
 
 You don't need to manually add auth headers - they're added automatically!
@@ -246,7 +250,7 @@ apiClient.interceptors.response.use(
         // Refresh tokens
         const refreshToken = getRefreshToken();
         const { access_token, refresh_token } = await AuthService.refreshToken({
-          requestBody: { refresh_token: refreshToken }
+          requestBody: { refresh_token: refreshToken },
         });
 
         // Update stored tokens
@@ -255,7 +259,6 @@ apiClient.interceptors.response.use(
         // Retry original request with new token
         originalRequest.headers.Authorization = `Bearer ${access_token}`;
         return apiClient.request(originalRequest);
-
       } catch (refreshError) {
         // Refresh failed - logout user
         useAuthStore.getState().clearAuth();
@@ -278,14 +281,11 @@ import { useAuthStore } from '@/stores/authStore';
 async function login(email: string, password: string) {
   try {
     const response = await AuthService.login({
-      requestBody: { email, password }
+      requestBody: { email, password },
     });
 
     // Store tokens and user
-    useAuthStore.getState().setTokens(
-      response.access_token,
-      response.refresh_token
-    );
+    useAuthStore.getState().setTokens(response.access_token, response.refresh_token);
     useAuthStore.getState().setUser(response.user);
 
     return response.user;
@@ -319,6 +319,7 @@ The backend returns structured errors:
 ### 5.2 Parsing Errors
 
 **Error Parser** (`src/lib/api/errors.ts`):
+
 ```typescript
 import type { AxiosError } from 'axios';
 
@@ -341,80 +342,93 @@ export function parseAPIError(error: AxiosError<APIErrorResponse>): APIError[] {
 
   // Network errors
   if (!error.response) {
-    return [{
-      code: 'NETWORK_ERROR',
-      message: 'Network error. Please check your connection.',
-    }];
+    return [
+      {
+        code: 'NETWORK_ERROR',
+        message: 'Network error. Please check your connection.',
+      },
+    ];
   }
 
   // HTTP status errors
   const status = error.response.status;
   if (status === 403) {
-    return [{
-      code: 'FORBIDDEN',
-      message: "You don't have permission to perform this action.",
-    }];
+    return [
+      {
+        code: 'FORBIDDEN',
+        message: "You don't have permission to perform this action.",
+      },
+    ];
   }
 
   if (status === 404) {
-    return [{
-      code: 'NOT_FOUND',
-      message: 'The requested resource was not found.',
-    }];
+    return [
+      {
+        code: 'NOT_FOUND',
+        message: 'The requested resource was not found.',
+      },
+    ];
   }
 
   if (status === 429) {
-    return [{
-      code: 'RATE_LIMIT',
-      message: 'Too many requests. Please slow down.',
-    }];
+    return [
+      {
+        code: 'RATE_LIMIT',
+        message: 'Too many requests. Please slow down.',
+      },
+    ];
   }
 
   if (status >= 500) {
-    return [{
-      code: 'SERVER_ERROR',
-      message: 'A server error occurred. Please try again later.',
-    }];
+    return [
+      {
+        code: 'SERVER_ERROR',
+        message: 'A server error occurred. Please try again later.',
+      },
+    ];
   }
 
   // Fallback
-  return [{
-    code: 'UNKNOWN',
-    message: error.message || 'An unexpected error occurred.',
-  }];
+  return [
+    {
+      code: 'UNKNOWN',
+      message: error.message || 'An unexpected error occurred.',
+    },
+  ];
 }
 ```
 
 ### 5.3 Error Code Mapping
 
 **Error Messages** (`src/lib/api/errorMessages.ts`):
+
 ```typescript
 export const ERROR_MESSAGES: Record<string, string> = {
   // Authentication errors (AUTH_xxx)
-  'AUTH_001': 'Invalid email or password',
-  'AUTH_002': 'Account is inactive',
-  'AUTH_003': 'Invalid or expired token',
+  AUTH_001: 'Invalid email or password',
+  AUTH_002: 'Account is inactive',
+  AUTH_003: 'Invalid or expired token',
 
   // User errors (USER_xxx)
-  'USER_001': 'User not found',
-  'USER_002': 'This email is already registered',
-  'USER_003': 'Invalid user data',
+  USER_001: 'User not found',
+  USER_002: 'This email is already registered',
+  USER_003: 'Invalid user data',
 
   // Validation errors (VAL_xxx)
-  'VAL_001': 'Invalid input. Please check your data.',
-  'VAL_002': 'Email format is invalid',
-  'VAL_003': 'Password does not meet requirements',
+  VAL_001: 'Invalid input. Please check your data.',
+  VAL_002: 'Email format is invalid',
+  VAL_003: 'Password does not meet requirements',
 
   // Organization errors (ORG_xxx)
-  'ORG_001': 'Organization name already exists',
-  'ORG_002': 'Organization not found',
+  ORG_001: 'Organization name already exists',
+  ORG_002: 'Organization not found',
 
   // Permission errors (PERM_xxx)
-  'PERM_001': 'Insufficient permissions',
-  'PERM_002': 'Admin access required',
+  PERM_001: 'Insufficient permissions',
+  PERM_002: 'Admin access required',
 
   // Rate limiting (RATE_xxx)
-  'RATE_001': 'Too many requests. Please try again later.',
+  RATE_001: 'Too many requests. Please try again later.',
 };
 
 export function getErrorMessage(code: string): string {
@@ -425,6 +439,7 @@ export function getErrorMessage(code: string): string {
 ### 5.4 Displaying Errors
 
 **In React Query:**
+
 ```typescript
 import { toast } from 'sonner';
 import { parseAPIError, getErrorMessage } from '@/lib/api/errors';
@@ -442,6 +457,7 @@ export function useUpdateUser() {
 ```
 
 **In Forms:**
+
 ```typescript
 const onSubmit = async (data: FormData) => {
   try {
@@ -459,9 +475,9 @@ const onSubmit = async (data: FormData) => {
     });
 
     // Set general error
-    if (errors.some(err => !err.field)) {
+    if (errors.some((err) => !err.field)) {
       form.setError('root', {
-        message: errors.find(err => !err.field)?.message || 'An error occurred',
+        message: errors.find((err) => !err.field)?.message || 'An error occurred',
       });
     }
   }
@@ -505,8 +521,7 @@ export function useCreateUser() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (data: CreateUserDto) =>
-      AdminService.createUser({ requestBody: data }),
+    mutationFn: (data: CreateUserDto) => AdminService.createUser({ requestBody: data }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       toast.success('User created successfully');
@@ -542,8 +557,7 @@ export function useDeleteUser() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (userId: string) =>
-      AdminService.deleteUser({ userId }),
+    mutationFn: (userId: string) => AdminService.deleteUser({ userId }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       toast.success('User deleted successfully');
@@ -614,7 +628,7 @@ export function useToggleUserActive() {
     mutationFn: ({ userId, isActive }: { userId: string; isActive: boolean }) =>
       AdminService.updateUser({
         userId,
-        requestBody: { is_active: isActive }
+        requestBody: { is_active: isActive },
       }),
     onMutate: async ({ userId, isActive }) => {
       // Cancel outgoing refetches
@@ -687,9 +701,7 @@ export const handlers = [
   }),
 
   rest.delete('/api/v1/admin/users/:userId', (req, res, ctx) => {
-    return res(
-      ctx.json({ success: true, message: 'User deleted' })
-    );
+    return res(ctx.json({ success: true, message: 'User deleted' }));
   }),
 ];
 ```
@@ -844,6 +856,7 @@ function UserDetail({ userId }: { userId: string }) {
 **Symptom**: `Access-Control-Allow-Origin` error in console
 
 **Solution**: Ensure backend CORS is configured for frontend URL:
+
 ```python
 # backend/app/main.py
 BACKEND_CORS_ORIGINS = ["http://localhost:3000"]
@@ -854,12 +867,14 @@ BACKEND_CORS_ORIGINS = ["http://localhost:3000"]
 **Symptom**: All API calls return 401
 
 **Possible Causes**:
+
 1. No token in store: Check `useAuthStore.getState().accessToken`
 2. Token expired: Check token expiration
 3. Token invalid: Try logging in again
 4. Interceptor not working: Check interceptor configuration
 
 **Debug**:
+
 ```typescript
 // Log token in interceptor
 apiClient.interceptors.request.use((config) => {
@@ -877,6 +892,7 @@ apiClient.interceptors.request.use((config) => {
 **Symptom**: TypeScript errors about response types
 
 **Solution**: Regenerate API client to sync with backend
+
 ```bash
 npm run generate:api
 ```
@@ -886,10 +902,11 @@ npm run generate:api
 **Symptom**: UI shows old data after mutation
 
 **Solution**: Invalidate queries after mutations
+
 ```typescript
 onSuccess: () => {
   queryClient.invalidateQueries({ queryKey: ['users'] });
-}
+};
 ```
 
 ### 9.5 Network Timeout
@@ -897,6 +914,7 @@ onSuccess: () => {
 **Symptom**: Requests timeout
 
 **Solution**: Increase timeout or check backend performance
+
 ```typescript
 const apiClient = axios.create({
   timeout: 60000, // 60 seconds
@@ -908,6 +926,7 @@ const apiClient = axios.create({
 ## Conclusion
 
 This guide covers the essential patterns for integrating with the FastAPI backend. For more advanced use cases, refer to:
+
 - [TanStack Query Documentation](https://tanstack.com/query/latest)
 - [Axios Documentation](https://axios-http.com/)
 - Backend API documentation at `/docs` endpoint
diff --git a/frontend/docs/ARCHITECTURE.md b/frontend/docs/ARCHITECTURE.md
index 1f1a8a4..6fd2515 100755
--- a/frontend/docs/ARCHITECTURE.md
+++ b/frontend/docs/ARCHITECTURE.md
@@ -88,6 +88,7 @@ This frontend template provides a production-ready foundation for building moder
 ### 2.1 Core Framework
 
 **Next.js 15.x (App Router)**
+
 - **Why**: Modern React framework with RSC, excellent DX, optimized performance
 - **App Router**: Preferred over Pages Router for better data fetching, layouts, and streaming
 - **Server Components**: Default for better performance, client components for interactivity
@@ -96,11 +97,13 @@ This frontend template provides a production-ready foundation for building moder
 ### 2.2 State Management
 
 **TanStack Query (React Query v5)**
+
 - **Purpose**: Server state management (all API data)
 - **Why**: Automatic caching, background refetching, request deduplication, optimistic updates
 - **Usage**: All data fetching goes through React Query hooks
 
 **Zustand 4.x**
+
 - **Purpose**: Client-only state (authentication, UI preferences)
 - **Why**: Minimal boilerplate, no Context API overhead, simple API
 - **Usage**: Auth store, UI store (sidebar, theme, modals)
@@ -109,27 +112,32 @@ This frontend template provides a production-ready foundation for building moder
 ### 2.3 UI Layer
 
 **shadcn/ui**
+
 - **Why**: Accessible components (Radix UI), customizable, copy-paste (not npm dependency)
 - **Components**: Button, Card, Dialog, Form, Input, Table, Toast, etc.
 - **Customization**: Tailwind-based, easy to adapt to design system
 
 **Tailwind CSS 4.x**
+
 - **Why**: Utility-first, excellent DX, small bundle size, dark mode support
 - **Strategy**: Class-based dark mode, mobile-first responsive design
 - **Customization**: Custom theme colors, design tokens
 
 **Recharts 2.x**
+
 - **Purpose**: Charts for admin dashboard
 - **Why**: React-native, composable, responsive, themed with Tailwind colors
 
 ### 2.4 API Layer
 
 **@hey-api/openapi-ts**
+
 - **Purpose**: Generate TypeScript client from backend OpenAPI spec
 - **Why**: Type-safe API calls, auto-generated types matching backend
 - **Alternative**: Considered `openapi-typescript-codegen` but this is more actively maintained
 
 **Axios 1.x**
+
 - **Purpose**: HTTP client for API calls
 - **Why**: Interceptor support for auth, better error handling than fetch
 - **Usage**: Wrapped in generated API client, configured with auth interceptors
@@ -137,10 +145,12 @@ This frontend template provides a production-ready foundation for building moder
 ### 2.5 Forms & Validation
 
 **react-hook-form 7.x**
+
 - **Purpose**: Form state management
 - **Why**: Excellent performance, minimal re-renders, great DX
 
 **Zod 3.x**
+
 - **Purpose**: Runtime type validation and schema definition
 - **Why**: Type inference, composable schemas, integrates with react-hook-form
 - **Usage**: All forms use Zod schemas with `zodResolver`
@@ -148,10 +158,12 @@ This frontend template provides a production-ready foundation for building moder
 ### 2.6 Testing
 
 **Jest + React Testing Library**
+
 - **Purpose**: Unit and component tests
 - **Why**: Industry standard, excellent React support, accessibility-focused
 
 **Playwright**
+
 - **Purpose**: End-to-end testing
 - **Why**: Fast, reliable, multi-browser, great debugging tools
 - **Coverage Target**: 90%+ for template robustness
@@ -208,6 +220,7 @@ Inspired by backend's 5-layer architecture, frontend follows similar separation
 ```
 
 **Key Rules:**
+
 - Pages/Layouts should NOT contain business logic
 - Components should NOT call API client directly (use hooks)
 - Hooks should NOT contain display logic
@@ -217,6 +230,7 @@ Inspired by backend's 5-layer architecture, frontend follows similar separation
 ### 3.2 Component Patterns
 
 **Server Components by Default:**
+
 ```typescript
 // app/(authenticated)/admin/users/page.tsx
 // Server Component - can fetch data directly
@@ -232,6 +246,7 @@ export default async function UsersPage() {
 ```
 
 **Client Components for Interactivity:**
+
 ```typescript
 // components/admin/UserTable.tsx
 'use client';
@@ -245,6 +260,7 @@ export function UserTable() {
 ```
 
 **Composition Over Prop Drilling:**
+
 ```typescript
 // Good: Use composition
 <Card>
@@ -358,6 +374,7 @@ Each module has one clear responsibility:
 ```
 
 **Token Refresh Flow (Automatic):**
+
 ```
 API Request → 401 Response → Check if refresh token exists
    ↓ Yes                                    ↓ No
@@ -369,11 +386,13 @@ New Tokens → Update Store → Retry Original Request
 ### 4.3 State Updates
 
 **Server State (React Query):**
+
 - Automatic background refetch
 - Cache invalidation on mutations
 - Optimistic updates where appropriate
 
 **Client State (Zustand):**
+
 - Direct store updates
 - No actions/reducers boilerplate
 - Subscriptions for components
@@ -385,6 +404,7 @@ New Tokens → Update Store → Retry Original Request
 ### 5.1 Philosophy
 
 **Use the Right Tool for the Right Job:**
+
 - Server data → TanStack Query
 - Auth & tokens → Zustand
 - UI state → Zustand (minimal)
@@ -392,6 +412,7 @@ New Tokens → Update Store → Retry Original Request
 - Component state → useState/useReducer
 
 **Avoid Redundancy:**
+
 - DON'T duplicate server data in Zustand
 - DON'T store API responses in global state
 - DO keep state as local as possible
@@ -399,34 +420,36 @@ New Tokens → Update Store → Retry Original Request
 ### 5.2 TanStack Query Configuration
 
 **Global Config** (`src/config/queryClient.ts`):
+
 ```typescript
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 60000,              // 1 minute
-      cacheTime: 300000,             // 5 minutes
-      retry: 3,                      // Retry failed requests
-      refetchOnWindowFocus: true,    // Refetch on tab focus
-      refetchOnReconnect: true,      // Refetch on network reconnect
+      staleTime: 60000, // 1 minute
+      cacheTime: 300000, // 5 minutes
+      retry: 3, // Retry failed requests
+      refetchOnWindowFocus: true, // Refetch on tab focus
+      refetchOnReconnect: true, // Refetch on network reconnect
     },
     mutations: {
-      retry: 1,                      // Retry mutations once
+      retry: 1, // Retry mutations once
     },
   },
 });
 ```
 
 **Query Key Structure:**
+
 ```typescript
-['users']                           // List all users
-['users', userId]                   // Single user
-['users', { page: 1, search: 'john' }] // Filtered list
-['organizations', orgId, 'members'] // Nested resource
+['users'][('users', userId)][('users', { page: 1, search: 'john' })][ // List all users // Single user // Filtered list
+  ('organizations', orgId, 'members')
+]; // Nested resource
 ```
 
 ### 5.3 Zustand Stores
 
 **Auth Store** (`src/stores/authStore.ts`):
+
 ```typescript
 interface AuthStore {
   user: User | null;
@@ -443,6 +466,7 @@ interface AuthStore {
 ```
 
 **UI Store** (`src/stores/uiStore.ts`):
+
 ```typescript
 interface UIStore {
   sidebarOpen: boolean;
@@ -454,6 +478,7 @@ interface UIStore {
 ```
 
 **Store Guidelines:**
+
 - Keep stores small and focused
 - Use selectors for computed values
 - Persist to localStorage where appropriate
@@ -480,6 +505,7 @@ Component → useAuth() hook → AuthContext → Zustand Store → Storage Layer
 **Why This Pattern?**
 
 ✅ **Benefits:**
+
 - **Testable**: E2E tests can inject mock stores without backend
 - **Performant**: Zustand handles state efficiently, Context is just a thin wrapper
 - **Type-safe**: Full TypeScript inference throughout
@@ -488,6 +514,7 @@ Component → useAuth() hook → AuthContext → Zustand Store → Storage Layer
 - **React-idiomatic**: Follows React best practices
 
 **Key Design Principles:**
+
 1. **Thin Context Layer**: Context only provides dependency injection, no business logic
 2. **Zustand for State**: All state management stays in Zustand (no duplicated state)
 3. **Backward Compatible**: Internal refactor only, no API changes
@@ -516,6 +543,7 @@ window.__TEST_AUTH_STORE__ = mockStoreHook;
 ```
 
 **Implementation Details:**
+
 - Stores Zustand hook function (not state) in Context
 - Priority: explicit prop → E2E test store → production singleton
 - Type-safe window global extension for E2E injection
@@ -530,23 +558,25 @@ window.__TEST_AUTH_STORE__ = mockStoreHook;
 const { user, isAuthenticated } = useAuth();
 
 // Pattern 2: Selector (optimized for performance)
-const user = useAuth(state => state.user);
+const user = useAuth((state) => state.user);
 ```
 
 **Why Polymorphic?**
+
 - Simple pattern for most use cases
 - Optimized pattern available when needed
 - Type-safe with function overloads
 - No performance overhead
 
 **Critical Implementation Detail:**
+
 ```typescript
 export function useAuth(): AuthState;
 export function useAuth<T>(selector: (state: AuthState) => T): T;
 export function useAuth<T>(selector?: (state: AuthState) => T): AuthState | T {
   const storeHook = useContext(AuthContext);
   if (!storeHook) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error('useAuth must be used within AuthProvider');
   }
   // CRITICAL: Call the hook internally (follows React Rules of Hooks)
   return selector ? storeHook(selector) : storeHook();
@@ -580,6 +610,7 @@ function MyComponent() {
 ```
 
 **Why?**
+
 - Component re-renders when auth state changes
 - Type-safe access to all state properties
 - Clean, idiomatic React code
@@ -605,6 +636,7 @@ export function useLogin() {
 ```
 
 **Why?**
+
 - Event handlers run outside React render cycle
 - Don't need to re-render when state changes
 - Using `getState()` directly is cleaner
@@ -694,6 +726,7 @@ test.describe('Protected Pages', () => {
 ```
 
 **Why This Order?**
+
 - AuthProvider must wrap AuthInitializer (AuthInitializer uses auth state)
 - AuthProvider should wrap all app providers (auth available everywhere)
 - Keep provider tree shallow for performance
@@ -701,15 +734,18 @@ test.describe('Protected Pages', () => {
 ### 6.6 Token Management Strategy
 
 **Two-Token System:**
+
 - **Access Token**: Short-lived (15 min), stored in memory/sessionStorage
 - **Refresh Token**: Long-lived (7 days), stored in httpOnly cookie (preferred) or localStorage
 
 **Token Storage Decision:**
+
 - **Primary**: httpOnly cookies (most secure, prevents XSS)
 - **Fallback**: localStorage with encryption wrapper (if cookies not feasible)
 - **Access Token**: sessionStorage or React state (short-lived, acceptable risk)
 
 **Token Rotation:**
+
 - On refresh, both tokens are rotated
 - Old refresh token is invalidated immediately
 - Prevents token replay attacks
@@ -717,6 +753,7 @@ test.describe('Protected Pages', () => {
 ### 6.2 Per-Device Session Tracking
 
 Backend tracks sessions per device:
+
 - Each login creates a unique session with device info
 - Users can view all active sessions
 - Users can revoke individual sessions
@@ -724,6 +761,7 @@ Backend tracks sessions per device:
 - "Logout All" deactivates all sessions
 
 Frontend Implementation:
+
 - Session list page at `/settings/sessions`
 - Display device name, IP, location, last used
 - Highlight current session
@@ -732,6 +770,7 @@ Frontend Implementation:
 ### 6.3 Auth Guard Implementation
 
 **Layout-Based Protection:**
+
 ```typescript
 // app/(authenticated)/layout.tsx
 export default function AuthenticatedLayout({ children }) {
@@ -746,6 +785,7 @@ export default function AuthenticatedLayout({ children }) {
 ```
 
 **Permission Checks:**
+
 ```typescript
 // app/(authenticated)/admin/layout.tsx
 export default function AdminLayout({ children }) {
@@ -776,12 +816,14 @@ export default function AdminLayout({ children }) {
 ### 7.1 OpenAPI Client Generation
 
 **Workflow:**
+
 ```
 Backend OpenAPI Spec → @hey-api/openapi-ts → TypeScript Client
 (/api/v1/openapi.json)                     (src/lib/api/generated/)
 ```
 
 **Generation Script** (`scripts/generate-api-client.sh`):
+
 ```bash
 #!/bin/bash
 API_URL="${NEXT_PUBLIC_API_BASE_URL:-http://localhost:8000}"
@@ -792,6 +834,7 @@ npx @hey-api/openapi-ts \
 ```
 
 **Benefits:**
+
 - Type-safe API calls
 - Auto-completion in IDE
 - Compile-time error checking
@@ -801,6 +844,7 @@ npx @hey-api/openapi-ts \
 ### 7.2 Axios Configuration
 
 **Base Instance** (`src/lib/api/client.ts`):
+
 ```typescript
 export const apiClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -812,6 +856,7 @@ export const apiClient = axios.create({
 ```
 
 **Request Interceptor:**
+
 ```typescript
 apiClient.interceptors.request.use(
   (config) => {
@@ -826,6 +871,7 @@ apiClient.interceptors.request.use(
 ```
 
 **Response Interceptor:**
+
 ```typescript
 apiClient.interceptors.response.use(
   (response) => response,
@@ -850,6 +896,7 @@ apiClient.interceptors.response.use(
 ### 7.3 Error Handling
 
 **Backend Error Format:**
+
 ```typescript
 {
   success: false,
@@ -864,24 +911,28 @@ apiClient.interceptors.response.use(
 ```
 
 **Frontend Error Parsing:**
+
 ```typescript
 export function parseAPIError(error: AxiosError): APIError {
   if (error.response?.data?.errors) {
     return error.response.data.errors;
   }
-  return [{
-    code: 'UNKNOWN',
-    message: 'An unexpected error occurred'
-  }];
+  return [
+    {
+      code: 'UNKNOWN',
+      message: 'An unexpected error occurred',
+    },
+  ];
 }
 ```
 
 **Error Code Mapping:**
+
 ```typescript
 const ERROR_MESSAGES = {
-  'AUTH_001': 'Invalid email or password',
-  'USER_002': 'This email is already registered',
-  'VAL_001': 'Please check your input',
+  AUTH_001: 'Invalid email or password',
+  USER_002: 'This email is already registered',
+  VAL_001: 'Please check your input',
   // ... all backend error codes
 };
 ```
@@ -889,6 +940,7 @@ const ERROR_MESSAGES = {
 ### 7.4 React Query Hooks Pattern
 
 **Standard Pattern:**
+
 ```typescript
 // lib/api/hooks/useUsers.ts
 export function useUsers(filters?: UserFilters) {
@@ -955,6 +1007,7 @@ app/
 ```
 
 **Route Groups** (parentheses in folder name):
+
 - Organize routes without affecting URL
 - Apply different layouts to route subsets
 - Example: `(auth)` and `(authenticated)` have different layouts
@@ -962,23 +1015,27 @@ app/
 ### 8.2 Layout Strategy
 
 **Root Layout** (`app/layout.tsx`):
+
 - HTML structure
 - React Query provider
 - Theme provider
 - Global metadata
 
 **Auth Layout** (`app/(auth)/layout.tsx`):
+
 - Centered form container
 - No header/footer
 - Minimal styling
 
 **Authenticated Layout** (`app/(authenticated)/layout.tsx`):
+
 - Auth guard (redirect if not authenticated)
 - Header with user menu
 - Main content area
 - Footer
 
 **Admin Layout** (`app/(authenticated)/admin/layout.tsx`):
+
 - Admin sidebar
 - Breadcrumbs
 - Admin permission check (is_superuser)
@@ -1036,11 +1093,13 @@ components/
 ### 9.2 Component Guidelines
 
 **Naming:**
+
 - PascalCase for components: `UserTable.tsx`
 - Match file name with component name
 - One component per file
 
 **Structure:**
+
 ```typescript
 // 1. Imports
 import { useState } from 'react';
@@ -1078,6 +1137,7 @@ export function UserTable({ filters }: UserTableProps) {
 ```
 
 **Best Practices:**
+
 - Prefer named exports over default exports
 - Destructure props in function signature
 - Extract complex logic to hooks
@@ -1087,6 +1147,7 @@ export function UserTable({ filters }: UserTableProps) {
 ### 9.3 Styling Strategy
 
 **Tailwind Utility Classes:**
+
 ```typescript
 <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
   Click Me
@@ -1094,6 +1155,7 @@ export function UserTable({ filters }: UserTableProps) {
 ```
 
 **Conditional Classes with cn():**
+
 ```typescript
 import { cn } from '@/lib/utils/cn';
 
@@ -1105,6 +1167,7 @@ import { cn } from '@/lib/utils/cn';
 ```
 
 **Dark Mode:**
+
 ```typescript
 <div className="bg-white dark:bg-gray-900 text-black dark:text-white">
   Content
@@ -1134,18 +1197,21 @@ import { cn } from '@/lib/utils/cn';
 ### 10.2 Test Categories
 
 **Unit Tests** (60% of suite):
+
 - Utilities (`lib/utils/`)
 - Custom hooks (`hooks/`)
 - Services (`services/`)
 - Pure functions
 
 **Component Tests** (30% of suite):
+
 - Reusable components (`components/`)
 - Forms with validation
 - User interactions
 - Accessibility
 
 **Integration Tests** (E2E with Playwright, 10% of suite):
+
 - Critical user flows:
   - Login → Dashboard
   - Admin: Create/Edit/Delete User
@@ -1157,6 +1223,7 @@ import { cn } from '@/lib/utils/cn';
 ### 10.3 Testing Tools
 
 **Jest + React Testing Library:**
+
 ```typescript
 // UserTable.test.tsx
 import { render, screen } from '@testing-library/react';
@@ -1169,6 +1236,7 @@ test('renders user table with data', async () => {
 ```
 
 **Playwright E2E:**
+
 ```typescript
 // tests/e2e/auth.spec.ts
 test('user can login', async ({ page }) => {
@@ -1183,11 +1251,13 @@ test('user can login', async ({ page }) => {
 ### 10.4 Coverage Target
 
 **Goal: 90%+ Overall Coverage**
+
 - Unit tests: 95%+
 - Component tests: 85%+
 - Integration tests: Critical paths only
 
 **Justification for 90%:**
+
 - This is a template for production projects
 - High coverage ensures robustness
 - Confidence for extension and customization
@@ -1199,6 +1269,7 @@ test('user can login', async ({ page }) => {
 ### 11.1 Optimization Strategies
 
 **Code Splitting:**
+
 ```typescript
 // Dynamic imports for heavy components
 const AdminDashboard = dynamic(() => import('./AdminDashboard'), {
@@ -1207,6 +1278,7 @@ const AdminDashboard = dynamic(() => import('./AdminDashboard'), {
 ```
 
 **Image Optimization:**
+
 ```typescript
 import Image from 'next/image';
 
@@ -1220,11 +1292,13 @@ import Image from 'next/image';
 ```
 
 **React Query Caching:**
+
 - Stale time: 1 minute (reduce unnecessary refetches)
 - Cache time: 5 minutes (keep data in memory)
 - Background refetch: Yes (keep data fresh)
 
 **Bundle Size Monitoring:**
+
 ```bash
 npm run build && npm run analyze
 # Use webpack-bundle-analyzer to identify large dependencies
@@ -1233,12 +1307,14 @@ npm run build && npm run analyze
 ### 11.2 Performance Targets
 
 **Lighthouse Scores:**
+
 - Performance: >90
 - Accessibility: 100
 - Best Practices: >90
 - SEO: >90
 
 **Core Web Vitals:**
+
 - LCP (Largest Contentful Paint): <2.5s
 - FID (First Input Delay): <100ms
 - CLS (Cumulative Layout Shift): <0.1
@@ -1250,16 +1326,19 @@ npm run build && npm run analyze
 ### 12.1 Client-Side Security
 
 **XSS Prevention:**
+
 - React's default escaping (JSX)
 - Sanitize user input if rendering HTML
 - CSP headers (configured in backend)
 
 **Token Security:**
+
 - Access token: sessionStorage or memory (15 min expiry mitigates risk)
 - Refresh token: httpOnly cookie (preferred) or encrypted localStorage
 - Never log tokens to console in production
 
 **HTTPS Only:**
+
 - All production requests over HTTPS
 - Cookies with Secure flag
 - No mixed content
@@ -1267,11 +1346,13 @@ npm run build && npm run analyze
 ### 12.2 Input Validation
 
 **Client-Side Validation:**
+
 - Zod schemas for all forms
 - Immediate feedback to users
 - Prevent malformed requests
 
 **Remember:**
+
 - Client validation is for UX
 - Backend validation is for security
 - Always trust backend, not client
@@ -1279,12 +1360,14 @@ npm run build && npm run analyze
 ### 12.3 Dependency Security
 
 **Regular Audits:**
+
 ```bash
 npm audit
 npm audit fix
 ```
 
 **Automated Scanning:**
+
 - Dependabot (GitHub)
 - Snyk (CI/CD integration)
 
@@ -1295,12 +1378,14 @@ npm audit fix
 ### 13.1 Why Next.js App Router?
 
 **Pros:**
+
 - Server Components reduce client bundle
 - Better data fetching patterns
 - Streaming and Suspense built-in
 - Simpler layouts and error handling
 
 **Cons:**
+
 - Newer, less mature than Pages Router
 - Learning curve for team
 
@@ -1309,11 +1394,13 @@ npm audit fix
 ### 13.2 Why TanStack Query?
 
 **Alternatives Considered:**
+
 - SWR: Similar but less features
 - Redux Toolkit Query: Too much boilerplate for our use case
 - Apollo Client: Overkill for REST API
 
 **Why TanStack Query:**
+
 - Best-in-class caching and refetching
 - Framework-agnostic (not tied to Next.js)
 - Excellent DevTools
@@ -1322,11 +1409,13 @@ npm audit fix
 ### 13.3 Why Zustand over Redux?
 
 **Why NOT Redux:**
+
 - Too much boilerplate (actions, reducers, middleware)
 - We don't need time-travel debugging
 - Most state is server state (handled by React Query)
 
 **Why Zustand:**
+
 - Minimal API (easy to learn)
 - No Context API overhead
 - Can use outside React (interceptors)
@@ -1335,11 +1424,13 @@ npm audit fix
 ### 13.4 Why shadcn/ui over Component Libraries?
 
 **Alternatives Considered:**
+
 - Material-UI: Heavy, opinionated styling
 - Chakra UI: Good, but still an npm dependency
 - Ant Design: Too opinionated for template
 
 **Why shadcn/ui:**
+
 - Copy-paste (full control)
 - Accessible (Radix UI primitives)
 - Tailwind-based (consistent with our stack)
@@ -1348,11 +1439,13 @@ npm audit fix
 ### 13.5 Why Axios over Fetch?
 
 **Why NOT Fetch:**
+
 - No request/response interceptors
 - Manual timeout handling
 - Less ergonomic error handling
 
 **Why Axios:**
+
 - Interceptors (essential for auth)
 - Automatic JSON parsing
 - Better error handling
@@ -1364,11 +1457,13 @@ npm audit fix
 **Decision: httpOnly Cookies (Primary), localStorage (Fallback)**
 
 **Why httpOnly Cookies:**
+
 - Most secure (not accessible to JavaScript)
 - Prevents XSS token theft
 - Automatic sending with requests (if CORS configured)
 
 **Why Fallback to localStorage:**
+
 - Simpler initial setup (no backend cookie handling)
 - Still secure with proper measures:
   - Short access token expiry (15 min)
@@ -1377,6 +1472,7 @@ npm audit fix
   - Encrypted wrapper (optional)
 
 **Implementation:**
+
 - Try httpOnly cookies first
 - Fall back to localStorage if not feasible
 - Document choice in code
@@ -1388,12 +1484,14 @@ npm audit fix
 ### 14.1 Production Deployment
 
 **Recommended Platform: Vercel**
+
 - Native Next.js support
 - Edge functions for middleware
 - Automatic preview deployments
 - CDN with global edge network
 
 **Alternative: Docker**
+
 ```dockerfile
 FROM node:20-alpine
 WORKDIR /app
@@ -1408,18 +1506,21 @@ CMD ["npm", "start"]
 ### 14.2 Environment Configuration
 
 **Development:**
+
 ```env
 NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
 NODE_ENV=development
 ```
 
 **Production:**
+
 ```env
 NEXT_PUBLIC_API_URL=https://api.example.com/api/v1
 NODE_ENV=production
 ```
 
 **Secrets:**
+
 - Never commit `.env.local`
 - Use platform-specific secret management (Vercel Secrets, Docker Secrets)
 
@@ -1453,6 +1554,7 @@ jobs:
 This architecture document provides a comprehensive overview of the frontend system design, patterns, and decisions. It should serve as a reference for developers working on the project and guide future architectural decisions.
 
 For specific implementation details, refer to:
+
 - **CODING_STANDARDS.md**: Code style and conventions
 - **COMPONENT_GUIDE.md**: Component usage and patterns
 - **FEATURE_EXAMPLES.md**: Step-by-step feature implementation
diff --git a/frontend/docs/CODING_STANDARDS.md b/frontend/docs/CODING_STANDARDS.md
index 6ed0223..d4a98be 100755
--- a/frontend/docs/CODING_STANDARDS.md
+++ b/frontend/docs/CODING_STANDARDS.md
@@ -31,6 +31,7 @@
 ### 1.1 General Principles
 
 **✅ DO:**
+
 - Enable strict mode in `tsconfig.json`
 - Define explicit types for all function parameters and return values
 - Use TypeScript's type inference where obvious
@@ -38,6 +39,7 @@
 - Use generics for reusable, type-safe components and functions
 
 **❌ DON'T:**
+
 - Use `any` (use `unknown` if type is truly unknown)
 - Use `as any` casts (refactor to proper types)
 - Use `@ts-ignore` or `@ts-nocheck` (fix the underlying issue)
@@ -46,6 +48,7 @@
 ### 1.2 Interfaces vs Types
 
 **Use `interface` for object shapes:**
+
 ```typescript
 // ✅ Good
 interface User {
@@ -63,6 +66,7 @@ interface UserFormProps {
 ```
 
 **Use `type` for unions, intersections, and primitives:**
+
 ```typescript
 // ✅ Good
 type UserRole = 'admin' | 'user' | 'guest';
@@ -74,6 +78,7 @@ type UserWithPermissions = User & { permissions: string[] };
 ### 1.3 Function Signatures
 
 **Always type function parameters and return values:**
+
 ```typescript
 // ✅ Good
 function formatUserName(user: User): string {
@@ -86,7 +91,8 @@ async function fetchUser(id: string): Promise<User> {
 }
 
 // ❌ Bad
-function formatUserName(user) {  // Implicit any
+function formatUserName(user) {
+  // Implicit any
   return `${user.firstName} ${user.lastName}`;
 }
 ```
@@ -94,6 +100,7 @@ function formatUserName(user) {  // Implicit any
 ### 1.4 Generics
 
 **Use generics for reusable, type-safe code:**
+
 ```typescript
 // ✅ Good: Generic data table
 interface DataTableProps<T> {
@@ -113,6 +120,7 @@ export function DataTable<T>({ data, columns, onRowClick }: DataTableProps<T>) {
 ### 1.5 Unknown vs Any
 
 **Use `unknown` for truly unknown types:**
+
 ```typescript
 // ✅ Good: Force type checking
 function parseJSON(jsonString: string): unknown {
@@ -134,15 +142,11 @@ function parseJSON(jsonString: string): any {
 ### 1.6 Type Guards
 
 **Create type guards for runtime type checking:**
+
 ```typescript
 // ✅ Good
 function isUser(value: unknown): value is User {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'email' in value
-  );
+  return typeof value === 'object' && value !== null && 'id' in value && 'email' in value;
 }
 
 // Usage
@@ -155,6 +159,7 @@ if (isUser(data)) {
 ### 1.7 Utility Types
 
 **Use TypeScript utility types:**
+
 ```typescript
 // Partial - make all properties optional
 type UserUpdate = Partial<User>;
@@ -182,6 +187,7 @@ type NonAdminRole = Exclude<UserRole, 'admin'>;
 ### 2.1 Component Structure
 
 **Standard component template:**
+
 ```typescript
 // 1. Imports (React, external libs, internal, types, styles)
 'use client';  // If client component
@@ -240,6 +246,7 @@ export function UserList({
 ### 2.2 Server Components vs Client Components
 
 **Server Components by default:**
+
 ```typescript
 // ✅ Good: Server Component (default)
 // app/(authenticated)/users/page.tsx
@@ -255,6 +262,7 @@ export default async function UsersPage() {
 ```
 
 **Client Components only when needed:**
+
 ```typescript
 // ✅ Good: Client Component (interactive)
 'use client';
@@ -276,6 +284,7 @@ export function UserList() {
 ```
 
 **When to use Client Components:**
+
 - Using React hooks (useState, useEffect, etc.)
 - Event handlers (onClick, onChange, etc.)
 - Browser APIs (window, document, localStorage)
@@ -284,6 +293,7 @@ export function UserList() {
 ### 2.3 Props
 
 **Always type props explicitly:**
+
 ```typescript
 // ✅ Good: Explicit interface
 interface ButtonProps {
@@ -300,13 +310,14 @@ export function Button({
   onClick,
   variant = 'primary',
   disabled = false,
-  className
+  className,
 }: ButtonProps) {
   // Implementation
 }
 ```
 
 **Destructure props in function signature:**
+
 ```typescript
 // ✅ Good
 function UserCard({ user, onEdit }: UserCardProps) {
@@ -320,6 +331,7 @@ function UserCard(props: UserCardProps) {
 ```
 
 **Allow className override:**
+
 ```typescript
 // ✅ Good: Allow consumers to add classes
 interface CardProps {
@@ -339,6 +351,7 @@ export function Card({ title, className }: CardProps) {
 ### 2.4 Composition Over Prop Drilling
 
 **Use composition patterns:**
+
 ```typescript
 // ✅ Good: Composition
 <Card>
@@ -366,6 +379,7 @@ export function Card({ title, className }: CardProps) {
 ### 2.5 Named Exports vs Default Exports
 
 **Prefer named exports:**
+
 ```typescript
 // ✅ Good: Named export
 export function UserList() {
@@ -385,6 +399,7 @@ import WhateverName from './UserList';
 ```
 
 **Exception: Next.js pages must use default export**
+
 ```typescript
 // pages and route handlers require default export
 export default function UsersPage() {
@@ -395,6 +410,7 @@ export default function UsersPage() {
 ### 2.6 Custom Hooks
 
 **Extract reusable logic:**
+
 ```typescript
 // ✅ Good: Custom hook
 function useDebounce<T>(value: T, delay: number): T {
@@ -425,15 +441,16 @@ function SearchInput() {
 ```
 
 **Hook naming: Always prefix with "use":**
+
 ```typescript
 // ✅ Good
-function useAuth() { }
-function useUsers() { }
-function useDebounce() { }
+function useAuth() {}
+function useUsers() {}
+function useDebounce() {}
 
 // ❌ Bad
-function auth() { }
-function getUsers() { }
+function auth() {}
+function getUsers() {}
 ```
 
 ---
@@ -442,20 +459,21 @@ function getUsers() { }
 
 ### 3.1 Files and Directories
 
-| Type | Convention | Example |
-|------|------------|---------|
-| Components | PascalCase | `UserTable.tsx`, `LoginForm.tsx` |
-| Hooks | camelCase with `use` prefix | `useAuth.ts`, `useDebounce.ts` |
-| Utilities | camelCase | `formatDate.ts`, `parseError.ts` |
-| Types | camelCase | `user.ts`, `api.ts` |
-| Constants | camelCase or UPPER_SNAKE_CASE | `constants.ts`, `API_ENDPOINTS.ts` |
-| Stores | camelCase with `Store` suffix | `authStore.ts`, `uiStore.ts` |
-| Services | camelCase with `Service` suffix | `authService.ts`, `adminService.ts` |
-| Pages (Next.js) | lowercase | `page.tsx`, `layout.tsx`, `loading.tsx` |
+| Type            | Convention                      | Example                                 |
+| --------------- | ------------------------------- | --------------------------------------- |
+| Components      | PascalCase                      | `UserTable.tsx`, `LoginForm.tsx`        |
+| Hooks           | camelCase with `use` prefix     | `useAuth.ts`, `useDebounce.ts`          |
+| Utilities       | camelCase                       | `formatDate.ts`, `parseError.ts`        |
+| Types           | camelCase                       | `user.ts`, `api.ts`                     |
+| Constants       | camelCase or UPPER_SNAKE_CASE   | `constants.ts`, `API_ENDPOINTS.ts`      |
+| Stores          | camelCase with `Store` suffix   | `authStore.ts`, `uiStore.ts`            |
+| Services        | camelCase with `Service` suffix | `authService.ts`, `adminService.ts`     |
+| Pages (Next.js) | lowercase                       | `page.tsx`, `layout.tsx`, `loading.tsx` |
 
 ### 3.2 Variables and Functions
 
 **Variables:**
+
 ```typescript
 // ✅ Good: camelCase
 const userName = 'John';
@@ -463,36 +481,39 @@ const isAuthenticated = true;
 const userList = [];
 
 // ❌ Bad
-const UserName = 'John';  // PascalCase for variable
+const UserName = 'John'; // PascalCase for variable
 const user_name = 'John'; // snake_case
 ```
 
 **Functions:**
+
 ```typescript
 // ✅ Good: camelCase, descriptive verb + noun
-function getUserById(id: string): User { }
-function formatDate(date: Date): string { }
-function handleSubmit(data: FormData): void { }
+function getUserById(id: string): User {}
+function formatDate(date: Date): string {}
+function handleSubmit(data: FormData): void {}
 
 // ❌ Bad
-function User(id: string) { }      // Looks like a class
-function get_user(id: string) { }  // snake_case
-function gub(id: string) { }       // Not descriptive
+function User(id: string) {} // Looks like a class
+function get_user(id: string) {} // snake_case
+function gub(id: string) {} // Not descriptive
 ```
 
 **Event Handlers:**
+
 ```typescript
 // ✅ Good: handle + EventName
-const handleClick = () => { };
-const handleSubmit = () => { };
-const handleInputChange = () => { };
+const handleClick = () => {};
+const handleSubmit = () => {};
+const handleInputChange = () => {};
 
 // ❌ Bad
-const onClick = () => { };  // Confusing with prop name
-const submit = () => { };
+const onClick = () => {}; // Confusing with prop name
+const submit = () => {};
 ```
 
 **Boolean Variables:**
+
 ```typescript
 // ✅ Good: is/has/should prefix
 const isLoading = true;
@@ -508,6 +529,7 @@ const error = false;
 ### 3.3 Constants
 
 **Use UPPER_SNAKE_CASE for true constants:**
+
 ```typescript
 // ✅ Good
 const MAX_RETRY_ATTEMPTS = 3;
@@ -525,16 +547,17 @@ const USER_ROLES = {
 ### 3.4 Types and Interfaces
 
 **PascalCase for types and interfaces:**
+
 ```typescript
 // ✅ Good
-interface User { }
-interface UserFormProps { }
+interface User {}
+interface UserFormProps {}
 type UserId = string;
 type UserRole = 'admin' | 'user';
 
 // ❌ Bad
-interface user { }
-interface user_form_props { }
+interface user {}
+interface user_form_props {}
 type userId = string;
 ```
 
@@ -545,6 +568,7 @@ type userId = string;
 ### 4.1 Import Order
 
 **Organize imports in this order:**
+
 ```typescript
 // 1. React and Next.js
 import { useState, useEffect } from 'react';
@@ -576,6 +600,7 @@ import styles from './Component.module.css';
 ### 4.2 Co-location
 
 **Group related files together:**
+
 ```
 components/admin/
 ├── UserTable/
@@ -587,6 +612,7 @@ components/admin/
 ```
 
 **Or flat structure for simpler components:**
+
 ```
 components/admin/
 ├── UserTable.tsx
@@ -598,6 +624,7 @@ components/admin/
 ### 4.3 Barrel Exports
 
 **Use index.ts for clean imports:**
+
 ```typescript
 // components/ui/index.ts
 export { Button } from './button';
@@ -615,6 +642,7 @@ import { Button, Card, Input } from '@/components/ui';
 ### 5.1 State Placement
 
 **Keep state as local as possible:**
+
 ```typescript
 // ✅ Good: Local state
 function UserFilter() {
@@ -629,6 +657,7 @@ function UserFilter() {
 ### 5.2 TanStack Query Usage
 
 **Standard query pattern:**
+
 ```typescript
 // lib/api/hooks/useUsers.ts
 export function useUsers(filters?: UserFilters) {
@@ -651,6 +680,7 @@ function UserList() {
 ```
 
 **Standard mutation pattern:**
+
 ```typescript
 // lib/api/hooks/useUsers.ts
 export function useUpdateUser() {
@@ -691,22 +721,21 @@ function UserForm({ userId }: { userId: string }) {
 ```
 
 **Query key structure:**
+
 ```typescript
 // ✅ Good: Consistent query keys
-['users']                              // List all
-['users', userId]                      // Single user
-['users', { search: 'john', page: 1 }] // Filtered list
-['organizations', orgId, 'members']    // Nested resource
-
-// ❌ Bad: Inconsistent
-['userList']
-['user-' + userId]
-['getUsersBySearch', 'john']
+['users'][('users', userId)][('users', { search: 'john', page: 1 })][ // List all // Single user // Filtered list
+  ('organizations', orgId, 'members')
+][ // Nested resource
+  // ❌ Bad: Inconsistent
+  'userList'
+]['user-' + userId][('getUsersBySearch', 'john')];
 ```
 
 ### 5.3 Zustand Store Pattern
 
 **Auth store example:**
+
 ```typescript
 // stores/authStore.ts
 import { create } from 'zustand';
@@ -757,6 +786,7 @@ function UserAvatar() {
 ```
 
 **UI store example:**
+
 ```typescript
 // stores/uiStore.ts
 interface UIStore {
@@ -790,6 +820,7 @@ export const useUIStore = create<UIStore>()(
 ### 6.1 API Client Structure
 
 **Axios instance configuration:**
+
 ```typescript
 // lib/api/client.ts
 import axios from 'axios';
@@ -837,6 +868,7 @@ apiClient.interceptors.response.use(
 ### 6.2 Error Handling
 
 **Parse API errors:**
+
 ```typescript
 // lib/api/errors.ts
 export interface APIError {
@@ -850,18 +882,20 @@ export function parseAPIError(error: AxiosError): APIError[] {
     return error.response.data.errors;
   }
 
-  return [{
-    code: 'UNKNOWN',
-    message: error.message || 'An unexpected error occurred',
-  }];
+  return [
+    {
+      code: 'UNKNOWN',
+      message: error.message || 'An unexpected error occurred',
+    },
+  ];
 }
 
 // Error code mapping
 export const ERROR_MESSAGES: Record<string, string> = {
-  'AUTH_001': 'Invalid email or password',
-  'USER_002': 'This email is already registered',
-  'VAL_001': 'Please check your input',
-  'ORG_001': 'Organization name already exists',
+  AUTH_001: 'Invalid email or password',
+  USER_002: 'This email is already registered',
+  VAL_001: 'Please check your input',
+  ORG_001: 'Organization name already exists',
 };
 
 export function getErrorMessage(code: string): string {
@@ -872,18 +906,19 @@ export function getErrorMessage(code: string): string {
 ### 6.3 Hook Organization
 
 **One hook file per resource:**
+
 ```typescript
 // lib/api/hooks/useUsers.ts
-export function useUsers(filters?: UserFilters) { }
-export function useUser(userId: string) { }
-export function useCreateUser() { }
-export function useUpdateUser() { }
-export function useDeleteUser() { }
+export function useUsers(filters?: UserFilters) {}
+export function useUser(userId: string) {}
+export function useCreateUser() {}
+export function useUpdateUser() {}
+export function useDeleteUser() {}
 
 // lib/api/hooks/useOrganizations.ts
-export function useOrganizations() { }
-export function useOrganization(orgId: string) { }
-export function useCreateOrganization() { }
+export function useOrganizations() {}
+export function useOrganization(orgId: string) {}
+export function useCreateOrganization() {}
 // ...
 ```
 
@@ -894,6 +929,7 @@ export function useCreateOrganization() { }
 ### 7.1 Form Pattern with react-hook-form + Zod
 
 **Standard form implementation:**
+
 ```typescript
 // components/auth/LoginForm.tsx
 'use client';
@@ -961,30 +997,34 @@ export function LoginForm() {
 ### 7.2 Form Validation
 
 **Complex validation with Zod:**
+
 ```typescript
-const userSchema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z
-    .string()
-    .min(8, 'Min 8 characters')
-    .regex(/[A-Z]/, 'Must contain uppercase')
-    .regex(/[0-9]/, 'Must contain number'),
-  confirmPassword: z.string(),
-  firstName: z.string().min(1, 'Required'),
-  lastName: z.string().optional(),
-  phoneNumber: z
-    .string()
-    .regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number')
-    .optional(),
-}).refine((data) => data.password === data.confirmPassword, {
-  message: 'Passwords do not match',
-  path: ['confirmPassword'],
-});
+const userSchema = z
+  .object({
+    email: z.string().email('Invalid email'),
+    password: z
+      .string()
+      .min(8, 'Min 8 characters')
+      .regex(/[A-Z]/, 'Must contain uppercase')
+      .regex(/[0-9]/, 'Must contain number'),
+    confirmPassword: z.string(),
+    firstName: z.string().min(1, 'Required'),
+    lastName: z.string().optional(),
+    phoneNumber: z
+      .string()
+      .regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number')
+      .optional(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
 ```
 
 ### 7.3 Form Accessibility
 
 **Always include labels and error messages:**
+
 ```typescript
 <div>
   <Label htmlFor="email">Email</Label>
@@ -1009,6 +1049,7 @@ const userSchema = z.object({
 ### 8.1 Tailwind CSS Usage
 
 **Use utility classes:**
+
 ```typescript
 // ✅ Good
 <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
@@ -1022,6 +1063,7 @@ const userSchema = z.object({
 ```
 
 **Use cn() for conditional classes:**
+
 ```typescript
 import { cn } from '@/lib/utils/cn';
 
@@ -1036,6 +1078,7 @@ import { cn } from '@/lib/utils/cn';
 ### 8.2 Responsive Design
 
 **Mobile-first approach:**
+
 ```typescript
 <div className="
   w-full p-4           /* Mobile */
@@ -1050,6 +1093,7 @@ import { cn } from '@/lib/utils/cn';
 ### 8.3 Dark Mode
 
 **Use dark mode classes:**
+
 ```typescript
 <div className="
   bg-white text-black
@@ -1079,6 +1123,7 @@ src/
 ### 10.2 Test Naming
 
 **Use descriptive test names:**
+
 ```typescript
 // ✅ Good
 test('displays user list when data is loaded', async () => {});
@@ -1095,6 +1140,7 @@ test('renders', () => {});
 ### 10.3 Component Testing
 
 **Test user interactions, not implementation:**
+
 ```typescript
 // UserTable.test.tsx
 import { render, screen, userEvent } from '@testing-library/react';
@@ -1115,6 +1161,7 @@ test('allows user to search for users', async () => {
 ### 10.4 Accessibility Testing
 
 **Test with accessibility queries:**
+
 ```typescript
 // Prefer getByRole over getByTestId
 const button = screen.getByRole('button', { name: 'Submit' });
@@ -1156,6 +1203,7 @@ const textbox = screen.getByRole('textbox', { name: 'Email' });
 ### 11.2 ARIA Labels
 
 **Use ARIA when semantic HTML isn't enough:**
+
 ```typescript
 <button aria-label="Close dialog">
   <X className="w-4 h-4" />
@@ -1169,6 +1217,7 @@ const textbox = screen.getByRole('textbox', { name: 'Email' });
 ### 11.3 Keyboard Navigation
 
 **Ensure all interactive elements are keyboard accessible:**
+
 ```typescript
 <div
   role="button"
@@ -1191,6 +1240,7 @@ const textbox = screen.getByRole('textbox', { name: 'Email' });
 ### 12.1 Code Splitting
 
 **Dynamic imports for heavy components:**
+
 ```typescript
 import dynamic from 'next/dynamic';
 
@@ -1203,6 +1253,7 @@ const HeavyChart = dynamic(() => import('./HeavyChart'), {
 ### 12.2 Memoization
 
 **Use React.memo for expensive renders:**
+
 ```typescript
 export const UserCard = React.memo(function UserCard({ user }: UserCardProps) {
   return <div>{user.name}</div>;
@@ -1210,6 +1261,7 @@ export const UserCard = React.memo(function UserCard({ user }: UserCardProps) {
 ```
 
 **Use useMemo for expensive calculations:**
+
 ```typescript
 const sortedUsers = useMemo(() => {
   return users.sort((a, b) => a.name.localeCompare(b.name));
@@ -1219,6 +1271,7 @@ const sortedUsers = useMemo(() => {
 ### 12.3 Image Optimization
 
 **Always use Next.js Image component:**
+
 ```typescript
 import Image from 'next/image';
 
@@ -1238,6 +1291,7 @@ import Image from 'next/image';
 ### 13.1 Input Sanitization
 
 **Never render raw HTML:**
+
 ```typescript
 // ✅ Good: React escapes by default
 <div>{userInput}</div>
@@ -1249,6 +1303,7 @@ import Image from 'next/image';
 ### 13.2 Environment Variables
 
 **Never commit secrets:**
+
 ```typescript
 // ✅ Good: Use env variables
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
@@ -1258,6 +1313,7 @@ const apiUrl = 'https://api.example.com';
 ```
 
 **Public vs Private:**
+
 - `NEXT_PUBLIC_*`: Exposed to browser
 - Other vars: Server-side only
 
@@ -1266,6 +1322,7 @@ const apiUrl = 'https://api.example.com';
 ## 14. Code Review Checklist
 
 **Before submitting PR:**
+
 - [ ] All tests pass
 - [ ] No TypeScript errors
 - [ ] ESLint passes
@@ -1285,6 +1342,7 @@ const apiUrl = 'https://api.example.com';
 These standards ensure consistency, maintainability, and quality across the codebase. Follow them rigorously, and update this document as the project evolves.
 
 For specific patterns and examples, refer to:
+
 - **ARCHITECTURE.md**: System design and patterns
 - **COMPONENT_GUIDE.md**: Component usage and examples
 - **FEATURE_EXAMPLES.md**: Step-by-step implementation guides
diff --git a/frontend/docs/COMMON_PITFALLS.md b/frontend/docs/COMMON_PITFALLS.md
index 66317b4..d37b517 100644
--- a/frontend/docs/COMMON_PITFALLS.md
+++ b/frontend/docs/COMMON_PITFALLS.md
@@ -27,44 +27,48 @@
 ### Pitfall 1.1: Returning Hook Function Instead of Calling It
 
 **❌ WRONG:**
+
 ```typescript
 // Custom hook that wraps Zustand
 export function useAuth() {
   const storeHook = useContext(AuthContext);
-  return storeHook;  // Returns the hook function itself!
+  return storeHook; // Returns the hook function itself!
 }
 
 // Consumer component
 function MyComponent() {
-  const authHook = useAuth();  // Got the hook function
-  const { user } = authHook();  // Have to call it here ❌ Rules of Hooks violation!
+  const authHook = useAuth(); // Got the hook function
+  const { user } = authHook(); // Have to call it here ❌ Rules of Hooks violation!
 }
 ```
 
 **Why It's Wrong:**
+
 - Violates React Rules of Hooks (hook called conditionally/in wrong place)
 - Confusing API for consumers
 - Can't use in conditionals or callbacks safely
 - Type inference breaks
 
 **✅ CORRECT:**
+
 ```typescript
 // Custom hook that calls the wrapped hook internally
 export function useAuth() {
   const storeHook = useContext(AuthContext);
   if (!storeHook) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error('useAuth must be used within AuthProvider');
   }
-  return storeHook();  // Call the hook HERE, return the state
+  return storeHook(); // Call the hook HERE, return the state
 }
 
 // Consumer component
 function MyComponent() {
-  const { user } = useAuth();  // Direct access to state ✅
+  const { user } = useAuth(); // Direct access to state ✅
 }
 ```
 
 **✅ EVEN BETTER (Polymorphic):**
+
 ```typescript
 // Support both patterns
 export function useAuth(): AuthState;
@@ -72,17 +76,18 @@ export function useAuth<T>(selector: (state: AuthState) => T): T;
 export function useAuth<T>(selector?: (state: AuthState) => T): AuthState | T {
   const storeHook = useContext(AuthContext);
   if (!storeHook) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error('useAuth must be used within AuthProvider');
   }
   return selector ? storeHook(selector) : storeHook();
 }
 
 // Usage - both work!
-const { user } = useAuth();  // Full state
-const user = useAuth(s => s.user);  // Optimized selector
+const { user } = useAuth(); // Full state
+const user = useAuth((s) => s.user); // Optimized selector
 ```
 
 **Key Takeaway:**
+
 - **Always call hooks internally in custom hooks**
 - Return state/values, not hook functions
 - Support selectors for performance optimization
@@ -92,6 +97,7 @@ const user = useAuth(s => s.user);  // Optimized selector
 ### Pitfall 1.2: Calling Hooks Conditionally
 
 **❌ WRONG:**
+
 ```typescript
 function MyComponent({ showUser }) {
   if (showUser) {
@@ -103,6 +109,7 @@ function MyComponent({ showUser }) {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 function MyComponent({ showUser }) {
   const { user } = useAuth();  // ✅ Always call at top level
@@ -116,6 +123,7 @@ function MyComponent({ showUser }) {
 ```
 
 **Key Takeaway:**
+
 - **Always call hooks at the top level of your component**
 - Never call hooks inside conditionals, loops, or nested functions
 - Return early after hooks are called
@@ -127,6 +135,7 @@ function MyComponent({ showUser }) {
 ### Pitfall 2.1: Creating New Context Value on Every Render
 
 **❌ WRONG:**
+
 ```typescript
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
@@ -139,11 +148,13 @@ export function AuthProvider({ children }) {
 ```
 
 **Why It's Wrong:**
+
 - Every render creates a new object
 - All consumers re-render even if values unchanged
 - Performance nightmare in large apps
 
 **✅ CORRECT:**
+
 ```typescript
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
@@ -156,6 +167,7 @@ export function AuthProvider({ children }) {
 ```
 
 **✅ EVEN BETTER (Zustand + Context):**
+
 ```typescript
 export function AuthProvider({ children, store }) {
   // Zustand hook function is stable (doesn't change)
@@ -167,6 +179,7 @@ export function AuthProvider({ children, store }) {
 ```
 
 **Key Takeaway:**
+
 - **Use `useMemo` for Context values that are objects**
 - Or use stable references (Zustand hooks, refs)
 - Monitor re-renders with React DevTools
@@ -176,6 +189,7 @@ export function AuthProvider({ children, store }) {
 ### Pitfall 2.2: Prop Drilling Instead of Context
 
 **❌ WRONG:**
+
 ```typescript
 // Passing through 5 levels
 <Layout user={user}>
@@ -190,6 +204,7 @@ export function AuthProvider({ children, store }) {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 // Provider at top
 <AuthProvider>
@@ -206,6 +221,7 @@ export function AuthProvider({ children, store }) {
 ```
 
 **Key Takeaway:**
+
 - **Use Context for data needed by many components**
 - Avoid prop drilling beyond 2-3 levels
 - But don't overuse - local state is often better
@@ -217,6 +233,7 @@ export function AuthProvider({ children, store }) {
 ### Pitfall 3.1: Mixing Render State Access and Mutation Logic
 
 **❌ WRONG (Mixing patterns):**
+
 ```typescript
 function MyComponent() {
   // Using hook for render state
@@ -231,6 +248,7 @@ function MyComponent() {
 ```
 
 **✅ CORRECT (Separate patterns):**
+
 ```typescript
 function MyComponent() {
   // Hook for render state (subscribes to changes)
@@ -245,12 +263,14 @@ function MyComponent() {
 ```
 
 **Why This Pattern?**
+
 - **Render state**: Use hook → component re-renders on changes
 - **Mutations**: Use `getState()` → no subscription, no re-renders
 - **Performance**: Event handlers don't need to subscribe
 - **Clarity**: Clear distinction between read and write
 
 **Key Takeaway:**
+
 - **Use hooks for state that affects rendering**
 - **Use `getState()` for mutations in callbacks**
 - Don't subscribe when you don't need to
@@ -260,6 +280,7 @@ function MyComponent() {
 ### Pitfall 3.2: Not Using Selectors for Optimization
 
 **❌ SUBOPTIMAL:**
+
 ```typescript
 function UserAvatar() {
   // Re-renders on ANY auth state change! ❌
@@ -270,6 +291,7 @@ function UserAvatar() {
 ```
 
 **✅ OPTIMIZED:**
+
 ```typescript
 function UserAvatar() {
   // Only re-renders when user changes ✅
@@ -280,6 +302,7 @@ function UserAvatar() {
 ```
 
 **Key Takeaway:**
+
 - **Use selectors for components that only need subset of state**
 - Reduces unnecessary re-renders
 - Especially important in frequently updating stores
@@ -291,13 +314,16 @@ function UserAvatar() {
 ### Pitfall 4.1: Using `any` Type
 
 **❌ WRONG:**
+
 ```typescript
-function processUser(user: any) {  // ❌ Loses all type safety
-  return user.name.toUpperCase();  // No error if user.name is undefined
+function processUser(user: any) {
+  // ❌ Loses all type safety
+  return user.name.toUpperCase(); // No error if user.name is undefined
 }
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 function processUser(user: User | null) {
   if (!user?.name) {
@@ -308,6 +334,7 @@ function processUser(user: User | null) {
 ```
 
 **Key Takeaway:**
+
 - **Never use `any` - use `unknown` if type is truly unknown**
 - Define proper types for all function parameters
 - Use type guards for runtime checks
@@ -317,15 +344,17 @@ function processUser(user: User | null) {
 ### Pitfall 4.2: Implicit Types Leading to Errors
 
 **❌ WRONG:**
+
 ```typescript
 // No explicit return type - type inference can be wrong
 export function useAuth() {
   const context = useContext(AuthContext);
-  return context;  // What type is this? ❌
+  return context; // What type is this? ❌
 }
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 // Explicit return type with overloads
 export function useAuth(): AuthState;
@@ -333,13 +362,14 @@ export function useAuth<T>(selector: (state: AuthState) => T): T;
 export function useAuth<T>(selector?: (state: AuthState) => T): AuthState | T {
   const context = useContext(AuthContext);
   if (!context) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error('useAuth must be used within AuthProvider');
   }
   return selector ? context(selector) : context();
 }
 ```
 
 **Key Takeaway:**
+
 - **Always provide explicit return types for public APIs**
 - Use function overloads for polymorphic functions
 - Document types in JSDoc comments
@@ -349,16 +379,19 @@ export function useAuth<T>(selector?: (state: AuthState) => T): AuthState | T {
 ### Pitfall 4.3: Not Using `import type` for Type-Only Imports
 
 **❌ SUBOPTIMAL:**
+
 ```typescript
-import { ReactNode } from 'react';  // Might be bundled even if only used for types
+import { ReactNode } from 'react'; // Might be bundled even if only used for types
 ```
 
 **✅ CORRECT:**
+
 ```typescript
-import type { ReactNode } from 'react';  // Guaranteed to be stripped from bundle
+import type { ReactNode } from 'react'; // Guaranteed to be stripped from bundle
 ```
 
 **Key Takeaway:**
+
 - **Use `import type` for type-only imports**
 - Smaller bundle size
 - Clearer intent
@@ -370,6 +403,7 @@ import type { ReactNode } from 'react';  // Guaranteed to be stripped from bundl
 ### Pitfall 5.1: Forgetting Optional Chaining for Nullable Values
 
 **❌ WRONG:**
+
 ```typescript
 function UserProfile() {
   const { user } = useAuth();
@@ -378,6 +412,7 @@ function UserProfile() {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 function UserProfile() {
   const { user } = useAuth();
@@ -397,6 +432,7 @@ function UserProfile() {
 ```
 
 **Key Takeaway:**
+
 - **Always handle null/undefined cases**
 - Use optional chaining (`?.`) and nullish coalescing (`??`)
 - Provide fallback UI for missing data
@@ -406,6 +442,7 @@ function UserProfile() {
 ### Pitfall 5.2: Mixing Concerns in Components
 
 **❌ WRONG:**
+
 ```typescript
 function UserDashboard() {
   const [users, setUsers] = useState([]);
@@ -429,6 +466,7 @@ function UserDashboard() {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 // Custom hook for data fetching
 function useUsers() {
@@ -460,6 +498,7 @@ function UserDashboard() {
 ```
 
 **Key Takeaway:**
+
 - **Separate concerns: data fetching, business logic, rendering**
 - Extract logic to custom hooks
 - Keep components focused on UI
@@ -471,6 +510,7 @@ function UserDashboard() {
 ### Pitfall 6.1: Wrong Provider Order
 
 **❌ WRONG:**
+
 ```typescript
 // AuthInitializer outside AuthProvider ❌
 function RootLayout({ children }) {
@@ -486,6 +526,7 @@ function RootLayout({ children }) {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 function RootLayout({ children }) {
   return (
@@ -500,6 +541,7 @@ function RootLayout({ children }) {
 ```
 
 **Key Takeaway:**
+
 - **Providers must wrap components that use them**
 - Order matters when there are dependencies
 - Keep provider tree shallow (performance)
@@ -509,6 +551,7 @@ function RootLayout({ children }) {
 ### Pitfall 6.2: Creating Too Many Providers
 
 **❌ WRONG:**
+
 ```typescript
 // Separate provider for every piece of state ❌
 <UserProvider>
@@ -525,6 +568,7 @@ function RootLayout({ children }) {
 ```
 
 **✅ BETTER:**
+
 ```typescript
 // Combine related state, use Zustand for most things
 <AuthProvider>         {/* Only for auth DI */}
@@ -541,6 +585,7 @@ const useUserPreferences = create(...);  // User settings
 ```
 
 **Key Takeaway:**
+
 - **Use Context only when necessary** (DI, third-party integrations)
 - **Use Zustand for most global state** (no provider needed)
 - Avoid provider hell
@@ -552,6 +597,7 @@ const useUserPreferences = create(...);  // User settings
 ### Pitfall 7.1: Using Hooks in Event Handlers
 
 **❌ WRONG:**
+
 ```typescript
 function MyComponent() {
   const handleClick = () => {
@@ -564,6 +610,7 @@ function MyComponent() {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 function MyComponent() {
   const { user } = useAuth();  // ✅ Hook at component top level
@@ -587,6 +634,7 @@ function MyComponent() {
 ```
 
 **Key Takeaway:**
+
 - **Never call hooks inside event handlers**
 - For render state: Call hook at top level, access in closure
 - For mutations: Use `store.getState().method()`
@@ -596,13 +644,15 @@ function MyComponent() {
 ### Pitfall 7.2: Not Handling Async Errors in Event Handlers
 
 **❌ WRONG:**
+
 ```typescript
 const handleSubmit = async (data: FormData) => {
-  await apiCall(data);  // ❌ No error handling!
+  await apiCall(data); // ❌ No error handling!
 };
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 const handleSubmit = async (data: FormData) => {
   try {
@@ -616,6 +666,7 @@ const handleSubmit = async (data: FormData) => {
 ```
 
 **Key Takeaway:**
+
 - **Always wrap async calls in try/catch**
 - Provide user feedback for both success and errors
 - Log errors for debugging
@@ -627,6 +678,7 @@ const handleSubmit = async (data: FormData) => {
 ### Pitfall 8.1: Not Mocking Context Providers in Tests
 
 **❌ WRONG:**
+
 ```typescript
 // Test without provider ❌
 test('renders user name', () => {
@@ -636,6 +688,7 @@ test('renders user name', () => {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 // Mock the hook
 jest.mock('@/lib/stores', () => ({
@@ -654,6 +707,7 @@ test('renders user name', () => {
 ```
 
 **Key Takeaway:**
+
 - **Mock hooks at module level in tests**
 - Provide necessary return values for each test case
 - Test both success and error states
@@ -663,6 +717,7 @@ test('renders user name', () => {
 ### Pitfall 8.2: Testing Implementation Details
 
 **❌ WRONG:**
+
 ```typescript
 test('calls useAuthStore hook', () => {
   const spy = jest.spyOn(require('@/lib/stores'), 'useAuthStore');
@@ -672,6 +727,7 @@ test('calls useAuthStore hook', () => {
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 test('displays user name when authenticated', () => {
   (useAuth as jest.Mock).mockReturnValue({
@@ -685,6 +741,7 @@ test('displays user name when authenticated', () => {
 ```
 
 **Key Takeaway:**
+
 - **Test behavior, not implementation**
 - Focus on what the user sees/does
 - Don't test internal API calls unless critical
@@ -696,6 +753,7 @@ test('displays user name when authenticated', () => {
 ### Pitfall 9.1: Not Using React.memo for Expensive Components
 
 **❌ SUBOPTIMAL:**
+
 ```typescript
 // Re-renders every time parent re-renders ❌
 function ExpensiveChart({ data }) {
@@ -705,6 +763,7 @@ function ExpensiveChart({ data }) {
 ```
 
 **✅ OPTIMIZED:**
+
 ```typescript
 // Only re-renders when data changes ✅
 export const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
@@ -713,6 +772,7 @@ export const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
 ```
 
 **Key Takeaway:**
+
 - **Use `React.memo` for expensive components**
 - Especially useful for list items, charts, heavy UI
 - Profile with React DevTools to identify candidates
@@ -722,6 +782,7 @@ export const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
 ### Pitfall 9.2: Creating Functions Inside Render
 
 **❌ SUBOPTIMAL:**
+
 ```typescript
 function MyComponent() {
   return (
@@ -733,6 +794,7 @@ function MyComponent() {
 ```
 
 **✅ OPTIMIZED:**
+
 ```typescript
 function MyComponent() {
   const handleClick = useCallback(() => {
@@ -744,15 +806,18 @@ function MyComponent() {
 ```
 
 **When to Optimize:**
+
 - **For memoized child components** (memo, PureComponent)
 - **For expensive event handlers**
 - **When profiling shows performance issues**
 
 **When NOT to optimize:**
+
 - **Simple components with cheap operations** (premature optimization)
 - **One-off event handlers**
 
 **Key Takeaway:**
+
 - **Use `useCallback` for functions passed to memoized children**
 - But don't optimize everything - profile first
 
@@ -763,6 +828,7 @@ function MyComponent() {
 ### Pitfall 10.1: Not Using Barrel Exports
 
 **❌ INCONSISTENT:**
+
 ```typescript
 // Deep imports all over the codebase
 import { useAuth } from '@/lib/auth/AuthContext';
@@ -771,6 +837,7 @@ import { User } from '@/lib/stores/authStore';
 ```
 
 **✅ CONSISTENT:**
+
 ```typescript
 // Barrel exports in stores/index.ts
 export { useAuth, AuthProvider } from '../auth/AuthContext';
@@ -781,6 +848,7 @@ import { useAuth, useAuthStore, User } from '@/lib/stores';
 ```
 
 **Key Takeaway:**
+
 - **Create barrel exports (index.ts) for public APIs**
 - Easier to refactor internal structure
 - Consistent import paths across codebase
@@ -790,31 +858,44 @@ import { useAuth, useAuthStore, User } from '@/lib/stores';
 ### Pitfall 10.2: Circular Dependencies
 
 **❌ WRONG:**
+
 ```typescript
 // fileA.ts
 import { functionB } from './fileB';
-export function functionA() { return functionB(); }
+export function functionA() {
+  return functionB();
+}
 
 // fileB.ts
-import { functionA } from './fileA';  // ❌ Circular!
-export function functionB() { return functionA(); }
+import { functionA } from './fileA'; // ❌ Circular!
+export function functionB() {
+  return functionA();
+}
 ```
 
 **✅ CORRECT:**
+
 ```typescript
 // utils.ts
-export function sharedFunction() { /* shared logic */ }
+export function sharedFunction() {
+  /* shared logic */
+}
 
 // fileA.ts
 import { sharedFunction } from './utils';
-export function functionA() { return sharedFunction(); }
+export function functionA() {
+  return sharedFunction();
+}
 
 // fileB.ts
 import { sharedFunction } from './utils';
-export function functionB() { return sharedFunction(); }
+export function functionB() {
+  return sharedFunction();
+}
 ```
 
 **Key Takeaway:**
+
 - **Avoid circular imports**
 - Extract shared code to separate modules
 - Keep dependency graph acyclic
@@ -840,6 +921,7 @@ npm run build
 ```
 
 **In browser:**
+
 - [ ] No console errors or warnings
 - [ ] Components render correctly
 - [ ] No infinite loops or excessive re-renders (React DevTools)
diff --git a/frontend/docs/E2E_COVERAGE_GUIDE.md b/frontend/docs/E2E_COVERAGE_GUIDE.md
index 49706eb..d0184b4 100644
--- a/frontend/docs/E2E_COVERAGE_GUIDE.md
+++ b/frontend/docs/E2E_COVERAGE_GUIDE.md
@@ -93,12 +93,14 @@ npm run coverage:view
 ### Pros & Cons
 
 **Pros:**
+
 - ✅ Native browser coverage (most accurate)
 - ✅ No build instrumentation needed (faster)
 - ✅ Works with source maps
 - ✅ Zero performance overhead
 
 **Cons:**
+
 - ❌ Chromium only (V8 engine specific)
 - ❌ Requires v8-to-istanbul conversion
 
@@ -168,11 +170,13 @@ This generates: `coverage-combined/index.html`
 ### Pros & Cons
 
 **Pros:**
+
 - ✅ Works on all browsers (Firefox, Safari, etc.)
 - ✅ Industry standard tooling
 - ✅ No conversion needed
 
 **Cons:**
+
 - ❌ Requires code instrumentation (slower builds)
 - ❌ More complex setup
 - ❌ Slight test performance overhead
@@ -196,11 +200,9 @@ module.exports = {
   presets: ['next/babel'],
   env: {
     test: {
-      plugins: [
-        process.env.E2E_COVERAGE && 'istanbul'
-      ].filter(Boolean)
-    }
-  }
+      plugins: [process.env.E2E_COVERAGE && 'istanbul'].filter(Boolean),
+    },
+  },
 };
 ```
 
@@ -442,12 +444,14 @@ Add to your CI pipeline (e.g., `.github/workflows/test.yml`):
 ### Problem: No coverage files generated
 
 **Symptoms:**
+
 ```bash
 npm run coverage:convert
 # ❌ No V8 coverage found at: coverage-e2e/raw
 ```
 
 **Solutions:**
+
 1. Verify `E2E_COVERAGE=true` is set when running tests
 2. Check coverage helpers are imported: `import { withCoverage } from './helpers/coverage'`
 3. Verify `beforeEach` and `afterEach` hooks are added
@@ -456,12 +460,14 @@ npm run coverage:convert
 ### Problem: V8 conversion fails
 
 **Symptoms:**
+
 ```bash
 npm run coverage:convert
 # ❌ v8-to-istanbul not installed
 ```
 
 **Solution:**
+
 ```bash
 npm install -D v8-to-istanbul
 ```
@@ -469,6 +475,7 @@ npm install -D v8-to-istanbul
 ### Problem: Coverage lower than expected
 
 **Symptoms:**
+
 ```
 Combined: 85% (expected 99%)
 ```
@@ -490,12 +497,14 @@ Combined: 85% (expected 99%)
 ### Problem: Istanbul coverage is empty
 
 **Symptoms:**
+
 ```typescript
 await saveIstanbulCoverage(page, testName);
 // ⚠️  No Istanbul coverage found
 ```
 
 **Solutions:**
+
 1. Verify `babel-plugin-istanbul` is configured
 2. Check `window.__coverage__` exists:
    ```typescript
@@ -507,12 +516,14 @@ await saveIstanbulCoverage(page, testName);
 ### Problem: Merge script fails
 
 **Symptoms:**
+
 ```bash
 npm run coverage:merge
 # ❌ Error: Cannot find module 'istanbul-lib-coverage'
 ```
 
 **Solution:**
+
 ```bash
 npm install -D istanbul-lib-coverage istanbul-lib-report istanbul-reports
 ```
@@ -524,11 +535,13 @@ npm install -D istanbul-lib-coverage istanbul-lib-report istanbul-reports
 ### Q: Should I use V8 or Istanbul coverage?
 
 **A: V8 coverage (Approach 1)** if:
+
 - ✅ You only test in Chromium
 - ✅ You want zero instrumentation overhead
 - ✅ You want the most accurate coverage
 
 **Istanbul (Approach 2)** if:
+
 - ✅ You need cross-browser coverage
 - ✅ You already use Istanbul tooling
 - ✅ You need complex coverage transformations
@@ -545,6 +558,7 @@ npm install -D istanbul-lib-coverage istanbul-lib-report istanbul-reports
 ### Q: Can I run coverage only for specific tests?
 
 **Yes:**
+
 ```bash
 # Single file
 E2E_COVERAGE=true npx playwright test homepage.spec.ts
@@ -559,10 +573,7 @@ Edit `.nycrc.json` and add to `exclude` array:
 
 ```json
 {
-  "exclude": [
-    "src/app/dev/**",
-    "src/lib/utils/debug.ts"
-  ]
+  "exclude": ["src/app/dev/**", "src/lib/utils/debug.ts"]
 }
 ```
 
@@ -571,6 +582,7 @@ Edit `.nycrc.json` and add to `exclude` array:
 Not directly in the HTML report, but you can:
 
 1. Generate separate reports:
+
    ```bash
    npx nyc report --reporter=html --report-dir=coverage-unit --temp-dir=coverage/.nyc_output
    npx nyc report --reporter=html --report-dir=coverage-e2e-only --temp-dir=coverage-e2e/.nyc_output
@@ -581,6 +593,7 @@ Not directly in the HTML report, but you can:
 ### Q: What's the performance impact on CI?
 
 Typical impact:
+
 - V8 coverage: +2-3 minutes (conversion time)
 - Istanbul coverage: +5-7 minutes (build instrumentation)
 - Merge step: ~10 seconds
@@ -594,6 +607,7 @@ Total CI time increase: **3-8 minutes**
 ### After Phase 1 (Infrastructure - DONE ✅)
 
 You've completed:
+
 - ✅ `.nycrc.json` configuration
 - ✅ Merge script (`scripts/merge-coverage.ts`)
 - ✅ Conversion script (`scripts/convert-v8-to-istanbul.ts`)
@@ -603,6 +617,7 @@ You've completed:
 ### Phase 2: Activation (When Ready)
 
 1. **Install dependencies:**
+
    ```bash
    npm install -D v8-to-istanbul istanbul-lib-coverage istanbul-lib-report istanbul-reports
    ```
diff --git a/frontend/docs/E2E_PERFORMANCE_OPTIMIZATION.md b/frontend/docs/E2E_PERFORMANCE_OPTIMIZATION.md
index 6741913..8c53167 100644
--- a/frontend/docs/E2E_PERFORMANCE_OPTIMIZATION.md
+++ b/frontend/docs/E2E_PERFORMANCE_OPTIMIZATION.md
@@ -6,20 +6,24 @@
 ## Bottleneck Analysis
 
 ### 1. Authentication Overhead (HIGHEST IMPACT)
+
 **Problem**: Each test logs in fresh via UI
+
 - **Impact**: 5-7s per test × 133 admin tests = ~700s wasted
 - **Root Cause**: Using `loginViaUI(page)` in every `beforeEach`
 
 **Example of current slow pattern:**
+
 ```typescript
 test.beforeEach(async ({ page }) => {
   await setupSuperuserMocks(page);
-  await loginViaUI(page);  // ← 5-7s UI login EVERY test
+  await loginViaUI(page); // ← 5-7s UI login EVERY test
   await page.goto('/admin');
 });
 ```
 
 **Solution: Playwright Storage State** (SAVE ~600-700s)
+
 ```typescript
 // auth.setup.ts - Run ONCE per worker
 import { test as setup } from '@playwright/test';
@@ -62,7 +66,7 @@ export default defineConfig({
 // admin-users.spec.ts - NO MORE loginViaUI!
 test.beforeEach(async ({ page }) => {
   // Auth already loaded from storageState
-  await page.goto('/admin/users');  // ← Direct navigation, ~1-2s
+  await page.goto('/admin/users'); // ← Direct navigation, ~1-2s
 });
 ```
 
@@ -71,28 +75,32 @@ test.beforeEach(async ({ page }) => {
 ---
 
 ### 2. Redundant Navigation Tests (MEDIUM IMPACT)
+
 **Problem**: Separate tests for "navigate to X" and "display X page"
+
 - **Impact**: 3-5s per redundant test × ~15 tests = ~60s wasted
 
 **Current slow pattern:**
+
 ```typescript
 test('should navigate to users page', async ({ page }) => {
-  await page.goto('/admin/users');  // 3s
+  await page.goto('/admin/users'); // 3s
   await expect(page).toHaveURL('/admin/users');
   await expect(page.locator('h1')).toContainText('User Management');
 });
 
 test('should display user management page', async ({ page }) => {
-  await page.goto('/admin/users');  // 3s DUPLICATE
+  await page.goto('/admin/users'); // 3s DUPLICATE
   await expect(page.locator('h1')).toContainText('User Management');
   await expect(page.getByText(/manage users/i)).toBeVisible();
 });
 ```
 
 **Optimized pattern:**
+
 ```typescript
 test('should navigate to users page and display content', async ({ page }) => {
-  await page.goto('/admin/users');  // 3s ONCE
+  await page.goto('/admin/users'); // 3s ONCE
 
   // Navigation assertions
   await expect(page).toHaveURL('/admin/users');
@@ -109,18 +117,22 @@ test('should navigate to users page and display content', async ({ page }) => {
 ---
 
 ### 3. Flaky Test Fix (CRITICAL)
+
 **Problem**: Test #218 failed once, passed on retry
+
 ```
 Test: settings-password.spec.ts:24:7 › Password Change › should display password change form
 Failed: 12.8s → Retry passed: 8.3s
 ```
 
 **Root Cause Options**:
+
 1. Race condition in form rendering
 2. Slow network request not properly awaited
 3. Animation/transition timing issue
 
 **Investigation needed:**
+
 ```typescript
 // Current test (lines 24-35)
 test('should display password change form', async ({ page }) => {
@@ -134,11 +146,12 @@ test('should display password change form', async ({ page }) => {
 ```
 
 **Temporary Solution: Skip until fixed**
+
 ```typescript
 test.skip('should display password change form', async ({ page }) => {
   // TODO: Fix race condition (issue #XXX)
   await page.goto('/settings/password');
-  await page.waitForLoadState('networkidle');  // ← Add this
+  await page.waitForLoadState('networkidle'); // ← Add this
   await expect(page.getByLabel(/current password/i)).toBeVisible();
 });
 ```
@@ -148,23 +161,27 @@ test.skip('should display password change form', async ({ page }) => {
 ---
 
 ### 4. Optimize Wait Timeouts (LOW IMPACT)
+
 **Problem**: Default timeout is 10s for all assertions
+
 - **Impact**: Tests wait unnecessarily when elements load faster
 
 **Current global timeout:**
+
 ```typescript
 // playwright.config.ts
 export default defineConfig({
-  timeout: 30000,  // Per test
-  expect: { timeout: 10000 },  // Per assertion
+  timeout: 30000, // Per test
+  expect: { timeout: 10000 }, // Per assertion
 });
 ```
 
 **Optimized for fast-loading pages:**
+
 ```typescript
 export default defineConfig({
-  timeout: 20000,  // Reduce from 30s
-  expect: { timeout: 5000 },  // Reduce from 10s (most elements load <2s)
+  timeout: 20000, // Reduce from 30s
+  expect: { timeout: 5000 }, // Reduce from 10s (most elements load <2s)
 });
 ```
 
@@ -175,6 +192,7 @@ export default defineConfig({
 ## Implementation Priority
 
 ### Phase 1: Quick Wins (1-2 hours work)
+
 1. ✅ **Skip flaky test #218** temporarily
 2. ✅ **Reduce timeout defaults** (5s for expects, 20s for tests)
 3. ✅ **Combine 5 most obvious redundant navigation tests**
@@ -184,6 +202,7 @@ export default defineConfig({
 ---
 
 ### Phase 2: Auth State Caching (2-4 hours work)
+
 1. ✅ Create `e2e/auth.setup.ts` with storage state setup
 2. ✅ Update `playwright.config.ts` with projects + dependencies
 3. ✅ Remove `loginViaUI` from all admin test `beforeEach` hooks
@@ -194,6 +213,7 @@ export default defineConfig({
 ---
 
 ### Phase 3: Deep Optimization (4-8 hours work)
+
 1. ✅ Investigate and fix flaky test root cause
 2. ✅ Audit all navigation tests for redundancy
 3. ✅ Combine related assertions (e.g., all stat cards in one test)
@@ -205,12 +225,12 @@ export default defineConfig({
 
 ## Total Expected Improvement
 
-| Phase | Time Investment | Time Saved | % Improvement |
-|-------|----------------|------------|---------------|
-| Phase 1 | 1-2 hours | ~150s | 7% |
-| Phase 2 | 2-4 hours | ~700s | 35% |
-| Phase 3 | 4-8 hours | ~200s | 10% |
-| **Total** | **7-14 hours** | **~1050s** | **50-60%** |
+| Phase     | Time Investment | Time Saved | % Improvement |
+| --------- | --------------- | ---------- | ------------- |
+| Phase 1   | 1-2 hours       | ~150s      | 7%            |
+| Phase 2   | 2-4 hours       | ~700s      | 35%           |
+| Phase 3   | 4-8 hours       | ~200s      | 10%           |
+| **Total** | **7-14 hours**  | **~1050s** | **50-60%**    |
 
 **Final target**: 2100s → 1050s = **~17-18 minutes** (currently ~35 minutes)
 
@@ -219,6 +239,7 @@ export default defineConfig({
 ## Risks and Considerations
 
 ### Storage State Caching Risks:
+
 1. **Test isolation**: Shared auth state could cause cross-test pollution
    - **Mitigation**: Use separate storage files per role, clear cookies between tests
 2. **Stale auth tokens**: Mock tokens might expire
@@ -227,6 +248,7 @@ export default defineConfig({
    - **Mitigation**: Keep `loginViaUI` tests for auth flow verification
 
 ### Recommended Safeguards:
+
 ```typescript
 // Clear non-auth state between tests
 test.beforeEach(async ({ page }) => {
@@ -249,15 +271,18 @@ test.beforeEach(async ({ page }) => {
 ## Next Steps
 
 **Immediate Actions (Do Now):**
+
 1. Skip flaky test #218 with TODO comment
 2. Reduce timeout defaults in playwright.config.ts
 3. Create this optimization plan issue/ticket
 
 **Short-term (This Week):**
+
 1. Implement auth storage state (Phase 2)
 2. Combine obvious redundant tests (Phase 1)
 
 **Medium-term (Next Sprint):**
+
 1. Investigate flaky test root cause
 2. Audit all tests for redundancy
 3. Measure and report improvements
@@ -267,18 +292,21 @@ test.beforeEach(async ({ page }) => {
 ## Metrics to Track
 
 Before optimization:
+
 - Total time: ~2100s (35 minutes)
 - Avg test time: 9.1s
 - Slowest test: 20.1s (settings navigation)
 - Flaky tests: 1
 
 After Phase 1+2 target:
+
 - Total time: <1200s (20 minutes) ✅
 - Avg test time: <5.5s ✅
 - Slowest test: <12s ✅
 - Flaky tests: 0 ✅
 
 After Phase 3 target:
+
 - Total time: <1050s (17 minutes) 🎯
 - Avg test time: <4.8s 🎯
 - Slowest test: <10s 🎯
diff --git a/frontend/docs/FEATURE_EXAMPLES.md b/frontend/docs/FEATURE_EXAMPLES.md
index c9fe754..c5394d8 100755
--- a/frontend/docs/FEATURE_EXAMPLES.md
+++ b/frontend/docs/FEATURE_EXAMPLES.md
@@ -69,8 +69,7 @@ export function useCreateUser() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (data: CreateUserDto) =>
-      AdminService.createUser({ requestBody: data }),
+    mutationFn: (data: CreateUserDto) => AdminService.createUser({ requestBody: data }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       toast.success('User created successfully');
@@ -106,8 +105,7 @@ export function useDeleteUser() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (userId: string) =>
-      AdminService.deleteUser({ userId }),
+    mutationFn: (userId: string) => AdminService.deleteUser({ userId }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       toast.success('User deleted successfully');
@@ -145,7 +143,7 @@ export function useBulkUserAction() {
   return useMutation({
     mutationFn: ({ action, userIds }: { action: string; userIds: string[] }) =>
       AdminService.bulkUserAction({
-        requestBody: { action, user_ids: userIds }
+        requestBody: { action, user_ids: userIds },
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
@@ -592,6 +590,7 @@ export default function NewUserPage() {
 ### Testing the Feature
 
 **Test the user management flow:**
+
 1. Navigate to `/admin/users`
 2. Search for users
 3. Click "Create User" and fill the form
@@ -630,8 +629,7 @@ export function useRevokeSession() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (sessionId: string) =>
-      SessionsService.revokeSession({ sessionId }),
+    mutationFn: (sessionId: string) => SessionsService.revokeSession({ sessionId }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
       toast.success('Session revoked successfully');
@@ -1041,11 +1039,13 @@ export default function AdminDashboardPage() {
 ## Conclusion
 
 These examples demonstrate:
+
 1. **Complete CRUD operations** (User Management)
 2. **Real-time data with polling** (Session Management)
 3. **Data visualization** (Admin Dashboard Charts)
 
 Each example follows the established patterns:
+
 - API hooks for data fetching
 - Reusable components
 - Proper error handling
@@ -1053,6 +1053,7 @@ Each example follows the established patterns:
 - Type safety with TypeScript
 
 For more patterns and best practices, refer to:
+
 - **ARCHITECTURE.md**: System design
 - **CODING_STANDARDS.md**: Code style
 - **COMPONENT_GUIDE.md**: Component usage
diff --git a/frontend/docs/design-system/00-quick-start.md b/frontend/docs/design-system/00-quick-start.md
index 0f64340..a804ce6 100644
--- a/frontend/docs/design-system/00-quick-start.md
+++ b/frontend/docs/design-system/00-quick-start.md
@@ -66,7 +66,7 @@ import {
   CardTitle,
   CardDescription,
   CardContent,
-  CardFooter
+  CardFooter,
 } from '@/components/ui/card';
 
 <Card>
@@ -80,7 +80,7 @@ import {
   <CardFooter>
     <Button>Save</Button>
   </CardFooter>
-</Card>
+</Card>;
 ```
 
 **[See card examples](/dev/components#card)**
@@ -95,18 +95,9 @@ import { Input } from '@/components/ui/input';
 
 <div className="space-y-2">
   <Label htmlFor="email">Email</Label>
-  <Input
-    id="email"
-    type="email"
-    placeholder="you@example.com"
-    {...register('email')}
-  />
-  {errors.email && (
-    <p className="text-sm text-destructive">
-      {errors.email.message}
-    </p>
-  )}
-</div>
+  <Input id="email" type="email" placeholder="you@example.com" {...register('email')} />
+  {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
+</div>;
 ```
 
 **[See form patterns](./06-forms.md)** | **[Form examples](/dev/forms)**
@@ -123,7 +114,7 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-  DialogTrigger
+  DialogTrigger,
 } from '@/components/ui/dialog';
 
 <Dialog>
@@ -133,16 +124,14 @@ import {
   <DialogContent>
     <DialogHeader>
       <DialogTitle>Confirm Action</DialogTitle>
-      <DialogDescription>
-        Are you sure you want to proceed?
-      </DialogDescription>
+      <DialogDescription>Are you sure you want to proceed?</DialogDescription>
     </DialogHeader>
     <DialogFooter>
       <Button variant="outline">Cancel</Button>
       <Button>Confirm</Button>
     </DialogFooter>
   </DialogContent>
-</Dialog>
+</Dialog>;
 ```
 
 **[See dialog examples](/dev/components#dialog)**
@@ -197,7 +186,7 @@ import { AlertCircle } from 'lucide-react';
 ```tsx
 // Responsive card grid
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-  {items.map(item => (
+  {items.map((item) => (
     <Card key={item.id}>
       <CardHeader>
         <CardTitle>{item.title}</CardTitle>
@@ -218,9 +207,7 @@ import { AlertCircle } from 'lucide-react';
       <CardTitle>Login</CardTitle>
     </CardHeader>
     <CardContent>
-      <form className="space-y-4">
-        {/* Form fields */}
-      </form>
+      <form className="space-y-4">{/* Form fields */}</form>
     </CardContent>
   </Card>
 </div>
@@ -247,6 +234,7 @@ import { AlertCircle } from 'lucide-react';
 ```
 
 **Available tokens:**
+
 - `primary` - Main brand color, CTAs
 - `destructive` - Errors, delete actions
 - `muted` - Disabled states, subtle backgrounds
@@ -276,6 +264,7 @@ import { AlertCircle } from 'lucide-react';
 ```
 
 **Common spacing values:**
+
 - `2` (8px) - Tight spacing
 - `4` (16px) - Standard spacing
 - `6` (24px) - Section spacing
@@ -326,6 +315,7 @@ import { AlertCircle } from 'lucide-react';
 ```
 
 **Breakpoints:**
+
 - `sm:` 640px+
 - `md:` 768px+
 - `lg:` 1024px+
@@ -370,11 +360,9 @@ import { AlertCircle } from 'lucide-react';
 ```tsx
 import { Skeleton } from '@/components/ui/skeleton';
 
-{isLoading ? (
-  <Skeleton className="h-12 w-full" />
-) : (
-  <div>{content}</div>
-)}
+{
+  isLoading ? <Skeleton className="h-12 w-full" /> : <div>{content}</div>;
+}
 ```
 
 ### Dropdown Menu
@@ -384,7 +372,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 
 <DropdownMenu>
@@ -395,7 +383,7 @@ import {
     <DropdownMenuItem>Edit</DropdownMenuItem>
     <DropdownMenuItem>Delete</DropdownMenuItem>
   </DropdownMenuContent>
-</DropdownMenu>
+</DropdownMenu>;
 ```
 
 ### Badge/Tag
@@ -415,17 +403,20 @@ import { Badge } from '@/components/ui/badge';
 You now know enough to build most interfaces! For deeper knowledge:
 
 ### Learn More
+
 - **Components**: [Complete component guide](./02-components.md)
 - **Layouts**: [Layout patterns](./03-layouts.md)
 - **Forms**: [Form patterns & validation](./06-forms.md)
 - **Custom Components**: [Component creation guide](./05-component-creation.md)
 
 ### Interactive Examples
+
 - **[Component Showcase](/dev/components)** - All components with code
 - **[Layout Examples](/dev/layouts)** - Before/after comparisons
 - **[Form Examples](/dev/forms)** - Complete form implementations
 
 ### Reference
+
 - **[Quick Reference Tables](./99-reference.md)** - Bookmark this for lookups
 - **[Foundations](./01-foundations.md)** - Complete color/spacing/typography guide
 
@@ -449,6 +440,7 @@ Remember these and you'll be 95% compliant:
 You're ready to build. When you hit edge cases or need advanced patterns, refer back to the [full documentation](./README.md).
 
 **Bookmark these:**
+
 - [Quick Reference](./99-reference.md) - For quick lookups
 - [AI Guidelines](./08-ai-guidelines.md) - If using AI assistants
 - [Component Showcase](/dev/components) - For copy-paste examples
diff --git a/frontend/docs/design-system/01-foundations.md b/frontend/docs/design-system/01-foundations.md
index 667a314..a36adfd 100644
--- a/frontend/docs/design-system/01-foundations.md
+++ b/frontend/docs/design-system/01-foundations.md
@@ -43,6 +43,7 @@
 ### Why OKLCH?
 
 We use **OKLCH** (Oklab LCH) color space for:
+
 - ✅ **Perceptual uniformity** - Colors look consistent across light/dark modes
 - ✅ **Better accessibility** - Predictable contrast ratios
 - ✅ **Vibrant colors** - More saturated without sacrificing legibility
@@ -55,6 +56,7 @@ We use **OKLCH** (Oklab LCH) color space for:
 ### Semantic Color Tokens
 
 All colors follow the **background/foreground** convention:
+
 - `background` - The background color
 - `foreground` - The text color that goes on that background
 
@@ -68,11 +70,12 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light & Dark Mode */
---primary: oklch(0.6231 0.1880 259.8145)  /* Blue */
---primary-foreground: oklch(1 0 0)         /* White text */
+--primary: oklch(0.6231 0.188 259.8145) /* Blue */ --primary-foreground: oklch(1 0 0)
+  /* White text */;
 ```
 
 **Usage**:
+
 ```tsx
 // Primary button (most common)
 <Button>Save Changes</Button>
@@ -87,12 +90,14 @@ All colors follow the **background/foreground** convention:
 ```
 
 **When to use**:
+
 - ✅ Call-to-action buttons
 - ✅ Primary links
 - ✅ Active states in navigation
 - ✅ Important badges/tags
 
 **When NOT to use**:
+
 - ❌ Large background areas (too intense)
 - ❌ Body text (use `text-foreground`)
 - ❌ Disabled states (use `muted`)
@@ -105,15 +110,14 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light Mode */
---secondary: oklch(0.9670 0.0029 264.5419)  /* Light gray-blue */
---secondary-foreground: oklch(0.1529 0 0)   /* Dark text */
-
-/* Dark Mode */
---secondary: oklch(0.2686 0 0)              /* Dark gray */
---secondary-foreground: oklch(0.9823 0 0)   /* Light text */
+--secondary: oklch(0.967 0.0029 264.5419) /* Light gray-blue */
+  --secondary-foreground: oklch(0.1529 0 0) /* Dark text */ /* Dark Mode */
+  --secondary: oklch(0.2686 0 0) /* Dark gray */ --secondary-foreground: oklch(0.9823 0 0)
+  /* Light text */;
 ```
 
 **Usage**:
+
 ```tsx
 // Secondary button
 <Button variant="secondary">Cancel</Button>
@@ -135,15 +139,12 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light Mode */
---muted: oklch(0.9846 0.0017 247.8389)
---muted-foreground: oklch(0.4667 0.0043 264.4327)
-
-/* Dark Mode */
---muted: oklch(0.2393 0 0)
---muted-foreground: oklch(0.6588 0.0043 264.4327)
+--muted: oklch(0.9846 0.0017 247.8389) --muted-foreground: oklch(0.4667 0.0043 264.4327)
+  /* Dark Mode */ --muted: oklch(0.2393 0 0) --muted-foreground: oklch(0.6588 0.0043 264.4327);
 ```
 
 **Usage**:
+
 ```tsx
 // Disabled button
 <Button disabled>Submit</Button>
@@ -165,6 +166,7 @@ All colors follow the **background/foreground** convention:
 ```
 
 **Common use cases**:
+
 - Disabled button backgrounds
 - Placeholder/skeleton loaders
 - TabsList backgrounds
@@ -179,15 +181,12 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light Mode */
---accent: oklch(0.9514 0.0250 236.8242)
---accent-foreground: oklch(0.1529 0 0)
-
-/* Dark Mode */
---accent: oklch(0.3791 0.1378 265.5222)
---accent-foreground: oklch(0.9823 0 0)
+--accent: oklch(0.9514 0.025 236.8242) --accent-foreground: oklch(0.1529 0 0) /* Dark Mode */
+  --accent: oklch(0.3791 0.1378 265.5222) --accent-foreground: oklch(0.9823 0 0);
 ```
 
 **Usage**:
+
 ```tsx
 // Dropdown menu item hover
 <DropdownMenu>
@@ -205,6 +204,7 @@ All colors follow the **background/foreground** convention:
 ```
 
 **Common use cases**:
+
 - Dropdown menu item hover states
 - Command palette hover states
 - Highlighted sections
@@ -218,11 +218,12 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light & Dark Mode */
---destructive: oklch(0.6368 0.2078 25.3313)  /* Red */
---destructive-foreground: oklch(1 0 0)        /* White text */
+--destructive: oklch(0.6368 0.2078 25.3313) /* Red */ --destructive-foreground: oklch(1 0 0)
+  /* White text */;
 ```
 
 **Usage**:
+
 ```tsx
 // Delete button
 <Button variant="destructive">Delete Account</Button>
@@ -246,6 +247,7 @@ All colors follow the **background/foreground** convention:
 ```
 
 **When to use**:
+
 - ✅ Delete/remove actions
 - ✅ Error messages
 - ✅ Validation errors
@@ -259,19 +261,15 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light Mode */
---card: oklch(1.0000 0 0)                    /* White */
---card-foreground: oklch(0.1529 0 0)         /* Dark text */
---popover: oklch(1.0000 0 0)                 /* White */
---popover-foreground: oklch(0.1529 0 0)      /* Dark text */
-
-/* Dark Mode */
---card: oklch(0.2686 0 0)                    /* Dark gray */
---card-foreground: oklch(0.9823 0 0)         /* Light text */
---popover: oklch(0.2686 0 0)                 /* Dark gray */
---popover-foreground: oklch(0.9823 0 0)      /* Light text */
+--card: oklch(1 0 0) /* White */ --card-foreground: oklch(0.1529 0 0) /* Dark text */
+  --popover: oklch(1 0 0) /* White */ --popover-foreground: oklch(0.1529 0 0) /* Dark text */
+  /* Dark Mode */ --card: oklch(0.2686 0 0) /* Dark gray */ --card-foreground: oklch(0.9823 0 0)
+  /* Light text */ --popover: oklch(0.2686 0 0) /* Dark gray */
+  --popover-foreground: oklch(0.9823 0 0) /* Light text */;
 ```
 
 **Usage**:
+
 ```tsx
 // Card (uses card colors by default)
 <Card>
@@ -296,15 +294,12 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light Mode */
---border: oklch(0.9276 0.0058 264.5313)
---input: oklch(0.9276 0.0058 264.5313)
-
-/* Dark Mode */
---border: oklch(0.3715 0 0)
---input: oklch(0.3715 0 0)
+--border: oklch(0.9276 0.0058 264.5313) --input: oklch(0.9276 0.0058 264.5313) /* Dark Mode */
+  --border: oklch(0.3715 0 0) --input: oklch(0.3715 0 0);
 ```
 
 **Usage**:
+
 ```tsx
 // Input border
 <Input type="email" placeholder="you@example.com" />
@@ -329,10 +324,11 @@ All colors follow the **background/foreground** convention:
 
 ```css
 /* Light & Dark Mode */
---ring: oklch(0.6231 0.1880 259.8145)  /* Primary blue */
+--ring: oklch(0.6231 0.188 259.8145) /* Primary blue */;
 ```
 
 **Usage**:
+
 ```tsx
 // Button with focus ring (automatic)
 <Button>Click me</Button>
@@ -355,14 +351,14 @@ All colors follow the **background/foreground** convention:
 **Purpose**: Data visualization with harmonious color palette
 
 ```css
---chart-1: oklch(0.6231 0.1880 259.8145)  /* Blue */
---chart-2: oklch(0.5461 0.2152 262.8809)  /* Purple-blue */
---chart-3: oklch(0.4882 0.2172 264.3763)  /* Deep purple */
---chart-4: oklch(0.4244 0.1809 265.6377)  /* Violet */
---chart-5: oklch(0.3791 0.1378 265.5222)  /* Deep violet */
+--chart-1: oklch(0.6231 0.188 259.8145) /* Blue */ --chart-2: oklch(0.5461 0.2152 262.8809)
+  /* Purple-blue */ --chart-3: oklch(0.4882 0.2172 264.3763) /* Deep purple */
+  --chart-4: oklch(0.4244 0.1809 265.6377) /* Violet */ --chart-5: oklch(0.3791 0.1378 265.5222)
+  /* Deep violet */;
 ```
 
 **Usage**:
+
 ```tsx
 // In chart components
 const COLORS = [
@@ -436,12 +432,13 @@ What's the purpose?
 ### Font Families
 
 ```css
---font-sans: Geist Sans, system-ui, -apple-system, sans-serif
---font-mono: Geist Mono, ui-monospace, monospace
---font-serif: ui-serif, Georgia, serif
+--font-sans:
+  Geist Sans, system-ui, -apple-system, sans-serif --font-mono: Geist Mono, ui-monospace,
+  monospace --font-serif: ui-serif, Georgia, serif;
 ```
 
 **Usage**:
+
 ```tsx
 // Sans serif (default)
 <div className="font-sans">Body text</div>
@@ -457,21 +454,21 @@ What's the purpose?
 
 ### Type Scale
 
-| Size | Class | rem | px | Use Case |
-|------|-------|-----|----|----|
-| 9xl | `text-9xl` | 8rem | 128px | Hero text (rare) |
-| 8xl | `text-8xl` | 6rem | 96px | Hero text (rare) |
-| 7xl | `text-7xl` | 4.5rem | 72px | Hero text (rare) |
-| 6xl | `text-6xl` | 3.75rem | 60px | Hero text (rare) |
-| 5xl | `text-5xl` | 3rem | 48px | Landing page H1 |
-| 4xl | `text-4xl` | 2.25rem | 36px | Page H1 |
-| 3xl | `text-3xl` | 1.875rem | 30px | **Page titles** |
-| 2xl | `text-2xl` | 1.5rem | 24px | **Section headings** |
-| xl | `text-xl` | 1.25rem | 20px | **Card titles** |
-| lg | `text-lg` | 1.125rem | 18px | **Subheadings** |
-| base | `text-base` | 1rem | 16px | **Body text (default)** |
-| sm | `text-sm` | 0.875rem | 14px | **Secondary text, captions** |
-| xs | `text-xs` | 0.75rem | 12px | **Labels, helper text** |
+| Size | Class       | rem      | px    | Use Case                     |
+| ---- | ----------- | -------- | ----- | ---------------------------- |
+| 9xl  | `text-9xl`  | 8rem     | 128px | Hero text (rare)             |
+| 8xl  | `text-8xl`  | 6rem     | 96px  | Hero text (rare)             |
+| 7xl  | `text-7xl`  | 4.5rem   | 72px  | Hero text (rare)             |
+| 6xl  | `text-6xl`  | 3.75rem  | 60px  | Hero text (rare)             |
+| 5xl  | `text-5xl`  | 3rem     | 48px  | Landing page H1              |
+| 4xl  | `text-4xl`  | 2.25rem  | 36px  | Page H1                      |
+| 3xl  | `text-3xl`  | 1.875rem | 30px  | **Page titles**              |
+| 2xl  | `text-2xl`  | 1.5rem   | 24px  | **Section headings**         |
+| xl   | `text-xl`   | 1.25rem  | 20px  | **Card titles**              |
+| lg   | `text-lg`   | 1.125rem | 18px  | **Subheadings**              |
+| base | `text-base` | 1rem     | 16px  | **Body text (default)**      |
+| sm   | `text-sm`   | 0.875rem | 14px  | **Secondary text, captions** |
+| xs   | `text-xs`   | 0.75rem  | 12px  | **Labels, helper text**      |
 
 **Bold = most commonly used**
 
@@ -479,13 +476,13 @@ What's the purpose?
 
 ### Font Weights
 
-| Weight | Class | Numeric | Use Case |
-|--------|-------|---------|----------|
-| Bold | `font-bold` | 700 | **Headings, emphasis** |
-| Semibold | `font-semibold` | 600 | **Subheadings, buttons** |
-| Medium | `font-medium` | 500 | **Labels, menu items** |
-| Normal | `font-normal` | 400 | **Body text (default)** |
-| Light | `font-light` | 300 | De-emphasized text |
+| Weight   | Class           | Numeric | Use Case                 |
+| -------- | --------------- | ------- | ------------------------ |
+| Bold     | `font-bold`     | 700     | **Headings, emphasis**   |
+| Semibold | `font-semibold` | 600     | **Subheadings, buttons** |
+| Medium   | `font-medium`   | 500     | **Labels, menu items**   |
+| Normal   | `font-normal`   | 400     | **Body text (default)**  |
+| Light    | `font-light`    | 300     | De-emphasized text       |
 
 **Bold = most commonly used**
 
@@ -494,35 +491,37 @@ What's the purpose?
 ### Typography Patterns
 
 #### Page Title
+
 ```tsx
 <h1 className="text-3xl font-bold">Page Title</h1>
 ```
 
 #### Section Heading
+
 ```tsx
 <h2 className="text-2xl font-semibold mb-4">Section Heading</h2>
 ```
 
 #### Card Title
+
 ```tsx
 <CardTitle className="text-xl font-semibold">Card Title</CardTitle>
 ```
 
 #### Body Text
+
 ```tsx
-<p className="text-base text-foreground">
-  Regular paragraph text uses the default text-base size.
-</p>
+<p className="text-base text-foreground">Regular paragraph text uses the default text-base size.</p>
 ```
 
 #### Secondary Text
+
 ```tsx
-<p className="text-sm text-muted-foreground">
-  Helper text, timestamps, captions
-</p>
+<p className="text-sm text-muted-foreground">Helper text, timestamps, captions</p>
 ```
 
 #### Label
+
 ```tsx
 <Label htmlFor="email" className="text-sm font-medium">
   Email Address
@@ -533,16 +532,17 @@ What's the purpose?
 
 ### Line Height
 
-| Class | Value | Use Case |
-|-------|-------|----------|
-| `leading-none` | 1 | Headings (rare) |
-| `leading-tight` | 1.25 | **Headings** |
-| `leading-snug` | 1.375 | Dense text |
-| `leading-normal` | 1.5 | **Body text (default)** |
-| `leading-relaxed` | 1.625 | Comfortable reading |
-| `leading-loose` | 2 | Very relaxed (rare) |
+| Class             | Value | Use Case                |
+| ----------------- | ----- | ----------------------- |
+| `leading-none`    | 1     | Headings (rare)         |
+| `leading-tight`   | 1.25  | **Headings**            |
+| `leading-snug`    | 1.375 | Dense text              |
+| `leading-normal`  | 1.5   | **Body text (default)** |
+| `leading-relaxed` | 1.625 | Comfortable reading     |
+| `leading-loose`   | 2     | Very relaxed (rare)     |
 
 **Usage**:
+
 ```tsx
 // Heading
 <h1 className="text-3xl font-bold leading-tight">
@@ -622,23 +622,23 @@ Tailwind uses a **0.25rem (4px) base unit**:
 
 ### Spacing Tokens
 
-| Token | rem | Pixels | Use Case |
-|-------|-----|--------|----------|
-| `0` | 0 | 0px | No spacing |
-| `px` | - | 1px | Borders, dividers |
-| `0.5` | 0.125rem | 2px | Very tight |
-| `1` | 0.25rem | 4px | Icon gaps |
-| `2` | 0.5rem | 8px | **Tight spacing** (label → input) |
-| `3` | 0.75rem | 12px | Component padding |
-| `4` | 1rem | 16px | **Standard spacing** (form fields) |
-| `5` | 1.25rem | 20px | Medium spacing |
-| `6` | 1.5rem | 24px | **Section spacing** (cards) |
-| `8` | 2rem | 32px | **Large gaps** |
-| `10` | 2.5rem | 40px | Very large gaps |
-| `12` | 3rem | 48px | **Section dividers** |
-| `16` | 4rem | 64px | **Page sections** |
-| `20` | 5rem | 80px | Extra large |
-| `24` | 6rem | 96px | Huge spacing |
+| Token | rem      | Pixels | Use Case                           |
+| ----- | -------- | ------ | ---------------------------------- |
+| `0`   | 0        | 0px    | No spacing                         |
+| `px`  | -        | 1px    | Borders, dividers                  |
+| `0.5` | 0.125rem | 2px    | Very tight                         |
+| `1`   | 0.25rem  | 4px    | Icon gaps                          |
+| `2`   | 0.5rem   | 8px    | **Tight spacing** (label → input)  |
+| `3`   | 0.75rem  | 12px   | Component padding                  |
+| `4`   | 1rem     | 16px   | **Standard spacing** (form fields) |
+| `5`   | 1.25rem  | 20px   | Medium spacing                     |
+| `6`   | 1.5rem   | 24px   | **Section spacing** (cards)        |
+| `8`   | 2rem     | 32px   | **Large gaps**                     |
+| `10`  | 2.5rem   | 40px   | Very large gaps                    |
+| `12`  | 3rem     | 48px   | **Section dividers**               |
+| `16`  | 4rem     | 64px   | **Page sections**                  |
+| `20`  | 5rem     | 80px   | Extra large                        |
+| `24`  | 6rem     | 96px   | Huge spacing                       |
 
 **Bold = most commonly used**
 
@@ -660,18 +660,18 @@ Tailwind uses a **0.25rem (4px) base unit**:
 
 ### Max Width Scale
 
-| Class | Pixels | Use Case |
-|-------|--------|----------|
-| `max-w-xs` | 320px | Tiny cards |
-| `max-w-sm` | 384px | Small cards |
-| `max-w-md` | 448px | **Forms** |
-| `max-w-lg` | 512px | **Modals** |
-| `max-w-xl` | 576px | Medium content |
-| `max-w-2xl` | 672px | **Article content** |
-| `max-w-3xl` | 768px | Documentation |
-| `max-w-4xl` | 896px | **Wide layouts** |
-| `max-w-5xl` | 1024px | Extra wide |
-| `max-w-6xl` | 1152px | Very wide |
+| Class       | Pixels | Use Case            |
+| ----------- | ------ | ------------------- |
+| `max-w-xs`  | 320px  | Tiny cards          |
+| `max-w-sm`  | 384px  | Small cards         |
+| `max-w-md`  | 448px  | **Forms**           |
+| `max-w-lg`  | 512px  | **Modals**          |
+| `max-w-xl`  | 576px  | Medium content      |
+| `max-w-2xl` | 672px  | **Article content** |
+| `max-w-3xl` | 768px  | Documentation       |
+| `max-w-4xl` | 896px  | **Wide layouts**    |
+| `max-w-5xl` | 1024px | Extra wide          |
+| `max-w-6xl` | 1152px | Very wide           |
 | `max-w-7xl` | 1280px | **Full page width** |
 
 **Bold = most commonly used**
@@ -729,27 +729,28 @@ Tailwind uses a **0.25rem (4px) base unit**:
 Professional shadow system for depth and elevation:
 
 ```css
---shadow-xs:   0 1px 3px 0px hsl(0 0% 0% / 0.05)
---shadow-sm:   0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)
---shadow:      0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)
---shadow-md:   0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10)
---shadow-lg:   0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10)
---shadow-xl:   0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10)
---shadow-2xl:  0 1px 3px 0px hsl(0 0% 0% / 0.25)
+--shadow-xs:
+  0 1px 3px 0px hsl(0 0% 0% / 0.05) --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+  0 1px 2px -1px hsl(0 0% 0% / 0.1) --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+  0 1px 2px -1px hsl(0 0% 0% / 0.1) --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+  0 2px 4px -1px hsl(0 0% 0% / 0.1) --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+  0 4px 6px -1px hsl(0 0% 0% / 0.1) --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+  0 8px 10px -1px hsl(0 0% 0% / 0.1) --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
 ```
 
 ### Shadow Usage
 
-| Elevation | Class | Use Case |
-|-----------|-------|----------|
-| Base | No shadow | Buttons, inline elements |
-| Low | `shadow-sm` | **Cards, panels** |
-| Medium | `shadow-md` | **Dropdowns, tooltips** |
-| High | `shadow-lg` | **Modals, popovers** |
-| Highest | `shadow-xl` | Notifications, floating elements |
-| Maximum | `shadow-2xl` | Dialogs (rare) |
+| Elevation | Class        | Use Case                         |
+| --------- | ------------ | -------------------------------- |
+| Base      | No shadow    | Buttons, inline elements         |
+| Low       | `shadow-sm`  | **Cards, panels**                |
+| Medium    | `shadow-md`  | **Dropdowns, tooltips**          |
+| High      | `shadow-lg`  | **Modals, popovers**             |
+| Highest   | `shadow-xl`  | Notifications, floating elements |
+| Maximum   | `shadow-2xl` | Dialogs (rare)                   |
 
 **Usage**:
+
 ```tsx
 // Card with subtle shadow
 <Card className="shadow-sm">Card content</Card>
@@ -779,26 +780,24 @@ Professional shadow system for depth and elevation:
 Consistent rounded corners across the application:
 
 ```css
---radius: 0.375rem;  /* 6px - base */
+--radius: 0.375rem; /* 6px - base */
 
---radius-sm: calc(var(--radius) - 4px)  /* 2px */
---radius-md: calc(var(--radius) - 2px)  /* 4px */
---radius-lg: var(--radius)              /* 6px */
---radius-xl: calc(var(--radius) + 4px)  /* 10px */
+--radius-sm: calc(var(--radius) - 4px) /* 2px */ --radius-md: calc(var(--radius) - 2px) /* 4px */
+  --radius-lg: var(--radius) /* 6px */ --radius-xl: calc(var(--radius) + 4px) /* 10px */;
 ```
 
 ### Border Radius Scale
 
-| Token | Class | Pixels | Use Case |
-|-------|-------|--------|----------|
-| None | `rounded-none` | 0px | Square elements |
-| Small | `rounded-sm` | 2px | **Tags, small badges** |
-| Medium | `rounded-md` | 4px | **Inputs, small buttons** |
-| Large | `rounded-lg` | 6px | **Cards, buttons (default)** |
-| XL | `rounded-xl` | 10px | **Large cards, modals** |
-| 2XL | `rounded-2xl` | 16px | Hero sections |
-| 3XL | `rounded-3xl` | 24px | Very rounded |
-| Full | `rounded-full` | 9999px | **Pills, avatars, icon buttons** |
+| Token  | Class          | Pixels | Use Case                         |
+| ------ | -------------- | ------ | -------------------------------- |
+| None   | `rounded-none` | 0px    | Square elements                  |
+| Small  | `rounded-sm`   | 2px    | **Tags, small badges**           |
+| Medium | `rounded-md`   | 4px    | **Inputs, small buttons**        |
+| Large  | `rounded-lg`   | 6px    | **Cards, buttons (default)**     |
+| XL     | `rounded-xl`   | 10px   | **Large cards, modals**          |
+| 2XL    | `rounded-2xl`  | 16px   | Hero sections                    |
+| 3XL    | `rounded-3xl`  | 24px   | Very rounded                     |
+| Full   | `rounded-full` | 9999px | **Pills, avatars, icon buttons** |
 
 **Bold = most commonly used**
 
@@ -854,6 +853,7 @@ Consistent rounded corners across the application:
 ### Most Used Tokens
 
 **Colors**:
+
 - `bg-primary text-primary-foreground` - CTAs
 - `bg-destructive text-destructive-foreground` - Delete/errors
 - `bg-muted text-muted-foreground` - Disabled/subtle
@@ -862,6 +862,7 @@ Consistent rounded corners across the application:
 - `border-border` - Borders
 
 **Typography**:
+
 - `text-3xl font-bold` - Page titles
 - `text-2xl font-semibold` - Section headings
 - `text-xl font-semibold` - Card titles
@@ -869,6 +870,7 @@ Consistent rounded corners across the application:
 - `text-sm text-muted-foreground` - Secondary text
 
 **Spacing**:
+
 - `p-4` - Standard padding (16px)
 - `p-6` - Card padding (24px)
 - `gap-4` - Standard gap (16px)
@@ -877,6 +879,7 @@ Consistent rounded corners across the application:
 - `space-y-6` - Section spacing (24px)
 
 **Shadows & Radius**:
+
 - `shadow-sm` - Cards
 - `shadow-md` - Dropdowns
 - `shadow-lg` - Modals
@@ -896,12 +899,14 @@ Consistent rounded corners across the application:
 ---
 
 **Related Documentation:**
+
 - [Quick Start](./00-quick-start.md) - Essential patterns
 - [Components](./02-components.md) - shadcn/ui library
 - [Spacing Philosophy](./04-spacing-philosophy.md) - Margin vs padding strategy
 - [Accessibility](./07-accessibility.md) - WCAG compliance
 
 **External Resources:**
+
 - [OKLCH Color Picker](https://oklch.com)
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
diff --git a/frontend/docs/design-system/02-components.md b/frontend/docs/design-system/02-components.md
index d23e7a7..c64b66e 100644
--- a/frontend/docs/design-system/02-components.md
+++ b/frontend/docs/design-system/02-components.md
@@ -24,6 +24,7 @@
 We use **[shadcn/ui](https://ui.shadcn.com)**, a collection of accessible, customizable components built on **Radix UI primitives**.
 
 **Key features:**
+
 - ✅ **Accessible** - WCAG AA compliant, keyboard navigation, screen reader support
 - ✅ **Customizable** - Components are copied into your project (not npm dependencies)
 - ✅ **Composable** - Build complex UIs from simple primitives
@@ -41,6 +42,7 @@ npx shadcn@latest add
 ```
 
 **Installed components** (in `/src/components/ui/`):
+
 - alert, avatar, badge, button, card, checkbox, dialog
 - dropdown-menu, input, label, popover, select, separator
 - sheet, skeleton, table, tabs, textarea, toast
@@ -82,16 +84,17 @@ import { Button } from '@/components/ui/button';
 
 **When to use each variant:**
 
-| Variant | Use Case | Example |
-|---------|----------|---------|
-| `default` | Primary actions, CTAs | Save, Submit, Create |
-| `secondary` | Secondary actions | Cancel, Back |
-| `outline` | Alternative actions | View Details, Edit |
-| `ghost` | Subtle actions in lists | Icon buttons in table rows |
-| `link` | In-text actions | Read more, Learn more |
-| `destructive` | Delete, remove actions | Delete Account, Remove |
+| Variant       | Use Case                | Example                    |
+| ------------- | ----------------------- | -------------------------- |
+| `default`     | Primary actions, CTAs   | Save, Submit, Create       |
+| `secondary`   | Secondary actions       | Cancel, Back               |
+| `outline`     | Alternative actions     | View Details, Edit         |
+| `ghost`       | Subtle actions in lists | Icon buttons in table rows |
+| `link`        | In-text actions         | Read more, Learn more      |
+| `destructive` | Delete, remove actions  | Delete Account, Remove     |
 
 **Accessibility**:
+
 - Always add `aria-label` for icon-only buttons
 - Use `disabled` for unavailable actions (not hidden)
 - Loading state prevents double-submission
@@ -162,6 +165,7 @@ import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 ```
 
 **Pattern: User menu**:
+
 ```tsx
 <DropdownMenu>
   <DropdownMenuTrigger>
@@ -323,6 +327,7 @@ import { Label } from '@/components/ui/label';
 ```
 
 **Input types:**
+
 - `text` - Default text input
 - `email` - Email address
 - `password` - Password field
@@ -530,6 +535,7 @@ import { AlertCircle, CheckCircle, Info } from 'lucide-react';
 ```
 
 **When to use:**
+
 - ✅ Form-level errors
 - ✅ Important warnings
 - ✅ Success confirmations (inline)
@@ -557,14 +563,11 @@ toast.info('Processing your request...');
 toast.warning('This action cannot be undone');
 
 // Loading (with promise)
-toast.promise(
-  saveChanges(),
-  {
-    loading: 'Saving changes...',
-    success: 'Changes saved!',
-    error: 'Failed to save changes',
-  }
-);
+toast.promise(saveChanges(), {
+  loading: 'Saving changes...',
+  success: 'Changes saved!',
+  error: 'Failed to save changes',
+});
 
 // Custom with action
 toast('Event has been created', {
@@ -580,6 +583,7 @@ toast.dismiss();
 ```
 
 **When to use:**
+
 - ✅ Action confirmations (saved, deleted)
 - ✅ Background task updates
 - ✅ Temporary errors
@@ -629,12 +633,11 @@ import { Skeleton } from '@/components/ui/skeleton';
 ```
 
 **Pattern: Loading states**:
+
 ```tsx
-{isLoading ? (
-  <Skeleton className="h-48 w-full" />
-) : (
-  <div>{content}</div>
-)}
+{
+  isLoading ? <Skeleton className="h-48 w-full" /> : <div>{content}</div>;
+}
 ```
 
 ---
@@ -654,7 +657,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogTrigger,
-  DialogClose
+  DialogClose,
 } from '@/components/ui/dialog';
 
 // Basic dialog
@@ -678,7 +681,7 @@ import {
       </Button>
     </DialogFooter>
   </DialogContent>
-</Dialog>
+</Dialog>;
 
 // Controlled dialog
 const [isOpen, setIsOpen] = useState(false);
@@ -695,10 +698,11 @@ const [isOpen, setIsOpen] = useState(false);
       }}
     />
   </DialogContent>
-</Dialog>
+</Dialog>;
 ```
 
 **Accessibility:**
+
 - Escape key closes dialog
 - Focus trapped inside dialog
 - Returns focus to trigger on close
@@ -916,7 +920,7 @@ import {
   TableHead,
   TableRow,
   TableCell,
-  TableCaption
+  TableCaption,
 } from '@/components/ui/table';
 
 <Table>
@@ -945,7 +949,7 @@ import {
       <TableCell className="text-right">$2,500.00</TableCell>
     </TableRow>
   </TableFooter>
-</Table>
+</Table>;
 ```
 
 **For advanced tables** (sorting, filtering, pagination), use **TanStack Table** with react-hook-form.
@@ -1014,12 +1018,14 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
         </TableRow>
       </TableHeader>
       <TableBody>
-        {users.map(user => (
+        {users.map((user) => (
           <TableRow key={user.id}>
             <TableCell>{user.name}</TableCell>
             <TableCell>{user.email}</TableCell>
             <TableCell>
-              <Button variant="ghost" size="sm">Edit</Button>
+              <Button variant="ghost" size="sm">
+                Edit
+              </Button>
             </TableCell>
           </TableRow>
         ))}
@@ -1041,9 +1047,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
   <DialogContent>
     <DialogHeader>
       <DialogTitle>Create New User</DialogTitle>
-      <DialogDescription>
-        Add a new user to the system
-      </DialogDescription>
+      <DialogDescription>Add a new user to the system</DialogDescription>
     </DialogHeader>
     <form onSubmit={handleSubmit} className="space-y-4">
       <div className="space-y-2">
@@ -1113,7 +1117,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 ```tsx
 <Table>
   <TableBody>
-    {users.map(user => (
+    {users.map((user) => (
       <TableRow key={user.id}>
         <TableCell>{user.name}</TableCell>
         <TableCell>{user.email}</TableCell>
@@ -1134,10 +1138,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
                 View Details
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onClick={() => handleDelete(user)}
-                className="text-destructive"
-              >
+              <DropdownMenuItem onClick={() => handleDelete(user)} className="text-destructive">
                 <Trash className="mr-2 h-4 w-4" />
                 Delete
               </DropdownMenuItem>
@@ -1187,6 +1188,7 @@ Need switchable panels? → Tabs
 ### Component Variants Quick Reference
 
 **Button**:
+
 - `default` - Primary action
 - `secondary` - Secondary action
 - `outline` - Alternative action
@@ -1195,12 +1197,14 @@ Need switchable panels? → Tabs
 - `destructive` - Delete/remove
 
 **Badge**:
+
 - `default` - Blue (new, active)
 - `secondary` - Gray (draft, inactive)
 - `outline` - Bordered (pending)
 - `destructive` - Red (critical, error)
 
 **Alert**:
+
 - `default` - Info
 - `destructive` - Error
 
@@ -1216,12 +1220,14 @@ Need switchable panels? → Tabs
 ---
 
 **Related Documentation:**
+
 - [Quick Start](./00-quick-start.md) - Essential patterns
 - [Foundations](./01-foundations.md) - Colors, typography, spacing
 - [Layouts](./03-layouts.md) - Layout patterns
 - [Forms](./06-forms.md) - Form validation and patterns
 
 **External Resources:**
+
 - [shadcn/ui Documentation](https://ui.shadcn.com)
 - [Radix UI Primitives](https://www.radix-ui.com)
 
diff --git a/frontend/docs/design-system/03-layouts.md b/frontend/docs/design-system/03-layouts.md
index 07c77ce..8856e1d 100644
--- a/frontend/docs/design-system/03-layouts.md
+++ b/frontend/docs/design-system/03-layouts.md
@@ -36,16 +36,16 @@ Use this flowchart to choose between Grid and Flex:
 
 ### Quick Rules
 
-| Scenario | Solution |
-|----------|----------|
-| **Equal-width columns** | Grid (`grid grid-cols-3`) |
-| **Flexible item sizes** | Flex (`flex gap-4`) |
-| **2D layout (rows + cols)** | Grid (`grid grid-cols-2 grid-rows-3`) |
-| **1D layout (row OR col)** | Flex (`flex` or `flex flex-col`) |
-| **Card grid** | Grid (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3`) |
-| **Navbar items** | Flex (`flex items-center gap-4`) |
-| **Sidebar + Content** | Flex (`flex gap-6`) |
-| **Form fields** | Flex column (`flex flex-col gap-4` or `space-y-4`) |
+| Scenario                    | Solution                                                |
+| --------------------------- | ------------------------------------------------------- |
+| **Equal-width columns**     | Grid (`grid grid-cols-3`)                               |
+| **Flexible item sizes**     | Flex (`flex gap-4`)                                     |
+| **2D layout (rows + cols)** | Grid (`grid grid-cols-2 grid-rows-3`)                   |
+| **1D layout (row OR col)**  | Flex (`flex` or `flex flex-col`)                        |
+| **Card grid**               | Grid (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3`) |
+| **Navbar items**            | Flex (`flex items-center gap-4`)                        |
+| **Sidebar + Content**       | Flex (`flex gap-6`)                                     |
+| **Form fields**             | Flex column (`flex flex-col gap-4` or `space-y-4`)      |
 
 ---
 
@@ -68,15 +68,14 @@ These 5 patterns cover 80% of all layout needs. Master these first.
       <CardHeader>
         <CardTitle>Section Title</CardTitle>
       </CardHeader>
-      <CardContent>
-        Page content goes here
-      </CardContent>
+      <CardContent>Page content goes here</CardContent>
     </Card>
   </div>
 </div>
 ```
 
 **Key Features:**
+
 - `container` - Responsive container with max-width
 - `mx-auto` - Center horizontally
 - `px-4` - Horizontal padding (mobile-friendly)
@@ -85,6 +84,7 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 - `space-y-6` - Vertical spacing between children
 
 **When to use:**
+
 - Blog posts
 - Documentation pages
 - Settings pages
@@ -103,7 +103,7 @@ These 5 patterns cover 80% of all layout needs. Master these first.
   <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
 
   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    {items.map(item => (
+    {items.map((item) => (
       <Card key={item.id}>
         <CardHeader>
           <CardTitle>{item.title}</CardTitle>
@@ -119,11 +119,13 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 ```
 
 **Responsive behavior:**
+
 - **Mobile** (`< 768px`): 1 column
 - **Tablet** (`≥ 768px`): 2 columns
 - **Desktop** (`≥ 1024px`): 3 columns
 
 **Key Features:**
+
 - `grid` - Use CSS Grid
 - `grid-cols-1` - Default: 1 column (mobile-first)
 - `md:grid-cols-2` - 2 columns on tablet
@@ -131,6 +133,7 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 - `gap-6` - Consistent spacing between items
 
 **When to use:**
+
 - Dashboards
 - Product grids
 - Image galleries
@@ -171,17 +174,20 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 ```
 
 **Key Features:**
+
 - `max-w-md` - Constrain form width (448px max)
 - `mx-auto` - Center the form
 - `space-y-4` - Vertical spacing between fields
 - `w-full` - Full-width button
 
 **Form width guidelines:**
+
 - **Short forms** (login, signup): `max-w-md` (448px)
 - **Medium forms** (profile, settings): `max-w-lg` (512px)
 - **Long forms** (checkout): `max-w-2xl` (672px)
 
 **When to use:**
+
 - Login/signup forms
 - Contact forms
 - Settings forms
@@ -220,6 +226,7 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 ```
 
 **Key Features:**
+
 - `flex` - Horizontal layout
 - `w-64` - Fixed sidebar width (256px)
 - `flex-1` - Main content takes remaining space
@@ -249,6 +256,7 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 ```
 
 **When to use:**
+
 - Admin dashboards
 - Settings pages
 - Documentation sites
@@ -277,17 +285,20 @@ These 5 patterns cover 80% of all layout needs. Master these first.
 ```
 
 **Key Features:**
+
 - `max-w-2xl` - Optimal reading width (672px)
 - `mx-auto` - Center content
 - `prose` - Typography styles (if using @tailwindcss/typography)
 
 **Width recommendations:**
+
 - **Articles/Blogs**: `max-w-2xl` (672px)
 - **Documentation**: `max-w-3xl` (768px)
 - **Landing pages**: `max-w-4xl` (896px) or wider
 - **Forms**: `max-w-md` (448px)
 
 **When to use:**
+
 - Blog posts
 - Articles
 - Documentation
@@ -327,13 +338,13 @@ Always start with mobile layout, then enhance for larger screens:
 
 ### Breakpoints
 
-| Breakpoint | Min Width | Typical Use |
-|------------|-----------|-------------|
-| `sm:` | 640px | Large phones, small tablets |
-| `md:` | 768px | Tablets |
-| `lg:` | 1024px | Laptops, desktops |
-| `xl:` | 1280px | Large desktops |
-| `2xl:` | 1536px | Extra large screens |
+| Breakpoint | Min Width | Typical Use                 |
+| ---------- | --------- | --------------------------- |
+| `sm:`      | 640px     | Large phones, small tablets |
+| `md:`      | 768px     | Tablets                     |
+| `lg:`      | 1024px    | Laptops, desktops           |
+| `xl:`      | 1280px    | Large desktops              |
+| `2xl:`     | 1536px    | Extra large screens         |
 
 ### Responsive Grid Columns
 
@@ -457,12 +468,8 @@ grid-cols-1 lg:grid-cols-3
 ```tsx
 // 2/3 - 1/3 split
 <div className="grid grid-cols-3 gap-6">
-  <div className="col-span-2">
-    Main content (2/3 width)
-  </div>
-  <div className="col-span-1">
-    Sidebar (1/3 width)
-  </div>
+  <div className="col-span-2">Main content (2/3 width)</div>
+  <div className="col-span-1">Sidebar (1/3 width)</div>
 </div>
 ```
 
@@ -482,12 +489,8 @@ grid-cols-1 lg:grid-cols-3
 
 ```tsx
 <div className="flex gap-6">
-  <aside className="sticky top-6 h-fit w-64">
-    {/* Stays in view while scrolling */}
-  </aside>
-  <main className="flex-1">
-    {/* Scrollable content */}
-  </main>
+  <aside className="sticky top-6 h-fit w-64">{/* Stays in view while scrolling */}</aside>
+  <main className="flex-1">{/* Scrollable content */}</main>
 </div>
 ```
 
@@ -579,6 +582,7 @@ w-full px-4
 ---
 
 **Related Documentation:**
+
 - [Spacing Philosophy](./04-spacing-philosophy.md) - When to use margin vs padding vs gap
 - [Foundations](./01-foundations.md) - Spacing tokens and scale
 - [Quick Start](./00-quick-start.md) - Essential patterns
diff --git a/frontend/docs/design-system/04-spacing-philosophy.md b/frontend/docs/design-system/04-spacing-philosophy.md
index 49748f4..c10bc5e 100644
--- a/frontend/docs/design-system/04-spacing-philosophy.md
+++ b/frontend/docs/design-system/04-spacing-philosophy.md
@@ -21,6 +21,7 @@
 These 5 rules eliminate 90% of spacing inconsistencies:
 
 ### Rule 1: Parent Controls Children
+
 **Children don't add their own margins. The parent controls spacing between siblings.**
 
 ```tsx
@@ -40,6 +41,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ```
 
 **Why this matters:**
+
 - Eliminates "last child" edge cases
 - Makes components reusable (they work in any context)
 - Changes propagate from one place (parent)
@@ -48,6 +50,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ---
 
 ### Rule 2: Use Gap for Siblings
+
 **For flex and grid layouts, use `gap-*` to space siblings.**
 
 ```tsx
@@ -73,6 +76,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ---
 
 ### Rule 3: Use Padding for Internal Spacing
+
 **Padding is for spacing _inside_ a component, between the border and content.**
 
 ```tsx
@@ -91,6 +95,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ---
 
 ### Rule 4: Use space-y for Vertical Stacks
+
 **For vertical stacks (not flex/grid), use `space-y-*` utility.**
 
 ```tsx
@@ -110,6 +115,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ```
 
 **How space-y works:**
+
 ```css
 /* space-y-4 applies margin-top to all children except first */
 .space-y-4 > * + * {
@@ -120,6 +126,7 @@ These 5 rules eliminate 90% of spacing inconsistencies:
 ---
 
 ### Rule 5: Margins Only for Exceptions
+
 **Use margin only when a specific child needs different spacing from its siblings.**
 
 ```tsx
@@ -151,18 +158,19 @@ When children control their own margins:
 ```tsx
 // ❌ ANTI-PATTERN
 function TodoItem({ className }: { className?: string }) {
-  return <div className={cn("mb-4", className)}>Todo</div>;
+  return <div className={cn('mb-4', className)}>Todo</div>;
 }
 
 // Usage
 <div>
-  <TodoItem />  {/* Has mb-4 */}
-  <TodoItem />  {/* Has mb-4 */}
-  <TodoItem />  {/* Has mb-4 - unwanted margin at bottom! */}
-</div>
+  <TodoItem /> {/* Has mb-4 */}
+  <TodoItem /> {/* Has mb-4 */}
+  <TodoItem /> {/* Has mb-4 - unwanted margin at bottom! */}
+</div>;
 ```
 
 **Problems:**
+
 1. ❌ Last item has unwanted margin
 2. ❌ Can't change spacing without modifying component
 3. ❌ Margin collapsing creates unpredictable spacing
@@ -199,6 +207,7 @@ function TodoItem({ className }: { className?: string }) {
 ```
 
 **Benefits:**
+
 1. ✅ No edge cases (last child, first child, only child)
 2. ✅ Spacing controlled in one place
 3. ✅ Component works in any layout context
@@ -265,6 +274,7 @@ Use this flowchart to choose the right spacing method:
 ```
 
 **Spacing breakdown:**
+
 - `space-y-4` on form: 16px between field groups
 - `space-y-2` on field group: 8px between label and input
 - No margins on children
@@ -288,6 +298,7 @@ Use this flowchart to choose the right spacing method:
 ```
 
 **Why gap over space-x:**
+
 - Works with `flex-wrap`
 - Works with `flex-col` (changes direction)
 - Consistent spacing in all directions
@@ -306,6 +317,7 @@ Use this flowchart to choose the right spacing method:
 ```
 
 **Why gap:**
+
 - Consistent spacing between rows and columns
 - Works with responsive grid changes
 - No edge cases (first row, last column, etc.)
@@ -332,6 +344,7 @@ Use this flowchart to choose the right spacing method:
 ```
 
 **Spacing breakdown:**
+
 - `p-6` on Card: 24px internal padding
 - `space-y-4` on CardContent: 16px between paragraphs
 - `pt-4` on CardFooter: Additional top padding for visual separation
@@ -364,6 +377,7 @@ Use this flowchart to choose the right spacing method:
 ```
 
 **Spacing breakdown:**
+
 - `px-4`: Horizontal padding (prevents edge touching)
 - `py-8`: Vertical padding (top and bottom spacing)
 - `space-y-6`: 24px between sections
@@ -376,25 +390,28 @@ Use this flowchart to choose the right spacing method:
 ### Example 1: Button Group
 
 #### ❌ Before (Child-Controlled)
+
 ```tsx
 function ActionButton({ children, className }: Props) {
-  return <Button className={cn("mr-4", className)}>{children}</Button>;
+  return <Button className={cn('mr-4', className)}>{children}</Button>;
 }
 
 // Usage
 <div className="flex">
   <ActionButton>Cancel</ActionButton>
   <ActionButton>Save</ActionButton>
-  <ActionButton>Delete</ActionButton>  {/* Unwanted mr-4 */}
-</div>
+  <ActionButton>Delete</ActionButton> {/* Unwanted mr-4 */}
+</div>;
 ```
 
 **Problems:**
+
 - Last button has unwanted margin
 - Can't change spacing without modifying component
 - Hard to use in vertical layout
 
 #### ✅ After (Parent-Controlled)
+
 ```tsx
 function ActionButton({ children, className }: Props) {
   return <Button className={className}>{children}</Button>;
@@ -415,6 +432,7 @@ function ActionButton({ children, className }: Props) {
 ```
 
 **Benefits:**
+
 - No edge cases
 - Reusable in any layout
 - Easy to change spacing
@@ -424,6 +442,7 @@ function ActionButton({ children, className }: Props) {
 ### Example 2: List Items
 
 #### ❌ Before (Child-Controlled)
+
 ```tsx
 function ListItem({ title, description }: Props) {
   return (
@@ -437,16 +456,18 @@ function ListItem({ title, description }: Props) {
 <div>
   <ListItem title="Item 1" description="..." />
   <ListItem title="Item 2" description="..." />
-  <ListItem title="Item 3" description="..." />  {/* Unwanted mb-6 */}
-</div>
+  <ListItem title="Item 3" description="..." /> {/* Unwanted mb-6 */}
+</div>;
 ```
 
 **Problems:**
+
 - Last item has unwanted bottom margin
 - Can't change list spacing without modifying component
 - Internal `mb-2` hard to override
 
 #### ✅ After (Parent-Controlled)
+
 ```tsx
 function ListItem({ title, description }: Props) {
   return (
@@ -473,6 +494,7 @@ function ListItem({ title, description }: Props) {
 ```
 
 **Benefits:**
+
 - No unwanted margins
 - Internal spacing controlled by `space-y-2`
 - Reusable with different spacings
@@ -482,6 +504,7 @@ function ListItem({ title, description }: Props) {
 ### Example 3: Form Fields
 
 #### ❌ Before (Mixed Strategy)
+
 ```tsx
 <form>
   <div className="mb-4">
@@ -494,16 +517,20 @@ function ListItem({ title, description }: Props) {
     <Input id="email" className="mt-2" />
   </div>
 
-  <Button type="submit" className="mt-6">Submit</Button>
+  <Button type="submit" className="mt-6">
+    Submit
+  </Button>
 </form>
 ```
 
 **Problems:**
+
 - Spacing scattered across children
 - Hard to change consistently
 - Have to remember `mt-6` for button
 
 #### ✅ After (Parent-Controlled)
+
 ```tsx
 <form className="space-y-4">
   <div className="space-y-2">
@@ -516,11 +543,14 @@ function ListItem({ title, description }: Props) {
     <Input id="email" />
   </div>
 
-  <Button type="submit" className="mt-2">Submit</Button>
+  <Button type="submit" className="mt-2">
+    Submit
+  </Button>
 </form>
 ```
 
 **Benefits:**
+
 - Spacing controlled in 2 places: form (`space-y-4`) and field groups (`space-y-2`)
 - Easy to change all field spacing at once
 - Consistent and predictable
@@ -533,18 +563,20 @@ function ListItem({ title, description }: Props) {
 
 ```tsx
 // ❌ WRONG
-{items.map((item, index) => (
-  <Card key={item.id} className={index < items.length - 1 ? "mb-4" : ""}>
-    {item.name}
-  </Card>
-))}
+{
+  items.map((item, index) => (
+    <Card key={item.id} className={index < items.length - 1 ? 'mb-4' : ''}>
+      {item.name}
+    </Card>
+  ));
+}
 
 // ✅ CORRECT
 <div className="space-y-4">
-  {items.map(item => (
+  {items.map((item) => (
     <Card key={item.id}>{item.name}</Card>
   ))}
-</div>
+</div>;
 ```
 
 ---
@@ -564,6 +596,7 @@ function ListItem({ title, description }: Props) {
 ```
 
 **Why negative margins are bad:**
+
 - Indicates broken spacing strategy
 - Hard to maintain
 - Creates coupling between components
@@ -618,26 +651,26 @@ function ListItem({ title, description }: Props) {
 
 ### Spacing Method Cheat Sheet
 
-| Use Case | Method | Example |
-|----------|--------|---------|
-| **Flex siblings** | `gap-*` | `flex gap-4` |
-| **Grid siblings** | `gap-*` | `grid gap-6` |
-| **Vertical stack** | `space-y-*` | `space-y-4` |
-| **Horizontal stack** | `space-x-*` | `space-x-2` |
-| **Inside component** | `p-*` | `p-6` |
-| **One child exception** | `m-*` | `mt-8` |
+| Use Case                | Method      | Example      |
+| ----------------------- | ----------- | ------------ |
+| **Flex siblings**       | `gap-*`     | `flex gap-4` |
+| **Grid siblings**       | `gap-*`     | `grid gap-6` |
+| **Vertical stack**      | `space-y-*` | `space-y-4`  |
+| **Horizontal stack**    | `space-x-*` | `space-x-2`  |
+| **Inside component**    | `p-*`       | `p-6`        |
+| **One child exception** | `m-*`       | `mt-8`       |
 
 ### Common Spacing Values
 
-| Class | Pixels | Usage |
-|-------|--------|-------|
-| `gap-2` or `space-y-2` | 8px | Tight (label + input) |
-| `gap-4` or `space-y-4` | 16px | Standard (form fields) |
-| `gap-6` or `space-y-6` | 24px | Sections (cards) |
-| `gap-8` or `space-y-8` | 32px | Large gaps |
-| `p-4` | 16px | Standard padding |
-| `p-6` | 24px | Card padding |
-| `px-4 py-8` | 16px / 32px | Page padding |
+| Class                  | Pixels      | Usage                  |
+| ---------------------- | ----------- | ---------------------- |
+| `gap-2` or `space-y-2` | 8px         | Tight (label + input)  |
+| `gap-4` or `space-y-4` | 16px        | Standard (form fields) |
+| `gap-6` or `space-y-6` | 24px        | Sections (cards)       |
+| `gap-8` or `space-y-8` | 32px        | Large gaps             |
+| `p-4`                  | 16px        | Standard padding       |
+| `p-6`                  | 24px        | Card padding           |
+| `px-4 py-8`            | 16px / 32px | Page padding           |
 
 ### Decision Flowchart (Simplified)
 
@@ -682,7 +715,7 @@ Need spacing?
 Before implementing spacing, verify:
 
 - [ ] **Parent controls children?** Using gap or space-y/x?
-- [ ] **No child margins?** Components don't have mb-* or mr-*?
+- [ ] **No child margins?** Components don't have mb-_ or mr-_?
 - [ ] **Consistent method?** Not mixing gap + child margins?
 - [ ] **Reusable components?** Work in different contexts?
 - [ ] **No edge cases?** No last-child or first-child special handling?
@@ -700,6 +733,7 @@ Before implementing spacing, verify:
 ---
 
 **Related Documentation:**
+
 - [Layouts](./03-layouts.md) - When to use Grid vs Flex
 - [Foundations](./01-foundations.md) - Spacing scale tokens
 - [Component Creation](./05-component-creation.md) - Building reusable components
diff --git a/frontend/docs/design-system/05-component-creation.md b/frontend/docs/design-system/05-component-creation.md
index b872135..03f0528 100644
--- a/frontend/docs/design-system/05-component-creation.md
+++ b/frontend/docs/design-system/05-component-creation.md
@@ -22,6 +22,7 @@
 **80% of the time, you should COMPOSE existing shadcn/ui components.**
 
 Only create custom components when:
+
 1. ✅ You're reusing the same composition 3+ times
 2. ✅ The pattern has complex business logic
 3. ✅ You need variants beyond what shadcn/ui provides
@@ -74,6 +75,7 @@ Do you need a UI element?
 ```
 
 **Why this is good:**
+
 - Simple and direct
 - Easy to customize per use case
 - No abstraction overhead
@@ -103,10 +105,11 @@ function ContentCard({ title, description, content, actionLabel, onAction }: Pro
 }
 
 // Used once... why did we create this?
-<ContentCard title="..." description="..." content="..." />
+<ContentCard title="..." description="..." content="..." />;
 ```
 
 **Problems:**
+
 - ❌ Created before knowing if pattern is reused
 - ❌ Inflexible (what if we need 2 buttons?)
 - ❌ Unclear what it renders (abstraction hides structure)
@@ -148,6 +151,7 @@ function DashboardMetricCard({
 ```
 
 **Why this works:**
+
 - ✅ Pattern validated (used 3+ times)
 - ✅ Specific purpose (dashboard metrics)
 - ✅ Consistent structure across uses
@@ -171,22 +175,23 @@ interface MyComponentProps {
 
 export function MyComponent({ className, children }: MyComponentProps) {
   return (
-    <div className={cn(
-      "base-classes-here",  // Base styles
-      className              // Allow overrides
-    )}>
+    <div
+      className={cn(
+        'base-classes-here', // Base styles
+        className // Allow overrides
+      )}
+    >
       {children}
     </div>
   );
 }
 
 // Usage
-<MyComponent className="custom-overrides">
-  Content
-</MyComponent>
+<MyComponent className="custom-overrides">Content</MyComponent>;
 ```
 
 **Key points:**
+
 - Always accept `className` prop
 - Use `cn()` utility for merging
 - Base classes first, overrides last
@@ -203,24 +208,24 @@ import { cn } from '@/lib/utils';
 
 const componentVariants = cva(
   // Base classes (always applied)
-  "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
+  'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base",
+        sm: 'h-8 px-3 text-xs',
+        default: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
 );
@@ -231,25 +236,18 @@ interface MyComponentProps
   // Additional props here
 }
 
-export function MyComponent({
-  variant,
-  size,
-  className,
-  ...props
-}: MyComponentProps) {
-  return (
-    <div
-      className={cn(componentVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+export function MyComponent({ variant, size, className, ...props }: MyComponentProps) {
+  return <div className={cn(componentVariants({ variant, size, className }))} {...props} />;
 }
 
 // Usage
-<MyComponent variant="outline" size="lg">Content</MyComponent>
+<MyComponent variant="outline" size="lg">
+  Content
+</MyComponent>;
 ```
 
 **Key points:**
+
 - Use CVA for complex variant logic
 - Always provide `defaultVariants`
 - Extend `React.HTMLAttributes` for standard HTML props
@@ -273,13 +271,7 @@ interface StatCardProps {
   className?: string;
 }
 
-export function StatCard({
-  title,
-  value,
-  description,
-  icon,
-  className,
-}: StatCardProps) {
+export function StatCard({ title, value, description, icon, className }: StatCardProps) {
   return (
     <Card className={className}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -288,9 +280,7 @@ export function StatCard({
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
-        {description && (
-          <p className="text-xs text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-xs text-muted-foreground">{description}</p>}
       </CardContent>
     </Card>
   );
@@ -302,10 +292,11 @@ export function StatCard({
   value="1,234"
   description="+12% from last month"
   icon={<Users className="h-4 w-4 text-muted-foreground" />}
-/>
+/>;
 ```
 
 **Key points:**
+
 - Compose from shadcn/ui primitives
 - Keep structure consistent
 - Optional props with `?`
@@ -354,14 +345,17 @@ export function Toggle({
 }
 
 // Uncontrolled usage
-<Toggle defaultValue={false}>Auto-save</Toggle>
+<Toggle defaultValue={false}>Auto-save</Toggle>;
 
 // Controlled usage
 const [enabled, setEnabled] = useState(false);
-<Toggle value={enabled} onChange={setEnabled}>Auto-save</Toggle>
+<Toggle value={enabled} onChange={setEnabled}>
+  Auto-save
+</Toggle>;
 ```
 
 **Key points:**
+
 - Support both controlled and uncontrolled modes
 - Use `defaultValue` for initial uncontrolled value
 - Use `value` + `onChange` for controlled mode
@@ -376,6 +370,7 @@ const [enabled, setEnabled] = useState(false);
 **class-variance-authority** (CVA) is a utility for creating component variants with Tailwind CSS.
 
 **Why use CVA?**
+
 - ✅ Type-safe variant props
 - ✅ Compound variants (combinations)
 - ✅ Default variants
@@ -390,24 +385,23 @@ import { cva } from 'class-variance-authority';
 
 const alertVariants = cva(
   // Base classes (always applied)
-  "relative w-full rounded-lg border p-4",
+  'relative w-full rounded-lg border p-4',
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
 );
 
 // Usage
-<div className={alertVariants({ variant: "destructive" })}>
-  Alert content
-</div>
+<div className={alertVariants({ variant: 'destructive' })}>Alert content</div>;
 ```
 
 ---
@@ -416,32 +410,32 @@ const alertVariants = cva(
 
 ```tsx
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base",
+        sm: 'h-8 px-3 text-xs',
+        default: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
 );
 
 // Usage
-<button className={buttonVariants({ variant: "outline", size: "lg" })}>
+<button className={buttonVariants({ variant: 'outline', size: 'lg' })}>
   Large Outline Button
-</button>
+</button>;
 ```
 
 ---
@@ -451,28 +445,28 @@ const buttonVariants = cva(
 **Use case**: Different classes when specific variant combinations are used
 
 ```tsx
-const buttonVariants = cva("base-classes", {
+const buttonVariants = cva('base-classes', {
   variants: {
     variant: {
-      default: "bg-primary",
-      destructive: "bg-destructive",
+      default: 'bg-primary',
+      destructive: 'bg-destructive',
     },
     size: {
-      sm: "h-8",
-      lg: "h-12",
+      sm: 'h-8',
+      lg: 'h-12',
     },
   },
   // Compound variants: specific combinations
   compoundVariants: [
     {
-      variant: "destructive",
-      size: "lg",
-      class: "text-lg font-bold",  // Applied when BOTH are true
+      variant: 'destructive',
+      size: 'lg',
+      class: 'text-lg font-bold', // Applied when BOTH are true
     },
   ],
   defaultVariants: {
-    variant: "default",
-    size: "sm",
+    variant: 'default',
+    size: 'sm',
   },
 });
 ```
@@ -484,6 +478,7 @@ const buttonVariants = cva("base-classes", {
 ### Prop Naming Conventions
 
 **DO**:
+
 ```tsx
 // ✅ Descriptive, semantic names
 interface UserCardProps {
@@ -495,6 +490,7 @@ interface UserCardProps {
 ```
 
 **DON'T**:
+
 ```tsx
 // ❌ Generic, unclear names
 interface CardProps {
@@ -510,6 +506,7 @@ interface CardProps {
 ### Required vs Optional Props
 
 **Guidelines:**
+
 - Required: Core functionality depends on it
 - Optional: Nice-to-have, has sensible default
 
@@ -531,7 +528,7 @@ interface AlertProps {
 
 export function Alert({
   children,
-  variant = 'default',  // Default for optional prop
+  variant = 'default', // Default for optional prop
   onClose,
   icon,
   className,
@@ -545,6 +542,7 @@ export function Alert({
 ### Prop Type Patterns
 
 **Enum props** (limited options):
+
 ```tsx
 interface ButtonProps {
   variant: 'default' | 'destructive' | 'outline';
@@ -553,6 +551,7 @@ interface ButtonProps {
 ```
 
 **Boolean flags**:
+
 ```tsx
 interface CardProps {
   isLoading?: boolean;
@@ -562,6 +561,7 @@ interface CardProps {
 ```
 
 **Callback props**:
+
 ```tsx
 interface FormProps {
   onSubmit: (data: FormData) => void;
@@ -571,6 +571,7 @@ interface FormProps {
 ```
 
 **Render props** (advanced customization):
+
 ```tsx
 interface ListProps<T> {
   items: T[];
@@ -583,7 +584,7 @@ interface ListProps<T> {
   items={users}
   renderItem={(user, i) => <UserCard key={i} user={user} />}
   renderEmpty={() => <EmptyState />}
-/>
+/>;
 ```
 
 ---
@@ -593,6 +594,7 @@ interface ListProps<T> {
 Before shipping a custom component, verify:
 
 ### Visual Testing
+
 - [ ] **Light mode** - Component looks correct
 - [ ] **Dark mode** - Component looks correct (toggle theme)
 - [ ] **All variants** - Test each variant works
@@ -602,6 +604,7 @@ Before shipping a custom component, verify:
 - [ ] **Empty state** - Handles no data gracefully
 
 ### Accessibility Testing
+
 - [ ] **Keyboard navigation** - Can be focused and activated with Tab/Enter
 - [ ] **Focus indicators** - Visible focus ring (`:focus-visible`)
 - [ ] **Screen reader** - ARIA labels and roles present
@@ -609,6 +612,7 @@ Before shipping a custom component, verify:
 - [ ] **Semantic HTML** - Using correct HTML elements (button, nav, etc.)
 
 ### Functional Testing
+
 - [ ] **Props work** - All props apply correctly
 - [ ] **className override** - Can override styles with className prop
 - [ ] **Controlled/uncontrolled** - Both modes work (if applicable)
@@ -616,6 +620,7 @@ Before shipping a custom component, verify:
 - [ ] **TypeScript** - No type errors, props autocomplete
 
 ### Code Quality
+
 - [ ] **No console errors** - Check browser console
 - [ ] **No warnings** - React warnings, a11y warnings
 - [ ] **Performance** - No unnecessary re-renders
@@ -644,13 +649,7 @@ interface StatCardProps {
   className?: string;
 }
 
-export function StatCard({
-  title,
-  value,
-  change,
-  icon: Icon,
-  className,
-}: StatCardProps) {
+export function StatCard({ title, value, change, icon: Icon, className }: StatCardProps) {
   return (
     <Card className={className}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -660,11 +659,9 @@ export function StatCard({
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
         {change !== undefined && (
-          <p className={cn(
-            "text-xs",
-            change >= 0 ? "text-green-600" : "text-destructive"
-          )}>
-            {change >= 0 ? '+' : ''}{change}% from last month
+          <p className={cn('text-xs', change >= 0 ? 'text-green-600' : 'text-destructive')}>
+            {change >= 0 ? '+' : ''}
+            {change}% from last month
           </p>
         )}
       </CardContent>
@@ -678,10 +675,11 @@ export function StatCard({
   <StatCard title="Subscriptions" value="+2350" change={12.5} icon={Users} />
   <StatCard title="Sales" value="+12,234" change={19} icon={CreditCard} />
   <StatCard title="Active Now" value="+573" change={-2.1} icon={Activity} />
-</div>
+</div>;
 ```
 
 **Why this works:**
+
 - Specific purpose (dashboard metrics)
 - Reused 8+ times
 - Consistent structure
@@ -747,18 +745,10 @@ export function ConfirmDialog({
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isLoading}
-          >
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
             {cancelLabel}
           </Button>
-          <Button
-            variant={variant}
-            onClick={handleConfirm}
-            disabled={isLoading}
-          >
+          <Button variant={variant} onClick={handleConfirm} disabled={isLoading}>
             {isLoading ? 'Processing...' : confirmLabel}
           </Button>
         </DialogFooter>
@@ -781,10 +771,11 @@ const [showDeleteDialog, setShowDeleteDialog] = useState(false);
     await deleteUser(user.id);
     toast.success('User deleted');
   }}
-/>
+/>;
 ```
 
 **Why this works:**
+
 - Common pattern (confirmations)
 - Handles loading states automatically
 - Consistent UX across app
@@ -808,19 +799,12 @@ interface PageHeaderProps {
   className?: string;
 }
 
-export function PageHeader({
-  title,
-  description,
-  action,
-  className,
-}: PageHeaderProps) {
+export function PageHeader({ title, description, action, className }: PageHeaderProps) {
   return (
-    <div className={cn("flex items-center justify-between", className)}>
+    <div className={cn('flex items-center justify-between', className)}>
       <div className="space-y-1">
         <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-        {description && (
-          <p className="text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-muted-foreground">{description}</p>}
       </div>
       {action && <div>{action}</div>}
     </div>
@@ -837,7 +821,7 @@ export function PageHeader({
       Create User
     </Button>
   }
-/>
+/>;
 ```
 
 ---
@@ -866,6 +850,7 @@ Before creating a custom component, ask:
 ---
 
 **Related Documentation:**
+
 - [Components](./02-components.md) - shadcn/ui component library
 - [AI Guidelines](./08-ai-guidelines.md) - Component templates for AI
 - [Forms](./06-forms.md) - Form component patterns
diff --git a/frontend/docs/design-system/06-forms.md b/frontend/docs/design-system/06-forms.md
index 0532a8f..a984efa 100644
--- a/frontend/docs/design-system/06-forms.md
+++ b/frontend/docs/design-system/06-forms.md
@@ -27,6 +27,7 @@
 - **shadcn/ui components** - Input, Label, Button, etc.
 
 **Why this stack?**
+
 - ✅ Type-safe validation (TypeScript + Zod)
 - ✅ Minimal re-renders (react-hook-form)
 - ✅ Accessible by default (shadcn/ui)
@@ -80,11 +81,7 @@ export function SimpleForm() {
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
       <div className="space-y-2">
         <Label htmlFor="email">Email</Label>
-        <Input
-          id="email"
-          type="email"
-          {...form.register('email')}
-        />
+        <Input id="email" type="email" {...form.register('email')} />
       </div>
 
       <Button type="submit">Submit</Button>
@@ -180,6 +177,7 @@ export function LoginForm() {
 ```
 
 **Key points:**
+
 1. Define Zod schema first
 2. Infer TypeScript type with `z.infer`
 3. Use `zodResolver` in `useForm`
@@ -217,15 +215,9 @@ export function LoginForm() {
 ```tsx
 <div className="space-y-2">
   <Label htmlFor="description">Description</Label>
-  <Textarea
-    id="description"
-    rows={4}
-    {...form.register('description')}
-  />
+  <Textarea id="description" rows={4} {...form.register('description')} />
   {form.formState.errors.description && (
-    <p className="text-sm text-destructive">
-      {form.formState.errors.description.message}
-    </p>
+    <p className="text-sm text-destructive">{form.formState.errors.description.message}</p>
   )}
 </div>
 ```
@@ -237,10 +229,7 @@ export function LoginForm() {
 ```tsx
 <div className="space-y-2">
   <Label htmlFor="role">Role</Label>
-  <Select
-    value={form.watch('role')}
-    onValueChange={(value) => form.setValue('role', value)}
-  >
+  <Select value={form.watch('role')} onValueChange={(value) => form.setValue('role', value)}>
     <SelectTrigger id="role">
       <SelectValue placeholder="Select a role" />
     </SelectTrigger>
@@ -251,9 +240,7 @@ export function LoginForm() {
     </SelectContent>
   </Select>
   {form.formState.errors.role && (
-    <p className="text-sm text-destructive">
-      {form.formState.errors.role.message}
-    </p>
+    <p className="text-sm text-destructive">{form.formState.errors.role.message}</p>
   )}
 </div>
 ```
@@ -272,12 +259,12 @@ export function LoginForm() {
   <Label htmlFor="terms" className="text-sm font-normal">
     I accept the terms and conditions
   </Label>
-</div>
-{form.formState.errors.acceptTerms && (
-  <p className="text-sm text-destructive">
-    {form.formState.errors.acceptTerms.message}
-  </p>
-)}
+</div>;
+{
+  form.formState.errors.acceptTerms && (
+    <p className="text-sm text-destructive">{form.formState.errors.acceptTerms.message}</p>
+  );
+}
 ```
 
 ---
@@ -289,22 +276,16 @@ export function LoginForm() {
   <Label>Notification Method</Label>
   <div className="space-y-2">
     <div className="flex items-center space-x-2">
-      <input
-        type="radio"
-        id="email"
-        value="email"
-        {...form.register('notificationMethod')}
-      />
-      <Label htmlFor="email" className="font-normal">Email</Label>
+      <input type="radio" id="email" value="email" {...form.register('notificationMethod')} />
+      <Label htmlFor="email" className="font-normal">
+        Email
+      </Label>
     </div>
     <div className="flex items-center space-x-2">
-      <input
-        type="radio"
-        id="sms"
-        value="sms"
-        {...form.register('notificationMethod')}
-      />
-      <Label htmlFor="sms" className="font-normal">SMS</Label>
+      <input type="radio" id="sms" value="sms" {...form.register('notificationMethod')} />
+      <Label htmlFor="sms" className="font-normal">
+        SMS
+      </Label>
     </div>
   </div>
 </div>
@@ -320,65 +301,68 @@ export function LoginForm() {
 import { z } from 'zod';
 
 // Email
-z.string().email('Invalid email address')
+z.string().email('Invalid email address');
 
 // Min/max length
-z.string().min(8, 'Minimum 8 characters').max(100, 'Maximum 100 characters')
+z.string().min(8, 'Minimum 8 characters').max(100, 'Maximum 100 characters');
 
 // Required field
-z.string().min(1, 'This field is required')
+z.string().min(1, 'This field is required');
 
 // Optional field
-z.string().optional()
+z.string().optional();
 
 // Number with range
-z.number().min(0).max(100)
+z.number().min(0).max(100);
 
 // Number from string input
-z.coerce.number().min(0)
+z.coerce.number().min(0);
 
 // Enum
 z.enum(['admin', 'user', 'guest'], {
-  errorMap: () => ({ message: 'Invalid role' })
-})
+  errorMap: () => ({ message: 'Invalid role' }),
+});
 
 // URL
-z.string().url('Invalid URL')
+z.string().url('Invalid URL');
 
 // Password with requirements
 z.string()
   .min(8, 'Password must be at least 8 characters')
   .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
   .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
-  .regex(/[0-9]/, 'Password must contain at least one number')
+  .regex(/[0-9]/, 'Password must contain at least one number');
 
 // Confirm password
 z.object({
   password: z.string().min(8),
-  confirmPassword: z.string()
+  confirmPassword: z.string(),
 }).refine((data) => data.password === data.confirmPassword, {
   message: "Passwords don't match",
-  path: ["confirmPassword"],
-})
+  path: ['confirmPassword'],
+});
 
 // Custom validation
 z.string().refine((val) => !val.includes('badword'), {
   message: 'Invalid input',
-})
+});
 
 // Conditional fields
 z.object({
   role: z.enum(['admin', 'user']),
   adminKey: z.string().optional(),
-}).refine((data) => {
-  if (data.role === 'admin') {
-    return !!data.adminKey;
+}).refine(
+  (data) => {
+    if (data.role === 'admin') {
+      return !!data.adminKey;
+    }
+    return true;
+  },
+  {
+    message: 'Admin key required for admin role',
+    path: ['adminKey'],
   }
-  return true;
-}, {
-  message: 'Admin key required for admin role',
-  path: ['adminKey'],
-})
+);
 ```
 
 ---
@@ -448,6 +432,7 @@ type UserFormData = z.infer<typeof userFormSchema>;
 ```
 
 **Accessibility notes:**
+
 - Use `aria-invalid` to indicate error state
 - Use `aria-describedby` to link error message
 - Error ID format: `{fieldName}-error`
@@ -470,14 +455,14 @@ const onSubmit = async (data: FormData) => {
 };
 
 // Display form-level error
-{form.formState.errors.root && (
-  <Alert variant="destructive">
-    <AlertCircle className="h-4 w-4" />
-    <AlertDescription>
-      {form.formState.errors.root.message}
-    </AlertDescription>
-  </Alert>
-)}
+{
+  form.formState.errors.root && (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertDescription>{form.formState.errors.root.message}</AlertDescription>
+    </Alert>
+  );
+}
 ```
 
 ---
@@ -620,32 +605,26 @@ const onSubmit = async (data: FormData) => {
   <div className="space-y-4">
     <div>
       <h3 className="text-lg font-semibold">Personal Information</h3>
-      <p className="text-sm text-muted-foreground">
-        Basic details about you
-      </p>
+      <p className="text-sm text-muted-foreground">Basic details about you</p>
     </div>
     <Separator />
-    <div className="space-y-4">
-      {/* Fields */}
-    </div>
+    <div className="space-y-4">{/* Fields */}</div>
   </div>
 
   {/* Section 2 */}
   <div className="space-y-4">
     <div>
       <h3 className="text-lg font-semibold">Account Settings</h3>
-      <p className="text-sm text-muted-foreground">
-        Configure your account preferences
-      </p>
+      <p className="text-sm text-muted-foreground">Configure your account preferences</p>
     </div>
     <Separator />
-    <div className="space-y-4">
-      {/* Fields */}
-    </div>
+    <div className="space-y-4">{/* Fields */}</div>
   </div>
 
   <div className="flex justify-end gap-4">
-    <Button type="button" variant="outline">Cancel</Button>
+    <Button type="button" variant="outline">
+      Cancel
+    </Button>
     <Button type="submit">Save Changes</Button>
   </div>
 </form>
@@ -661,10 +640,14 @@ const onSubmit = async (data: FormData) => {
 import { useFieldArray } from 'react-hook-form';
 
 const schema = z.object({
-  items: z.array(z.object({
-    name: z.string().min(1),
-    quantity: z.coerce.number().min(1),
-  })).min(1, 'At least one item required'),
+  items: z
+    .array(
+      z.object({
+        name: z.string().min(1),
+        quantity: z.coerce.number().min(1),
+      })
+    )
+    .min(1, 'At least one item required'),
 });
 
 function DynamicForm() {
@@ -684,30 +667,19 @@ function DynamicForm() {
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
       {fields.map((field, index) => (
         <div key={field.id} className="flex gap-4">
-          <Input
-            {...form.register(`items.${index}.name`)}
-            placeholder="Item name"
-          />
+          <Input {...form.register(`items.${index}.name`)} placeholder="Item name" />
           <Input
             type="number"
             {...form.register(`items.${index}.quantity`)}
             placeholder="Quantity"
           />
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={() => remove(index)}
-          >
+          <Button type="button" variant="destructive" onClick={() => remove(index)}>
             Remove
           </Button>
         </div>
       ))}
 
-      <Button
-        type="button"
-        variant="outline"
-        onClick={() => append({ name: '', quantity: 1 })}
-      >
+      <Button type="button" variant="outline" onClick={() => append({ name: '', quantity: 1 })}>
         Add Item
       </Button>
 
@@ -722,18 +694,23 @@ function DynamicForm() {
 ### Conditional Fields
 
 ```tsx
-const schema = z.object({
-  role: z.enum(['user', 'admin']),
-  adminKey: z.string().optional(),
-}).refine((data) => {
-  if (data.role === 'admin') {
-    return !!data.adminKey;
-  }
-  return true;
-}, {
-  message: 'Admin key required',
-  path: ['adminKey'],
-});
+const schema = z
+  .object({
+    role: z.enum(['user', 'admin']),
+    adminKey: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.role === 'admin') {
+        return !!data.adminKey;
+      }
+      return true;
+    },
+    {
+      message: 'Admin key required',
+      path: ['adminKey'],
+    }
+  );
 
 function ConditionalForm() {
   const form = useForm({ resolver: zodResolver(schema) });
@@ -741,23 +718,17 @@ function ConditionalForm() {
 
   return (
     <form className="space-y-4">
-      <Select
-        value={role}
-        onValueChange={(val) => form.setValue('role', val as any)}
-      >
-        <SelectTrigger><SelectValue /></SelectTrigger>
+      <Select value={role} onValueChange={(val) => form.setValue('role', val as any)}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
         <SelectContent>
           <SelectItem value="user">User</SelectItem>
           <SelectItem value="admin">Admin</SelectItem>
         </SelectContent>
       </Select>
 
-      {role === 'admin' && (
-        <Input
-          {...form.register('adminKey')}
-          placeholder="Admin Key"
-        />
-      )}
+      {role === 'admin' && <Input {...form.register('adminKey')} placeholder="Admin Key" />}
     </form>
   );
 }
@@ -774,14 +745,10 @@ const schema = z.object({
   }),
 });
 
-<input
-  type="file"
-  {...form.register('file')}
-  accept="image/*"
-/>
+<input type="file" {...form.register('file')} accept="image/*" />;
 
 const onSubmit = (data: FormData) => {
-  const file = data.file[0];  // FileList -> File
+  const file = data.file[0]; // FileList -> File
   const formData = new FormData();
   formData.append('file', file);
   // Upload formData
@@ -795,6 +762,7 @@ const onSubmit = (data: FormData) => {
 Before shipping a form, verify:
 
 ### Functionality
+
 - [ ] All fields register correctly
 - [ ] Validation works (test invalid inputs)
 - [ ] Submit handler fires
@@ -803,6 +771,7 @@ Before shipping a form, verify:
 - [ ] Success case redirects/shows success
 
 ### Accessibility
+
 - [ ] Labels associated with inputs (`htmlFor` + `id`)
 - [ ] Error messages use `aria-describedby`
 - [ ] Invalid inputs have `aria-invalid`
@@ -810,6 +779,7 @@ Before shipping a form, verify:
 - [ ] Submit button disabled during submission
 
 ### UX
+
 - [ ] Field errors appear on blur or submit
 - [ ] Loading state prevents double-submit
 - [ ] Success message or redirect on success
@@ -827,11 +797,13 @@ Before shipping a form, verify:
 ---
 
 **Related Documentation:**
+
 - [Components](./02-components.md) - Input, Label, Button, Select
 - [Layouts](./03-layouts.md) - Form layout patterns
 - [Accessibility](./07-accessibility.md) - ARIA attributes for forms
 
 **External Resources:**
+
 - [react-hook-form Documentation](https://react-hook-form.com)
 - [Zod Documentation](https://zod.dev)
 
diff --git a/frontend/docs/design-system/07-accessibility.md b/frontend/docs/design-system/07-accessibility.md
index b1a1dcc..4386620 100644
--- a/frontend/docs/design-system/07-accessibility.md
+++ b/frontend/docs/design-system/07-accessibility.md
@@ -24,12 +24,14 @@
 We follow **WCAG 2.1 Level AA** as the **minimum** standard.
 
 **Why Level AA?**
+
 - ✅ Required for most legal compliance (ADA, Section 508)
 - ✅ Covers 95%+ of accessibility needs
 - ✅ Achievable without major UX compromises
 - ✅ Industry standard for modern web apps
 
 **WCAG Principles (POUR):**
+
 1. **Perceivable** - Information can be perceived by users
 2. **Operable** - Interface can be operated by users
 3. **Understandable** - Information and operation are understandable
@@ -63,14 +65,15 @@ Creating a UI element?
 
 ### Minimum Contrast Ratios (WCAG AA)
 
-| Content Type | Minimum Ratio | Example |
-|--------------|---------------|---------|
-| **Normal text** (< 18px) | **4.5:1** | Body paragraphs, form labels |
-| **Large text** (≥ 18px or ≥ 14px bold) | **3:1** | Headings, subheadings |
-| **UI components** | **3:1** | Buttons, form borders, icons |
-| **Graphical objects** | **3:1** | Chart elements, infographics |
+| Content Type                           | Minimum Ratio | Example                      |
+| -------------------------------------- | ------------- | ---------------------------- |
+| **Normal text** (< 18px)               | **4.5:1**     | Body paragraphs, form labels |
+| **Large text** (≥ 18px or ≥ 14px bold) | **3:1**       | Headings, subheadings        |
+| **UI components**                      | **3:1**       | Buttons, form borders, icons |
+| **Graphical objects**                  | **3:1**       | Chart elements, infographics |
 
 **WCAG AAA (ideal, not required):**
+
 - Normal text: 7:1
 - Large text: 4.5:1
 
@@ -79,6 +82,7 @@ Creating a UI element?
 ### Testing Color Contrast
 
 **Tools:**
+
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - Chrome DevTools: Inspect element → Accessibility panel
 - [Contrast Ratio Tool](https://contrast-ratio.com)
@@ -104,6 +108,7 @@ Creating a UI element?
 ```
 
 **Our design system tokens are WCAG AA compliant:**
+
 - `text-foreground` on `bg-background`: 12.6:1 ✅
 - `text-primary-foreground` on `bg-primary`: 8.2:1 ✅
 - `text-destructive` on `bg-background`: 5.1:1 ✅
@@ -116,6 +121,7 @@ Creating a UI element?
 **8% of men and 0.5% of women** have some form of color blindness.
 
 **Best practices:**
+
 - ❌ Don't rely on color alone to convey information
 - ✅ Use icons, text labels, or patterns in addition to color
 - ✅ Test with color blindness simulators
@@ -148,6 +154,7 @@ Creating a UI element?
 ### Core Requirements
 
 All interactive elements must be:
+
 1. ✅ **Focusable** - Can be reached with Tab key
 2. ✅ **Activatable** - Can be triggered with Enter or Space
 3. ✅ **Navigable** - Can move between with arrow keys (where appropriate)
@@ -176,6 +183,7 @@ All interactive elements must be:
 ```
 
 **When to use `tabIndex`:**
+
 - `tabIndex={0}` - Make non-interactive element focusable
 - `tabIndex={-1}` - Remove from tab order (for programmatic focus)
 - `tabIndex={1+}` - ❌ **Avoid** - Breaks natural order
@@ -184,31 +192,31 @@ All interactive elements must be:
 
 ### Keyboard Shortcuts
 
-| Key | Action | Example |
-|-----|--------|---------|
-| **Tab** | Move focus forward | Navigate through form fields |
-| **Shift + Tab** | Move focus backward | Go back to previous field |
-| **Enter** | Activate button/link | Submit form, follow link |
-| **Space** | Activate button/checkbox | Toggle checkbox, click button |
-| **Escape** | Close overlay | Close dialog, dropdown |
-| **Arrow keys** | Navigate within component | Navigate dropdown items |
-| **Home** | Jump to start | First item in list |
-| **End** | Jump to end | Last item in list |
+| Key             | Action                    | Example                       |
+| --------------- | ------------------------- | ----------------------------- |
+| **Tab**         | Move focus forward        | Navigate through form fields  |
+| **Shift + Tab** | Move focus backward       | Go back to previous field     |
+| **Enter**       | Activate button/link      | Submit form, follow link      |
+| **Space**       | Activate button/checkbox  | Toggle checkbox, click button |
+| **Escape**      | Close overlay             | Close dialog, dropdown        |
+| **Arrow keys**  | Navigate within component | Navigate dropdown items       |
+| **Home**        | Jump to start             | First item in list            |
+| **End**         | Jump to end               | Last item in list             |
 
 ---
 
 ### Implementing Keyboard Navigation
 
 **Button (automatic):**
+
 ```tsx
 // ✅ Button is keyboard accessible by default
-<Button onClick={handleClick}>
-  Click me
-</Button>
+<Button onClick={handleClick}>Click me</Button>
 // Enter or Space triggers onClick
 ```
 
 **Custom clickable div (needs work):**
+
 ```tsx
 // ❌ BAD - Not keyboard accessible
 <div onClick={handleClick}>
@@ -237,11 +245,12 @@ All interactive elements must be:
 ```
 
 **Dropdown navigation:**
+
 ```tsx
 <DropdownMenu>
   <DropdownMenuContent>
-    <DropdownMenuItem>Edit</DropdownMenuItem>  {/* Arrow down */}
-    <DropdownMenuItem>Delete</DropdownMenuItem>  {/* Arrow down */}
+    <DropdownMenuItem>Edit</DropdownMenuItem> {/* Arrow down */}
+    <DropdownMenuItem>Delete</DropdownMenuItem> {/* Arrow down */}
   </DropdownMenuContent>
 </DropdownMenu>
 // shadcn/ui handles arrow key navigation automatically
@@ -276,12 +285,14 @@ All interactive elements must be:
 ### Screen Reader Basics
 
 **Popular screen readers:**
+
 - **NVDA** (Windows) - Free, most popular for testing
 - **JAWS** (Windows) - Industry standard, paid
 - **VoiceOver** (macOS/iOS) - Built-in to Apple devices
 - **TalkBack** (Android) - Built-in to Android
 
 **What screen readers announce:**
+
 - Semantic element type (button, link, heading, etc.)
 - Element text content
 - Element state (expanded, selected, disabled)
@@ -334,6 +345,7 @@ All interactive elements must be:
 ```
 
 **Semantic elements:**
+
 - `<header>` - Page header
 - `<nav>` - Navigation
 - `<main>` - Main content (only one per page)
@@ -364,6 +376,7 @@ All interactive elements must be:
 ```
 
 **Icon-only buttons:**
+
 ```tsx
 // ✅ GOOD - ARIA label
 <Button size="icon" aria-label="Close dialog">
@@ -383,6 +396,7 @@ All interactive elements must be:
 ### Common ARIA Attributes
 
 **ARIA roles:**
+
 ```tsx
 <div role="button" tabIndex={0}>Custom Button</div>
 <div role="alert">Error message</div>
@@ -391,6 +405,7 @@ All interactive elements must be:
 ```
 
 **ARIA states:**
+
 ```tsx
 <button aria-expanded={isOpen}>Toggle Menu</button>
 <button aria-pressed={isActive}>Toggle</button>
@@ -399,6 +414,7 @@ All interactive elements must be:
 ```
 
 **ARIA properties:**
+
 ```tsx
 <button aria-label="Close">×</button>
 <input aria-describedby="email-help" />
@@ -412,6 +428,7 @@ All interactive elements must be:
 ### Form Accessibility
 
 **Label association:**
+
 ```tsx
 // ✅ GOOD - Explicit association
 <Label htmlFor="email">Email</Label>
@@ -423,6 +440,7 @@ All interactive elements must be:
 ```
 
 **Error messages:**
+
 ```tsx
 // ✅ GOOD - Linked with aria-describedby
 <Label htmlFor="password">Password</Label>
@@ -444,6 +462,7 @@ All interactive elements must be:
 ```
 
 **Required fields:**
+
 ```tsx
 // ✅ GOOD - Marked as required
 <Label htmlFor="name">
@@ -502,6 +521,7 @@ toast.success('User created');
 ```
 
 **Use `:focus-visible` instead of `:focus`:**
+
 - `:focus` - Shows on mouse click AND keyboard
 - `:focus-visible` - Shows only on keyboard (better UX)
 
@@ -516,7 +536,7 @@ toast.success('User created');
 <Dialog open={isOpen} onOpenChange={setIsOpen}>
   <DialogContent>
     {/* Focus trapped inside */}
-    <Input autoFocus />  {/* Focus first field */}
+    <Input autoFocus /> {/* Focus first field */}
     <Button>Submit</Button>
   </DialogContent>
 </Dialog>
@@ -539,7 +559,7 @@ const handleDelete = () => {
   inputRef.current?.focus();
 };
 
-<Input ref={inputRef} />
+<Input ref={inputRef} />;
 ```
 
 ---
@@ -549,11 +569,13 @@ const handleDelete = () => {
 ### Automated Testing Tools
 
 **Browser extensions:**
+
 - [axe DevTools](https://www.deque.com/axe/devtools/) - Free, comprehensive
 - [WAVE](https://wave.webaim.org/extension/) - Visual feedback
 - [Lighthouse](https://developer.chrome.com/docs/lighthouse/) - Built into Chrome
 
 **CI/CD testing:**
+
 - [@axe-core/react](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react) - Runtime accessibility testing
 - [jest-axe](https://github.com/nickcolley/jest-axe) - Jest integration
 - [Playwright accessibility testing](https://playwright.dev/docs/accessibility-testing)
@@ -563,6 +585,7 @@ const handleDelete = () => {
 ### Manual Testing Checklist
 
 #### Keyboard Testing
+
 1. [ ] Unplug mouse
 2. [ ] Tab through entire page
 3. [ ] All interactive elements focusable?
@@ -572,6 +595,7 @@ const handleDelete = () => {
 7. [ ] Tab order logical?
 
 #### Screen Reader Testing
+
 1. [ ] Install NVDA (Windows) or VoiceOver (Mac)
 2. [ ] Navigate page with screen reader on
 3. [ ] All content announced?
@@ -580,6 +604,7 @@ const handleDelete = () => {
 6. [ ] Heading hierarchy correct?
 
 #### Contrast Testing
+
 1. [ ] Use contrast checker on all text
 2. [ ] Check UI components (buttons, borders)
 3. [ ] Test in dark mode too
@@ -590,6 +615,7 @@ const handleDelete = () => {
 ### Testing with Real Users
 
 **Considerations:**
+
 - Test with actual users who rely on assistive technologies
 - Different screen readers behave differently
 - Mobile screen readers (VoiceOver, TalkBack) differ from desktop
@@ -600,6 +626,7 @@ const handleDelete = () => {
 ## Accessibility Checklist
 
 ### General
+
 - [ ] Page has `<title>` and `<meta name="description">`
 - [ ] Page has proper heading hierarchy (h1 → h2 → h3)
 - [ ] Landmarks used (`<header>`, `<nav>`, `<main>`, `<footer>`)
@@ -607,12 +634,14 @@ const handleDelete = () => {
 - [ ] No content relies on color alone
 
 ### Color & Contrast
+
 - [ ] Text has 4.5:1 contrast (normal) or 3:1 (large)
 - [ ] UI components have 3:1 contrast
 - [ ] Tested in both light and dark modes
 - [ ] Color blindness simulator used
 
 ### Keyboard
+
 - [ ] All interactive elements focusable
 - [ ] Focus indicators visible (ring, outline, etc.)
 - [ ] Tab order is logical
@@ -622,6 +651,7 @@ const handleDelete = () => {
 - [ ] Arrow keys navigate lists/menus
 
 ### Screen Readers
+
 - [ ] All images have alt text
 - [ ] Icon-only buttons have aria-label
 - [ ] Form labels associated with inputs
@@ -631,6 +661,7 @@ const handleDelete = () => {
 - [ ] ARIA roles used correctly
 
 ### Forms
+
 - [ ] Labels associated with inputs (`htmlFor` + `id`)
 - [ ] Error messages linked (`aria-describedby`)
 - [ ] Invalid inputs marked (`aria-invalid`)
@@ -638,6 +669,7 @@ const handleDelete = () => {
 - [ ] Submit button disabled during submission
 
 ### Focus Management
+
 - [ ] Dialogs trap focus
 - [ ] Focus returns after dialog closes
 - [ ] Programmatic focus after actions
@@ -650,29 +682,36 @@ const handleDelete = () => {
 **Easy improvements with big impact:**
 
 1. **Add alt text to images**
+
    ```tsx
    <img src="/logo.png" alt="Company Logo" />
    ```
 
 2. **Associate labels with inputs**
+
    ```tsx
    <Label htmlFor="email">Email</Label>
    <Input id="email" />
    ```
 
 3. **Use semantic HTML**
+
    ```tsx
    <button> instead of <div onClick>
    ```
 
 4. **Add aria-label to icon buttons**
+
    ```tsx
-   <Button aria-label="Close"><X /></Button>
+   <Button aria-label="Close">
+     <X />
+   </Button>
    ```
 
 5. **Use semantic color tokens**
+
    ```tsx
-   className="text-foreground" // Auto contrast
+   className = 'text-foreground'; // Auto contrast
    ```
 
 6. **Test with keyboard only**
@@ -691,11 +730,13 @@ const handleDelete = () => {
 ---
 
 **Related Documentation:**
+
 - [Forms](./06-forms.md) - Accessible form patterns
 - [Components](./02-components.md) - All components are accessible
 - [Foundations](./01-foundations.md) - Color contrast tokens
 
 **External Resources:**
+
 - [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [A11y Project Checklist](https://www.a11yproject.com/checklist/)
diff --git a/frontend/docs/design-system/08-ai-guidelines.md b/frontend/docs/design-system/08-ai-guidelines.md
index 74d6037..b0a8051 100644
--- a/frontend/docs/design-system/08-ai-guidelines.md
+++ b/frontend/docs/design-system/08-ai-guidelines.md
@@ -9,19 +9,22 @@
 ### ALWAYS Do
 
 1. ✅ **Import from `@/components/ui/*`**
+
    ```tsx
    import { Button } from '@/components/ui/button';
    import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
    ```
 
 2. ✅ **Use semantic color tokens**
+
    ```tsx
-   className="bg-primary text-primary-foreground"
-   className="text-destructive"
-   className="bg-muted text-muted-foreground"
+   className = 'bg-primary text-primary-foreground';
+   className = 'text-destructive';
+   className = 'bg-muted text-muted-foreground';
    ```
 
 3. ✅ **Use `cn()` utility for className merging**
+
    ```tsx
    import { cn } from '@/lib/utils';
 
@@ -29,11 +32,13 @@
    ```
 
 4. ✅ **Follow spacing scale** (multiples of 4: 0, 1, 2, 3, 4, 6, 8, 12, 16)
+
    ```tsx
-   className="p-4 space-y-6 mb-8"
+   className = 'p-4 space-y-6 mb-8';
    ```
 
 5. ✅ **Add accessibility attributes**
+
    ```tsx
    <Label htmlFor="email">Email</Label>
    <Input
@@ -44,12 +49,14 @@
    ```
 
 6. ✅ **Use component variants**
+
    ```tsx
    <Button variant="destructive">Delete</Button>
    <Alert variant="destructive">Error message</Alert>
    ```
 
 7. ✅ **Compose from shadcn/ui primitives**
+
    ```tsx
    // Don't create custom card components
    // Use Card + CardHeader + CardTitle + CardContent
@@ -57,8 +64,8 @@
 
 8. ✅ **Use mobile-first responsive design**
    ```tsx
-   className="text-2xl sm:text-3xl lg:text-4xl"
-   className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+   className = 'text-2xl sm:text-3xl lg:text-4xl';
+   className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
    ```
 
 ---
@@ -66,24 +73,27 @@
 ### NEVER Do
 
 1. ❌ **NO arbitrary colors**
+
    ```tsx
    // ❌ WRONG
-   className="bg-blue-500 text-white"
+   className = 'bg-blue-500 text-white';
 
    // ✅ CORRECT
-   className="bg-primary text-primary-foreground"
+   className = 'bg-primary text-primary-foreground';
    ```
 
 2. ❌ **NO arbitrary spacing values**
+
    ```tsx
    // ❌ WRONG
-   className="p-[13px] mb-[17px]"
+   className = 'p-[13px] mb-[17px]';
 
    // ✅ CORRECT
-   className="p-4 mb-4"
+   className = 'p-4 mb-4';
    ```
 
 3. ❌ **NO inline styles**
+
    ```tsx
    // ❌ WRONG
    style={{ margin: '10px', color: '#3b82f6' }}
@@ -93,6 +103,7 @@
    ```
 
 4. ❌ **NO custom CSS classes** (use Tailwind utilities)
+
    ```tsx
    // ❌ WRONG
    <div className="my-custom-class">
@@ -102,6 +113,7 @@
    ```
 
 5. ❌ **NO mixing component libraries**
+
    ```tsx
    // ❌ WRONG - Don't use Material-UI, Ant Design, etc.
    import { Button } from '@mui/material';
@@ -111,6 +123,7 @@
    ```
 
 6. ❌ **NO skipping accessibility**
+
    ```tsx
    // ❌ WRONG
    <button><X /></button>
@@ -122,6 +135,7 @@
    ```
 
 7. ❌ **NO creating custom variants without CVA**
+
    ```tsx
    // ❌ WRONG
    <Button className={type === 'danger' ? 'bg-red-500' : 'bg-blue-500'}>
@@ -138,9 +152,7 @@
 
 ```tsx
 <div className="container mx-auto px-4 py-8">
-  <div className="max-w-4xl mx-auto space-y-6">
-    {/* Content */}
-  </div>
+  <div className="max-w-4xl mx-auto space-y-6">{/* Content */}</div>
 </div>
 ```
 
@@ -148,7 +160,9 @@
 
 ```tsx
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-  {items.map(item => <Card key={item.id}>...</Card>)}
+  {items.map((item) => (
+    <Card key={item.id}>...</Card>
+  ))}
 </div>
 ```
 
@@ -160,9 +174,7 @@
     <CardTitle>Form Title</CardTitle>
   </CardHeader>
   <CardContent>
-    <form className="space-y-4">
-      {/* Form fields */}
-    </form>
+    <form className="space-y-4">{/* Form fields */}</form>
   </CardContent>
 </Card>
 ```
@@ -170,9 +182,7 @@
 ### Centered Content
 
 ```tsx
-<div className="max-w-2xl mx-auto px-4">
-  {/* Readable content width */}
-</div>
+<div className="max-w-2xl mx-auto px-4">{/* Readable content width */}</div>
 ```
 
 ---
@@ -191,17 +201,15 @@ interface MyComponentProps {
   children: React.ReactNode;
 }
 
-export function MyComponent({
-  variant = 'default',
-  className,
-  children
-}: MyComponentProps) {
+export function MyComponent({ variant = 'default', className, children }: MyComponentProps) {
   return (
-    <Card className={cn(
-      "p-4", // base styles
-      variant === 'compact' && "p-2",
-      className // allow overrides
-    )}>
+    <Card
+      className={cn(
+        'p-4', // base styles
+        variant === 'compact' && 'p-2',
+        className // allow overrides
+      )}
+    >
       {children}
     </Card>
   );
@@ -215,22 +223,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const componentVariants = cva(
-  "base-classes-here", // base
+  'base-classes-here', // base
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground",
-        destructive: "bg-destructive text-destructive-foreground",
+        default: 'bg-primary text-primary-foreground',
+        destructive: 'bg-destructive text-destructive-foreground',
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base",
+        sm: 'h-8 px-3 text-xs',
+        default: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
 );
@@ -240,9 +248,7 @@ interface ComponentProps
     VariantProps<typeof componentVariants> {}
 
 export function Component({ variant, size, className, ...props }: ComponentProps) {
-  return (
-    <div className={cn(componentVariants({ variant, size, className }))} {...props} />
-  );
+  return <div className={cn(componentVariants({ variant, size, className }))} {...props} />;
 }
 ```
 
@@ -313,18 +319,18 @@ export function MyForm() {
 
 **Always use these semantic tokens:**
 
-| Token | Usage |
-|-------|-------|
-| `bg-primary text-primary-foreground` | Primary buttons, CTAs |
-| `bg-secondary text-secondary-foreground` | Secondary actions |
-| `bg-destructive text-destructive-foreground` | Delete, errors |
-| `bg-muted text-muted-foreground` | Disabled states |
-| `bg-accent text-accent-foreground` | Hover states |
-| `bg-card text-card-foreground` | Card backgrounds |
-| `text-foreground` | Body text |
-| `text-muted-foreground` | Secondary text |
-| `border-border` | Borders |
-| `ring-ring` | Focus rings |
+| Token                                        | Usage                 |
+| -------------------------------------------- | --------------------- |
+| `bg-primary text-primary-foreground`         | Primary buttons, CTAs |
+| `bg-secondary text-secondary-foreground`     | Secondary actions     |
+| `bg-destructive text-destructive-foreground` | Delete, errors        |
+| `bg-muted text-muted-foreground`             | Disabled states       |
+| `bg-accent text-accent-foreground`           | Hover states          |
+| `bg-card text-card-foreground`               | Card backgrounds      |
+| `text-foreground`                            | Body text             |
+| `text-muted-foreground`                      | Secondary text        |
+| `border-border`                              | Borders               |
+| `ring-ring`                                  | Focus rings           |
 
 ---
 
@@ -332,14 +338,14 @@ export function MyForm() {
 
 **Use these spacing values (multiples of 4px):**
 
-| Class | Value | Pixels | Usage |
-|-------|-------|--------|-------|
-| `2` | 0.5rem | 8px | Tight spacing |
-| `4` | 1rem | 16px | Standard spacing |
-| `6` | 1.5rem | 24px | Section spacing |
-| `8` | 2rem | 32px | Large gaps |
-| `12` | 3rem | 48px | Section dividers |
-| `16` | 4rem | 64px | Page sections |
+| Class | Value  | Pixels | Usage            |
+| ----- | ------ | ------ | ---------------- |
+| `2`   | 0.5rem | 8px    | Tight spacing    |
+| `4`   | 1rem   | 16px   | Standard spacing |
+| `6`   | 1.5rem | 24px   | Section spacing  |
+| `8`   | 2rem   | 32px   | Large gaps       |
+| `12`  | 3rem   | 48px   | Section dividers |
+| `16`  | 4rem   | 64px   | Page sections    |
 
 ---
 
@@ -428,7 +434,7 @@ function MyCard({ title, children }) {
     <CardTitle>{title}</CardTitle>
   </CardHeader>
   <CardContent>{children}</CardContent>
-</Card>
+</Card>;
 ```
 
 ### ❌ Mistake 5: Not using cn() utility
@@ -497,7 +503,7 @@ Add to `.github/copilot-instructions.md`:
 ```markdown
 # Component Guidelines
 
-- Import from @/components/ui/*
+- Import from @/components/ui/\*
 - Use semantic colors: bg-primary, text-destructive
 - Spacing: multiples of 4 (p-4, mb-6, gap-8)
 - Use cn() for className merging
@@ -525,20 +531,20 @@ interface DashboardCardProps {
 
 export function DashboardCard({ title, value, trend, className }: DashboardCardProps) {
   return (
-    <Card className={cn("p-6", className)}>
+    <Card className={cn('p-6', className)}>
       <CardHeader>
-        <CardTitle className="text-sm font-medium text-muted-foreground">
-          {title}
-        </CardTitle>
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>
         {trend && (
-          <p className={cn(
-            "text-xs",
-            trend === 'up' && "text-green-600",
-            trend === 'down' && "text-destructive"
-          )}>
+          <p
+            className={cn(
+              'text-xs',
+              trend === 'up' && 'text-green-600',
+              trend === 'down' && 'text-destructive'
+            )}
+          >
             {trend === 'up' ? '↑' : '↓'} Trend
           </p>
         )}
@@ -549,6 +555,7 @@ export function DashboardCard({ title, value, trend, className }: DashboardCardP
 ```
 
 **Why it's good:**
+
 - ✅ Imports from `@/components/ui/*`
 - ✅ Uses semantic tokens
 - ✅ Uses `cn()` utility
diff --git a/frontend/docs/design-system/99-reference.md b/frontend/docs/design-system/99-reference.md
index c6665a2..9ff9413 100644
--- a/frontend/docs/design-system/99-reference.md
+++ b/frontend/docs/design-system/99-reference.md
@@ -20,21 +20,21 @@
 
 ### Semantic Colors
 
-| Token | Usage | Example |
-|-------|-------|---------|
-| `bg-primary text-primary-foreground` | CTAs, primary actions | Primary button |
-| `bg-secondary text-secondary-foreground` | Secondary actions | Secondary button |
-| `bg-destructive text-destructive-foreground` | Delete, errors | Delete button, error alert |
-| `bg-muted text-muted-foreground` | Disabled, subtle | Disabled button, TabsList |
-| `bg-accent text-accent-foreground` | Hover states | Dropdown hover |
-| `bg-card text-card-foreground` | Cards, elevated surfaces | Card component |
-| `bg-popover text-popover-foreground` | Popovers, dropdowns | Dropdown content |
-| `bg-background text-foreground` | Page background | Body |
-| `text-foreground` | Body text | Paragraphs |
-| `text-muted-foreground` | Secondary text | Captions, helper text |
-| `border-border` | Borders, dividers | Card borders, separators |
-| `border-input` | Input borders | Text input border |
-| `ring-ring` | Focus indicators | Focus ring |
+| Token                                        | Usage                    | Example                    |
+| -------------------------------------------- | ------------------------ | -------------------------- |
+| `bg-primary text-primary-foreground`         | CTAs, primary actions    | Primary button             |
+| `bg-secondary text-secondary-foreground`     | Secondary actions        | Secondary button           |
+| `bg-destructive text-destructive-foreground` | Delete, errors           | Delete button, error alert |
+| `bg-muted text-muted-foreground`             | Disabled, subtle         | Disabled button, TabsList  |
+| `bg-accent text-accent-foreground`           | Hover states             | Dropdown hover             |
+| `bg-card text-card-foreground`               | Cards, elevated surfaces | Card component             |
+| `bg-popover text-popover-foreground`         | Popovers, dropdowns      | Dropdown content           |
+| `bg-background text-foreground`              | Page background          | Body                       |
+| `text-foreground`                            | Body text                | Paragraphs                 |
+| `text-muted-foreground`                      | Secondary text           | Captions, helper text      |
+| `border-border`                              | Borders, dividers        | Card borders, separators   |
+| `border-input`                               | Input borders            | Text input border          |
+| `ring-ring`                                  | Focus indicators         | Focus ring                 |
 
 ### Usage Examples
 
@@ -61,29 +61,29 @@
 
 ### Font Sizes
 
-| Class | rem | px | Use Case | Common |
-|-------|-----|----|----|:------:|
-| `text-xs` | 0.75rem | 12px | Labels, fine print | |
-| `text-sm` | 0.875rem | 14px | Secondary text, captions | ⭐ |
-| `text-base` | 1rem | 16px | Body text (default) | ⭐ |
-| `text-lg` | 1.125rem | 18px | Subheadings | |
-| `text-xl` | 1.25rem | 20px | Card titles | ⭐ |
-| `text-2xl` | 1.5rem | 24px | Section headings | ⭐ |
-| `text-3xl` | 1.875rem | 30px | Page titles | ⭐ |
-| `text-4xl` | 2.25rem | 36px | Large headings | |
-| `text-5xl` | 3rem | 48px | Hero text | |
+| Class       | rem      | px   | Use Case                 | Common |
+| ----------- | -------- | ---- | ------------------------ | :----: |
+| `text-xs`   | 0.75rem  | 12px | Labels, fine print       |        |
+| `text-sm`   | 0.875rem | 14px | Secondary text, captions |   ⭐   |
+| `text-base` | 1rem     | 16px | Body text (default)      |   ⭐   |
+| `text-lg`   | 1.125rem | 18px | Subheadings              |        |
+| `text-xl`   | 1.25rem  | 20px | Card titles              |   ⭐   |
+| `text-2xl`  | 1.5rem   | 24px | Section headings         |   ⭐   |
+| `text-3xl`  | 1.875rem | 30px | Page titles              |   ⭐   |
+| `text-4xl`  | 2.25rem  | 36px | Large headings           |        |
+| `text-5xl`  | 3rem     | 48px | Hero text                |        |
 
 ⭐ = Most commonly used
 
 ### Font Weights
 
-| Class | Value | Use Case | Common |
-|-------|-------|----------|:------:|
-| `font-light` | 300 | De-emphasized text | |
-| `font-normal` | 400 | Body text (default) | ⭐ |
-| `font-medium` | 500 | Labels, menu items | ⭐ |
-| `font-semibold` | 600 | Subheadings, buttons | ⭐ |
-| `font-bold` | 700 | Headings, emphasis | ⭐ |
+| Class           | Value | Use Case             | Common |
+| --------------- | ----- | -------------------- | :----: |
+| `font-light`    | 300   | De-emphasized text   |        |
+| `font-normal`   | 400   | Body text (default)  |   ⭐   |
+| `font-medium`   | 500   | Labels, menu items   |   ⭐   |
+| `font-semibold` | 600   | Subheadings, buttons |   ⭐   |
+| `font-bold`     | 700   | Headings, emphasis   |   ⭐   |
 
 ⭐ = Most commonly used
 
@@ -115,35 +115,35 @@
 
 ### Spacing Values
 
-| Token | rem | px | Use Case | Common |
-|-------|-----|----|----|:------:|
-| `0` | 0 | 0px | No spacing | |
-| `px` | - | 1px | Borders | |
-| `0.5` | 0.125rem | 2px | Very tight | |
-| `1` | 0.25rem | 4px | Icon gaps | |
-| `2` | 0.5rem | 8px | Tight spacing (label → input) | ⭐ |
-| `3` | 0.75rem | 12px | Component padding | |
-| `4` | 1rem | 16px | Standard spacing (form fields) | ⭐ |
-| `5` | 1.25rem | 20px | Medium spacing | |
-| `6` | 1.5rem | 24px | Section spacing (cards) | ⭐ |
-| `8` | 2rem | 32px | Large gaps | ⭐ |
-| `10` | 2.5rem | 40px | Very large gaps | |
-| `12` | 3rem | 48px | Section dividers | ⭐ |
-| `16` | 4rem | 64px | Page sections | |
+| Token | rem      | px   | Use Case                       | Common |
+| ----- | -------- | ---- | ------------------------------ | :----: |
+| `0`   | 0        | 0px  | No spacing                     |        |
+| `px`  | -        | 1px  | Borders                        |        |
+| `0.5` | 0.125rem | 2px  | Very tight                     |        |
+| `1`   | 0.25rem  | 4px  | Icon gaps                      |        |
+| `2`   | 0.5rem   | 8px  | Tight spacing (label → input)  |   ⭐   |
+| `3`   | 0.75rem  | 12px | Component padding              |        |
+| `4`   | 1rem     | 16px | Standard spacing (form fields) |   ⭐   |
+| `5`   | 1.25rem  | 20px | Medium spacing                 |        |
+| `6`   | 1.5rem   | 24px | Section spacing (cards)        |   ⭐   |
+| `8`   | 2rem     | 32px | Large gaps                     |   ⭐   |
+| `10`  | 2.5rem   | 40px | Very large gaps                |        |
+| `12`  | 3rem     | 48px | Section dividers               |   ⭐   |
+| `16`  | 4rem     | 64px | Page sections                  |        |
 
 ⭐ = Most commonly used
 
 ### Spacing Methods
 
-| Method | Use Case | Example |
-|--------|----------|---------|
-| `gap-4` | Flex/grid spacing | `flex gap-4` |
-| `space-y-4` | Vertical stack spacing | `space-y-4` |
-| `space-x-4` | Horizontal stack spacing | `space-x-4` |
-| `p-4` | Padding (all sides) | `p-4` |
-| `px-4` | Horizontal padding | `px-4` |
-| `py-4` | Vertical padding | `py-4` |
-| `m-4` | Margin (exceptions only!) | `mt-8` |
+| Method      | Use Case                  | Example      |
+| ----------- | ------------------------- | ------------ |
+| `gap-4`     | Flex/grid spacing         | `flex gap-4` |
+| `space-y-4` | Vertical stack spacing    | `space-y-4`  |
+| `space-x-4` | Horizontal stack spacing  | `space-x-4`  |
+| `p-4`       | Padding (all sides)       | `p-4`        |
+| `px-4`      | Horizontal padding        | `px-4`       |
+| `py-4`      | Vertical padding          | `py-4`       |
+| `m-4`       | Margin (exceptions only!) | `mt-8`       |
 
 ### Common Spacing Patterns
 
@@ -217,52 +217,52 @@
 
 ```tsx
 // 1 → 2 → 3 progression (most common)
-className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
 
 // 1 → 2 → 4 progression
-className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6';
 
 // 1 → 2 progression (simple)
-className="grid grid-cols-1 md:grid-cols-2 gap-6"
+className = 'grid grid-cols-1 md:grid-cols-2 gap-6';
 
 // 1 → 3 progression (skip 2)
-className="grid grid-cols-1 lg:grid-cols-3 gap-6"
+className = 'grid grid-cols-1 lg:grid-cols-3 gap-6';
 ```
 
 ### Container Widths
 
 ```tsx
 // Standard container
-className="container mx-auto px-4"
+className = 'container mx-auto px-4';
 
 // Constrained widths
-className="max-w-md mx-auto"   // 448px - Forms
-className="max-w-lg mx-auto"   // 512px - Modals
-className="max-w-2xl mx-auto"  // 672px - Articles
-className="max-w-4xl mx-auto"  // 896px - Wide layouts
-className="max-w-7xl mx-auto"  // 1280px - Full page
+className = 'max-w-md mx-auto'; // 448px - Forms
+className = 'max-w-lg mx-auto'; // 512px - Modals
+className = 'max-w-2xl mx-auto'; // 672px - Articles
+className = 'max-w-4xl mx-auto'; // 896px - Wide layouts
+className = 'max-w-7xl mx-auto'; // 1280px - Full page
 ```
 
 ### Flex Patterns
 
 ```tsx
 // Horizontal flex
-className="flex gap-4"
+className = 'flex gap-4';
 
 // Vertical flex
-className="flex flex-col gap-4"
+className = 'flex flex-col gap-4';
 
 // Center items
-className="flex items-center justify-center"
+className = 'flex items-center justify-center';
 
 // Space between
-className="flex items-center justify-between"
+className = 'flex items-center justify-between';
 
 // Wrap items
-className="flex flex-wrap gap-4"
+className = 'flex flex-wrap gap-4';
 
 // Responsive: stack on mobile, row on desktop
-className="flex flex-col sm:flex-row gap-4"
+className = 'flex flex-col sm:flex-row gap-4';
 ```
 
 ---
@@ -273,9 +273,7 @@ className="flex flex-col sm:flex-row gap-4"
 
 ```tsx
 <div className="container mx-auto px-4 py-8">
-  <div className="max-w-4xl mx-auto space-y-6">
-    {/* Content */}
-  </div>
+  <div className="max-w-4xl mx-auto space-y-6">{/* Content */}</div>
 </div>
 ```
 
@@ -287,7 +285,9 @@ className="flex flex-col sm:flex-row gap-4"
     <CardTitle>Title</CardTitle>
     <CardDescription>Description</CardDescription>
   </div>
-  <Button variant="outline" size="sm">Action</Button>
+  <Button variant="outline" size="sm">
+    Action
+  </Button>
 </CardHeader>
 ```
 
@@ -319,9 +319,7 @@ className="flex flex-col sm:flex-row gap-4"
       <CardTitle>Form Title</CardTitle>
     </CardHeader>
     <CardContent>
-      <form className="space-y-4">
-        {/* Fields */}
-      </form>
+      <form className="space-y-4">{/* Fields */}</form>
     </CardContent>
   </Card>
 </div>
@@ -354,17 +352,13 @@ className="flex flex-col sm:flex-row gap-4"
 ### Responsive Text
 
 ```tsx
-<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">
-  Responsive Title
-</h1>
+<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">Responsive Title</h1>
 ```
 
 ### Responsive Padding
 
 ```tsx
-<div className="p-4 sm:p-6 lg:p-8">
-  Responsive padding
-</div>
+<div className="p-4 sm:p-6 lg:p-8">Responsive padding</div>
 ```
 
 ---
@@ -427,16 +421,16 @@ Has error?
 
 ## Keyboard Shortcuts
 
-| Key | Action | Context |
-|-----|--------|---------|
-| `Tab` | Move focus forward | All |
-| `Shift + Tab` | Move focus backward | All |
-| `Enter` | Activate button/link | Buttons, links |
-| `Space` | Activate button/checkbox | Buttons, checkboxes |
-| `Escape` | Close overlay | Dialogs, dropdowns |
-| `Arrow keys` | Navigate items | Dropdowns, lists |
-| `Home` | Jump to start | Lists |
-| `End` | Jump to end | Lists |
+| Key           | Action                   | Context             |
+| ------------- | ------------------------ | ------------------- |
+| `Tab`         | Move focus forward       | All                 |
+| `Shift + Tab` | Move focus backward      | All                 |
+| `Enter`       | Activate button/link     | Buttons, links      |
+| `Space`       | Activate button/checkbox | Buttons, checkboxes |
+| `Escape`      | Close overlay            | Dialogs, dropdowns  |
+| `Arrow keys`  | Navigate items           | Dropdowns, lists    |
+| `Home`        | Jump to start            | Lists               |
+| `End`         | Jump to end              | Lists               |
 
 ---
 
@@ -482,7 +476,13 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 
 // Utilities
@@ -506,53 +506,53 @@ import { Check, X, AlertCircle, Loader2 } from 'lucide-react';
 
 ```tsx
 // Required string
-z.string().min(1, 'Required')
+z.string().min(1, 'Required');
 
 // Email
-z.string().email('Invalid email')
+z.string().email('Invalid email');
 
 // Min/max length
-z.string().min(8, 'Min 8 chars').max(100, 'Max 100 chars')
+z.string().min(8, 'Min 8 chars').max(100, 'Max 100 chars');
 
 // Optional
-z.string().optional()
+z.string().optional();
 
 // Number
-z.coerce.number().min(0).max(100)
+z.coerce.number().min(0).max(100);
 
 // Enum
-z.enum(['admin', 'user', 'guest'])
+z.enum(['admin', 'user', 'guest']);
 
 // Boolean
-z.boolean().refine(val => val === true, { message: 'Must accept' })
+z.boolean().refine((val) => val === true, { message: 'Must accept' });
 
 // Password confirmation
 z.object({
   password: z.string().min(8),
-  confirmPassword: z.string()
-}).refine(data => data.password === data.confirmPassword, {
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
   message: "Passwords don't match",
-  path: ["confirmPassword"],
-})
+  path: ['confirmPassword'],
+});
 ```
 
 ---
 
 ## Responsive Breakpoints
 
-| Breakpoint | Min Width | Typical Device |
-|------------|-----------|----------------|
-| `sm:` | 640px | Large phones, small tablets |
-| `md:` | 768px | Tablets |
-| `lg:` | 1024px | Laptops, desktops |
-| `xl:` | 1280px | Large desktops |
-| `2xl:` | 1536px | Extra large screens |
+| Breakpoint | Min Width | Typical Device              |
+| ---------- | --------- | --------------------------- |
+| `sm:`      | 640px     | Large phones, small tablets |
+| `md:`      | 768px     | Tablets                     |
+| `lg:`      | 1024px    | Laptops, desktops           |
+| `xl:`      | 1280px    | Large desktops              |
+| `2xl:`     | 1536px    | Extra large screens         |
 
 ```tsx
 // Mobile-first (default → sm → md → lg)
-className="text-sm sm:text-base md:text-lg lg:text-xl"
-className="p-4 sm:p-6 lg:p-8"
-className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+className = 'text-sm sm:text-base md:text-lg lg:text-xl';
+className = 'p-4 sm:p-6 lg:p-8';
+className = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
 ```
 
 ---
@@ -562,20 +562,20 @@ className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
 ### Shadows
 
 ```tsx
-shadow-sm   // Cards, panels
-shadow-md   // Dropdowns, tooltips
-shadow-lg   // Modals, popovers
-shadow-xl   // Floating notifications
+shadow - sm; // Cards, panels
+shadow - md; // Dropdowns, tooltips
+shadow - lg; // Modals, popovers
+shadow - xl; // Floating notifications
 ```
 
 ### Border Radius
 
 ```tsx
-rounded-sm   // 2px - Tags, small badges
-rounded-md   // 4px - Inputs, small buttons
-rounded-lg   // 6px - Cards, buttons (default)
-rounded-xl   // 10px - Large cards, modals
-rounded-full // Pills, avatars, icon buttons
+rounded - sm; // 2px - Tags, small badges
+rounded - md; // 4px - Inputs, small buttons
+rounded - lg; // 6px - Cards, buttons (default)
+rounded - xl; // 10px - Large cards, modals
+rounded - full; // Pills, avatars, icon buttons
 ```
 
 ---
@@ -589,6 +589,7 @@ rounded-full // Pills, avatars, icon buttons
 ---
 
 **Related Documentation:**
+
 - [Quick Start](./00-quick-start.md) - 5-minute crash course
 - [Foundations](./01-foundations.md) - Detailed color, typography, spacing
 - [Components](./02-components.md) - All component variants
diff --git a/frontend/docs/design-system/PROJECT_PROGRESS.md b/frontend/docs/design-system/PROJECT_PROGRESS.md
index 9f676dc..4d193ae 100644
--- a/frontend/docs/design-system/PROJECT_PROGRESS.md
+++ b/frontend/docs/design-system/PROJECT_PROGRESS.md
@@ -10,7 +10,9 @@
 ## Project Overview
 
 ### Vision
+
 Create a world-class design system documentation that:
+
 - Follows Pareto principle (80% coverage with 20% content)
 - Includes AI-specific code generation guidelines
 - Provides interactive, copy-paste examples
@@ -18,6 +20,7 @@ Create a world-class design system documentation that:
 - Maintains perfect internal coherence and link integrity
 
 ### Key Principles
+
 1. **Pareto-Efficiency** - 80/20 rule applied throughout
 2. **AI-Optimized** - Dedicated guidelines for AI code generation
 3. **Interconnected** - All docs cross-reference each other
@@ -163,6 +166,7 @@ Create a world-class design system documentation that:
 ### Documentation Review & Fixes ✅
 
 #### Issues Found During Review:
+
 1. **Time estimates in section headers** - Removed all (user request)
    - Removed "⏱️ Time to productive: 5 minutes" from header
    - Removed "(3 minutes)", "(30 seconds)" from all section headers
@@ -178,6 +182,7 @@ Create a world-class design system documentation that:
    - Fixed: Added missing `SelectGroup` and `SelectLabel` to import statement in 02-components.md
 
 #### Comprehensive Review Results:
+
 - **✅ 100+ links checked**
 - **✅ 0 broken internal doc links**
 - **✅ 0 logic inconsistencies**
@@ -200,7 +205,9 @@ Create a world-class design system documentation that:
 ## Phase 2: Interactive Demos (PENDING)
 
 ### Objective
+
 Create live, interactive demonstration pages at `/dev/*` routes with:
+
 - Copy-paste ready code snippets
 - Before/after comparisons
 - Live component examples
@@ -272,12 +279,14 @@ Create live, interactive demonstration pages at `/dev/*` routes with:
 ### Overall Progress: 100% Complete ✅
 
 **Phase 1: Documentation** ✅ 100% (14/14 tasks)
+
 - All documentation files created (~7,600 lines)
 - All issues fixed (4 issues resolved)
 - Comprehensive review completed (100+ links verified)
 - CLAUDE.md updated
 
 **Phase 2: Interactive Demos** ✅ 100% (6/6 tasks)
+
 - Utility components created (~470 lines)
 - Hub page created (~220 lines)
 - All demo pages created and enhanced (~2,388 lines)
@@ -386,6 +395,7 @@ Create live, interactive demonstration pages at `/dev/*` routes with:
 ### Technical Implementation
 
 **Technologies Used:**
+
 - Next.js 15 App Router
 - React 19 + TypeScript
 - shadcn/ui components (all)
@@ -395,6 +405,7 @@ Create live, interactive demonstration pages at `/dev/*` routes with:
 - Responsive design (mobile-first)
 
 **Architecture:**
+
 - Server components for static pages (hub, layouts, spacing)
 - Client components for interactive pages (components, forms)
 - Reusable utility components in `/src/components/dev/`
diff --git a/frontend/docs/design-system/README.md b/frontend/docs/design-system/README.md
index 78d128d..70fabb6 100644
--- a/frontend/docs/design-system/README.md
+++ b/frontend/docs/design-system/README.md
@@ -6,26 +6,28 @@
 
 ## 🚀 Quick Navigation
 
-| For... | Start Here | Time |
-|--------|-----------|------|
-| **Quick Start** | [⚡ 5-Minute Crash Course](./00-quick-start.md) | 5 min |
-| **Component Development** | [🧩 Components](./02-components.md) → [🔨 Creation Guide](./05-component-creation.md) | 15 min |
-| **Layout Design** | [📐 Layouts](./03-layouts.md) → [📏 Spacing](./04-spacing-philosophy.md) | 20 min |
-| **AI Code Generation** | [🤖 AI Guidelines](./08-ai-guidelines.md) | 3 min |
-| **Quick Reference** | [📚 Reference Tables](./99-reference.md) | Instant |
-| **Complete Guide** | Read all docs in order | 1 hour |
+| For...                    | Start Here                                                                            | Time    |
+| ------------------------- | ------------------------------------------------------------------------------------- | ------- |
+| **Quick Start**           | [⚡ 5-Minute Crash Course](./00-quick-start.md)                                       | 5 min   |
+| **Component Development** | [🧩 Components](./02-components.md) → [🔨 Creation Guide](./05-component-creation.md) | 15 min  |
+| **Layout Design**         | [📐 Layouts](./03-layouts.md) → [📏 Spacing](./04-spacing-philosophy.md)              | 20 min  |
+| **AI Code Generation**    | [🤖 AI Guidelines](./08-ai-guidelines.md)                                             | 3 min   |
+| **Quick Reference**       | [📚 Reference Tables](./99-reference.md)                                              | Instant |
+| **Complete Guide**        | Read all docs in order                                                                | 1 hour  |
 
 ---
 
 ## 📖 Documentation Structure
 
 ### Getting Started
+
 - **[00. Quick Start](./00-quick-start.md)** ⚡
   - 5-minute crash course
   - Essential components and patterns
   - Copy-paste ready examples
 
 ### Fundamentals
+
 - **[01. Foundations](./01-foundations.md)** 🎨
   - Color system (OKLCH)
   - Typography scale
@@ -39,6 +41,7 @@
   - Composition patterns
 
 ### Layouts & Spacing
+
 - **[03. Layouts](./03-layouts.md)** 📐
   - Grid vs Flex decision tree
   - Common layout patterns
@@ -52,6 +55,7 @@
   - Consistency patterns
 
 ### Building Components
+
 - **[05. Component Creation](./05-component-creation.md)** 🔨
   - When to create vs compose
   - Component templates
@@ -65,6 +69,7 @@
   - Multi-field examples
 
 ### Best Practices
+
 - **[07. Accessibility](./07-accessibility.md)** ♿
   - WCAG AA compliance
   - Keyboard navigation
@@ -78,6 +83,7 @@
   - Component templates
 
 ### Reference
+
 - **[99. Reference Tables](./99-reference.md)** 📚
   - Quick lookup tables
   - All tokens at a glance
@@ -95,6 +101,7 @@ Explore live examples and copy-paste code:
 - **[Form Patterns](/dev/forms)** - Complete form examples
 
 Each demo page includes:
+
 - ✅ Live, interactive examples
 - ✅ Click-to-copy code snippets
 - ✅ Before/after comparisons
@@ -105,6 +112,7 @@ Each demo page includes:
 ## 🛤️ Learning Paths
 
 ### Path 1: Speedrun (5 minutes)
+
 **Goal**: Start building immediately
 
 1. [Quick Start](./00-quick-start.md) - Essential patterns
@@ -116,6 +124,7 @@ Each demo page includes:
 ---
 
 ### Path 2: Component Developer (15 minutes)
+
 **Goal**: Master component building
 
 1. [Quick Start](./00-quick-start.md) - Basics
@@ -128,6 +137,7 @@ Each demo page includes:
 ---
 
 ### Path 3: Layout Specialist (20 minutes)
+
 **Goal**: Master layouts and spacing
 
 1. [Quick Start](./00-quick-start.md) - Basics
@@ -141,6 +151,7 @@ Each demo page includes:
 ---
 
 ### Path 4: Form Specialist (15 minutes)
+
 **Goal**: Master forms and validation
 
 1. [Quick Start](./00-quick-start.md) - Basics
@@ -154,6 +165,7 @@ Each demo page includes:
 ---
 
 ### Path 5: AI Setup (3 minutes)
+
 **Goal**: Configure AI for perfect code generation
 
 1. [AI Guidelines](./08-ai-guidelines.md) - Read once, code forever
@@ -164,9 +176,11 @@ Each demo page includes:
 ---
 
 ### Path 6: Comprehensive Mastery (1 hour)
+
 **Goal**: Complete understanding of the design system
 
 Read all documents in order:
+
 1. [Quick Start](./00-quick-start.md)
 2. [Foundations](./01-foundations.md)
 3. [Components](./02-components.md)
@@ -211,18 +225,21 @@ Our design system is built on these core principles:
 ## 🤝 Contributing to the Design System
 
 ### Adding a New Component
+
 1. Read [Component Creation Guide](./05-component-creation.md)
 2. Follow the template
 3. Add to [Component Showcase](/dev/components)
 4. Document in [Components](./02-components.md)
 
 ### Adding a New Pattern
+
 1. Validate it solves a real need (used 3+ times)
 2. Document in appropriate guide
 3. Add to [Reference](./99-reference.md)
 4. Create example in `/dev/`
 
 ### Updating Colors/Tokens
+
 1. Edit `src/app/globals.css`
 2. Test in both light and dark modes
 3. Verify WCAG AA contrast
diff --git a/frontend/e2e/README.md b/frontend/e2e/README.md
index 95f9aa5..eff7a70 100644
--- a/frontend/e2e/README.md
+++ b/frontend/e2e/README.md
@@ -63,6 +63,7 @@ npm run test:e2e -- --debug
 **Test Results:** 34/43 passing (79% pass rate)
 
 ### Passing Tests ✅
+
 - All AuthGuard tests (8/8)
 - Most Login tests (6/8)
 - Most Registration tests (7/11)
@@ -83,6 +84,7 @@ The 9 failing tests are due to minor validation message text mismatches between
 ### Recommendations
 
 These failures can be fixed by:
+
 1. Inspecting the actual error messages rendered by forms
 2. Updating test assertions to match exact wording
 3. Adding more specific selectors to avoid strict mode violations
@@ -98,6 +100,7 @@ The core functionality is working - the failures are only assertion mismatches,
 ## Configuration
 
 See `playwright.config.ts` for:
+
 - Browser targets (Chromium, Firefox, WebKit)
 - Base URL configuration
 - Screenshot and video settings
diff --git a/frontend/e2e/admin-access.spec.ts b/frontend/e2e/admin-access.spec.ts
index 1ac75fc..6daa498 100644
--- a/frontend/e2e/admin-access.spec.ts
+++ b/frontend/e2e/admin-access.spec.ts
@@ -4,10 +4,7 @@
  */
 
 import { test, expect } from '@playwright/test';
-import {
-  setupAuthenticatedMocks,
-  setupSuperuserMocks,
-} from './helpers/auth';
+import { setupAuthenticatedMocks, setupSuperuserMocks } from './helpers/auth';
 
 test.describe('Admin Access Control', () => {
   test('regular user should not see admin link in header', async ({ page }) => {
@@ -25,9 +22,7 @@ test.describe('Admin Access Control', () => {
     expect(visibleAdminLinks).toBe(0);
   });
 
-  test('regular user should be redirected when accessing admin page directly', async ({
-    page,
-  }) => {
+  test('regular user should be redirected when accessing admin page directly', async ({ page }) => {
     // Set up mocks for regular user
     await setupAuthenticatedMocks(page);
     // Auth already cached in storage state (loginViaUI removed for performance)
@@ -60,9 +55,7 @@ test.describe('Admin Access Control', () => {
     await expect(headerAdminLink).toHaveAttribute('href', '/admin');
   });
 
-  test('superuser should be able to access admin dashboard', async ({
-    page,
-  }) => {
+  test('superuser should be able to access admin dashboard', async ({ page }) => {
     // Set up mocks for superuser
     await setupSuperuserMocks(page);
     // Auth already cached in storage state (loginViaUI removed for performance)
@@ -110,23 +103,15 @@ test.describe('Admin Dashboard', () => {
     await expect(statTitles.filter({ hasText: 'Total Users' })).toBeVisible();
     await expect(statTitles.filter({ hasText: 'Active Users' })).toBeVisible();
     await expect(statTitles.filter({ hasText: 'Organizations' })).toBeVisible();
-    await expect(
-      statTitles.filter({ hasText: 'Active Sessions' })
-    ).toBeVisible();
+    await expect(statTitles.filter({ hasText: 'Active Sessions' })).toBeVisible();
   });
 
   test('should display quick action cards', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', { name: 'Quick Actions', exact: true })
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Quick Actions', exact: true })).toBeVisible();
 
     // Should have three action cards (use unique descriptive text to avoid sidebar matches)
-    await expect(
-      page.getByText('View, create, and manage user accounts')
-    ).toBeVisible();
-    await expect(
-      page.getByText('Manage organizations and their members')
-    ).toBeVisible();
+    await expect(page.getByText('View, create, and manage user accounts')).toBeVisible();
+    await expect(page.getByText('Manage organizations and their members')).toBeVisible();
     await expect(page.getByText('Configure system-wide settings')).toBeVisible();
   });
 });
@@ -222,9 +207,7 @@ test.describe('Admin Navigation', () => {
     await expect(page.getByText('Admin Panel')).toBeVisible();
   });
 
-  test('should navigate back to dashboard from users page', async ({
-    page,
-  }) => {
+  test('should navigate back to dashboard from users page', async ({ page }) => {
     await page.goto('/admin/users');
 
     // Click dashboard link in sidebar
@@ -275,10 +258,7 @@ test.describe('Admin Breadcrumbs', () => {
     // Click 'Admin' breadcrumb to go back to dashboard
     const adminBreadcrumb = page.getByTestId('breadcrumb-admin');
 
-    await Promise.all([
-      page.waitForURL('/admin'),
-      adminBreadcrumb.click()
-    ]);
+    await Promise.all([page.waitForURL('/admin'), adminBreadcrumb.click()]);
 
     await expect(page).toHaveURL('/admin');
   });
diff --git a/frontend/e2e/admin-dashboard.spec.ts b/frontend/e2e/admin-dashboard.spec.ts
index 035e8b6..03b5e83 100644
--- a/frontend/e2e/admin-dashboard.spec.ts
+++ b/frontend/e2e/admin-dashboard.spec.ts
@@ -74,18 +74,19 @@ test.describe('Admin Dashboard - Quick Actions', () => {
     const quickActionsSection = page.locator('h2:has-text("Quick Actions")').locator('..');
 
     // Use heading role to match only the card titles, not descriptions
-    await expect(quickActionsSection.getByRole('heading', { name: 'User Management' })).toBeVisible();
+    await expect(
+      quickActionsSection.getByRole('heading', { name: 'User Management' })
+    ).toBeVisible();
     await expect(quickActionsSection.getByRole('heading', { name: 'Organizations' })).toBeVisible();
-    await expect(quickActionsSection.getByRole('heading', { name: 'System Settings' })).toBeVisible();
+    await expect(
+      quickActionsSection.getByRole('heading', { name: 'System Settings' })
+    ).toBeVisible();
   });
 
   test('should navigate to users page when clicking user management', async ({ page }) => {
     const userManagementLink = page.getByRole('link', { name: /User Management/i });
 
-    await Promise.all([
-      page.waitForURL('/admin/users'),
-      userManagementLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/admin/users'), userManagementLink.click()]);
 
     await expect(page).toHaveURL('/admin/users');
   });
@@ -95,10 +96,7 @@ test.describe('Admin Dashboard - Quick Actions', () => {
     const quickActionsSection = page.locator('h2:has-text("Quick Actions")').locator('..');
     const organizationsLink = quickActionsSection.getByRole('link', { name: /Organizations/i });
 
-    await Promise.all([
-      page.waitForURL('/admin/organizations'),
-      organizationsLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/admin/organizations'), organizationsLink.click()]);
 
     await expect(page).toHaveURL('/admin/organizations');
   });
diff --git a/frontend/e2e/admin-organization-members.spec.ts b/frontend/e2e/admin-organization-members.spec.ts
index 91799f1..9ce3b73 100644
--- a/frontend/e2e/admin-organization-members.spec.ts
+++ b/frontend/e2e/admin-organization-members.spec.ts
@@ -15,7 +15,9 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
     await page.waitForSelector('table tbody tr');
   });
 
-  test('should navigate to members page when clicking view members in action menu', async ({ page }) => {
+  test('should navigate to members page when clicking view members in action menu', async ({
+    page,
+  }) => {
     // Click first organization's action menu
     const actionButton = page.getByRole('button', { name: /Actions for/i }).first();
     await actionButton.click();
@@ -23,7 +25,7 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
     // Click "View Members"
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      page.getByText('View Members').click()
+      page.getByText('View Members').click(),
     ]);
 
     // Should be on members page
@@ -38,7 +40,7 @@ test.describe('Admin Organization Members - Navigation from Organizations List',
     // Click on member count
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      memberButton.click()
+      memberButton.click(),
     ]);
 
     // Should be on members page
@@ -59,7 +61,7 @@ test.describe('Admin Organization Members - Page Structure', () => {
 
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      page.getByText('View Members').click()
+      page.getByText('View Members').click(),
     ]);
   });
 
@@ -74,7 +76,9 @@ test.describe('Admin Organization Members - Page Structure', () => {
   });
 
   test('should display page description', async ({ page }) => {
-    await expect(page.getByText('Manage members and their roles within the organization')).toBeVisible();
+    await expect(
+      page.getByText('Manage members and their roles within the organization')
+    ).toBeVisible();
   });
 
   test('should display add member button', async ({ page }) => {
@@ -87,7 +91,6 @@ test.describe('Admin Organization Members - Page Structure', () => {
     await expect(backButton).toBeVisible();
   });
 
-
   test('should have proper heading hierarchy', async ({ page }) => {
     // Wait for page to load
     await page.waitForSelector('table');
@@ -129,7 +132,7 @@ test.describe('Admin Organization Members - AddMemberDialog E2E Tests', () => {
 
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      page.getByText('View Members').click()
+      page.getByText('View Members').click(),
     ]);
 
     // Open Add Member dialog
@@ -150,7 +153,9 @@ test.describe('Admin Organization Members - AddMemberDialog E2E Tests', () => {
   });
 
   test('should display dialog description', async ({ page }) => {
-    await expect(page.getByText(/Add a user to this organization and assign them a role/i)).toBeVisible();
+    await expect(
+      page.getByText(/Add a user to this organization and assign them a role/i)
+    ).toBeVisible();
   });
 
   test('should display user email select field', async ({ page }) => {
diff --git a/frontend/e2e/admin-organizations.spec.ts b/frontend/e2e/admin-organizations.spec.ts
index 675ca21..411f97f 100644
--- a/frontend/e2e/admin-organizations.spec.ts
+++ b/frontend/e2e/admin-organizations.spec.ts
@@ -193,7 +193,7 @@ test.describe('Admin Organization Management - Action Menu', () => {
     // Click view members - use Promise.all for Next.js Link navigation
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      page.getByText('View Members').click()
+      page.getByText('View Members').click(),
     ]);
 
     // Should navigate to members page
@@ -220,7 +220,9 @@ test.describe('Admin Organization Management - Action Menu', () => {
     await page.getByText('Delete Organization').click();
 
     // Warning should be shown
-    await expect(page.getByText(/This action cannot be undone and will remove all associated data/i)).toBeVisible();
+    await expect(
+      page.getByText(/This action cannot be undone and will remove all associated data/i)
+    ).toBeVisible();
   });
 
   test('should close delete dialog when clicking cancel', async ({ page }) => {
@@ -307,7 +309,7 @@ test.describe('Admin Organization Management - Member Count Interaction', () =>
     // Click on member count - use Promise.all for Next.js Link navigation
     await Promise.all([
       page.waitForURL(/\/admin\/organizations\/[^/]+\/members/),
-      memberButton.click()
+      memberButton.click(),
     ]);
 
     // Should navigate to members page
diff --git a/frontend/e2e/admin-users.spec.ts b/frontend/e2e/admin-users.spec.ts
index 50e0c4c..ade3f38 100644
--- a/frontend/e2e/admin-users.spec.ts
+++ b/frontend/e2e/admin-users.spec.ts
@@ -132,10 +132,13 @@ test.describe('Admin User Management - Search and Filters', () => {
     await searchInput.fill('admin');
 
     // Wait for debounce and URL to update
-    await page.waitForFunction(() => {
-      const url = new URL(window.location.href);
-      return url.searchParams.has('search');
-    }, { timeout: 2000 });
+    await page.waitForFunction(
+      () => {
+        const url = new URL(window.location.href);
+        return url.searchParams.has('search');
+      },
+      { timeout: 2000 }
+    );
 
     // Check that URL contains search parameter
     expect(page.url()).toContain('search=admin');
@@ -144,51 +147,66 @@ test.describe('Admin User Management - Search and Filters', () => {
   // Note: Active status filter URL parameter behavior is tested in the unit tests
   // (UserManagementContent.test.tsx). Skipping E2E test due to flaky URL timing.
 
-  test('should filter users by inactive status (adds active=false param to URL)', async ({ page }) => {
+  test('should filter users by inactive status (adds active=false param to URL)', async ({
+    page,
+  }) => {
     const statusFilter = page.getByRole('combobox').first();
     await statusFilter.click();
 
     // Click on "Inactive" option and wait for URL update
     await Promise.all([
-      page.waitForFunction(() => {
-        const url = new URL(window.location.href);
-        return url.searchParams.get('active') === 'false';
-      }, { timeout: 2000 }),
-      page.getByRole('option', { name: 'Inactive' }).click()
+      page.waitForFunction(
+        () => {
+          const url = new URL(window.location.href);
+          return url.searchParams.get('active') === 'false';
+        },
+        { timeout: 2000 }
+      ),
+      page.getByRole('option', { name: 'Inactive' }).click(),
     ]);
 
     // Check that URL contains active=false parameter
     expect(page.url()).toContain('active=false');
   });
 
-  test('should filter users by superuser status (adds superuser param to URL)', async ({ page }) => {
+  test('should filter users by superuser status (adds superuser param to URL)', async ({
+    page,
+  }) => {
     const userTypeFilter = page.getByRole('combobox').nth(1);
     await userTypeFilter.click();
 
     // Click on "Superusers" option and wait for URL update
     await Promise.all([
-      page.waitForFunction(() => {
-        const url = new URL(window.location.href);
-        return url.searchParams.get('superuser') === 'true';
-      }, { timeout: 2000 }),
-      page.getByRole('option', { name: 'Superusers' }).click()
+      page.waitForFunction(
+        () => {
+          const url = new URL(window.location.href);
+          return url.searchParams.get('superuser') === 'true';
+        },
+        { timeout: 2000 }
+      ),
+      page.getByRole('option', { name: 'Superusers' }).click(),
     ]);
 
     // Check that URL contains superuser parameter
     expect(page.url()).toContain('superuser=true');
   });
 
-  test('should filter users by regular user status (adds superuser=false param to URL)', async ({ page }) => {
+  test('should filter users by regular user status (adds superuser=false param to URL)', async ({
+    page,
+  }) => {
     const userTypeFilter = page.getByRole('combobox').nth(1);
     await userTypeFilter.click();
 
     // Click on "Regular" option and wait for URL update
     await Promise.all([
-      page.waitForFunction(() => {
-        const url = new URL(window.location.href);
-        return url.searchParams.get('superuser') === 'false';
-      }, { timeout: 2000 }),
-      page.getByRole('option', { name: 'Regular' }).click()
+      page.waitForFunction(
+        () => {
+          const url = new URL(window.location.href);
+          return url.searchParams.get('superuser') === 'false';
+        },
+        { timeout: 2000 }
+      ),
+      page.getByRole('option', { name: 'Regular' }).click(),
     ]);
 
     // Check that URL contains superuser=false parameter
@@ -208,10 +226,13 @@ test.describe('Admin User Management - Search and Filters', () => {
     const searchInput = page.getByPlaceholder(/Search by name or email/i);
     await searchInput.fill('test');
 
-    await page.waitForFunction(() => {
-      const url = new URL(window.location.href);
-      return url.searchParams.has('search');
-    }, { timeout: 2000 });
+    await page.waitForFunction(
+      () => {
+        const url = new URL(window.location.href);
+        return url.searchParams.has('search');
+      },
+      { timeout: 2000 }
+    );
 
     // URL should have page=1 or no page param (defaults to 1)
     const newUrl = page.url();
@@ -502,9 +523,7 @@ test.describe('Admin User Management - Edit User Dialog', () => {
     await page.getByText('Edit User').click();
 
     // Password field should indicate it's optional
-    await expect(
-      page.getByLabel(/Password.*\(leave blank to keep current\)/i)
-    ).toBeVisible();
+    await expect(page.getByLabel(/Password.*\(leave blank to keep current\)/i)).toBeVisible();
   });
 
   test('should have placeholder for password in edit mode', async ({ page }) => {
diff --git a/frontend/e2e/auth-guard.spec.ts b/frontend/e2e/auth-guard.spec.ts
index 67fec64..7b47c27 100644
--- a/frontend/e2e/auth-guard.spec.ts
+++ b/frontend/e2e/auth-guard.spec.ts
@@ -11,9 +11,7 @@ test.describe('AuthGuard - Route Protection', () => {
     });
   });
 
-  test('should redirect to login when accessing protected route without auth', async ({
-    page,
-  }) => {
+  test('should redirect to login when accessing protected route without auth', async ({ page }) => {
     // Try to access a protected route (if you have one)
     // For now, we'll test the root if it's protected
     // Adjust the route based on your actual protected routes
diff --git a/frontend/e2e/auth-login.spec.ts b/frontend/e2e/auth-login.spec.ts
index de0dc91..2f3a1fe 100644
--- a/frontend/e2e/auth-login.spec.ts
+++ b/frontend/e2e/auth-login.spec.ts
@@ -162,10 +162,7 @@ test.describe('Login Flow', () => {
     // Click forgot password link - use Promise.all to wait for navigation
     const forgotLink = page.getByRole('link', { name: 'Forgot password?' });
 
-    await Promise.all([
-      page.waitForURL('/password-reset'),
-      forgotLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/password-reset'), forgotLink.click()]);
 
     // Should be on password reset page
     await expect(page).toHaveURL('/password-reset');
@@ -176,10 +173,7 @@ test.describe('Login Flow', () => {
     // Click sign up link - use Promise.all to wait for navigation
     const signupLink = page.getByRole('link', { name: 'Sign up' });
 
-    await Promise.all([
-      page.waitForURL('/register'),
-      signupLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/register'), signupLink.click()]);
 
     // Should be on register page
     await expect(page).toHaveURL('/register');
diff --git a/frontend/e2e/auth-password-reset.spec.ts b/frontend/e2e/auth-password-reset.spec.ts
index 74126ae..0ad7d2f 100644
--- a/frontend/e2e/auth-password-reset.spec.ts
+++ b/frontend/e2e/auth-password-reset.spec.ts
@@ -55,10 +55,7 @@ test.describe('Password Reset Request Flow', () => {
     // Click back to login link - use Promise.all to wait for navigation
     const loginLink = page.getByRole('link', { name: 'Back to login' });
 
-    await Promise.all([
-      page.waitForURL('/login', ),
-      loginLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/login'), loginLink.click()]);
 
     // Should be on login page
     await expect(page).toHaveURL('/login');
@@ -196,10 +193,7 @@ test.describe('Password Reset Confirm Flow', () => {
     // Click request new reset link - use Promise.all to wait for navigation
     const resetLink = page.getByRole('link', { name: 'Request new reset link' });
 
-    await Promise.all([
-      page.waitForURL('/password-reset', ),
-      resetLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/password-reset'), resetLink.click()]);
 
     // Should be on password reset request page
     await expect(page).toHaveURL('/password-reset');
diff --git a/frontend/e2e/auth-register.spec.ts b/frontend/e2e/auth-register.spec.ts
index 80fe8b2..b3666b5 100644
--- a/frontend/e2e/auth-register.spec.ts
+++ b/frontend/e2e/auth-register.spec.ts
@@ -222,10 +222,7 @@ test.describe('Registration Flow', () => {
     const loginLink = page.getByRole('link', { name: 'Sign in' });
 
     // Use Promise.all to wait for navigation
-    await Promise.all([
-      page.waitForURL('/login'),
-      loginLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/login'), loginLink.click()]);
 
     // Should be on login page
     await expect(page).toHaveURL('/login');
diff --git a/frontend/e2e/helpers/auth.ts b/frontend/e2e/helpers/auth.ts
index f98b451..ead319e 100644
--- a/frontend/e2e/helpers/auth.ts
+++ b/frontend/e2e/helpers/auth.ts
@@ -95,7 +95,11 @@ export const MOCK_ORGANIZATIONS = [
  * @param email User email (defaults to mock user email)
  * @param password User password (defaults to mock password)
  */
-export async function loginViaUI(page: Page, email = 'test@example.com', password = 'Password123!'): Promise<void> {
+export async function loginViaUI(
+  page: Page,
+  email = 'test@example.com',
+  password = 'Password123!'
+): Promise<void> {
   // Navigate to login page
   await page.goto('/login');
 
@@ -104,10 +108,7 @@ export async function loginViaUI(page: Page, email = 'test@example.com', passwor
   await page.locator('input[name="password"]').fill(password);
 
   // Submit and wait for navigation to home
-  await Promise.all([
-    page.waitForURL('/'),
-    page.locator('button[type="submit"]').click(),
-  ]);
+  await Promise.all([page.waitForURL('/'), page.locator('button[type="submit"]').click()]);
 
   // Wait for auth to settle
   await page.waitForTimeout(500);
@@ -136,8 +137,10 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
         contentType: 'application/json',
         body: JSON.stringify({
           user: MOCK_USER,
-          access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDEiLCJleHAiOjk5OTk5OTk5OTl9.signature',
-          refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDIiLCJleHAiOjk5OTk5OTk5OTl9.signature',
+          access_token:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDEiLCJleHAiOjk5OTk5OTk5OTl9.signature',
+          refresh_token:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDIiLCJleHAiOjk5OTk5OTk5OTl9.signature',
           expires_in: 3600,
           token_type: 'bearer',
         }),
@@ -239,8 +242,10 @@ export async function setupSuperuserMocks(page: Page): Promise<void> {
         contentType: 'application/json',
         body: JSON.stringify({
           user: MOCK_SUPERUSER,
-          access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDMiLCJleHAiOjk5OTk5OTk5OTl9.signature',
-          refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDQiLCJleHAiOjk5OTk5OTk5OTl9.signature',
+          access_token:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDMiLCJleHAiOjk5OTk5OTk5OTl9.signature',
+          refresh_token:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDQiLCJleHAiOjk5OTk5OTk5OTl9.signature',
           expires_in: 3600,
           token_type: 'bearer',
         }),
@@ -376,7 +381,7 @@ export async function setupSuperuserMocks(page: Page): Promise<void> {
     if (route.request().method() === 'GET' && isSingleOrgEndpoint) {
       // Extract org ID from URL
       const orgId = url.match(/organizations\/([^/]+)/)?.[1]?.replace(/\/$/, ''); // Remove trailing slash if any
-      const org = MOCK_ORGANIZATIONS.find(o => o.id === orgId) || MOCK_ORGANIZATIONS[0];
+      const org = MOCK_ORGANIZATIONS.find((o) => o.id === orgId) || MOCK_ORGANIZATIONS[0];
 
       await route.fulfill({
         status: 200,
diff --git a/frontend/e2e/helpers/coverage.ts b/frontend/e2e/helpers/coverage.ts
index c2e96a5..1fcd6c8 100644
--- a/frontend/e2e/helpers/coverage.ts
+++ b/frontend/e2e/helpers/coverage.ts
@@ -55,7 +55,7 @@ export async function startCoverage(
   }
 
   try {
-      await page.coverage.startJSCoverage({
+    await page.coverage.startJSCoverage({
       resetOnNavigation: options?.resetOnNavigation ?? false,
       // @ts-expect-error - includeRawScriptCoverage is not in official types but supported by Playwright
       includeRawScriptCoverage: options?.includeRawScriptCoverage ?? false,
@@ -201,9 +201,9 @@ export const withCoverage = {
 function sanitizeFilename(name: string): string {
   return name
     .replace(/[^a-z0-9\s-]/gi, '') // Remove special chars
-    .replace(/\s+/g, '_')           // Replace spaces with underscores
+    .replace(/\s+/g, '_') // Replace spaces with underscores
     .toLowerCase()
-    .substring(0, 100);             // Limit length
+    .substring(0, 100); // Limit length
 }
 
 /**
diff --git a/frontend/e2e/homepage.spec.ts b/frontend/e2e/homepage.spec.ts
index 62eee41..d92ff7e 100644
--- a/frontend/e2e/homepage.spec.ts
+++ b/frontend/e2e/homepage.spec.ts
@@ -70,16 +70,16 @@ test.describe('Homepage - Desktop Navigation', () => {
     const header = page.locator('header').first();
     const headerLoginLink = header.getByRole('link', { name: /^Login$/i });
 
-    await Promise.all([
-      page.waitForURL('/login'),
-      headerLoginLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/login'), headerLoginLink.click()]);
 
     await expect(page).toHaveURL('/login');
   });
 
   test.skip('should open demo credentials modal when clicking Try Demo', async ({ page }) => {
-    await page.getByRole('button', { name: /Try Demo/i }).first().click();
+    await page
+      .getByRole('button', { name: /Try Demo/i })
+      .first()
+      .click();
 
     // Dialog should be visible (wait longer for React to render with animations)
     const dialog = page.getByRole('dialog');
@@ -204,10 +204,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
     const loginLink = mobileMenu.getByRole('link', { name: /Login/i });
     await loginLink.waitFor({ state: 'visible' });
 
-    await Promise.all([
-      page.waitForURL('/login'),
-      loginLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/login'), loginLink.click()]);
 
     await expect(page).toHaveURL('/login');
   });
@@ -230,7 +227,9 @@ test.describe('Homepage - Hero Section', () => {
   });
 
   test('should display main headline', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: /Everything You Need to Build/i }).first()).toBeVisible();
+    await expect(
+      page.getByRole('heading', { name: /Everything You Need to Build/i }).first()
+    ).toBeVisible();
     await expect(page.getByText(/Modern Web Applications/i).first()).toBeVisible();
   });
 
@@ -274,7 +273,10 @@ test.describe('Homepage - Demo Credentials Modal', () => {
   });
 
   test.skip('should display regular and admin credentials', async ({ page }) => {
-    await page.getByRole('button', { name: /Try Demo/i }).first().click();
+    await page
+      .getByRole('button', { name: /Try Demo/i })
+      .first()
+      .click();
 
     const dialog = page.getByRole('dialog');
     await dialog.waitFor({ state: 'visible' });
@@ -292,7 +294,10 @@ test.describe('Homepage - Demo Credentials Modal', () => {
     // Grant clipboard permissions
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
 
-    await page.getByRole('button', { name: /Try Demo/i }).first().click();
+    await page
+      .getByRole('button', { name: /Try Demo/i })
+      .first()
+      .click();
 
     const dialog = page.getByRole('dialog');
     await dialog.waitFor({ state: 'visible' });
@@ -306,23 +311,26 @@ test.describe('Homepage - Demo Credentials Modal', () => {
   });
 
   test.skip('should navigate to login page from modal', async ({ page }) => {
-    await page.getByRole('button', { name: /Try Demo/i }).first().click();
+    await page
+      .getByRole('button', { name: /Try Demo/i })
+      .first()
+      .click();
 
     const dialog = page.getByRole('dialog');
     await dialog.waitFor({ state: 'visible' });
 
     const loginLink = dialog.getByRole('link', { name: /Go to Login/i });
 
-    await Promise.all([
-      page.waitForURL('/login'),
-      loginLink.click()
-    ]);
+    await Promise.all([page.waitForURL('/login'), loginLink.click()]);
 
     await expect(page).toHaveURL('/login');
   });
 
   test.skip('should close modal when clicking close button', async ({ page }) => {
-    await page.getByRole('button', { name: /Try Demo/i }).first().click();
+    await page
+      .getByRole('button', { name: /Try Demo/i })
+      .first()
+      .click();
 
     const dialog = page.getByRole('dialog');
     await dialog.waitFor({ state: 'visible' });
@@ -343,7 +351,9 @@ test.describe('Homepage - Animated Terminal', () => {
     // Scroll to terminal section
     await page.locator('text=Get Started in Seconds').first().scrollIntoViewIfNeeded();
 
-    await expect(page.getByRole('heading', { name: /Get Started in Seconds/i }).first()).toBeVisible();
+    await expect(
+      page.getByRole('heading', { name: /Get Started in Seconds/i }).first()
+    ).toBeVisible();
     await expect(page.getByText(/Clone, run, and start building/i).first()).toBeVisible();
   });
 
@@ -434,7 +444,9 @@ test.describe('Homepage - Feature Sections', () => {
   });
 
   test('should display tech stack section', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: /Modern, Type-Safe, Production-Grade Stack/i })).toBeVisible();
+    await expect(
+      page.getByRole('heading', { name: /Modern, Type-Safe, Production-Grade Stack/i })
+    ).toBeVisible();
 
     // Check for key technologies
     await expect(page.getByText('FastAPI').first()).toBeVisible();
diff --git a/frontend/frontend-requirements.md b/frontend/frontend-requirements.md
index 0b7d41d..4f54378 100755
--- a/frontend/frontend-requirements.md
+++ b/frontend/frontend-requirements.md
@@ -1,4 +1,5 @@
 # Frontend Requirements Document
+
 ## Next.js + FastAPI Template Project
 
 ---
@@ -10,6 +11,7 @@ This document specifies the requirements for a production-ready Next.js frontend
 ### 1.1 Purpose
 
 Provide a robust, scalable, and maintainable frontend foundation that:
+
 - Integrates seamlessly with the existing FastAPI backend
 - Follows modern React and Next.js best practices
 - Implements a clear and consistent architecture
@@ -19,6 +21,7 @@ Provide a robust, scalable, and maintainable frontend foundation that:
 ### 1.2 Scope
 
 The frontend encompasses:
+
 - User authentication and session management
 - User and organization administration interfaces
 - Reusable component library
@@ -33,6 +36,7 @@ The frontend encompasses:
 ### 2.1 Core Framework
 
 **Next.js (Latest Version)**
+
 - App Router architecture (not Pages Router)
 - Server Components by default, Client Components where interactivity is needed
 - TypeScript throughout the entire codebase
@@ -41,12 +45,14 @@ The frontend encompasses:
 ### 2.2 Styling
 
 **Tailwind CSS (Latest Version)**
+
 - Custom configuration for project-specific design tokens
 - Dark mode support (class-based strategy)
 - Responsive design utilities
 - Custom utilities as needed for common patterns
 
 **shadcn/ui (Latest)**
+
 - Component system built on Radix UI primitives
 - Customizable and accessible components
 - Components copied into project (not npm dependency)
@@ -55,6 +61,7 @@ The frontend encompasses:
 ### 2.3 Data Fetching & State Management
 
 **TanStack Query (React Query v5)**
+
 - Server state management
 - Automatic background refetching
 - Cache management and invalidation
@@ -63,6 +70,7 @@ The frontend encompasses:
 - Pagination and infinite query support
 
 **Zustand (Latest Version)**
+
 - Client-side application state (non-server state)
 - Authentication state
 - UI state (modals, sidebars, preferences)
@@ -72,6 +80,7 @@ The frontend encompasses:
 ### 2.4 Data Visualization
 
 **Recharts (Latest Version)**
+
 - Chart components for admin dashboards
 - Responsive charts
 - Customizable with Tailwind theme colors
@@ -79,6 +88,7 @@ The frontend encompasses:
 ### 2.5 API Client Generation
 
 **OpenAPI TypeScript Codegen**
+
 - Generator: `openapi-typescript-codegen` (or `@hey-api/openapi-ts` as modern alternative)
 - Output: TypeScript types and Axios-based API client
 - Generation source: Backend OpenAPI spec endpoint
@@ -89,6 +99,7 @@ The frontend encompasses:
 ### 2.6 HTTP Client
 
 **Axios (Latest Version)**
+
 - Used by generated API client
 - Interceptors for:
   - Authentication token injection
@@ -277,6 +288,7 @@ root/
 ### 4.1 Authentication Flow
 
 **Requirements:**
+
 - Integration with FastAPI backend authentication endpoints
 - JWT-based authentication (access token + refresh token pattern)
 - Secure token storage strategy:
@@ -289,6 +301,7 @@ root/
 - Per-device session tracking with backend
 
 **Login Flow:**
+
 1. User submits credentials via `LoginForm`
 2. API client calls backend `/api/v1/auth/login` endpoint
 3. Backend returns access token and refresh token
@@ -300,6 +313,7 @@ root/
 9. Axios interceptor adds `Authorization: Bearer {accessToken}` to all requests
 
 **Token Refresh Flow:**
+
 1. Axios interceptor detects 401 response
 2. Attempts token refresh via `/api/v1/auth/refresh` endpoint with refresh token
 3. Backend validates refresh token JTI (JWT ID) against active session in database
@@ -309,6 +323,7 @@ root/
 7. Old refresh token is invalidated (cannot be reused)
 
 **Logout Flow:**
+
 1. User initiates logout
 2. API client calls backend `/api/v1/auth/logout` endpoint with refresh token
 3. Backend deactivates the specific session (device) using the refresh token's JTI
@@ -319,6 +334,7 @@ root/
 8. Redirect to login or home page
 
 **Logout All Devices Flow:**
+
 1. User selects "Logout All Devices" (from session management or security page)
 2. API client calls backend `/api/v1/auth/logout-all` endpoint
 3. Backend deactivates all sessions for the current user
@@ -328,12 +344,14 @@ root/
 ### 4.2 Protected Routes
 
 **Route Guard Implementation:**
+
 - Middleware or layout-based protection for authenticated routes
 - Server-side session validation where possible
 - Client-side auth state checks for immediate UI updates
 - Graceful handling of unauthenticated access (redirect to login with return URL)
 
 **Permission Levels:**
+
 - Public routes: accessible to all (home, login, register)
 - Authenticated routes: require valid session
 - Admin routes: require authenticated user with admin role
@@ -342,6 +360,7 @@ root/
 ### 4.3 Auth Components
 
 **LoginForm**
+
 - Username/email and password fields
 - Form validation with react-hook-form and zod
 - Error handling with user-friendly messages
@@ -350,12 +369,14 @@ root/
 - Link to registration and password reset
 
 **RegisterForm**
+
 - User registration fields (as required by backend)
 - Client-side validation matching backend requirements
 - Terms of service acceptance
 - Email verification flow (if applicable)
 
 **AuthGuard**
+
 - HOC or component for protecting routes
 - Handles loading state during auth check
 - Redirects if unauthorized
@@ -364,6 +385,7 @@ root/
 ### 4.3 Password Reset Flow
 
 **Password Reset Request:**
+
 1. User provides email on reset form
 2. API client calls `/api/v1/auth/password-reset/request` with email
 3. Backend sends email with reset token (if email exists)
@@ -372,6 +394,7 @@ root/
 6. User receives email with password reset link containing token parameter
 
 **Password Reset Confirmation:**
+
 1. User clicks email link with token parameter (e.g., `/password-reset/confirm?token=...`)
 2. Frontend validates token parameter is present
 3. User enters new password (with confirmation)
@@ -382,6 +405,7 @@ root/
 8. User can now login with new password
 
 **Password Change (Authenticated Users):**
+
 1. User navigates to password settings page
 2. User provides current password and new password
 3. API client calls `/api/v1/users/me/password` with current and new passwords
@@ -392,6 +416,7 @@ root/
 ### 4.4 Auth State Management
 
 **Zustand Store Requirements:**
+
 ```typescript
 interface AuthStore {
   // State
@@ -403,18 +428,19 @@ interface AuthStore {
 
   // Authentication actions
   login: (credentials: LoginCredentials) => Promise<void>;
-  logout: () => Promise<void>;            // Logout current device
-  logoutAll: () => Promise<void>;         // Logout all devices
-  refreshTokens: () => Promise<void>;     // Refresh access token
-  checkAuth: () => Promise<void>;         // Verify current session
+  logout: () => Promise<void>; // Logout current device
+  logoutAll: () => Promise<void>; // Logout all devices
+  refreshTokens: () => Promise<void>; // Refresh access token
+  checkAuth: () => Promise<void>; // Verify current session
 
   // Token management
   setTokens: (accessToken: string, refreshToken: string) => void;
-  clearAuth: () => void;                  // Clear all auth state
+  clearAuth: () => void; // Clear all auth state
 }
 ```
 
 **TanStack Query Integration:**
+
 - `useAuth` hook wrapping auth operations
 - Automatic user data refetching on window focus
 - Cache invalidation on logout
@@ -425,24 +451,26 @@ interface AuthStore {
 The backend implements comprehensive per-device session tracking. Users can view active sessions across all devices and manage them individually.
 
 **Session Data Model:**
+
 ```typescript
 interface UserSession {
-  id: UUID;                          // Session identifier
-  device_name: string | null;         // "iPhone 14", "Chrome on MacBook"
-  device_id: string | null;           // Persistent device identifier
-  ip_address: string | null;          // Last known IP address
-  location_city: string | null;       // Geolocation city
-  location_country: string | null;    // Geolocation country
-  last_used_at: datetime;             // Last activity timestamp
-  created_at: datetime;               // Session creation time
-  expires_at: datetime;               // Session expiration time
-  is_current: boolean;                // Is this the current session?
+  id: UUID; // Session identifier
+  device_name: string | null; // "iPhone 14", "Chrome on MacBook"
+  device_id: string | null; // Persistent device identifier
+  ip_address: string | null; // Last known IP address
+  location_city: string | null; // Geolocation city
+  location_country: string | null; // Geolocation country
+  last_used_at: datetime; // Last activity timestamp
+  created_at: datetime; // Session creation time
+  expires_at: datetime; // Session expiration time
+  is_current: boolean; // Is this the current session?
 }
 ```
 
 **Session Management UI Requirements:**
 
 **Session List Page** (`/settings/sessions`):
+
 - Display all active sessions for the current user
 - Show device name, location, last used time, and created date
 - Highlight the current session with "This device" or "Current session" badge
@@ -452,6 +480,7 @@ interface UserSession {
 - Auto-refresh session list periodically
 
 **Session Information Display:**
+
 - Device icon based on device type (desktop, mobile, tablet)
 - Location display: "San Francisco, United States" (if available)
 - Time display: "Last used 2 hours ago" (relative time with date-fns)
@@ -459,6 +488,7 @@ interface UserSession {
 - "This device" badge for current session (different style, cannot revoke)
 
 **Session API Integration:**
+
 - `GET /api/v1/sessions/me` - List all active sessions with pagination
 - `DELETE /api/v1/sessions/{session_id}` - Revoke specific session (not current)
 - `POST /api/v1/auth/logout` - Logout current device
@@ -466,6 +496,7 @@ interface UserSession {
 - `DELETE /api/v1/sessions/me/expired` - Cleanup expired sessions (optional, admin-only)
 
 **Component Requirements:**
+
 - `SessionList.tsx` - Display active sessions table or card grid
 - `SessionCard.tsx` - Individual session display with device info
 - `RevokeSessionDialog.tsx` - Confirmation dialog before revoking
@@ -473,6 +504,7 @@ interface UserSession {
 - Empty state: "No other active sessions"
 
 **User Experience Considerations:**
+
 - Prevent revoking the current session via the session list (only via logout button)
 - Show loading state when revoking sessions
 - Show success toast: "Session revoked successfully"
@@ -489,6 +521,7 @@ interface UserSession {
 **Generation Scripts:**
 
 **Frontend Script** (`frontend/scripts/generate-api-client.sh`):
+
 - Fetches OpenAPI spec from backend at `/api/v1/openapi.json`
   - Development: `http://localhost:8000/api/v1/openapi.json`
   - Docker: `http://backend:8000/api/v1/openapi.json`
@@ -497,12 +530,14 @@ interface UserSession {
 - Can be run independently for frontend-only development
 
 **Root Script** (`root/scripts/generate-frontend-api.sh`):
+
 - Orchestrates generation for multi-module setup
 - Ensures backend is available (or uses spec file)
 - Navigates to frontend directory and runs generation
 - Useful for CI/CD and monorepo workflows
 
 **Generator Configuration:**
+
 - Tool: `@hey-api/openapi-ts` (modern, actively maintained)
 - Output language: TypeScript
 - HTTP client: Axios
@@ -529,11 +564,11 @@ interface UserSession {
 ```
 
 **Interceptor Responsibilities:**
+
 - **Request Interceptor:**
   - Add `Authorization: Bearer {token}` header
   - Add common headers (Content-Type, etc.)
   - Log requests in development
-  
 - **Response Interceptor:**
   - Handle 401 errors (trigger token refresh)
   - Handle 403 errors (insufficient permissions)
@@ -550,14 +585,15 @@ The backend returns structured error responses that must be properly parsed:
 interface APIErrorResponse {
   success: false;
   errors: Array<{
-    code: string;      // e.g., "AUTH_001", "USER_002", "VAL_001"
-    message: string;   // Human-readable error message
-    field?: string;    // Field that caused the error (for form validation)
+    code: string; // e.g., "AUTH_001", "USER_002", "VAL_001"
+    message: string; // Human-readable error message
+    field?: string; // Field that caused the error (for form validation)
   }>;
 }
 ```
 
 **Error Handling Requirements:**
+
 - Extract error messages from `errors` array
 - Display field-specific errors in forms (match `field` property to form fields)
 - Map error codes to user-friendly messages (create error code dictionary)
@@ -571,13 +607,14 @@ interface APIErrorResponse {
 - Never expose sensitive error details to users (stack traces, internal paths, etc.)
 
 **Error Code Mapping Example:**
+
 ```typescript
 const ERROR_MESSAGES: Record<string, string> = {
-  'AUTH_001': 'Invalid email or password',
-  'USER_002': 'This email is already registered',
-  'USER_003': 'User not found',
-  'VAL_001': 'Please check your input',
-  'ORG_001': 'Organization name already exists',
+  AUTH_001: 'Invalid email or password',
+  USER_002: 'This email is already registered',
+  USER_003: 'User not found',
+  VAL_001: 'Please check your input',
+  ORG_001: 'Organization name already exists',
   // ... map all backend error codes
 };
 ```
@@ -585,6 +622,7 @@ const ERROR_MESSAGES: Record<string, string> = {
 ### 5.3 TanStack Query Integration
 
 **Query Configuration** (`src/config/queryClient.ts`):
+
 ```typescript
 - Default staleTime: 60000 (1 minute)
 - Default cacheTime: 300000 (5 minutes)
@@ -649,6 +687,7 @@ export function useDeleteUser() {
 ```
 
 **Hook Organization:**
+
 - One file per resource/entity (users, organizations, etc.)
 - Query hooks for GET operations
 - Mutation hooks for POST/PUT/PATCH/DELETE operations
@@ -663,6 +702,7 @@ export function useDeleteUser() {
 ### 6.1 State Management Philosophy
 
 **Pragmatic Approach:**
+
 - Use TanStack Query for all server state (primary state management)
 - Use Zustand sparingly for client-only state
 - Avoid prop drilling with minimal context providers
@@ -703,6 +743,7 @@ export function useDeleteUser() {
 ### 6.2 Zustand Stores
 
 **Auth Store** (`src/stores/authStore.ts`):
+
 ```typescript
 interface AuthStore {
   user: User | null;
@@ -714,6 +755,7 @@ interface AuthStore {
 ```
 
 **UI Store** (`src/stores/uiStore.ts`):
+
 ```typescript
 interface UIStore {
   sidebarOpen: boolean;
@@ -725,6 +767,7 @@ interface UIStore {
 ```
 
 **Store Guidelines:**
+
 - Keep stores small and focused
 - Avoid duplicating server state
 - Use selectors for computed values
@@ -734,11 +777,13 @@ interface UIStore {
 ### 6.3 Context Providers (Minimal Usage)
 
 **When to Use Contexts:**
+
 - Wrapping app with TanStack Query provider
 - Theme provider (if not using Zustand)
 - Providing deeply nested utilities (rare)
 
 **When NOT to Use Contexts:**
+
 - Server state (use TanStack Query)
 - Auth state (use Zustand)
 - Component props that can be passed directly
@@ -746,6 +791,7 @@ interface UIStore {
 ### 6.4 Custom Hooks
 
 **Custom Hook Requirements:**
+
 - Abstract common patterns
 - Compose other hooks when needed
 - Return consistent interfaces
@@ -753,6 +799,7 @@ interface UIStore {
 - Include proper TypeScript types
 
 **Example Custom Hooks:**
+
 - `useAuth()`: Wraps auth store and operations
 - `useUser()`: Gets current user with loading state
 - `useDebounce()`: Debounce input values
@@ -766,6 +813,7 @@ interface UIStore {
 ### 7.1 shadcn/ui Components
 
 **Core Components Required:**
+
 - Button
 - Card
 - Dialog / Modal
@@ -785,12 +833,14 @@ interface UIStore {
 - Progress
 
 **Admin Components:**
+
 - DataTable (enhanced table with sorting, filtering, pagination)
 - Calendar
 - Date Picker
 - Multi-select
 
 **Installation:**
+
 - Install via shadcn CLI: `npx shadcn-ui@latest add [component]`
 - Customize theme in `tailwind.config.ts`
 - Document customizations in `COMPONENT_GUIDE.md`
@@ -800,6 +850,7 @@ interface UIStore {
 **Layout Components** (`src/components/layout/`):
 
 **Header.tsx**
+
 - App logo/title
 - Navigation links
 - User menu dropdown
@@ -807,17 +858,20 @@ interface UIStore {
 - Mobile menu button
 
 **Footer.tsx**
+
 - Copyright information
 - Links to docs, support
 - Social media links (if applicable)
 
 **Sidebar.tsx**
+
 - Navigation menu for authenticated users
 - Collapsible sections
 - Active route highlighting
 - Responsive (drawer on mobile)
 
 **PageContainer.tsx**
+
 - Consistent page padding
 - Max-width container
 - Responsive layout
@@ -825,6 +879,7 @@ interface UIStore {
 **Admin Components** (`src/components/admin/`):
 
 **UserTable.tsx**
+
 - Display users in data table
 - Sortable columns: name, email, role, created date
 - Filterable by role, status
@@ -834,6 +889,7 @@ interface UIStore {
 - Row selection for bulk operations
 
 **UserForm.tsx**
+
 - Create/edit user form
 - Fields: name, email, role, status, organization assignment
 - Validation with react-hook-form + zod
@@ -841,6 +897,7 @@ interface UIStore {
 - Loading and error states
 
 **OrganizationTable.tsx**
+
 - Display organizations in data table
 - Sortable columns: name, member count, created date
 - Searchable by name
@@ -848,23 +905,27 @@ interface UIStore {
 - Pagination
 
 **OrganizationForm.tsx**
+
 - Create/edit organization form
 - Fields: name, description, settings
 - Validation
 - Submit and cancel actions
 
 **AdminSidebar.tsx**
+
 - Admin navigation menu
 - Links to user management, org management, settings
 - Collapsible sections
 - Active route indication
 
 **AdminHeader.tsx**
+
 - Admin page title
 - Breadcrumbs
 - Action buttons (contextual)
 
 **AdminStats.tsx**
+
 - Dashboard statistics cards
 - Display total users, active users, total organizations
 - Growth indicators (percentage change)
@@ -872,6 +933,7 @@ interface UIStore {
 - Responsive card grid
 
 **BulkActionBar.tsx**
+
 - Appears when rows are selected in admin tables
 - Selection count display ("3 users selected")
 - Action dropdown (Activate, Deactivate, Delete)
@@ -880,6 +942,7 @@ interface UIStore {
 - Clear selection button
 
 **UserActivationToggle.tsx**
+
 - Toggle or button to activate/deactivate individual users
 - Show current status (Active/Inactive)
 - Confirmation for deactivation
@@ -887,6 +950,7 @@ interface UIStore {
 - Optimistic UI updates
 
 **OrganizationMemberManager.tsx**
+
 - Add members to organization (user search/select)
 - Remove members from organization
 - Change member roles (owner, admin, member)
@@ -897,16 +961,19 @@ interface UIStore {
 **Chart Components** (`src/components/charts/`):
 
 **BarChartCard.tsx**
+
 - Wrapped Recharts BarChart
 - Card container with title and description
 - Responsive
 - Themed colors
 
 **LineChartCard.tsx**
+
 - Wrapped Recharts LineChart
 - Similar structure to BarChartCard
 
 **PieChartCard.tsx**
+
 - Wrapped Recharts PieChart
 - Legend
 - Tooltips
@@ -914,6 +981,7 @@ interface UIStore {
 **Settings Components** (`src/components/settings/`):
 
 **ProfileSettings.tsx**
+
 - User profile edit form
 - Fields: first_name, last_name, email, phone_number
 - Avatar upload (optional)
@@ -921,6 +989,7 @@ interface UIStore {
 - Form validation and submission
 
 **PasswordSettings.tsx**
+
 - Password change form
 - Fields: current password, new password, confirm new password
 - Password strength indicator
@@ -928,6 +997,7 @@ interface UIStore {
 - Option to logout all other devices after change
 
 **SessionManagement.tsx**
+
 - List all active sessions
 - Display session cards with device info
 - Revoke session functionality
@@ -935,6 +1005,7 @@ interface UIStore {
 - Current session highlighting
 
 **SessionCard.tsx**
+
 - Individual session display
 - Device icon (desktop, mobile, tablet)
 - Location and IP display
@@ -942,6 +1013,7 @@ interface UIStore {
 - Revoke button (disabled for current session)
 
 **PreferencesSettings.tsx**
+
 - User preferences form (theme, notifications, etc.)
 - Stored in User.preferences JSON field
 - Theme toggle (light, dark, system)
@@ -950,22 +1022,26 @@ interface UIStore {
 **Common Components** (`src/components/common/`):
 
 **DataTable.tsx**
+
 - Generic reusable data table
 - Props: data, columns, pagination, sorting, filtering
 - Built on shadcn Table component
 - TypeScript generic for type safety
 
 **LoadingSpinner.tsx**
+
 - Centered spinner
 - Size variants
 - Accessible (aria-label)
 
 **ErrorBoundary.tsx**
+
 - React error boundary
 - Display fallback UI on errors
 - Error reporting hook
 
 **PageHeader.tsx**
+
 - Page title
 - Optional description
 - Optional action buttons
@@ -973,6 +1049,7 @@ interface UIStore {
 ### 7.3 Component Guidelines
 
 **Component Structure:**
+
 ```typescript
 // Imports
 import { ... } from 'react';
@@ -990,7 +1067,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
   // Hooks
   // Derived state
   // Event handlers
-  
+
   // Render
   return (
     // JSX
@@ -999,6 +1076,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 ```
 
 **Best Practices:**
+
 - Prefer named exports over default exports
 - Co-locate types with component file
 - Use TypeScript for all props
@@ -1016,15 +1094,18 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 ### 8.1 Route Structure
 
 **Public Routes:**
+
 - `/` - Home page (accessible to all)
 - `/login` - Login page
 - `/register` - Registration page
 
 **Authenticated Routes:**
+
 - `/` - Home page (authenticated view, different from public)
 - `/dashboard` - Optional: user dashboard
 
 **Admin Routes:**
+
 - `/admin` - Admin dashboard/landing with statistics and charts
 - `/admin/users` - User list with search, filters, and bulk actions
 - `/admin/users/[id]` - User detail/edit with sessions and organizations
@@ -1035,6 +1116,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - `/admin/organizations/new` - Create organization
 
 **Account/Settings Routes:**
+
 - `/settings` - Settings layout (redirects to /settings/profile)
 - `/settings/profile` - User profile edit (first_name, last_name, email, phone, preferences)
 - `/settings/password` - Change password (current + new password)
@@ -1042,6 +1124,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - `/settings/preferences` - User preferences (theme, notifications, etc.)
 
 **Development Routes (dev environment only):**
+
 - `/dev/components` - Component showcase/storybook
 - `/dev/icons` - Icon preview
 - `/dev/theme` - Theme preview
@@ -1051,6 +1134,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 **Home Page** (`/`):
 
 **Public View:**
+
 - Hero section with project description
 - Feature highlights
 - Call-to-action (login/register buttons)
@@ -1058,6 +1142,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - Footer
 
 **Authenticated View:**
+
 - Welcome message with user name
 - Quick stats or dashboard widgets
 - Recent activity
@@ -1123,6 +1208,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 ### 8.3 Layout Strategy
 
 **Root Layout** (`src/app/layout.tsx`):
+
 - HTML structure
 - TanStack Query provider
 - Theme provider
@@ -1130,11 +1216,13 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - Global metadata
 
 **Auth Group Layout** (`src/app/(auth)/layout.tsx`):
+
 - Centered form layout
 - No header/footer
 - Background styling
 
 **Authenticated Group Layout** (`src/app/(authenticated)/layout.tsx`):
+
 - Header
 - Optional sidebar
 - Main content area
@@ -1142,12 +1230,14 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - Auth guard
 
 **Admin Layout** (`src/app/(authenticated)/admin/layout.tsx`):
+
 - Admin header
 - Admin sidebar
 - Breadcrumbs
 - Admin-specific auth guard (role check)
 
 **Dev Layout** (`src/app/dev/layout.tsx`):
+
 - Simple layout
 - Environment check (only render in dev)
 - Navigation between dev pages
@@ -1155,6 +1245,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 ### 8.4 Page Components
 
 **Structure:**
+
 - Each page is a Server Component by default
 - Client Components used for interactivity
 - Loading states via `loading.tsx`
@@ -1162,6 +1253,7 @@ export function ComponentName({ prop1, prop2 }: ComponentProps) {
 - Metadata exported for SEO
 
 **Example:**
+
 ```typescript
 // src/app/(authenticated)/admin/users/page.tsx
 import { Metadata } from 'next';
@@ -1175,8 +1267,8 @@ export const metadata: Metadata = {
 export default function UsersPage() {
   return (
     <div>
-      <PageHeader 
-        title="Users" 
+      <PageHeader
+        title="Users"
         description="Manage application users"
       />
       <UserTable />
@@ -1192,6 +1284,7 @@ export default function UsersPage() {
 ### 9.1 Environment Variables
 
 **Required Environment Variables:**
+
 ```env
 # API Configuration
 NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
@@ -1219,12 +1312,14 @@ NEXT_PUBLIC_DEBUG_API=false
 ```
 
 **Environment File Structure:**
+
 - `.env.example` - Template with all variables (committed)
 - `.env.local` - Local overrides (gitignored)
 - `.env.development` - Development defaults (optional)
 - `.env.production` - Production values (optional, for reference)
 
 **Environment Validation:**
+
 - Use zod to validate environment variables at build time
 - Fail fast if required variables are missing
 - Type-safe access via `src/config/env.ts`
@@ -1232,6 +1327,7 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 9.2 Development Scripts
 
 **package.json Scripts:**
+
 ```json
 {
   "scripts": {
@@ -1253,6 +1349,7 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 9.3 Code Quality Tools
 
 **ESLint:**
+
 - Next.js ESLint configuration
 - TypeScript ESLint rules
 - React hooks rules
@@ -1260,11 +1357,13 @@ NEXT_PUBLIC_DEBUG_API=false
 - Accessibility rules (eslint-plugin-jsx-a11y)
 
 **Prettier:**
+
 - Consistent code formatting
 - Integrated with ESLint
 - Pre-commit hook (optional: husky + lint-staged)
 
 **TypeScript:**
+
 - Strict mode enabled
 - Path aliases configured (`@/*` -> `src/*`)
 - Incremental compilation
@@ -1273,10 +1372,12 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 9.4 Development Routes Requirements
 
 **Environment Check:**
+
 - `/dev/*` routes only accessible when `NODE_ENV === 'development'`
 - Display 404 or redirect in production
 
 **Component Showcase Page:**
+
 - Organized by category (UI, Admin, Layout, Common, Charts)
 - Each component in isolated container
 - Interactive props (where applicable)
@@ -1291,6 +1392,7 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 10.1 TypeScript Standards
 
 **Type Definitions:**
+
 - Define types in `src/types/` for shared types
 - Co-locate types with components for component-specific types
 - Use interfaces for object shapes, types for unions/primitives
@@ -1298,11 +1400,13 @@ NEXT_PUBLIC_DEBUG_API=false
 - Use generic types for reusable components and utilities
 
 **Naming:**
+
 - Interfaces: PascalCase with descriptive names (e.g., `UserProfile`, `ApiResponse`)
 - Type aliases: PascalCase (e.g., `UserId`, `DateString`)
 - Enums: PascalCase for enum name, UPPER_SNAKE_CASE for values
 
 **Import Aliases:**
+
 - `@/` alias maps to `src/`
 - Use `@/components/ui` instead of relative paths for UI components
 - Use `@/lib` for library code
@@ -1311,21 +1415,25 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 10.2 Component Standards
 
 **Naming:**
+
 - PascalCase for component files and component names
 - Match file name with component name
 
 **Structure:**
+
 - One component per file
 - Extract complex logic into custom hooks
 - Separate concerns (presentation vs. logic)
 
 **Props:**
+
 - Define explicit prop interfaces
 - Use destructuring in function signature
 - Provide defaults via destructuring when appropriate
 - Document complex props with JSDoc comments
 
 **State:**
+
 - Keep state as local as possible
 - Use appropriate state management for each use case
 - Avoid redundant state (derive when possible)
@@ -1333,36 +1441,42 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 10.3 Styling Standards
 
 **Tailwind Usage:**
+
 - Use Tailwind utility classes directly in JSX
 - Avoid inline styles unless absolutely necessary
 - Use `cn()` utility for conditional classes
 - Extract repeated class combinations into components
 
 **Responsive Design:**
+
 - Mobile-first approach
 - Use Tailwind responsive modifiers (sm, md, lg, xl, 2xl)
 - Test on multiple screen sizes
 
 **Dark Mode:**
-- Use Tailwind dark mode classes (dark:*)
+
+- Use Tailwind dark mode classes (dark:\*)
 - Ensure all components support dark mode
 - Test both light and dark themes
 
 ### 10.4 API Integration Standards
 
 **Query Hooks:**
+
 - One hook per operation
 - Consistent naming: `use[Resource]`, `use[Resource]s`, `useCreate[Resource]`, etc.
 - Proper query keys for cache management
 - Handle loading, error, and success states
 
 **Mutation Hooks:**
+
 - Return mutation function and status
 - Invalidate relevant queries on success
 - Handle errors gracefully
 - Provide user feedback (toast notifications)
 
 **Error Handling:**
+
 - Display user-friendly error messages
 - Log errors to console (or error service)
 - Show retry options when appropriate
@@ -1371,6 +1485,7 @@ NEXT_PUBLIC_DEBUG_API=false
 ### 10.5 Form Standards
 
 **Form Implementation:**
+
 - Use react-hook-form for form state
 - Use zod for validation schemas
 - Use shadcn Form components for consistent UI
@@ -1379,6 +1494,7 @@ NEXT_PUBLIC_DEBUG_API=false
 - Show loading state during submission
 
 **Form Structure:**
+
 ```typescript
 // Define schema
 const formSchema = z.object({
@@ -1402,12 +1518,14 @@ const onSubmit = async (data: z.infer<typeof formSchema>) => {
 ### 10.6 Testing Standards (Future)
 
 **Test Structure:**
+
 - Unit tests for utilities and hooks
 - Integration tests for API hooks
 - Component tests for reusable components
 - E2E tests for critical user flows
 
 **Testing Tools:**
+
 - Jest for unit tests
 - React Testing Library for component tests
 - Playwright or Cypress for E2E tests (optional)
@@ -1421,18 +1539,21 @@ const onSubmit = async (data: z.infer<typeof formSchema>) => {
 **ARCHITECTURE.md Requirements:**
 
 **System Overview:**
+
 - High-level architecture diagram
 - Explanation of chosen technologies and why
 - Data flow diagrams (authentication, API calls, state management)
 - Folder structure rationale
 
 **Key Concepts:**
+
 - App Router vs. Pages Router decision
 - Server Components vs. Client Components usage
 - State management philosophy
 - API integration approach
 
 **Architecture Decisions:**
+
 - Why TanStack Query over alternatives
 - Why Zustand over alternatives
 - OpenAPI client generation rationale
@@ -1443,30 +1564,35 @@ const onSubmit = async (data: z.infer<typeof formSchema>) => {
 **CODING_STANDARDS.md Requirements:**
 
 **TypeScript Guidelines:**
+
 - Type definition best practices
 - When to use interfaces vs. types
 - How to handle unknown types
 - Generic type usage
 
 **Component Guidelines:**
+
 - Component structure template
 - Prop definition standards
 - State management in components
 - Hook usage patterns
 
 **Styling Guidelines:**
+
 - Tailwind usage patterns
 - Responsive design approach
 - Dark mode implementation
 - Component styling dos and don'ts
 
 **API Integration Guidelines:**
+
 - How to create query hooks
 - How to create mutation hooks
 - Error handling patterns
 - Cache invalidation strategies
 
 **Form Guidelines:**
+
 - react-hook-form setup
 - Validation with zod
 - Error display
@@ -1479,6 +1605,7 @@ const onSubmit = async (data: z.infer<typeof formSchema>) => {
 Provide 2-3 complete feature implementation walkthroughs, including:
 
 **Example 1: User Management Feature**
+
 - Backend API endpoints used
 - Generated API client usage
 - Query hooks creation (`src/lib/api/hooks/useUsers.ts`)
@@ -1488,16 +1615,19 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 - Complete code snippets for each file
 
 **Example 2: Organization Management Feature**
+
 - Similar structure to Example 1
 - Highlights differences and patterns
 
 **Example 3: Adding a New Chart to Admin Dashboard**
+
 - Data fetching setup
 - Chart component creation
 - Integration into dashboard page
 - Styling and responsiveness
 
 **Each Example Should Show:**
+
 1. What files to create/modify
 2. Where each file goes in the project structure
 3. Complete, working code for each file
@@ -1509,18 +1639,21 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 **COMPONENT_GUIDE.md Requirements:**
 
 **shadcn/ui Components:**
+
 - List of installed components
 - Usage examples for each
 - Customization examples
 - Common patterns (forms, dialogs, tables)
 
 **Custom Components:**
+
 - Purpose and when to use
 - Props documentation
 - Usage examples
 - Styling and customization
 
 **Component Composition:**
+
 - How to compose components together
 - Common patterns (Card + Table, Dialog + Form)
 - Best practices for component composition
@@ -1532,11 +1665,13 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 ### 12.1 Performance
 
 **Target Metrics:**
+
 - First Contentful Paint: < 1.5s
 - Time to Interactive: < 3s
 - Lighthouse Performance Score: > 90
 
 **Optimization Strategies:**
+
 - Image optimization (next/image)
 - Code splitting and lazy loading
 - Minimize client-side JavaScript
@@ -1546,6 +1681,7 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 ### 12.2 Accessibility
 
 **Standards:**
+
 - WCAG 2.1 Level AA compliance
 - Keyboard navigation for all interactive elements
 - Screen reader support
@@ -1554,6 +1690,7 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 - Color contrast ratios (4.5:1 for normal text, 3:1 for large text)
 
 **Testing:**
+
 - Manual keyboard navigation testing
 - Screen reader testing (NVDA/JAWS)
 - Lighthouse accessibility audit
@@ -1562,18 +1699,21 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 ### 12.3 Browser Support
 
 **Target Browsers:**
+
 - Chrome (last 2 versions)
 - Firefox (last 2 versions)
 - Safari (last 2 versions)
 - Edge (last 2 versions)
 
 **Mobile:**
+
 - iOS Safari (last 2 versions)
 - Chrome Android (last 2 versions)
 
 ### 12.4 Security
 
 **Client-Side Security:**
+
 - XSS prevention (React defaults + sanitization where needed)
 - CSRF protection (if not handled by backend)
 - Secure token storage
@@ -1582,6 +1722,7 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 - HTTPS only in production
 
 **Dependency Security:**
+
 - Regular dependency updates
 - Security audit via `npm audit`
 - Automated security scanning (Dependabot, Snyk)
@@ -1589,6 +1730,7 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 ### 12.5 SEO
 
 **Requirements:**
+
 - Semantic HTML structure
 - Proper meta tags (title, description)
 - Open Graph tags for social sharing
@@ -1603,23 +1745,27 @@ Provide 2-3 complete feature implementation walkthroughs, including:
 While detailed implementation planning is out of scope for this document, the following priority order is recommended:
 
 **Phase 1: Foundation**
+
 1. Project setup and configuration
 2. API client generation setup
 3. Authentication implementation
 4. Basic layout components
 
 **Phase 2: Core Features**
+
 1. User management pages
 2. Organization management pages
 3. Admin dashboard
 
 **Phase 3: Polish**
+
 1. Development showcase pages
 2. Advanced components
 3. Charts and analytics
 4. Documentation completion
 
 **Phase 4: Production Readiness**
+
 1. Performance optimization
 2. Accessibility audit and fixes
 3. Security hardening
@@ -1669,46 +1815,48 @@ Complete reference of all backend API endpoints for frontend integration. All en
 
 ### 15.1 Authentication Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Request Body | Response |
-|--------|----------|---------|---------------|--------------|----------|
-| POST | `/api/v1/auth/register` | Register new user account | No | `{email, password, first_name}` | User + tokens |
-| POST | `/api/v1/auth/login` | Authenticate user | No | `{email, password}` | User + access_token + refresh_token |
-| POST | `/api/v1/auth/login/oauth` | OAuth2-compatible login (Swagger UI) | No | Form data | tokens |
-| POST | `/api/v1/auth/refresh` | Refresh access token | Yes (refresh token) | `{refresh_token}` | New access_token + refresh_token |
-| GET | `/api/v1/auth/me` | Get current user from token | Yes | - | User object |
-| POST | `/api/v1/auth/logout` | Logout current device | Yes | - | Success message |
-| POST | `/api/v1/auth/logout-all` | Logout all devices | Yes | - | Success message |
-| POST | `/api/v1/auth/password-reset/request` | Request password reset email | No | `{email}` | Success message (always) |
-| POST | `/api/v1/auth/password-reset/confirm` | Reset password with token | No | `{token, new_password}` | Success message |
+| Method | Endpoint                              | Purpose                              | Auth Required       | Request Body                    | Response                            |
+| ------ | ------------------------------------- | ------------------------------------ | ------------------- | ------------------------------- | ----------------------------------- |
+| POST   | `/api/v1/auth/register`               | Register new user account            | No                  | `{email, password, first_name}` | User + tokens                       |
+| POST   | `/api/v1/auth/login`                  | Authenticate user                    | No                  | `{email, password}`             | User + access_token + refresh_token |
+| POST   | `/api/v1/auth/login/oauth`            | OAuth2-compatible login (Swagger UI) | No                  | Form data                       | tokens                              |
+| POST   | `/api/v1/auth/refresh`                | Refresh access token                 | Yes (refresh token) | `{refresh_token}`               | New access_token + refresh_token    |
+| GET    | `/api/v1/auth/me`                     | Get current user from token          | Yes                 | -                               | User object                         |
+| POST   | `/api/v1/auth/logout`                 | Logout current device                | Yes                 | -                               | Success message                     |
+| POST   | `/api/v1/auth/logout-all`             | Logout all devices                   | Yes                 | -                               | Success message                     |
+| POST   | `/api/v1/auth/password-reset/request` | Request password reset email         | No                  | `{email}`                       | Success message (always)            |
+| POST   | `/api/v1/auth/password-reset/confirm` | Reset password with token            | No                  | `{token, new_password}`         | Success message                     |
 
 **Authentication Response Format:**
+
 ```typescript
 {
-  access_token: string;        // JWT, expires in 15 minutes
-  refresh_token: string;       // JWT, expires in 7 days
-  token_type: "bearer";
+  access_token: string; // JWT, expires in 15 minutes
+  refresh_token: string; // JWT, expires in 7 days
+  token_type: 'bearer';
   user: User;
 }
 ```
 
 ### 15.2 User Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Query Params | Response |
-|--------|----------|---------|---------------|--------------|----------|
-| GET | `/api/v1/users` | List all users (paginated) | Admin only | `page, page_size, search` | Paginated users |
-| GET | `/api/v1/users/me` | Get own profile | Yes | - | User object |
-| PATCH | `/api/v1/users/me` | Update own profile | Yes | `{first_name, last_name, phone, preferences}` | Updated user |
-| PATCH | `/api/v1/users/me/password` | Change own password | Yes | `{current_password, new_password}` | Success message |
-| GET | `/api/v1/users/{user_id}` | Get user by ID | Yes (own or admin) | - | User object |
-| PATCH | `/api/v1/users/{user_id}` | Update user | Yes (own or admin) | User fields | Updated user |
-| DELETE | `/api/v1/users/{user_id}` | Soft delete user | Admin only | - | Success message |
+| Method | Endpoint                    | Purpose                    | Auth Required      | Query Params                                  | Response        |
+| ------ | --------------------------- | -------------------------- | ------------------ | --------------------------------------------- | --------------- |
+| GET    | `/api/v1/users`             | List all users (paginated) | Admin only         | `page, page_size, search`                     | Paginated users |
+| GET    | `/api/v1/users/me`          | Get own profile            | Yes                | -                                             | User object     |
+| PATCH  | `/api/v1/users/me`          | Update own profile         | Yes                | `{first_name, last_name, phone, preferences}` | Updated user    |
+| PATCH  | `/api/v1/users/me/password` | Change own password        | Yes                | `{current_password, new_password}`            | Success message |
+| GET    | `/api/v1/users/{user_id}`   | Get user by ID             | Yes (own or admin) | -                                             | User object     |
+| PATCH  | `/api/v1/users/{user_id}`   | Update user                | Yes (own or admin) | User fields                                   | Updated user    |
+| DELETE | `/api/v1/users/{user_id}`   | Soft delete user           | Admin only         | -                                             | Success message |
 
 **User Model Fields:**
+
 ```typescript
 {
   id: UUID;
   email: string;
-  first_name: string;           // Required
+  first_name: string; // Required
   last_name: string | null;
   phone_number: string | null;
   is_active: boolean;
@@ -1721,13 +1869,14 @@ Complete reference of all backend API endpoints for frontend integration. All en
 
 ### 15.3 Session Management Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Response |
-|--------|----------|---------|---------------|----------|
-| GET | `/api/v1/sessions/me` | List my active sessions | Yes | Array of sessions |
-| DELETE | `/api/v1/sessions/{session_id}` | Revoke specific session | Yes (own session) | Success message |
-| DELETE | `/api/v1/sessions/me/expired` | Cleanup expired sessions | Yes | Success message |
+| Method | Endpoint                        | Purpose                  | Auth Required     | Response          |
+| ------ | ------------------------------- | ------------------------ | ----------------- | ----------------- |
+| GET    | `/api/v1/sessions/me`           | List my active sessions  | Yes               | Array of sessions |
+| DELETE | `/api/v1/sessions/{session_id}` | Revoke specific session  | Yes (own session) | Success message   |
+| DELETE | `/api/v1/sessions/me/expired`   | Cleanup expired sessions | Yes               | Success message   |
 
 **Session Model:**
+
 ```typescript
 {
   id: UUID;
@@ -1745,18 +1894,19 @@ Complete reference of all backend API endpoints for frontend integration. All en
 
 ### 15.4 Admin User Management Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Request Body | Response |
-|--------|----------|---------|---------------|--------------|----------|
-| GET | `/api/v1/admin/users` | List all users with filters | Admin only | `search, is_active, is_superuser, page` | Paginated users |
-| POST | `/api/v1/admin/users` | Create user (can set superuser) | Admin only | User fields + `is_superuser` | Created user |
-| GET | `/api/v1/admin/users/{user_id}` | Get user details | Admin only | - | User with relations |
-| PUT | `/api/v1/admin/users/{user_id}` | Update user (full update) | Admin only | All user fields | Updated user |
-| DELETE | `/api/v1/admin/users/{user_id}` | Soft delete user | Admin only | - | Success message |
-| POST | `/api/v1/admin/users/{user_id}/activate` | Activate user account | Admin only | - | Updated user |
-| POST | `/api/v1/admin/users/{user_id}/deactivate` | Deactivate user account | Admin only | - | Updated user |
-| POST | `/api/v1/admin/users/bulk-action` | Bulk activate/deactivate/delete | Admin only | `{action, user_ids[]}` | Results array |
+| Method | Endpoint                                   | Purpose                         | Auth Required | Request Body                            | Response            |
+| ------ | ------------------------------------------ | ------------------------------- | ------------- | --------------------------------------- | ------------------- |
+| GET    | `/api/v1/admin/users`                      | List all users with filters     | Admin only    | `search, is_active, is_superuser, page` | Paginated users     |
+| POST   | `/api/v1/admin/users`                      | Create user (can set superuser) | Admin only    | User fields + `is_superuser`            | Created user        |
+| GET    | `/api/v1/admin/users/{user_id}`            | Get user details                | Admin only    | -                                       | User with relations |
+| PUT    | `/api/v1/admin/users/{user_id}`            | Update user (full update)       | Admin only    | All user fields                         | Updated user        |
+| DELETE | `/api/v1/admin/users/{user_id}`            | Soft delete user                | Admin only    | -                                       | Success message     |
+| POST   | `/api/v1/admin/users/{user_id}/activate`   | Activate user account           | Admin only    | -                                       | Updated user        |
+| POST   | `/api/v1/admin/users/{user_id}/deactivate` | Deactivate user account         | Admin only    | -                                       | Updated user        |
+| POST   | `/api/v1/admin/users/bulk-action`          | Bulk activate/deactivate/delete | Admin only    | `{action, user_ids[]}`                  | Results array       |
 
 **Bulk Action Request:**
+
 ```typescript
 {
   action: "activate" | "deactivate" | "delete";
@@ -1766,24 +1916,25 @@ Complete reference of all backend API endpoints for frontend integration. All en
 
 ### 15.5 Organization Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Response |
-|--------|----------|---------|---------------|----------|
-| GET | `/api/v1/organizations` | List organizations | Yes | Array of organizations |
-| POST | `/api/v1/organizations` | Create organization | Yes | Created organization |
-| GET | `/api/v1/organizations/{org_id}` | Get organization details | Yes (member or admin) | Organization |
-| PUT | `/api/v1/organizations/{org_id}` | Update organization | Yes (admin of org) | Updated organization |
-| DELETE | `/api/v1/organizations/{org_id}` | Delete organization | Yes (admin of org) | Success message |
+| Method | Endpoint                         | Purpose                  | Auth Required         | Response               |
+| ------ | -------------------------------- | ------------------------ | --------------------- | ---------------------- |
+| GET    | `/api/v1/organizations`          | List organizations       | Yes                   | Array of organizations |
+| POST   | `/api/v1/organizations`          | Create organization      | Yes                   | Created organization   |
+| GET    | `/api/v1/organizations/{org_id}` | Get organization details | Yes (member or admin) | Organization           |
+| PUT    | `/api/v1/organizations/{org_id}` | Update organization      | Yes (admin of org)    | Updated organization   |
+| DELETE | `/api/v1/organizations/{org_id}` | Delete organization      | Yes (admin of org)    | Success message        |
 
 **Organization Model:**
+
 ```typescript
 {
   id: UUID;
   name: string;
-  slug: string;                    // URL-friendly identifier
+  slug: string; // URL-friendly identifier
   description: string | null;
   is_active: boolean;
-  settings: Record<string, any>;   // JSON settings
-  member_count: number;            // Computed field
+  settings: Record<string, any>; // JSON settings
+  member_count: number; // Computed field
   created_at: datetime;
   updated_at: datetime | null;
 }
@@ -1791,24 +1942,25 @@ Complete reference of all backend API endpoints for frontend integration. All en
 
 ### 15.6 Admin Organization Management Endpoints
 
-| Method | Endpoint | Purpose | Auth Required | Request Body | Response |
-|--------|----------|---------|---------------|--------------|----------|
-| GET | `/api/v1/admin/organizations` | List all orgs with search | Admin only | `search, page` | Paginated orgs |
-| POST | `/api/v1/admin/organizations` | Create organization | Admin only | `{name, slug, description, settings}` | Created org |
-| GET | `/api/v1/admin/organizations/{org_id}` | Get org details | Admin only | - | Organization |
-| PUT | `/api/v1/admin/organizations/{org_id}` | Update organization | Admin only | Org fields | Updated org |
-| DELETE | `/api/v1/admin/organizations/{org_id}` | Delete organization | Admin only | - | Success message |
-| GET | `/api/v1/admin/organizations/{org_id}/members` | List organization members | Admin only | - | Array of members |
-| POST | `/api/v1/admin/organizations/{org_id}/members` | Add member with role | Admin only | `{user_id, role}` | Member object |
-| DELETE | `/api/v1/admin/organizations/{org_id}/members/{user_id}` | Remove member | Admin only | - | Success message |
+| Method | Endpoint                                                 | Purpose                   | Auth Required | Request Body                          | Response         |
+| ------ | -------------------------------------------------------- | ------------------------- | ------------- | ------------------------------------- | ---------------- |
+| GET    | `/api/v1/admin/organizations`                            | List all orgs with search | Admin only    | `search, page`                        | Paginated orgs   |
+| POST   | `/api/v1/admin/organizations`                            | Create organization       | Admin only    | `{name, slug, description, settings}` | Created org      |
+| GET    | `/api/v1/admin/organizations/{org_id}`                   | Get org details           | Admin only    | -                                     | Organization     |
+| PUT    | `/api/v1/admin/organizations/{org_id}`                   | Update organization       | Admin only    | Org fields                            | Updated org      |
+| DELETE | `/api/v1/admin/organizations/{org_id}`                   | Delete organization       | Admin only    | -                                     | Success message  |
+| GET    | `/api/v1/admin/organizations/{org_id}/members`           | List organization members | Admin only    | -                                     | Array of members |
+| POST   | `/api/v1/admin/organizations/{org_id}/members`           | Add member with role      | Admin only    | `{user_id, role}`                     | Member object    |
+| DELETE | `/api/v1/admin/organizations/{org_id}/members/{user_id}` | Remove member             | Admin only    | -                                     | Success message  |
 
 **Organization Member:**
+
 ```typescript
 {
   user_id: UUID;
   user_email: string;
-  user_name: string;               // first_name + last_name
-  role: "owner" | "admin" | "member";
+  user_name: string; // first_name + last_name
+  role: 'owner' | 'admin' | 'member';
   joined_at: datetime;
 }
 ```
@@ -1816,6 +1968,7 @@ Complete reference of all backend API endpoints for frontend integration. All en
 ### 15.7 Response Formats
 
 **Success Response (Data):**
+
 ```typescript
 {
   data: T | T[];                   // Single object or array
@@ -1831,6 +1984,7 @@ Complete reference of all backend API endpoints for frontend integration. All en
 ```
 
 **Success Response (Message):**
+
 ```typescript
 {
   success: true;
@@ -1839,28 +1993,29 @@ Complete reference of all backend API endpoints for frontend integration. All en
 ```
 
 **Error Response:**
+
 ```typescript
 {
   success: false;
   errors: Array<{
-    code: string;                  // e.g., "AUTH_001", "USER_002"
+    code: string; // e.g., "AUTH_001", "USER_002"
     message: string;
-    field?: string;                // Optional field name for form errors
+    field?: string; // Optional field name for form errors
   }>;
 }
 ```
 
 ### 15.8 Common Query Parameters
 
-| Parameter | Type | Description | Default | Example |
-|-----------|------|-------------|---------|---------|
-| `page` | integer | Page number (1-indexed) | 1 | `?page=2` |
-| `page_size` | integer | Items per page | 20 | `?page_size=50` |
-| `search` | string | Search term (name, email, etc.) | - | `?search=john` |
-| `is_active` | boolean | Filter by active status | - | `?is_active=true` |
-| `is_superuser` | boolean | Filter by superuser status | - | `?is_superuser=false` |
-| `sort_by` | string | Sort field | - | `?sort_by=created_at` |
-| `sort_order` | string | Sort direction (asc/desc) | desc | `?sort_order=asc` |
+| Parameter      | Type    | Description                     | Default | Example               |
+| -------------- | ------- | ------------------------------- | ------- | --------------------- |
+| `page`         | integer | Page number (1-indexed)         | 1       | `?page=2`             |
+| `page_size`    | integer | Items per page                  | 20      | `?page_size=50`       |
+| `search`       | string  | Search term (name, email, etc.) | -       | `?search=john`        |
+| `is_active`    | boolean | Filter by active status         | -       | `?is_active=true`     |
+| `is_superuser` | boolean | Filter by superuser status      | -       | `?is_superuser=false` |
+| `sort_by`      | string  | Sort field                      | -       | `?sort_by=created_at` |
+| `sort_order`   | string  | Sort direction (asc/desc)       | desc    | `?sort_order=asc`     |
 
 ### 15.9 Authentication Header Format
 
@@ -1871,6 +2026,7 @@ Authorization: Bearer {access_token}
 ```
 
 Example:
+
 ```typescript
 headers: {
   'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`,
@@ -1881,11 +2037,13 @@ headers: {
 ### 15.10 Rate Limiting
 
 Backend implements rate limiting per endpoint:
+
 - **Auth endpoints**: 5 requests/minute
 - **Read operations**: 60 requests/minute
 - **Write operations**: 10-20 requests/minute
 
 Rate limit headers in response:
+
 ```
 X-RateLimit-Limit: 60
 X-RateLimit-Remaining: 45
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index af0c857..e78de6c 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -1,9 +1,9 @@
-const nextJest = require('next/jest')
+const nextJest = require('next/jest');
 
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
   dir: './',
-})
+});
 
 // Add any custom config to be passed to Jest
 const customJestConfig = {
@@ -12,10 +12,7 @@ const customJestConfig = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
-  testMatch: [
-    '<rootDir>/tests/**/*.test.ts',
-    '<rootDir>/tests/**/*.test.tsx',
-  ],
+  testMatch: ['<rootDir>/tests/**/*.test.ts', '<rootDir>/tests/**/*.test.tsx'],
   transformIgnorePatterns: [
     'node_modules/(?!(react-syntax-highlighter|refractor|hastscript|hast-.*|unist-.*|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces)/)',
   ],
@@ -44,7 +41,7 @@ const customJestConfig = {
       statements: 90,
     },
   },
-}
+};
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig)
+module.exports = createJestConfig(customJestConfig);
diff --git a/frontend/jest.setup.js b/frontend/jest.setup.js
index 55890fe..11c6dbf 100644
--- a/frontend/jest.setup.js
+++ b/frontend/jest.setup.js
@@ -1,5 +1,5 @@
 // Learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom';
 import 'whatwg-fetch'; // Polyfill fetch API
 import { Crypto } from '@peculiar/webcrypto';
 
diff --git a/frontend/lighthouse-report.json b/frontend/lighthouse-report.json
index a071544..ff02605 100644
--- a/frontend/lighthouse-report.json
+++ b/frontend/lighthouse-report.json
@@ -583,9 +583,7 @@
             "duration": 0.7660000000000002
           }
         ],
-        "sortedBy": [
-          "duration"
-        ]
+        "sortedBy": ["duration"]
       },
       "guidanceLevel": 1
     },
@@ -639,9 +637,7 @@
         "summary": {
           "wastedMs": 30.269
         },
-        "sortedBy": [
-          "total"
-        ]
+        "sortedBy": ["total"]
       },
       "guidanceLevel": 1
     },
@@ -664,9 +660,7 @@
         "headings": [],
         "items": [],
         "overallSavingsMs": 0,
-        "sortedBy": [
-          "wastedMs"
-        ]
+        "sortedBy": ["wastedMs"]
       },
       "guidanceLevel": 3
     },
@@ -1443,9 +1437,7 @@
             "rtt": 0.14900000000000002
           }
         ],
-        "sortedBy": [
-          "rtt"
-        ]
+        "sortedBy": ["rtt"]
       }
     },
     "network-server-latency": {
@@ -1482,9 +1474,7 @@
             "serverResponseTime": 0.9910000000000001
           }
         ],
-        "sortedBy": [
-          "serverResponseTime"
-        ]
+        "sortedBy": ["serverResponseTime"]
       }
     },
     "main-thread-tasks": {
@@ -3465,13 +3455,7 @@
         "debugData": {
           "type": "debugdata",
           "impact": "critical",
-          "tags": [
-            "cat.aria",
-            "wcag2a",
-            "wcag412",
-            "EN-301-549",
-            "EN-9.4.1.2"
-          ]
+          "tags": ["cat.aria", "wcag2a", "wcag412", "EN-301-549", "EN-9.4.1.2"]
         }
       }
     },
@@ -4097,9 +4081,7 @@
             "totalBytes": 6967
           }
         ],
-        "sortedBy": [
-          "totalBytes"
-        ]
+        "sortedBy": ["totalBytes"]
       },
       "guidanceLevel": 1
     },
@@ -4123,9 +4105,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4175,9 +4155,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4273,9 +4251,7 @@
         ],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 162251,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4305,9 +4281,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4370,9 +4344,7 @@
         ],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 78197,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4403,9 +4375,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4436,9 +4406,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4468,9 +4436,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4500,9 +4466,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4532,9 +4496,7 @@
         "items": [],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 0,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4617,9 +4579,7 @@
         ],
         "overallSavingsMs": 0,
         "overallSavingsBytes": 22021,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -4754,9 +4714,7 @@
         ],
         "overallSavingsMs": 10,
         "overallSavingsBytes": 11696,
-        "sortedBy": [
-          "wastedBytes"
-        ],
+        "sortedBy": ["wastedBytes"],
         "debugData": {
           "type": "debugdata",
           "metricSavings": {
@@ -5185,9 +5143,7 @@
         }
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "uses-long-cache-ttl"
-      ]
+      "replacesAudits": ["uses-long-cache-ttl"]
     },
     "cls-culprits-insight": {
       "id": "cls-culprits-insight",
@@ -5203,11 +5159,7 @@
         "items": []
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "layout-shifts",
-        "non-composited-animations",
-        "unsized-images"
-      ]
+      "replacesAudits": ["layout-shifts", "non-composited-animations", "unsized-images"]
     },
     "document-latency-insight": {
       "id": "document-latency-insight",
@@ -5244,11 +5196,7 @@
         }
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "redirects",
-        "server-response-time",
-        "uses-text-compression"
-      ]
+      "replacesAudits": ["redirects", "server-response-time", "uses-text-compression"]
     },
     "dom-size-insight": {
       "id": "dom-size-insight",
@@ -5344,9 +5292,7 @@
         }
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "dom-size"
-      ]
+      "replacesAudits": ["dom-size"]
     },
     "duplicated-javascript-insight": {
       "id": "duplicated-javascript-insight",
@@ -5387,9 +5333,7 @@
         }
       },
       "guidanceLevel": 2,
-      "replacesAudits": [
-        "duplicated-javascript"
-      ]
+      "replacesAudits": ["duplicated-javascript"]
     },
     "font-display-insight": {
       "id": "font-display-insight",
@@ -5417,9 +5361,7 @@
         "items": []
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "font-display"
-      ]
+      "replacesAudits": ["font-display"]
     },
     "forced-reflow-insight": {
       "id": "forced-reflow-insight",
@@ -5509,9 +5451,7 @@
       "score": null,
       "scoreDisplayMode": "notApplicable",
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "work-during-interaction"
-      ]
+      "replacesAudits": ["work-during-interaction"]
     },
     "lcp-breakdown-insight": {
       "id": "lcp-breakdown-insight",
@@ -5571,9 +5511,7 @@
         ]
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "largest-contentful-paint-element"
-      ]
+      "replacesAudits": ["largest-contentful-paint-element"]
     },
     "lcp-discovery-insight": {
       "id": "lcp-discovery-insight",
@@ -5582,10 +5520,7 @@
       "score": null,
       "scoreDisplayMode": "notApplicable",
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "prioritize-lcp-image",
-        "lcp-lazy-loaded"
-      ]
+      "replacesAudits": ["prioritize-lcp-image", "lcp-lazy-loaded"]
     },
     "legacy-javascript-insight": {
       "id": "legacy-javascript-insight",
@@ -5798,10 +5733,7 @@
         ]
       },
       "guidanceLevel": 1,
-      "replacesAudits": [
-        "critical-request-chains",
-        "uses-rel-preconnect"
-      ]
+      "replacesAudits": ["critical-request-chains", "uses-rel-preconnect"]
     },
     "render-blocking-insight": {
       "id": "render-blocking-insight",
@@ -5840,9 +5772,7 @@
         ]
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "render-blocking-resources"
-      ]
+      "replacesAudits": ["render-blocking-resources"]
     },
     "third-parties-insight": {
       "id": "third-parties-insight",
@@ -6006,9 +5936,7 @@
         "isEntityGrouped": true
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "third-party-summary"
-      ]
+      "replacesAudits": ["third-party-summary"]
     },
     "viewport-insight": {
       "id": "viewport-insight",
@@ -6050,9 +5978,7 @@
         ]
       },
       "guidanceLevel": 3,
-      "replacesAudits": [
-        "viewport"
-      ]
+      "replacesAudits": ["viewport"]
     }
   },
   "configSettings": {
@@ -6083,12 +6009,7 @@
     "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
     "auditMode": false,
     "gatherMode": false,
-    "clearStorageTypes": [
-      "file_systems",
-      "shader_cache",
-      "service_workers",
-      "cache_storage"
-    ],
+    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
     "disableStorageReset": false,
     "debugNavigation": false,
     "channel": "devtools",
@@ -6103,22 +6024,13 @@
     "extraHeaders": null,
     "precomputedLanternData": null,
     "onlyAudits": null,
-    "onlyCategories": [
-      "performance",
-      "accessibility",
-      "best-practices",
-      "seo"
-    ],
+    "onlyCategories": ["performance", "accessibility", "best-practices", "seo"],
     "skipAudits": null
   },
   "categories": {
     "performance": {
       "title": "Performance",
-      "supportedModes": [
-        "navigation",
-        "timespan",
-        "snapshot"
-      ],
+      "supportedModes": ["navigation", "timespan", "snapshot"],
       "auditRefs": [
         {
           "id": "first-contentful-paint",
@@ -6500,10 +6412,7 @@
       "title": "Accessibility",
       "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/articles/how-to-review) is also encouraged.",
       "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/articles/how-to-review).",
-      "supportedModes": [
-        "navigation",
-        "snapshot"
-      ],
+      "supportedModes": ["navigation", "snapshot"],
       "auditRefs": [
         {
           "id": "accesskeys",
@@ -6866,11 +6775,7 @@
     },
     "best-practices": {
       "title": "Best Practices",
-      "supportedModes": [
-        "navigation",
-        "timespan",
-        "snapshot"
-      ],
+      "supportedModes": ["navigation", "timespan", "snapshot"],
       "auditRefs": [
         {
           "id": "is-on-https",
@@ -6990,10 +6895,7 @@
       "title": "SEO",
       "description": "These checks ensure that your page is following basic search engine optimization advice. There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on [Core Web Vitals](https://web.dev/explore/vitals). [Learn more about Google Search Essentials](https://support.google.com/webmasters/answer/35769).",
       "manualDescription": "Run these additional validators on your site to check additional SEO best practices.",
-      "supportedModes": [
-        "navigation",
-        "snapshot"
-      ],
+      "supportedModes": ["navigation", "snapshot"],
       "auditRefs": [
         {
           "id": "is-crawlable",
@@ -7130,10 +7032,7 @@
   "entities": [
     {
       "name": "localhost",
-      "origins": [
-        "http://localhost:3000",
-        "http://localhost:8000"
-      ],
+      "origins": ["http://localhost:3000", "http://localhost:8000"],
       "isFirstParty": true,
       "isUnrecognized": true
     }
@@ -9651,30 +9550,18 @@
   "i18n": {
     "rendererFormattedStrings": {},
     "icuMessagePaths": {
-      "core/audits/is-on-https.js | title": [
-        "audits[is-on-https].title"
-      ],
-      "core/audits/is-on-https.js | description": [
-        "audits[is-on-https].description"
-      ],
+      "core/audits/is-on-https.js | title": ["audits[is-on-https].title"],
+      "core/audits/is-on-https.js | description": ["audits[is-on-https].description"],
       "core/audits/is-on-https.js | columnInsecureURL": [
         "audits[is-on-https].details.headings[0].label"
       ],
       "core/audits/is-on-https.js | columnResolution": [
         "audits[is-on-https].details.headings[1].label"
       ],
-      "core/audits/redirects-http.js | title": [
-        "audits[redirects-http].title"
-      ],
-      "core/audits/redirects-http.js | description": [
-        "audits[redirects-http].description"
-      ],
-      "core/audits/viewport.js | title": [
-        "audits.viewport.title"
-      ],
-      "core/audits/viewport.js | description": [
-        "audits.viewport.description"
-      ],
+      "core/audits/redirects-http.js | title": ["audits[redirects-http].title"],
+      "core/audits/redirects-http.js | description": ["audits[redirects-http].description"],
+      "core/audits/viewport.js | title": ["audits.viewport.title"],
+      "core/audits/viewport.js | description": ["audits.viewport.description"],
       "core/lib/i18n/i18n.js | firstContentfulPaintMetric": [
         "audits[first-contentful-paint].title"
       ],
@@ -9731,15 +9618,9 @@
       "core/audits/metrics/first-meaningful-paint.js | description": [
         "audits[first-meaningful-paint].description"
       ],
-      "core/lib/i18n/i18n.js | speedIndexMetric": [
-        "audits[speed-index].title"
-      ],
-      "core/audits/metrics/speed-index.js | description": [
-        "audits[speed-index].description"
-      ],
-      "core/lib/i18n/i18n.js | totalBlockingTimeMetric": [
-        "audits[total-blocking-time].title"
-      ],
+      "core/lib/i18n/i18n.js | speedIndexMetric": ["audits[speed-index].title"],
+      "core/audits/metrics/speed-index.js | description": ["audits[speed-index].description"],
+      "core/lib/i18n/i18n.js | totalBlockingTimeMetric": ["audits[total-blocking-time].title"],
       "core/audits/metrics/total-blocking-time.js | description": [
         "audits[total-blocking-time].description"
       ],
@@ -9775,9 +9656,7 @@
           "path": "audits[largest-contentful-paint-element].displayValue"
         }
       ],
-      "core/lib/i18n/i18n.js | maxPotentialFIDMetric": [
-        "audits[max-potential-fid].title"
-      ],
+      "core/lib/i18n/i18n.js | maxPotentialFIDMetric": ["audits[max-potential-fid].title"],
       "core/audits/metrics/max-potential-fid.js | description": [
         "audits[max-potential-fid].description"
       ],
@@ -9787,12 +9666,8 @@
       "core/audits/metrics/cumulative-layout-shift.js | description": [
         "audits[cumulative-layout-shift].description"
       ],
-      "core/audits/errors-in-console.js | failureTitle": [
-        "audits[errors-in-console].title"
-      ],
-      "core/audits/errors-in-console.js | description": [
-        "audits[errors-in-console].description"
-      ],
+      "core/audits/errors-in-console.js | failureTitle": ["audits[errors-in-console].title"],
+      "core/audits/errors-in-console.js | description": ["audits[errors-in-console].description"],
       "core/lib/i18n/i18n.js | columnSource": [
         "audits[errors-in-console].details.headings[0].label",
         "audits.deprecations.details.headings[1].label",
@@ -9811,9 +9686,7 @@
         "audits[clickjacking-mitigation].details.headings[0].label",
         "audits[trusted-types-xss].details.headings[0].label"
       ],
-      "core/audits/server-response-time.js | title": [
-        "audits[server-response-time].title"
-      ],
+      "core/audits/server-response-time.js | title": ["audits[server-response-time].title"],
       "core/audits/server-response-time.js | description": [
         "audits[server-response-time].description"
       ],
@@ -9854,18 +9727,10 @@
         "audits[network-rtt].details.headings[1].label",
         "audits[network-server-latency].details.headings[1].label"
       ],
-      "core/lib/i18n/i18n.js | interactiveMetric": [
-        "audits.interactive.title"
-      ],
-      "core/audits/metrics/interactive.js | description": [
-        "audits.interactive.description"
-      ],
-      "core/audits/user-timings.js | title": [
-        "audits[user-timings].title"
-      ],
-      "core/audits/user-timings.js | description": [
-        "audits[user-timings].description"
-      ],
+      "core/lib/i18n/i18n.js | interactiveMetric": ["audits.interactive.title"],
+      "core/audits/metrics/interactive.js | description": ["audits.interactive.description"],
+      "core/audits/user-timings.js | title": ["audits[user-timings].title"],
+      "core/audits/user-timings.js | description": ["audits[user-timings].description"],
       "core/lib/i18n/i18n.js | columnName": [
         "audits[user-timings].details.headings[0].label",
         "audits[third-party-cookies].details.headings[0].label"
@@ -9883,9 +9748,7 @@
         "audits[lcp-breakdown-insight].details.items[0].headings[1].label",
         "audits[render-blocking-insight].details.headings[2].label"
       ],
-      "core/audits/critical-request-chains.js | title": [
-        "audits[critical-request-chains].title"
-      ],
+      "core/audits/critical-request-chains.js | title": ["audits[critical-request-chains].title"],
       "core/audits/critical-request-chains.js | description": [
         "audits[critical-request-chains].description"
       ],
@@ -9897,27 +9760,17 @@
           "path": "audits[critical-request-chains].displayValue"
         }
       ],
-      "core/audits/redirects.js | title": [
-        "audits.redirects.title"
-      ],
-      "core/audits/redirects.js | description": [
-        "audits.redirects.description"
-      ],
-      "core/audits/image-aspect-ratio.js | title": [
-        "audits[image-aspect-ratio].title"
-      ],
-      "core/audits/image-aspect-ratio.js | description": [
-        "audits[image-aspect-ratio].description"
-      ],
+      "core/audits/redirects.js | title": ["audits.redirects.title"],
+      "core/audits/redirects.js | description": ["audits.redirects.description"],
+      "core/audits/image-aspect-ratio.js | title": ["audits[image-aspect-ratio].title"],
+      "core/audits/image-aspect-ratio.js | description": ["audits[image-aspect-ratio].description"],
       "core/audits/image-aspect-ratio.js | columnDisplayed": [
         "audits[image-aspect-ratio].details.headings[2].label"
       ],
       "core/audits/image-aspect-ratio.js | columnActual": [
         "audits[image-aspect-ratio].details.headings[3].label"
       ],
-      "core/audits/image-size-responsive.js | title": [
-        "audits[image-size-responsive].title"
-      ],
+      "core/audits/image-size-responsive.js | title": ["audits[image-size-responsive].title"],
       "core/audits/image-size-responsive.js | description": [
         "audits[image-size-responsive].description"
       ],
@@ -9930,18 +9783,12 @@
       "core/audits/image-size-responsive.js | columnExpected": [
         "audits[image-size-responsive].details.headings[4].label"
       ],
-      "core/audits/deprecations.js | title": [
-        "audits.deprecations.title"
-      ],
-      "core/audits/deprecations.js | description": [
-        "audits.deprecations.description"
-      ],
+      "core/audits/deprecations.js | title": ["audits.deprecations.title"],
+      "core/audits/deprecations.js | description": ["audits.deprecations.description"],
       "core/audits/deprecations.js | columnDeprecate": [
         "audits.deprecations.details.headings[0].label"
       ],
-      "core/audits/third-party-cookies.js | title": [
-        "audits[third-party-cookies].title"
-      ],
+      "core/audits/third-party-cookies.js | title": ["audits[third-party-cookies].title"],
       "core/audits/third-party-cookies.js | description": [
         "audits[third-party-cookies].description"
       ],
@@ -9954,33 +9801,21 @@
       "core/audits/mainthread-work-breakdown.js | columnCategory": [
         "audits[mainthread-work-breakdown].details.headings[0].label"
       ],
-      "core/audits/bootup-time.js | title": [
-        "audits[bootup-time].title"
-      ],
-      "core/audits/bootup-time.js | description": [
-        "audits[bootup-time].description"
-      ],
-      "core/audits/bootup-time.js | columnTotal": [
-        "audits[bootup-time].details.headings[1].label"
-      ],
+      "core/audits/bootup-time.js | title": ["audits[bootup-time].title"],
+      "core/audits/bootup-time.js | description": ["audits[bootup-time].description"],
+      "core/audits/bootup-time.js | columnTotal": ["audits[bootup-time].details.headings[1].label"],
       "core/audits/bootup-time.js | columnScriptEval": [
         "audits[bootup-time].details.headings[2].label"
       ],
       "core/audits/bootup-time.js | columnScriptParse": [
         "audits[bootup-time].details.headings[3].label"
       ],
-      "core/audits/uses-rel-preconnect.js | title": [
-        "audits[uses-rel-preconnect].title"
-      ],
+      "core/audits/uses-rel-preconnect.js | title": ["audits[uses-rel-preconnect].title"],
       "core/audits/uses-rel-preconnect.js | description": [
         "audits[uses-rel-preconnect].description"
       ],
-      "core/audits/font-display.js | title": [
-        "audits[font-display].title"
-      ],
-      "core/audits/font-display.js | description": [
-        "audits[font-display].description"
-      ],
+      "core/audits/font-display.js | title": ["audits[font-display].title"],
+      "core/audits/font-display.js | description": ["audits[font-display].description"],
       "core/lib/i18n/i18n.js | columnWastedBytes": [
         "audits[font-display].details.headings[1].label",
         "audits[unminified-javascript].details.headings[2].label",
@@ -9990,15 +9825,9 @@
         "audits[font-display-insight].details.headings[1].label",
         "audits[image-delivery-insight].details.headings[2].label"
       ],
-      "core/audits/network-rtt.js | title": [
-        "audits[network-rtt].title"
-      ],
-      "core/audits/network-rtt.js | description": [
-        "audits[network-rtt].description"
-      ],
-      "core/audits/network-server-latency.js | title": [
-        "audits[network-server-latency].title"
-      ],
+      "core/audits/network-rtt.js | title": ["audits[network-rtt].title"],
+      "core/audits/network-rtt.js | description": ["audits[network-rtt].description"],
+      "core/audits/network-server-latency.js | title": ["audits[network-server-latency].title"],
       "core/audits/network-server-latency.js | description": [
         "audits[network-server-latency].description"
       ],
@@ -10018,9 +9847,7 @@
         "audits[cache-insight].details.headings[2].label",
         "audits[render-blocking-insight].details.headings[1].label"
       ],
-      "core/lib/i18n/i18n.js | total": [
-        "audits[resource-summary].details.items[0].label"
-      ],
+      "core/lib/i18n/i18n.js | total": ["audits[resource-summary].details.items[0].label"],
       "core/lib/i18n/i18n.js | scriptResourceType": [
         "audits[resource-summary].details.items[1].label"
       ],
@@ -10045,15 +9872,11 @@
       "core/lib/i18n/i18n.js | thirdPartyResourceType": [
         "audits[resource-summary].details.items[8].label"
       ],
-      "core/audits/third-party-summary.js | title": [
-        "audits[third-party-summary].title"
-      ],
+      "core/audits/third-party-summary.js | title": ["audits[third-party-summary].title"],
       "core/audits/third-party-summary.js | description": [
         "audits[third-party-summary].description"
       ],
-      "core/audits/third-party-facades.js | title": [
-        "audits[third-party-facades].title"
-      ],
+      "core/audits/third-party-facades.js | title": ["audits[third-party-facades].title"],
       "core/audits/third-party-facades.js | description": [
         "audits[third-party-facades].description"
       ],
@@ -10091,66 +9914,36 @@
       "core/audits/largest-contentful-paint-element.js | itemRenderDelay": [
         "audits[largest-contentful-paint-element].details.items[1].items[3].phase"
       ],
-      "core/audits/lcp-lazy-loaded.js | title": [
-        "audits[lcp-lazy-loaded].title"
-      ],
-      "core/audits/lcp-lazy-loaded.js | description": [
-        "audits[lcp-lazy-loaded].description"
-      ],
-      "core/audits/layout-shifts.js | title": [
-        "audits[layout-shifts].title"
-      ],
-      "core/audits/layout-shifts.js | description": [
-        "audits[layout-shifts].description"
-      ],
+      "core/audits/lcp-lazy-loaded.js | title": ["audits[lcp-lazy-loaded].title"],
+      "core/audits/lcp-lazy-loaded.js | description": ["audits[lcp-lazy-loaded].description"],
+      "core/audits/layout-shifts.js | title": ["audits[layout-shifts].title"],
+      "core/audits/layout-shifts.js | description": ["audits[layout-shifts].description"],
       "core/audits/layout-shifts.js | columnScore": [
         "audits[layout-shifts].details.headings[1].label"
       ],
-      "core/audits/long-tasks.js | title": [
-        "audits[long-tasks].title"
-      ],
-      "core/audits/long-tasks.js | description": [
-        "audits[long-tasks].description"
-      ],
+      "core/audits/long-tasks.js | title": ["audits[long-tasks].title"],
+      "core/audits/long-tasks.js | description": ["audits[long-tasks].description"],
       "core/audits/non-composited-animations.js | title": [
         "audits[non-composited-animations].title"
       ],
       "core/audits/non-composited-animations.js | description": [
         "audits[non-composited-animations].description"
       ],
-      "core/audits/unsized-images.js | title": [
-        "audits[unsized-images].title"
-      ],
-      "core/audits/unsized-images.js | description": [
-        "audits[unsized-images].description"
-      ],
-      "core/audits/valid-source-maps.js | title": [
-        "audits[valid-source-maps].title"
-      ],
-      "core/audits/valid-source-maps.js | description": [
-        "audits[valid-source-maps].description"
-      ],
+      "core/audits/unsized-images.js | title": ["audits[unsized-images].title"],
+      "core/audits/unsized-images.js | description": ["audits[unsized-images].description"],
+      "core/audits/valid-source-maps.js | title": ["audits[valid-source-maps].title"],
+      "core/audits/valid-source-maps.js | description": ["audits[valid-source-maps].description"],
       "core/audits/valid-source-maps.js | columnMapURL": [
         "audits[valid-source-maps].details.headings[1].label"
       ],
-      "core/audits/prioritize-lcp-image.js | title": [
-        "audits[prioritize-lcp-image].title"
-      ],
+      "core/audits/prioritize-lcp-image.js | title": ["audits[prioritize-lcp-image].title"],
       "core/audits/prioritize-lcp-image.js | description": [
         "audits[prioritize-lcp-image].description"
       ],
-      "core/audits/csp-xss.js | title": [
-        "audits[csp-xss].title"
-      ],
-      "core/audits/csp-xss.js | description": [
-        "audits[csp-xss].description"
-      ],
-      "core/audits/csp-xss.js | columnDirective": [
-        "audits[csp-xss].details.headings[1].label"
-      ],
-      "core/audits/csp-xss.js | columnSeverity": [
-        "audits[csp-xss].details.headings[2].label"
-      ],
+      "core/audits/csp-xss.js | title": ["audits[csp-xss].title"],
+      "core/audits/csp-xss.js | description": ["audits[csp-xss].description"],
+      "core/audits/csp-xss.js | columnDirective": ["audits[csp-xss].details.headings[1].label"],
+      "core/audits/csp-xss.js | columnSeverity": ["audits[csp-xss].details.headings[2].label"],
       "core/lib/i18n/i18n.js | itemSeverityHigh": [
         "audits[csp-xss].details.items[0].severity",
         "audits[has-hsts].details.items[0].severity",
@@ -10158,30 +9951,14 @@
         "audits[clickjacking-mitigation].details.items[0].severity",
         "audits[trusted-types-xss].details.items[0].severity"
       ],
-      "core/audits/csp-xss.js | noCsp": [
-        "audits[csp-xss].details.items[0].description"
-      ],
-      "core/audits/has-hsts.js | title": [
-        "audits[has-hsts].title"
-      ],
-      "core/audits/has-hsts.js | description": [
-        "audits[has-hsts].description"
-      ],
-      "core/audits/has-hsts.js | columnDirective": [
-        "audits[has-hsts].details.headings[1].label"
-      ],
-      "core/audits/has-hsts.js | columnSeverity": [
-        "audits[has-hsts].details.headings[2].label"
-      ],
-      "core/audits/has-hsts.js | noHsts": [
-        "audits[has-hsts].details.items[0].description"
-      ],
-      "core/audits/origin-isolation.js | title": [
-        "audits[origin-isolation].title"
-      ],
-      "core/audits/origin-isolation.js | description": [
-        "audits[origin-isolation].description"
-      ],
+      "core/audits/csp-xss.js | noCsp": ["audits[csp-xss].details.items[0].description"],
+      "core/audits/has-hsts.js | title": ["audits[has-hsts].title"],
+      "core/audits/has-hsts.js | description": ["audits[has-hsts].description"],
+      "core/audits/has-hsts.js | columnDirective": ["audits[has-hsts].details.headings[1].label"],
+      "core/audits/has-hsts.js | columnSeverity": ["audits[has-hsts].details.headings[2].label"],
+      "core/audits/has-hsts.js | noHsts": ["audits[has-hsts].details.items[0].description"],
+      "core/audits/origin-isolation.js | title": ["audits[origin-isolation].title"],
+      "core/audits/origin-isolation.js | description": ["audits[origin-isolation].description"],
       "core/audits/origin-isolation.js | columnDirective": [
         "audits[origin-isolation].details.headings[1].label"
       ],
@@ -10191,9 +9968,7 @@
       "core/audits/origin-isolation.js | noCoop": [
         "audits[origin-isolation].details.items[0].description"
       ],
-      "core/audits/clickjacking-mitigation.js | title": [
-        "audits[clickjacking-mitigation].title"
-      ],
+      "core/audits/clickjacking-mitigation.js | title": ["audits[clickjacking-mitigation].title"],
       "core/audits/clickjacking-mitigation.js | description": [
         "audits[clickjacking-mitigation].description"
       ],
@@ -10203,27 +9978,17 @@
       "core/audits/clickjacking-mitigation.js | noClickjackingMitigation": [
         "audits[clickjacking-mitigation].details.items[0].description"
       ],
-      "core/audits/trusted-types-xss.js | title": [
-        "audits[trusted-types-xss].title"
-      ],
-      "core/audits/trusted-types-xss.js | description": [
-        "audits[trusted-types-xss].description"
-      ],
+      "core/audits/trusted-types-xss.js | title": ["audits[trusted-types-xss].title"],
+      "core/audits/trusted-types-xss.js | description": ["audits[trusted-types-xss].description"],
       "core/audits/trusted-types-xss.js | columnSeverity": [
         "audits[trusted-types-xss].details.headings[1].label"
       ],
       "core/audits/trusted-types-xss.js | noTrustedTypesToMitigateXss": [
         "audits[trusted-types-xss].details.items[0].description"
       ],
-      "core/audits/accessibility/accesskeys.js | title": [
-        "audits.accesskeys.title"
-      ],
-      "core/audits/accessibility/accesskeys.js | description": [
-        "audits.accesskeys.description"
-      ],
-      "core/audits/accessibility/aria-allowed-attr.js | title": [
-        "audits[aria-allowed-attr].title"
-      ],
+      "core/audits/accessibility/accesskeys.js | title": ["audits.accesskeys.title"],
+      "core/audits/accessibility/accesskeys.js | description": ["audits.accesskeys.description"],
+      "core/audits/accessibility/aria-allowed-attr.js | title": ["audits[aria-allowed-attr].title"],
       "core/audits/accessibility/aria-allowed-attr.js | description": [
         "audits[aria-allowed-attr].description"
       ],
@@ -10253,15 +10018,11 @@
         "audits[target-size].details.headings[0].label",
         "audits[paste-preventing-inputs].details.headings[0].label"
       ],
-      "core/audits/accessibility/aria-allowed-role.js | title": [
-        "audits[aria-allowed-role].title"
-      ],
+      "core/audits/accessibility/aria-allowed-role.js | title": ["audits[aria-allowed-role].title"],
       "core/audits/accessibility/aria-allowed-role.js | description": [
         "audits[aria-allowed-role].description"
       ],
-      "core/audits/accessibility/aria-command-name.js | title": [
-        "audits[aria-command-name].title"
-      ],
+      "core/audits/accessibility/aria-command-name.js | title": ["audits[aria-command-name].title"],
       "core/audits/accessibility/aria-command-name.js | description": [
         "audits[aria-command-name].description"
       ],
@@ -10277,21 +10038,15 @@
       "core/audits/accessibility/aria-deprecated-role.js | description": [
         "audits[aria-deprecated-role].description"
       ],
-      "core/audits/accessibility/aria-dialog-name.js | title": [
-        "audits[aria-dialog-name].title"
-      ],
+      "core/audits/accessibility/aria-dialog-name.js | title": ["audits[aria-dialog-name].title"],
       "core/audits/accessibility/aria-dialog-name.js | description": [
         "audits[aria-dialog-name].description"
       ],
-      "core/audits/accessibility/aria-hidden-body.js | title": [
-        "audits[aria-hidden-body].title"
-      ],
+      "core/audits/accessibility/aria-hidden-body.js | title": ["audits[aria-hidden-body].title"],
       "core/audits/accessibility/aria-hidden-body.js | description": [
         "audits[aria-hidden-body].description"
       ],
-      "core/audits/accessibility/aria-hidden-focus.js | title": [
-        "audits[aria-hidden-focus].title"
-      ],
+      "core/audits/accessibility/aria-hidden-focus.js | title": ["audits[aria-hidden-focus].title"],
       "core/audits/accessibility/aria-hidden-focus.js | description": [
         "audits[aria-hidden-focus].description"
       ],
@@ -10301,9 +10056,7 @@
       "core/audits/accessibility/aria-input-field-name.js | description": [
         "audits[aria-input-field-name].description"
       ],
-      "core/audits/accessibility/aria-meter-name.js | title": [
-        "audits[aria-meter-name].title"
-      ],
+      "core/audits/accessibility/aria-meter-name.js | title": ["audits[aria-meter-name].title"],
       "core/audits/accessibility/aria-meter-name.js | description": [
         "audits[aria-meter-name].description"
       ],
@@ -10337,27 +10090,17 @@
       "core/audits/accessibility/aria-required-parent.js | description": [
         "audits[aria-required-parent].description"
       ],
-      "core/audits/accessibility/aria-roles.js | title": [
-        "audits[aria-roles].title"
-      ],
-      "core/audits/accessibility/aria-roles.js | description": [
-        "audits[aria-roles].description"
-      ],
-      "core/audits/accessibility/aria-text.js | title": [
-        "audits[aria-text].title"
-      ],
-      "core/audits/accessibility/aria-text.js | description": [
-        "audits[aria-text].description"
-      ],
+      "core/audits/accessibility/aria-roles.js | title": ["audits[aria-roles].title"],
+      "core/audits/accessibility/aria-roles.js | description": ["audits[aria-roles].description"],
+      "core/audits/accessibility/aria-text.js | title": ["audits[aria-text].title"],
+      "core/audits/accessibility/aria-text.js | description": ["audits[aria-text].description"],
       "core/audits/accessibility/aria-toggle-field-name.js | title": [
         "audits[aria-toggle-field-name].title"
       ],
       "core/audits/accessibility/aria-toggle-field-name.js | description": [
         "audits[aria-toggle-field-name].description"
       ],
-      "core/audits/accessibility/aria-tooltip-name.js | title": [
-        "audits[aria-tooltip-name].title"
-      ],
+      "core/audits/accessibility/aria-tooltip-name.js | title": ["audits[aria-tooltip-name].title"],
       "core/audits/accessibility/aria-tooltip-name.js | description": [
         "audits[aria-tooltip-name].description"
       ],
@@ -10373,57 +10116,33 @@
       "core/audits/accessibility/aria-valid-attr-value.js | description": [
         "audits[aria-valid-attr-value].description"
       ],
-      "core/audits/accessibility/aria-valid-attr.js | title": [
-        "audits[aria-valid-attr].title"
-      ],
+      "core/audits/accessibility/aria-valid-attr.js | title": ["audits[aria-valid-attr].title"],
       "core/audits/accessibility/aria-valid-attr.js | description": [
         "audits[aria-valid-attr].description"
       ],
-      "core/audits/accessibility/button-name.js | title": [
-        "audits[button-name].title"
-      ],
-      "core/audits/accessibility/button-name.js | description": [
-        "audits[button-name].description"
-      ],
-      "core/audits/accessibility/bypass.js | title": [
-        "audits.bypass.title"
-      ],
-      "core/audits/accessibility/bypass.js | description": [
-        "audits.bypass.description"
-      ],
-      "core/audits/accessibility/color-contrast.js | title": [
-        "audits[color-contrast].title"
-      ],
+      "core/audits/accessibility/button-name.js | title": ["audits[button-name].title"],
+      "core/audits/accessibility/button-name.js | description": ["audits[button-name].description"],
+      "core/audits/accessibility/bypass.js | title": ["audits.bypass.title"],
+      "core/audits/accessibility/bypass.js | description": ["audits.bypass.description"],
+      "core/audits/accessibility/color-contrast.js | title": ["audits[color-contrast].title"],
       "core/audits/accessibility/color-contrast.js | description": [
         "audits[color-contrast].description"
       ],
-      "core/audits/accessibility/definition-list.js | title": [
-        "audits[definition-list].title"
-      ],
+      "core/audits/accessibility/definition-list.js | title": ["audits[definition-list].title"],
       "core/audits/accessibility/definition-list.js | description": [
         "audits[definition-list].description"
       ],
-      "core/audits/accessibility/dlitem.js | title": [
-        "audits.dlitem.title"
-      ],
-      "core/audits/accessibility/dlitem.js | description": [
-        "audits.dlitem.description"
-      ],
-      "core/audits/accessibility/document-title.js | title": [
-        "audits[document-title].title"
-      ],
+      "core/audits/accessibility/dlitem.js | title": ["audits.dlitem.title"],
+      "core/audits/accessibility/dlitem.js | description": ["audits.dlitem.description"],
+      "core/audits/accessibility/document-title.js | title": ["audits[document-title].title"],
       "core/audits/accessibility/document-title.js | description": [
         "audits[document-title].description"
       ],
-      "core/audits/accessibility/duplicate-id-aria.js | title": [
-        "audits[duplicate-id-aria].title"
-      ],
+      "core/audits/accessibility/duplicate-id-aria.js | title": ["audits[duplicate-id-aria].title"],
       "core/audits/accessibility/duplicate-id-aria.js | description": [
         "audits[duplicate-id-aria].description"
       ],
-      "core/audits/accessibility/empty-heading.js | title": [
-        "audits[empty-heading].title"
-      ],
+      "core/audits/accessibility/empty-heading.js | title": ["audits[empty-heading].title"],
       "core/audits/accessibility/empty-heading.js | description": [
         "audits[empty-heading].description"
       ],
@@ -10433,27 +10152,17 @@
       "core/audits/accessibility/form-field-multiple-labels.js | description": [
         "audits[form-field-multiple-labels].description"
       ],
-      "core/audits/accessibility/frame-title.js | title": [
-        "audits[frame-title].title"
-      ],
-      "core/audits/accessibility/frame-title.js | description": [
-        "audits[frame-title].description"
-      ],
-      "core/audits/accessibility/heading-order.js | title": [
-        "audits[heading-order].title"
-      ],
+      "core/audits/accessibility/frame-title.js | title": ["audits[frame-title].title"],
+      "core/audits/accessibility/frame-title.js | description": ["audits[frame-title].description"],
+      "core/audits/accessibility/heading-order.js | title": ["audits[heading-order].title"],
       "core/audits/accessibility/heading-order.js | description": [
         "audits[heading-order].description"
       ],
-      "core/audits/accessibility/html-has-lang.js | title": [
-        "audits[html-has-lang].title"
-      ],
+      "core/audits/accessibility/html-has-lang.js | title": ["audits[html-has-lang].title"],
       "core/audits/accessibility/html-has-lang.js | description": [
         "audits[html-has-lang].description"
       ],
-      "core/audits/accessibility/html-lang-valid.js | title": [
-        "audits[html-lang-valid].title"
-      ],
+      "core/audits/accessibility/html-lang-valid.js | title": ["audits[html-lang-valid].title"],
       "core/audits/accessibility/html-lang-valid.js | description": [
         "audits[html-lang-valid].description"
       ],
@@ -10469,27 +10178,19 @@
       "core/audits/accessibility/identical-links-same-purpose.js | description": [
         "audits[identical-links-same-purpose].description"
       ],
-      "core/audits/accessibility/image-alt.js | title": [
-        "audits[image-alt].title"
-      ],
-      "core/audits/accessibility/image-alt.js | description": [
-        "audits[image-alt].description"
-      ],
+      "core/audits/accessibility/image-alt.js | title": ["audits[image-alt].title"],
+      "core/audits/accessibility/image-alt.js | description": ["audits[image-alt].description"],
       "core/audits/accessibility/image-redundant-alt.js | title": [
         "audits[image-redundant-alt].title"
       ],
       "core/audits/accessibility/image-redundant-alt.js | description": [
         "audits[image-redundant-alt].description"
       ],
-      "core/audits/accessibility/input-button-name.js | title": [
-        "audits[input-button-name].title"
-      ],
+      "core/audits/accessibility/input-button-name.js | title": ["audits[input-button-name].title"],
       "core/audits/accessibility/input-button-name.js | description": [
         "audits[input-button-name].description"
       ],
-      "core/audits/accessibility/input-image-alt.js | title": [
-        "audits[input-image-alt].title"
-      ],
+      "core/audits/accessibility/input-image-alt.js | title": ["audits[input-image-alt].title"],
       "core/audits/accessibility/input-image-alt.js | description": [
         "audits[input-image-alt].description"
       ],
@@ -10499,78 +10200,40 @@
       "core/audits/accessibility/label-content-name-mismatch.js | description": [
         "audits[label-content-name-mismatch].description"
       ],
-      "core/audits/accessibility/label.js | title": [
-        "audits.label.title"
-      ],
-      "core/audits/accessibility/label.js | description": [
-        "audits.label.description"
-      ],
-      "core/audits/accessibility/landmark-one-main.js | title": [
-        "audits[landmark-one-main].title"
-      ],
+      "core/audits/accessibility/label.js | title": ["audits.label.title"],
+      "core/audits/accessibility/label.js | description": ["audits.label.description"],
+      "core/audits/accessibility/landmark-one-main.js | title": ["audits[landmark-one-main].title"],
       "core/audits/accessibility/landmark-one-main.js | description": [
         "audits[landmark-one-main].description"
       ],
-      "core/audits/accessibility/link-name.js | title": [
-        "audits[link-name].title"
-      ],
-      "core/audits/accessibility/link-name.js | description": [
-        "audits[link-name].description"
-      ],
+      "core/audits/accessibility/link-name.js | title": ["audits[link-name].title"],
+      "core/audits/accessibility/link-name.js | description": ["audits[link-name].description"],
       "core/audits/accessibility/link-in-text-block.js | title": [
         "audits[link-in-text-block].title"
       ],
       "core/audits/accessibility/link-in-text-block.js | description": [
         "audits[link-in-text-block].description"
       ],
-      "core/audits/accessibility/list.js | title": [
-        "audits.list.title"
-      ],
-      "core/audits/accessibility/list.js | description": [
-        "audits.list.description"
-      ],
-      "core/audits/accessibility/listitem.js | title": [
-        "audits.listitem.title"
-      ],
-      "core/audits/accessibility/listitem.js | description": [
-        "audits.listitem.description"
-      ],
-      "core/audits/accessibility/meta-refresh.js | title": [
-        "audits[meta-refresh].title"
-      ],
+      "core/audits/accessibility/list.js | title": ["audits.list.title"],
+      "core/audits/accessibility/list.js | description": ["audits.list.description"],
+      "core/audits/accessibility/listitem.js | title": ["audits.listitem.title"],
+      "core/audits/accessibility/listitem.js | description": ["audits.listitem.description"],
+      "core/audits/accessibility/meta-refresh.js | title": ["audits[meta-refresh].title"],
       "core/audits/accessibility/meta-refresh.js | description": [
         "audits[meta-refresh].description"
       ],
-      "core/audits/accessibility/meta-viewport.js | title": [
-        "audits[meta-viewport].title"
-      ],
+      "core/audits/accessibility/meta-viewport.js | title": ["audits[meta-viewport].title"],
       "core/audits/accessibility/meta-viewport.js | description": [
         "audits[meta-viewport].description"
       ],
-      "core/audits/accessibility/object-alt.js | title": [
-        "audits[object-alt].title"
-      ],
-      "core/audits/accessibility/object-alt.js | description": [
-        "audits[object-alt].description"
-      ],
-      "core/audits/accessibility/select-name.js | title": [
-        "audits[select-name].title"
-      ],
-      "core/audits/accessibility/select-name.js | description": [
-        "audits[select-name].description"
-      ],
-      "core/audits/accessibility/skip-link.js | title": [
-        "audits[skip-link].title"
-      ],
-      "core/audits/accessibility/skip-link.js | description": [
-        "audits[skip-link].description"
-      ],
-      "core/audits/accessibility/tabindex.js | title": [
-        "audits.tabindex.title"
-      ],
-      "core/audits/accessibility/tabindex.js | description": [
-        "audits.tabindex.description"
-      ],
+      "core/audits/accessibility/object-alt.js | title": ["audits[object-alt].title"],
+      "core/audits/accessibility/object-alt.js | description": ["audits[object-alt].description"],
+      "core/audits/accessibility/select-name.js | title": ["audits[select-name].title"],
+      "core/audits/accessibility/select-name.js | description": ["audits[select-name].description"],
+      "core/audits/accessibility/skip-link.js | title": ["audits[skip-link].title"],
+      "core/audits/accessibility/skip-link.js | description": ["audits[skip-link].description"],
+      "core/audits/accessibility/tabindex.js | title": ["audits.tabindex.title"],
+      "core/audits/accessibility/tabindex.js | description": ["audits.tabindex.description"],
       "core/audits/accessibility/table-duplicate-name.js | title": [
         "audits[table-duplicate-name].title"
       ],
@@ -10583,39 +10246,23 @@
       "core/audits/accessibility/table-fake-caption.js | description": [
         "audits[table-fake-caption].description"
       ],
-      "core/audits/accessibility/target-size.js | title": [
-        "audits[target-size].title"
-      ],
-      "core/audits/accessibility/target-size.js | description": [
-        "audits[target-size].description"
-      ],
-      "core/audits/accessibility/td-has-header.js | title": [
-        "audits[td-has-header].title"
-      ],
+      "core/audits/accessibility/target-size.js | title": ["audits[target-size].title"],
+      "core/audits/accessibility/target-size.js | description": ["audits[target-size].description"],
+      "core/audits/accessibility/td-has-header.js | title": ["audits[td-has-header].title"],
       "core/audits/accessibility/td-has-header.js | description": [
         "audits[td-has-header].description"
       ],
-      "core/audits/accessibility/td-headers-attr.js | title": [
-        "audits[td-headers-attr].title"
-      ],
+      "core/audits/accessibility/td-headers-attr.js | title": ["audits[td-headers-attr].title"],
       "core/audits/accessibility/td-headers-attr.js | description": [
         "audits[td-headers-attr].description"
       ],
-      "core/audits/accessibility/th-has-data-cells.js | title": [
-        "audits[th-has-data-cells].title"
-      ],
+      "core/audits/accessibility/th-has-data-cells.js | title": ["audits[th-has-data-cells].title"],
       "core/audits/accessibility/th-has-data-cells.js | description": [
         "audits[th-has-data-cells].description"
       ],
-      "core/audits/accessibility/valid-lang.js | title": [
-        "audits[valid-lang].title"
-      ],
-      "core/audits/accessibility/valid-lang.js | description": [
-        "audits[valid-lang].description"
-      ],
-      "core/audits/accessibility/video-caption.js | title": [
-        "audits[video-caption].title"
-      ],
+      "core/audits/accessibility/valid-lang.js | title": ["audits[valid-lang].title"],
+      "core/audits/accessibility/valid-lang.js | description": ["audits[valid-lang].description"],
+      "core/audits/accessibility/video-caption.js | title": ["audits[video-caption].title"],
       "core/audits/accessibility/video-caption.js | description": [
         "audits[video-caption].description"
       ],
@@ -10651,9 +10298,7 @@
           "path": "audits[total-byte-weight].displayValue"
         }
       ],
-      "core/audits/byte-efficiency/offscreen-images.js | title": [
-        "audits[offscreen-images].title"
-      ],
+      "core/audits/byte-efficiency/offscreen-images.js | title": ["audits[offscreen-images].title"],
       "core/audits/byte-efficiency/offscreen-images.js | description": [
         "audits[offscreen-images].description"
       ],
@@ -10663,9 +10308,7 @@
       "core/audits/byte-efficiency/render-blocking-resources.js | description": [
         "audits[render-blocking-resources].description"
       ],
-      "core/audits/byte-efficiency/unminified-css.js | title": [
-        "audits[unminified-css].title"
-      ],
+      "core/audits/byte-efficiency/unminified-css.js | title": ["audits[unminified-css].title"],
       "core/audits/byte-efficiency/unminified-css.js | description": [
         "audits[unminified-css].description"
       ],
@@ -10707,9 +10350,7 @@
           "path": "audits[legacy-javascript-insight].displayValue"
         }
       ],
-      "core/audits/byte-efficiency/unused-css-rules.js | title": [
-        "audits[unused-css-rules].title"
-      ],
+      "core/audits/byte-efficiency/unused-css-rules.js | title": ["audits[unused-css-rules].title"],
       "core/audits/byte-efficiency/unused-css-rules.js | description": [
         "audits[unused-css-rules].description"
       ],
@@ -10761,24 +10402,12 @@
       "core/audits/byte-efficiency/legacy-javascript.js | description": [
         "audits[legacy-javascript].description"
       ],
-      "core/audits/dobetterweb/doctype.js | title": [
-        "audits.doctype.title"
-      ],
-      "core/audits/dobetterweb/doctype.js | description": [
-        "audits.doctype.description"
-      ],
-      "core/audits/dobetterweb/charset.js | title": [
-        "audits.charset.title"
-      ],
-      "core/audits/dobetterweb/charset.js | description": [
-        "audits.charset.description"
-      ],
-      "core/audits/dobetterweb/dom-size.js | title": [
-        "audits[dom-size].title"
-      ],
-      "core/audits/dobetterweb/dom-size.js | description": [
-        "audits[dom-size].description"
-      ],
+      "core/audits/dobetterweb/doctype.js | title": ["audits.doctype.title"],
+      "core/audits/dobetterweb/doctype.js | description": ["audits.doctype.description"],
+      "core/audits/dobetterweb/charset.js | title": ["audits.charset.title"],
+      "core/audits/dobetterweb/charset.js | description": ["audits.charset.description"],
+      "core/audits/dobetterweb/dom-size.js | title": ["audits[dom-size].title"],
+      "core/audits/dobetterweb/dom-size.js | description": ["audits[dom-size].description"],
       "core/audits/dobetterweb/dom-size.js | displayValue": [
         {
           "values": {
@@ -10808,27 +10437,19 @@
       "core/audits/dobetterweb/geolocation-on-start.js | description": [
         "audits[geolocation-on-start].description"
       ],
-      "core/audits/dobetterweb/inspector-issues.js | title": [
-        "audits[inspector-issues].title"
-      ],
+      "core/audits/dobetterweb/inspector-issues.js | title": ["audits[inspector-issues].title"],
       "core/audits/dobetterweb/inspector-issues.js | description": [
         "audits[inspector-issues].description"
       ],
       "core/audits/dobetterweb/inspector-issues.js | columnIssueType": [
         "audits[inspector-issues].details.headings[0].label"
       ],
-      "core/audits/dobetterweb/no-document-write.js | title": [
-        "audits[no-document-write].title"
-      ],
+      "core/audits/dobetterweb/no-document-write.js | title": ["audits[no-document-write].title"],
       "core/audits/dobetterweb/no-document-write.js | description": [
         "audits[no-document-write].description"
       ],
-      "core/audits/dobetterweb/js-libraries.js | title": [
-        "audits[js-libraries].title"
-      ],
-      "core/audits/dobetterweb/js-libraries.js | description": [
-        "audits[js-libraries].description"
-      ],
+      "core/audits/dobetterweb/js-libraries.js | title": ["audits[js-libraries].title"],
+      "core/audits/dobetterweb/js-libraries.js | description": ["audits[js-libraries].description"],
       "core/audits/dobetterweb/notification-on-start.js | title": [
         "audits[notification-on-start].title"
       ],
@@ -10841,87 +10462,43 @@
       "core/audits/dobetterweb/paste-preventing-inputs.js | description": [
         "audits[paste-preventing-inputs].description"
       ],
-      "core/audits/dobetterweb/uses-http2.js | title": [
-        "audits[uses-http2].title"
-      ],
-      "core/audits/dobetterweb/uses-http2.js | description": [
-        "audits[uses-http2].description"
-      ],
+      "core/audits/dobetterweb/uses-http2.js | title": ["audits[uses-http2].title"],
+      "core/audits/dobetterweb/uses-http2.js | description": ["audits[uses-http2].description"],
       "core/audits/dobetterweb/uses-passive-event-listeners.js | title": [
         "audits[uses-passive-event-listeners].title"
       ],
       "core/audits/dobetterweb/uses-passive-event-listeners.js | description": [
         "audits[uses-passive-event-listeners].description"
       ],
-      "core/audits/seo/meta-description.js | title": [
-        "audits[meta-description].title"
-      ],
-      "core/audits/seo/meta-description.js | description": [
-        "audits[meta-description].description"
-      ],
-      "core/audits/seo/http-status-code.js | title": [
-        "audits[http-status-code].title"
-      ],
-      "core/audits/seo/http-status-code.js | description": [
-        "audits[http-status-code].description"
-      ],
-      "core/audits/seo/font-size.js | title": [
-        "audits[font-size].title"
-      ],
-      "core/audits/seo/font-size.js | description": [
-        "audits[font-size].description"
-      ],
-      "core/audits/seo/link-text.js | title": [
-        "audits[link-text].title"
-      ],
-      "core/audits/seo/link-text.js | description": [
-        "audits[link-text].description"
-      ],
-      "core/audits/seo/crawlable-anchors.js | title": [
-        "audits[crawlable-anchors].title"
-      ],
+      "core/audits/seo/meta-description.js | title": ["audits[meta-description].title"],
+      "core/audits/seo/meta-description.js | description": ["audits[meta-description].description"],
+      "core/audits/seo/http-status-code.js | title": ["audits[http-status-code].title"],
+      "core/audits/seo/http-status-code.js | description": ["audits[http-status-code].description"],
+      "core/audits/seo/font-size.js | title": ["audits[font-size].title"],
+      "core/audits/seo/font-size.js | description": ["audits[font-size].description"],
+      "core/audits/seo/link-text.js | title": ["audits[link-text].title"],
+      "core/audits/seo/link-text.js | description": ["audits[link-text].description"],
+      "core/audits/seo/crawlable-anchors.js | title": ["audits[crawlable-anchors].title"],
       "core/audits/seo/crawlable-anchors.js | description": [
         "audits[crawlable-anchors].description"
       ],
       "core/audits/seo/crawlable-anchors.js | columnFailingLink": [
         "audits[crawlable-anchors].details.headings[0].label"
       ],
-      "core/audits/seo/is-crawlable.js | title": [
-        "audits[is-crawlable].title"
-      ],
-      "core/audits/seo/is-crawlable.js | description": [
-        "audits[is-crawlable].description"
-      ],
-      "core/audits/seo/robots-txt.js | title": [
-        "audits[robots-txt].title"
-      ],
-      "core/audits/seo/robots-txt.js | description": [
-        "audits[robots-txt].description"
-      ],
-      "core/audits/seo/hreflang.js | title": [
-        "audits.hreflang.title"
-      ],
-      "core/audits/seo/hreflang.js | description": [
-        "audits.hreflang.description"
-      ],
-      "core/audits/seo/canonical.js | title": [
-        "audits.canonical.title"
-      ],
-      "core/audits/seo/canonical.js | description": [
-        "audits.canonical.description"
-      ],
-      "core/audits/seo/manual/structured-data.js | title": [
-        "audits[structured-data].title"
-      ],
+      "core/audits/seo/is-crawlable.js | title": ["audits[is-crawlable].title"],
+      "core/audits/seo/is-crawlable.js | description": ["audits[is-crawlable].description"],
+      "core/audits/seo/robots-txt.js | title": ["audits[robots-txt].title"],
+      "core/audits/seo/robots-txt.js | description": ["audits[robots-txt].description"],
+      "core/audits/seo/hreflang.js | title": ["audits.hreflang.title"],
+      "core/audits/seo/hreflang.js | description": ["audits.hreflang.description"],
+      "core/audits/seo/canonical.js | title": ["audits.canonical.title"],
+      "core/audits/seo/canonical.js | description": ["audits.canonical.description"],
+      "core/audits/seo/manual/structured-data.js | title": ["audits[structured-data].title"],
       "core/audits/seo/manual/structured-data.js | description": [
         "audits[structured-data].description"
       ],
-      "core/audits/bf-cache.js | title": [
-        "audits[bf-cache].title"
-      ],
-      "core/audits/bf-cache.js | description": [
-        "audits[bf-cache].description"
-      ],
+      "core/audits/bf-cache.js | title": ["audits[bf-cache].title"],
+      "core/audits/bf-cache.js | description": ["audits[bf-cache].description"],
       "node_modules/@paulirish/trace_engine/models/trace/insights/Cache.js | title": [
         "audits[cache-insight].title"
       ],
@@ -11110,12 +10687,8 @@
       "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | description": [
         "audits[viewport-insight].description"
       ],
-      "core/config/default-config.js | performanceCategoryTitle": [
-        "categories.performance.title"
-      ],
-      "core/config/default-config.js | a11yCategoryTitle": [
-        "categories.accessibility.title"
-      ],
+      "core/config/default-config.js | performanceCategoryTitle": ["categories.performance.title"],
+      "core/config/default-config.js | a11yCategoryTitle": ["categories.accessibility.title"],
       "core/config/default-config.js | a11yCategoryDescription": [
         "categories.accessibility.description"
       ],
@@ -11125,27 +10698,17 @@
       "core/config/default-config.js | bestPracticesCategoryTitle": [
         "categories[best-practices].title"
       ],
-      "core/config/default-config.js | seoCategoryTitle": [
-        "categories.seo.title"
-      ],
-      "core/config/default-config.js | seoCategoryDescription": [
-        "categories.seo.description"
-      ],
+      "core/config/default-config.js | seoCategoryTitle": ["categories.seo.title"],
+      "core/config/default-config.js | seoCategoryDescription": ["categories.seo.description"],
       "core/config/default-config.js | seoCategoryManualDescription": [
         "categories.seo.manualDescription"
       ],
-      "core/config/default-config.js | metricGroupTitle": [
-        "categoryGroups.metrics.title"
-      ],
-      "core/config/default-config.js | insightsGroupTitle": [
-        "categoryGroups.insights.title"
-      ],
+      "core/config/default-config.js | metricGroupTitle": ["categoryGroups.metrics.title"],
+      "core/config/default-config.js | insightsGroupTitle": ["categoryGroups.insights.title"],
       "core/config/default-config.js | insightsGroupDescription": [
         "categoryGroups.insights.description"
       ],
-      "core/config/default-config.js | diagnosticsGroupTitle": [
-        "categoryGroups.diagnostics.title"
-      ],
+      "core/config/default-config.js | diagnosticsGroupTitle": ["categoryGroups.diagnostics.title"],
       "core/config/default-config.js | diagnosticsGroupDescription": [
         "categoryGroups.diagnostics.description"
       ],
@@ -11173,9 +10736,7 @@
       "core/config/default-config.js | a11yNavigationGroupDescription": [
         "categoryGroups[a11y-navigation].description"
       ],
-      "core/config/default-config.js | a11yAriaGroupTitle": [
-        "categoryGroups[a11y-aria].title"
-      ],
+      "core/config/default-config.js | a11yAriaGroupTitle": ["categoryGroups[a11y-aria].title"],
       "core/config/default-config.js | a11yAriaGroupDescription": [
         "categoryGroups[a11y-aria].description"
       ],
@@ -11197,21 +10758,15 @@
       "core/config/default-config.js | a11yTablesListsVideoGroupDescription": [
         "categoryGroups[a11y-tables-lists].description"
       ],
-      "core/config/default-config.js | seoMobileGroupTitle": [
-        "categoryGroups[seo-mobile].title"
-      ],
+      "core/config/default-config.js | seoMobileGroupTitle": ["categoryGroups[seo-mobile].title"],
       "core/config/default-config.js | seoMobileGroupDescription": [
         "categoryGroups[seo-mobile].description"
       ],
-      "core/config/default-config.js | seoContentGroupTitle": [
-        "categoryGroups[seo-content].title"
-      ],
+      "core/config/default-config.js | seoContentGroupTitle": ["categoryGroups[seo-content].title"],
       "core/config/default-config.js | seoContentGroupDescription": [
         "categoryGroups[seo-content].description"
       ],
-      "core/config/default-config.js | seoCrawlingGroupTitle": [
-        "categoryGroups[seo-crawl].title"
-      ],
+      "core/config/default-config.js | seoCrawlingGroupTitle": ["categoryGroups[seo-crawl].title"],
       "core/config/default-config.js | seoCrawlingGroupDescription": [
         "categoryGroups[seo-crawl].description"
       ],
@@ -11229,4 +10784,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 837863a..e02e7a6 100755
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,24 +1,24 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-    output: 'standalone',
-    // Ensure we can connect to the backend in Docker
-    async rewrites() {
-        return [
-            {
-                source: '/api/:path*',
-                destination: 'http://backend:8000/:path*',
-            },
-        ];
-    },
-    // ESLint configuration
-    eslint: {
-        ignoreDuringBuilds: false,
-        dirs: ['src'],
-    },
-    // Production optimizations
-    reactStrictMode: true,
-    // Note: swcMinify is default in Next.js 15
+  output: 'standalone',
+  // Ensure we can connect to the backend in Docker
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://backend:8000/:path*',
+      },
+    ];
+  },
+  // ESLint configuration
+  eslint: {
+    ignoreDuringBuilds: false,
+    dirs: ['src'],
+  },
+  // Production optimizations
+  reactStrictMode: true,
+  // Note: swcMinify is default in Next.js 15
 };
 
-export default nextConfig;
\ No newline at end of file
+export default nextConfig;
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
index c7bcb4b..ba720fe 100755
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;
diff --git a/frontend/scripts/convert-v8-to-istanbul.ts b/frontend/scripts/convert-v8-to-istanbul.ts
index 4e4d1ed..43966ab 100644
--- a/frontend/scripts/convert-v8-to-istanbul.ts
+++ b/frontend/scripts/convert-v8-to-istanbul.ts
@@ -94,7 +94,7 @@ async function convertV8ToIstanbul() {
 
   // Read all V8 coverage files
   const files = await fs.readdir(rawDir);
-  const jsonFiles = files.filter(f => f.endsWith('.json'));
+  const jsonFiles = files.filter((f) => f.endsWith('.json'));
 
   if (jsonFiles.length === 0) {
     console.log('⚠️  No coverage files found in:', rawDir);
@@ -122,10 +122,7 @@ async function convertV8ToIstanbul() {
       for (const entry of v8Coverage) {
         try {
           // Skip non-source files
-          if (
-            !entry.url.startsWith('http://localhost') &&
-            !entry.url.startsWith('file://')
-          ) {
+          if (!entry.url.startsWith('http://localhost') && !entry.url.startsWith('file://')) {
             continue;
           }
 
@@ -174,7 +171,6 @@ async function convertV8ToIstanbul() {
           // Merge into combined coverage
           Object.assign(istanbulCoverage, converted);
           totalConverted++;
-
         } catch (error: any) {
           console.log(`   ⚠️  Skipped ${entry.url}: ${error.message}`);
           totalSkipped++;
@@ -198,7 +194,7 @@ async function convertV8ToIstanbul() {
 
   if (totalConverted === 0) {
     console.log('⚠️  No files were converted. Possible reasons:');
-    console.log('   • V8 coverage doesn\'t contain source files from src/');
+    console.log("   • V8 coverage doesn't contain source files from src/");
     console.log('   • Coverage was collected for build artifacts instead of source');
     console.log('   • Source maps are not correctly configured\n');
     console.log('💡 Consider using Istanbul instrumentation instead (see guide)\n');
diff --git a/frontend/scripts/merge-coverage.ts b/frontend/scripts/merge-coverage.ts
index cf7b6b7..b6928ac 100644
--- a/frontend/scripts/merge-coverage.ts
+++ b/frontend/scripts/merge-coverage.ts
@@ -59,11 +59,9 @@ async function mergeCoverage() {
   const jestCoveragePath = path.join(process.cwd(), 'coverage/coverage-final.json');
 
   if (fs.existsSync(jestCoveragePath)) {
-    const jestCoverage: CoverageData = JSON.parse(
-      fs.readFileSync(jestCoveragePath, 'utf-8')
-    );
+    const jestCoverage: CoverageData = JSON.parse(fs.readFileSync(jestCoveragePath, 'utf-8'));
 
-    Object.keys(jestCoverage).forEach(file => jestFiles.add(file));
+    Object.keys(jestCoverage).forEach((file) => jestFiles.add(file));
     stats.jestFiles = jestFiles.size;
 
     console.log(`   ✅ Loaded ${stats.jestFiles} files from Jest coverage`);
@@ -78,7 +76,7 @@ async function mergeCoverage() {
   const e2eDir = path.join(process.cwd(), 'coverage-e2e/.nyc_output');
 
   if (fs.existsSync(e2eDir)) {
-    const files = fs.readdirSync(e2eDir).filter(f => f.endsWith('.json'));
+    const files = fs.readdirSync(e2eDir).filter((f) => f.endsWith('.json'));
 
     if (files.length === 0) {
       console.log('   ⚠️  No E2E coverage files found in:', e2eDir);
@@ -89,7 +87,7 @@ async function mergeCoverage() {
           fs.readFileSync(path.join(e2eDir, file), 'utf-8')
         );
 
-        Object.keys(coverage).forEach(f => e2eFiles.add(f));
+        Object.keys(coverage).forEach((f) => e2eFiles.add(f));
         map.merge(coverage);
         console.log(`   ✅ Loaded E2E coverage from: ${file}`);
       }
@@ -104,7 +102,7 @@ async function mergeCoverage() {
   // Step 3: Calculate statistics
   stats.combinedFiles = map.files().length;
 
-  map.files().forEach(file => {
+  map.files().forEach((file) => {
     const inJest = jestFiles.has(file);
     const inE2E = e2eFiles.has(file);
 
@@ -146,10 +144,18 @@ async function mergeCoverage() {
   console.log('\n' + '='.repeat(70));
   console.log('📊 COMBINED COVERAGE SUMMARY');
   console.log('='.repeat(70));
-  console.log(`\n  Statements: ${summary.statements.pct.toFixed(2)}% (${summary.statements.covered}/${summary.statements.total})`);
-  console.log(`  Branches:   ${summary.branches.pct.toFixed(2)}% (${summary.branches.covered}/${summary.branches.total})`);
-  console.log(`  Functions:  ${summary.functions.pct.toFixed(2)}% (${summary.functions.covered}/${summary.functions.total})`);
-  console.log(`  Lines:      ${summary.lines.pct.toFixed(2)}% (${summary.lines.covered}/${summary.lines.total})`);
+  console.log(
+    `\n  Statements: ${summary.statements.pct.toFixed(2)}% (${summary.statements.covered}/${summary.statements.total})`
+  );
+  console.log(
+    `  Branches:   ${summary.branches.pct.toFixed(2)}% (${summary.branches.covered}/${summary.branches.total})`
+  );
+  console.log(
+    `  Functions:  ${summary.functions.pct.toFixed(2)}% (${summary.functions.covered}/${summary.functions.total})`
+  );
+  console.log(
+    `  Lines:      ${summary.lines.pct.toFixed(2)}% (${summary.lines.covered}/${summary.lines.total})`
+  );
 
   console.log('\n' + '-'.repeat(70));
   console.log('📁 FILE COVERAGE BREAKDOWN');
@@ -162,10 +168,12 @@ async function mergeCoverage() {
   // Show E2E-only files (these were excluded from Jest)
   if (stats.e2eOnlyFiles.length > 0) {
     console.log('\n  📋 Files covered ONLY by E2E tests (excluded from unit tests):');
-    stats.e2eOnlyFiles.slice(0, 10).forEach(file => {
+    stats.e2eOnlyFiles.slice(0, 10).forEach((file) => {
       const fileCoverage = map.fileCoverageFor(file);
       const fileSummary = fileCoverage.toSummary();
-      console.log(`     • ${path.relative(process.cwd(), file)} (${fileSummary.statements.pct.toFixed(1)}%)`);
+      console.log(
+        `     • ${path.relative(process.cwd(), file)} (${fileSummary.statements.pct.toFixed(1)}%)`
+      );
     });
     if (stats.e2eOnlyFiles.length > 10) {
       console.log(`     ... and ${stats.e2eOnlyFiles.length - 10} more`);
@@ -190,7 +198,9 @@ async function mergeCoverage() {
     const actual = (summary as any)[metric].pct;
     const passed = actual >= threshold;
     const icon = passed ? '✅' : '❌';
-    console.log(`   ${icon} ${metric.padEnd(12)}: ${actual.toFixed(2)}% (threshold: ${threshold}%)`);
+    console.log(
+      `   ${icon} ${metric.padEnd(12)}: ${actual.toFixed(2)}% (threshold: ${threshold}%)`
+    );
     if (!passed) thresholdsFailed = true;
   });
 
diff --git a/frontend/src/app/(auth)/layout.tsx b/frontend/src/app/(auth)/layout.tsx
index abdaf8a..7a49762 100644
--- a/frontend/src/app/(auth)/layout.tsx
+++ b/frontend/src/app/(auth)/layout.tsx
@@ -5,10 +5,6 @@ export const metadata: Metadata = {
   title: 'Authentication',
 };
 
-export default function AuthLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return <AuthLayoutClient>{children}</AuthLayoutClient>;
 }
diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx
index 36d20c9..6c92205 100644
--- a/frontend/src/app/(auth)/login/page.tsx
+++ b/frontend/src/app/(auth)/login/page.tsx
@@ -19,18 +19,13 @@ export default function LoginPage() {
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="text-3xl font-bold tracking-tight">
-          Sign in to your account
-        </h2>
+        <h2 className="text-3xl font-bold tracking-tight">Sign in to your account</h2>
         <p className="mt-2 text-sm text-muted-foreground">
           Access your dashboard and manage your account
         </p>
       </div>
 
-      <LoginForm
-        showRegisterLink
-        showPasswordResetLink
-      />
+      <LoginForm showRegisterLink showPasswordResetLink />
     </div>
   );
 }
diff --git a/frontend/src/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.tsx b/frontend/src/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.tsx
index 70061f6..2aebae7 100644
--- a/frontend/src/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.tsx
+++ b/frontend/src/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.tsx
@@ -14,7 +14,10 @@ import Link from 'next/link';
 // Code-split PasswordResetConfirmForm (319 lines)
 const PasswordResetConfirmForm = dynamic(
   /* istanbul ignore next - Next.js dynamic import, tested via component */
-  () => import('@/components/auth/PasswordResetConfirmForm').then((mod) => ({ default: mod.PasswordResetConfirmForm })),
+  () =>
+    import('@/components/auth/PasswordResetConfirmForm').then((mod) => ({
+      default: mod.PasswordResetConfirmForm,
+    })),
   {
     loading: () => (
       <div className="space-y-4">
@@ -53,15 +56,12 @@ export default function PasswordResetConfirmContent() {
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <h2 className="text-3xl font-bold tracking-tight">
-            Invalid Reset Link
-          </h2>
+          <h2 className="text-3xl font-bold tracking-tight">Invalid Reset Link</h2>
         </div>
 
         <Alert variant="destructive">
           <p className="text-sm">
-            This password reset link is invalid or has expired. Please request a new
-            password reset.
+            This password reset link is invalid or has expired. Please request a new password reset.
           </p>
         </Alert>
 
diff --git a/frontend/src/app/(auth)/password-reset/confirm/page.tsx b/frontend/src/app/(auth)/password-reset/confirm/page.tsx
index fe3c223..a94bdc8 100644
--- a/frontend/src/app/(auth)/password-reset/confirm/page.tsx
+++ b/frontend/src/app/(auth)/password-reset/confirm/page.tsx
@@ -8,16 +8,16 @@ import PasswordResetConfirmContent from './PasswordResetConfirmContent';
 
 export default function PasswordResetConfirmPage() {
   return (
-    <Suspense fallback={
-      <div className="space-y-6">
-        <div className="text-center">
-          <h2 className="text-3xl font-bold tracking-tight">Set new password</h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Loading...
-          </p>
+    <Suspense
+      fallback={
+        <div className="space-y-6">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight">Set new password</h2>
+            <p className="mt-2 text-sm text-muted-foreground">Loading...</p>
+          </div>
         </div>
-      </div>
-    }>
+      }
+    >
       <PasswordResetConfirmContent />
     </Suspense>
   );
diff --git a/frontend/src/app/(auth)/password-reset/page.tsx b/frontend/src/app/(auth)/password-reset/page.tsx
index 235a34f..c598e65 100644
--- a/frontend/src/app/(auth)/password-reset/page.tsx
+++ b/frontend/src/app/(auth)/password-reset/page.tsx
@@ -8,9 +8,10 @@ import dynamic from 'next/dynamic';
 // Code-split PasswordResetRequestForm
 const PasswordResetRequestForm = dynamic(
   /* istanbul ignore next - Next.js dynamic import, tested via component */
-  () => import('@/components/auth/PasswordResetRequestForm').then((mod) => ({
-    default: mod.PasswordResetRequestForm
-  })),
+  () =>
+    import('@/components/auth/PasswordResetRequestForm').then((mod) => ({
+      default: mod.PasswordResetRequestForm,
+    })),
   {
     loading: () => (
       <div className="space-y-4">
@@ -25,9 +26,7 @@ export default function PasswordResetPage() {
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="text-3xl font-bold tracking-tight">
-          Reset your password
-        </h2>
+        <h2 className="text-3xl font-bold tracking-tight">Reset your password</h2>
         <p className="mt-2 text-muted-foreground">
           We&apos;ll send you an email with instructions to reset your password
         </p>
diff --git a/frontend/src/app/(auth)/register/page.tsx b/frontend/src/app/(auth)/register/page.tsx
index b33998f..bca406f 100644
--- a/frontend/src/app/(auth)/register/page.tsx
+++ b/frontend/src/app/(auth)/register/page.tsx
@@ -19,9 +19,7 @@ export default function RegisterPage() {
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="text-3xl font-bold tracking-tight">
-          Create your account
-        </h2>
+        <h2 className="text-3xl font-bold tracking-tight">Create your account</h2>
         <p className="mt-2 text-sm text-muted-foreground">
           Get started with your free account today
         </p>
diff --git a/frontend/src/app/(authenticated)/layout.tsx b/frontend/src/app/(authenticated)/layout.tsx
index 31b8daf..fe78b8f 100644
--- a/frontend/src/app/(authenticated)/layout.tsx
+++ b/frontend/src/app/(authenticated)/layout.tsx
@@ -15,18 +15,12 @@ export const metadata: Metadata = {
   },
 };
 
-export default function AuthenticatedLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthGuard>
       <div className="flex min-h-screen flex-col">
         <Header />
-        <main className="flex-1">
-          {children}
-        </main>
+        <main className="flex-1">{children}</main>
         <Footer />
       </div>
     </AuthGuard>
diff --git a/frontend/src/app/(authenticated)/settings/layout.tsx b/frontend/src/app/(authenticated)/settings/layout.tsx
index 7c6cb6f..dfe65d2 100644
--- a/frontend/src/app/(authenticated)/settings/layout.tsx
+++ b/frontend/src/app/(authenticated)/settings/layout.tsx
@@ -40,11 +40,7 @@ const settingsTabs = [
   },
 ];
 
-export default function SettingsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
 
   // Determine active tab based on pathname
@@ -54,12 +50,8 @@ export default function SettingsLayout({
     <div className="container mx-auto px-4 py-8">
       {/* Page Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">
-          Settings
-        </h1>
-        <p className="mt-2 text-muted-foreground">
-          Manage your account settings and preferences
-        </p>
+        <h1 className="text-3xl font-bold text-foreground">Settings</h1>
+        <p className="mt-2 text-muted-foreground">Manage your account settings and preferences</p>
       </div>
 
       {/* Tabs Navigation */}
@@ -79,9 +71,7 @@ export default function SettingsLayout({
         </TabsList>
 
         {/* Tab Content */}
-        <div className="rounded-lg border bg-card text-card-foreground p-6">
-          {children}
-        </div>
+        <div className="rounded-lg border bg-card text-card-foreground p-6">{children}</div>
       </Tabs>
     </div>
   );
diff --git a/frontend/src/app/(authenticated)/settings/password/page.tsx b/frontend/src/app/(authenticated)/settings/password/page.tsx
index 590dc1d..039806a 100644
--- a/frontend/src/app/(authenticated)/settings/password/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/password/page.tsx
@@ -11,9 +11,7 @@ export default function PasswordSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold text-foreground">
-          Password Settings
-        </h2>
+        <h2 className="text-2xl font-semibold text-foreground">Password Settings</h2>
         <p className="text-muted-foreground mt-1">
           Change your password to keep your account secure
         </p>
diff --git a/frontend/src/app/(authenticated)/settings/preferences/page.tsx b/frontend/src/app/(authenticated)/settings/preferences/page.tsx
index 937081b..ee45877 100644
--- a/frontend/src/app/(authenticated)/settings/preferences/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/preferences/page.tsx
@@ -4,7 +4,7 @@
  */
 
 /* istanbul ignore next - Next.js type import for metadata */
-import type { Metadata} from 'next';
+import type { Metadata } from 'next';
 
 /* istanbul ignore next - Next.js metadata, not executable code */
 export const metadata: Metadata = {
@@ -14,12 +14,8 @@ export const metadata: Metadata = {
 export default function PreferencesPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-foreground mb-4">
-        Preferences
-      </h2>
-      <p className="text-muted-foreground">
-        Configure your preferences (Coming in Task 3.5)
-      </p>
+      <h2 className="text-2xl font-semibold text-foreground mb-4">Preferences</h2>
+      <p className="text-muted-foreground">Configure your preferences (Coming in Task 3.5)</p>
     </div>
   );
 }
diff --git a/frontend/src/app/(authenticated)/settings/profile/page.tsx b/frontend/src/app/(authenticated)/settings/profile/page.tsx
index e068814..8276bb7 100644
--- a/frontend/src/app/(authenticated)/settings/profile/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/profile/page.tsx
@@ -11,12 +11,8 @@ export default function ProfileSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold text-foreground">
-          Profile Settings
-        </h2>
-        <p className="text-muted-foreground mt-1">
-          Manage your profile information
-        </p>
+        <h2 className="text-2xl font-semibold text-foreground">Profile Settings</h2>
+        <p className="text-muted-foreground mt-1">Manage your profile information</p>
       </div>
 
       <ProfileSettingsForm />
diff --git a/frontend/src/app/(authenticated)/settings/sessions/page.tsx b/frontend/src/app/(authenticated)/settings/sessions/page.tsx
index 19e0197..77b5afa 100644
--- a/frontend/src/app/(authenticated)/settings/sessions/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/sessions/page.tsx
@@ -11,9 +11,7 @@ export default function SessionsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold text-foreground">
-          Active Sessions
-        </h2>
+        <h2 className="text-2xl font-semibold text-foreground">Active Sessions</h2>
         <p className="text-muted-foreground mt-1">
           View and manage devices signed in to your account
         </p>
diff --git a/frontend/src/app/admin/layout.tsx b/frontend/src/app/admin/layout.tsx
index 391a548..8b7da82 100644
--- a/frontend/src/app/admin/layout.tsx
+++ b/frontend/src/app/admin/layout.tsx
@@ -17,11 +17,7 @@ export const metadata: Metadata = {
   },
 };
 
-export default function AdminLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthGuard requireAdmin>
       <a
diff --git a/frontend/src/app/admin/page.tsx b/frontend/src/app/admin/page.tsx
index c6bc72f..63aafec 100644
--- a/frontend/src/app/admin/page.tsx
+++ b/frontend/src/app/admin/page.tsx
@@ -27,9 +27,7 @@ export default function AdminPage() {
       <div className="space-y-8">
         {/* Page Header */}
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">
-            Admin Dashboard
-          </h1>
+          <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
           <p className="mt-2 text-muted-foreground">
             Manage users, organizations, and system settings
           </p>
@@ -72,9 +70,7 @@ export default function AdminPage() {
                   <Settings className="h-5 w-5 text-primary" aria-hidden="true" />
                   <h3 className="font-semibold">System Settings</h3>
                 </div>
-                <p className="text-sm text-muted-foreground">
-                  Configure system-wide settings
-                </p>
+                <p className="text-sm text-muted-foreground">Configure system-wide settings</p>
               </div>
             </Link>
           </div>
diff --git a/frontend/src/app/admin/settings/page.tsx b/frontend/src/app/admin/settings/page.tsx
index d20f1ab..5aa3a32 100644
--- a/frontend/src/app/admin/settings/page.tsx
+++ b/frontend/src/app/admin/settings/page.tsx
@@ -27,9 +27,7 @@ export default function AdminSettingsPage() {
             </Button>
           </Link>
           <div>
-            <h1 className="text-3xl font-bold tracking-tight">
-              System Settings
-            </h1>
+            <h1 className="text-3xl font-bold tracking-tight">System Settings</h1>
             <p className="mt-2 text-muted-foreground">
               Configure system-wide settings and preferences
             </p>
@@ -38,16 +36,12 @@ export default function AdminSettingsPage() {
 
         {/* Placeholder Content */}
         <div className="rounded-lg border bg-card p-12 text-center">
-          <h3 className="text-xl font-semibold mb-2">
-            System Settings Coming Soon
-          </h3>
+          <h3 className="text-xl font-semibold mb-2">System Settings Coming Soon</h3>
           <p className="text-muted-foreground max-w-md mx-auto">
-            This page will allow you to configure system-wide settings,
-            preferences, and advanced options.
-          </p>
-          <p className="text-sm text-muted-foreground mt-4">
-            Features will include:
+            This page will allow you to configure system-wide settings, preferences, and advanced
+            options.
           </p>
+          <p className="text-sm text-muted-foreground mt-4">Features will include:</p>
           <ul className="text-sm text-muted-foreground mt-2 max-w-sm mx-auto text-left">
             <li>• General system configuration</li>
             <li>• Email and notification settings</li>
diff --git a/frontend/src/app/admin/users/page.tsx b/frontend/src/app/admin/users/page.tsx
index 497c67f..aed5f45 100644
--- a/frontend/src/app/admin/users/page.tsx
+++ b/frontend/src/app/admin/users/page.tsx
@@ -28,12 +28,8 @@ export default function AdminUsersPage() {
             </Button>
           </Link>
           <div>
-            <h1 className="text-3xl font-bold tracking-tight">
-              User Management
-            </h1>
-            <p className="mt-2 text-muted-foreground">
-              View, create, and manage user accounts
-            </p>
+            <h1 className="text-3xl font-bold tracking-tight">User Management</h1>
+            <p className="mt-2 text-muted-foreground">View, create, and manage user accounts</p>
           </div>
         </div>
 
diff --git a/frontend/src/app/dev/components/page.tsx b/frontend/src/app/dev/components/page.tsx
index 37e9baa..a9554a0 100644
--- a/frontend/src/app/dev/components/page.tsx
+++ b/frontend/src/app/dev/components/page.tsx
@@ -11,7 +11,9 @@ import dynamic from 'next/dynamic';
 const ComponentShowcase = dynamic(
   () => import('@/components/dev/ComponentShowcase').then((mod) => mod.ComponentShowcase),
   {
-    loading: () => <div className="p-8 text-center text-muted-foreground">Loading components...</div>,
+    loading: () => (
+      <div className="p-8 text-center text-muted-foreground">Loading components...</div>
+    ),
   }
 );
 
diff --git a/frontend/src/app/dev/docs/design-system/[...slug]/page.tsx b/frontend/src/app/dev/docs/design-system/[...slug]/page.tsx
index 1df4dba..14c468e 100644
--- a/frontend/src/app/dev/docs/design-system/[...slug]/page.tsx
+++ b/frontend/src/app/dev/docs/design-system/[...slug]/page.tsx
@@ -21,9 +21,9 @@ export async function generateStaticParams() {
 
   try {
     const files = await fs.readdir(docsDir);
-    const mdFiles = files.filter(file => file.endsWith('.md'));
+    const mdFiles = files.filter((file) => file.endsWith('.md'));
 
-    return mdFiles.map(file => ({
+    return mdFiles.map((file) => ({
       slug: [file.replace(/\.md$/, '')],
     }));
   } catch {
@@ -63,12 +63,7 @@ export default async function DocPage({ params }: DocPageProps) {
   return (
     <div className="bg-background">
       {/* Breadcrumbs */}
-      <DevBreadcrumbs
-        items={[
-          { label: 'Documentation', href: '/dev/docs' },
-          { label: title }
-        ]}
-      />
+      <DevBreadcrumbs items={[{ label: 'Documentation', href: '/dev/docs' }, { label: title }]} />
 
       <div className="container mx-auto px-4 py-12">
         <div className="mx-auto max-w-4xl">
diff --git a/frontend/src/app/dev/docs/page.tsx b/frontend/src/app/dev/docs/page.tsx
index 9e278e5..f783121 100644
--- a/frontend/src/app/dev/docs/page.tsx
+++ b/frontend/src/app/dev/docs/page.tsx
@@ -5,7 +5,17 @@
  */
 
 import Link from 'next/link';
-import { BookOpen, Sparkles, Layout, Palette, Code2, FileCode, Accessibility, Lightbulb, Search } from 'lucide-react';
+import {
+  BookOpen,
+  Sparkles,
+  Layout,
+  Palette,
+  Code2,
+  FileCode,
+  Accessibility,
+  Lightbulb,
+  Search,
+} from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -106,9 +116,7 @@ export default function DocsHub() {
       <section className="border-b bg-gradient-to-b from-background to-muted/20 py-12">
         <div className="container mx-auto px-4">
           <div className="mx-auto max-w-3xl text-center">
-            <h2 className="text-4xl font-bold tracking-tight mb-4">
-              Design System Documentation
-            </h2>
+            <h2 className="text-4xl font-bold tracking-tight mb-4">Design System Documentation</h2>
             <p className="text-lg text-muted-foreground mb-8">
               Comprehensive guides, best practices, and references for building consistent,
               accessible, and maintainable user interfaces with the FastNext design system.
@@ -170,9 +178,7 @@ export default function DocsHub() {
                       </div>
                     </CardHeader>
                     <CardContent>
-                      <CardDescription className="text-base">
-                        {doc.description}
-                      </CardDescription>
+                      <CardDescription className="text-base">{doc.description}</CardDescription>
                     </CardContent>
                   </Card>
                 </Link>
@@ -203,9 +209,7 @@ export default function DocsHub() {
                       </div>
                     </CardHeader>
                     <CardContent>
-                      <CardDescription>
-                        {doc.description}
-                      </CardDescription>
+                      <CardDescription>{doc.description}</CardDescription>
                     </CardContent>
                   </Card>
                 </Link>
@@ -243,9 +247,7 @@ export default function DocsHub() {
                       </div>
                     </CardHeader>
                     <CardContent>
-                      <CardDescription className="text-base">
-                        {doc.description}
-                      </CardDescription>
+                      <CardDescription className="text-base">{doc.description}</CardDescription>
                     </CardContent>
                   </Card>
                 </Link>
@@ -254,7 +256,6 @@ export default function DocsHub() {
           </section>
         </div>
       </main>
-
     </div>
   );
 }
diff --git a/frontend/src/app/dev/forms/page.tsx b/frontend/src/app/dev/forms/page.tsx
index eed2294..869d2a2 100644
--- a/frontend/src/app/dev/forms/page.tsx
+++ b/frontend/src/app/dev/forms/page.tsx
@@ -14,12 +14,7 @@ import { z } from 'zod';
 import { CheckCircle2, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { DevBreadcrumbs } from '@/components/dev/DevBreadcrumbs';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -109,9 +104,8 @@ export default function FormsPage() {
           {/* Introduction */}
           <div className="max-w-3xl space-y-4">
             <p className="text-muted-foreground">
-              Complete form implementations using react-hook-form for state management
-              and Zod for validation. Includes error handling, loading states, and
-              accessibility features.
+              Complete form implementations using react-hook-form for state management and Zod for
+              validation. Includes error handling, loading states, and accessibility features.
             </p>
             <div className="flex flex-wrap gap-2">
               <Badge variant="outline">react-hook-form</Badge>
@@ -170,16 +164,10 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                       placeholder="you@example.com"
                       {...registerLogin('email')}
                       aria-invalid={!!errorsLogin.email}
-                      aria-describedby={
-                        errorsLogin.email ? 'login-email-error' : undefined
-                      }
+                      aria-describedby={errorsLogin.email ? 'login-email-error' : undefined}
                     />
                     {errorsLogin.email && (
-                      <p
-                        id="login-email-error"
-                        className="text-sm text-destructive"
-                        role="alert"
-                      >
+                      <p id="login-email-error" className="text-sm text-destructive" role="alert">
                         {errorsLogin.email.message}
                       </p>
                     )}
@@ -194,9 +182,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                       placeholder="••••••••"
                       {...registerLogin('password')}
                       aria-invalid={!!errorsLogin.password}
-                      aria-describedby={
-                        errorsLogin.password ? 'login-password-error' : undefined
-                      }
+                      aria-describedby={errorsLogin.password ? 'login-password-error' : undefined}
                     />
                     {errorsLogin.password && (
                       <p
@@ -277,10 +263,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
 </form>`}
             >
               <div className="max-w-md mx-auto">
-                <form
-                  onSubmit={handleSubmitContact(onSubmitContact)}
-                  className="space-y-4"
-                >
+                <form onSubmit={handleSubmitContact(onSubmitContact)} className="space-y-4">
                   {/* Name */}
                   <div className="space-y-2">
                     <Label htmlFor="contact-name">Name</Label>
@@ -317,9 +300,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                   {/* Category */}
                   <div className="space-y-2">
                     <Label htmlFor="contact-category">Category</Label>
-                    <Select
-                      onValueChange={(value) => setValueContact('category', value)}
-                    >
+                    <Select onValueChange={(value) => setValueContact('category', value)}>
                       <SelectTrigger id="contact-category">
                         <SelectValue placeholder="Select a category" />
                       </SelectTrigger>
@@ -364,9 +345,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                     <Alert className="border-green-500 text-green-600 dark:border-green-400 dark:text-green-400">
                       <CheckCircle2 className="h-4 w-4" />
                       <AlertTitle>Success!</AlertTitle>
-                      <AlertDescription>
-                        Your message has been sent successfully.
-                      </AlertDescription>
+                      <AlertDescription>Your message has been sent successfully.</AlertDescription>
                     </Alert>
                   )}
                 </form>
@@ -384,7 +363,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
               title="Error State Best Practices"
               description="Use aria-invalid and aria-describedby for accessibility"
               before={{
-                caption: "No ARIA attributes, poor accessibility",
+                caption: 'No ARIA attributes, poor accessibility',
                 content: (
                   <div className="space-y-2 rounded-lg border p-4">
                     <div className="text-sm font-medium">Email</div>
@@ -394,7 +373,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                 ),
               }}
               after={{
-                caption: "With ARIA, screen reader accessible",
+                caption: 'With ARIA, screen reader accessible',
                 content: (
                   <div className="space-y-2 rounded-lg border p-4">
                     <div className="text-sm font-medium">Email</div>
@@ -422,15 +401,21 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                 <ul className="space-y-2 text-sm">
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
-                    <span>Add <code className="text-xs">aria-invalid=true</code> to invalid inputs</span>
+                    <span>
+                      Add <code className="text-xs">aria-invalid=true</code> to invalid inputs
+                    </span>
                   </li>
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
-                    <span>Link errors with <code className="text-xs">aria-describedby</code></span>
+                    <span>
+                      Link errors with <code className="text-xs">aria-describedby</code>
+                    </span>
                   </li>
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
-                    <span>Add <code className="text-xs">role=&quot;alert&quot;</code> to error messages</span>
+                    <span>
+                      Add <code className="text-xs">role=&quot;alert&quot;</code> to error messages
+                    </span>
                   </li>
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
@@ -536,9 +521,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
 
                 <div className="space-y-2">
                   <div className="font-medium text-sm">Optional Field</div>
-                  <code className="block rounded bg-muted p-2 text-xs">
-                    z.string().optional()
-                  </code>
+                  <code className="block rounded bg-muted p-2 text-xs">z.string().optional()</code>
                 </div>
 
                 <div className="space-y-2">
diff --git a/frontend/src/app/dev/layouts/page.tsx b/frontend/src/app/dev/layouts/page.tsx
index 7325727..c697a4f 100644
--- a/frontend/src/app/dev/layouts/page.tsx
+++ b/frontend/src/app/dev/layouts/page.tsx
@@ -9,13 +9,7 @@ import Link from 'next/link';
 import { Grid3x3 } from 'lucide-react';
 import { DevBreadcrumbs } from '@/components/dev/DevBreadcrumbs';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Example, ExampleSection } from '@/components/dev/Example';
 import { BeforeAfter } from '@/components/dev/BeforeAfter';
@@ -37,9 +31,8 @@ export default function LayoutsPage() {
           {/* Introduction */}
           <div className="max-w-3xl space-y-4">
             <p className="text-muted-foreground">
-              These 5 essential layout patterns cover 80% of interface needs. Each
-              pattern includes live examples, before/after comparisons, and copy-paste
-              code.
+              These 5 essential layout patterns cover 80% of interface needs. Each pattern includes
+              live examples, before/after comparisons, and copy-paste code.
             </p>
             <div className="flex flex-wrap gap-2">
               <Badge variant="outline">Grid vs Flex</Badge>
@@ -79,14 +72,12 @@ export default function LayoutsPage() {
                     <Card>
                       <CardHeader>
                         <CardTitle>Content Card</CardTitle>
-                        <CardDescription>
-                          Constrained to max-w-4xl for readability
-                        </CardDescription>
+                        <CardDescription>Constrained to max-w-4xl for readability</CardDescription>
                       </CardHeader>
                       <CardContent>
                         <p className="text-sm text-muted-foreground">
-                          Your main content goes here. The max-w-4xl constraint
-                          ensures comfortable reading width.
+                          Your main content goes here. The max-w-4xl constraint ensures comfortable
+                          reading width.
                         </p>
                       </CardContent>
                     </Card>
@@ -99,25 +90,24 @@ export default function LayoutsPage() {
               title="Common Mistake: No Width Constraint"
               description="Content should not span full viewport width"
               before={{
-                caption: "No max-width, hard to read on wide screens",
+                caption: 'No max-width, hard to read on wide screens',
                 content: (
                   <div className="w-full space-y-4 bg-background p-4 rounded">
                     <h3 className="font-semibold">Full Width Content</h3>
                     <p className="text-sm text-muted-foreground">
-                      This text spans the entire width, making it hard to read on
-                      large screens. Lines become too long.
+                      This text spans the entire width, making it hard to read on large screens.
+                      Lines become too long.
                     </p>
                   </div>
                 ),
               }}
               after={{
-                caption: "Constrained with max-w for better readability",
+                caption: 'Constrained with max-w for better readability',
                 content: (
                   <div className="max-w-2xl mx-auto space-y-4 bg-background p-4 rounded">
                     <h3 className="font-semibold">Constrained Content</h3>
                     <p className="text-sm text-muted-foreground">
-                      This text has a max-width, creating comfortable line lengths
-                      for reading.
+                      This text has a max-width, creating comfortable line lengths for reading.
                     </p>
                   </div>
                 ),
@@ -149,14 +139,10 @@ export default function LayoutsPage() {
                 {[1, 2, 3, 4, 5, 6].map((i) => (
                   <Card key={i}>
                     <CardHeader className="pb-2">
-                      <CardTitle className="text-sm font-medium">
-                        Metric {i}
-                      </CardTitle>
+                      <CardTitle className="text-sm font-medium">Metric {i}</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <div className="text-2xl font-bold">
-                        {(Math.random() * 1000).toFixed(0)}
-                      </div>
+                      <div className="text-2xl font-bold">{(Math.random() * 1000).toFixed(0)}</div>
                       <p className="text-xs text-muted-foreground mt-1">
                         +{(Math.random() * 20).toFixed(1)}% from last month
                       </p>
@@ -170,7 +156,7 @@ export default function LayoutsPage() {
               title="Grid vs Flex for Equal Columns"
               description="Use Grid for equal-width columns, not Flex"
               before={{
-                caption: "flex with flex-1 - uneven wrapping",
+                caption: 'flex with flex-1 - uneven wrapping',
                 content: (
                   <div className="flex flex-wrap gap-4">
                     <div className="flex-1 min-w-[200px] rounded border bg-background p-4">
@@ -186,7 +172,7 @@ export default function LayoutsPage() {
                 ),
               }}
               after={{
-                caption: "grid with grid-cols - consistent sizing",
+                caption: 'grid with grid-cols - consistent sizing',
                 content: (
                   <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                     <div className="rounded border bg-background p-4">
@@ -231,9 +217,7 @@ export default function LayoutsPage() {
                 <Card className="max-w-md mx-auto">
                   <CardHeader>
                     <CardTitle>Login</CardTitle>
-                    <CardDescription>
-                      Enter your credentials to continue
-                    </CardDescription>
+                    <CardDescription>Enter your credentials to continue</CardDescription>
                   </CardHeader>
                   <CardContent>
                     <form className="space-y-4">
@@ -288,10 +272,7 @@ export default function LayoutsPage() {
                     </CardHeader>
                     <CardContent className="space-y-2">
                       {['Dashboard', 'Settings', 'Profile'].map((item) => (
-                        <div
-                          key={item}
-                          className="rounded-md bg-muted px-3 py-2 text-sm"
-                        >
+                        <div key={item} className="rounded-md bg-muted px-3 py-2 text-sm">
                           {item}
                         </div>
                       ))}
@@ -304,14 +285,12 @@ export default function LayoutsPage() {
                   <Card>
                     <CardHeader>
                       <CardTitle>Main Content</CardTitle>
-                      <CardDescription>
-                        Fixed 240px sidebar, fluid main area
-                      </CardDescription>
+                      <CardDescription>Fixed 240px sidebar, fluid main area</CardDescription>
                     </CardHeader>
                     <CardContent>
                       <p className="text-sm text-muted-foreground">
-                        The sidebar remains 240px wide while the main content area
-                        flexes to fill remaining space.
+                        The sidebar remains 240px wide while the main content area flexes to fill
+                        remaining space.
                       </p>
                     </CardContent>
                   </Card>
@@ -344,9 +323,7 @@ export default function LayoutsPage() {
                 <Card className="max-w-sm w-full">
                   <CardHeader>
                     <CardTitle>Centered Card</CardTitle>
-                    <CardDescription>
-                      Centered vertically and horizontally
-                    </CardDescription>
+                    <CardDescription>Centered vertically and horizontally</CardDescription>
                   </CardHeader>
                   <CardContent>
                     <p className="text-sm text-muted-foreground">
@@ -422,9 +399,7 @@ export default function LayoutsPage() {
                   <CardDescription>Most common pattern</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <code className="text-xs">
-                    grid-cols-1 md:grid-cols-2 lg:grid-cols-3
-                  </code>
+                  <code className="text-xs">grid-cols-1 md:grid-cols-2 lg:grid-cols-3</code>
                   <p className="mt-2 text-sm text-muted-foreground">
                     Mobile: 1 column
                     <br />
@@ -441,9 +416,7 @@ export default function LayoutsPage() {
                   <CardDescription>For smaller cards</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <code className="text-xs">
-                    grid-cols-1 md:grid-cols-2 lg:grid-cols-4
-                  </code>
+                  <code className="text-xs">grid-cols-1 md:grid-cols-2 lg:grid-cols-4</code>
                   <p className="mt-2 text-sm text-muted-foreground">
                     Mobile: 1 column
                     <br />
@@ -475,9 +448,7 @@ export default function LayoutsPage() {
                   <CardDescription>Mobile navigation</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <code className="text-xs">
-                    hidden lg:block
-                  </code>
+                  <code className="text-xs">hidden lg:block</code>
                   <p className="mt-2 text-sm text-muted-foreground">
                     Mobile: Hidden (use menu)
                     <br />
diff --git a/frontend/src/app/dev/page.tsx b/frontend/src/app/dev/page.tsx
index 0ce80b3..578a4ed 100644
--- a/frontend/src/app/dev/page.tsx
+++ b/frontend/src/app/dev/page.tsx
@@ -6,23 +6,9 @@
 
 import type { Metadata } from 'next';
 import Link from 'next/link';
-import {
-  Palette,
-  Layout,
-  Ruler,
-  FileText,
-  BookOpen,
-  ArrowRight,
-  Sparkles,
-} from 'lucide-react';
+import { Palette, Layout, Ruler, FileText, BookOpen, ArrowRight, Sparkles } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 
@@ -98,13 +84,11 @@ export default function DesignSystemHub() {
           <div className="space-y-4 max-w-3xl">
             <div className="flex items-center gap-2">
               <Sparkles className="h-8 w-8 text-primary" />
-              <h1 className="text-4xl font-bold tracking-tight">
-                Design System Hub
-              </h1>
+              <h1 className="text-4xl font-bold tracking-tight">Design System Hub</h1>
             </div>
             <p className="text-lg text-muted-foreground">
-              Interactive demonstrations, live examples, and comprehensive documentation for
-              the FastNext design system. Built with shadcn/ui + Tailwind CSS 4.
+              Interactive demonstrations, live examples, and comprehensive documentation for the
+              FastNext design system. Built with shadcn/ui + Tailwind CSS 4.
             </p>
           </div>
         </div>
@@ -116,9 +100,7 @@ export default function DesignSystemHub() {
           {/* Demo Pages Grid */}
           <section className="space-y-6">
             <div>
-              <h2 className="text-2xl font-semibold tracking-tight">
-                Interactive Demonstrations
-              </h2>
+              <h2 className="text-2xl font-semibold tracking-tight">Interactive Demonstrations</h2>
               <p className="text-sm text-muted-foreground mt-2">
                 Explore live examples with copy-paste code snippets
               </p>
@@ -143,9 +125,7 @@ export default function DesignSystemHub() {
                             New
                           </Badge>
                         )}
-                        {page.status === 'enhanced' && (
-                          <Badge variant="secondary">Enhanced</Badge>
-                        )}
+                        {page.status === 'enhanced' && <Badge variant="secondary">Enhanced</Badge>}
                       </div>
                       <CardTitle className="mt-4">{page.title}</CardTitle>
                       <CardDescription>{page.description}</CardDescription>
@@ -190,19 +170,13 @@ export default function DesignSystemHub() {
 
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
               {documentationLinks.map((link) => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className="group"
-                >
+                <Link key={link.href} href={link.href} className="group">
                   <Card className="h-full transition-all hover:border-primary/50 hover:bg-accent/50">
                     <CardHeader className="space-y-1">
                       <CardTitle className="text-base group-hover:text-primary transition-colors">
                         {link.title}
                       </CardTitle>
-                      <CardDescription className="text-xs">
-                        {link.description}
-                      </CardDescription>
+                      <CardDescription className="text-xs">{link.description}</CardDescription>
                     </CardHeader>
                   </Card>
                 </Link>
@@ -214,9 +188,7 @@ export default function DesignSystemHub() {
 
           {/* Key Features */}
           <section className="space-y-6">
-            <h2 className="text-2xl font-semibold tracking-tight">
-              Key Features
-            </h2>
+            <h2 className="text-2xl font-semibold tracking-tight">Key Features</h2>
 
             <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
               <Card>
diff --git a/frontend/src/app/dev/spacing/page.tsx b/frontend/src/app/dev/spacing/page.tsx
index a57d793..af4cc07 100644
--- a/frontend/src/app/dev/spacing/page.tsx
+++ b/frontend/src/app/dev/spacing/page.tsx
@@ -10,13 +10,7 @@ import Link from 'next/link';
 import { Ruler } from 'lucide-react';
 import { DevBreadcrumbs } from '@/components/dev/DevBreadcrumbs';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 
 // Code-split heavy dev components
@@ -52,9 +46,9 @@ export default function SpacingPage() {
           {/* Introduction */}
           <div className="max-w-3xl space-y-4">
             <p className="text-muted-foreground">
-              The Golden Rule: <strong>Parents control spacing, not children.</strong>{' '}
-              Use gap, space-y, and space-x utilities on the parent container. Avoid
-              margins on children except for exceptions.
+              The Golden Rule: <strong>Parents control spacing, not children.</strong> Use gap,
+              space-y, and space-x utilities on the parent container. Avoid margins on children
+              except for exceptions.
             </p>
             <div className="flex flex-wrap gap-2">
               <Badge variant="outline">gap</Badge>
@@ -73,9 +67,7 @@ export default function SpacingPage() {
             <Card>
               <CardHeader>
                 <CardTitle>Common Spacing Values</CardTitle>
-                <CardDescription>
-                  Use consistent spacing values from the scale
-                </CardDescription>
+                <CardDescription>Use consistent spacing values from the scale</CardDescription>
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">
@@ -95,10 +87,7 @@ export default function SpacingPage() {
                       <span className="text-sm text-muted-foreground">{item.rem}</span>
                       <span className="text-sm">{item.use}</span>
                       <div className="col-span-4">
-                        <div
-                          className="h-2 rounded bg-primary"
-                          style={{ width: item.px }}
-                        ></div>
+                        <div className="h-2 rounded bg-primary" style={{ width: item.px }}></div>
                       </div>
                     </div>
                   ))}
@@ -158,10 +147,7 @@ export default function SpacingPage() {
                   <p className="text-sm font-medium mb-2">Grid (gap-6)</p>
                   <div className="grid grid-cols-3 gap-6">
                     {[1, 2, 3].map((i) => (
-                      <div
-                        key={i}
-                        className="rounded-lg border bg-muted p-3 text-center text-sm"
-                      >
+                      <div key={i} className="rounded-lg border bg-muted p-3 text-center text-sm">
                         Card {i}
                       </div>
                     ))}
@@ -207,12 +193,8 @@ export default function SpacingPage() {
                     <div className="rounded-lg border bg-muted p-3 text-sm">
                       First item (no margin)
                     </div>
-                    <div className="rounded-lg border bg-muted p-3 text-sm">
-                      Second item (mt-4)
-                    </div>
-                    <div className="rounded-lg border bg-muted p-3 text-sm">
-                      Third item (mt-4)
-                    </div>
+                    <div className="rounded-lg border bg-muted p-3 text-sm">Second item (mt-4)</div>
+                    <div className="rounded-lg border bg-muted p-3 text-sm">Third item (mt-4)</div>
                   </div>
                 </div>
 
@@ -245,7 +227,7 @@ export default function SpacingPage() {
               title="Don't Let Children Control Spacing"
               description="Parent should control spacing, not children"
               before={{
-                caption: "Children control their own spacing with mt-4",
+                caption: 'Children control their own spacing with mt-4',
                 content: (
                   <div className="space-y-2 rounded-lg border p-4">
                     <div className="rounded bg-muted p-2 text-xs">
@@ -264,14 +246,12 @@ export default function SpacingPage() {
                 ),
               }}
               after={{
-                caption: "Parent controls spacing with space-y-4",
+                caption: 'Parent controls spacing with space-y-4',
                 content: (
                   <div className="space-y-4 rounded-lg border p-4">
                     <div className="rounded bg-muted p-2 text-xs">
                       <div>Child 1</div>
-                      <code className="text-[10px] text-green-600">
-                        parent uses space-y-4
-                      </code>
+                      <code className="text-[10px] text-green-600">parent uses space-y-4</code>
                     </div>
                     <div className="rounded bg-muted p-2 text-xs">
                       <div>Child 2</div>
@@ -290,7 +270,7 @@ export default function SpacingPage() {
               title="Use Gap, Not Margin for Buttons"
               description="Button groups should use gap, not margins"
               before={{
-                caption: "Margin on children - harder to maintain",
+                caption: 'Margin on children - harder to maintain',
                 content: (
                   <div className="flex rounded-lg border p-4">
                     <Button variant="outline" size="sm">
@@ -303,7 +283,7 @@ export default function SpacingPage() {
                 ),
               }}
               after={{
-                caption: "Gap on parent - clean and flexible",
+                caption: 'Gap on parent - clean and flexible',
                 content: (
                   <div className="flex gap-4 rounded-lg border p-4">
                     <Button variant="outline" size="sm">
diff --git a/frontend/src/app/forbidden/page.tsx b/frontend/src/app/forbidden/page.tsx
index d3b5778..32bf022 100644
--- a/frontend/src/app/forbidden/page.tsx
+++ b/frontend/src/app/forbidden/page.tsx
@@ -20,23 +20,18 @@ export default function ForbiddenPage() {
     <div className="container mx-auto px-6 py-16">
       <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
         <div className="mb-8 rounded-full bg-destructive/10 p-6">
-          <ShieldAlert
-            className="h-16 w-16 text-destructive"
-            aria-hidden="true"
-          />
+          <ShieldAlert className="h-16 w-16 text-destructive" aria-hidden="true" />
         </div>
 
-        <h1 className="mb-4 text-4xl font-bold tracking-tight">
-          403 - Access Forbidden
-        </h1>
+        <h1 className="mb-4 text-4xl font-bold tracking-tight">403 - Access Forbidden</h1>
 
         <p className="mb-2 text-lg text-muted-foreground max-w-md">
           You don&apos;t have permission to access this resource.
         </p>
 
         <p className="mb-8 text-sm text-muted-foreground max-w-md">
-          This page requires administrator privileges. If you believe you should
-          have access, please contact your system administrator.
+          This page requires administrator privileges. If you believe you should have access, please
+          contact your system administrator.
         </p>
 
         <div className="flex gap-4">
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 1873dc4..17f63b3 100755
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 /**
  * FastNext Template Design System
@@ -11,38 +11,38 @@
 
 :root {
   /* Colors */
-  --background: oklch(1.0000 0 0);
+  --background: oklch(1 0 0);
   --foreground: oklch(0.3211 0 0);
-  --card: oklch(1.0000 0 0);
+  --card: oklch(1 0 0);
   --card-foreground: oklch(0.3211 0 0);
-  --popover: oklch(1.0000 0 0);
+  --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.3211 0 0);
-  --primary: oklch(0.6231 0.1880 259.8145);
-  --primary-foreground: oklch(1.0000 0 0);
-  --secondary: oklch(0.9670 0.0029 264.5419);
+  --primary: oklch(0.6231 0.188 259.8145);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.967 0.0029 264.5419);
   --secondary-foreground: oklch(0.4461 0.0263 256.8018);
   --muted: oklch(0.9846 0.0017 247.8389);
-  --muted-foreground: oklch(0.5510 0.0234 264.3637);
-  --accent: oklch(0.9514 0.0250 236.8242);
+  --muted-foreground: oklch(0.551 0.0234 264.3637);
+  --accent: oklch(0.9514 0.025 236.8242);
   --accent-foreground: oklch(0.3791 0.1378 265.5222);
   --destructive: oklch(0.6368 0.2078 25.3313);
-  --destructive-foreground: oklch(1.0000 0 0);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.9276 0.0058 264.5313);
   --input: oklch(0.9276 0.0058 264.5313);
-  --ring: oklch(0.6231 0.1880 259.8145);
-  --chart-1: oklch(0.6231 0.1880 259.8145);
+  --ring: oklch(0.6231 0.188 259.8145);
+  --chart-1: oklch(0.6231 0.188 259.8145);
   --chart-2: oklch(0.5461 0.2152 262.8809);
   --chart-3: oklch(0.4882 0.2172 264.3763);
   --chart-4: oklch(0.4244 0.1809 265.6377);
   --chart-5: oklch(0.3791 0.1378 265.5222);
   --sidebar: oklch(0.9846 0.0017 247.8389);
   --sidebar-foreground: oklch(0.3211 0 0);
-  --sidebar-primary: oklch(0.6231 0.1880 259.8145);
-  --sidebar-primary-foreground: oklch(1.0000 0 0);
-  --sidebar-accent: oklch(0.9514 0.0250 236.8242);
+  --sidebar-primary: oklch(0.6231 0.188 259.8145);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9514 0.025 236.8242);
   --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
   --sidebar-border: oklch(0.9276 0.0058 264.5313);
-  --sidebar-ring: oklch(0.6231 0.1880 259.8145);
+  --sidebar-ring: oklch(0.6231 0.188 259.8145);
 
   /* Typography - Use Geist fonts from Next.js */
   --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
@@ -61,11 +61,11 @@
   --shadow-color: oklch(0 0 0);
   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
 
   /* Spacing */
@@ -81,8 +81,8 @@
   --card-foreground: oklch(0.9219 0 0);
   --popover: oklch(0.2686 0 0);
   --popover-foreground: oklch(0.9219 0 0);
-  --primary: oklch(0.6231 0.1880 259.8145);
-  --primary-foreground: oklch(1.0000 0 0);
+  --primary: oklch(0.6231 0.188 259.8145);
+  --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.2686 0 0);
   --secondary-foreground: oklch(0.9219 0 0);
   --muted: oklch(0.2393 0 0);
@@ -90,23 +90,23 @@
   --accent: oklch(0.3791 0.1378 265.5222);
   --accent-foreground: oklch(0.8823 0.0571 254.1284);
   --destructive: oklch(0.6368 0.2078 25.3313);
-  --destructive-foreground: oklch(1.0000 0 0);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.3715 0 0);
   --input: oklch(0.3715 0 0);
-  --ring: oklch(0.6231 0.1880 259.8145);
-  --chart-1: oklch(0.7137 0.1434 254.6240);
-  --chart-2: oklch(0.6231 0.1880 259.8145);
+  --ring: oklch(0.6231 0.188 259.8145);
+  --chart-1: oklch(0.7137 0.1434 254.624);
+  --chart-2: oklch(0.6231 0.188 259.8145);
   --chart-3: oklch(0.5461 0.2152 262.8809);
   --chart-4: oklch(0.4882 0.2172 264.3763);
   --chart-5: oklch(0.4244 0.1809 265.6377);
   --sidebar: oklch(0.2046 0 0);
   --sidebar-foreground: oklch(0.9219 0 0);
-  --sidebar-primary: oklch(0.6231 0.1880 259.8145);
-  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-primary: oklch(0.6231 0.188 259.8145);
+  --sidebar-primary-foreground: oklch(1 0 0);
   --sidebar-accent: oklch(0.3791 0.1378 265.5222);
   --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
   --sidebar-border: oklch(0.3715 0 0);
-  --sidebar-ring: oklch(0.6231 0.1880 259.8145);
+  --sidebar-ring: oklch(0.6231 0.188 259.8145);
 }
 
 /* Make CSS variables available to Tailwind utilities */
@@ -186,24 +186,24 @@ html.dark {
 
 /* Cursor pointer for all clickable elements */
 button,
-[role="button"],
-[type="button"],
-[type="submit"],
-[type="reset"],
+[role='button'],
+[type='button'],
+[type='submit'],
+[type='reset'],
 a,
 label[for],
 select,
-[tabindex]:not([tabindex="-1"]) {
+[tabindex]:not([tabindex='-1']) {
   cursor: pointer;
 }
 
 /* Exception: disabled elements should not have pointer cursor */
 button:disabled,
-[role="button"][aria-disabled="true"],
-[type="button"]:disabled,
-[type="submit"]:disabled,
-[type="reset"]:disabled,
-a[aria-disabled="true"],
+[role='button'][aria-disabled='true'],
+[type='button']:disabled,
+[type='submit']:disabled,
+[type='reset']:disabled,
+a[aria-disabled='true'],
 select:disabled {
   cursor: not-allowed;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 57dbd68..4d975a6 100755
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,27 +1,27 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { Providers } from "./providers";
-import { AuthProvider } from "@/lib/auth/AuthContext";
-import { AuthInitializer } from "@/components/auth";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { Providers } from './providers';
+import { AuthProvider } from '@/lib/auth/AuthContext';
+import { AuthInitializer } from '@/components/auth';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-  display: "swap", // Prevent font from blocking render
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+  display: 'swap', // Prevent font from blocking render
   preload: true,
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-  display: "swap", // Prevent font from blocking render
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+  display: 'swap', // Prevent font from blocking render
   preload: false, // Only preload primary font
 });
 
 export const metadata: Metadata = {
-  title: "FastNext Template",
-  description: "FastAPI + Next.js Template",
+  title: 'FastNext Template',
+  description: 'FastAPI + Next.js Template',
 };
 
 export default function RootLayout({
@@ -57,9 +57,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <AuthProvider>
           <AuthInitializer />
           <Providers>{children}</Providers>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d28d496..a493f50 100755
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -99,10 +99,7 @@ export default function Home() {
       </footer>
 
       {/* Shared Demo Credentials Modal */}
-      <DemoCredentialsModal
-        open={demoModalOpen}
-        onClose={() => setDemoModalOpen(false)}
-      />
+      <DemoCredentialsModal open={demoModalOpen} onClose={() => setDemoModalOpen(false)} />
     </div>
   );
 }
diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
index 15314f8..2330fe0 100644
--- a/frontend/src/app/providers.tsx
+++ b/frontend/src/app/providers.tsx
@@ -8,8 +8,7 @@ import { ThemeProvider } from '@/components/theme';
 // Set NEXT_PUBLIC_ENABLE_DEVTOOLS=true in .env.local to enable
 /* istanbul ignore next - Dev-only devtools, not tested in production */
 const ReactQueryDevtools =
-  process.env.NODE_ENV === 'development' &&
-  process.env.NEXT_PUBLIC_ENABLE_DEVTOOLS === 'true'
+  process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_ENABLE_DEVTOOLS === 'true'
     ? lazy(() =>
         import('@tanstack/react-query-devtools').then((mod) => ({
           default: mod.ReactQueryDevtools,
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index 9108463..7a952d7 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -64,9 +64,7 @@ export function AdminSidebar() {
       <div className="flex h-full flex-col">
         {/* Sidebar Header */}
         <div className="flex h-16 items-center justify-between border-b px-4">
-          {!collapsed && (
-            <h2 className="text-lg font-semibold">Admin Panel</h2>
-          )}
+          {!collapsed && <h2 className="text-lg font-semibold">Admin Panel</h2>}
           <button
             onClick={() => setCollapsed(!collapsed)}
             className="rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -85,8 +83,7 @@ export function AdminSidebar() {
         <nav className="flex-1 space-y-1 p-2">
           {navItems.map((item) => {
             const isActive =
-              pathname === item.href ||
-              (item.href !== '/admin' && pathname.startsWith(item.href));
+              pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href));
             const Icon = item.icon;
 
             return (
@@ -97,9 +94,7 @@ export function AdminSidebar() {
                   'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                   'hover:bg-accent hover:text-accent-foreground',
                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                  isActive
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground',
+                  isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground',
                   collapsed && 'justify-center'
                 )}
                 title={collapsed ? item.name : undefined}
@@ -123,9 +118,7 @@ export function AdminSidebar() {
                 <p className="text-sm font-medium truncate">
                   {user.first_name} {user.last_name}
                 </p>
-                <p className="text-xs text-muted-foreground truncate">
-                  {user.email}
-                </p>
+                <p className="text-xs text-muted-foreground truncate">{user.email}</p>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/admin/Breadcrumbs.tsx b/frontend/src/components/admin/Breadcrumbs.tsx
index 46e91bc..73f1c24 100644
--- a/frontend/src/components/admin/Breadcrumbs.tsx
+++ b/frontend/src/components/admin/Breadcrumbs.tsx
@@ -61,10 +61,7 @@ export function Breadcrumbs() {
           return (
             <li key={breadcrumb.href} className="flex items-center">
               {index > 0 && (
-                <ChevronRight
-                  className="mx-2 h-4 w-4 text-muted-foreground"
-                  aria-hidden="true"
-                />
+                <ChevronRight className="mx-2 h-4 w-4 text-muted-foreground" aria-hidden="true" />
               )}
               {isLast ? (
                 <span
diff --git a/frontend/src/components/admin/DashboardStats.tsx b/frontend/src/components/admin/DashboardStats.tsx
index 4b39130..8c6fe51 100644
--- a/frontend/src/components/admin/DashboardStats.tsx
+++ b/frontend/src/components/admin/DashboardStats.tsx
@@ -26,10 +26,7 @@ export function DashboardStats() {
   }
 
   return (
-    <div
-      className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
-      data-testid="dashboard-stats"
-    >
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4" data-testid="dashboard-stats">
       <StatCard
         title="Total Users"
         value={stats?.totalUsers ?? 0}
diff --git a/frontend/src/components/admin/StatCard.tsx b/frontend/src/components/admin/StatCard.tsx
index 73eaf84..92df447 100644
--- a/frontend/src/components/admin/StatCard.tsx
+++ b/frontend/src/components/admin/StatCard.tsx
@@ -40,29 +40,20 @@ export function StatCard({
     >
       <div className="flex items-center justify-between">
         <div className="space-y-1 flex-1">
-          <p
-            className="text-sm font-medium text-muted-foreground"
-            data-testid="stat-title"
-          >
+          <p className="text-sm font-medium text-muted-foreground" data-testid="stat-title">
             {title}
           </p>
           <div className="flex items-baseline gap-2">
             {loading ? (
               <div className="h-8 w-24 bg-muted rounded" />
             ) : (
-              <p
-                className="text-3xl font-bold tracking-tight"
-                data-testid="stat-value"
-              >
+              <p className="text-3xl font-bold tracking-tight" data-testid="stat-value">
                 {value}
               </p>
             )}
           </div>
           {description && !loading && (
-            <p
-              className="text-xs text-muted-foreground"
-              data-testid="stat-description"
-            >
+            <p className="text-xs text-muted-foreground" data-testid="stat-description">
               {description}
             </p>
           )}
@@ -74,22 +65,13 @@ export function StatCard({
               )}
               data-testid="stat-trend"
             >
-              {trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}%{' '}
-              {trend.label}
+              {trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}% {trend.label}
             </div>
           )}
         </div>
-        <div
-          className={cn(
-            'rounded-full p-3',
-            loading ? 'bg-muted' : 'bg-primary/10'
-          )}
-        >
+        <div className={cn('rounded-full p-3', loading ? 'bg-muted' : 'bg-primary/10')}>
           <Icon
-            className={cn(
-              'h-6 w-6',
-              loading ? 'text-muted-foreground' : 'text-primary'
-            )}
+            className={cn('h-6 w-6', loading ? 'text-muted-foreground' : 'text-primary')}
             aria-hidden="true"
           />
         </div>
diff --git a/frontend/src/components/admin/organizations/AddMemberDialog.tsx b/frontend/src/components/admin/organizations/AddMemberDialog.tsx
index 8177f29..fcfcd20 100644
--- a/frontend/src/components/admin/organizations/AddMemberDialog.tsx
+++ b/frontend/src/components/admin/organizations/AddMemberDialog.tsx
@@ -47,11 +47,7 @@ interface AddMemberDialogProps {
   organizationId: string;
 }
 
-export function AddMemberDialog({
-  open,
-  onOpenChange,
-  organizationId,
-}: AddMemberDialogProps) {
+export function AddMemberDialog({ open, onOpenChange, organizationId }: AddMemberDialogProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Fetch all users for the dropdown (simplified - in production, use search/autocomplete)
@@ -69,7 +65,12 @@ export function AddMemberDialog({
     },
   });
 
-  const { handleSubmit, formState: { errors }, setValue, watch } = form;
+  const {
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = form;
   const selectedRole = watch('role');
   const selectedEmail = watch('userEmail');
 
@@ -139,7 +140,12 @@ export function AddMemberDialog({
           {/* Role Select */}
           <div className="space-y-2">
             <Label htmlFor="role">Role *</Label>
-            <Select value={selectedRole} onValueChange={(value) => setValue('role', value as 'owner' | 'admin' | 'member' | 'guest')}>
+            <Select
+              value={selectedRole}
+              onValueChange={(value) =>
+                setValue('role', value as 'owner' | 'admin' | 'member' | 'guest')
+              }
+            >
               <SelectTrigger id="role">
                 <SelectValue placeholder="Select a role" />
               </SelectTrigger>
@@ -150,9 +156,7 @@ export function AddMemberDialog({
                 <SelectItem value="guest">Guest</SelectItem>
               </SelectContent>
             </Select>
-            {errors.role && (
-              <p className="text-sm text-destructive">{errors.role.message}</p>
-            )}
+            {errors.role && <p className="text-sm text-destructive">{errors.role.message}</p>}
           </div>
 
           {/* Actions */}
diff --git a/frontend/src/components/admin/organizations/MemberActionMenu.tsx b/frontend/src/components/admin/organizations/MemberActionMenu.tsx
index 9cc15bb..fce3740 100644
--- a/frontend/src/components/admin/organizations/MemberActionMenu.tsx
+++ b/frontend/src/components/admin/organizations/MemberActionMenu.tsx
@@ -25,20 +25,14 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
-import {
-  useRemoveOrganizationMember,
-  type OrganizationMember,
-} from '@/lib/api/hooks/useAdmin';
+import { useRemoveOrganizationMember, type OrganizationMember } from '@/lib/api/hooks/useAdmin';
 
 interface MemberActionMenuProps {
   member: OrganizationMember;
   organizationId: string;
 }
 
-export function MemberActionMenu({
-  member,
-  organizationId,
-}: MemberActionMenuProps) {
+export function MemberActionMenu({ member, organizationId }: MemberActionMenuProps) {
   const [confirmRemove, setConfirmRemove] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -59,9 +53,8 @@ export function MemberActionMenu({
     }
   };
 
-  const memberName = [member.first_name, member.last_name]
-    .filter(Boolean)
-    .join(' ') || member.email;
+  const memberName =
+    [member.first_name, member.last_name].filter(Boolean).join(' ') || member.email;
 
   return (
     <>
@@ -93,8 +86,8 @@ export function MemberActionMenu({
           <AlertDialogHeader>
             <AlertDialogTitle>Remove Member</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to remove {memberName} from this organization?
-              This action cannot be undone.
+              Are you sure you want to remove {memberName} from this organization? This action
+              cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
diff --git a/frontend/src/components/admin/organizations/OrganizationActionMenu.tsx b/frontend/src/components/admin/organizations/OrganizationActionMenu.tsx
index 255fa5c..9d2aeac 100644
--- a/frontend/src/components/admin/organizations/OrganizationActionMenu.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationActionMenu.tsx
@@ -26,10 +26,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
-import {
-  useDeleteOrganization,
-  type Organization,
-} from '@/lib/api/hooks/useAdmin';
+import { useDeleteOrganization, type Organization } from '@/lib/api/hooks/useAdmin';
 
 interface OrganizationActionMenuProps {
   organization: Organization;
@@ -115,8 +112,8 @@ export function OrganizationActionMenu({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Organization</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete {organization.name}? This action cannot be undone
-              and will remove all associated data.
+              Are you sure you want to delete {organization.name}? This action cannot be undone and
+              will remove all associated data.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
diff --git a/frontend/src/components/admin/organizations/OrganizationFormDialog.tsx b/frontend/src/components/admin/organizations/OrganizationFormDialog.tsx
index 07ef7bc..7b4bdd9 100644
--- a/frontend/src/components/admin/organizations/OrganizationFormDialog.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationFormDialog.tsx
@@ -112,7 +112,10 @@ export function OrganizationFormDialog({
         toast.success(`${data.name} has been updated successfully.`);
       } else {
         // Generate slug from name (simple kebab-case conversion)
-        const slug = data.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+        const slug = data.name
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-|-$/g, '');
 
         await createOrganization.mutateAsync({
           name: data.name,
@@ -125,7 +128,9 @@ export function OrganizationFormDialog({
       form.reset();
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : `Failed to ${isEdit ? 'update' : 'create'} organization`
+        error instanceof Error
+          ? error.message
+          : `Failed to ${isEdit ? 'update' : 'create'} organization`
       );
     }
   };
@@ -137,9 +142,7 @@ export function OrganizationFormDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>
-            {isEdit ? 'Edit Organization' : 'Create Organization'}
-          </DialogTitle>
+          <DialogTitle>{isEdit ? 'Edit Organization' : 'Create Organization'}</DialogTitle>
           <DialogDescription>
             {isEdit
               ? 'Update the organization details below.'
@@ -189,15 +192,10 @@ export function OrganizationFormDialog({
               <Checkbox
                 id="is_active"
                 checked={form.watch('is_active')}
-                onCheckedChange={(checked) =>
-                  form.setValue('is_active', checked === true)
-                }
+                onCheckedChange={(checked) => form.setValue('is_active', checked === true)}
                 disabled={isLoading}
               />
-              <Label
-                htmlFor="is_active"
-                className="text-sm font-normal cursor-pointer"
-              >
+              <Label htmlFor="is_active" className="text-sm font-normal cursor-pointer">
                 Organization is active
               </Label>
             </div>
diff --git a/frontend/src/components/admin/organizations/OrganizationListTable.tsx b/frontend/src/components/admin/organizations/OrganizationListTable.tsx
index f9dbdf3..e667f59 100644
--- a/frontend/src/components/admin/organizations/OrganizationListTable.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationListTable.tsx
@@ -93,9 +93,7 @@ export function OrganizationListTable({
                     <TableCell className="font-medium">{org.name}</TableCell>
                     <TableCell className="max-w-md truncate">
                       {org.description || (
-                        <span className="text-muted-foreground italic">
-                          No description
-                        </span>
+                        <span className="text-muted-foreground italic">No description</span>
                       )}
                     </TableCell>
                     <TableCell className="text-center">
@@ -112,9 +110,7 @@ export function OrganizationListTable({
                         {org.is_active ? 'Active' : 'Inactive'}
                       </Badge>
                     </TableCell>
-                    <TableCell>
-                      {format(new Date(org.created_at), 'MMM d, yyyy')}
-                    </TableCell>
+                    <TableCell>{format(new Date(org.created_at), 'MMM d, yyyy')}</TableCell>
                     <TableCell>
                       <OrganizationActionMenu
                         organization={org}
@@ -135,11 +131,8 @@ export function OrganizationListTable({
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
             Showing {(pagination.page - 1) * pagination.page_size + 1} to{' '}
-            {Math.min(
-              pagination.page * pagination.page_size,
-              pagination.total
-            )}{' '}
-            of {pagination.total} organizations
+            {Math.min(pagination.page * pagination.page_size, pagination.total)} of{' '}
+            {pagination.total} organizations
           </div>
           <div className="flex gap-2">
             <Button
@@ -164,13 +157,9 @@ export function OrganizationListTable({
 
                   return (
                     <div key={page} className="flex items-center">
-                      {showEllipsis && (
-                        <span className="px-2 text-muted-foreground">...</span>
-                      )}
+                      {showEllipsis && <span className="px-2 text-muted-foreground">...</span>}
                       <Button
-                        variant={
-                          page === pagination.page ? 'default' : 'outline'
-                        }
+                        variant={page === pagination.page ? 'default' : 'outline'}
                         size="sm"
                         onClick={() => onPageChange(page)}
                         className="w-9"
diff --git a/frontend/src/components/admin/organizations/OrganizationManagementContent.tsx b/frontend/src/components/admin/organizations/OrganizationManagementContent.tsx
index 61ed7ce..d200f15 100644
--- a/frontend/src/components/admin/organizations/OrganizationManagementContent.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationManagementContent.tsx
@@ -89,9 +89,7 @@ export function OrganizationManagementContent() {
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">All Organizations</h2>
-            <p className="text-muted-foreground">
-              Manage organizations and their members
-            </p>
+            <p className="text-muted-foreground">Manage organizations and their members</p>
           </div>
           <Button onClick={handleCreateOrganization}>
             <Plus className="mr-2 h-4 w-4" />
diff --git a/frontend/src/components/admin/organizations/OrganizationMembersContent.tsx b/frontend/src/components/admin/organizations/OrganizationMembersContent.tsx
index 592cb9b..b3a6665 100644
--- a/frontend/src/components/admin/organizations/OrganizationMembersContent.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationMembersContent.tsx
@@ -85,9 +85,7 @@ export function OrganizationMembersContent({ organizationId }: OrganizationMembe
         {/* Header with Add Member Button */}
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-2xl font-bold tracking-tight">
-              {orgName} Members
-            </h2>
+            <h2 className="text-2xl font-bold tracking-tight">{orgName} Members</h2>
             <p className="text-muted-foreground">
               Manage members and their roles within the organization
             </p>
diff --git a/frontend/src/components/admin/organizations/OrganizationMembersTable.tsx b/frontend/src/components/admin/organizations/OrganizationMembersTable.tsx
index 235339a..04f0381 100644
--- a/frontend/src/components/admin/organizations/OrganizationMembersTable.tsx
+++ b/frontend/src/components/admin/organizations/OrganizationMembersTable.tsx
@@ -119,14 +119,9 @@ export function OrganizationMembersTable({
                         {formatRole(member.role)}
                       </Badge>
                     </TableCell>
+                    <TableCell>{format(new Date(member.joined_at), 'MMM d, yyyy')}</TableCell>
                     <TableCell>
-                      {format(new Date(member.joined_at), 'MMM d, yyyy')}
-                    </TableCell>
-                    <TableCell>
-                      <MemberActionMenu
-                        member={member}
-                        organizationId={organizationId}
-                      />
+                      <MemberActionMenu member={member} organizationId={organizationId} />
                     </TableCell>
                   </TableRow>
                 );
@@ -141,11 +136,8 @@ export function OrganizationMembersTable({
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
             Showing {(pagination.page - 1) * pagination.page_size + 1} to{' '}
-            {Math.min(
-              pagination.page * pagination.page_size,
-              pagination.total
-            )}{' '}
-            of {pagination.total} members
+            {Math.min(pagination.page * pagination.page_size, pagination.total)} of{' '}
+            {pagination.total} members
           </div>
           <div className="flex gap-2">
             <Button
@@ -170,13 +162,9 @@ export function OrganizationMembersTable({
 
                   return (
                     <div key={page} className="flex items-center">
-                      {showEllipsis && (
-                        <span className="px-2 text-muted-foreground">...</span>
-                      )}
+                      {showEllipsis && <span className="px-2 text-muted-foreground">...</span>}
                       <Button
-                        variant={
-                          page === pagination.page ? 'default' : 'outline'
-                        }
+                        variant={page === pagination.page ? 'default' : 'outline'}
                         size="sm"
                         onClick={() => onPageChange(page)}
                         className="w-9"
diff --git a/frontend/src/components/admin/users/BulkActionToolbar.tsx b/frontend/src/components/admin/users/BulkActionToolbar.tsx
index c0b9f18..6b20ec3 100644
--- a/frontend/src/components/admin/users/BulkActionToolbar.tsx
+++ b/frontend/src/components/admin/users/BulkActionToolbar.tsx
@@ -62,9 +62,7 @@ export function BulkActionToolbar({
       onClearSelection();
       setPendingAction(null);
     } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : `Failed to ${pendingAction} users`
-      );
+      toast.error(error instanceof Error ? error.message : `Failed to ${pendingAction} users`);
       setPendingAction(null);
     }
   };
@@ -161,9 +159,7 @@ export function BulkActionToolbar({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{getActionTitle()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {getActionDescription()}
-            </AlertDialogDescription>
+            <AlertDialogDescription>{getActionDescription()}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
diff --git a/frontend/src/components/admin/users/UserActionMenu.tsx b/frontend/src/components/admin/users/UserActionMenu.tsx
index 0159e5e..68e7c66 100644
--- a/frontend/src/components/admin/users/UserActionMenu.tsx
+++ b/frontend/src/components/admin/users/UserActionMenu.tsx
@@ -49,9 +49,7 @@ export function UserActionMenu({ user, isCurrentUser, onEdit }: UserActionMenuPr
   const deactivateUser = useDeactivateUser();
   const deleteUser = useDeleteUser();
 
-  const fullName = user.last_name
-    ? `${user.first_name} ${user.last_name}`
-    : user.first_name;
+  const fullName = user.last_name ? `${user.first_name} ${user.last_name}` : user.first_name;
 
   // Handle activate action
   const handleActivate = async () => {
diff --git a/frontend/src/components/admin/users/UserFormDialog.tsx b/frontend/src/components/admin/users/UserFormDialog.tsx
index e39bc88..d172086 100644
--- a/frontend/src/components/admin/users/UserFormDialog.tsx
+++ b/frontend/src/components/admin/users/UserFormDialog.tsx
@@ -23,21 +23,14 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Alert } from '@/components/ui/alert';
 import { toast } from 'sonner';
-import {
-  useCreateUser,
-  useUpdateUser,
-  type User,
-} from '@/lib/api/hooks/useAdmin';
+import { useCreateUser, useUpdateUser, type User } from '@/lib/api/hooks/useAdmin';
 
 // ============================================================================
 // Validation Schema
 // ============================================================================
 
 const userFormSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Email is required')
-    .email('Please enter a valid email address'),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
   first_name: z
     .string()
     .min(1, 'First name is required')
@@ -66,12 +59,7 @@ interface UserFormDialogProps {
   mode: 'create' | 'edit';
 }
 
-export function UserFormDialog({
-  open,
-  onOpenChange,
-  user,
-  mode,
-}: UserFormDialogProps) {
+export function UserFormDialog({ open, onOpenChange, user, mode }: UserFormDialogProps) {
   const isEdit = mode === 'edit' && user;
   const createUser = useCreateUser();
   const updateUser = useUpdateUser();
@@ -130,7 +118,9 @@ export function UserFormDialog({
           return;
         }
         if (!/[A-Z]/.test(data.password)) {
-          form.setError('password', { message: 'Password must contain at least one uppercase letter' });
+          form.setError('password', {
+            message: 'Password must contain at least one uppercase letter',
+          });
           return;
         }
       }
@@ -147,7 +137,9 @@ export function UserFormDialog({
             return;
           }
           if (!/[A-Z]/.test(data.password)) {
-            form.setError('password', { message: 'Password must contain at least one uppercase letter' });
+            form.setError('password', {
+              message: 'Password must contain at least one uppercase letter',
+            });
             return;
           }
         }
@@ -305,10 +297,7 @@ export function UserFormDialog({
                 onCheckedChange={(checked) => setValue('is_active', checked as boolean)}
                 disabled={isSubmitting}
               />
-              <Label
-                htmlFor="is_active"
-                className="text-sm font-normal cursor-pointer"
-              >
+              <Label htmlFor="is_active" className="text-sm font-normal cursor-pointer">
                 Active (user can log in)
               </Label>
             </div>
@@ -320,10 +309,7 @@ export function UserFormDialog({
                 onCheckedChange={(checked) => setValue('is_superuser', checked as boolean)}
                 disabled={isSubmitting}
               />
-              <Label
-                htmlFor="is_superuser"
-                className="text-sm font-normal cursor-pointer"
-              >
+              <Label htmlFor="is_superuser" className="text-sm font-normal cursor-pointer">
                 Superuser (admin privileges)
               </Label>
             </div>
@@ -335,8 +321,8 @@ export function UserFormDialog({
               {createUser.isError && createUser.error instanceof Error
                 ? createUser.error.message
                 : updateUser.error instanceof Error
-                ? updateUser.error.message
-                : 'An error occurred'}
+                  ? updateUser.error.message
+                  : 'An error occurred'}
             </Alert>
           )}
 
@@ -355,8 +341,8 @@ export function UserFormDialog({
                   ? 'Updating...'
                   : 'Creating...'
                 : isEdit
-                ? 'Update User'
-                : 'Create User'}
+                  ? 'Update User'
+                  : 'Create User'}
             </Button>
           </DialogFooter>
         </form>
diff --git a/frontend/src/components/admin/users/UserListTable.tsx b/frontend/src/components/admin/users/UserListTable.tsx
index 1848324..0101603 100644
--- a/frontend/src/components/admin/users/UserListTable.tsx
+++ b/frontend/src/components/admin/users/UserListTable.tsx
@@ -74,8 +74,7 @@ export function UserListTable({
     [onSearch]
   );
 
-  const allSelected =
-    users.length > 0 && users.every((user) => selectedUsers.includes(user.id));
+  const allSelected = users.length > 0 && users.every((user) => selectedUsers.includes(user.id));
 
   return (
     <div className="space-y-4">
@@ -195,28 +194,18 @@ export function UserListTable({
                     </TableCell>
                     <TableCell>{user.email}</TableCell>
                     <TableCell className="text-center">
-                      <Badge
-                        variant={user.is_active ? 'default' : 'secondary'}
-                      >
+                      <Badge variant={user.is_active ? 'default' : 'secondary'}>
                         {user.is_active ? 'Active' : 'Inactive'}
                       </Badge>
                     </TableCell>
                     <TableCell className="text-center">
                       {user.is_superuser ? (
-                        <Check
-                          className="h-4 w-4 mx-auto text-green-600"
-                          aria-label="Yes"
-                        />
+                        <Check className="h-4 w-4 mx-auto text-green-600" aria-label="Yes" />
                       ) : (
-                        <X
-                          className="h-4 w-4 mx-auto text-muted-foreground"
-                          aria-label="No"
-                        />
+                        <X className="h-4 w-4 mx-auto text-muted-foreground" aria-label="No" />
                       )}
                     </TableCell>
-                    <TableCell>
-                      {format(new Date(user.created_at), 'MMM d, yyyy')}
-                    </TableCell>
+                    <TableCell>{format(new Date(user.created_at), 'MMM d, yyyy')}</TableCell>
                     <TableCell>
                       <UserActionMenu
                         user={user}
@@ -237,11 +226,8 @@ export function UserListTable({
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
             Showing {(pagination.page - 1) * pagination.page_size + 1} to{' '}
-            {Math.min(
-              pagination.page * pagination.page_size,
-              pagination.total
-            )}{' '}
-            of {pagination.total} users
+            {Math.min(pagination.page * pagination.page_size, pagination.total)} of{' '}
+            {pagination.total} users
           </div>
           <div className="flex gap-2">
             <Button
@@ -266,13 +252,9 @@ export function UserListTable({
 
                   return (
                     <div key={page} className="flex items-center">
-                      {showEllipsis && (
-                        <span className="px-2 text-muted-foreground">...</span>
-                      )}
+                      {showEllipsis && <span className="px-2 text-muted-foreground">...</span>}
                       <Button
-                        variant={
-                          page === pagination.page ? 'default' : 'outline'
-                        }
+                        variant={page === pagination.page ? 'default' : 'outline'}
                         size="sm"
                         onClick={() => onPageChange(page)}
                         className="w-9"
diff --git a/frontend/src/components/admin/users/UserManagementContent.tsx b/frontend/src/components/admin/users/UserManagementContent.tsx
index ff16324..8e5a226 100644
--- a/frontend/src/components/admin/users/UserManagementContent.tsx
+++ b/frontend/src/components/admin/users/UserManagementContent.tsx
@@ -28,7 +28,8 @@ export function UserManagementContent() {
 
   // Convert filter strings to booleans for API
   const isActiveFilter = filterActive === 'true' ? true : filterActive === 'false' ? false : null;
-  const isSuperuserFilter = filterSuperuser === 'true' ? true : filterSuperuser === 'false' ? false : null;
+  const isSuperuserFilter =
+    filterSuperuser === 'true' ? true : filterSuperuser === 'false' ? false : null;
 
   // Local state
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
@@ -85,9 +86,7 @@ export function UserManagementContent() {
   // istanbul ignore next - Event handlers fully tested in E2E (admin-users.spec.ts)
   const handleSelectAll = (selected: boolean) => {
     if (selected) {
-      const selectableUsers = users
-        .filter((u) => u.id !== currentUser?.id)
-        .map((u) => u.id);
+      const selectableUsers = users.filter((u) => u.id !== currentUser?.id).map((u) => u.id);
       setSelectedUsers(selectableUsers);
     } else {
       setSelectedUsers([]);
@@ -141,9 +140,7 @@ export function UserManagementContent() {
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">All Users</h2>
-            <p className="text-muted-foreground">
-              Manage user accounts and permissions
-            </p>
+            <p className="text-muted-foreground">Manage user accounts and permissions</p>
           </div>
           <Button onClick={handleCreateUser}>
             <Plus className="mr-2 h-4 w-4" />
diff --git a/frontend/src/components/auth/AuthGuard.tsx b/frontend/src/components/auth/AuthGuard.tsx
index 71a5dd8..8cb08c0 100644
--- a/frontend/src/components/auth/AuthGuard.tsx
+++ b/frontend/src/components/auth/AuthGuard.tsx
@@ -83,9 +83,8 @@ export function AuthGuard({ children, requireAdmin = false, fallback }: AuthGuar
     // If not loading and not authenticated, redirect to login
     if (!isLoading && !isAuthenticated) {
       // Preserve intended destination
-      const returnUrl = pathname !== config.routes.login
-        ? `?returnUrl=${encodeURIComponent(pathname)}`
-        : '';
+      const returnUrl =
+        pathname !== config.routes.login ? `?returnUrl=${encodeURIComponent(pathname)}` : '';
 
       router.push(`${config.routes.login}${returnUrl}`);
     }
diff --git a/frontend/src/components/auth/AuthLayoutClient.tsx b/frontend/src/components/auth/AuthLayoutClient.tsx
index 226f2b3..5be122e 100644
--- a/frontend/src/components/auth/AuthLayoutClient.tsx
+++ b/frontend/src/components/auth/AuthLayoutClient.tsx
@@ -21,9 +21,7 @@ export function AuthLayoutClient({ children }: AuthLayoutClientProps) {
 
       {/* Auth card */}
       <div className="w-full max-w-md">
-        <div className="rounded-lg border bg-card p-8 shadow-sm">
-          {children}
-        </div>
+        <div className="rounded-lg border bg-card p-8 shadow-sm">{children}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index 7bcd8dc..0b5cb63 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -24,10 +24,7 @@ import config from '@/config/app.config';
 // ============================================================================
 
 const loginSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Email is required')
-    .email('Please enter a valid email address'),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
   password: z
     .string()
     .min(1, 'Password is required')
@@ -187,11 +184,7 @@ export function LoginForm({
         </div>
 
         {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
           {isSubmitting ? 'Signing in...' : 'Sign in'}
         </Button>
 
diff --git a/frontend/src/components/auth/PasswordResetConfirmForm.tsx b/frontend/src/components/auth/PasswordResetConfirmForm.tsx
index 2a385d9..034a66a 100644
--- a/frontend/src/components/auth/PasswordResetConfirmForm.tsx
+++ b/frontend/src/components/auth/PasswordResetConfirmForm.tsx
@@ -57,8 +57,7 @@ function calculatePasswordStrength(password: string): {
   const hasNumber = /[0-9]/.test(password);
   const hasUppercase = /[A-Z]/.test(password);
 
-  const strength =
-    (hasMinLength ? 33 : 0) + (hasNumber ? 33 : 0) + (hasUppercase ? 34 : 0);
+  const strength = (hasMinLength ? 33 : 0) + (hasNumber ? 33 : 0) + (hasUppercase ? 34 : 0);
 
   return { hasMinLength, hasNumber, hasUppercase, strength };
 }
@@ -208,9 +207,7 @@ export function PasswordResetConfirmForm({
             {...form.register('new_password')}
             aria-invalid={!!form.formState.errors.new_password}
             aria-describedby={
-              form.formState.errors.new_password
-                ? 'new-password-error'
-                : 'password-requirements'
+              form.formState.errors.new_password ? 'new-password-error' : 'password-requirements'
             }
             aria-required="true"
           />
@@ -261,8 +258,7 @@ export function PasswordResetConfirmForm({
                       : 'text-muted-foreground'
                   }
                 >
-                  {passwordStrength.hasUppercase ? '✓' : '○'} Contains an uppercase
-                  letter
+                  {passwordStrength.hasUppercase ? '✓' : '○'} Contains an uppercase letter
                 </li>
               </ul>
             </div>
@@ -283,9 +279,7 @@ export function PasswordResetConfirmForm({
             {...form.register('confirm_password')}
             aria-invalid={!!form.formState.errors.confirm_password}
             aria-describedby={
-              form.formState.errors.confirm_password
-                ? 'confirm-password-error'
-                : undefined
+              form.formState.errors.confirm_password ? 'confirm-password-error' : undefined
             }
             aria-required="true"
           />
diff --git a/frontend/src/components/auth/PasswordResetRequestForm.tsx b/frontend/src/components/auth/PasswordResetRequestForm.tsx
index 5c76df4..c78a49e 100644
--- a/frontend/src/components/auth/PasswordResetRequestForm.tsx
+++ b/frontend/src/components/auth/PasswordResetRequestForm.tsx
@@ -23,10 +23,7 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
 // ============================================================================
 
 const resetRequestSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Email is required')
-    .email('Please enter a valid email address'),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
 });
 
 type ResetRequestFormData = z.infer<typeof resetRequestSchema>;
@@ -169,11 +166,7 @@ export function PasswordResetRequestForm({
         </div>
 
         {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
           {isSubmitting ? 'Sending...' : 'Send Reset Instructions'}
         </Button>
 
diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
index b8a809c..2da85d9 100644
--- a/frontend/src/components/auth/RegisterForm.tsx
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -25,10 +25,7 @@ import config from '@/config/app.config';
 
 const registerSchema = z
   .object({
-    email: z
-      .string()
-      .min(1, 'Email is required')
-      .email('Please enter a valid email address'),
+    email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
     first_name: z
       .string()
       .min(1, 'First name is required')
@@ -45,9 +42,7 @@ const registerSchema = z
       .min(8, 'Password must be at least 8 characters')
       .regex(/[0-9]/, 'Password must contain at least one number')
       .regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
-    confirmPassword: z
-      .string()
-      .min(1, 'Please confirm your password'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: 'Passwords do not match',
@@ -88,11 +83,7 @@ interface RegisterFormProps {
  * />
  * ```
  */
-export function RegisterForm({
-  onSuccess,
-  showLoginLink = true,
-  className,
-}: RegisterFormProps) {
+export function RegisterForm({ onSuccess, showLoginLink = true, className }: RegisterFormProps) {
   const [serverError, setServerError] = useState<string | null>(null);
   const registerMutation = useRegister();
 
@@ -242,7 +233,11 @@ export function RegisterForm({
             disabled={isSubmitting}
             {...form.register('password')}
             aria-invalid={!!form.formState.errors.password}
-            aria-describedby={form.formState.errors.password ? 'password-error password-requirements' : 'password-requirements'}
+            aria-describedby={
+              form.formState.errors.password
+                ? 'password-error password-requirements'
+                : 'password-requirements'
+            }
           />
           {form.formState.errors.password && (
             <p id="password-error" className="text-sm text-destructive">
@@ -253,13 +248,25 @@ export function RegisterForm({
           {/* Password Strength Indicator */}
           {password.length > 0 && !form.formState.errors.password && (
             <div id="password-requirements" className="space-y-1 text-xs">
-              <p className={hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                 {hasMinLength ? '✓' : '○'} At least 8 characters
               </p>
-              <p className={hasNumber ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasNumber ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                 {hasNumber ? '✓' : '○'} Contains a number
               </p>
-              <p className={hasUppercase ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasUppercase ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                 {hasUppercase ? '✓' : '○'} Contains an uppercase letter
               </p>
             </div>
@@ -279,7 +286,9 @@ export function RegisterForm({
             disabled={isSubmitting}
             {...form.register('confirmPassword')}
             aria-invalid={!!form.formState.errors.confirmPassword}
-            aria-describedby={form.formState.errors.confirmPassword ? 'confirmPassword-error' : undefined}
+            aria-describedby={
+              form.formState.errors.confirmPassword ? 'confirmPassword-error' : undefined
+            }
           />
           {form.formState.errors.confirmPassword && (
             <p id="confirmPassword-error" className="text-sm text-destructive">
@@ -289,11 +298,7 @@ export function RegisterForm({
         </div>
 
         {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
           {isSubmitting ? 'Creating account...' : 'Create account'}
         </Button>
 
diff --git a/frontend/src/components/charts/OrganizationDistributionChart.tsx b/frontend/src/components/charts/OrganizationDistributionChart.tsx
index 9a64b29..f256708 100644
--- a/frontend/src/components/charts/OrganizationDistributionChart.tsx
+++ b/frontend/src/components/charts/OrganizationDistributionChart.tsx
@@ -5,7 +5,16 @@
 
 'use client';
 
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { ChartCard } from './ChartCard';
 import { CHART_PALETTES } from '@/lib/chart-colors';
 
diff --git a/frontend/src/components/charts/SessionActivityChart.tsx b/frontend/src/components/charts/SessionActivityChart.tsx
index 7bcb91c..83810f8 100644
--- a/frontend/src/components/charts/SessionActivityChart.tsx
+++ b/frontend/src/components/charts/SessionActivityChart.tsx
@@ -5,7 +5,16 @@
 
 'use client';
 
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { ChartCard } from './ChartCard';
 import { format, subDays } from 'date-fns';
 import { CHART_PALETTES } from '@/lib/chart-colors';
diff --git a/frontend/src/components/charts/UserGrowthChart.tsx b/frontend/src/components/charts/UserGrowthChart.tsx
index 202f001..508d159 100644
--- a/frontend/src/components/charts/UserGrowthChart.tsx
+++ b/frontend/src/components/charts/UserGrowthChart.tsx
@@ -5,7 +5,16 @@
 
 'use client';
 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
 import { ChartCard } from './ChartCard';
 import { format, subDays } from 'date-fns';
 import { CHART_PALETTES } from '@/lib/chart-colors';
diff --git a/frontend/src/components/dev/BeforeAfter.tsx b/frontend/src/components/dev/BeforeAfter.tsx
index 70e299b..0c144f2 100644
--- a/frontend/src/components/dev/BeforeAfter.tsx
+++ b/frontend/src/components/dev/BeforeAfter.tsx
@@ -61,19 +61,12 @@ export function BeforeAfter({
       {(title || description) && (
         <div className="space-y-2">
           {title && <h3 className="text-xl font-semibold">{title}</h3>}
-          {description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          )}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
         </div>
       )}
 
       {/* Comparison Grid */}
-      <div
-        className={cn(
-          'grid gap-4',
-          vertical ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'
-        )}
-      >
+      <div className={cn('grid gap-4', vertical ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2')}>
         {/* Before (Anti-pattern) */}
         <Card className="border-destructive/50">
           <CardHeader className="space-y-2 pb-4">
@@ -94,9 +87,7 @@ export function BeforeAfter({
             </div>
             {/* Caption */}
             {before.caption && (
-              <p className="text-xs text-muted-foreground italic">
-                {before.caption}
-              </p>
+              <p className="text-xs text-muted-foreground italic">{before.caption}</p>
             )}
           </CardContent>
         </Card>
@@ -124,9 +115,7 @@ export function BeforeAfter({
             </div>
             {/* Caption */}
             {after.caption && (
-              <p className="text-xs text-muted-foreground italic">
-                {after.caption}
-              </p>
+              <p className="text-xs text-muted-foreground italic">{after.caption}</p>
             )}
           </CardContent>
         </Card>
diff --git a/frontend/src/components/dev/CodeSnippet.tsx b/frontend/src/components/dev/CodeSnippet.tsx
index 7869cd7..2103ab6 100644
--- a/frontend/src/components/dev/CodeSnippet.tsx
+++ b/frontend/src/components/dev/CodeSnippet.tsx
@@ -61,12 +61,8 @@ export function CodeSnippet({
       {(title || language) && (
         <div className="flex items-center justify-between rounded-t-lg border border-b-0 bg-muted/50 px-4 py-2">
           <div className="flex items-center gap-2">
-            {title && (
-              <span className="text-sm font-medium text-foreground">{title}</span>
-            )}
-            {language && (
-              <span className="text-xs text-muted-foreground">({language})</span>
-            )}
+            {title && <span className="text-sm font-medium text-foreground">{title}</span>}
+            {language && <span className="text-xs text-muted-foreground">({language})</span>}
           </div>
           <Button
             variant="ghost"
@@ -139,8 +135,7 @@ export function CodeSnippet({
                       key={idx}
                       className={cn(
                         'leading-6',
-                        highlightLines.includes(idx + 1) &&
-                          'bg-accent/20 -mx-4 px-4'
+                        highlightLines.includes(idx + 1) && 'bg-accent/20 -mx-4 px-4'
                       )}
                     >
                       {line || ' '}
diff --git a/frontend/src/components/dev/ComponentShowcase.tsx b/frontend/src/components/dev/ComponentShowcase.tsx
index 8e0acc8..675bfdc 100644
--- a/frontend/src/components/dev/ComponentShowcase.tsx
+++ b/frontend/src/components/dev/ComponentShowcase.tsx
@@ -9,11 +9,7 @@
 'use client';
 
 import { useState } from 'react';
-import {
-  Mail, User,
-  Settings, LogOut, Shield, AlertCircle, Info,
-  Trash2
-} from 'lucide-react';
+import { Mail, User, Settings, LogOut, Shield, AlertCircle, Info, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -281,7 +277,11 @@ export function ComponentShowcase() {
                 </div>
 
                 <div className="flex items-center space-x-2">
-                  <Checkbox id="terms" checked={checked} onCheckedChange={(value) => setChecked(value as boolean)} />
+                  <Checkbox
+                    id="terms"
+                    checked={checked}
+                    onCheckedChange={(value) => setChecked(value as boolean)}
+                  />
                   <Label htmlFor="terms" className="text-sm font-normal cursor-pointer">
                     Accept terms and conditions
                   </Label>
@@ -357,11 +357,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Badges */}
-          <ExampleSection
-            id="badges"
-            title="Badges"
-            description="Status indicators and labels"
-          >
+          <ExampleSection id="badges" title="Badges" description="Status indicators and labels">
             <Example
               title="Badge Variants"
               code={`<Badge>Default</Badge>
@@ -411,11 +407,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Alerts */}
-          <ExampleSection
-            id="alerts"
-            title="Alerts"
-            description="Contextual feedback messages"
-          >
+          <ExampleSection id="alerts" title="Alerts" description="Contextual feedback messages">
             <div className="space-y-4">
               <Example
                 title="Alert Variants"
@@ -439,17 +431,13 @@ export function ComponentShowcase() {
                   <Alert>
                     <Info className="h-4 w-4" />
                     <AlertTitle>Information</AlertTitle>
-                    <AlertDescription>
-                      This is an informational alert message.
-                    </AlertDescription>
+                    <AlertDescription>This is an informational alert message.</AlertDescription>
                   </Alert>
 
                   <Alert variant="destructive">
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>Error</AlertTitle>
-                    <AlertDescription>
-                      Something went wrong. Please try again.
-                    </AlertDescription>
+                    <AlertDescription>Something went wrong. Please try again.</AlertDescription>
                   </Alert>
                 </div>
               </Example>
@@ -545,8 +533,8 @@ export function ComponentShowcase() {
                   <DialogHeader>
                     <DialogTitle>Are you sure?</DialogTitle>
                     <DialogDescription>
-                      This action cannot be undone. This will permanently delete your account
-                      and remove your data from our servers.
+                      This action cannot be undone. This will permanently delete your account and
+                      remove your data from our servers.
                     </DialogDescription>
                   </DialogHeader>
                   <DialogFooter>
@@ -594,9 +582,7 @@ export function ComponentShowcase() {
                   </div>
                 </TabsContent>
                 <TabsContent value="password" className="space-y-4 mt-4">
-                  <p className="text-sm text-muted-foreground">
-                    Change your password here.
-                  </p>
+                  <p className="text-sm text-muted-foreground">Change your password here.</p>
                   <div className="space-y-2">
                     <Label htmlFor="current">Current Password</Label>
                     <Input id="current" type="password" />
@@ -607,11 +593,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Table */}
-          <ExampleSection
-            id="table"
-            title="Table"
-            description="Data tables with headers and cells"
-          >
+          <ExampleSection id="table" title="Table" description="Data tables with headers and cells">
             <Example
               title="Table Example"
               code={`<Table>
diff --git a/frontend/src/components/dev/DevBreadcrumbs.tsx b/frontend/src/components/dev/DevBreadcrumbs.tsx
index 05860bd..4782cca 100644
--- a/frontend/src/components/dev/DevBreadcrumbs.tsx
+++ b/frontend/src/components/dev/DevBreadcrumbs.tsx
@@ -24,10 +24,7 @@ interface DevBreadcrumbsProps {
 
 export function DevBreadcrumbs({ items, className }: DevBreadcrumbsProps) {
   return (
-    <nav
-      className={cn('bg-muted/30 border-b', className)}
-      aria-label="Breadcrumb"
-    >
+    <nav className={cn('bg-muted/30 border-b', className)} aria-label="Breadcrumb">
       <div className="container mx-auto px-4 py-3">
         <ol className="flex items-center gap-2 text-sm">
           {/* Home link */}
diff --git a/frontend/src/components/dev/Example.tsx b/frontend/src/components/dev/Example.tsx
index 45d6482..1b2ce9e 100644
--- a/frontend/src/components/dev/Example.tsx
+++ b/frontend/src/components/dev/Example.tsx
@@ -48,7 +48,6 @@ export function Example({
   centered = false,
   tags,
 }: ExampleProps) {
-
   // Compact variant - no card wrapper
   if (variant === 'compact') {
     return (
@@ -68,9 +67,7 @@ export function Example({
                 </div>
               )}
             </div>
-            {description && (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            )}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
           </div>
         )}
 
@@ -178,9 +175,7 @@ export function ExampleGrid({
     3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   }[cols];
 
-  return (
-    <div className={cn('grid gap-6', colsClass, className)}>{children}</div>
-  );
+  return <div className={cn('grid gap-6', colsClass, className)}>{children}</div>;
 }
 
 /**
@@ -208,9 +203,7 @@ export function ExampleSection({
     <section id={id} className={cn('space-y-6', className)}>
       <div className="space-y-2">
         <h2 className="text-2xl font-semibold tracking-tight">{title}</h2>
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
       </div>
       {children}
     </section>
diff --git a/frontend/src/components/docs/CodeBlock.tsx b/frontend/src/components/docs/CodeBlock.tsx
index 21eb704..402dc8a 100644
--- a/frontend/src/components/docs/CodeBlock.tsx
+++ b/frontend/src/components/docs/CodeBlock.tsx
@@ -74,7 +74,9 @@ function extractTextFromChildren(children: React.ReactNode): string {
   }
 
   if (children && typeof children === 'object' && 'props' in children) {
-    return extractTextFromChildren((children as { props: { children: React.ReactNode } }).props.children);
+    return extractTextFromChildren(
+      (children as { props: { children: React.ReactNode } }).props.children
+    );
   }
 
   return '';
diff --git a/frontend/src/components/docs/MarkdownContent.tsx b/frontend/src/components/docs/MarkdownContent.tsx
index 444d404..6441aeb 100644
--- a/frontend/src/components/docs/MarkdownContent.tsx
+++ b/frontend/src/components/docs/MarkdownContent.tsx
@@ -101,7 +101,10 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
             </ul>
           ),
           ol: ({ children, ...props }) => (
-            <ol className="my-6 ml-6 list-decimal space-y-3 marker:text-primary/60 marker:font-semibold" {...props}>
+            <ol
+              className="my-6 ml-6 list-decimal space-y-3 marker:text-primary/60 marker:font-semibold"
+              {...props}
+            >
               {children}
             </ol>
           ),
@@ -112,7 +115,12 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
           ),
 
           // Code blocks - enhanced with copy button and better styling
-          code: ({ inline, className, children, ...props }: {
+          code: ({
+            inline,
+            className,
+            children,
+            ...props
+          }: {
             inline?: boolean;
             className?: string;
             children?: React.ReactNode;
@@ -128,22 +136,12 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
               );
             }
             return (
-              <code
-                className={cn(
-                  'block font-mono text-sm leading-relaxed',
-                  className
-                )}
-                {...props}
-              >
+              <code className={cn('block font-mono text-sm leading-relaxed', className)} {...props}>
                 {children}
               </code>
             );
           },
-          pre: ({ children, ...props }) => (
-            <CodeBlock {...props}>
-              {children}
-            </CodeBlock>
-          ),
+          pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,
 
           // Blockquotes - enhanced callout styling
           blockquote: ({ children, ...props }) => (
@@ -158,10 +156,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
           // Tables - improved styling with better borders and hover states
           table: ({ children, ...props }) => (
             <div className="my-8 w-full overflow-x-auto rounded-lg border">
-              <table
-                className="w-full border-collapse text-sm"
-                {...props}
-              >
+              <table className="w-full border-collapse text-sm" {...props}>
                 {children}
               </table>
             </div>
@@ -172,7 +167,9 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
             </thead>
           ),
           tbody: ({ children, ...props }) => (
-            <tbody className="divide-y divide-border" {...props}>{children}</tbody>
+            <tbody className="divide-y divide-border" {...props}>
+              {children}
+            </tbody>
           ),
           tr: ({ children, ...props }) => (
             <tr className="transition-colors hover:bg-muted/40" {...props}>
@@ -197,9 +194,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
           ),
 
           // Horizontal rule - more prominent
-          hr: ({ ...props }) => (
-            <hr className="my-12 border-t-2 border-border/50" {...props} />
-          ),
+          hr: ({ ...props }) => <hr className="my-12 border-t-2 border-border/50" {...props} />,
 
           // Images - optimized with Next.js Image component
           img: ({ src, alt }) => {
diff --git a/frontend/src/components/forms/FormField.tsx b/frontend/src/components/forms/FormField.tsx
index 8fc7841..2bda68c 100644
--- a/frontend/src/components/forms/FormField.tsx
+++ b/frontend/src/components/forms/FormField.tsx
@@ -60,7 +60,7 @@ export function FormField({
 }: FormFieldProps) {
   // Extract name from inputProps (from register()) or use explicit name
   // register() adds a name property that may not be in the type
-  const registerName = ('name' in inputProps) ? (inputProps as { name: string }).name : undefined;
+  const registerName = 'name' in inputProps ? (inputProps as { name: string }).name : undefined;
   const name = explicitName || registerName;
 
   if (!name) {
@@ -84,12 +84,7 @@ export function FormField({
           {description}
         </p>
       )}
-      <Input
-        id={name}
-        aria-invalid={!!error}
-        aria-describedby={ariaDescribedBy}
-        {...inputProps}
-      />
+      <Input id={name} aria-invalid={!!error} aria-describedby={ariaDescribedBy} {...inputProps} />
       {error && (
         <p id={errorId} className="text-sm text-destructive" role="alert">
           {error.message}
diff --git a/frontend/src/components/home/AnimatedTerminal.tsx b/frontend/src/components/home/AnimatedTerminal.tsx
index 7c0ae12..f1c62bf 100644
--- a/frontend/src/components/home/AnimatedTerminal.tsx
+++ b/frontend/src/components/home/AnimatedTerminal.tsx
@@ -94,7 +94,10 @@ export function AnimatedTerminal() {
           </div>
 
           {/* Terminal Content */}
-          <div className="bg-slate-950 p-6 font-mono text-sm overflow-x-auto" style={{ minHeight: '400px' }}>
+          <div
+            className="bg-slate-950 p-6 font-mono text-sm overflow-x-auto"
+            style={{ minHeight: '400px' }}
+          >
             <div className="space-y-2">
               {displayedLines.map((line, index) => (
                 <motion.div
@@ -106,15 +109,18 @@ export function AnimatedTerminal() {
                     line.isSuccess
                       ? 'text-green-400'
                       : line.text.startsWith('#')
-                      ? 'text-slate-500'
-                      : line.text.startsWith('$')
-                      ? 'text-blue-400'
-                      : 'text-slate-300'
+                        ? 'text-slate-500'
+                        : line.text.startsWith('$')
+                          ? 'text-blue-400'
+                          : 'text-slate-300'
                   }`}
                 >
                   {line.text || '\u00A0'}
                   {index === displayedLines.length - 1 && isAnimating && !line.isSuccess && (
-                    <span className="inline-block w-2 h-4 ml-1 bg-slate-400 animate-pulse" aria-hidden="true" />
+                    <span
+                      className="inline-block w-2 h-4 ml-1 bg-slate-400 animate-pulse"
+                      aria-hidden="true"
+                    />
                   )}
                 </motion.div>
               ))}
diff --git a/frontend/src/components/home/CTASection.tsx b/frontend/src/components/home/CTASection.tsx
index 8ecd8f9..8c15328 100644
--- a/frontend/src/components/home/CTASection.tsx
+++ b/frontend/src/components/home/CTASection.tsx
@@ -15,7 +15,6 @@ interface CTASectionProps {
 }
 
 export function CTASection({ onOpenDemoModal }: CTASectionProps) {
-
   return (
     <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-background">
       {/* Background Pattern */}
@@ -48,11 +47,7 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
 
           {/* CTAs */}
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
-            <Button
-              asChild
-              size="lg"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template"
                 target="_blank"
@@ -72,22 +67,23 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
               variant="outline"
               className="gap-2 text-base group"
             >
-              <Play className="h-5 w-5 group-hover:scale-110 transition-transform" aria-hidden="true" />
+              <Play
+                className="h-5 w-5 group-hover:scale-110 transition-transform"
+                aria-hidden="true"
+              />
               Try Live Demo
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="ghost"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="ghost" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template#documentation"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Read Documentation
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </a>
             </Button>
           </div>
@@ -104,8 +100,8 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
               Need help getting started? Check out the{' '}
               <Link href="/dev" className="text-primary hover:underline">
                 component showcase
-              </Link>
-              {' '}or explore the{' '}
+              </Link>{' '}
+              or explore the{' '}
               <Link href="/admin" className="text-primary hover:underline">
                 admin dashboard demo
               </Link>
diff --git a/frontend/src/components/home/ContextSection.tsx b/frontend/src/components/home/ContextSection.tsx
index 02cf00a..4c6a049 100644
--- a/frontend/src/components/home/ContextSection.tsx
+++ b/frontend/src/components/home/ContextSection.tsx
@@ -26,9 +26,7 @@ export function ContextSection() {
           viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="text-3xl md:text-4xl font-bold">
-            What You Get Out of the Box
-          </h2>
+          <h2 className="text-3xl md:text-4xl font-bold">What You Get Out of the Box</h2>
           <p className="text-lg text-muted-foreground leading-relaxed">
             This isn&apos;t a boilerplate generator or a paid SaaS template. It&apos;s a complete,
             production-ready codebase you can clone and customize. Everything you need to build
diff --git a/frontend/src/components/home/DemoCredentialsModal.tsx b/frontend/src/components/home/DemoCredentialsModal.tsx
index 88aa790..a52fbb0 100644
--- a/frontend/src/components/home/DemoCredentialsModal.tsx
+++ b/frontend/src/components/home/DemoCredentialsModal.tsx
@@ -51,7 +51,8 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
         <DialogHeader>
           <DialogTitle>Try the Live Demo</DialogTitle>
           <DialogDescription>
-            Use these credentials to explore the template&apos;s features. Both accounts are pre-configured with sample data.
+            Use these credentials to explore the template&apos;s features. Both accounts are
+            pre-configured with sample data.
           </DialogDescription>
         </DialogHeader>
 
diff --git a/frontend/src/components/home/DemoSection.tsx b/frontend/src/components/home/DemoSection.tsx
index 330d59e..0780b54 100644
--- a/frontend/src/components/home/DemoSection.tsx
+++ b/frontend/src/components/home/DemoSection.tsx
@@ -54,7 +54,8 @@ export function DemoSection() {
       >
         <h2 className="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Explore the template&apos;s capabilities with live demos. Login with demo credentials to test features.
+          Explore the template&apos;s capabilities with live demos. Login with demo credentials to
+          test features.
         </p>
       </motion.div>
 
@@ -75,9 +76,7 @@ export function DemoSection() {
             </div>
 
             <h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
-            <p className="text-muted-foreground mb-4 leading-relaxed flex-1">
-              {demo.description}
-            </p>
+            <p className="text-muted-foreground mb-4 leading-relaxed flex-1">{demo.description}</p>
 
             {demo.credentials && (
               <div className="mb-4 p-3 rounded-md bg-muted font-mono text-xs border">
diff --git a/frontend/src/components/home/FeatureGrid.tsx b/frontend/src/components/home/FeatureGrid.tsx
index 993f31a..10ddc69 100644
--- a/frontend/src/components/home/FeatureGrid.tsx
+++ b/frontend/src/components/home/FeatureGrid.tsx
@@ -95,7 +95,8 @@ export function FeatureGrid() {
           Comprehensive Features, No Assembly Required
         </h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Everything you need to build production-grade web applications. Clone, customize, and ship.
+          Everything you need to build production-grade web applications. Clone, customize, and
+          ship.
         </p>
       </motion.div>
 
diff --git a/frontend/src/components/home/Header.tsx b/frontend/src/components/home/Header.tsx
index 77beb6e..bdc1596 100644
--- a/frontend/src/components/home/Header.tsx
+++ b/frontend/src/components/home/Header.tsx
@@ -31,8 +31,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
           <Link href="/" className="font-bold text-xl hover:opacity-80 transition-opacity">
             <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
               FastNext
-            </span>
-            {' '}
+            </span>{' '}
             <span className="text-foreground">Template</span>
           </Link>
 
@@ -64,18 +63,10 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
             </a>
 
             {/* CTAs */}
-            <Button
-              onClick={onOpenDemoModal}
-              variant="default"
-              size="sm"
-            >
+            <Button onClick={onOpenDemoModal} variant="default" size="sm">
               Try Demo
             </Button>
-            <Button
-              asChild
-              variant="outline"
-              size="sm"
-            >
+            <Button asChild variant="outline" size="sm">
               <Link href="/login">Login</Link>
             </Button>
           </nav>
@@ -131,11 +122,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
                   >
                     Try Demo
                   </Button>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="w-full"
-                  >
+                  <Button asChild variant="outline" className="w-full">
                     <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
                       Login
                     </Link>
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index d25bc05..0abe65d 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -15,11 +15,13 @@ interface HeroSectionProps {
 }
 
 export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
-
   return (
     <section className="relative overflow-hidden">
       {/* Gradient Background */}
-      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-background to-background" aria-hidden="true" />
+      <div
+        className="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-background to-background"
+        aria-hidden="true"
+      />
       <div
         className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_30%_20%,rgba(var(--primary-rgb,120,119,198),0.1),transparent_50%)]"
         aria-hidden="true"
@@ -38,7 +40,10 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
             transition={{ duration: 0.5 }}
           >
             <div className="inline-flex items-center gap-2 rounded-full border bg-background/50 px-4 py-1.5 text-sm backdrop-blur">
-              <span className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse" aria-hidden="true" />
+              <span
+                className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse"
+                aria-hidden="true"
+              />
               <span className="font-medium">MIT Licensed</span>
               <span className="text-muted-foreground">•</span>
               <span className="font-medium">97% Test Coverage</span>
@@ -79,20 +84,14 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.3 }}
           >
-            <Button
-              size="lg"
-              onClick={onOpenDemoModal}
-              className="gap-2 text-base group"
-            >
-              <Play className="h-5 w-5 group-hover:scale-110 transition-transform" aria-hidden="true" />
+            <Button size="lg" onClick={onOpenDemoModal} className="gap-2 text-base group">
+              <Play
+                className="h-5 w-5 group-hover:scale-110 transition-transform"
+                aria-hidden="true"
+              />
               Try Live Demo
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="outline"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="outline" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template"
                 target="_blank"
@@ -100,18 +99,19 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
               >
                 <Github className="h-5 w-5" aria-hidden="true" />
                 View on GitHub
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </a>
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="ghost"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="ghost" className="gap-2 text-base group">
               <Link href="/dev">
                 Explore Components
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </Link>
             </Button>
           </motion.div>
diff --git a/frontend/src/components/home/PhilosophySection.tsx b/frontend/src/components/home/PhilosophySection.tsx
index bbe8117..386b797 100644
--- a/frontend/src/components/home/PhilosophySection.tsx
+++ b/frontend/src/components/home/PhilosophySection.tsx
@@ -33,22 +33,18 @@ export function PhilosophySection() {
           viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="text-3xl md:text-4xl font-bold mb-6">
-            Why This Template Exists
-          </h2>
+          <h2 className="text-3xl md:text-4xl font-bold mb-6">Why This Template Exists</h2>
           <div className="space-y-4 text-lg text-muted-foreground leading-relaxed">
             <p>
               We built this template after rebuilding the same authentication, authorization, and
-              admin infrastructure for the fifth time. Instead of yet another tutorial or boilerplate
-              generator, we created a complete, tested, documented codebase that you can clone and
-              customize.
+              admin infrastructure for the fifth time. Instead of yet another tutorial or
+              boilerplate generator, we created a complete, tested, documented codebase that you can
+              clone and customize.
             </p>
             <p className="text-foreground font-semibold text-xl">
               No vendor lock-in. No subscriptions. No license restrictions.
             </p>
-            <p>
-              Just clean, modern code with patterns that scale. MIT licensed forever.
-            </p>
+            <p>Just clean, modern code with patterns that scale. MIT licensed forever.</p>
           </div>
         </motion.div>
 
@@ -90,7 +86,10 @@ export function PhilosophySection() {
             <ul className="space-y-3">
               {willFind.map((item) => (
                 <li key={item} className="flex items-start gap-3">
-                  <Check className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
+                  <Check
+                    className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5"
+                    aria-hidden="true"
+                  />
                   <span className="text-muted-foreground">{item}</span>
                 </li>
               ))}
diff --git a/frontend/src/components/home/QuickStartCode.tsx b/frontend/src/components/home/QuickStartCode.tsx
index cbe0f1b..ac7267a 100644
--- a/frontend/src/components/home/QuickStartCode.tsx
+++ b/frontend/src/components/home/QuickStartCode.tsx
@@ -58,12 +58,7 @@ export function QuickStartCode() {
               <span className="inline-block h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
               <span>bash</span>
             </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={copyToClipboard}
-              className="gap-2"
-            >
+            <Button variant="ghost" size="sm" onClick={copyToClipboard} className="gap-2">
               {copied ? (
                 <>
                   <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
diff --git a/frontend/src/components/home/StatsSection.tsx b/frontend/src/components/home/StatsSection.tsx
index af34b2f..47621d1 100644
--- a/frontend/src/components/home/StatsSection.tsx
+++ b/frontend/src/components/home/StatsSection.tsx
@@ -95,7 +95,8 @@ export function StatsSection() {
       >
         <h2 className="text-3xl md:text-4xl font-bold mb-4">Built with Quality in Mind</h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Not just another template. Comprehensive testing, documentation, and production-ready patterns.
+          Not just another template. Comprehensive testing, documentation, and production-ready
+          patterns.
         </p>
       </motion.div>
 
diff --git a/frontend/src/components/home/TechStackSection.tsx b/frontend/src/components/home/TechStackSection.tsx
index 08492ea..f69abd5 100644
--- a/frontend/src/components/home/TechStackSection.tsx
+++ b/frontend/src/components/home/TechStackSection.tsx
@@ -70,7 +70,8 @@ export function TechStackSection() {
           Modern, Type-Safe, Production-Grade Stack
         </h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Built with the best tools for full-stack development. Async architecture, type safety, and developer experience.
+          Built with the best tools for full-stack development. Async architecture, type safety, and
+          developer experience.
         </p>
       </motion.div>
 
@@ -87,7 +88,9 @@ export function TechStackSection() {
           >
             <div className="h-full flex flex-col items-center justify-center rounded-lg border bg-card p-6 text-center hover:shadow-lg transition-all">
               {/* Tech Badge */}
-              <div className={`inline-block rounded-full bg-gradient-to-r ${tech.color} px-4 py-2 text-white font-semibold text-sm mb-2`}>
+              <div
+                className={`inline-block rounded-full bg-gradient-to-r ${tech.color} px-4 py-2 text-white font-semibold text-sm mb-2`}
+              >
                 {tech.name}
               </div>
 
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index bca9972..ed69375 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -80,9 +80,7 @@ export function Header() {
         {/* Logo */}
         <div className="flex items-center space-x-8">
           <Link href="/" className="flex items-center space-x-2">
-            <span className="text-xl font-bold text-foreground">
-              FastNext
-            </span>
+            <span className="text-xl font-bold text-foreground">FastNext</span>
           </Link>
 
           {/* Navigation Links */}
@@ -90,11 +88,7 @@ export function Header() {
             <NavLink href="/" exact>
               Home
             </NavLink>
-            {user?.is_superuser && (
-              <NavLink href="/admin">
-                Admin
-              </NavLink>
-            )}
+            {user?.is_superuser && <NavLink href="/admin">Admin</NavLink>}
           </nav>
         </div>
 
@@ -117,9 +111,7 @@ export function Header() {
                   <p className="text-sm font-medium">
                     {user?.first_name} {user?.last_name}
                   </p>
-                  <p className="text-xs text-muted-foreground">
-                    {user?.email}
-                  </p>
+                  <p className="text-xs text-muted-foreground">{user?.email}</p>
                 </div>
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
diff --git a/frontend/src/components/settings/PasswordChangeForm.tsx b/frontend/src/components/settings/PasswordChangeForm.tsx
index 7b39359..494736b 100644
--- a/frontend/src/components/settings/PasswordChangeForm.tsx
+++ b/frontend/src/components/settings/PasswordChangeForm.tsx
@@ -22,25 +22,23 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
 // Validation Schema
 // ============================================================================
 
-const passwordChangeSchema = z.object({
-  current_password: z
-    .string()
-    .min(1, 'Current password is required'),
-  new_password: z
-    .string()
-    .min(1, 'New password is required')
-    .min(8, 'Password must be at least 8 characters')
-    .regex(/[0-9]/, 'Password must contain at least one number')
-    .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
-    .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
-    .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character'),
-  confirm_password: z
-    .string()
-    .min(1, 'Please confirm your new password'),
-}).refine((data) => data.new_password === data.confirm_password, {
-  message: 'Passwords do not match',
-  path: ['confirm_password'],
-});
+const passwordChangeSchema = z
+  .object({
+    current_password: z.string().min(1, 'Current password is required'),
+    new_password: z
+      .string()
+      .min(1, 'New password is required')
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[0-9]/, 'Password must contain at least one number')
+      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+      .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
+      .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character'),
+    confirm_password: z.string().min(1, 'Please confirm your new password'),
+  })
+  .refine((data) => data.new_password === data.confirm_password, {
+    message: 'Passwords do not match',
+    path: ['confirm_password'],
+  });
 
 type PasswordChangeFormData = z.infer<typeof passwordChangeSchema>;
 
@@ -73,10 +71,7 @@ interface PasswordChangeFormProps {
  * <PasswordChangeForm onSuccess={() => console.log('Password changed')} />
  * ```
  */
-export function PasswordChangeForm({
-  onSuccess,
-  className,
-}: PasswordChangeFormProps) {
+export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormProps) {
   const [serverError, setServerError] = useState<string | null>(null);
   const passwordChangeMutation = usePasswordChange((message) => {
     toast.success(message);
@@ -191,19 +186,12 @@ export function PasswordChangeForm({
 
           {/* Submit Button */}
           <div className="flex items-center gap-4">
-            <Button
-              type="submit"
-              disabled={isSubmitting || !isDirty}
-            >
+            <Button type="submit" disabled={isSubmitting || !isDirty}>
               {isSubmitting ? 'Changing Password...' : 'Change Password'}
             </Button>
             {/* istanbul ignore next - Cancel button requires isDirty state, tested in E2E */}
             {isDirty && !isSubmitting && (
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => form.reset()}
-              >
+              <Button type="button" variant="outline" onClick={() => form.reset()}>
                 Cancel
               </Button>
             )}
diff --git a/frontend/src/components/settings/ProfileSettingsForm.tsx b/frontend/src/components/settings/ProfileSettingsForm.tsx
index 14d8253..5f4be00 100644
--- a/frontend/src/components/settings/ProfileSettingsForm.tsx
+++ b/frontend/src/components/settings/ProfileSettingsForm.tsx
@@ -34,9 +34,7 @@ const profileSchema = z.object({
     .max(50, 'Last name must not exceed 50 characters')
     .optional()
     .or(z.literal('')),
-  email: z
-    .string()
-    .email('Invalid email address'),
+  email: z.string().email('Invalid email address'),
 });
 
 type ProfileFormData = z.infer<typeof profileSchema>;
@@ -68,10 +66,7 @@ interface ProfileSettingsFormProps {
  * <ProfileSettingsForm onSuccess={() => console.log('Profile updated')} />
  * ```
  */
-export function ProfileSettingsForm({
-  onSuccess,
-  className,
-}: ProfileSettingsFormProps) {
+export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFormProps) {
   const [serverError, setServerError] = useState<string | null>(null);
   const currentUser = useCurrentUser();
   const updateProfileMutation = useUpdateProfile((message) => {
@@ -201,19 +196,12 @@ export function ProfileSettingsForm({
 
           {/* Submit Button */}
           <div className="flex items-center gap-4">
-            <Button
-              type="submit"
-              disabled={isSubmitting || !isDirty}
-            >
+            <Button type="submit" disabled={isSubmitting || !isDirty}>
               {isSubmitting ? 'Saving...' : 'Save Changes'}
             </Button>
             {/* istanbul ignore next - Reset button requires isDirty state, tested in E2E */}
             {isDirty && !isSubmitting && (
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => form.reset()}
-              >
+              <Button type="button" variant="outline" onClick={() => form.reset()}>
                 Reset
               </Button>
             )}
diff --git a/frontend/src/components/settings/SessionCard.tsx b/frontend/src/components/settings/SessionCard.tsx
index 2489574..e37c373 100644
--- a/frontend/src/components/settings/SessionCard.tsx
+++ b/frontend/src/components/settings/SessionCard.tsx
@@ -61,7 +61,9 @@ export function SessionCard({ session, onRevoke, isRevoking = false }: SessionCa
   const DeviceIcon = Monitor;
 
   // Format location string
-  const location = [session.location_city, session.location_country].filter(Boolean).join(', ') || 'Unknown location';
+  const location =
+    [session.location_city, session.location_country].filter(Boolean).join(', ') ||
+    'Unknown location';
 
   // Format device string
   const deviceInfo = session.device_name || 'Unknown device';
@@ -145,8 +147,8 @@ export function SessionCard({ session, onRevoke, isRevoking = false }: SessionCa
           <DialogHeader>
             <DialogTitle>Revoke Session?</DialogTitle>
             <DialogDescription>
-              This will sign out this device and you&apos;ll need to sign in again to access your account
-              from it. This action cannot be undone.
+              This will sign out this device and you&apos;ll need to sign in again to access your
+              account from it. This action cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
diff --git a/frontend/src/components/settings/SessionsManager.tsx b/frontend/src/components/settings/SessionsManager.tsx
index d17ccc7..233c387 100644
--- a/frontend/src/components/settings/SessionsManager.tsx
+++ b/frontend/src/components/settings/SessionsManager.tsx
@@ -21,7 +21,11 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { SessionCard } from './SessionCard';
-import { useListSessions, useRevokeSession, useRevokeAllOtherSessions } from '@/lib/api/hooks/useSession';
+import {
+  useListSessions,
+  useRevokeSession,
+  useRevokeAllOtherSessions,
+} from '@/lib/api/hooks/useSession';
 import { useState } from 'react';
 
 // ============================================================================
@@ -195,8 +199,8 @@ export function SessionsManager({ className }: SessionsManagerProps) {
           {/* Security Tip */}
           <div className="pt-4 border-t">
             <p className="text-sm text-muted-foreground">
-              <strong className="text-foreground">Security tip:</strong> If you see a session you don&apos;t
-              recognize, revoke it immediately and change your password.
+              <strong className="text-foreground">Security tip:</strong> If you see a session you
+              don&apos;t recognize, revoke it immediately and change your password.
             </p>
           </div>
         </CardContent>
@@ -208,8 +212,8 @@ export function SessionsManager({ className }: SessionsManagerProps) {
           <DialogHeader>
             <DialogTitle>Revoke All Other Sessions?</DialogTitle>
             <DialogDescription>
-              This will sign out all devices except the one you&apos;re currently using.
-              You&apos;ll need to sign in again on those devices.
+              This will sign out all devices except the one you&apos;re currently using. You&apos;ll
+              need to sign in again on those devices.
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
diff --git a/frontend/src/components/theme/ThemeToggle.tsx b/frontend/src/components/theme/ThemeToggle.tsx
index b3b5550..2f50dae 100644
--- a/frontend/src/components/theme/ThemeToggle.tsx
+++ b/frontend/src/components/theme/ThemeToggle.tsx
@@ -22,11 +22,7 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon" aria-label="Toggle theme">
-          {resolvedTheme === 'dark' ? (
-            <Moon className="h-5 w-5" />
-          ) : (
-            <Sun className="h-5 w-5" />
-          )}
+          {resolvedTheme === 'dark' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index 4c2ff26..a8cb3d4 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -1,31 +1,23 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from "@/lib/utils/index"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils/index';
+import { buttonVariants } from '@/components/ui/button';
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 function AlertDialogOverlay({
@@ -36,12 +28,12 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -54,42 +46,33 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -99,10 +82,10 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
+      className={cn('text-lg font-semibold', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -112,22 +95,17 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
   className,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
 function AlertDialogCancel({
@@ -136,10 +114,10 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -154,4 +132,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
index 5afd41d..5b2e5a3 100755
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -1,59 +1,49 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: 'bg-background text-foreground',
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index 51e507b..f80a621 100755
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,14 +11,11 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -26,11 +23,11 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -39,12 +36,12 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
       className
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index e87d62b..47f01e3 100755
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,36 +1,33 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 9fef397..337eb0b 100755
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,57 +1,50 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils/index"
+import { cn } from '@/lib/utils/index';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button';
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index cabfbfc..639673f 100755
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,76 +1,55 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index 24201fc..4721262 100755
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { cn } from "@/lib/utils"
-import { CheckIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '@/lib/utils';
+import { CheckIcon } from '@radix-ui/react-icons';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -12,18 +12,16 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("grid place-content-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
       <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index b5aaef7..e05d67f 100755
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,17 +1,17 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cn } from "@/lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib/utils';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,13 +20,13 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}
@@ -49,36 +49,21 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,14 +71,11 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -101,11 +83,11 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -118,4 +100,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 4fc75b2..76e0ccd 100755
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,33 +1,33 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
       className
     )}
     {...props}
@@ -35,9 +35,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -46,14 +45,13 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
       className
     )}
     {...props}
   />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -64,33 +62,33 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
       className
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -99,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -112,9 +110,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,7 +120,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -135,26 +132,22 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -162,24 +155,18 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
@@ -197,4 +184,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 69b64fb..6be0207 100755
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,22 +1,22 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index 5341821..625517f 100755
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -1,26 +1,21 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index 70a28f6..5dadfee 100755
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -1,33 +1,33 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
         className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index d1c3b94..3551032 100755
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,15 +1,15 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/utils';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -28,8 +28,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDownIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -37,16 +37,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronUpIcon className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -54,29 +51,25 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronDownIcon className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
@@ -85,9 +78,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
         {children}
@@ -95,8 +88,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -104,11 +97,11 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -117,7 +110,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -129,8 +122,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -138,11 +131,11 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -155,4 +148,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
index 12d81c4..89b9167 100755
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -1,31 +1,26 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index 92506a4..9ddb536 100755
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,18 +1,18 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -20,33 +20,33 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {
-      side: "right",
+      side: 'right',
     },
   }
-)
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -55,14 +55,10 @@ interface SheetContentProps
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
@@ -70,36 +66,21 @@ const SheetContent = React.forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = 'SheetFooter';
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -107,11 +88,11 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -119,11 +100,11 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -136,4 +117,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index d7e45f7..ec526ea 100755
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -1,15 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />;
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 452f4d9..584f52a 100755
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,31 +1,29 @@
-"use client"
+'use client';
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index c0df655..50e56b5 100755
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -1,40 +1,31 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -42,29 +33,25 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +60,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -88,33 +75,20 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 0f4caeb..d19d7ea 100755
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -14,13 +14,13 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -29,13 +29,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
       className
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -44,12 +44,12 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       className
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index e56b0af..3cbbaf3 100755
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -1,22 +1,21 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
 
-export { Textarea }
+export { Textarea };
diff --git a/frontend/src/lib/api/client.ts b/frontend/src/lib/api/client.ts
index 7a0dde1..b460681 100644
--- a/frontend/src/lib/api/client.ts
+++ b/frontend/src/lib/api/client.ts
@@ -114,7 +114,10 @@ async function refreshAccessToken(): Promise<string> {
       // Only redirect to login when not already on an auth route
       if (typeof window !== 'undefined') {
         const currentPath = window.location.pathname;
-        const onAuthRoute = currentPath === '/login' || currentPath === '/register' || currentPath.startsWith('/password-reset');
+        const onAuthRoute =
+          currentPath === '/login' ||
+          currentPath === '/register' ||
+          currentPath.startsWith('/password-reset');
         if (!onAuthRoute) {
           const returnUrl = currentPath ? `?returnUrl=${encodeURIComponent(currentPath)}` : '';
           window.location.href = `/login${returnUrl}`;
@@ -144,7 +147,12 @@ client.instance.interceptors.request.use(
 
     // Do not attach Authorization header for auth endpoints
     const url = requestConfig.url || '';
-    const isAuthEndpoint = url.includes('/auth/login') || url.includes('/auth/register') || url.includes('/auth/refresh') || url.includes('/auth/password') || url.includes('/password');
+    const isAuthEndpoint =
+      url.includes('/auth/login') ||
+      url.includes('/auth/register') ||
+      url.includes('/auth/refresh') ||
+      url.includes('/auth/password') ||
+      url.includes('/password');
 
     // Add Authorization header if token exists and not hitting auth endpoints
     if (accessToken && requestConfig.headers && !isAuthEndpoint) {
@@ -188,7 +196,11 @@ client.instance.interceptors.response.use(
     // Handle 401 Unauthorized - Token expired
     if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
       const url = originalRequest.url || '';
-      const isAuthEndpoint = url.includes('/auth/login') || url.includes('/auth/register') || url.includes('/auth/password') || url.includes('/password');
+      const isAuthEndpoint =
+        url.includes('/auth/login') ||
+        url.includes('/auth/register') ||
+        url.includes('/auth/password') ||
+        url.includes('/password');
 
       // If the 401 is from auth endpoints, do not attempt refresh
       if (isAuthEndpoint) {
diff --git a/frontend/src/lib/api/errors.ts b/frontend/src/lib/api/errors.ts
index 0a4688e..551b21d 100755
--- a/frontend/src/lib/api/errors.ts
+++ b/frontend/src/lib/api/errors.ts
@@ -15,48 +15,48 @@ export interface APIErrorResponse {
 // Error code to user-friendly message mapping
 export const ERROR_MESSAGES: Record<string, string> = {
   // Authentication errors (AUTH_xxx)
-  'AUTH_001': 'Invalid email or password',
-  'AUTH_002': 'Account is inactive',
-  'AUTH_003': 'Invalid or expired token',
-  'AUTH_004': 'Session expired. Please login again',
+  AUTH_001: 'Invalid email or password',
+  AUTH_002: 'Account is inactive',
+  AUTH_003: 'Invalid or expired token',
+  AUTH_004: 'Session expired. Please login again',
 
   // User errors (USER_xxx)
-  'USER_001': 'User not found',
-  'USER_002': 'This email is already registered',
-  'USER_003': 'Invalid user data',
-  'USER_004': 'Cannot delete your own account',
+  USER_001: 'User not found',
+  USER_002: 'This email is already registered',
+  USER_003: 'Invalid user data',
+  USER_004: 'Cannot delete your own account',
 
   // Validation errors (VAL_xxx)
-  'VAL_001': 'Invalid input. Please check your data',
-  'VAL_002': 'Email format is invalid',
-  'VAL_003': 'Password does not meet requirements',
-  'VAL_004': 'Required field is missing',
+  VAL_001: 'Invalid input. Please check your data',
+  VAL_002: 'Email format is invalid',
+  VAL_003: 'Password does not meet requirements',
+  VAL_004: 'Required field is missing',
 
   // Organization errors (ORG_xxx)
-  'ORG_001': 'Organization name already exists',
-  'ORG_002': 'Organization not found',
-  'ORG_003': 'Cannot delete organization with members',
+  ORG_001: 'Organization name already exists',
+  ORG_002: 'Organization not found',
+  ORG_003: 'Cannot delete organization with members',
 
   // Permission errors (PERM_xxx)
-  'PERM_001': 'Insufficient permissions',
-  'PERM_002': 'Admin access required',
-  'PERM_003': 'Cannot perform this action',
+  PERM_001: 'Insufficient permissions',
+  PERM_002: 'Admin access required',
+  PERM_003: 'Cannot perform this action',
 
   // Rate limiting (RATE_xxx)
-  'RATE_001': 'Too many requests. Please try again later',
+  RATE_001: 'Too many requests. Please try again later',
 
   // Session errors (SESSION_xxx)
-  'SESSION_001': 'Session not found',
-  'SESSION_002': 'Cannot revoke current session',
-  'SESSION_003': 'Session expired',
+  SESSION_001: 'Session not found',
+  SESSION_002: 'Cannot revoke current session',
+  SESSION_003: 'Session expired',
 
   // Generic errors
-  'NETWORK_ERROR': 'Network error. Please check your connection',
-  'SERVER_ERROR': 'A server error occurred. Please try again later',
-  'UNKNOWN': 'An unexpected error occurred',
-  'FORBIDDEN': "You don't have permission to perform this action",
-  'NOT_FOUND': 'The requested resource was not found',
-  'RATE_LIMIT': 'Too many requests. Please slow down',
+  NETWORK_ERROR: 'Network error. Please check your connection',
+  SERVER_ERROR: 'A server error occurred. Please try again later',
+  UNKNOWN: 'An unexpected error occurred',
+  FORBIDDEN: "You don't have permission to perform this action",
+  NOT_FOUND: 'The requested resource was not found',
+  RATE_LIMIT: 'Too many requests. Please slow down',
 };
 
 /**
@@ -150,7 +150,8 @@ export function parseAPIError(error: unknown): APIError[] {
     return [
       {
         code: 'SERVER_ERROR',
-        message: ERROR_MESSAGES['SERVER_ERROR'] || 'A server error occurred. Please try again later',
+        message:
+          ERROR_MESSAGES['SERVER_ERROR'] || 'A server error occurred. Please try again later',
       },
     ];
   }
diff --git a/frontend/src/lib/api/hooks/useAdmin.tsx b/frontend/src/lib/api/hooks/useAdmin.tsx
index d3b2c7d..bf6c9e4 100644
--- a/frontend/src/lib/api/hooks/useAdmin.tsx
+++ b/frontend/src/lib/api/hooks/useAdmin.tsx
@@ -11,31 +11,31 @@
 
 'use client';
 
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-    type AddMemberRequest,
-    adminActivateUser,
-    adminAddOrganizationMember,
-    adminBulkUserAction,
-    adminCreateOrganization,
-    adminCreateUser,
-    adminDeactivateUser,
-    adminDeleteOrganization,
-    adminDeleteUser,
-    adminGetOrganization,
-    adminListOrganizationMembers,
-    adminListOrganizations,
-    adminListSessions,
-    adminListUsers,
-    adminRemoveOrganizationMember,
-    adminUpdateOrganization,
-    adminUpdateUser,
-    type OrganizationCreate,
-    type OrganizationUpdate,
-    type UserCreate,
-    type UserUpdate,
+  type AddMemberRequest,
+  adminActivateUser,
+  adminAddOrganizationMember,
+  adminBulkUserAction,
+  adminCreateOrganization,
+  adminCreateUser,
+  adminDeactivateUser,
+  adminDeleteOrganization,
+  adminDeleteUser,
+  adminGetOrganization,
+  adminListOrganizationMembers,
+  adminListOrganizations,
+  adminListSessions,
+  adminListUsers,
+  adminRemoveOrganizationMember,
+  adminUpdateOrganization,
+  adminUpdateUser,
+  type OrganizationCreate,
+  type OrganizationUpdate,
+  type UserCreate,
+  type UserUpdate,
 } from '@/lib/api/client';
-import {useAuth} from '@/lib/auth/AuthContext';
+import { useAuth } from '@/lib/auth/AuthContext';
 
 /**
  * Constants for admin hooks
@@ -81,7 +81,11 @@ export function useAdminStats() {
       }
 
       // Type assertion: if no error, response has data
-      const usersData = (usersResponse as { data: { data: Array<{ is_active: boolean }>; pagination: { total: number } } }).data;
+      const usersData = (
+        usersResponse as {
+          data: { data: Array<{ is_active: boolean }>; pagination: { total: number } };
+        }
+      ).data;
       const users = usersData?.data || [];
       const totalUsers = usersData?.pagination?.total || 0;
       const activeUsers = users.filter((u) => u.is_active).length;
@@ -282,13 +286,7 @@ export function useUpdateUser() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      userId,
-      userData,
-    }: {
-      userId: string;
-      userData: UserUpdate;
-    }) => {
+    mutationFn: async ({ userId, userData }: { userId: string; userData: UserUpdate }) => {
       const response = await adminUpdateUser({
         path: { user_id: userId },
         body: userData,
@@ -509,13 +507,7 @@ export function useUpdateOrganization() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      orgId,
-      orgData,
-    }: {
-      orgId: string;
-      orgData: OrganizationUpdate;
-    }) => {
+    mutationFn: async ({ orgId, orgData }: { orgId: string; orgData: OrganizationUpdate }) => {
       const response = await adminUpdateOrganization({
         path: { org_id: orgId },
         body: orgData,
@@ -603,11 +595,7 @@ export function useGetOrganization(orgId: string | null) {
  * @param limit - Number of records per page
  * @returns Paginated list of organization members
  */
-export function useOrganizationMembers(
-  orgId: string | null,
-  page = 1,
-  limit = DEFAULT_PAGE_LIMIT
-) {
+export function useOrganizationMembers(orgId: string | null, page = 1, limit = DEFAULT_PAGE_LIMIT) {
   const { user } = useAuth();
 
   return useQuery({
@@ -642,13 +630,7 @@ export function useAddOrganizationMember() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      orgId,
-      memberData,
-    }: {
-      orgId: string;
-      memberData: AddMemberRequest;
-    }) => {
+    mutationFn: async ({ orgId, memberData }: { orgId: string; memberData: AddMemberRequest }) => {
       const response = await adminAddOrganizationMember({
         path: { org_id: orgId },
         body: memberData,
@@ -681,13 +663,7 @@ export function useRemoveOrganizationMember() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      orgId,
-      userId,
-    }: {
-      orgId: string;
-      userId: string;
-    }) => {
+    mutationFn: async ({ orgId, userId }: { orgId: string; userId: string }) => {
       const response = await adminRemoveOrganizationMember({
         path: { org_id: orgId, user_id: userId },
         throwOnError: false,
diff --git a/frontend/src/lib/api/hooks/useAuth.ts b/frontend/src/lib/api/hooks/useAuth.ts
index 5a83d96..c5dd11c 100755
--- a/frontend/src/lib/api/hooks/useAuth.ts
+++ b/frontend/src/lib/api/hooks/useAuth.ts
@@ -121,12 +121,7 @@ export function useLogin(onSuccess?: () => void) {
       const { access_token, refresh_token, user, expires_in } = data;
 
       // Update auth store with user and tokens
-      await setAuth(
-        user as User,
-        access_token,
-        refresh_token || '',
-        expires_in
-      );
+      await setAuth(user as User, access_token, refresh_token || '', expires_in);
 
       // Invalidate and refetch user data
       queryClient.invalidateQueries({ queryKey: authKeys.all });
@@ -199,12 +194,7 @@ export function useRegister(onSuccess?: () => void) {
       const { access_token, refresh_token, user, expires_in } = data;
 
       // Update auth store with user and tokens (auto-login)
-      await setAuth(
-        user as User,
-        access_token,
-        refresh_token || '',
-        expires_in
-      );
+      await setAuth(user as User, access_token, refresh_token || '', expires_in);
 
       // Invalidate and refetch user data
       queryClient.invalidateQueries({ queryKey: authKeys.all });
diff --git a/frontend/src/lib/api/hooks/useUser.ts b/frontend/src/lib/api/hooks/useUser.ts
index 52d7bec..c8cf65e 100644
--- a/frontend/src/lib/api/hooks/useUser.ts
+++ b/frontend/src/lib/api/hooks/useUser.ts
@@ -34,11 +34,7 @@ export function useUpdateProfile(onSuccess?: (message: string) => void) {
   const setUser = useAuth((state) => state.setUser);
 
   return useMutation({
-    mutationFn: async (data: {
-      first_name?: string;
-      last_name?: string;
-      email?: string;
-    }) => {
+    mutationFn: async (data: { first_name?: string; last_name?: string; email?: string }) => {
       const response = await updateCurrentUser({
         body: data,
         throwOnError: false,
@@ -52,11 +48,7 @@ export function useUpdateProfile(onSuccess?: (message: string) => void) {
       const responseData = (response as { data: unknown }).data;
 
       // Validate response is a user object
-      if (
-        typeof responseData !== 'object' ||
-        responseData === null ||
-        !('id' in responseData)
-      ) {
+      if (typeof responseData !== 'object' || responseData === null || !('id' in responseData)) {
         throw new Error('Invalid profile update response: missing user data');
       }
 
diff --git a/frontend/src/lib/auth/AuthContext.tsx b/frontend/src/lib/auth/AuthContext.tsx
index 1c449ac..aa29cf9 100644
--- a/frontend/src/lib/auth/AuthContext.tsx
+++ b/frontend/src/lib/auth/AuthContext.tsx
@@ -9,13 +9,13 @@
  * Design: Context handles dependency injection, Zustand handles state management
  */
 
-"use client";
+'use client';
 
-import { createContext, useContext } from "react";
-import type { ReactNode } from "react";
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
 // eslint-disable-next-line no-restricted-imports -- This is the DI boundary, needs real store for production
-import { useAuthStore as useAuthStoreImpl } from "@/lib/stores/authStore";
-import type { User } from "@/lib/stores/authStore";
+import { useAuthStore as useAuthStoreImpl } from '@/lib/stores/authStore';
+import type { User } from '@/lib/stores/authStore';
 
 /**
  * Authentication state shape
@@ -31,7 +31,12 @@ interface AuthState {
   tokenExpiresAt: number | null;
 
   // Actions
-  setAuth: (user: User, accessToken: string, refreshToken: string, expiresIn?: number) => Promise<void>;
+  setAuth: (
+    user: User,
+    accessToken: string,
+    refreshToken: string,
+    expiresIn?: number
+  ) => Promise<void>;
   setTokens: (accessToken: string, refreshToken: string, expiresIn?: number) => Promise<void>;
   setUser: (user: User) => void;
   clearAuth: () => Promise<void>;
@@ -120,7 +125,7 @@ export function useAuth<T>(selector?: (state: AuthState) => T): AuthState | T {
   const storeHook = useContext(AuthContext);
 
   if (!storeHook) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error('useAuth must be used within AuthProvider');
   }
 
   // Call the Zustand hook internally (follows React Rules of Hooks)
diff --git a/frontend/src/lib/auth/crypto.ts b/frontend/src/lib/auth/crypto.ts
index 3950ab9..a92c3eb 100644
--- a/frontend/src/lib/auth/crypto.ts
+++ b/frontend/src/lib/auth/crypto.ts
@@ -34,13 +34,10 @@ async function getEncryptionKey(): Promise<CryptoKey> {
   if (storedKey) {
     try {
       const keyData = JSON.parse(storedKey);
-      return await crypto.subtle.importKey(
-        'jwk',
-        keyData,
-        { name: 'AES-GCM', length: 256 },
-        true,
-        ['encrypt', 'decrypt']
-      );
+      return await crypto.subtle.importKey('jwk', keyData, { name: 'AES-GCM', length: 256 }, true, [
+        'encrypt',
+        'decrypt',
+      ]);
     } catch (error) {
       // Corrupted key, regenerate
       console.warn('Failed to import stored key, generating new key:', error);
@@ -49,11 +46,10 @@ async function getEncryptionKey(): Promise<CryptoKey> {
   }
 
   // Generate new key
-  const key = await crypto.subtle.generateKey(
-    { name: 'AES-GCM', length: 256 },
-    true,
-    ['encrypt', 'decrypt']
-  );
+  const key = await crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, [
+    'encrypt',
+    'decrypt',
+  ]);
 
   // Store key in sessionStorage
   try {
@@ -86,11 +82,7 @@ export async function encryptData(data: string): Promise<string> {
     const encoder = new TextEncoder();
     const encodedData = encoder.encode(data);
 
-    const encryptedData = await crypto.subtle.encrypt(
-      { name: 'AES-GCM', iv },
-      key,
-      encodedData
-    );
+    const encryptedData = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encodedData);
 
     // Combine IV and encrypted data
     const combined = new Uint8Array(iv.length + encryptedData.byteLength);
@@ -122,17 +114,13 @@ export async function decryptData(encryptedData: string): Promise<string> {
     const key = await getEncryptionKey();
 
     // Decode from base64
-    const combined = Uint8Array.from(atob(encryptedData), c => c.charCodeAt(0));
+    const combined = Uint8Array.from(atob(encryptedData), (c) => c.charCodeAt(0));
 
     // Extract IV and encrypted data
     const iv = combined.slice(0, 12);
     const data = combined.slice(12);
 
-    const decryptedData = await crypto.subtle.decrypt(
-      { name: 'AES-GCM', iv },
-      key,
-      data
-    );
+    const decryptedData = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, data);
 
     const decoder = new TextDecoder();
     return decoder.decode(decryptedData);
diff --git a/frontend/src/lib/auth/index.ts b/frontend/src/lib/auth/index.ts
index 29ef3e5..74e6016 100755
--- a/frontend/src/lib/auth/index.ts
+++ b/frontend/src/lib/auth/index.ts
@@ -1,11 +1,7 @@
 // Authentication utilities
 // Examples: Token management, auth helpers, session utilities, etc.
 
-export {
-  encryptData,
-  decryptData,
-  clearEncryptionKey,
-} from './crypto';
+export { encryptData, decryptData, clearEncryptionKey } from './crypto';
 
 export {
   saveTokens,
diff --git a/frontend/src/lib/auth/storage.ts b/frontend/src/lib/auth/storage.ts
index 96b2900..2870485 100644
--- a/frontend/src/lib/auth/storage.ts
+++ b/frontend/src/lib/auth/storage.ts
@@ -25,7 +25,10 @@ export type StorageMethod = 'cookie' | 'localStorage';
  * This flag is set by E2E tests to skip encryption for easier testing
  */
 function isE2ETestMode(): boolean {
-  return typeof window !== 'undefined' && (window as { __PLAYWRIGHT_TEST__?: boolean }).__PLAYWRIGHT_TEST__ === true;
+  return (
+    typeof window !== 'undefined' &&
+    (window as { __PLAYWRIGHT_TEST__?: boolean }).__PLAYWRIGHT_TEST__ === true
+  );
 }
 
 /**
@@ -162,10 +165,14 @@ export async function getTokens(): Promise<TokenStorage | null> {
       const parsed = JSON.parse(stored);
 
       // Validate structure - must have required fields
-      if (!parsed || typeof parsed !== 'object' ||
-          !('accessToken' in parsed) || !('refreshToken' in parsed) ||
-          (parsed.accessToken !== null && typeof parsed.accessToken !== 'string') ||
-          (parsed.refreshToken !== null && typeof parsed.refreshToken !== 'string')) {
+      if (
+        !parsed ||
+        typeof parsed !== 'object' ||
+        !('accessToken' in parsed) ||
+        !('refreshToken' in parsed) ||
+        (parsed.accessToken !== null && typeof parsed.accessToken !== 'string') ||
+        (parsed.refreshToken !== null && typeof parsed.refreshToken !== 'string')
+      ) {
         throw new Error('Invalid token structure');
       }
 
@@ -177,10 +184,14 @@ export async function getTokens(): Promise<TokenStorage | null> {
     const parsed = JSON.parse(decrypted);
 
     // Validate structure - must have required fields
-    if (!parsed || typeof parsed !== 'object' ||
-        !('accessToken' in parsed) || !('refreshToken' in parsed) ||
-        (parsed.accessToken !== null && typeof parsed.accessToken !== 'string') ||
-        (parsed.refreshToken !== null && typeof parsed.refreshToken !== 'string')) {
+    if (
+      !parsed ||
+      typeof parsed !== 'object' ||
+      !('accessToken' in parsed) ||
+      !('refreshToken' in parsed) ||
+      (parsed.accessToken !== null && typeof parsed.accessToken !== 'string') ||
+      (parsed.refreshToken !== null && typeof parsed.refreshToken !== 'string')
+    ) {
       /* istanbul ignore next - Validation error path */
       throw new Error('Invalid token structure');
     }
diff --git a/frontend/src/lib/chart-colors.ts b/frontend/src/lib/chart-colors.ts
index 4ab35d2..e8ef43c 100644
--- a/frontend/src/lib/chart-colors.ts
+++ b/frontend/src/lib/chart-colors.ts
@@ -6,26 +6,26 @@
 
 export const CHART_COLORS = {
   // Primary blue palette - vibrant and professional
-  primary: '#3b82f6',     // Blue 500
+  primary: '#3b82f6', // Blue 500
   primaryLight: '#60a5fa', // Blue 400
-  primaryDark: '#2563eb',  // Blue 600
+  primaryDark: '#2563eb', // Blue 600
 
   // Secondary accent colors - complementary palette
-  accent1: '#8b5cf6',     // Violet 500
-  accent2: '#ec4899',     // Pink 500
-  accent3: '#f59e0b',     // Amber 500
-  accent4: '#10b981',     // Emerald 500
-  accent5: '#06b6d4',     // Cyan 500
+  accent1: '#8b5cf6', // Violet 500
+  accent2: '#ec4899', // Pink 500
+  accent3: '#f59e0b', // Amber 500
+  accent4: '#10b981', // Emerald 500
+  accent5: '#06b6d4', // Cyan 500
 
   // Status colors
-  success: '#10b981',     // Emerald 500
-  warning: '#f59e0b',     // Amber 500
-  error: '#ef4444',       // Red 500
-  info: '#3b82f6',        // Blue 500
+  success: '#10b981', // Emerald 500
+  warning: '#f59e0b', // Amber 500
+  error: '#ef4444', // Red 500
+  info: '#3b82f6', // Blue 500
 
   // Neutral colors for supporting elements
-  muted: '#94a3b8',       // Slate 400
-  mutedDark: '#64748b',   // Slate 500
+  muted: '#94a3b8', // Slate 400
+  mutedDark: '#64748b', // Slate 500
 };
 
 // Chart-specific color palettes for different chart types
@@ -40,12 +40,7 @@ export const CHART_PALETTES = {
   area: [CHART_COLORS.primary, CHART_COLORS.accent5],
 
   // Pie chart palette - 4-5 distinct colors
-  pie: [
-    CHART_COLORS.primary,
-    CHART_COLORS.accent1,
-    CHART_COLORS.accent3,
-    CHART_COLORS.accent4,
-  ],
+  pie: [CHART_COLORS.primary, CHART_COLORS.accent1, CHART_COLORS.accent3, CHART_COLORS.accent4],
 
   // Multi-series palette - for charts with many data series
   multi: [
@@ -73,6 +68,8 @@ export const CHART_GRADIENTS = {
 // Helper function to get color with opacity
 export function withOpacity(color: string, opacity: number): string {
   // Convert opacity (0-1) to hex (00-FF)
-  const hex = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  const hex = Math.round(opacity * 255)
+    .toString(16)
+    .padStart(2, '0');
   return `${color}${hex}`;
 }
diff --git a/frontend/src/lib/stores/authStore.ts b/frontend/src/lib/stores/authStore.ts
index 503c828..7f9579c 100644
--- a/frontend/src/lib/stores/authStore.ts
+++ b/frontend/src/lib/stores/authStore.ts
@@ -32,7 +32,12 @@ interface AuthState {
   tokenExpiresAt: number | null; // Unix timestamp
 
   // Actions
-  setAuth: (user: User, accessToken: string, refreshToken: string, expiresIn?: number) => Promise<void>;
+  setAuth: (
+    user: User,
+    accessToken: string,
+    refreshToken: string,
+    expiresIn?: number
+  ) => Promise<void>;
   setTokens: (accessToken: string, refreshToken: string, expiresIn?: number) => Promise<void>;
   setUser: (user: User) => void;
   clearAuth: () => Promise<void>;
@@ -61,7 +66,8 @@ function calculateExpiry(expiresIn?: number): number {
   let seconds = expiresIn || 900;
 
   // Validate positive number and prevent overflow
-  if (seconds <= 0 || seconds > 31536000) { // Max 1 year
+  if (seconds <= 0 || seconds > 31536000) {
+    // Max 1 year
     console.warn(`Invalid expiresIn value: ${expiresIn}, using default 900s`);
     seconds = 900;
   }
@@ -81,9 +87,15 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   // Set complete auth state (user + tokens)
   setAuth: async (user, accessToken, refreshToken, expiresIn) => {
     // Validate inputs
-    if (!user || !user.id || !user.email ||
-        typeof user.id !== 'string' || typeof user.email !== 'string' ||
-        user.id.trim() === '' || user.email.trim() === '') {
+    if (
+      !user ||
+      !user.id ||
+      !user.email ||
+      typeof user.id !== 'string' ||
+      typeof user.email !== 'string' ||
+      user.id.trim() === '' ||
+      user.email.trim() === ''
+    ) {
       throw new Error('Invalid user object: id and email must be non-empty strings');
     }
 
@@ -132,9 +144,15 @@ export const useAuthStore = create<AuthState>((set, get) => ({
 
   // Update user only
   setUser: (user) => {
-    if (!user || !user.id || !user.email ||
-        typeof user.id !== 'string' || typeof user.email !== 'string' ||
-        user.id.trim() === '' || user.email.trim() === '') {
+    if (
+      !user ||
+      !user.id ||
+      !user.email ||
+      typeof user.id !== 'string' ||
+      typeof user.email !== 'string' ||
+      user.id.trim() === '' ||
+      user.email.trim() === ''
+    ) {
       throw new Error('Invalid user object: id and email must be non-empty strings');
     }
 
diff --git a/frontend/src/types/api.d.ts b/frontend/src/types/api.d.ts
index 2edc906..5704906 100755
--- a/frontend/src/types/api.d.ts
+++ b/frontend/src/types/api.d.ts
@@ -1,7 +1,7 @@
 declare namespace API {
-    interface ErrorResponse {
-        detail: string;
-    }
+  interface ErrorResponse {
+    detail: string;
+  }
 
-    // Add more types as you develop your API
-}
\ No newline at end of file
+  // Add more types as you develop your API
+}
diff --git a/frontend/tests/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.test.tsx b/frontend/tests/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.test.tsx
index 8d72fc5..8000971 100644
--- a/frontend/tests/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.test.tsx
+++ b/frontend/tests/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.test.tsx
@@ -38,9 +38,7 @@ jest.mock('next/dynamic', () => ({
 
 // Mock Alert component
 jest.mock('@/components/ui/alert', () => ({
-  Alert: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="alert">{children}</div>
-  ),
+  Alert: ({ children }: { children: React.ReactNode }) => <div data-testid="alert">{children}</div>,
 }));
 
 describe('PasswordResetConfirmContent', () => {
@@ -144,7 +142,9 @@ describe('PasswordResetConfirmContent', () => {
     it('shows error message', () => {
       render(<PasswordResetConfirmContent />);
 
-      expect(screen.getByText(/this password reset link is invalid or has expired/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/this password reset link is invalid or has expired/i)
+      ).toBeInTheDocument();
     });
 
     it('shows link to request new reset', () => {
diff --git a/frontend/tests/app/(auth)/password-reset/page.test.tsx b/frontend/tests/app/(auth)/password-reset/page.test.tsx
index c26d3af..989b6ef 100644
--- a/frontend/tests/app/(auth)/password-reset/page.test.tsx
+++ b/frontend/tests/app/(auth)/password-reset/page.test.tsx
@@ -10,7 +10,9 @@ import PasswordResetPage from '@/app/(auth)/password-reset/page';
 jest.mock('next/dynamic', () => ({
   __esModule: true,
   default: (_importFn: () => Promise<any>, _options?: any) => {
-    const Component = () => <div data-testid="password-reset-form">Mocked PasswordResetRequestForm</div>;
+    const Component = () => (
+      <div data-testid="password-reset-form">Mocked PasswordResetRequestForm</div>
+    );
     Component.displayName = 'PasswordResetRequestForm';
     return Component;
   },
diff --git a/frontend/tests/app/(authenticated)/settings/password/page.test.tsx b/frontend/tests/app/(authenticated)/settings/password/page.test.tsx
index 6e081ed..b19d0d5 100644
--- a/frontend/tests/app/(authenticated)/settings/password/page.test.tsx
+++ b/frontend/tests/app/(authenticated)/settings/password/page.test.tsx
@@ -16,11 +16,7 @@ describe('PasswordSettingsPage', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   it('renders without crashing', () => {
diff --git a/frontend/tests/app/(authenticated)/settings/preferences/page.test.tsx b/frontend/tests/app/(authenticated)/settings/preferences/page.test.tsx
index e70c7af..8ca2f24 100644
--- a/frontend/tests/app/(authenticated)/settings/preferences/page.test.tsx
+++ b/frontend/tests/app/(authenticated)/settings/preferences/page.test.tsx
@@ -16,9 +16,7 @@ describe('PreferencesPage', () => {
   it('renders placeholder message', () => {
     render(<PreferencesPage />);
 
-    expect(
-      screen.getByText(/Configure your preferences/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Configure your preferences/)).toBeInTheDocument();
   });
 
   it('mentions Task 3.5', () => {
diff --git a/frontend/tests/app/(authenticated)/settings/profile/page.test.tsx b/frontend/tests/app/(authenticated)/settings/profile/page.test.tsx
index 81e3171..495b964 100644
--- a/frontend/tests/app/(authenticated)/settings/profile/page.test.tsx
+++ b/frontend/tests/app/(authenticated)/settings/profile/page.test.tsx
@@ -84,9 +84,7 @@ describe('ProfileSettingsPage', () => {
   const renderWithProvider = (component: React.ReactElement) => {
     return render(
       <QueryClientProvider client={queryClient}>
-        <AuthProvider store={mockStoreHook}>
-          {component}
-        </AuthProvider>
+        <AuthProvider store={mockStoreHook}>{component}</AuthProvider>
       </QueryClientProvider>
     );
   };
diff --git a/frontend/tests/app/(authenticated)/settings/sessions/page.test.tsx b/frontend/tests/app/(authenticated)/settings/sessions/page.test.tsx
index 4ae74aa..e2d50fc 100644
--- a/frontend/tests/app/(authenticated)/settings/sessions/page.test.tsx
+++ b/frontend/tests/app/(authenticated)/settings/sessions/page.test.tsx
@@ -29,11 +29,7 @@ describe('SessionsPage', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   it('renders without crashing', () => {
diff --git a/frontend/tests/app/admin/layout.test.tsx b/frontend/tests/app/admin/layout.test.tsx
index 603a1fc..6e53f5f 100644
--- a/frontend/tests/app/admin/layout.test.tsx
+++ b/frontend/tests/app/admin/layout.test.tsx
@@ -50,9 +50,7 @@ describe('AdminLayout', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 
   it('renders layout with all components for superuser', () => {
diff --git a/frontend/tests/app/admin/organizations/[id]/members/page.test.tsx b/frontend/tests/app/admin/organizations/[id]/members/page.test.tsx
index 0ef5887..2538d0f 100644
--- a/frontend/tests/app/admin/organizations/[id]/members/page.test.tsx
+++ b/frontend/tests/app/admin/organizations/[id]/members/page.test.tsx
@@ -20,9 +20,7 @@ jest.mock('next/link', () => ({
 // Mock OrganizationMembersContent component
 jest.mock('@/components/admin/organizations/OrganizationMembersContent', () => ({
   OrganizationMembersContent: ({ organizationId }: { organizationId: string }) => (
-    <div data-testid="organization-members-content">
-      Organization ID: {organizationId}
-    </div>
+    <div data-testid="organization-members-content">Organization ID: {organizationId}</div>
   ),
 }));
 
diff --git a/frontend/tests/app/admin/organizations/page.test.tsx b/frontend/tests/app/admin/organizations/page.test.tsx
index 2ba0060..c34f1c0 100644
--- a/frontend/tests/app/admin/organizations/page.test.tsx
+++ b/frontend/tests/app/admin/organizations/page.test.tsx
@@ -8,7 +8,9 @@ import AdminOrganizationsPage from '@/app/admin/organizations/page';
 
 // Mock the entire OrganizationManagementContent component
 jest.mock('@/components/admin/organizations/OrganizationManagementContent', () => ({
-  OrganizationManagementContent: () => <div data-testid="organization-management">Organization Management</div>,
+  OrganizationManagementContent: () => (
+    <div data-testid="organization-management">Organization Management</div>
+  ),
 }));
 
 describe('AdminOrganizationsPage', () => {
diff --git a/frontend/tests/app/admin/page.test.tsx b/frontend/tests/app/admin/page.test.tsx
index 22c12dd..5a4f25c 100644
--- a/frontend/tests/app/admin/page.test.tsx
+++ b/frontend/tests/app/admin/page.test.tsx
@@ -13,8 +13,12 @@ jest.mock('@/lib/api/hooks/useAdmin');
 // Mock chart components
 jest.mock('@/components/charts', () => ({
   UserGrowthChart: () => <div data-testid="user-growth-chart">User Growth Chart</div>,
-  OrganizationDistributionChart: () => <div data-testid="org-distribution-chart">Org Distribution Chart</div>,
-  SessionActivityChart: () => <div data-testid="session-activity-chart">Session Activity Chart</div>,
+  OrganizationDistributionChart: () => (
+    <div data-testid="org-distribution-chart">Org Distribution Chart</div>
+  ),
+  SessionActivityChart: () => (
+    <div data-testid="session-activity-chart">Session Activity Chart</div>
+  ),
   UserStatusChart: () => <div data-testid="user-status-chart">User Status Chart</div>,
 }));
 
@@ -66,27 +70,21 @@ describe('AdminPage', () => {
     renderWithMockedStats();
 
     expect(screen.getByText('User Management')).toBeInTheDocument();
-    expect(
-      screen.getByText('View, create, and manage user accounts')
-    ).toBeInTheDocument();
+    expect(screen.getByText('View, create, and manage user accounts')).toBeInTheDocument();
   });
 
   it('renders organizations card', () => {
     renderWithMockedStats();
 
     // Check for the quick actions card (not the stat card)
-    expect(
-      screen.getByText('Manage organizations and their members')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Manage organizations and their members')).toBeInTheDocument();
   });
 
   it('renders system settings card', () => {
     renderWithMockedStats();
 
     expect(screen.getByText('System Settings')).toBeInTheDocument();
-    expect(
-      screen.getByText('Configure system-wide settings')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Configure system-wide settings')).toBeInTheDocument();
   });
 
   it('renders quick actions in grid layout', () => {
diff --git a/frontend/tests/app/admin/settings/page.test.tsx b/frontend/tests/app/admin/settings/page.test.tsx
index 74f6f83..481e1d8 100644
--- a/frontend/tests/app/admin/settings/page.test.tsx
+++ b/frontend/tests/app/admin/settings/page.test.tsx
@@ -16,9 +16,7 @@ describe('AdminSettingsPage', () => {
   it('renders page description', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText('Configure system-wide settings and preferences')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Configure system-wide settings and preferences')).toBeInTheDocument();
   });
 
   it('renders back button link', () => {
@@ -31,29 +29,17 @@ describe('AdminSettingsPage', () => {
   it('renders coming soon message', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText('System Settings Coming Soon')
-    ).toBeInTheDocument();
+    expect(screen.getByText('System Settings Coming Soon')).toBeInTheDocument();
   });
 
   it('renders feature list', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText(/General system configuration/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Email and notification settings/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Security and authentication options/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/API and integration settings/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Maintenance and backup tools/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/General system configuration/)).toBeInTheDocument();
+    expect(screen.getByText(/Email and notification settings/)).toBeInTheDocument();
+    expect(screen.getByText(/Security and authentication options/)).toBeInTheDocument();
+    expect(screen.getByText(/API and integration settings/)).toBeInTheDocument();
+    expect(screen.getByText(/Maintenance and backup tools/)).toBeInTheDocument();
   });
 
   it('renders with proper container structure', () => {
diff --git a/frontend/tests/app/admin/users/page.test.tsx b/frontend/tests/app/admin/users/page.test.tsx
index d6e0d53..881653c 100644
--- a/frontend/tests/app/admin/users/page.test.tsx
+++ b/frontend/tests/app/admin/users/page.test.tsx
@@ -145,11 +145,7 @@ describe('AdminUsersPage', () => {
   });
 
   const renderWithProviders = (ui: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {ui}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
   };
 
   it('renders page title', () => {
@@ -161,9 +157,7 @@ describe('AdminUsersPage', () => {
   it('renders page description', () => {
     renderWithProviders(<AdminUsersPage />);
 
-    expect(
-      screen.getByText('View, create, and manage user accounts')
-    ).toBeInTheDocument();
+    expect(screen.getByText('View, create, and manage user accounts')).toBeInTheDocument();
   });
 
   it('renders back button link', () => {
@@ -184,9 +178,7 @@ describe('AdminUsersPage', () => {
   it('renders "Manage user accounts and permissions" description', () => {
     renderWithProviders(<AdminUsersPage />);
 
-    expect(
-      screen.getByText('Manage user accounts and permissions')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Manage user accounts and permissions')).toBeInTheDocument();
   });
 
   it('renders create user button', () => {
diff --git a/frontend/tests/app/forbidden/page.test.tsx b/frontend/tests/app/forbidden/page.test.tsx
index 8c8e4e9..dc440b7 100644
--- a/frontend/tests/app/forbidden/page.test.tsx
+++ b/frontend/tests/app/forbidden/page.test.tsx
@@ -10,9 +10,7 @@ describe('ForbiddenPage', () => {
   it('renders page heading', () => {
     render(<ForbiddenPage />);
 
-    expect(
-      screen.getByRole('heading', { name: /403 - Access Forbidden/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /403 - Access Forbidden/i })).toBeInTheDocument();
   });
 
   it('renders permission denied message', () => {
@@ -26,9 +24,7 @@ describe('ForbiddenPage', () => {
   it('renders admin privileges message', () => {
     render(<ForbiddenPage />);
 
-    expect(
-      screen.getByText(/This page requires administrator privileges/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/This page requires administrator privileges/)).toBeInTheDocument();
   });
 
   it('renders link to dashboard', () => {
diff --git a/frontend/tests/app/page.test.tsx b/frontend/tests/app/page.test.tsx
index 82624e3..d79dffa 100644
--- a/frontend/tests/app/page.test.tsx
+++ b/frontend/tests/app/page.test.tsx
@@ -126,9 +126,18 @@ describe('HomePage', () => {
 
     it('has CTAs for each feature', () => {
       render(<Home />);
-      expect(screen.getByRole('link', { name: /View Auth Flow/i })).toHaveAttribute('href', '/login');
-      expect(screen.getByRole('link', { name: /See Organizations/i })).toHaveAttribute('href', '/admin/organizations');
-      expect(screen.getByRole('link', { name: /Try Admin Panel/i })).toHaveAttribute('href', '/admin');
+      expect(screen.getByRole('link', { name: /View Auth Flow/i })).toHaveAttribute(
+        'href',
+        '/login'
+      );
+      expect(screen.getByRole('link', { name: /See Organizations/i })).toHaveAttribute(
+        'href',
+        '/admin/organizations'
+      );
+      expect(screen.getByRole('link', { name: /Try Admin Panel/i })).toHaveAttribute(
+        'href',
+        '/admin'
+      );
     });
   });
 
@@ -218,19 +227,19 @@ describe('HomePage', () => {
     it('has login link', () => {
       render(<Home />);
       const loginLinks = screen.getAllByRole('link', { name: /Login/i });
-      expect(loginLinks.some(link => link.getAttribute('href') === '/login')).toBe(true);
+      expect(loginLinks.some((link) => link.getAttribute('href') === '/login')).toBe(true);
     });
 
     it('has component showcase link', () => {
       render(<Home />);
       const devLinks = screen.getAllByRole('link', { name: /Component/i });
-      expect(devLinks.some(link => link.getAttribute('href') === '/dev')).toBe(true);
+      expect(devLinks.some((link) => link.getAttribute('href') === '/dev')).toBe(true);
     });
 
     it('has admin demo link', () => {
       render(<Home />);
       const adminLinks = screen.getAllByRole('link', { name: /Admin/i });
-      expect(adminLinks.some(link => link.getAttribute('href') === '/admin')).toBe(true);
+      expect(adminLinks.some((link) => link.getAttribute('href') === '/admin')).toBe(true);
     });
   });
 
@@ -245,7 +254,7 @@ describe('HomePage', () => {
     it('has external links with proper attributes', () => {
       render(<Home />);
       const githubLinks = screen.getAllByRole('link', { name: /GitHub/i });
-      const externalLink = githubLinks.find(link =>
+      const externalLink = githubLinks.find((link) =>
         link.getAttribute('href')?.includes('github.com')
       );
       expect(externalLink).toHaveAttribute('target', '_blank');
diff --git a/frontend/tests/components/admin/AdminSidebar.test.tsx b/frontend/tests/components/admin/AdminSidebar.test.tsx
index 3a1f582..951bed3 100644
--- a/frontend/tests/components/admin/AdminSidebar.test.tsx
+++ b/frontend/tests/components/admin/AdminSidebar.test.tsx
@@ -70,7 +70,10 @@ describe('AdminSidebar', () => {
 
       expect(screen.getByTestId('nav-dashboard')).toHaveAttribute('href', '/admin');
       expect(screen.getByTestId('nav-users')).toHaveAttribute('href', '/admin/users');
-      expect(screen.getByTestId('nav-organizations')).toHaveAttribute('href', '/admin/organizations');
+      expect(screen.getByTestId('nav-organizations')).toHaveAttribute(
+        'href',
+        '/admin/organizations'
+      );
       expect(screen.getByTestId('nav-settings')).toHaveAttribute('href', '/admin/settings');
     });
 
diff --git a/frontend/tests/components/admin/StatCard.test.tsx b/frontend/tests/components/admin/StatCard.test.tsx
index 8756c02..09ee004 100644
--- a/frontend/tests/components/admin/StatCard.test.tsx
+++ b/frontend/tests/components/admin/StatCard.test.tsx
@@ -48,13 +48,9 @@ describe('StatCard', () => {
     });
 
     it('renders description when provided', () => {
-      render(
-        <StatCard {...defaultProps} description="Total registered users" />
-      );
+      render(<StatCard {...defaultProps} description="Total registered users" />);
 
-      expect(screen.getByTestId('stat-description')).toHaveTextContent(
-        'Total registered users'
-      );
+      expect(screen.getByTestId('stat-description')).toHaveTextContent('Total registered users');
     });
 
     it('does not render description when not provided', () => {
@@ -85,13 +81,7 @@ describe('StatCard', () => {
     });
 
     it('hides description when loading', () => {
-      render(
-        <StatCard
-          {...defaultProps}
-          description="Test description"
-          loading
-        />
-      );
+      render(<StatCard {...defaultProps} description="Test description" loading />);
 
       expect(screen.queryByTestId('stat-description')).not.toBeInTheDocument();
     });
@@ -179,27 +169,21 @@ describe('StatCard', () => {
     });
 
     it('renders Activity icon', () => {
-      const { container } = render(
-        <StatCard {...defaultProps} icon={Activity} />
-      );
+      const { container } = render(<StatCard {...defaultProps} icon={Activity} />);
 
       const svg = container.querySelector('svg');
       expect(svg).toBeInTheDocument();
     });
 
     it('renders Building2 icon', () => {
-      const { container } = render(
-        <StatCard {...defaultProps} icon={Building2} />
-      );
+      const { container } = render(<StatCard {...defaultProps} icon={Building2} />);
 
       const svg = container.querySelector('svg');
       expect(svg).toBeInTheDocument();
     });
 
     it('renders FileText icon', () => {
-      const { container } = render(
-        <StatCard {...defaultProps} icon={FileText} />
-      );
+      const { container } = render(<StatCard {...defaultProps} icon={FileText} />);
 
       const svg = container.querySelector('svg');
       expect(svg).toBeInTheDocument();
@@ -262,9 +246,7 @@ describe('StatCard', () => {
 
       expect(screen.getByTestId('stat-title')).toHaveTextContent('Active Users');
       expect(screen.getByTestId('stat-value')).toHaveTextContent('856');
-      expect(screen.getByTestId('stat-description')).toHaveTextContent(
-        'Currently online'
-      );
+      expect(screen.getByTestId('stat-description')).toHaveTextContent('Currently online');
       expect(screen.getByTestId('stat-trend')).toHaveTextContent('↑');
       expect(screen.getByTestId('stat-card')).toHaveClass('custom-stat');
     });
@@ -313,9 +295,7 @@ describe('StatCard', () => {
     });
 
     it('renders description with appropriate text size', () => {
-      render(
-        <StatCard {...defaultProps} description="Test description" />
-      );
+      render(<StatCard {...defaultProps} description="Test description" />);
 
       const description = screen.getByTestId('stat-description');
       expect(description).toHaveClass('text-xs');
diff --git a/frontend/tests/components/admin/organizations/AddMemberDialog.test.tsx b/frontend/tests/components/admin/organizations/AddMemberDialog.test.tsx
index aba5e42..f2a2efa 100644
--- a/frontend/tests/components/admin/organizations/AddMemberDialog.test.tsx
+++ b/frontend/tests/components/admin/organizations/AddMemberDialog.test.tsx
@@ -51,13 +51,17 @@ describe('AddMemberDialog', () => {
     render(<AddMemberDialog {...defaultProps} />);
 
     expect(screen.getByRole('heading', { name: 'Add Member' })).toBeInTheDocument();
-    expect(screen.getByText('Add a user to this organization and assign them a role.')).toBeInTheDocument();
+    expect(
+      screen.getByText('Add a user to this organization and assign them a role.')
+    ).toBeInTheDocument();
   });
 
   it('does not render when closed', () => {
     render(<AddMemberDialog {...defaultProps} open={false} />);
 
-    expect(screen.queryByText('Add a user to this organization and assign them a role.')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Add a user to this organization and assign them a role.')
+    ).not.toBeInTheDocument();
   });
 
   it('renders user email select field', () => {
diff --git a/frontend/tests/components/admin/organizations/MemberActionMenu.test.tsx b/frontend/tests/components/admin/organizations/MemberActionMenu.test.tsx
index 6929c52..f7a7a41 100644
--- a/frontend/tests/components/admin/organizations/MemberActionMenu.test.tsx
+++ b/frontend/tests/components/admin/organizations/MemberActionMenu.test.tsx
@@ -87,7 +87,9 @@ describe('MemberActionMenu', () => {
     await user.click(removeOption);
 
     await waitFor(() => {
-      expect(screen.getByText(/Are you sure you want to remove.*John Doe.*from this organization/)).toBeVisible();
+      expect(
+        screen.getByText(/Are you sure you want to remove.*John Doe.*from this organization/)
+      ).toBeVisible();
     });
   });
 
diff --git a/frontend/tests/components/admin/organizations/OrganizationActionMenu.test.tsx b/frontend/tests/components/admin/organizations/OrganizationActionMenu.test.tsx
index 8852de4..23b7754 100644
--- a/frontend/tests/components/admin/organizations/OrganizationActionMenu.test.tsx
+++ b/frontend/tests/components/admin/organizations/OrganizationActionMenu.test.tsx
@@ -6,10 +6,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OrganizationActionMenu } from '@/components/admin/organizations/OrganizationActionMenu';
-import {
-  useDeleteOrganization,
-  type Organization,
-} from '@/lib/api/hooks/useAdmin';
+import { useDeleteOrganization, type Organization } from '@/lib/api/hooks/useAdmin';
 import { toast } from 'sonner';
 
 // Mock dependencies
@@ -307,9 +304,7 @@ describe('OrganizationActionMenu', () => {
       await user.click(cancelButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByText(/Are you sure you want to delete/)
-        ).not.toBeInTheDocument();
+        expect(screen.queryByText(/Are you sure you want to delete/)).not.toBeInTheDocument();
       });
     });
 
@@ -421,9 +416,7 @@ describe('OrganizationActionMenu', () => {
       await user.click(confirmButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByText(/Are you sure you want to delete/)
-        ).not.toBeInTheDocument();
+        expect(screen.queryByText(/Are you sure you want to delete/)).not.toBeInTheDocument();
       });
     });
   });
diff --git a/frontend/tests/components/admin/organizations/OrganizationFormDialog.test.tsx b/frontend/tests/components/admin/organizations/OrganizationFormDialog.test.tsx
index a31c0e1..da1d1e8 100644
--- a/frontend/tests/components/admin/organizations/OrganizationFormDialog.test.tsx
+++ b/frontend/tests/components/admin/organizations/OrganizationFormDialog.test.tsx
@@ -6,7 +6,11 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OrganizationFormDialog } from '@/components/admin/organizations/OrganizationFormDialog';
-import { useCreateOrganization, useUpdateOrganization, type Organization } from '@/lib/api/hooks/useAdmin';
+import {
+  useCreateOrganization,
+  useUpdateOrganization,
+  type Organization,
+} from '@/lib/api/hooks/useAdmin';
 
 // Mock ResizeObserver (needed for Textarea component)
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
@@ -28,8 +32,12 @@ jest.mock('sonner', () => ({
   },
 }));
 
-const mockUseCreateOrganization = useCreateOrganization as jest.MockedFunction<typeof useCreateOrganization>;
-const mockUseUpdateOrganization = useUpdateOrganization as jest.MockedFunction<typeof useUpdateOrganization>;
+const mockUseCreateOrganization = useCreateOrganization as jest.MockedFunction<
+  typeof useCreateOrganization
+>;
+const mockUseUpdateOrganization = useUpdateOrganization as jest.MockedFunction<
+  typeof useUpdateOrganization
+>;
 
 describe('OrganizationFormDialog', () => {
   const mockCreateMutate = jest.fn();
@@ -97,7 +105,9 @@ describe('OrganizationFormDialog', () => {
       render(<OrganizationFormDialog {...createProps} />);
 
       expect(screen.getByText('Description')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('A brief description of the organization...')).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText('A brief description of the organization...')
+      ).toBeInTheDocument();
     });
 
     it('does not render active checkbox in create mode', () => {
@@ -182,7 +192,14 @@ describe('OrganizationFormDialog', () => {
         isPending: true,
       } as any);
 
-      render(<OrganizationFormDialog open={true} onOpenChange={mockOnOpenChange} mode="edit" organization={mockOrganization} />);
+      render(
+        <OrganizationFormDialog
+          open={true}
+          onOpenChange={mockOnOpenChange}
+          mode="edit"
+          organization={mockOrganization}
+        />
+      );
 
       expect(screen.getByRole('button', { name: 'Saving...' })).toBeInTheDocument();
     });
diff --git a/frontend/tests/components/admin/organizations/OrganizationListTable.test.tsx b/frontend/tests/components/admin/organizations/OrganizationListTable.test.tsx
index 213b836..8736b3d 100644
--- a/frontend/tests/components/admin/organizations/OrganizationListTable.test.tsx
+++ b/frontend/tests/components/admin/organizations/OrganizationListTable.test.tsx
@@ -11,9 +11,7 @@ import type { Organization, PaginationMeta } from '@/lib/api/hooks/useAdmin';
 // Mock OrganizationActionMenu component
 jest.mock('@/components/admin/organizations/OrganizationActionMenu', () => ({
   OrganizationActionMenu: ({ organization }: any) => (
-    <button data-testid={`action-menu-${organization.id}`}>
-      Actions
-    </button>
+    <button data-testid={`action-menu-${organization.id}`}>Actions</button>
   ),
 }));
 
@@ -141,9 +139,7 @@ describe('OrganizationListTable', () => {
         />
       );
 
-      expect(
-        screen.getByText('No organizations found.')
-      ).toBeInTheDocument();
+      expect(screen.getByText('No organizations found.')).toBeInTheDocument();
     });
 
     it('does not render pagination when empty', () => {
@@ -177,12 +173,7 @@ describe('OrganizationListTable', () => {
 
     it('does not call onViewMembers when handler is undefined', async () => {
       const user = userEvent.setup();
-      render(
-        <OrganizationListTable
-          {...defaultProps}
-          onViewMembers={undefined}
-        />
-      );
+      render(<OrganizationListTable {...defaultProps} onViewMembers={undefined} />);
 
       const memberButton = screen.getByText('15').closest('button');
       expect(memberButton).not.toBeNull();
@@ -198,9 +189,7 @@ describe('OrganizationListTable', () => {
     it('renders pagination info correctly', () => {
       render(<OrganizationListTable {...defaultProps} />);
 
-      expect(
-        screen.getByText('Showing 1 to 2 of 2 organizations')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Showing 1 to 2 of 2 organizations')).toBeInTheDocument();
     });
 
     it('calculates pagination range correctly for page 2', () => {
@@ -218,9 +207,7 @@ describe('OrganizationListTable', () => {
         />
       );
 
-      expect(
-        screen.getByText('Showing 21 to 40 of 50 organizations')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Showing 21 to 40 of 50 organizations')).toBeInTheDocument();
     });
 
     it('renders pagination buttons', () => {
diff --git a/frontend/tests/components/admin/organizations/OrganizationManagementContent.test.tsx b/frontend/tests/components/admin/organizations/OrganizationManagementContent.test.tsx
index 925aa5b..2831558 100644
--- a/frontend/tests/components/admin/organizations/OrganizationManagementContent.test.tsx
+++ b/frontend/tests/components/admin/organizations/OrganizationManagementContent.test.tsx
@@ -53,9 +53,7 @@ jest.mock('@/components/admin/organizations/OrganizationFormDialog', () => ({
 }));
 
 const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
-const mockUseSearchParams = useSearchParams as jest.MockedFunction<
-  typeof useSearchParams
->;
+const mockUseSearchParams = useSearchParams as jest.MockedFunction<typeof useSearchParams>;
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
 const mockUseAdminOrganizations = useAdminOrganizations as jest.MockedFunction<
   typeof useAdminOrganizations
@@ -168,9 +166,7 @@ describe('OrganizationManagementContent', () => {
   });
 
   const renderWithProviders = (ui: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
   };
 
   describe('Component Rendering', () => {
@@ -178,17 +174,13 @@ describe('OrganizationManagementContent', () => {
       renderWithProviders(<OrganizationManagementContent />);
 
       expect(screen.getByText('All Organizations')).toBeInTheDocument();
-      expect(
-        screen.getByText('Manage organizations and their members')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Manage organizations and their members')).toBeInTheDocument();
     });
 
     it('renders create organization button', () => {
       renderWithProviders(<OrganizationManagementContent />);
 
-      expect(
-        screen.getByRole('button', { name: /Create Organization/i })
-      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Create Organization/i })).toBeInTheDocument();
     });
 
     it('renders OrganizationListTable component', () => {
@@ -200,9 +192,7 @@ describe('OrganizationManagementContent', () => {
     it('does not render dialog initially', () => {
       renderWithProviders(<OrganizationManagementContent />);
 
-      expect(
-        screen.queryByTestId('organization-form-dialog')
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
     });
   });
 
@@ -233,9 +223,7 @@ describe('OrganizationManagementContent', () => {
       await user.click(closeButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('organization-form-dialog')
-        ).not.toBeInTheDocument();
+        expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
       });
     });
   });
@@ -264,9 +252,7 @@ describe('OrganizationManagementContent', () => {
       await user.click(closeButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('organization-form-dialog')
-        ).not.toBeInTheDocument();
+        expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
       });
     });
   });
diff --git a/frontend/tests/components/admin/users/BulkActionToolbar.test.tsx b/frontend/tests/components/admin/users/BulkActionToolbar.test.tsx
index f8add0a..754e407 100644
--- a/frontend/tests/components/admin/users/BulkActionToolbar.test.tsx
+++ b/frontend/tests/components/admin/users/BulkActionToolbar.test.tsx
@@ -21,9 +21,7 @@ jest.mock('sonner', () => ({
   },
 }));
 
-const mockUseBulkUserAction = useBulkUserAction as jest.MockedFunction<
-  typeof useBulkUserAction
->;
+const mockUseBulkUserAction = useBulkUserAction as jest.MockedFunction<typeof useBulkUserAction>;
 
 describe('BulkActionToolbar', () => {
   const mockBulkActionMutate = jest.fn();
@@ -50,9 +48,7 @@ describe('BulkActionToolbar', () => {
         />
       );
 
-      expect(
-        screen.queryByTestId('bulk-action-toolbar')
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('bulk-action-toolbar')).not.toBeInTheDocument();
     });
 
     it('renders when one user is selected', () => {
@@ -163,9 +159,7 @@ describe('BulkActionToolbar', () => {
         />
       );
 
-      expect(
-        screen.getByRole('button', { name: /Activate/ })
-      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Activate/ })).toBeInTheDocument();
     });
 
     it('renders deactivate button', () => {
@@ -177,9 +171,7 @@ describe('BulkActionToolbar', () => {
         />
       );
 
-      expect(
-        screen.getByRole('button', { name: /Deactivate/ })
-      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Deactivate/ })).toBeInTheDocument();
     });
 
     it('renders delete button', () => {
@@ -191,9 +183,7 @@ describe('BulkActionToolbar', () => {
         />
       );
 
-      expect(
-        screen.getByRole('button', { name: /Delete/ })
-      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Delete/ })).toBeInTheDocument();
     });
 
     it('disables buttons when action is pending', () => {
@@ -258,9 +248,7 @@ describe('BulkActionToolbar', () => {
 
       await waitFor(() => {
         expect(screen.getByText('Activate Users')).toBeInTheDocument();
-        expect(
-          screen.getByText(/Are you sure you want to activate 3 users\?/)
-        ).toBeInTheDocument();
+        expect(screen.getByText(/Are you sure you want to activate 3 users\?/)).toBeInTheDocument();
       });
     });
 
@@ -302,9 +290,7 @@ describe('BulkActionToolbar', () => {
 
       await waitFor(() => {
         expect(screen.getByText('Delete Users')).toBeInTheDocument();
-        expect(
-          screen.getByText(/Are you sure you want to delete 5 users\?/)
-        ).toBeInTheDocument();
+        expect(screen.getByText(/Are you sure you want to delete 5 users\?/)).toBeInTheDocument();
       });
     });
 
@@ -322,9 +308,7 @@ describe('BulkActionToolbar', () => {
       await user.click(activateButton);
 
       await waitFor(() => {
-        expect(
-          screen.getByText(/Are you sure you want to activate 1 user\?/)
-        ).toBeInTheDocument();
+        expect(screen.getByText(/Are you sure you want to activate 1 user\?/)).toBeInTheDocument();
       });
     });
   });
@@ -372,9 +356,7 @@ describe('BulkActionToolbar', () => {
         />
       );
 
-      expect(
-        screen.queryByTestId('bulk-action-toolbar')
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('bulk-action-toolbar')).not.toBeInTheDocument();
     });
 
     it('handles large selection counts', () => {
@@ -382,9 +364,7 @@ describe('BulkActionToolbar', () => {
         <BulkActionToolbar
           selectedCount={100}
           onClearSelection={mockOnClearSelection}
-          selectedUserIds={Array.from({ length: 100 }, (_, i) =>
-            String(i + 1)
-          )}
+          selectedUserIds={Array.from({ length: 100 }, (_, i) => String(i + 1))}
         />
       );
 
diff --git a/frontend/tests/components/admin/users/UserActionMenu.test.tsx b/frontend/tests/components/admin/users/UserActionMenu.test.tsx
index ed284c2..23ec9bb 100644
--- a/frontend/tests/components/admin/users/UserActionMenu.test.tsx
+++ b/frontend/tests/components/admin/users/UserActionMenu.test.tsx
@@ -28,12 +28,8 @@ jest.mock('sonner', () => ({
   },
 }));
 
-const mockUseActivateUser = useActivateUser as jest.MockedFunction<
-  typeof useActivateUser
->;
-const mockUseDeactivateUser = useDeactivateUser as jest.MockedFunction<
-  typeof useDeactivateUser
->;
+const mockUseActivateUser = useActivateUser as jest.MockedFunction<typeof useActivateUser>;
+const mockUseDeactivateUser = useDeactivateUser as jest.MockedFunction<typeof useDeactivateUser>;
 const mockUseDeleteUser = useDeleteUser as jest.MockedFunction<typeof useDeleteUser>;
 
 describe('UserActionMenu', () => {
@@ -76,13 +72,7 @@ describe('UserActionMenu', () => {
 
   describe('Menu Rendering', () => {
     it('renders menu trigger button', () => {
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -92,13 +82,7 @@ describe('UserActionMenu', () => {
 
     it('shows menu items when opened', async () => {
       const user = userEvent.setup();
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -110,13 +94,7 @@ describe('UserActionMenu', () => {
 
     it('shows deactivate option for active user', async () => {
       const user = userEvent.setup();
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -131,13 +109,7 @@ describe('UserActionMenu', () => {
       const user = userEvent.setup();
       const inactiveUser = { ...mockUser, is_active: false };
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -150,13 +122,7 @@ describe('UserActionMenu', () => {
 
     it('shows delete option', async () => {
       const user = userEvent.setup();
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -172,13 +138,7 @@ describe('UserActionMenu', () => {
       const user = userEvent.setup();
       const mockOnEdit = jest.fn();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={mockOnEdit}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={mockOnEdit} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -195,13 +155,7 @@ describe('UserActionMenu', () => {
       const user = userEvent.setup();
       const mockOnEdit = jest.fn();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={mockOnEdit}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={mockOnEdit} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -222,13 +176,7 @@ describe('UserActionMenu', () => {
       const user = userEvent.setup();
       const inactiveUser = { ...mockUser, is_active: false };
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -247,13 +195,7 @@ describe('UserActionMenu', () => {
       const user = userEvent.setup();
       const inactiveUser = { ...mockUser, is_active: false };
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -264,9 +206,7 @@ describe('UserActionMenu', () => {
       await user.click(activateButton);
 
       await waitFor(() => {
-        expect(toast.success).toHaveBeenCalledWith(
-          'Test User has been activated successfully.'
-        );
+        expect(toast.success).toHaveBeenCalledWith('Test User has been activated successfully.');
       });
     });
 
@@ -276,13 +216,7 @@ describe('UserActionMenu', () => {
 
       mockActivateMutate.mockRejectedValueOnce(new Error('Network error'));
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -302,13 +236,7 @@ describe('UserActionMenu', () => {
     it('shows confirmation dialog when deactivate is clicked', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -320,22 +248,14 @@ describe('UserActionMenu', () => {
 
       expect(screen.getByText('Deactivate User')).toBeInTheDocument();
       expect(
-        screen.getByText(
-          /Are you sure you want to deactivate Test User\?/
-        )
+        screen.getByText(/Are you sure you want to deactivate Test User\?/)
       ).toBeInTheDocument();
     });
 
     it('shows confirmation dialog when deactivate is clicked', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -357,13 +277,7 @@ describe('UserActionMenu', () => {
     it('disables deactivate option for current user', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={true}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={true} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -380,13 +294,7 @@ describe('UserActionMenu', () => {
     it('shows confirmation dialog when delete is clicked', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -397,24 +305,14 @@ describe('UserActionMenu', () => {
       await user.click(deleteButton);
 
       expect(screen.getByText('Delete User')).toBeInTheDocument();
-      expect(
-        screen.getByText(/Are you sure you want to delete Test User\?/)
-      ).toBeInTheDocument();
-      expect(
-        screen.getByText(/This action cannot be undone\./)
-      ).toBeInTheDocument();
+      expect(screen.getByText(/Are you sure you want to delete Test User\?/)).toBeInTheDocument();
+      expect(screen.getByText(/This action cannot be undone\./)).toBeInTheDocument();
     });
 
     it('deletes user when confirmed', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -435,13 +333,7 @@ describe('UserActionMenu', () => {
     it('cancels deletion when cancel is clicked', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -460,13 +352,7 @@ describe('UserActionMenu', () => {
     it('shows success toast on deletion', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -480,22 +366,14 @@ describe('UserActionMenu', () => {
       await user.click(confirmButton);
 
       await waitFor(() => {
-        expect(toast.success).toHaveBeenCalledWith(
-          'Test User has been deleted successfully.'
-        );
+        expect(toast.success).toHaveBeenCalledWith('Test User has been deleted successfully.');
       });
     });
 
     it('disables delete option for current user', async () => {
       const user = userEvent.setup();
 
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={true}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={true} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -510,13 +388,7 @@ describe('UserActionMenu', () => {
 
   describe('User Name Display', () => {
     it('displays full name when last name is provided', async () => {
-      render(
-        <UserActionMenu
-          user={mockUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={mockUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -528,11 +400,7 @@ describe('UserActionMenu', () => {
       const userWithoutLastName = { ...mockUser, last_name: null };
 
       render(
-        <UserActionMenu
-          user={userWithoutLastName}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
+        <UserActionMenu user={userWithoutLastName} isCurrentUser={false} onEdit={jest.fn()} />
       );
 
       const menuButton = screen.getByRole('button', {
@@ -549,13 +417,7 @@ describe('UserActionMenu', () => {
 
       mockActivateMutate.mockRejectedValueOnce(new Error('Custom error'));
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
@@ -576,13 +438,7 @@ describe('UserActionMenu', () => {
 
       mockActivateMutate.mockRejectedValueOnce('String error');
 
-      render(
-        <UserActionMenu
-          user={inactiveUser}
-          isCurrentUser={false}
-          onEdit={jest.fn()}
-        />
-      );
+      render(<UserActionMenu user={inactiveUser} isCurrentUser={false} onEdit={jest.fn()} />);
 
       const menuButton = screen.getByRole('button', {
         name: 'Actions for Test User',
diff --git a/frontend/tests/components/admin/users/UserListTable.test.tsx b/frontend/tests/components/admin/users/UserListTable.test.tsx
index 64e6b9d..567ce98 100644
--- a/frontend/tests/components/admin/users/UserListTable.test.tsx
+++ b/frontend/tests/components/admin/users/UserListTable.test.tsx
@@ -11,9 +11,7 @@ import type { User, PaginationMeta } from '@/lib/api/hooks/useAdmin';
 // Mock UserActionMenu component
 jest.mock('@/components/admin/users/UserActionMenu', () => ({
   UserActionMenu: ({ user, isCurrentUser }: any) => (
-    <button data-testid={`action-menu-${user.id}`}>
-      Actions {isCurrentUser && '(current)'}
-    </button>
+    <button data-testid={`action-menu-${user.id}`}>Actions {isCurrentUser && '(current)'}</button>
   ),
 }));
 
@@ -139,25 +137,15 @@ describe('UserListTable', () => {
   describe('Empty State', () => {
     it('shows empty message when no users', () => {
       render(
-        <UserListTable
-          {...defaultProps}
-          users={[]}
-          pagination={{ ...mockPagination, total: 0 }}
-        />
+        <UserListTable {...defaultProps} users={[]} pagination={{ ...mockPagination, total: 0 }} />
       );
 
-      expect(
-        screen.getByText('No users found. Try adjusting your filters.')
-      ).toBeInTheDocument();
+      expect(screen.getByText('No users found. Try adjusting your filters.')).toBeInTheDocument();
     });
 
     it('does not render pagination when no users', () => {
       render(
-        <UserListTable
-          {...defaultProps}
-          users={[]}
-          pagination={{ ...mockPagination, total: 0 }}
-        />
+        <UserListTable {...defaultProps} users={[]} pagination={{ ...mockPagination, total: 0 }} />
       );
 
       expect(screen.queryByText(/Showing/)).not.toBeInTheDocument();
@@ -168,9 +156,7 @@ describe('UserListTable', () => {
     it('renders search input', () => {
       render(<UserListTable {...defaultProps} />);
 
-      const searchInput = screen.getByPlaceholderText(
-        'Search by name or email...'
-      );
+      const searchInput = screen.getByPlaceholderText('Search by name or email...');
       expect(searchInput).toBeInTheDocument();
     });
 
@@ -178,9 +164,7 @@ describe('UserListTable', () => {
       const user = userEvent.setup();
       render(<UserListTable {...defaultProps} />);
 
-      const searchInput = screen.getByPlaceholderText(
-        'Search by name or email...'
-      );
+      const searchInput = screen.getByPlaceholderText('Search by name or email...');
 
       await user.type(searchInput, 'alice');
 
@@ -222,8 +206,8 @@ describe('UserListTable', () => {
 
       // Find "All Users" in the filter dropdown (not the heading)
       const selectTriggers = screen.getAllByRole('combobox');
-      const userTypeFilter = selectTriggers.find(trigger =>
-        within(trigger).queryByText('All Users') !== null
+      const userTypeFilter = selectTriggers.find(
+        (trigger) => within(trigger).queryByText('All Users') !== null
       );
 
       expect(userTypeFilter).toBeInTheDocument();
@@ -298,11 +282,7 @@ describe('UserListTable', () => {
 
     it('disables select all checkbox when no users', () => {
       render(
-        <UserListTable
-          {...defaultProps}
-          users={[]}
-          pagination={{ ...mockPagination, total: 0 }}
-        />
+        <UserListTable {...defaultProps} users={[]} pagination={{ ...mockPagination, total: 0 }} />
       );
 
       const selectAllCheckbox = screen.getByLabelText('Select all users');
@@ -433,11 +413,7 @@ describe('UserListTable', () => {
 
     it('does not render pagination when no users', () => {
       render(
-        <UserListTable
-          {...defaultProps}
-          users={[]}
-          pagination={{ ...mockPagination, total: 0 }}
-        />
+        <UserListTable {...defaultProps} users={[]} pagination={{ ...mockPagination, total: 0 }} />
       );
 
       expect(screen.queryByText(/Showing/)).not.toBeInTheDocument();
diff --git a/frontend/tests/components/admin/users/UserManagementContent.test.tsx b/frontend/tests/components/admin/users/UserManagementContent.test.tsx
index fb931bc..7113b08 100644
--- a/frontend/tests/components/admin/users/UserManagementContent.test.tsx
+++ b/frontend/tests/components/admin/users/UserManagementContent.test.tsx
@@ -36,9 +36,7 @@ jest.mock('@/lib/api/hooks/useAdmin', () => ({
 jest.mock('@/components/admin/users/UserListTable', () => ({
   UserListTable: ({ onEditUser, onSelectUser, selectedUsers }: any) => (
     <div data-testid="user-list-table">
-      <button onClick={() => onEditUser({ id: '1', first_name: 'Test' })}>
-        Edit User
-      </button>
+      <button onClick={() => onEditUser({ id: '1', first_name: 'Test' })}>Edit User</button>
       <button onClick={() => onSelectUser('1')}>Select User 1</button>
       <div data-testid="selected-count">{selectedUsers.length}</div>
     </div>
@@ -67,13 +65,9 @@ jest.mock('@/components/admin/users/BulkActionToolbar', () => ({
 }));
 
 const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
-const mockUseSearchParams = useSearchParams as jest.MockedFunction<
-  typeof useSearchParams
->;
+const mockUseSearchParams = useSearchParams as jest.MockedFunction<typeof useSearchParams>;
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
-const mockUseAdminUsers = useAdminUsers as jest.MockedFunction<
-  typeof useAdminUsers
->;
+const mockUseAdminUsers = useAdminUsers as jest.MockedFunction<typeof useAdminUsers>;
 
 // Import mutation hooks for mocking
 const {
@@ -207,9 +201,7 @@ describe('UserManagementContent', () => {
   });
 
   const renderWithProviders = (ui: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
   };
 
   describe('Component Rendering', () => {
@@ -217,17 +209,13 @@ describe('UserManagementContent', () => {
       renderWithProviders(<UserManagementContent />);
 
       expect(screen.getByText('All Users')).toBeInTheDocument();
-      expect(
-        screen.getByText('Manage user accounts and permissions')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Manage user accounts and permissions')).toBeInTheDocument();
     });
 
     it('renders create user button', () => {
       renderWithProviders(<UserManagementContent />);
 
-      expect(
-        screen.getByRole('button', { name: /Create User/i })
-      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Create User/i })).toBeInTheDocument();
     });
 
     it('renders UserListTable component', () => {
@@ -239,17 +227,13 @@ describe('UserManagementContent', () => {
     it('does not render dialog initially', () => {
       renderWithProviders(<UserManagementContent />);
 
-      expect(
-        screen.queryByTestId('user-form-dialog')
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('user-form-dialog')).not.toBeInTheDocument();
     });
 
     it('does not render bulk toolbar initially', () => {
       renderWithProviders(<UserManagementContent />);
 
-      expect(
-        screen.queryByTestId('bulk-action-toolbar')
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('bulk-action-toolbar')).not.toBeInTheDocument();
     });
   });
 
@@ -280,9 +264,7 @@ describe('UserManagementContent', () => {
       await user.click(closeButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('user-form-dialog')
-        ).not.toBeInTheDocument();
+        expect(screen.queryByTestId('user-form-dialog')).not.toBeInTheDocument();
       });
     });
   });
@@ -311,9 +293,7 @@ describe('UserManagementContent', () => {
       await user.click(closeButton);
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('user-form-dialog')
-        ).not.toBeInTheDocument();
+        expect(screen.queryByTestId('user-form-dialog')).not.toBeInTheDocument();
       });
     });
   });
@@ -338,9 +318,7 @@ describe('UserManagementContent', () => {
 
       await waitFor(() => {
         expect(screen.getByTestId('bulk-action-toolbar')).toBeInTheDocument();
-        expect(screen.getByTestId('bulk-selected-count')).toHaveTextContent(
-          '1'
-        );
+        expect(screen.getByTestId('bulk-selected-count')).toHaveTextContent('1');
       });
     });
 
@@ -362,9 +340,7 @@ describe('UserManagementContent', () => {
 
       await waitFor(() => {
         expect(screen.getByTestId('selected-count')).toHaveTextContent('0');
-        expect(
-          screen.queryByTestId('bulk-action-toolbar')
-        ).not.toBeInTheDocument();
+        expect(screen.queryByTestId('bulk-action-toolbar')).not.toBeInTheDocument();
       });
     });
 
@@ -521,9 +497,7 @@ describe('UserManagementContent', () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByTestId('bulk-selected-count')).toHaveTextContent(
-          '1'
-        );
+        expect(screen.getByTestId('bulk-selected-count')).toHaveTextContent('1');
       });
     });
   });
diff --git a/frontend/tests/components/auth/AuthGuard.test.tsx b/frontend/tests/components/auth/AuthGuard.test.tsx
index 06675d1..43039e4 100644
--- a/frontend/tests/components/auth/AuthGuard.test.tsx
+++ b/frontend/tests/components/auth/AuthGuard.test.tsx
@@ -56,9 +56,7 @@ const createWrapper = () => {
   });
 
   return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };
 
@@ -331,9 +329,7 @@ describe('AuthGuard', () => {
       );
 
       await waitFor(() => {
-        expect(mockPush).toHaveBeenCalledWith(
-          expect.stringContaining('returnUrl=%2Fprotected')
-        );
+        expect(mockPush).toHaveBeenCalledWith(expect.stringContaining('returnUrl=%2Fprotected'));
       });
     });
   });
diff --git a/frontend/tests/components/auth/LoginForm.test.tsx b/frontend/tests/components/auth/LoginForm.test.tsx
index d2619ea..c2f09af 100644
--- a/frontend/tests/components/auth/LoginForm.test.tsx
+++ b/frontend/tests/components/auth/LoginForm.test.tsx
@@ -56,9 +56,7 @@ const createWrapper = () => {
   });
 
   return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };
 
@@ -235,7 +233,9 @@ describe('LoginForm', () => {
       await user.click(submitButton);
 
       await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
+        expect(
+          screen.getByText('An unexpected error occurred. Please try again.')
+        ).toBeInTheDocument();
       });
     });
 
diff --git a/frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx b/frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
index 6f382ee..339dd54 100644
--- a/frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
+++ b/frontend/tests/components/auth/PasswordResetConfirmForm.test.tsx
@@ -47,9 +47,7 @@ const createWrapper = () => {
   });
 
   return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };
 
@@ -68,9 +66,7 @@ describe('PasswordResetConfirmForm', () => {
 
     expect(screen.getByLabelText(/new password/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /reset password/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /reset password/i })).toBeInTheDocument();
   });
 
   it('shows validation errors for required fields', async () => {
@@ -84,9 +80,7 @@ describe('PasswordResetConfirmForm', () => {
 
     await waitFor(() => {
       expect(screen.getByText(/new password is required/i)).toBeInTheDocument();
-      expect(
-        screen.getByText(/please confirm your password/i)
-      ).toBeInTheDocument();
+      expect(screen.getByText(/please confirm your password/i)).toBeInTheDocument();
     });
   });
 
@@ -119,9 +113,7 @@ describe('PasswordResetConfirmForm', () => {
     await user.click(submitButton);
 
     await waitFor(() => {
-      expect(
-        screen.getByText(/password must be at least 8 characters/i)
-      ).toBeInTheDocument();
+      expect(screen.getByText(/password must be at least 8 characters/i)).toBeInTheDocument();
     });
   });
 
@@ -149,9 +141,7 @@ describe('PasswordResetConfirmForm', () => {
       wrapper: createWrapper(),
     });
 
-    expect(
-      screen.getByText(/enter your new password below/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/enter your new password below/i)).toBeInTheDocument();
   });
 
   it('shows login link when enabled', () => {
@@ -160,9 +150,7 @@ describe('PasswordResetConfirmForm', () => {
     });
 
     expect(screen.getByText(/remember your password/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('link', { name: /back to login/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /back to login/i })).toBeInTheDocument();
   });
 
   it('marks required fields with asterisk', () => {
@@ -175,10 +163,9 @@ describe('PasswordResetConfirmForm', () => {
   });
 
   it('uses provided token in form', () => {
-    const { container } = render(
-      <PasswordResetConfirmForm token={mockToken} />,
-      { wrapper: createWrapper() }
-    );
+    const { container } = render(<PasswordResetConfirmForm token={mockToken} />, {
+      wrapper: createWrapper(),
+    });
 
     const hiddenInput = container.querySelector('input[type="hidden"]');
     expect(hiddenInput).toHaveValue(mockToken);
@@ -341,7 +328,9 @@ describe('PasswordResetConfirmForm', () => {
       await user.click(screen.getByRole('button', { name: /reset password/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
+        expect(
+          screen.getByText('An unexpected error occurred. Please try again.')
+        ).toBeInTheDocument();
       });
     });
 
@@ -372,7 +361,9 @@ describe('PasswordResetConfirmForm', () => {
       await user.click(screen.getByRole('button', { name: /reset password/i }));
 
       await waitFor(() => {
-        expect(screen.queryByText(/your password has been successfully reset/i)).not.toBeInTheDocument();
+        expect(
+          screen.queryByText(/your password has been successfully reset/i)
+        ).not.toBeInTheDocument();
         expect(screen.getByText('Invalid or expired token')).toBeInTheDocument();
       });
     });
diff --git a/frontend/tests/components/auth/PasswordResetRequestForm.test.tsx b/frontend/tests/components/auth/PasswordResetRequestForm.test.tsx
index 9094f99..44d0680 100644
--- a/frontend/tests/components/auth/PasswordResetRequestForm.test.tsx
+++ b/frontend/tests/components/auth/PasswordResetRequestForm.test.tsx
@@ -47,9 +47,7 @@ const createWrapper = () => {
   });
 
   return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };
 
@@ -63,9 +61,7 @@ describe('PasswordResetRequestForm', () => {
     render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
 
     expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /send reset instructions/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /send reset instructions/i })).toBeInTheDocument();
   });
 
   it('shows validation error for empty email', async () => {
@@ -99,9 +95,7 @@ describe('PasswordResetRequestForm', () => {
     });
 
     expect(screen.getByText(/remember your password/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('link', { name: /back to login/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /back to login/i })).toBeInTheDocument();
   });
 
   it('marks email field as required with asterisk', () => {
@@ -222,7 +216,9 @@ describe('PasswordResetRequestForm', () => {
       await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
+        expect(
+          screen.getByText('An unexpected error occurred. Please try again.')
+        ).toBeInTheDocument();
       });
     });
 
@@ -248,7 +244,9 @@ describe('PasswordResetRequestForm', () => {
       await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
 
       await waitFor(() => {
-        expect(screen.queryByText(/password reset instructions have been sent/i)).not.toBeInTheDocument();
+        expect(
+          screen.queryByText(/password reset instructions have been sent/i)
+        ).not.toBeInTheDocument();
         expect(screen.getByText('User not found')).toBeInTheDocument();
       });
     });
diff --git a/frontend/tests/components/auth/RegisterForm.test.tsx b/frontend/tests/components/auth/RegisterForm.test.tsx
index 01617eb..6410e51 100644
--- a/frontend/tests/components/auth/RegisterForm.test.tsx
+++ b/frontend/tests/components/auth/RegisterForm.test.tsx
@@ -54,9 +54,7 @@ const createWrapper = () => {
   });
 
   return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 };
 
@@ -262,7 +260,9 @@ describe('RegisterForm', () => {
       await user.click(screen.getByRole('button', { name: /create account/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
+        expect(
+          screen.getByText('An unexpected error occurred. Please try again.')
+        ).toBeInTheDocument();
       });
     });
   });
diff --git a/frontend/tests/components/charts/ChartCard.test.tsx b/frontend/tests/components/charts/ChartCard.test.tsx
index d8f3013..f6d5feb 100644
--- a/frontend/tests/components/charts/ChartCard.test.tsx
+++ b/frontend/tests/components/charts/ChartCard.test.tsx
@@ -9,11 +9,7 @@ describe('ChartCard', () => {
   const mockChildren = <div>Chart Content</div>;
 
   it('renders with title and children', () => {
-    render(
-      <ChartCard title="Test Chart">
-        {mockChildren}
-      </ChartCard>
-    );
+    render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
 
     expect(screen.getByText('Test Chart')).toBeInTheDocument();
     expect(screen.getByText('Chart Content')).toBeInTheDocument();
@@ -69,11 +65,7 @@ describe('ChartCard', () => {
   });
 
   it('renders without description when not provided', () => {
-    render(
-      <ChartCard title="Test Chart">
-        {mockChildren}
-      </ChartCard>
-    );
+    render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
 
     expect(screen.getByText('Test Chart')).toBeInTheDocument();
     expect(screen.getByText('Chart Content')).toBeInTheDocument();
diff --git a/frontend/tests/components/forms/FormField.test.tsx b/frontend/tests/components/forms/FormField.test.tsx
index 34b7f3a..d23affb 100644
--- a/frontend/tests/components/forms/FormField.test.tsx
+++ b/frontend/tests/components/forms/FormField.test.tsx
@@ -10,37 +10,21 @@ import { FieldError } from 'react-hook-form';
 describe('FormField', () => {
   describe('Basic Rendering', () => {
     it('renders with label and input', () => {
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          type="email"
-        />
-      );
+      render(<FormField label="Email" name="email" type="email" />);
 
       expect(screen.getByLabelText('Email')).toBeInTheDocument();
       expect(screen.getByRole('textbox')).toBeInTheDocument();
     });
 
     it('renders with description', () => {
-      render(
-        <FormField
-          label="Username"
-          name="username"
-          description="Choose a unique username"
-        />
-      );
+      render(<FormField label="Username" name="username" description="Choose a unique username" />);
 
       expect(screen.getByText('Choose a unique username')).toBeInTheDocument();
     });
 
     it('renders children content', () => {
       render(
-        <FormField
-          label="Password"
-          name="password"
-          type="password"
-        >
+        <FormField label="Password" name="password" type="password">
           <p>Password requirements: 8+ characters</p>
         </FormField>
       );
@@ -51,25 +35,13 @@ describe('FormField', () => {
 
   describe('Required Field', () => {
     it('shows asterisk when required is true', () => {
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          required
-        />
-      );
+      render(<FormField label="Email" name="email" required />);
 
       expect(screen.getByText('*')).toBeInTheDocument();
     });
 
     it('does not show asterisk when required is false', () => {
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          required={false}
-        />
-      );
+      render(<FormField label="Email" name="email" required={false} />);
 
       expect(screen.queryByText('*')).not.toBeInTheDocument();
     });
@@ -82,13 +54,7 @@ describe('FormField', () => {
         message: 'Email is required',
       };
 
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          error={error}
-        />
-      );
+      render(<FormField label="Email" name="email" error={error} />);
 
       expect(screen.getByText('Email is required')).toBeInTheDocument();
     });
@@ -99,13 +65,7 @@ describe('FormField', () => {
         message: 'Email is required',
       };
 
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          error={error}
-        />
-      );
+      render(<FormField label="Email" name="email" error={error} />);
 
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-invalid', 'true');
@@ -117,13 +77,7 @@ describe('FormField', () => {
         message: 'Email is required',
       };
 
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          error={error}
-        />
-      );
+      render(<FormField label="Email" name="email" error={error} />);
 
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-describedby', 'email-error');
@@ -135,13 +89,7 @@ describe('FormField', () => {
         message: 'Email is required',
       };
 
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          error={error}
-        />
-      );
+      render(<FormField label="Email" name="email" error={error} />);
 
       const errorElement = screen.getByRole('alert');
       expect(errorElement).toHaveTextContent('Email is required');
@@ -150,12 +98,7 @@ describe('FormField', () => {
 
   describe('Accessibility', () => {
     it('links label to input via htmlFor/id', () => {
-      render(
-        <FormField
-          label="Email"
-          name="email"
-        />
-      );
+      render(<FormField label="Email" name="email" />);
 
       const label = screen.getByText('Email');
       const input = screen.getByRole('textbox');
@@ -165,13 +108,7 @@ describe('FormField', () => {
     });
 
     it('sets aria-describedby with description ID when description exists', () => {
-      render(
-        <FormField
-          label="Username"
-          name="username"
-          description="Choose a unique username"
-        />
-      );
+      render(<FormField label="Username" name="username" description="Choose a unique username" />);
 
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-describedby', 'username-description');
@@ -223,12 +160,7 @@ describe('FormField', () => {
         ref: jest.fn(),
       };
 
-      render(
-        <FormField
-          label="Email"
-          {...registerProps}
-        />
-      );
+      render(<FormField label="Email" {...registerProps} />);
 
       const input = screen.getByRole('textbox');
       expect(input).toBeInTheDocument();
@@ -243,12 +175,7 @@ describe('FormField', () => {
       const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
 
       expect(() => {
-        render(
-          <FormField
-            label="Email"
-            name={undefined}
-          />
-        );
+        render(<FormField label="Email" name={undefined} />);
       }).toThrow('FormField: name must be provided either explicitly or via register()');
 
       consoleError.mockRestore();
@@ -257,12 +184,7 @@ describe('FormField', () => {
 
   describe('Layout and Styling', () => {
     it('applies correct spacing classes', () => {
-      const { container } = render(
-        <FormField
-          label="Email"
-          name="email"
-        />
-      );
+      const { container } = render(<FormField label="Email" name="email" />);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper).toHaveClass('space-y-2');
@@ -274,13 +196,7 @@ describe('FormField', () => {
         message: 'Email is required',
       };
 
-      render(
-        <FormField
-          label="Email"
-          name="email"
-          error={error}
-        />
-      );
+      render(<FormField label="Email" name="email" error={error} />);
 
       const errorElement = screen.getByRole('alert');
       expect(errorElement).toHaveClass('text-sm', 'text-destructive');
@@ -288,11 +204,7 @@ describe('FormField', () => {
 
     it('applies correct description styling', () => {
       const { container } = render(
-        <FormField
-          label="Email"
-          name="email"
-          description="We'll never share your email"
-        />
+        <FormField label="Email" name="email" description="We'll never share your email" />
       );
 
       const description = container.querySelector('#email-description');
diff --git a/frontend/tests/components/forms/useFormError.test.tsx b/frontend/tests/components/forms/useFormError.test.tsx
index 6c47542..6e3eb52 100644
--- a/frontend/tests/components/forms/useFormError.test.tsx
+++ b/frontend/tests/components/forms/useFormError.test.tsx
@@ -70,9 +70,7 @@ describe('useFormError', () => {
     it('handles API error with general error message', () => {
       const { result } = renderHook(() => useTestForm());
 
-      const apiError = [
-        { code: 'AUTH_001', message: 'Invalid credentials' },
-      ];
+      const apiError = [{ code: 'AUTH_001', message: 'Invalid credentials' }];
 
       act(() => {
         result.current.formError.handleFormError(apiError);
@@ -98,9 +96,7 @@ describe('useFormError', () => {
     });
 
     it('handles API errors with field-specific errors without crashing', () => {
-      const { result } = renderHook(() =>
-        useTestForm({ email: '', password: '', username: '' })
-      );
+      const { result } = renderHook(() => useTestForm({ email: '', password: '', username: '' }));
 
       const apiError = [
         { code: 'VAL_004', message: 'Email is required', field: 'email' },
@@ -129,7 +125,9 @@ describe('useFormError', () => {
         result.current.formError.handleFormError(unexpectedError);
       });
 
-      expect(result.current.formError.serverError).toBe('An unexpected error occurred. Please try again.');
+      expect(result.current.formError.serverError).toBe(
+        'An unexpected error occurred. Please try again.'
+      );
     });
 
     it('handles string errors', () => {
@@ -139,7 +137,9 @@ describe('useFormError', () => {
         result.current.formError.handleFormError('Some error string');
       });
 
-      expect(result.current.formError.serverError).toBe('An unexpected error occurred. Please try again.');
+      expect(result.current.formError.serverError).toBe(
+        'An unexpected error occurred. Please try again.'
+      );
     });
 
     it('handles null errors', () => {
@@ -149,7 +149,9 @@ describe('useFormError', () => {
         result.current.formError.handleFormError(null);
       });
 
-      expect(result.current.formError.serverError).toBe('An unexpected error occurred. Please try again.');
+      expect(result.current.formError.serverError).toBe(
+        'An unexpected error occurred. Please try again.'
+      );
     });
 
     it('handles undefined errors', () => {
@@ -159,7 +161,9 @@ describe('useFormError', () => {
         result.current.formError.handleFormError(undefined);
       });
 
-      expect(result.current.formError.serverError).toBe('An unexpected error occurred. Please try again.');
+      expect(result.current.formError.serverError).toBe(
+        'An unexpected error occurred. Please try again.'
+      );
     });
   });
 
@@ -179,9 +183,7 @@ describe('useFormError', () => {
     });
 
     it('clears form errors', () => {
-      const { result } = renderHook(() =>
-        useTestForm({ email: '', password: '', username: '' })
-      );
+      const { result } = renderHook(() => useTestForm({ email: '', password: '', username: '' }));
 
       // Set field errors
       act(() => {
@@ -199,9 +201,7 @@ describe('useFormError', () => {
     });
 
     it('clears both server and form errors', () => {
-      const { result } = renderHook(() =>
-        useTestForm({ email: '', password: '', username: '' })
-      );
+      const { result } = renderHook(() => useTestForm({ email: '', password: '', username: '' }));
 
       act(() => {
         result.current.formError.setServerError('Server error');
@@ -219,14 +219,10 @@ describe('useFormError', () => {
 
   describe('Integration Scenarios', () => {
     it('handles typical login flow with API error', () => {
-      const { result } = renderHook(() =>
-        useTestForm({ email: '', password: '', username: '' })
-      );
+      const { result } = renderHook(() => useTestForm({ email: '', password: '', username: '' }));
 
       // Simulate API error response
-      const apiError = [
-        { code: 'AUTH_001', message: 'Invalid email or password' },
-      ];
+      const apiError = [{ code: 'AUTH_001', message: 'Invalid email or password' }];
 
       act(() => {
         result.current.formError.handleFormError(apiError);
diff --git a/frontend/tests/components/home/CTASection.test.tsx b/frontend/tests/components/home/CTASection.test.tsx
index 03aa57e..258f80b 100644
--- a/frontend/tests/components/home/CTASection.test.tsx
+++ b/frontend/tests/components/home/CTASection.test.tsx
@@ -26,36 +26,49 @@ jest.mock('next/link', () => ({
 
 // Mock DemoCredentialsModal
 jest.mock('@/components/home/DemoCredentialsModal', () => ({
-  DemoCredentialsModal: ({ open, onClose }: any) => (
-    open ? <div data-testid="demo-modal">
-      <button onClick={onClose}>Close Modal</button>
-    </div> : null
-  ),
+  DemoCredentialsModal: ({ open, onClose }: any) =>
+    open ? (
+      <div data-testid="demo-modal">
+        <button onClick={onClose}>Close Modal</button>
+      </div>
+    ) : null,
 }));
 
 describe('CTASection', () => {
   it('renders main headline', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText(/Start Building,/i)).toBeInTheDocument();
     expect(screen.getByText(/Not Boilerplating/i)).toBeInTheDocument();
   });
 
   it('renders subtext with key messaging', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText(/Clone the repository, read the docs/i)).toBeInTheDocument();
     expect(screen.getByText(/Free forever, MIT licensed/i)).toBeInTheDocument();
   });
 
   it('renders GitHub CTA button', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const githubLink = screen.getByRole('link', { name: /get started on github/i });
     expect(githubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
@@ -64,29 +77,44 @@ describe('CTASection', () => {
   });
 
   it('renders Try Live Demo button', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const demoButton = screen.getByRole('button', { name: /try live demo/i });
     expect(demoButton).toBeInTheDocument();
   });
 
   it('renders Read Documentation link', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const docsLink = screen.getByRole('link', { name: /read documentation/i });
-    expect(docsLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template#documentation');
+    expect(docsLink).toHaveAttribute(
+      'href',
+      'https://github.com/your-org/fast-next-template#documentation'
+    );
     expect(docsLink).toHaveAttribute('target', '_blank');
     expect(docsLink).toHaveAttribute('rel', 'noopener noreferrer');
   });
 
   it('renders help text with internal links', () => {
-    render(<CTASection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <CTASection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText(/Need help getting started\?/i)).toBeInTheDocument();
 
@@ -109,25 +137,33 @@ describe('CTASection', () => {
 
   describe('Accessibility', () => {
     it('has proper external link attributes', () => {
-      render(<CTASection onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <CTASection
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const externalLinks = [
         screen.getByRole('link', { name: /get started on github/i }),
         screen.getByRole('link', { name: /read documentation/i }),
       ];
 
-      externalLinks.forEach(link => {
+      externalLinks.forEach((link) => {
         expect(link).toHaveAttribute('target', '_blank');
         expect(link).toHaveAttribute('rel', 'noopener noreferrer');
       });
     });
 
     it('has descriptive button text', () => {
-      render(<CTASection onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <CTASection
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       expect(screen.getByRole('button', { name: /try live demo/i })).toBeInTheDocument();
     });
diff --git a/frontend/tests/components/home/DemoCredentialsModal.test.tsx b/frontend/tests/components/home/DemoCredentialsModal.test.tsx
index 7576788..3522dfe 100644
--- a/frontend/tests/components/home/DemoCredentialsModal.test.tsx
+++ b/frontend/tests/components/home/DemoCredentialsModal.test.tsx
@@ -65,14 +65,14 @@ describe('DemoCredentialsModal', () => {
     render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
 
     const copyButtons = screen.getAllByRole('button');
-    const regularCopyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
+    const regularCopyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
 
     fireEvent.click(regularCopyButton!);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith('demo@example.com\nDemo123!');
       const copiedButtons = screen.getAllByRole('button');
-      const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
+      const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
       expect(copiedButton).toBeInTheDocument();
     });
   });
@@ -81,14 +81,14 @@ describe('DemoCredentialsModal', () => {
     render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
 
     const copyButtons = screen.getAllByRole('button');
-    const adminCopyButton = copyButtons.filter(btn => btn.textContent?.includes('Copy'))[1];
+    const adminCopyButton = copyButtons.filter((btn) => btn.textContent?.includes('Copy'))[1];
 
     fireEvent.click(adminCopyButton!);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith('admin@example.com\nAdmin123!');
       const copiedButtons = screen.getAllByRole('button');
-      const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
+      const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
       expect(copiedButton).toBeInTheDocument();
     });
   });
@@ -98,12 +98,12 @@ describe('DemoCredentialsModal', () => {
     render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
 
     const copyButtons = screen.getAllByRole('button');
-    const copyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
+    const copyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
     fireEvent.click(copyButton!);
 
     await waitFor(() => {
       const copiedButtons = screen.getAllByRole('button');
-      const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
+      const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
       expect(copiedButton).toBeInTheDocument();
     });
 
@@ -111,7 +111,7 @@ describe('DemoCredentialsModal', () => {
 
     await waitFor(() => {
       const buttons = screen.getAllByRole('button');
-      const copiedButton = buttons.find(btn => btn.textContent?.includes('Copied!'));
+      const copiedButton = buttons.find((btn) => btn.textContent?.includes('Copied!'));
       expect(copiedButton).toBeUndefined();
     });
 
@@ -129,7 +129,7 @@ describe('DemoCredentialsModal', () => {
     render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
 
     const copyButtons = screen.getAllByRole('button');
-    const copyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
+    const copyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
     fireEvent.click(copyButton!);
 
     await waitFor(() => {
@@ -144,8 +144,8 @@ describe('DemoCredentialsModal', () => {
 
     // Find the "Close" button (filter to get the one that's visible and is the footer button)
     const closeButtons = screen.getAllByRole('button', { name: 'Close' });
-    const footerCloseButton = closeButtons.find(btn =>
-      btn.textContent === 'Close' && !btn.querySelector('.sr-only')
+    const footerCloseButton = closeButtons.find(
+      (btn) => btn.textContent === 'Close' && !btn.querySelector('.sr-only')
     );
     fireEvent.click(footerCloseButton!);
 
diff --git a/frontend/tests/components/home/Header.test.tsx b/frontend/tests/components/home/Header.test.tsx
index f2816cf..3e87a03 100644
--- a/frontend/tests/components/home/Header.test.tsx
+++ b/frontend/tests/components/home/Header.test.tsx
@@ -19,27 +19,36 @@ jest.mock('next/link', () => ({
 
 // Mock DemoCredentialsModal
 jest.mock('@/components/home/DemoCredentialsModal', () => ({
-  DemoCredentialsModal: ({ open, onClose }: any) => (
-    open ? <div data-testid="demo-modal">
-      <button onClick={onClose}>Close Modal</button>
-    </div> : null
-  ),
+  DemoCredentialsModal: ({ open, onClose }: any) =>
+    open ? (
+      <div data-testid="demo-modal">
+        <button onClick={onClose}>Close Modal</button>
+      </div>
+    ) : null,
 }));
 
 describe('Header', () => {
   it('renders logo', () => {
-    render(<Header onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <Header
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText('FastNext')).toBeInTheDocument();
     expect(screen.getByText('Template')).toBeInTheDocument();
   });
 
   it('logo links to homepage', () => {
-    render(<Header onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <Header
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const logoLink = screen.getByRole('link', { name: /fastnext template/i });
     expect(logoLink).toHaveAttribute('href', '/');
@@ -47,42 +56,61 @@ describe('Header', () => {
 
   describe('Desktop Navigation', () => {
     it('renders navigation links', () => {
-      render(<Header onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       expect(screen.getByRole('link', { name: 'Components' })).toHaveAttribute('href', '/dev');
       expect(screen.getByRole('link', { name: 'Admin Demo' })).toHaveAttribute('href', '/admin');
     });
 
     it('renders GitHub link with star badge', () => {
-      render(<Header onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const githubLinks = screen.getAllByRole('link', { name: /github/i });
-      const desktopGithubLink = githubLinks.find(link =>
+      const desktopGithubLink = githubLinks.find((link) =>
         link.getAttribute('href')?.includes('github.com')
       );
 
-      expect(desktopGithubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
+      expect(desktopGithubLink).toHaveAttribute(
+        'href',
+        'https://github.com/your-org/fast-next-template'
+      );
       expect(desktopGithubLink).toHaveAttribute('target', '_blank');
       expect(desktopGithubLink).toHaveAttribute('rel', 'noopener noreferrer');
     });
 
     it('renders Try Demo button', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const demoButton = screen.getByRole('button', { name: /try demo/i });
       expect(demoButton).toBeInTheDocument();
     });
 
     it('renders Login button', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const loginLinks = screen.getAllByRole('link', { name: /login/i });
       expect(loginLinks.length).toBeGreaterThan(0);
@@ -102,9 +130,13 @@ describe('Header', () => {
 
   describe('Mobile Menu', () => {
     it('renders mobile menu toggle button', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       // SheetTrigger wraps the button, so we need to find it by aria-label
       const menuButton = screen.getByRole('button', { name: /toggle menu/i });
@@ -112,9 +144,13 @@ describe('Header', () => {
     });
 
     it('mobile menu contains navigation links', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       // Note: SheetContent is hidden by default in tests, but we can verify the links exist
       // The actual mobile menu behavior is tested in E2E tests
@@ -123,33 +159,44 @@ describe('Header', () => {
     });
 
     it('mobile menu contains GitHub link', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const githubLinks = screen.getAllByRole('link', { name: /github/i });
       expect(githubLinks.length).toBeGreaterThan(0);
     });
   });
 
-
   describe('Accessibility', () => {
     it('has proper ARIA labels for icon buttons', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const menuButton = screen.getByRole('button', { name: /toggle menu/i });
       expect(menuButton).toHaveAccessibleName();
     });
 
     it('has proper external link attributes', () => {
-      render(<Header onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <Header
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const githubLinks = screen.getAllByRole('link', { name: /github/i });
-      const externalLink = githubLinks.find(link =>
+      const externalLink = githubLinks.find((link) =>
         link.getAttribute('href')?.includes('github.com')
       );
 
diff --git a/frontend/tests/components/home/HeroSection.test.tsx b/frontend/tests/components/home/HeroSection.test.tsx
index 322ff87..48c7576 100644
--- a/frontend/tests/components/home/HeroSection.test.tsx
+++ b/frontend/tests/components/home/HeroSection.test.tsx
@@ -28,18 +28,23 @@ jest.mock('next/link', () => ({
 
 // Mock DemoCredentialsModal
 jest.mock('@/components/home/DemoCredentialsModal', () => ({
-  DemoCredentialsModal: ({ open, onClose }: any) => (
-    open ? <div data-testid="demo-modal">
-      <button onClick={onClose}>Close Modal</button>
-    </div> : null
-  ),
+  DemoCredentialsModal: ({ open, onClose }: any) =>
+    open ? (
+      <div data-testid="demo-modal">
+        <button onClick={onClose}>Close Modal</button>
+      </div>
+    ) : null,
 }));
 
 describe('HeroSection', () => {
   it('renders badge with key highlights', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText('MIT Licensed')).toBeInTheDocument();
     expect(screen.getAllByText('97% Test Coverage')[0]).toBeInTheDocument();
@@ -47,36 +52,52 @@ describe('HeroSection', () => {
   });
 
   it('renders main headline', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getAllByText(/Everything You Need to Build/i)[0]).toBeInTheDocument();
     expect(screen.getAllByText(/Modern Web Applications/i)[0]).toBeInTheDocument();
   });
 
   it('renders subheadline with key messaging', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     expect(screen.getByText(/Production-ready FastAPI \+ Next.js template/i)).toBeInTheDocument();
     expect(screen.getByText(/Start building features on day one/i)).toBeInTheDocument();
   });
 
   it('renders Try Live Demo button', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const demoButton = screen.getByRole('button', { name: /try live demo/i });
     expect(demoButton).toBeInTheDocument();
   });
 
   it('renders View on GitHub link', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const githubLink = screen.getByRole('link', { name: /view on github/i });
     expect(githubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
@@ -85,18 +106,26 @@ describe('HeroSection', () => {
   });
 
   it('renders Explore Components link', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const componentsLink = screen.getByRole('link', { name: /explore components/i });
     expect(componentsLink).toHaveAttribute('href', '/dev');
   });
 
   it('displays test coverage stats', () => {
-    render(<HeroSection onOpenDemoModal={function(): void {
-        throw new Error("Function not implemented.");
-    } } />);
+    render(
+      <HeroSection
+        onOpenDemoModal={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />
+    );
 
     const coverageTexts = screen.getAllByText('97%');
     expect(coverageTexts.length).toBeGreaterThan(0);
@@ -121,18 +150,26 @@ describe('HeroSection', () => {
 
   describe('Accessibility', () => {
     it('has proper heading hierarchy', () => {
-      render(<HeroSection onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <HeroSection
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const heading = screen.getAllByRole('heading', { level: 1 })[0];
       expect(heading).toBeInTheDocument();
     });
 
     it('has proper external link attributes', () => {
-      render(<HeroSection onOpenDemoModal={function(): void {
-          throw new Error("Function not implemented.");
-      } } />);
+      render(
+        <HeroSection
+          onOpenDemoModal={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+      );
 
       const githubLink = screen.getByRole('link', { name: /view on github/i });
       expect(githubLink).toHaveAttribute('target', '_blank');
diff --git a/frontend/tests/components/home/StatsSection.test.tsx b/frontend/tests/components/home/StatsSection.test.tsx
index d44f337..c23f1e3 100644
--- a/frontend/tests/components/home/StatsSection.test.tsx
+++ b/frontend/tests/components/home/StatsSection.test.tsx
@@ -44,7 +44,9 @@ describe('StatsSection', () => {
   it('displays stat descriptions', () => {
     render(<StatsSection />);
 
-    expect(screen.getByText(/Comprehensive testing across backend and frontend/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Comprehensive testing across backend and frontend/i)
+    ).toBeInTheDocument();
     expect(screen.getByText(/Backend, frontend unit, and E2E tests/i)).toBeInTheDocument();
     expect(screen.getByText(/Production-stable test suite/i)).toBeInTheDocument();
     expect(screen.getByText(/Fully documented with OpenAPI/i)).toBeInTheDocument();
@@ -100,14 +102,9 @@ describe('StatsSection', () => {
     it('has descriptive labels for stats', () => {
       render(<StatsSection />);
 
-      const statLabels = [
-        'Test Coverage',
-        'Passing Tests',
-        'Flaky Tests',
-        'API Endpoints',
-      ];
+      const statLabels = ['Test Coverage', 'Passing Tests', 'Flaky Tests', 'API Endpoints'];
 
-      statLabels.forEach(label => {
+      statLabels.forEach((label) => {
         expect(screen.getByText(label)).toBeInTheDocument();
       });
     });
diff --git a/frontend/tests/components/layout/Footer.test.tsx b/frontend/tests/components/layout/Footer.test.tsx
index 8d14eab..f8327fb 100644
--- a/frontend/tests/components/layout/Footer.test.tsx
+++ b/frontend/tests/components/layout/Footer.test.tsx
@@ -19,7 +19,9 @@ describe('Footer', () => {
       render(<Footer />);
 
       const currentYear = new Date().getFullYear();
-      expect(screen.getByText(`© ${currentYear} FastNext Template. All rights reserved.`)).toBeInTheDocument();
+      expect(
+        screen.getByText(`© ${currentYear} FastNext Template. All rights reserved.`)
+      ).toBeInTheDocument();
     });
 
     it('applies correct styling classes', () => {
diff --git a/frontend/tests/components/layout/Header.test.tsx b/frontend/tests/components/layout/Header.test.tsx
index ec83e15..0701158 100644
--- a/frontend/tests/components/layout/Header.test.tsx
+++ b/frontend/tests/components/layout/Header.test.tsx
@@ -151,9 +151,7 @@ describe('Header', () => {
 
       const adminLinks = screen.queryAllByRole('link', { name: /admin/i });
       // Filter out the one in the dropdown menu
-      const navAdminLinks = adminLinks.filter(
-        (link) => !link.closest('[role="menu"]')
-      );
+      const navAdminLinks = adminLinks.filter((link) => !link.closest('[role="menu"]'));
       expect(navAdminLinks).toHaveLength(0);
     });
 
diff --git a/frontend/tests/components/settings/PasswordChangeForm.test.tsx b/frontend/tests/components/settings/PasswordChangeForm.test.tsx
index 6a306c6..3cbc66d 100644
--- a/frontend/tests/components/settings/PasswordChangeForm.test.tsx
+++ b/frontend/tests/components/settings/PasswordChangeForm.test.tsx
@@ -121,7 +121,9 @@ describe('PasswordChangeForm', () => {
     it('allows typing in confirm password field', async () => {
       renderWithProvider(<PasswordChangeForm />);
 
-      const confirmPasswordInput = screen.getByLabelText(/confirm new password/i) as HTMLInputElement;
+      const confirmPasswordInput = screen.getByLabelText(
+        /confirm new password/i
+      ) as HTMLInputElement;
       await user.type(confirmPasswordInput, 'NewPassword123!');
 
       expect(confirmPasswordInput.value).toBe('NewPassword123!');
diff --git a/frontend/tests/components/settings/ProfileSettingsForm.test.tsx b/frontend/tests/components/settings/ProfileSettingsForm.test.tsx
index 311779a..0e39c44 100644
--- a/frontend/tests/components/settings/ProfileSettingsForm.test.tsx
+++ b/frontend/tests/components/settings/ProfileSettingsForm.test.tsx
@@ -65,11 +65,7 @@ describe('ProfileSettingsForm', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   describe('Rendering', () => {
diff --git a/frontend/tests/components/settings/SessionCard.test.tsx b/frontend/tests/components/settings/SessionCard.test.tsx
index 27a1d3e..f8af218 100644
--- a/frontend/tests/components/settings/SessionCard.test.tsx
+++ b/frontend/tests/components/settings/SessionCard.test.tsx
@@ -134,9 +134,7 @@ describe('SessionCard', () => {
   });
 
   it('highlights current session with border', () => {
-    const { container } = render(
-      <SessionCard session={currentSession} onRevoke={mockOnRevoke} />
-    );
+    const { container } = render(<SessionCard session={currentSession} onRevoke={mockOnRevoke} />);
 
     const card = container.querySelector('.border-primary');
     expect(card).toBeInTheDocument();
diff --git a/frontend/tests/components/settings/SessionsManager.test.tsx b/frontend/tests/components/settings/SessionsManager.test.tsx
index c96f03a..c745668 100644
--- a/frontend/tests/components/settings/SessionsManager.test.tsx
+++ b/frontend/tests/components/settings/SessionsManager.test.tsx
@@ -123,9 +123,7 @@ describe('SessionsManager', () => {
 
     renderWithProvider(<SessionsManager />);
 
-    expect(
-      screen.queryByRole('button', { name: /revoke all others/i })
-    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /revoke all others/i })).not.toBeInTheDocument();
   });
 
   it('opens bulk revoke dialog', async () => {
@@ -161,7 +159,7 @@ describe('SessionsManager', () => {
 
     // Find the destructive button in the dialog (not the "Cancel" button)
     const buttons = screen.getAllByRole('button');
-    const confirmButton = buttons.find(btn => btn.textContent === 'Revoke All Others');
+    const confirmButton = buttons.find((btn) => btn.textContent === 'Revoke All Others');
 
     if (confirmButton) {
       fireEvent.click(confirmButton);
@@ -214,9 +212,7 @@ describe('SessionsManager', () => {
 
     renderWithProvider(<SessionsManager />);
 
-    expect(
-      screen.getByText(/you're viewing your only active session/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/you're viewing your only active session/i)).toBeInTheDocument();
   });
 
   it('shows security tip', () => {
@@ -229,9 +225,7 @@ describe('SessionsManager', () => {
     renderWithProvider(<SessionsManager />);
 
     expect(screen.getByText(/security tip/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(/if you see a session you don't recognize/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/if you see a session you don't recognize/i)).toBeInTheDocument();
   });
 
   it('closes bulk revoke dialog on cancel', async () => {
diff --git a/frontend/tests/components/theme/ThemeToggle.test.tsx b/frontend/tests/components/theme/ThemeToggle.test.tsx
index 3bbc65f..d1ac932 100644
--- a/frontend/tests/components/theme/ThemeToggle.test.tsx
+++ b/frontend/tests/components/theme/ThemeToggle.test.tsx
@@ -182,5 +182,4 @@ describe('ThemeToggle', () => {
       expect(systemOption).toHaveTextContent('✓');
     });
   });
-
 });
diff --git a/frontend/tests/hooks/usePrefersReducedMotion.test.ts b/frontend/tests/hooks/usePrefersReducedMotion.test.ts
index 78c802f..41d1682 100644
--- a/frontend/tests/hooks/usePrefersReducedMotion.test.ts
+++ b/frontend/tests/hooks/usePrefersReducedMotion.test.ts
@@ -22,14 +22,16 @@ describe('usePrefersReducedMotion', () => {
           mockListeners.push(listener);
         }
       }),
-      removeEventListener: jest.fn((event: string, listener: (event: MediaQueryListEvent) => void) => {
-        if (event === 'change') {
-          const index = mockListeners.indexOf(listener);
-          if (index > -1) {
-            mockListeners.splice(index, 1);
+      removeEventListener: jest.fn(
+        (event: string, listener: (event: MediaQueryListEvent) => void) => {
+          if (event === 'change') {
+            const index = mockListeners.indexOf(listener);
+            if (index > -1) {
+              mockListeners.splice(index, 1);
+            }
           }
         }
-      }),
+      ),
       dispatchEvent: jest.fn(),
     }));
 
@@ -96,7 +98,7 @@ describe('usePrefersReducedMotion', () => {
 
     // Simulate media query change
     act(() => {
-      mockListeners.forEach(listener => {
+      mockListeners.forEach((listener) => {
         listener({ matches: true } as MediaQueryListEvent);
       });
     });
@@ -126,7 +128,7 @@ describe('usePrefersReducedMotion', () => {
 
     // Simulate media query change
     act(() => {
-      mockListeners.forEach(listener => {
+      mockListeners.forEach((listener) => {
         listener({ matches: false } as MediaQueryListEvent);
       });
     });
diff --git a/frontend/tests/lib/api/errors.test.ts b/frontend/tests/lib/api/errors.test.ts
index d5996ad..84f6e8c 100644
--- a/frontend/tests/lib/api/errors.test.ts
+++ b/frontend/tests/lib/api/errors.test.ts
@@ -56,9 +56,7 @@ describe('API Error Handling', () => {
       const errorsWithField: APIError[] = [
         { code: 'VAL_001', message: 'Invalid input', field: 'email' },
       ];
-      const errorsWithoutField: APIError[] = [
-        { code: 'AUTH_001', message: 'Invalid credentials' },
-      ];
+      const errorsWithoutField: APIError[] = [{ code: 'AUTH_001', message: 'Invalid credentials' }];
 
       expect(isAPIErrorArray(errorsWithField)).toBe(true);
       expect(isAPIErrorArray(errorsWithoutField)).toBe(true);
@@ -110,9 +108,7 @@ describe('API Error Handling', () => {
 
       it('should handle strings', () => {
         const result = parseAPIError('some error string');
-        expect(result).toEqual([
-          { code: 'UNKNOWN', message: ERROR_MESSAGES['UNKNOWN'] },
-        ]);
+        expect(result).toEqual([{ code: 'UNKNOWN', message: ERROR_MESSAGES['UNKNOWN'] }]);
       });
     });
 
@@ -448,9 +444,7 @@ describe('API Error Handling', () => {
           response: {
             status: 401,
             data: {
-              errors: [
-                { code: 'CUSTOM_ERROR', message: 'Custom structured error' },
-              ],
+              errors: [{ code: 'CUSTOM_ERROR', message: 'Custom structured error' }],
             },
             statusText: 'Unauthorized',
             headers: {},
@@ -461,9 +455,7 @@ describe('API Error Handling', () => {
         const result = parseAPIError(axiosError);
 
         // Should return structured error, not the 401 default
-        expect(result).toEqual([
-          { code: 'CUSTOM_ERROR', message: 'Custom structured error' },
-        ]);
+        expect(result).toEqual([{ code: 'CUSTOM_ERROR', message: 'Custom structured error' }]);
       });
     });
   });
@@ -554,9 +546,7 @@ describe('API Error Handling', () => {
     });
 
     it('should use error code message if message is missing', () => {
-      const errors: APIError[] = [
-        { code: 'VAL_002', message: '', field: 'email' },
-      ];
+      const errors: APIError[] = [{ code: 'VAL_002', message: '', field: 'email' }];
 
       const result = getFieldErrors(errors);
 
@@ -605,9 +595,7 @@ describe('API Error Handling', () => {
     });
 
     it('should use error code message if message is missing', () => {
-      const errors: APIError[] = [
-        { code: 'AUTH_001', message: '' },
-      ];
+      const errors: APIError[] = [{ code: 'AUTH_001', message: '' }];
 
       const result = getGeneralError(errors);
 
diff --git a/frontend/tests/lib/api/hooks/useAdmin.test.tsx b/frontend/tests/lib/api/hooks/useAdmin.test.tsx
index 0512f78..99a0f11 100644
--- a/frontend/tests/lib/api/hooks/useAdmin.test.tsx
+++ b/frontend/tests/lib/api/hooks/useAdmin.test.tsx
@@ -34,7 +34,9 @@ jest.mock('@/lib/api/client');
 jest.mock('@/lib/auth/AuthContext');
 
 const mockAdminListUsers = adminListUsers as jest.MockedFunction<typeof adminListUsers>;
-const mockAdminListOrganizations = adminListOrganizations as jest.MockedFunction<typeof adminListOrganizations>;
+const mockAdminListOrganizations = adminListOrganizations as jest.MockedFunction<
+  typeof adminListOrganizations
+>;
 const mockAdminListSessions = adminListSessions as jest.MockedFunction<typeof adminListSessions>;
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
 
@@ -53,19 +55,13 @@ describe('useAdmin hooks', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 
   describe('useAdminStats', () => {
     const mockUsersData = {
       data: {
-        data: [
-          { is_active: true },
-          { is_active: true },
-          { is_active: false },
-        ],
+        data: [{ is_active: true }, { is_active: true }, { is_active: false }],
         pagination: { total: 3, page: 1, limit: 10000 },
       },
     };
@@ -358,7 +354,7 @@ describe('useAdmin hooks', () => {
             limit: 20,
             search: 'admin',
             is_active: true,
-            is_superuser: false
+            is_superuser: false,
           },
           throwOnError: false,
         });
@@ -476,7 +472,15 @@ describe('useAdmin hooks', () => {
     it('creates a user successfully', async () => {
       const mockCreateUser = adminCreateUser as jest.MockedFunction<typeof adminCreateUser>;
       mockCreateUser.mockResolvedValue({
-        data: { id: '1', email: 'newuser@example.com', first_name: 'New', last_name: 'User', is_active: true, is_superuser: false, created_at: '2025-01-01T00:00:00Z' },
+        data: {
+          id: '1',
+          email: 'newuser@example.com',
+          first_name: 'New',
+          last_name: 'User',
+          is_active: true,
+          is_superuser: false,
+          created_at: '2025-01-01T00:00:00Z',
+        },
       } as any);
 
       const { result } = renderHook(() => useCreateUser(), { wrapper });
@@ -524,7 +528,15 @@ describe('useAdmin hooks', () => {
     it('updates a user successfully', async () => {
       const mockUpdateUser = adminUpdateUser as jest.MockedFunction<typeof adminUpdateUser>;
       mockUpdateUser.mockResolvedValue({
-        data: { id: '1', email: 'updated@example.com', first_name: 'Updated', last_name: 'User', is_active: true, is_superuser: false, created_at: '2025-01-01T00:00:00Z' },
+        data: {
+          id: '1',
+          email: 'updated@example.com',
+          first_name: 'Updated',
+          last_name: 'User',
+          is_active: true,
+          is_superuser: false,
+          created_at: '2025-01-01T00:00:00Z',
+        },
       } as any);
 
       const { result } = renderHook(() => useUpdateUser(), { wrapper });
@@ -618,7 +630,9 @@ describe('useAdmin hooks', () => {
 
   describe('useDeactivateUser', () => {
     it('deactivates a user successfully', async () => {
-      const mockDeactivateUser = adminDeactivateUser as jest.MockedFunction<typeof adminDeactivateUser>;
+      const mockDeactivateUser = adminDeactivateUser as jest.MockedFunction<
+        typeof adminDeactivateUser
+      >;
       mockDeactivateUser.mockResolvedValue({ data: { success: true } } as any);
 
       const { result } = renderHook(() => useDeactivateUser(), { wrapper });
@@ -634,7 +648,9 @@ describe('useAdmin hooks', () => {
     });
 
     it('handles deactivate error', async () => {
-      const mockDeactivateUser = adminDeactivateUser as jest.MockedFunction<typeof adminDeactivateUser>;
+      const mockDeactivateUser = adminDeactivateUser as jest.MockedFunction<
+        typeof adminDeactivateUser
+      >;
       mockDeactivateUser.mockResolvedValue({ error: 'Deactivate failed' } as any);
 
       const { result } = renderHook(() => useDeactivateUser(), { wrapper });
diff --git a/frontend/tests/lib/api/hooks/useAuth.test.tsx b/frontend/tests/lib/api/hooks/useAuth.test.tsx
index 67cbc97..f967440 100644
--- a/frontend/tests/lib/api/hooks/useAuth.test.tsx
+++ b/frontend/tests/lib/api/hooks/useAuth.test.tsx
@@ -6,11 +6,7 @@
 
 import { renderHook } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import {
-  useIsAuthenticated,
-  useCurrentUser,
-  useIsAdmin,
-} from '@/lib/api/hooks/useAuth';
+import { useIsAuthenticated, useCurrentUser, useIsAdmin } from '@/lib/api/hooks/useAuth';
 import { AuthProvider } from '@/lib/auth/AuthContext';
 
 // Mock auth state (Context-injected)
@@ -52,9 +48,7 @@ const createWrapper = () => {
 
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider store={mockStoreHook}>
-        {children}
-      </AuthProvider>
+      <AuthProvider store={mockStoreHook}>{children}</AuthProvider>
     </QueryClientProvider>
   );
 };
diff --git a/frontend/tests/lib/api/hooks/useSession.test.tsx b/frontend/tests/lib/api/hooks/useSession.test.tsx
index 445e8bb..b8a1741 100644
--- a/frontend/tests/lib/api/hooks/useSession.test.tsx
+++ b/frontend/tests/lib/api/hooks/useSession.test.tsx
@@ -59,9 +59,7 @@ describe('useSession hooks', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 
   describe('useListSessions', () => {
diff --git a/frontend/tests/lib/api/hooks/useUser.test.tsx b/frontend/tests/lib/api/hooks/useUser.test.tsx
index d9a915e..64880fa 100644
--- a/frontend/tests/lib/api/hooks/useUser.test.tsx
+++ b/frontend/tests/lib/api/hooks/useUser.test.tsx
@@ -33,9 +33,7 @@ describe('useUser hooks', () => {
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        {children}
-      </AuthProvider>
+      <AuthProvider>{children}</AuthProvider>
     </QueryClientProvider>
   );
 
diff --git a/frontend/tests/lib/auth/storage.test.ts b/frontend/tests/lib/auth/storage.test.ts
index 3d3fb9b..1b87d20 100644
--- a/frontend/tests/lib/auth/storage.test.ts
+++ b/frontend/tests/lib/auth/storage.test.ts
@@ -130,7 +130,9 @@ describe('Storage Module', () => {
       };
 
       // When setItem throws, isLocalStorageAvailable() returns false
-      await expect(saveTokens(tokens)).rejects.toThrow('localStorage not available - cannot save tokens');
+      await expect(saveTokens(tokens)).rejects.toThrow(
+        'localStorage not available - cannot save tokens'
+      );
 
       Storage.prototype.setItem = originalSetItem;
     });
@@ -171,7 +173,6 @@ describe('Storage Module', () => {
 
       localStorage.removeItem = originalRemoveItem;
     });
-
   });
 
   describe('Storage method handling', () => {
diff --git a/frontend/tests/lib/stores/authStore.test.ts b/frontend/tests/lib/stores/authStore.test.ts
index 6d04156..892cd63 100644
--- a/frontend/tests/lib/stores/authStore.test.ts
+++ b/frontend/tests/lib/stores/authStore.test.ts
@@ -51,11 +51,7 @@ describe('Auth Store', () => {
       const invalidUser = createMockUser({ id: '' });
 
       await expect(
-        useAuthStore.getState().setAuth(
-          invalidUser,
-          'valid.access.token',
-          'valid.refresh.token'
-        )
+        useAuthStore.getState().setAuth(invalidUser, 'valid.access.token', 'valid.refresh.token')
       ).rejects.toThrow('Invalid user object');
     });
 
@@ -63,11 +59,7 @@ describe('Auth Store', () => {
       const invalidUser = createMockUser({ id: '   ' });
 
       await expect(
-        useAuthStore.getState().setAuth(
-          invalidUser,
-          'valid.access.token',
-          'valid.refresh.token'
-        )
+        useAuthStore.getState().setAuth(invalidUser, 'valid.access.token', 'valid.refresh.token')
       ).rejects.toThrow('Invalid user object');
     });
 
@@ -75,11 +67,7 @@ describe('Auth Store', () => {
       const invalidUser = createMockUser({ email: '' });
 
       await expect(
-        useAuthStore.getState().setAuth(
-          invalidUser,
-          'valid.access.token',
-          'valid.refresh.token'
-        )
+        useAuthStore.getState().setAuth(invalidUser, 'valid.access.token', 'valid.refresh.token')
       ).rejects.toThrow('Invalid user object');
     });
 
@@ -101,11 +89,9 @@ describe('Auth Store', () => {
       (storage.saveTokens as jest.Mock).mockResolvedValue(undefined);
 
       await expect(
-        useAuthStore.getState().setAuth(
-          validUser,
-          'header.payload.signature',
-          'header.payload.signature'
-        )
+        useAuthStore
+          .getState()
+          .setAuth(validUser, 'header.payload.signature', 'header.payload.signature')
       ).resolves.not.toThrow();
 
       const state = useAuthStore.getState();
@@ -145,11 +131,9 @@ describe('Auth Store', () => {
       (storage.saveTokens as jest.Mock).mockResolvedValue(undefined);
 
       await expect(
-        useAuthStore.getState().setAuth(
-          validUser,
-          'header.payload.signature',
-          'header.payload.signature'
-        )
+        useAuthStore
+          .getState()
+          .setAuth(validUser, 'header.payload.signature', 'header.payload.signature')
       ).resolves.not.toThrow();
     });
   });
@@ -264,11 +248,9 @@ describe('Auth Store', () => {
       // First set auth
       const validUser = createMockUser();
 
-      await useAuthStore.getState().setAuth(
-        validUser,
-        'header.payload.signature',
-        'header.payload.signature'
-      );
+      await useAuthStore
+        .getState()
+        .setAuth(validUser, 'header.payload.signature', 'header.payload.signature');
 
       expect(useAuthStore.getState().isAuthenticated).toBe(true);
 
@@ -298,20 +280,14 @@ describe('Auth Store', () => {
   describe('setTokens', () => {
     it('should update tokens while preserving user state', async () => {
       // First set initial auth with user
-      await useAuthStore.getState().setAuth(
-        createMockUser({ id: 'user-1' }),
-        'old.access.token',
-        'old.refresh.token'
-      );
+      await useAuthStore
+        .getState()
+        .setAuth(createMockUser({ id: 'user-1' }), 'old.access.token', 'old.refresh.token');
 
       const oldUser = useAuthStore.getState().user;
 
       // Now update just the tokens
-      await useAuthStore.getState().setTokens(
-        'new.access.token',
-        'new.refresh.token',
-        900
-      );
+      await useAuthStore.getState().setTokens('new.access.token', 'new.refresh.token', 900);
 
       const state = useAuthStore.getState();
       expect(state.accessToken).toBe('new.access.token');
@@ -344,16 +320,18 @@ describe('Auth Store', () => {
   describe('setUser', () => {
     it('should update user while preserving auth state', async () => {
       // First set initial auth
-      await useAuthStore.getState().setAuth(
-        createMockUser({ id: 'user-1' }),
-        'valid.access.token',
-        'valid.refresh.token'
-      );
+      await useAuthStore
+        .getState()
+        .setAuth(createMockUser({ id: 'user-1' }), 'valid.access.token', 'valid.refresh.token');
 
       const oldToken = useAuthStore.getState().accessToken;
 
       // Update just the user
-      const newUser = createMockUser({ id: 'user-1', email: 'updated@example.com', is_superuser: true });
+      const newUser = createMockUser({
+        id: 'user-1',
+        email: 'updated@example.com',
+        is_superuser: true,
+      });
       useAuthStore.getState().setUser(newUser);
 
       const state = useAuthStore.getState();
@@ -478,18 +456,11 @@ describe('Auth Store', () => {
       const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
 
       await expect(
-        useAuthStore.getState().setAuth(
-          mockUser,
-          'valid.access.token',
-          'valid.refresh.token'
-        )
+        useAuthStore.getState().setAuth(mockUser, 'valid.access.token', 'valid.refresh.token')
       ).rejects.toThrow('Storage error');
 
       // Verify error was logged before throwing
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        'Failed to save auth state:',
-        expect.any(Error)
-      );
+      expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to save auth state:', expect.any(Error));
 
       consoleErrorSpy.mockRestore();
     });