diff --git a/.cursor/rules/backend/commands.mdc b/.cursor/rules/backend/commands.mdc
index 6fd00e522..0b0215e8c 100644
--- a/.cursor/rules/backend/commands.mdc
+++ b/.cursor/rules/backend/commands.mdc
@@ -62,9 +62,7 @@ public sealed class CreateUserValidator : AbstractValidator<CreateUserCommand>
     public CreateUserValidator()
     {
         // ✅ DO: Use the same message for better user experience and easier localization
-        RuleFor(x => x.Name)
-            .NotEmpty().WithMessage("Name must be between 1 and 50 characters.")
-            .MaximumLength(50).WithMessage("Name must be between 1 and 50 characters.");
+        RuleFor(x => x.Name).Length(1, 50).WithMessage("Name must be between 1 and 50 characters.");
     }
 }
 
@@ -98,7 +96,7 @@ public sealed class CreateUserValidator : AbstractValidator<CreateUserCommand>
 {
     public CreateUserValidator()
     {
-        // ❌ DON'T: Use different validation messages for the same property
+        // ❌ DON'T: Use different validation messages for the same property and redundant validation rules
         RuleFor(x => x.Name)
             .NotEmpty().WithMessage("Name must not be empty.")
             .MaximumLength(50).WithMessage("Name must not be more than 50 characters.");
diff --git a/.cursor/rules/end-to-end-tests/e2e-tests.mdc b/.cursor/rules/end-to-end-tests/e2e-tests.mdc
new file mode 100644
index 000000000..0b0ebea9a
--- /dev/null
+++ b/.cursor/rules/end-to-end-tests/e2e-tests.mdc
@@ -0,0 +1,262 @@
+---
+description: Rules for end-to-end tests
+globs: */tests/e2e/**
+alwaysApply: false
+---
+# End-to-End Tests
+
+These rules outline the structure, patterns, and best practices for writing end-to-end tests.
+
+## Implementation
+
+1. Use `[CLI_ALIAS] e2e` with these option categories to optimize test execution:
+   - Test filtering: `--smoke`, `--include-slow`, search terms (e.g., `"@smoke"`, `"smoke"`, `"user"`, `"localization"`), `--browser`
+   - Change scoping: `--last-failed`, `--only-changed`  
+   - Flaky test detection: `--repeat-each`, `--retries`, `--stop-on-first-failure`
+   - Performance: `--debug-timings` shows step execution times with color coding
+
+2. Test Search and Filtering:
+   - Search by test tags: `[CLI_ALIAS] e2e "@smoke"` or `[CLI_ALIAS] e2e "smoke"` (both work the same)
+   - Search by test content: `[CLI_ALIAS] e2e "user"` (finds tests with "user" in title or content)
+   - Search by filename: `[CLI_ALIAS] e2e "localization"` (finds localization-flows.spec.ts)
+   - Search by specific file: `[CLI_ALIAS] e2e "user-management-flows.spec.ts"`
+   - Multiple search terms: `[CLI_ALIAS] e2e "user" "management"`
+   - The CLI automatically detects which self-contained systems contain matching tests and only runs those
+
+3. Test-Driven Debugging Process:
+   - Focus on one failing test at a time and make it pass before moving to the next.
+   - Ensure tests use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`.
+   - Consider if root causes can be fixed in the application code, and fix application bugs rather than masking them with test workarounds.
+
+4. Organize tests in a consistent file structure:
+   - All e2e test files must be located in `[self-contained-system]/WebApp/tests/e2e/` folder (e.g., `application/account-management/WebApp/tests/e2e/`).
+   - All test files use the `*-flows.spec.ts` naming convention (e.g., `login-flows.spec.ts`, `signup-flows.spec.ts`, `user-management-flows.spec.ts`).
+   - Top-level describe blocks must use only these 3 approved tags: `test.describe("@smoke", () => {})`, `test.describe("@comprehensive", () => {})`, `test.describe("@slow", () => {})`.
+   - `@smoke` tests:
+     - Critical tests run on deployment of any self-contained system.
+     - Should be comprehensive scenarios that test core user journeys.
+     - Keep tests focused on specific flows to reduce fragility while maintaining coverage.
+     - Focus on must-work functionality with extensive validation steps.
+     - Include boundary cases and error handling within the same test scenario.
+     - Avoid testing the same functionality multiple times across different tests.
+
+   - `@comprehensive` tests:
+     - Thorough tests run when a specific self-contained system is deployed.
+     - Focus on edge cases, error conditions, and less common scenarios.
+     - Test specific features in depth with various input combinations.
+     - Include tests for concurrency, validation rules, accessibility, etc.
+     - Group related edge cases together to reduce test count while maintaining coverage.
+
+   - `@slow` tests:
+     - Optional and run only ad-hoc using `--include-slow` flag.
+     - Any tests that require waiting like `waitForTimeout` (e.g., for OTP timeouts) must be marked as `@slow`.
+     - Include tests for rate limiting with actual wait times, session timeouts, etc.
+     - Use `test.setTimeout()` at the individual test level based on actual wait times needed.
+
+5. Write clear test descriptions and documentation:
+   - Test descriptions must accurately reflect what the test covers and be kept in sync with test implementation.
+   - Use descriptive test names that clearly indicate the functionality being tested (e.g., "should handle single and bulk user deletion workflows with dashboard integration").
+   - Include JSDoc comments above complex tests listing all major features/scenarios covered.
+   - When adding new functionality to existing tests, update both the test description and JSDoc comments to reflect changes.
+
+6. Structure each test with step decorators and proper monitoring:
+   - All tests must start with `const context = createTestContext(page);` for proper error monitoring.
+   - Use step decorators: `await step("Complete signup & verify account creation")(async () => { /* test logic */ })();`
+   - Step naming conventions:
+     - Always follow "[Business action + details] & [expected outcome]" pattern.
+     - Use business action verbs like "Sign up", "Login", "Invite", "Rename", "Update", "Delete", "Create", "Submit".
+     - Never use test/assertion prefixes like "Test", "Verify", "Check", "Validate", "Ensure"; use descriptive business actions instead.
+     - Every step must include an action (arrange/act) followed by assertions, not pure assertion steps.
+   - Step structure:
+     - Use blank lines to separate arrange/act/assert sections within steps.
+     - Keep shared variable declarations outside steps when used across multiple steps.
+     - Use section headers with `// === SECTION NAME ===` to group related steps.
+     - Add JSDoc comments for complex test workflows.
+   - Use semantic selectors: `page.getByRole("button", { name: "Submit" })`, `page.getByText("Welcome")`, `page.getByLabel("Email")`.
+   - Assert side effects immediately after actions using `expectToastMessage`, `expectValidationError`, `expectNetworkErrors`.
+   - Form validation pattern: Use `await blurActiveElement(page);` when updating a textbox the second time before submitting a form to trigger validation.
+
+7. Timeout Configuration:
+   - Always use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`.
+   - Never add timeouts to `.click()`, `.waitForSelector()`, etc.
+   - Global timeout configuration is handled in the shared Playwright. Don't change this.
+
+8. Write deterministic tests - This is critical for reliable testing:
+   - Each test should have a clear, linear flow of actions and assertions.
+   - Never use if statements, custom error handling, or try/catch blocks in tests.
+   - Never use regular expressions in tests; use simple string matching instead.
+
+9. What to test:
+   - Enter invalid values, such as empty strings, only whitespace characters, long strings, negative numbers, Unicode, etc.
+   - Tooltips, keyboard navigation, accessibility, validation messages, translations, responsiveness, etc.
+
+10. Test Fixtures and Page Management:
+   - Use appropriate fixtures: `{ page }` for basic tests, `{ anonymousPage }` for tests with existing tenant/owner but not logged in, `{ ownerPage }`, `{ adminPage }`, `{ memberPage }` for authenticated tests.
+   - Destructure anonymous page data: `const { page, tenant } = anonymousPage; const existingUser = tenant.owner;`
+   - Pre-logged in users (`ownerPage`, `adminPage`, `memberPage`) are isolated between workers and will not conflict between tests.
+   - When using pre-logged in users, do not put the tenant or user into an invalid state that could affect other tests.
+
+11. Test Data and Constants:
+   - Use underscore separators: `const timeout = 30_000; // 30 seconds`
+   - Generate unique data: `const email = uniqueEmail();`
+   - Use faker.js to generate realistic test data: `const firstName = faker.person.firstName(); const email = faker.internet.email();`
+   - Long string testing: `const longEmail = \`${"a".repeat(90)}@example.com\`; // 101 characters total`
+
+12. Memory Management in E2E Tests:
+    - Playwright automatically handles browser context cleanup after tests
+    - Manual cleanup steps are unnecessary - focus on test clarity over micro-optimizations
+    - E2E test suites have minimal memory leak concerns due to their limited scope and duration
+
+## Examples
+
+### ✅ Good Step Naming Examples
+```typescript
+// ✅ DO: Business action + details & expected outcome
+await step("Submit invalid email & verify validation error")(async () => {
+  await page.getByLabel("Email").fill("invalid-email");
+  await blurActiveElement(page);
+  
+  await expectValidationError(context, "Invalid email.");
+})();
+
+await step("Sign up with valid credentials & verify account creation")(async () => {
+  await page.getByRole("button", { name: "Submit" }).click();
+  
+  await expect(page.getByText("Welcome")).toBeVisible();
+})();
+
+await step("Update user role to admin & verify permission change")(async () => {
+  const userRow = page.locator("tbody tr").first();
+  
+  await userRow.getByLabel("User actions").click();
+  await page.getByRole("menuitem", { name: "Change role" }).click();
+  
+  await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible();
+})();
+```
+
+### ❌ Bad Step Naming Examples
+```typescript
+// ❌ DON'T: Pure assertion steps without actions
+await step("Verify button is visible")(async () => {
+  await expect(page.getByRole("button")).toBeVisible(); // No action, only assertion
+})();
+
+// ❌ DON'T: Using test/assertion prefixes
+await step("Check user permissions")(async () => { // "Check" is assertion prefix
+  await expect(page.getByText("Admin")).toBeVisible();
+})();
+
+await step("Validate form state")(async () => { // "Validate" is assertion prefix
+  await expect(page.getByRole("textbox")).toBeEmpty();
+})();
+
+await step("Ensure user is deleted")(async () => { // "Ensure" is assertion prefix
+  await expect(page.getByText("user@example.com")).not.toBeVisible();
+})();
+```
+
+### ✅ Complete Test Example
+```typescript
+import { step } from "@shared/e2e/utils/step-decorator";
+import { expectValidationError, blurActiveElement, createTestContext } from "@shared/e2e/utils/test-assertions";
+import { testUser } from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  test("should complete signup with validation", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Submit invalid email & verify validation error")(async () => {
+      await page.goto("/signup");
+      await page.getByLabel("Email").fill("invalid-email");
+      await blurActiveElement(page); // ✅ DO: Trigger validation when updating textbox second time
+
+      await expectValidationError(context, "Invalid email.");
+    })();
+
+    await step("Sign up with valid email & verify verification redirect")(async () => {
+      await page.getByLabel("Email").fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/verify");
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  test("should handle user management with pre-logged owner", async ({ ownerPage }) => {
+    createTestContext(ownerPage); // ✅ DO: Create context for pre-logged users
+
+    await step("Access user management & verify owner permissions")(async () => {
+      await ownerPage.getByRole("button", { name: "Users" }).click();
+
+      await expect(ownerPage.getByRole("heading", { name: "Users" })).toBeVisible();
+    })();
+  });
+});
+
+test.describe("@slow", () => {
+  const requestNewCodeTimeout = 30_000; // 30 seconds
+  const codeValidationTimeout = 60_000; // 5 minutes
+  const sessionTimeout = codeValidationTimeout + 60_000; // 6 minutes
+
+  test("should handle user logout after to many login attempts", async ({ page }) => { // ✅ DO: use new page, when testing e.g. account lockout
+    test.setTimeout(sessionTimeout); // ✅ DO: Set timeout based on actual wait times
+    const context = createTestContext(page);
+
+    // ...
+
+    await step("Wait for code expiration & verify timeout behavior")(async () => {
+      await page.goto("/login/verify");
+      await page.waitForTimeout(codeValidationTimeout); // ✅ DO: Use actual waits in @slow tests
+
+      await expect(page.getByText("Your verification code has expired")).toBeVisible();
+    })();
+  });
+});
+```
+
+```typescript
+test.describe("@security", () => { // ❌ DON'T: Don't invent new tags - use @smoke, @comprehensive, @slow only
+  test("should handle login", async ({ page }) => {
+    // ❌ DON'T: Skip createTestContext(page); step
+    page.setDefaultTimeout(5000); // ❌ DON'T: Set timeouts manually - use global config
+    
+    // ❌ DON'T: Use test/assertion prefixes in step descriptions
+    await step("Test login functionality")(async () => { // ❌ Should be "Submit login form & verify authentication"
+    await step("Verify button is visible")(async () => { // ❌ Should be "Navigate to page & verify button is visible"
+    await step("Check user permissions")(async () => { // ❌ Should be "Click user menu & verify permissions"
+      if (page.url().includes("/login/verify")) { // ❌ DON'T: Add conditional logic - tests should be linear
+        await page.waitForTimeout(2000); // ❌ DON'T: Add manual timeouts
+        // Continue with verification... // ❌ DON'T: Write verbose explanatory comments
+      }
+      
+      await page.click("#submit-btn"); // ❌ DON'T: Use CSS selectors - use semantic selectors
+      
+      // ❌ DON'T: Skip assertions for side effects
+    })();
+
+    // ❌ DON'T: Use regular expressions - use simple string matching instead
+    await expect(page.getByText(/welcome.*home/i)).toBeVisible(); // ❌ Should be: page.getByText("Welcome home")
+    await expect(page.locator('input[name*="email"]')).toBeFocused(); // ❌ Should be: page.getByLabel("Email")
+  });
+
+  // ❌ DON'T: Place assertions outside test functions
+  expect(page.url().includes("/admin") || page.url().includes("/login")).toBeTruthy(); // ❌ DON'T: Use ambiguous assertions
+
+  // ❌ DON'T: Use try/catch to handle flaky behavior - makes tests unreliable
+  try {
+    await page.waitForLoadState("networkidle"); // ❌ DON'T: Add timeout logic in tests
+    await page.getByRole("button", { name: "Submit" }).click({ timeout: 1000 }); // ❌ DON'T: Add timeouts to actions
+  } catch (error) {
+    await page.waitForTimeout(1000); // ❌ DON'T: Add manual waits
+    console.log("Retrying..."); // ❌ DON'T: Add custom error handling
+  }
+});
+
+// ❌ DON'T: Create tests without proper organization
+test("isolated test without describe block", async ({ page }) => {
+  // ❌ DON'T: Violates organization rules
+});
+```
diff --git a/.cursor/rules/tools.mdc b/.cursor/rules/tools.mdc
index 8500bb2a0..8135674e3 100644
--- a/.cursor/rules/tools.mdc
+++ b/.cursor/rules/tools.mdc
@@ -9,6 +9,8 @@ alwaysApply: true
 * BrowserMCP: Use this to troubleshoot frontend issues. The base URL is https://localhost:9000. The website is already running, so never start it manually.
 * `[PRODUCT_MANAGEMENT_TOOL]`: Use this MCP tool to create and manage product backlog items. 
 
+If an MCP Server is not responding, instruct the user to activate it rather than using workarounds like calling `curl` when the browser MCP is unavailable.
+
 # Product Management Tools
 
 > **Update this value in ONE place:**
@@ -25,7 +27,7 @@ Use the `[CLI_ALIAS]` Developer CLI to build, test, and format backend and front
 
 Always use the Developer CLI to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`.
 
-**IMPORTANT:** Never fall back to using direct commands like `npm run format` or `dotnet test`. Always use the Developer CLI with the appropriate alias.
+**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias.
 
 ## CLI Alias Configuration
 
@@ -67,6 +69,29 @@ After you have completed a backend task and want to ensure that it works as expe
 [CLI_ALIAS] test --solution-name <solution-name>
 ```
 
+## End-to-End Test Commands
+
+```bash
+# Run all end-to-end tests except slow tests
+[CLI_ALIAS] e2e
+
+# Run end-to-end tests for specific so  lution
+[CLI_ALIAS] e2e --self-contained-system <self-contained-system-name>
+
+# Run end-to-end tests for specific browser
+[CLI_ALIAS] e2e --browser <browser-name>
+
+# Run end-to-end tests for specific search term
+[CLI_ALIAS] e2e <search-term>
+
+# Run end-to-end tests for specific test tags
+[CLI_ALIAS] e2e "@smoke"
+[CLI_ALIAS] e2e "smoke"
+[CLI_ALIAS] e2e "@comprehensive"
+```
+
+Any combination of the above parameters is possible. There are other parameters available, but you should only use the ones mentioned above.
+
 ## Format Commands
 
 Run these commands before you commit your changes.
diff --git a/.cursor/rules/workflows/create-e2e-tests.mdc b/.cursor/rules/workflows/create-e2e-tests.mdc
new file mode 100644
index 000000000..cc1091629
--- /dev/null
+++ b/.cursor/rules/workflows/create-e2e-tests.mdc
@@ -0,0 +1,64 @@
+---
+description: Workflow for creating end-to-end tests
+globs: 
+alwaysApply: false
+---
+# E2E Testing Workflow
+
+This workflow guides you through the process of creating comprehensive end-to-end tests for specific features like login and signup. It focuses on identifying what tests to write, planning complex scenarios, and ensuring tests follow the established conventions.
+
+## Workflow
+
+1. Understand the feature under test:
+   - Study the frontend components and their interactions.
+   - Review API endpoints and authentication flows.
+   - Understand validation rules and error handling.
+   - Identify key user interactions and expected behaviors.
+
+2. Use Browser MCP to explore the webapp functionality:
+   - Navigate to the application: `mcp0_browser_navigate({ url: "https://localhost:9000" })`.
+   - Interact with the feature manually to understand user flows.
+   - Take snapshots to identify UI elements and their structure.
+   - Document key interactions and expected behaviors.
+   - Note any edge cases or potential issues discovered during exploration.
+
+3. Review existing test examples:
+   - Read [End-to-End Tests](/.cursor/rules/end-to-end-tests/e2e-tests.mdc) for detailed information.
+   - Examine [signup.spec.ts](/application/account-management/WebApp/tests/e2e/signup.spec.ts) and [login.spec.ts](/application/account-management/WebApp/tests/e2e/login.spec.ts) for inspiration.
+   - Note the structure, assertions, test organization, and the "Act & Assert:" comment format.
+
+4. Plan comprehensive test scenarios:
+   - Identify standard user journeys through the feature.
+   - Plan for complex multi-session scenarios like:
+     - Concurrent sessions: What happens when a user has two tabs open?
+     - Cross-session state changes: What happens when state changes in one session affect another?
+     - Authentication conflicts: How does the system handle authentication changes across sessions?
+     - Form submissions across sessions: What happens with concurrent form submissions?
+     - Antiforgery token handling: How are antiforgery tokens managed across tabs?
+     - Browser navigation: Back/forward buttons, refresh, direct URL access.
+     - Network conditions: Slow connections, disconnections during operations.
+     - Input validation: Boundary values, special characters, extremely long inputs.
+     - Accessibility: Keyboard navigation, screen reader compatibility.
+     - Localization: Testing with different languages and formats.
+
+5. Categorize tests appropriately:
+   - `@smoke`: Essential functionality that will run on deployment of any system.
+     - Create one comprehensive smoke.spec.ts per self-contained system.
+     - Test complete user journeys: signup → profile setup → invite users → manage roles → tenant settings → logout.
+     - Include validation errors, retries, and recovery scenarios within the journey.
+   - `@comprehensive`: More thorough tests covering edge cases that will run on deployment of the system under test.
+     - Focus on specific feature areas with deep testing of edge cases.
+     - Group related scenarios to minimize test count while maximizing coverage.
+   - `@slow`: Tests involving timeouts or waiting periods that will run ad-hoc, when features under test are changed.
+
+6. Create or update test structure:
+   - For smoke tests: Create/update `application/[scs-name]/WebApp/tests/e2e/smoke.spec.ts`.
+   - For comprehensive tests: Create feature-specific files like `user-management.spec.ts`, `authentication.spec.ts`.
+   - Avoid creating many small, isolated tests - prefer comprehensive scenarios that test multiple aspects.
+
+## Key principles
+
+- Comprehensive coverage: Test all critical paths and important edge cases.
+- Follow conventions: Adhere to the established patterns in [End-to-End Tests](/.cursor/rules/end-to-end-tests/e2e-tests.mdc).
+- Clear organization: Properly categorize tests and use descriptive names.
+- Realistic user journeys: Test scenarios that reflect actual user behavior.
diff --git a/.cursor/rules/workflows/implement-product-increment.mdc b/.cursor/rules/workflows/implement-product-increment.mdc
index 42aef5124..c8adbf7d5 100644
--- a/.cursor/rules/workflows/implement-product-increment.mdc
+++ b/.cursor/rules/workflows/implement-product-increment.mdc
@@ -17,10 +17,14 @@ Follow these steps which describe in detail how you must implement the tasks in
 
   Before implementing each task, review the relevant rules thoroughly:
 
-  - For **backend tasks**:
-    - Review all the [Backend](mdc:.cursor/rules/backend) rule files.
-  - For **frontend tasks**:
-    - Review all the [Frontend](mdc:.cursor/rules/frontend) rule files.
+- For **backend tasks**:
+  - Review all the [Backend](mdc:.cursor/rules/backend) rule files.
+- For **frontend tasks**:
+  - Review all the [Frontend](mdc:.cursor/rules/frontend) rule files.
+- For **end-to-end tests**:
+  - Review the [E2E Testing Workflow](mdc:.cursor/rules/workflows/create-e2e-tests.mdc) and all the [End-to-End Tests](mdc:.cursor/rules/end-to-end-tests) rule files.
+- For **Developer CLI commands**:
+  - Review all the [Developer CLI](mdc:.cursor/rules/developer-cli) rule files.
 
 These rules define the conventions and must be strictly adhered to during implementation.
 
diff --git a/.gitignore b/.gitignore
index 82d719f94..31af6d9aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -400,3 +400,10 @@ dist/
 
 # Git submodules
 .gitmodules
+
+# Playwright E2E testing artifacts
+test-results/
+playwright-report/
+**/playwright/.cache/
+**/.auth/
+
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 8ac133d7a..579e953ad 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +1,9 @@
 {
   "recommendations": [
+    "biomejs.biome",
     "bradlc.vscode-tailwindcss",
     "ms-azuretools.vscode-bicep",
-    "github.vscode-github-actions",
-    "biomejs.biome",
+    "ms-playwright.playwright",
+    "github.vscode-github-actions"
   ]
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..8893407e9
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,64 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+        {
+      "name": "Run All Playwright Tests",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js",
+      "args": ["test"],
+      "cwd": "${workspaceFolder}/application/account-management/WebApp/tests",
+      "env": {
+        "PUBLIC_URL": "https://localhost:9000"
+      },
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Run Smoke Tests",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js",
+      "args": ["test", "--grep", "@smoke"],
+      "cwd": "${workspaceFolder}/application/account-management/WebApp/tests",
+      "env": {
+        "PUBLIC_URL": "https://localhost:9000"
+      },
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Debug Current Test (Chrome)",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js",
+      "args": ["test", "${relativeFile}", "--headed", "--project=chromium", "--timeout=0"],
+      "cwd": "${workspaceFolder}/application/account-management/WebApp/tests",
+      "env": {
+        "PUBLIC_URL": "https://localhost:9000",
+        "PWDEBUG": "0"
+      },
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "sourceMaps": true,
+      "smartStep": true,
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**"
+      ]
+    },
+    {
+      "name": "Debug with Playwright Inspector",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js",
+      "args": ["test", "${relativeFile}", "--debug", "--project=chromium"],
+      "cwd": "${workspaceFolder}/application/account-management/WebApp/tests",
+      "env": {
+        "PUBLIC_URL": "https://localhost:9000"
+      },
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f608d0476..13797a3e5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,7 +27,8 @@
     "editor.defaultFormatter": "biomejs.biome"
   },
   "files.associations": {
-    "*.css": "tailwindcss"
+    "*.css": "tailwindcss",
+    "*.spec.ts": "typescript"
   },
   "githubIssues.issueBranchTitle": "${issueNumber}-${sanitizedLowercaseIssueTitle}",
   "githubPullRequests.assignCreated": "${user}",
@@ -35,4 +36,6 @@
   "biome.lspBin": "./application/node_modules/.bin/biome",
   "biome.searchInPath": false,
   "biome.enabled": true,
+  "playwright.projectDir": "application/End2EndTests",
+  "playwright.showTrace": true,
 }
diff --git a/.windsurf/rules/end-to-end-tests/e2e-tests.md b/.windsurf/rules/end-to-end-tests/e2e-tests.md
new file mode 100644
index 000000000..4a4fc00b0
--- /dev/null
+++ b/.windsurf/rules/end-to-end-tests/e2e-tests.md
@@ -0,0 +1,263 @@
+---
+trigger: glob
+globs: */tests/e2e/**
+description: Rules for end-to-end tests
+---
+
+# End-to-End Tests
+
+These rules outline the structure, patterns, and best practices for writing end-to-end tests.
+
+## Implementation
+
+1. Use `[CLI_ALIAS] e2e` with these option categories to optimize test execution:
+   - Test filtering: `--smoke`, `--include-slow`, search terms (e.g., `"@smoke"`, `"smoke"`, `"user"`, `"localization"`), `--browser`
+   - Change scoping: `--last-failed`, `--only-changed`  
+   - Flaky test detection: `--repeat-each`, `--retries`, `--stop-on-first-failure`
+   - Performance: `--debug-timings` shows step execution times with color coding
+
+2. Test Search and Filtering:
+   - Search by test tags: `[CLI_ALIAS] e2e "@smoke"` or `[CLI_ALIAS] e2e "smoke"` (both work the same)
+   - Search by test content: `[CLI_ALIAS] e2e "user"` (finds tests with "user" in title or content)
+   - Search by filename: `[CLI_ALIAS] e2e "localization"` (finds localization-flows.spec.ts)
+   - Search by specific file: `[CLI_ALIAS] e2e "user-management-flows.spec.ts"`
+   - Multiple search terms: `[CLI_ALIAS] e2e "user" "management"`
+   - The CLI automatically detects which self-contained systems contain matching tests and only runs those
+
+3. Test-Driven Debugging Process:
+   - Focus on one failing test at a time and make it pass before moving to the next.
+   - Ensure tests use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`.
+   - Consider if root causes can be fixed in the application code, and fix application bugs rather than masking them with test workarounds.
+
+4. Organize tests in a consistent file structure:
+   - All e2e test files must be located in `[self-contained-system]/WebApp/tests/e2e/` folder (e.g., `application/account-management/WebApp/tests/e2e/`).
+   - All test files use the `*-flows.spec.ts` naming convention (e.g., `login-flows.spec.ts`, `signup-flows.spec.ts`, `user-management-flows.spec.ts`).
+   - Top-level describe blocks must use only these 3 approved tags: `test.describe("@smoke", () => {})`, `test.describe("@comprehensive", () => {})`, `test.describe("@slow", () => {})`.
+   - `@smoke` tests:
+     - Critical tests run on deployment of any self-contained system.
+     - Should be comprehensive scenarios that test core user journeys.
+     - Keep tests focused on specific flows to reduce fragility while maintaining coverage.
+     - Focus on must-work functionality with extensive validation steps.
+     - Include boundary cases and error handling within the same test scenario.
+     - Avoid testing the same functionality multiple times across different tests.
+
+   - `@comprehensive` tests:
+     - Thorough tests run when a specific self-contained system is deployed.
+     - Focus on edge cases, error conditions, and less common scenarios.
+     - Test specific features in depth with various input combinations.
+     - Include tests for concurrency, validation rules, accessibility, etc.
+     - Group related edge cases together to reduce test count while maintaining coverage.
+
+   - `@slow` tests:
+     - Optional and run only ad-hoc using `--include-slow` flag.
+     - Any tests that require waiting like `waitForTimeout` (e.g., for OTP timeouts) must be marked as `@slow`.
+     - Include tests for rate limiting with actual wait times, session timeouts, etc.
+     - Use `test.setTimeout()` at the individual test level based on actual wait times needed.
+
+5. Write clear test descriptions and documentation:
+   - Test descriptions must accurately reflect what the test covers and be kept in sync with test implementation.
+   - Use descriptive test names that clearly indicate the functionality being tested (e.g., "should handle single and bulk user deletion workflows with dashboard integration").
+   - Include JSDoc comments above complex tests listing all major features/scenarios covered.
+   - When adding new functionality to existing tests, update both the test description and JSDoc comments to reflect changes.
+
+6. Structure each test with step decorators and proper monitoring:
+   - All tests must start with `const context = createTestContext(page);` for proper error monitoring.
+   - Use step decorators: `await step("Complete signup & verify account creation")(async () => { /* test logic */ })();`
+   - Step naming conventions:
+     - Always follow "[Business action + details] & [expected outcome]" pattern.
+     - Use business action verbs like "Sign up", "Login", "Invite", "Rename", "Update", "Delete", "Create", "Submit".
+     - Never use test/assertion prefixes like "Test", "Verify", "Check", "Validate", "Ensure"; use descriptive business actions instead.
+     - Every step must include an action (arrange/act) followed by assertions, not pure assertion steps.
+   - Step structure:
+     - Use blank lines to separate arrange/act/assert sections within steps.
+     - Keep shared variable declarations outside steps when used across multiple steps.
+     - Use section headers with `// === SECTION NAME ===` to group related steps.
+     - Add JSDoc comments for complex test workflows.
+   - Use semantic selectors: `page.getByRole("button", { name: "Submit" })`, `page.getByText("Welcome")`, `page.getByLabel("Email")`.
+   - Assert side effects immediately after actions using `expectToastMessage`, `expectValidationError`, `expectNetworkErrors`.
+   - Form validation pattern: Use `await blurActiveElement(page);` when updating a textbox the second time before submitting a form to trigger validation.
+
+7. Timeout Configuration:
+   - Always use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`.
+   - Never add timeouts to `.click()`, `.waitForSelector()`, etc.
+   - Global timeout configuration is handled in the shared Playwright. Don't change this.
+
+8. Write deterministic tests - This is critical for reliable testing:
+   - Each test should have a clear, linear flow of actions and assertions.
+   - Never use if statements, custom error handling, or try/catch blocks in tests.
+   - Never use regular expressions in tests; use simple string matching instead.
+
+9. What to test:
+   - Enter invalid values, such as empty strings, only whitespace characters, long strings, negative numbers, Unicode, etc.
+   - Tooltips, keyboard navigation, accessibility, validation messages, translations, responsiveness, etc.
+
+10. Test Fixtures and Page Management:
+   - Use appropriate fixtures: `{ page }` for basic tests, `{ anonymousPage }` for tests with existing tenant/owner but not logged in, `{ ownerPage }`, `{ adminPage }`, `{ memberPage }` for authenticated tests.
+   - Destructure anonymous page data: `const { page, tenant } = anonymousPage; const existingUser = tenant.owner;`
+   - Pre-logged in users (`ownerPage`, `adminPage`, `memberPage`) are isolated between workers and will not conflict between tests.
+   - When using pre-logged in users, do not put the tenant or user into an invalid state that could affect other tests.
+
+11. Test Data and Constants:
+   - Use underscore separators: `const timeout = 30_000; // 30 seconds`
+   - Generate unique data: `const email = uniqueEmail();`
+   - Use faker.js to generate realistic test data: `const firstName = faker.person.firstName(); const email = faker.internet.email();`
+   - Long string testing: `const longEmail = \`${"a".repeat(90)}@example.com\`; // 101 characters total`
+
+12. Memory Management in E2E Tests:
+    - Playwright automatically handles browser context cleanup after tests
+    - Manual cleanup steps are unnecessary - focus on test clarity over micro-optimizations
+    - E2E test suites have minimal memory leak concerns due to their limited scope and duration
+
+## Examples
+
+### ✅ Good Step Naming Examples
+```typescript
+// ✅ DO: Business action + details & expected outcome
+await step("Submit invalid email & verify validation error")(async () => {
+  await page.getByLabel("Email").fill("invalid-email");
+  await blurActiveElement(page);
+  
+  await expectValidationError(context, "Invalid email.");
+})();
+
+await step("Sign up with valid credentials & verify account creation")(async () => {
+  await page.getByRole("button", { name: "Submit" }).click();
+  
+  await expect(page.getByText("Welcome")).toBeVisible();
+})();
+
+await step("Update user role to admin & verify permission change")(async () => {
+  const userRow = page.locator("tbody tr").first();
+  
+  await userRow.getByLabel("User actions").click();
+  await page.getByRole("menuitem", { name: "Change role" }).click();
+  
+  await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible();
+})();
+```
+
+### ❌ Bad Step Naming Examples
+```typescript
+// ❌ DON'T: Pure assertion steps without actions
+await step("Verify button is visible")(async () => {
+  await expect(page.getByRole("button")).toBeVisible(); // No action, only assertion
+})();
+
+// ❌ DON'T: Using test/assertion prefixes
+await step("Check user permissions")(async () => { // "Check" is assertion prefix
+  await expect(page.getByText("Admin")).toBeVisible();
+})();
+
+await step("Validate form state")(async () => { // "Validate" is assertion prefix
+  await expect(page.getByRole("textbox")).toBeEmpty();
+})();
+
+await step("Ensure user is deleted")(async () => { // "Ensure" is assertion prefix
+  await expect(page.getByText("user@example.com")).not.toBeVisible();
+})();
+```
+
+### ✅ Complete Test Example
+```typescript
+import { step } from "@shared/e2e/utils/step-decorator";
+import { expectValidationError, blurActiveElement, createTestContext } from "@shared/e2e/utils/test-assertions";
+import { testUser } from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  test("should complete signup with validation", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Submit invalid email & verify validation error")(async () => {
+      await page.goto("/signup");
+      await page.getByLabel("Email").fill("invalid-email");
+      await blurActiveElement(page); // ✅ DO: Trigger validation when updating textbox second time
+
+      await expectValidationError(context, "Invalid email.");
+    })();
+
+    await step("Sign up with valid email & verify verification redirect")(async () => {
+      await page.getByLabel("Email").fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/verify");
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  test("should handle user management with pre-logged owner", async ({ ownerPage }) => {
+    createTestContext(ownerPage); // ✅ DO: Create context for pre-logged users
+
+    await step("Access user management & verify owner permissions")(async () => {
+      await ownerPage.getByRole("button", { name: "Users" }).click();
+
+      await expect(ownerPage.getByRole("heading", { name: "Users" })).toBeVisible();
+    })();
+  });
+});
+
+test.describe("@slow", () => {
+  const requestNewCodeTimeout = 30_000; // 30 seconds
+  const codeValidationTimeout = 60_000; // 5 minutes
+  const sessionTimeout = codeValidationTimeout + 60_000; // 6 minutes
+
+  test("should handle user logout after to many login attempts", async ({ page }) => { // ✅ DO: use new page, when testing e.g. account lockout
+    test.setTimeout(sessionTimeout); // ✅ DO: Set timeout based on actual wait times
+    const context = createTestContext(page);
+
+    // ...
+
+    await step("Wait for code expiration & verify timeout behavior")(async () => {
+      await page.goto("/login/verify");
+      await page.waitForTimeout(codeValidationTimeout); // ✅ DO: Use actual waits in @slow tests
+
+      await expect(page.getByText("Your verification code has expired")).toBeVisible();
+    })();
+  });
+});
+```
+
+```typescript
+test.describe("@security", () => { // ❌ DON'T: Don't invent new tags - use @smoke, @comprehensive, @slow only
+  test("should handle login", async ({ page }) => {
+    // ❌ DON'T: Skip createTestContext(page); step
+    page.setDefaultTimeout(5000); // ❌ DON'T: Set timeouts manually - use global config
+    
+    // ❌ DON'T: Use test/assertion prefixes in step descriptions
+    await step("Test login functionality")(async () => { // ❌ Should be "Submit login form & verify authentication"
+    await step("Verify button is visible")(async () => { // ❌ Should be "Navigate to page & verify button is visible"
+    await step("Check user permissions")(async () => { // ❌ Should be "Click user menu & verify permissions"
+      if (page.url().includes("/login/verify")) { // ❌ DON'T: Add conditional logic - tests should be linear
+        await page.waitForTimeout(2000); // ❌ DON'T: Add manual timeouts
+        // Continue with verification... // ❌ DON'T: Write verbose explanatory comments
+      }
+      
+      await page.click("#submit-btn"); // ❌ DON'T: Use CSS selectors - use semantic selectors
+      
+      // ❌ DON'T: Skip assertions for side effects
+    })();
+
+    // ❌ DON'T: Use regular expressions - use simple string matching instead
+    await expect(page.getByText(/welcome.*home/i)).toBeVisible(); // ❌ Should be: page.getByText("Welcome home")
+    await expect(page.locator('input[name*="email"]')).toBeFocused(); // ❌ Should be: page.getByLabel("Email")
+  });
+
+  // ❌ DON'T: Place assertions outside test functions
+  expect(page.url().includes("/admin") || page.url().includes("/login")).toBeTruthy(); // ❌ DON'T: Use ambiguous assertions
+
+  // ❌ DON'T: Use try/catch to handle flaky behavior - makes tests unreliable
+  try {
+    await page.waitForLoadState("networkidle"); // ❌ DON'T: Add timeout logic in tests
+    await page.getByRole("button", { name: "Submit" }).click({ timeout: 1000 }); // ❌ DON'T: Add timeouts to actions
+  } catch (error) {
+    await page.waitForTimeout(1000); // ❌ DON'T: Add manual waits
+    console.log("Retrying..."); // ❌ DON'T: Add custom error handling
+  }
+});
+
+// ❌ DON'T: Create tests without proper organization
+test("isolated test without describe block", async ({ page }) => {
+  // ❌ DON'T: Violates organization rules
+});
+```
diff --git a/.windsurf/rules/tools.md b/.windsurf/rules/tools.md
index c9ba94473..87db2f21d 100644
--- a/.windsurf/rules/tools.md
+++ b/.windsurf/rules/tools.md
@@ -9,6 +9,8 @@ description: You have access to several tools and MCP servers
 * BrowserMCP: Use this to troubleshoot frontend issues. The base URL is https://localhost:9000. The website is already running, so never start it manually.
 * `[PRODUCT_MANAGEMENT_TOOL]`: Use this MCP tool to create and manage product backlog items. 
 
+If an MCP Server is not responding, instruct the user to activate it rather than using workarounds like calling `curl` when the browser MCP is unavailable.
+
 # Product Management Tools
 
 > **Update this value in ONE place:**
@@ -25,7 +27,7 @@ Use the `[CLI_ALIAS]` Developer CLI to build, test, and format backend and front
 
 Always use the Developer CLI to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`.
 
-**IMPORTANT:** Never fall back to using direct commands like `npm run format` or `dotnet test`. Always use the Developer CLI with the appropriate alias.
+**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias.
 
 ## CLI Alias Configuration
 
@@ -67,6 +69,29 @@ After you have completed a backend task and want to ensure that it works as expe
 [CLI_ALIAS] test --solution-name <solution-name>
 ```
 
+## End-to-End Test Commands
+
+```bash
+# Run all end-to-end tests except slow tests
+[CLI_ALIAS] e2e
+
+# Run end-to-end tests for specific so  lution
+[CLI_ALIAS] e2e --self-contained-system <self-contained-system-name>
+
+# Run end-to-end tests for specific browser
+[CLI_ALIAS] e2e --browser <browser-name>
+
+# Run end-to-end tests for specific search term
+[CLI_ALIAS] e2e <search-term>
+
+# Run end-to-end tests for specific test tags
+[CLI_ALIAS] e2e "@smoke"
+[CLI_ALIAS] e2e "smoke"
+[CLI_ALIAS] e2e "@comprehensive"
+```
+
+Any combination of the above parameters is possible. There are other parameters available, but you should only use the ones mentioned above.
+
 ## Format Commands
 
 Run these commands before you commit your changes.
diff --git a/.windsurf/workflows/create-e2e-tests.md b/.windsurf/workflows/create-e2e-tests.md
new file mode 100644
index 000000000..90aca4bf0
--- /dev/null
+++ b/.windsurf/workflows/create-e2e-tests.md
@@ -0,0 +1,63 @@
+---
+description: Workflow for creating end-to-end tests
+---
+
+# E2E Testing Workflow
+
+This workflow guides you through the process of creating comprehensive end-to-end tests for specific features like login and signup. It focuses on identifying what tests to write, planning complex scenarios, and ensuring tests follow the established conventions.
+
+## Workflow
+
+1. Understand the feature under test:
+   - Study the frontend components and their interactions.
+   - Review API endpoints and authentication flows.
+   - Understand validation rules and error handling.
+   - Identify key user interactions and expected behaviors.
+
+2. Use Browser MCP to explore the webapp functionality:
+   - Navigate to the application: `mcp0_browser_navigate({ url: "https://localhost:9000" })`.
+   - Interact with the feature manually to understand user flows.
+   - Take snapshots to identify UI elements and their structure.
+   - Document key interactions and expected behaviors.
+   - Note any edge cases or potential issues discovered during exploration.
+
+3. Review existing test examples:
+   - Read [End-to-End Tests](/.windsurf/rules/end-to-end-tests/e2e-tests.md) for detailed information.
+   - Examine [signup.spec.ts](/application/account-management/WebApp/tests/e2e/signup.spec.ts) and [login.spec.ts](/application/account-management/WebApp/tests/e2e/login.spec.ts) for inspiration.
+   - Note the structure, assertions, test organization, and the "Act & Assert:" comment format.
+
+4. Plan comprehensive test scenarios:
+   - Identify standard user journeys through the feature.
+   - Plan for complex multi-session scenarios like:
+     - Concurrent sessions: What happens when a user has two tabs open?
+     - Cross-session state changes: What happens when state changes in one session affect another?
+     - Authentication conflicts: How does the system handle authentication changes across sessions?
+     - Form submissions across sessions: What happens with concurrent form submissions?
+     - Antiforgery token handling: How are antiforgery tokens managed across tabs?
+     - Browser navigation: Back/forward buttons, refresh, direct URL access.
+     - Network conditions: Slow connections, disconnections during operations.
+     - Input validation: Boundary values, special characters, extremely long inputs.
+     - Accessibility: Keyboard navigation, screen reader compatibility.
+     - Localization: Testing with different languages and formats.
+
+5. Categorize tests appropriately:
+   - `@smoke`: Essential functionality that will run on deployment of any system.
+     - Create one comprehensive smoke.spec.ts per self-contained system.
+     - Test complete user journeys: signup → profile setup → invite users → manage roles → tenant settings → logout.
+     - Include validation errors, retries, and recovery scenarios within the journey.
+   - `@comprehensive`: More thorough tests covering edge cases that will run on deployment of the system under test.
+     - Focus on specific feature areas with deep testing of edge cases.
+     - Group related scenarios to minimize test count while maximizing coverage.
+   - `@slow`: Tests involving timeouts or waiting periods that will run ad-hoc, when features under test are changed.
+
+6. Create or update test structure:
+   - For smoke tests: Create/update `application/[scs-name]/WebApp/tests/e2e/smoke.spec.ts`.
+   - For comprehensive tests: Create feature-specific files like `user-management.spec.ts`, `authentication.spec.ts`.
+   - Avoid creating many small, isolated tests - prefer comprehensive scenarios that test multiple aspects.
+
+## Key principles
+
+- Comprehensive coverage: Test all critical paths and important edge cases.
+- Follow conventions: Adhere to the established patterns in [End-to-End Tests](/.windsurf/rules/end-to-end-tests/e2e-tests.md).
+- Clear organization: Properly categorize tests and use descriptive names.
+- Realistic user journeys: Test scenarios that reflect actual user behavior.
diff --git a/.windsurf/workflows/implement-product-increment.md b/.windsurf/workflows/implement-product-increment.md
index eb36381f4..8b477e423 100644
--- a/.windsurf/workflows/implement-product-increment.md
+++ b/.windsurf/workflows/implement-product-increment.md
@@ -16,10 +16,14 @@ Follow these steps which describe in detail how you must implement the tasks in
 
   Before implementing each task, review the relevant rules thoroughly:
 
-  - For **backend tasks**:
-    - Review all the [Backend](/.windsurf/rules/backend) rule files.
-  - For **frontend tasks**:
-    - Review all the [Frontend](/.windsurf/rules/frontend) rule files.
+- For **backend tasks**:
+  - Review all the [Backend](/.windsurf/rules/backend) rule files.
+- For **frontend tasks**:
+  - Review all the [Frontend](/.windsurf/rules/frontend) rule files.
+- For **end-to-end tests**:
+  - Review the [E2E Testing Workflow](/.windsurf/workflows/create-e2e-tests.md) and all the [End-to-End Tests](/.windsurf/rules/end-to-end-tests) rule files.
+- For **Developer CLI commands**:
+  - Review all the [Developer CLI](/.windsurf/rules/developer-cli) rule files.
 
 These rules define the conventions and must be strictly adhered to during implementation.
 
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 000000000..09f47617c
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,173 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Main Entry Point
+
+This is the main entry point for AI-based development when working with this codebase, but also serves as a great reference for developers.
+
+Always follow these rule files very carefully, as they have been crafted to ensure consistency and high-quality code.
+
+## High-Level Problem Solving Strategy
+
+1. Understand the problem deeply. Carefully read the instructions and think critically about what is required.
+2. Investigate the codebase. Explore relevant files, search for key functions, and gather context.
+3. Develop a clear, step-by-step plan. Break down the fix into manageable, incremental steps.
+4. Before each code change, always consult the relevant rule files, and follow the rules very carefully.
+   - Failure to follow the rules is the main reason for making unacceptable changes.
+5. Iterate until you are extremely confident the fix is complete.
+   - When changing code, do not add comments about what you changed.
+6. After each change, make sure you follow the rules in Backend Rules or Frontend Rules on how to correctly use the [CLI_ALIAS] CLI tool for building, testing, and formatting the code.
+   - Failure to use the [CLI_ALIAS] CLI tool after each change is the second most common reason for making unacceptable changes.
+   - Always use the [CLI_ALIAS] CLI commands as described in Tools for building, testing, formatting, and inspecting code.
+
+## Rules for implementing changes
+
+Always consult the relevant rule files before each code change.
+
+Please note that I often correct or even revert code you generated. If you notice that, take special care not to revert my changes.
+
+Commit messages should be in imperative form, start with a capital letter, avoid ending punctuation, be a single line, and concisely describe changes and motivation.
+
+## CLI Alias Configuration
+
+The `[CLI_ALIAS]` is configured as `pp` (PlatformPlatform CLI). This Developer CLI should be used for all build, test, and format operations instead of direct commands.
+
+**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias.
+
+## Build Commands
+
+Use these commands continuously when you are working on the codebase.
+
+```bash
+# Build both backend and frontend
+pp build
+
+# Build only backend
+pp build --backend
+
+# Build specific backend solution
+pp build --backend --solution-name <solution-name>
+
+# Build only frontend
+pp build --frontend
+```
+
+## Test Commands
+
+After you have completed a backend task and want to ensure that it works as expected, run the test commands.
+
+```bash
+# Run all tests
+pp test
+
+# Run tests for specific solution
+pp test --solution-name <solution-name>
+```
+
+## End-to-End Test Commands
+
+```bash
+# Run all end-to-end tests except slow tests
+pp e2e
+
+# Run end-to-end tests for specific solution
+pp e2e --self-contained-system <self-contained-system-name>
+
+# Run end-to-end tests for specific browser
+pp e2e --browser <browser-name>
+
+# Run end-to-end tests for specific test
+pp e2e --grep <test-name>
+
+# Run end-to-end tests for specific test and browser
+pp e2e --grep "@tag"
+
+# Include slow tests (excluded by default)
+pp e2e --include-slow
+```
+
+## Format Commands
+
+Run these commands before you commit your changes.
+
+```bash
+# Format both backend and frontend (run this before commit)
+pp format
+
+# Format only backend (run this before commit)
+pp format --backend
+
+# Format specific backend solution (run this before commit)
+pp format --backend --solution-name <solution-name>
+
+# Format only frontend (run this before commit)
+pp format --frontend
+```
+## Rules for implementing changes
+
+Always consult the relevant rule files before each code change.
+
+*General Rules*:
+- [Tools](/.windsurf/rules/tools.md) - Rules for how to use Developer CLI tools to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`.
+
+*Backend*:
+- [Backend](/.windsurf/rules/backend/backend.md) - Core rules for C# development and tooling
+- [API Endpoints](/.windsurf/rules/backend/api-endpoints.md) - Rules for ASP.NET minimal API endpoints
+- [Commands](/.windsurf/rules/backend/commands.md) - Rules for implementing CQRS commands, validation, handlers, and structure
+- [Database Migrations](/.windsurf/rules/backend/database-migrations.md) - Rules for creating database migrations
+- [Domain Modeling](/.windsurf/rules/backend/domain-modeling.md) - Rules for creating DDD aggregates, entities, value objects, and Entity Framework configuration
+- [External Integrations](/.windsurf/rules/backend/external-integrations.md) - Rules for creating external integration services
+- [Queries](/.windsurf/rules/backend/queries.md) - Rules for CQRS queries, including structure, validation, response types, and mapping
+- [Repositories](/.windsurf/rules/backend/repositories.md) - Rules for DDD repositories, including tenant scoping, interface conventions, and use of Entity Framework
+- [Strongly Typed IDs](/.windsurf/rules/backend/strongly-typed-ids.md) - Rules for creating strongly typed IDs for DDD aggregates and entities
+- [Telemetry Events](/.windsurf/rules/backend/telemetry-events.md) - Rules for telemetry events including important rules of where to create events, naming, and what properties to track
+- [API Tests](/.windsurf/rules/backend/api-tests.md) - Rules for writing backend API tests
+
+*Frontend*:
+- [Frontend](/.windsurf/rules/frontend/frontend.md) - Core rules for frontend TypeScript and React development
+  - [Form with Validation](/.windsurf/rules/frontend/form-with-validation.md) - Rules for forms with validation using React Aria Components
+  - [Modal Dialog](/.windsurf/rules/frontend/modal-dialog.md) - Rules for modal dialogs using React Aria Components
+  - [React Aria Components](/.windsurf/rules/frontend/react-aria-components.md) - Rules for using React Aria Components
+  - [TanStack Query API Integration](/.windsurf/rules/frontend/tanstack-query-api-integration.md) - Rules for using TanStack Query with backend APIs
+  - [Translations](/.windsurf/rules/frontend/translations.md) - Rules for translations and internationalization
+
+*Infrastructure*:
+- [Infrastructure](/.windsurf/rules/infrastructure/infrastructure.md) - Rules for cloud infrastructure and deployment
+
+*Developer CLI*:
+- [Developer CLI](/.windsurf/rules/developer-cli/developer-cli.md) - Rules for implementing Developer CLI commands
+
+*Workflows*:
+- [AI Rules Workflow](/.windsurf/workflows/ai-rules.md) - Workflow for creating and maintaining AI rules
+- [Code Review Workflow](/.windsurf/workflows/code-review.md) - Workflow for code review of branches, uncommitted changes, or files
+- [Git Commits Workflow](/.windsurf/workflows/git-commits.md) - Workflow for writing effective git commit messages
+- [Pull Request Workflow](/.windsurf/workflows/pull-request.md) - Workflow for writing pull request titles and descriptions
+- [Update Windsurf Rules Workflow](/.windsurf/workflows/update-windsurfrules.md) - Rules for updating the .windsurfrules file which is used by Windsurf's JetBrains Add-in.
+
+*End-to-End Testing*:
+- [End-to-End Testing](/.windsurf/rules/e2e/e2e.md) - Rules for end-to-end testing
+
+## Project Structure
+
+This is a mono repository with multiple self-contained systems (SCS), each being a small monolith. All SCSs follow the same structure.
+
+- **application/**: Contains application code:
+  - **account-management/**: An SCS for tenant and user management:
+    - **WebApp/**: A React, TypeScript SPA.
+    - **Api/**: .NET 9 minimal API.
+    - **Core/**: .NET 9 Vertical Sliced Architecture.
+    - **Workers/**: A .NET Console job.
+    - **Tests/**: xUnit tests for backend.
+  - **back-office/**: An empty SCS that will be used to create tools for Support and System Admins:
+    - **WebApp/**: A React, TypeScript SPA.
+    - **Api/**: .NET 9 minimal API.
+    - **Core/**: .NET 9 Vertical Sliced Architecture.
+    - **Workers/**: A .NET Console job.
+    - **Tests/**: xUnit tests for backend.
+  - **AppHost/**: .NET Aspire project for orchestrating SCSs and Docker containers. Never run directly—typically running in watch mode.
+  - **AppGateway/**: Main entry point using .NET YARP as reverse proxy for all SCSs.
+  - **shared-kernel/**: Reusable .NET backend shared by all SCSs.
+  - **shared-webapp/**: Reusable frontend shared by all SCSs.
+- **cloud-infrastructure/**: Bash and Azure Bicep scripts (IaC).
+- **developer-cli/**: A .NET CLI tool for automating common developer tasks.
diff --git a/application/README.md b/application/README.md
index 0b8810558..c34eee9ad 100644
--- a/application/README.md
+++ b/application/README.md
@@ -51,7 +51,7 @@ Self-contained systems in PlatformPlatform are divided into the following core p
             RuleFor(x => x)
                 .MustAsync((x, cancellationToken)=> userRepository.IsEmailFreeAsync(x.TenantId, x.Email, cancellationToken))
                 .WithName("Email")
-                .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.")
+                .WithMessage(x => $"The user with '{x.Email}' already exists.")
                 .When(x => !string.IsNullOrEmpty(x.Email));
         }
     }
diff --git a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
index e8a712893..4a338d30d 100644
--- a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
+++ b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
@@ -34,7 +34,11 @@ public async Task<Result> Handle(CompleteLoginCommand command, CancellationToken
     {
         var login = await loginRepository.GetByIdAsync(command.Id, cancellationToken);
 
-        if (login is null) return Result.NotFound($"Login with id '{command.Id}' not found.");
+        if (login is null)
+        {
+            // For security, avoid confirming the existence of login IDs
+            return Result.BadRequest("The code is wrong or no longer valid.");
+        }
 
         if (login.Completed)
         {
diff --git a/application/account-management/Core/Features/Authentication/Commands/StartLogin.cs b/application/account-management/Core/Features/Authentication/Commands/StartLogin.cs
index 779e48b18..fa779e73c 100644
--- a/application/account-management/Core/Features/Authentication/Commands/StartLogin.cs
+++ b/application/account-management/Core/Features/Authentication/Commands/StartLogin.cs
@@ -24,7 +24,7 @@ public sealed class StartLoginValidator : AbstractValidator<StartLoginCommand>
 {
     public StartLoginValidator()
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
+        RuleFor(x => x.Email).SetValidator(new SharedValidations.Email());
     }
 }
 
diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs
index 02684c4ac..94f395f6b 100644
--- a/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs
+++ b/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs
@@ -37,11 +37,6 @@ public async Task<Result<ResendEmailConfirmationCodeResponse>> Handle(ResendEmai
             return Result<ResendEmailConfirmationCodeResponse>.BadRequest($"The email confirmation with id {emailConfirmation.Id} has already been completed.");
         }
 
-        if (emailConfirmation.ModifiedAt > TimeProvider.System.GetUtcNow().AddSeconds(-30))
-        {
-            return Result<ResendEmailConfirmationCodeResponse>.BadRequest("You must wait at least 30 seconds before requesting a new code.");
-        }
-
         if (emailConfirmation.ResendCount >= EmailConfirmation.MaxResends)
         {
             events.CollectEvent(new EmailConfirmationResendBlocked(emailConfirmation.Id, emailConfirmation.Type, emailConfirmation.RetryCount));
diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs
index 7c1f8abcd..f3c7b2018 100644
--- a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs
+++ b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs
@@ -20,9 +20,9 @@ public sealed class StartEmailConfirmationValidator : AbstractValidator<StartEma
 {
     public StartEmailConfirmationValidator()
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
-        RuleFor(x => x.EmailSubject).NotEmpty().MaximumLength(100);
-        RuleFor(x => x.EmailBody.Contains("{oneTimePassword}")).Equal(true);
+        RuleFor(x => x.Email).SetValidator(new SharedValidations.Email());
+        RuleFor(x => x.EmailSubject).Length(1, 100).WithMessage("Email subject must be between 1 and 100 characters.");
+        RuleFor(x => x.EmailBody.Contains("{oneTimePassword}")).Equal(true).WithMessage("Email body must contain {oneTimePassword} placeholder.");
     }
 }
 
@@ -36,12 +36,8 @@ public async Task<Result<StartEmailConfirmationResponse>> Handle(StartEmailConfi
     {
         var existingConfirmations = emailConfirmationRepository.GetByEmail(command.Email).ToArray();
 
-        if (existingConfirmations.Any(c => !c.HasExpired()))
-        {
-            return Result<StartEmailConfirmationResponse>.Conflict("Email confirmation for this email has already been started. Please check your spam folder.");
-        }
-
-        if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddDays(-1)) > 3)
+        var lockoutMinutes = command.Type == EmailConfirmationType.Signup ? -60 : -15;
+        if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddMinutes(lockoutMinutes)) >= 3)
         {
             return Result<StartEmailConfirmationResponse>.TooManyRequests("Too many attempts to confirm this email address. Please try again later.");
         }
diff --git a/application/account-management/Core/Features/Signups/Commands/StartSignup.cs b/application/account-management/Core/Features/Signups/Commands/StartSignup.cs
index 7d89213ec..e1bb050e5 100644
--- a/application/account-management/Core/Features/Signups/Commands/StartSignup.cs
+++ b/application/account-management/Core/Features/Signups/Commands/StartSignup.cs
@@ -22,7 +22,7 @@ public sealed class StartSignupValidator : AbstractValidator<StartSignupCommand>
 {
     public StartSignupValidator(ITenantRepository tenantRepository)
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
+        RuleFor(x => x.Email).SetValidator(new SharedValidations.Email());
     }
 }
 
diff --git a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
index 47b27012f..487ec7127 100644
--- a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
+++ b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
@@ -16,10 +16,7 @@ public sealed class UpdateCurrentTenantValidator : AbstractValidator<UpdateCurre
 {
     public UpdateCurrentTenantValidator()
     {
-        RuleFor(x => x.Name).NotEmpty();
-        RuleFor(x => x.Name).Length(1, 30)
-            .WithMessage("Name must be between 1 and 30 characters.")
-            .When(x => !string.IsNullOrEmpty(x.Name));
+        RuleFor(x => x.Name).Length(1, 30).WithMessage("Name must be between 1 and 30 characters.");
     }
 }
 
diff --git a/application/account-management/Core/Features/Users/Commands/CreateUser.cs b/application/account-management/Core/Features/Users/Commands/CreateUser.cs
index a6db7e2fb..a8d13fec2 100644
--- a/application/account-management/Core/Features/Users/Commands/CreateUser.cs
+++ b/application/account-management/Core/Features/Users/Commands/CreateUser.cs
@@ -1,5 +1,4 @@
 using FluentValidation;
-using PlatformPlatform.AccountManagement.Features.Tenants.Domain;
 using PlatformPlatform.AccountManagement.Features.Users.Domain;
 using PlatformPlatform.AccountManagement.Features.Users.Shared;
 using PlatformPlatform.AccountManagement.Integrations.Gravatar;
@@ -20,15 +19,9 @@ internal sealed record CreateUserCommand(TenantId TenantId, string Email, UserRo
 
 internal sealed class CreateUserValidator : AbstractValidator<CreateUserCommand>
 {
-    public CreateUserValidator(IUserRepository userRepository, ITenantRepository tenantRepository)
+    public CreateUserValidator()
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
-
-        RuleFor(x => x)
-            .MustAsync((x, cancellationToken) => userRepository.IsEmailFreeAsync(x.Email, cancellationToken))
-            .WithName("Email")
-            .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.")
-            .When(x => !string.IsNullOrEmpty(x.Email));
+        RuleFor(x => x.Email).SetValidator(new SharedValidations.Email());
     }
 }
 
@@ -47,6 +40,11 @@ public async Task<Result<UserId>> Handle(CreateUserCommand command, Cancellation
             throw new UnreachableException("Only when signing up a new tenant, is the TenantID allowed to different than the current tenant.");
         }
 
+        if (await userRepository.IsEmailFreeAsync(command.Email, cancellationToken) == false)
+        {
+            return Result<UserId>.BadRequest($"The user with '{command.Email}' already exists.");
+        }
+
         var locale = SinglePageAppConfiguration.SupportedLocalizations.Contains(command.PreferredLocale)
             ? command.PreferredLocale
             : string.Empty;
diff --git a/application/account-management/Core/Features/Users/Commands/InviteUser.cs b/application/account-management/Core/Features/Users/Commands/InviteUser.cs
index 269787e54..cd5ab2755 100644
--- a/application/account-management/Core/Features/Users/Commands/InviteUser.cs
+++ b/application/account-management/Core/Features/Users/Commands/InviteUser.cs
@@ -18,19 +18,14 @@ public sealed record InviteUserCommand(string Email) : ICommand, IRequest<Result
 
 public sealed class InviteUserValidator : AbstractValidator<InviteUserCommand>
 {
-    public InviteUserValidator(IUserRepository userRepository)
+    public InviteUserValidator()
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
-
-        RuleFor(x => x)
-            .MustAsync((x, cancellationToken) => userRepository.IsEmailFreeAsync(x.Email, cancellationToken))
-            .WithName("Email")
-            .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.")
-            .When(x => !string.IsNullOrEmpty(x.Email));
+        RuleFor(x => x.Email).SetValidator(new SharedValidations.Email());
     }
 }
 
 public sealed class InviteUserHandler(
+    IUserRepository userRepository,
     IEmailClient emailClient,
     IExecutionContext executionContext,
     IMediator mediator,
@@ -44,6 +39,11 @@ public async Task<Result> Handle(InviteUserCommand command, CancellationToken ca
             return Result.Forbidden("Only owners are allowed to invite other users.");
         }
 
+        if (await userRepository.IsEmailFreeAsync(command.Email, cancellationToken) == false)
+        {
+            return Result.BadRequest($"The user with '{command.Email}' already exists.");
+        }
+
         var result = await mediator.Send(
             new CreateUserCommand(executionContext.TenantId!, command.Email, UserRole.Member, false, null), cancellationToken
         );
diff --git a/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs b/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs
index 06ce179ad..c68338347 100644
--- a/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs
+++ b/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs
@@ -3,16 +3,13 @@
 using PlatformPlatform.AccountManagement.Features.Users.Domain;
 using PlatformPlatform.SharedKernel.Cqrs;
 using PlatformPlatform.SharedKernel.Telemetry;
-using PlatformPlatform.SharedKernel.Validation;
 
 namespace PlatformPlatform.AccountManagement.Features.Users.Commands;
 
 [PublicAPI]
-public sealed record UpdateCurrentUserCommand(string Email, string FirstName, string LastName, string Title)
+public sealed record UpdateCurrentUserCommand(string FirstName, string LastName, string Title)
     : ICommand, IRequest<Result>
 {
-    public string Email { get; } = Email.ToLower().Trim();
-
     public string FirstName { get; } = FirstName.Trim();
 
     public string LastName { get; } = LastName.Trim();
@@ -24,9 +21,8 @@ public sealed class UpdateCurrentUserValidator : AbstractValidator<UpdateCurrent
 {
     public UpdateCurrentUserValidator()
     {
-        RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email());
-        RuleFor(x => x.FirstName).NotEmpty().MaximumLength(30).WithMessage("First name must be no longer than 30 characters.");
-        RuleFor(x => x.LastName).NotEmpty().MaximumLength(30).WithMessage("Last name must be no longer than 30 characters.");
+        RuleFor(x => x.FirstName).Length(1, 30).WithMessage("First name must be between 1 and 30 characters.");
+        RuleFor(x => x.LastName).Length(1, 30).WithMessage("Last name must be between 1 and 30 characters.");
         RuleFor(x => x.Title).MaximumLength(50).WithMessage("Title must be no longer than 50 characters.");
     }
 }
@@ -38,7 +34,6 @@ public async Task<Result> Handle(UpdateCurrentUserCommand command, CancellationT
     {
         var user = await userRepository.GetLoggedInUserAsync(cancellationToken);
 
-        user.UpdateEmail(command.Email);
         user.Update(command.FirstName, command.LastName, command.Title);
         userRepository.Update(user);
 
diff --git a/application/account-management/Core/Features/Users/Queries/GetUsers.cs b/application/account-management/Core/Features/Users/Queries/GetUsers.cs
index 8753a41eb..b33fb4ba6 100644
--- a/application/account-management/Core/Features/Users/Queries/GetUsers.cs
+++ b/application/account-management/Core/Features/Users/Queries/GetUsers.cs
@@ -42,9 +42,9 @@ public sealed class GetUsersQueryValidator : AbstractValidator<GetUsersQuery>
 {
     public GetUsersQueryValidator()
     {
-        RuleFor(x => x.Search).MaximumLength(100).WithMessage("The search term must be at most 100 characters.");
-        RuleFor(x => x.PageSize).InclusiveBetween(0, 1000).WithMessage("The page size must be between 0 and 1000.");
-        RuleFor(x => x.PageOffset).GreaterThanOrEqualTo(0).WithMessage("The page offset must be greater than or equal to 0.");
+        RuleFor(x => x.Search).MaximumLength(100).WithMessage("Search must be no longer than 100 characters.");
+        RuleFor(x => x.PageSize).InclusiveBetween(0, 1000).WithMessage("Page size must be between 0 and 1000.");
+        RuleFor(x => x.PageOffset).GreaterThanOrEqualTo(0).WithMessage("Page offset must be greater than or equal to 0.");
     }
 }
 
diff --git a/application/account-management/Tests/Authentication/CompleteLoginTests.cs b/application/account-management/Tests/Authentication/CompleteLoginTests.cs
index 56cdd55f3..c57ae8270 100644
--- a/application/account-management/Tests/Authentication/CompleteLoginTests.cs
+++ b/application/account-management/Tests/Authentication/CompleteLoginTests.cs
@@ -47,7 +47,7 @@ public async Task CompleteLogin_WhenValid_ShouldCompleteLoginAndCreateTokens()
     }
 
     [Fact]
-    public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnNotFound()
+    public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnBadRequest()
     {
         // Arrange
         var invalidLoginId = LoginId.NewId();
@@ -57,8 +57,7 @@ public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnNotFound()
         var response = await AnonymousHttpClient.PostAsJsonAsync($"/api/account-management/authentication/login/{invalidLoginId}/complete", command);
 
         // Assert
-        var expectedDetail = $"Login with id '{invalidLoginId}' not found.";
-        await response.ShouldHaveErrorStatusCode(HttpStatusCode.NotFound, expectedDetail);
+        await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, "The code is wrong or no longer valid.");
 
         TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse();
         TelemetryEventsCollectorSpy.CollectedEvents.Should().BeEmpty();
diff --git a/application/account-management/Tests/Authentication/StartLoginTests.cs b/application/account-management/Tests/Authentication/StartLoginTests.cs
index 65ecf702f..09d0cf64b 100644
--- a/application/account-management/Tests/Authentication/StartLoginTests.cs
+++ b/application/account-management/Tests/Authentication/StartLoginTests.cs
@@ -1,10 +1,14 @@
 using System.Net;
 using System.Net.Http.Json;
 using FluentAssertions;
+using Microsoft.AspNetCore.Identity;
 using NSubstitute;
 using PlatformPlatform.AccountManagement.Database;
 using PlatformPlatform.AccountManagement.Features.Authentication.Commands;
+using PlatformPlatform.AccountManagement.Features.EmailConfirmations.Domain;
+using PlatformPlatform.SharedKernel.Authentication;
 using PlatformPlatform.SharedKernel.Tests;
+using PlatformPlatform.SharedKernel.Tests.Persistence;
 using PlatformPlatform.SharedKernel.Validation;
 using Xunit;
 
@@ -53,7 +57,7 @@ public async Task StartLoginCommand_WhenEmailIsEmpty_ShouldFail()
         // Assert
         var expectedErrors = new[]
         {
-            new ErrorDetail("email", "'Email' must not be empty.")
+            new ErrorDetail("email", "Email must be in a valid format and no longer than 100 characters.")
         };
         await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, expectedErrors);
 
@@ -108,4 +112,40 @@ await EmailClient.Received(1).SendAsync(
             Arg.Any<CancellationToken>()
         );
     }
+
+    [Fact]
+    public async Task StartLogin_WhenTooManyAttempts_ShouldReturnTooManyRequests()
+    {
+        // Arrange
+        var email = DatabaseSeeder.Tenant1Owner.Email;
+
+        for (var i = 1; i <= 4; i++)
+        {
+            var oneTimePasswordHash = new PasswordHasher<object>().HashPassword(this, OneTimePasswordHelper.GenerateOneTimePassword(6));
+            Connection.Insert("EmailConfirmations", [
+                    ("Id", EmailConfirmationId.NewId().ToString()),
+                    ("CreatedAt", TimeProvider.System.GetUtcNow().AddMinutes(-i)),
+                    ("ModifiedAt", null),
+                    ("Email", email.ToLower()),
+                    ("Type", EmailConfirmationType.Login.ToString()),
+                    ("OneTimePasswordHash", oneTimePasswordHash),
+                    ("ValidUntil", TimeProvider.System.GetUtcNow().AddMinutes(-i - 1)), // All should be expired
+                    ("RetryCount", 0),
+                    ("ResendCount", 0),
+                    ("Completed", false)
+                ]
+            );
+        }
+
+        var command = new StartLoginCommand(email);
+
+        // Act
+        var response = await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/authentication/login/start", command);
+
+        // Assert
+        await response.ShouldHaveErrorStatusCode(HttpStatusCode.TooManyRequests, "Too many attempts to confirm this email address. Please try again later.");
+
+        TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse();
+        await EmailClient.DidNotReceive().SendAsync(Arg.Any<string>(), Arg.Any<string>(), Arg.Any<string>(), CancellationToken.None);
+    }
 }
diff --git a/application/account-management/Tests/Signups/StartSignupTests.cs b/application/account-management/Tests/Signups/StartSignupTests.cs
index 4a246f28e..88ed9646e 100644
--- a/application/account-management/Tests/Signups/StartSignupTests.cs
+++ b/application/account-management/Tests/Signups/StartSignupTests.cs
@@ -66,49 +66,24 @@ public async Task StartSignup_WhenInvalidEmail_ShouldReturnBadRequest()
         await EmailClient.DidNotReceive().SendAsync(Arg.Any<string>(), Arg.Any<string>(), Arg.Any<string>(), CancellationToken.None);
     }
 
-    [Fact]
-    public async Task StartSignup_WhenSignupAlreadyStarted_ShouldReturnConflict()
-    {
-        // Arrange
-        var email = Faker.Internet.Email();
-        var command = new StartSignupCommand(email);
-        await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/signups/start", command);
-
-        // Act
-        var response = await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/signups/start", command);
-
-        // Assert
-        await response.ShouldHaveErrorStatusCode(HttpStatusCode.Conflict, "Email confirmation for this email has already been started. Please check your spam folder.");
-
-        TelemetryEventsCollectorSpy.CollectedEvents.Count.Should().Be(1); // Only the first signup should create an event
-        TelemetryEventsCollectorSpy.CollectedEvents[0].GetType().Name.Should().Be("SignupStarted");
-        TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeTrue();
-        await EmailClient.Received(1).SendAsync(
-            Arg.Is<string>(s => s.Equals(email.ToLower())),
-            Arg.Any<string>(),
-            Arg.Any<string>(),
-            Arg.Any<CancellationToken>()
-        );
-    }
-
     [Fact]
     public async Task StartSignup_WhenTooManyAttempts_ShouldReturnTooManyRequests()
     {
         // Arrange
         var email = Faker.Internet.Email().ToLowerInvariant();
 
-        // Create 4 signups within the last day for this email
+        // Create 4 signups within the last hour for this email
         for (var i = 1; i <= 4; i++)
         {
             var oneTimePasswordHash = new PasswordHasher<object>().HashPassword(this, OneTimePasswordHelper.GenerateOneTimePassword(6));
             Connection.Insert("EmailConfirmations", [
                     ("Id", EmailConfirmationId.NewId().ToString()),
-                    ("CreatedAt", TimeProvider.System.GetUtcNow().AddHours(-i)),
+                    ("CreatedAt", TimeProvider.System.GetUtcNow().AddMinutes(-i)),
                     ("ModifiedAt", null),
                     ("Email", email),
                     ("Type", EmailConfirmationType.Signup.ToString()),
                     ("OneTimePasswordHash", oneTimePasswordHash),
-                    ("ValidUntil", TimeProvider.System.GetUtcNow().AddHours(-i).AddMinutes(5)),
+                    ("ValidUntil", TimeProvider.System.GetUtcNow().AddMinutes(-i - 1)), // All should be expired
                     ("RetryCount", 0),
                     ("ResendCount", 0),
                     ("Completed", false)
diff --git a/application/account-management/Tests/Users/InviteUserTests.cs b/application/account-management/Tests/Users/InviteUserTests.cs
index e5fec8b7d..728dbc5d7 100644
--- a/application/account-management/Tests/Users/InviteUserTests.cs
+++ b/application/account-management/Tests/Users/InviteUserTests.cs
@@ -75,11 +75,7 @@ public async Task InviteUser_WhenUserExists_ShouldReturnBadRequest()
         var response = await AuthenticatedOwnerHttpClient.PostAsJsonAsync("/api/account-management/users/invite", command);
 
         // Assert
-        var expectedErrors = new[]
-        {
-            new ErrorDetail("email", $"The email '{existingUserEmail}' is already in use by another user on this tenant.")
-        };
-        await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, expectedErrors);
+        await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, $"The user with '{existingUserEmail}' already exists.");
 
         TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse();
     }
diff --git a/application/account-management/Tests/Users/UpdateCurrentUserTests.cs b/application/account-management/Tests/Users/UpdateCurrentUserTests.cs
index 4236a372b..ef2d9f79a 100644
--- a/application/account-management/Tests/Users/UpdateCurrentUserTests.cs
+++ b/application/account-management/Tests/Users/UpdateCurrentUserTests.cs
@@ -15,7 +15,6 @@ public async Task UpdateCurrentUser_WhenValid_ShouldUpdateUser()
     {
         // Arrange
         var command = new UpdateCurrentUserCommand(
-            Faker.Internet.Email(),
             Faker.Name.FirstName(),
             Faker.Name.LastName(),
             Faker.Name.JobTitle()
@@ -34,7 +33,6 @@ public async Task UpdateCurrentUser_WhenInvalid_ShouldReturnBadRequest()
         // Arrange
         var command = new UpdateCurrentUserCommand
         (
-            Faker.InvalidEmail(),
             Faker.Random.String(31),
             Faker.Random.String(31),
             Faker.Random.String(51)
@@ -46,9 +44,8 @@ public async Task UpdateCurrentUser_WhenInvalid_ShouldReturnBadRequest()
         // Assert
         var expectedErrors = new[]
         {
-            new ErrorDetail("email", "Email must be in a valid format and no longer than 100 characters."),
-            new ErrorDetail("firstName", "First name must be no longer than 30 characters."),
-            new ErrorDetail("lastName", "Last name must be no longer than 30 characters."),
+            new ErrorDetail("firstName", "First name must be between 1 and 30 characters."),
+            new ErrorDetail("lastName", "Last name must be between 1 and 30 characters."),
             new ErrorDetail("title", "Title must be no longer than 50 characters.")
         };
         await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, expectedErrors);
diff --git a/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx b/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx
index 33b0d1b72..4bcbadb36 100644
--- a/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx
@@ -3,7 +3,7 @@ import { Button } from "@repo/ui/components/Button";
 // CtaSection: A functional component that displays a call to action
 export function CtaSection() {
   return (
-    <div className="flex flex-col gap-4 bg-muted px-8 py-24 text-center md:px-48">
+    <div className="flex flex-col gap-4 bg-input-background px-8 py-24 text-center md:px-48">
       <div className="flex flex-col gap-8 px-8 text-center">
         <h2 className="font-semibold text-4xl text-foreground">A single solution for you to build on</h2>
         <p className="font-normal text-muted-foreground text-xl">
diff --git a/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx b/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx
index 5bb3a0192..2665f76b0 100644
--- a/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx
@@ -3,8 +3,8 @@ import { SignUpButton } from "@repo/infrastructure/auth/SignUpButton";
 // CtaSection3: A functional component that displays a call to action
 export function CtaSection3() {
   return (
-    <div className="flex flex-col items-center gap-4 bg-background px-8 pt-12 pb-24 text-center md:px-24">
-      <div className="w-full rounded-xl bg-muted py-16 md:py-32">
+    <div className="flex flex-col items-center gap-4 bg-input-background px-8 pt-12 pb-24 text-center md:px-24">
+      <div className="w-full py-16 md:py-32">
         <div className="flex flex-col gap-8 text-center">
           <h2 className="font-semibold text-4xl text-foreground md:text-6xl">Start scaling your business today</h2>
           <p className="font-normal text-muted-foreground text-xl">
diff --git a/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx b/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx
index b2354c893..282af285b 100644
--- a/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx
@@ -5,7 +5,7 @@ import { createAccountUrl } from "./cdnImages";
 // FeatureSection3: A functional component that displays the third feature section
 export function FeatureSection3() {
   return (
-    <div className="flex w-full flex-col gap-8 bg-muted py-24">
+    <div className="flex w-full flex-col gap-8 bg-input-background py-24">
       <div className="flex w-full flex-col gap-8 px-8 pt-16 text-start md:px-32 lg:w-2/3">
         <FeatureTitle />
       </div>
diff --git a/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx b/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx
index 83802481a..f8f3cd765 100644
--- a/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx
@@ -1,7 +1,7 @@
 // FeatureSection4: A functional component that displays a section with features
 export function FeatureSection4() {
   return (
-    <div className="flex flex-col gap-16 bg-muted px-8 py-24 md:flex-row md:px-24">
+    <div className="flex flex-col gap-16 bg-input-background px-8 py-24 md:flex-row md:px-24">
       <div className="flex grow flex-col gap-4 text-start font-semibold text-4xl text-foreground md:w-1/4">
         <h1 className="text-start font-semibold text-amber-600 text-base">FEATURES</h1>
         Built by Founders, Engineers and Designers
diff --git a/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx b/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx
index a9a9d9d76..9540528a4 100644
--- a/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx
@@ -6,7 +6,7 @@ import { githubLogo, linkedinLogo, logoWrap, slackLogo, twitterLogo, youtubeLogo
 export function FooterSection() {
   return (
     <>
-      <div className="flex w-full items-center gap-8 bg-muted px-16 py-16 md:px-24">
+      <div className="flex w-full items-center gap-8 bg-background px-16 py-16 md:px-24">
         <div className="flex flex-grow flex-col gap-4">
           <div className="font-semibold text-foreground text-xl">Join our newsletter</div>
           <div className="font-normal text-base text-muted-foreground">Technology that has your back.</div>
diff --git a/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx b/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx
index 72f35939f..57c5f6c64 100644
--- a/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx
@@ -16,7 +16,7 @@ import { heroDesktopUrl, heroMobileUrl, logoWrap } from "./cdnImages";
 // HeroSection: A functional component that displays the hero section
 export function HeroSection() {
   return (
-    <div className="flex flex-col items-center bg-muted">
+    <div className="flex flex-col items-center bg-input-background">
       <div className="flex w-fit flex-col-reverse items-center justify-between gap-4 px-2 pt-8 pb-24 md:w-full md:flex-row md:gap-2 xl:px-24">
         <div className="flex pt-4 md:pt-0">
           <img className="hidden lg:block" src={logoWrap} alt="logo" />
diff --git a/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx b/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx
index e72f2e027..9d6a6291b 100644
--- a/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx
+++ b/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx
@@ -3,7 +3,7 @@ import { infrastructure } from "./cdnImages";
 // TechnologySection2: A functional component that displays the technology section
 export function TechnologySection2() {
   return (
-    <div className="flex w-full flex-col gap-8 bg-muted px-8 py-24 md:px-24">
+    <div className="flex w-full flex-col gap-8 bg-input-background px-8 py-24 md:px-24">
       <div className="flex w-full flex-col gap-8 pt-16 text-start lg:w-2/3">
         <div>
           {/* Display the section title */}
diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx
index dc3aa8116..790bd19b9 100644
--- a/application/account-management/WebApp/routes/admin/account/index.tsx
+++ b/application/account-management/WebApp/routes/admin/account/index.tsx
@@ -4,16 +4,17 @@ import logoWrap from "@/shared/images/logo-wrap.svg";
 import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
+import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
 import { Button } from "@repo/ui/components/Button";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { TextField } from "@repo/ui/components/TextField";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { createFileRoute } from "@tanstack/react-router";
 import { Trash2 } from "lucide-react";
-import { useState } from "react";
-import { Label, Separator } from "react-aria-components";
+import { useEffect, useState } from "react";
+import { Separator } from "react-aria-components";
 import DeleteAccountConfirmation from "./-components/DeleteAccountConfirmation";
 
 export const Route = createFileRoute("/admin/account/")({
@@ -25,15 +26,27 @@ export function AccountSettings() {
   const { data: tenant, isLoading } = api.useQuery("get", "/api/account-management/tenants/current");
   const updateCurrentTenantMutation = api.useMutation("put", "/api/account-management/tenants/current");
 
+  useEffect(() => {
+    if (updateCurrentTenantMutation.isSuccess) {
+      toastQueue.add({
+        title: t`Success`,
+        description: t`Account updated successfully`,
+        variant: "success",
+        duration: 3000
+      });
+    }
+  }, [updateCurrentTenantMutation.isSuccess]);
+
   if (isLoading) {
     return null;
   }
 
   return (
     <>
-      <div className="flex h-full w-full gap-4">
-        <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
-        <div className="flex w-full flex-col gap-4 px-4 py-3">
+      <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
+      <AppLayout
+        variant="center"
+        topMenu={
           <TopMenu>
             <Breadcrumb href="/admin/account">
               <Trans>Account</Trans>
@@ -42,69 +55,60 @@ export function AccountSettings() {
               <Trans>Settings</Trans>
             </Breadcrumb>
           </TopMenu>
-          <div className="20 mb-4 flex w-full items-center justify-between space-x-2 sm:mt-4">
-            <div className="mt-3 flex flex-col gap-2 font-semibold text-3xl text-foreground">
-              <h1>
-                <Trans>Account settings</Trans>
-              </h1>
-              <p className="font-normal text-muted-foreground text-sm">
-                <Trans>Manage your account here.</Trans>
-              </p>
-            </div>
-          </div>
+        }
+      >
+        <h1>
+          <Trans>Account settings</Trans>
+        </h1>
+        <p>
+          <Trans>Manage your account here.</Trans>
+        </p>
 
-          <Form
-            onSubmit={mutationSubmitter(updateCurrentTenantMutation)}
-            validationErrors={updateCurrentTenantMutation.error?.errors}
-            validationBehavior="aria"
-            className="flex flex-col gap-4"
-          >
-            <Label>
-              <Trans>Logo</Trans>
-            </Label>
-            <img src={logoWrap} alt={t`Logo`} className="max-h-16 max-w-64" />
+        <Form
+          onSubmit={mutationSubmitter(updateCurrentTenantMutation)}
+          validationErrors={updateCurrentTenantMutation.error?.errors}
+          validationBehavior="aria"
+          className="flex flex-col gap-4"
+        >
+          <h2>
+            <Trans>Account information</Trans>
+          </h2>
+          <Separator />
 
-            <div className="w-full md:max-w-md">
-              <TextField
-                autoFocus={true}
-                isRequired={true}
-                name="name"
-                defaultValue={tenant?.name ?? ""}
-                isDisabled={updateCurrentTenantMutation.isPending}
-                label={t`Account name`}
-                validationBehavior="aria"
-              />
-            </div>
+          <Trans>Logo</Trans>
 
-            <FormErrorMessage error={updateCurrentTenantMutation.error} />
-            <Button type="submit" className="mt-4" isDisabled={updateCurrentTenantMutation.isPending}>
-              {updateCurrentTenantMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
-            </Button>
-          </Form>
+          <img src={logoWrap} alt={t`Logo`} className="max-h-16 max-w-64" />
+          <TextField
+            autoFocus={true}
+            isRequired={true}
+            name="name"
+            defaultValue={tenant?.name ?? ""}
+            isDisabled={updateCurrentTenantMutation.isPending}
+            label={t`Account name`}
+            validationBehavior="aria"
+          />
+          <Button type="submit" className="mt-4" isDisabled={updateCurrentTenantMutation.isPending}>
+            {updateCurrentTenantMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
+          </Button>
+        </Form>
 
-          <div className="mt-6 flex flex-col gap-4">
-            <h3 className="font-semibold">
-              <Trans>Danger zone</Trans>
-            </h3>
-            <Separator />
-            <div className="flex flex-col gap-4">
-              <p className="font-normal text-sm">
-                <Trans>
-                  Deleting the account and all associated data. This action cannot be undone, so please proceed with
-                  caution.
-                </Trans>
-              </p>
+        <div className="mt-6 flex flex-col gap-4">
+          <h2>
+            <Trans>Danger zone</Trans>
+          </h2>
+          <Separator />
+          <div className="flex flex-col gap-4">
+            <p>
+              <Trans>Delete your account and all data. This action is irreversible—proceed with caution.</Trans>
+            </p>
 
-              <Button variant="destructive" onPress={() => setIsDeleteModalOpen(true)} className="w-fit">
-                <Trash2 />
-                <Trans>Delete account</Trans>
-              </Button>
-            </div>
+            <Button variant="destructive" onPress={() => setIsDeleteModalOpen(true)} className="w-fit">
+              <Trash2 />
+              <Trans>Delete account</Trans>
+            </Button>
           </div>
-
-          <Separator className="my-8" />
         </div>
-      </div>
+      </AppLayout>
 
       <DeleteAccountConfirmation isOpen={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen} />
     </>
diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx
index 8dee33087..a2d84c3a0 100644
--- a/application/account-management/WebApp/routes/admin/index.tsx
+++ b/application/account-management/WebApp/routes/admin/index.tsx
@@ -3,6 +3,8 @@ import { TopMenu } from "@/shared/components/topMenu";
 import { UserStatus, api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
+import { useUserInfo } from "@repo/infrastructure/auth/hooks";
+import { AppLayout } from "@repo/ui/components/AppLayout";
 import { getDateDaysAgo, getTodayIsoDate } from "@repo/utils/date/formatDate";
 import { Link, createFileRoute } from "@tanstack/react-router";
 
@@ -12,37 +14,31 @@ export const Route = createFileRoute("/admin/")({
 
 export default function Home() {
   const { data: usersSummary } = api.useQuery("get", "/api/account-management/users/summary");
+  const userInfo = useUserInfo();
 
   return (
-    <div className="flex h-full w-full gap-4">
+    <>
       <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
-      <div className="flex w-full flex-col gap-4 px-4 py-3">
-        <TopMenu />
-        <div className="mb-4 flex h-20 w-full items-center justify-between space-x-2 sm:mt-4">
-          <div className="mt-3 flex flex-col gap-2 font-semibold text-3xl text-foreground">
-            <h1>
-              <Trans>Welcome home</Trans>
-            </h1>
-            <p className="font-normal text-muted-foreground text-sm">
-              <Trans>Here's your overview of what's happening.</Trans>
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-row">
+      <AppLayout topMenu={<TopMenu />}>
+        <h1>{userInfo?.firstName ? <Trans>Welcome home, {userInfo.firstName}</Trans> : <Trans>Welcome home</Trans>}</h1>
+        <p>
+          <Trans>Here's your overview of what's happening.</Trans>
+        </p>
+        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           <Link
             to="/admin/users"
-            className="w-1/3 rounded-xl bg-muted/50 p-6 transition-all hover:bg-accent"
+            className="flex flex-col justify-between rounded-xl bg-input-background p-6 transition-colors hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
             aria-label={t`View users`}
           >
-            <div className="text-foreground text-sm">
-              <Trans>Total users</Trans>
-            </div>
-            <div className="text-muted-foreground text-sm">
-              <Trans>Add more in the Users menu</Trans>
-            </div>
-            <div className="py-2 font-semibold text-2xl text-foreground">
-              {usersSummary?.totalUsers ? <p>{usersSummary.totalUsers}</p> : <p>-</p>}
+            <div>
+              <div className="font-medium text-foreground text-sm">
+                <Trans>Total users</Trans>
+              </div>
+              <div className="mt-1 text-muted-foreground text-sm">
+                <Trans>Add more in the Users menu</Trans>
+              </div>
             </div>
+            <div className="mt-4 font-semibold text-2xl text-foreground">{usersSummary?.totalUsers ?? "-"}</div>
           </Link>
           <Link
             to="/admin/users"
@@ -51,37 +47,37 @@ export default function Home() {
               startDate: getDateDaysAgo(30),
               endDate: getTodayIsoDate()
             }}
-            className="mx-6 w-1/3 rounded-xl bg-muted/50 p-6 transition-all hover:bg-accent"
+            className="flex flex-col justify-between rounded-xl bg-input-background p-6 transition-colors hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
             aria-label={t`View active users`}
           >
-            <div className="text-foreground text-sm">
-              <Trans>Active users</Trans>
-            </div>
-            <div className="text-muted-foreground text-sm">
-              <Trans>Active users in the past 30 days</Trans>
-            </div>
-            <div className="py-2 font-semibold text-2xl text-foreground">
-              {usersSummary?.activeUsers ? <p>{usersSummary.activeUsers}</p> : <p>-</p>}
+            <div>
+              <div className="font-medium text-foreground text-sm">
+                <Trans>Active users</Trans>
+              </div>
+              <div className="mt-1 text-muted-foreground text-sm">
+                <Trans>Active users in the past 30 days</Trans>
+              </div>
             </div>
+            <div className="mt-4 font-semibold text-2xl text-foreground">{usersSummary?.activeUsers ?? "-"}</div>
           </Link>
           <Link
             to="/admin/users"
             search={{ userStatus: UserStatus.Pending }}
-            className="w-1/3 rounded-xl bg-muted/50 p-6 transition-all hover:bg-accent"
+            className="flex flex-col justify-between rounded-xl bg-input-background p-6 transition-colors hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
             aria-label={t`View invited users`}
           >
-            <div className="text-foreground text-sm">
-              <Trans>Invited users</Trans>
-            </div>
-            <div className="text-muted-foreground text-sm">
-              <Trans>Users who haven't confirmed their email</Trans>
-            </div>
-            <div className="py-2 font-semibold text-2xl text-foreground">
-              {usersSummary?.pendingUsers ? <p>{usersSummary.pendingUsers}</p> : <p>-</p>}
+            <div>
+              <div className="font-medium text-foreground text-sm">
+                <Trans>Invited users</Trans>
+              </div>
+              <div className="mt-1 text-muted-foreground text-sm">
+                <Trans>Users who haven't confirmed their email</Trans>
+              </div>
             </div>
+            <div className="mt-4 font-semibold text-2xl text-foreground">{usersSummary?.pendingUsers ?? "-"}</div>
           </Link>
         </div>
-      </div>
-    </div>
+      </AppLayout>
+    </>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
index a2fe5ec99..ec575336a 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
@@ -5,6 +5,7 @@ import { Trans } from "@lingui/react/macro";
 import { AlertDialog } from "@repo/ui/components/AlertDialog";
 import { Modal } from "@repo/ui/components/Modal";
 import { Select, SelectItem } from "@repo/ui/components/Select";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { useCallback } from "react";
 
 type UserDetails = components["schemas"]["UserDetails"];
@@ -24,9 +25,19 @@ export function ChangeUserRoleDialog({ user, isOpen, onOpenChange }: Readonly<Ch
         return null;
       }
 
-      await changeUserRoleMutation.mutateAsync({ params: { path: { id: user.id } }, body: { userRole: newUserRole } });
+      changeUserRoleMutation
+        .mutateAsync({ params: { path: { id: user.id } }, body: { userRole: newUserRole } })
+        .then(() => {
+          const userDisplayName = `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email;
+          toastQueue.add({
+            title: t`Success`,
+            description: t`User role updated successfully for ${userDisplayName}`,
+            variant: "success",
+            duration: 3000
+          });
 
-      onOpenChange(false);
+          onOpenChange(false);
+        });
     },
     [user, changeUserRoleMutation, onOpenChange]
   );
diff --git a/application/account-management/WebApp/routes/admin/users/-components/DeleteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/DeleteUserDialog.tsx
index 110419708..91025192e 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/DeleteUserDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/DeleteUserDialog.tsx
@@ -3,6 +3,7 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AlertDialog } from "@repo/ui/components/AlertDialog";
 import { Modal } from "@repo/ui/components/Modal";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { useCallback } from "react";
 
 type UserDetails = components["schemas"]["UserDetails"];
@@ -11,25 +12,54 @@ interface DeleteUserDialogProps {
   users: UserDetails[];
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
+  onUsersDeleted?: () => void;
 }
 
-export function DeleteUserDialog({ users, isOpen, onOpenChange }: Readonly<DeleteUserDialogProps>) {
+export function DeleteUserDialog({ users, isOpen, onOpenChange, onUsersDeleted }: Readonly<DeleteUserDialogProps>) {
   const isSingleUser = users.length === 1;
   const user = users[0];
 
-  const bulkDeleteUsersMutation = api.useMutation("post", "/api/account-management/users/bulk-delete");
   const deleteUserMutation = api.useMutation("delete", "/api/account-management/users/{id}");
+  const bulkDeleteUsersMutation = api.useMutation("post", "/api/account-management/users/bulk-delete");
+  const userDisplayName = isSingleUser ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email : "";
 
   const handleDelete = useCallback(async () => {
     if (isSingleUser) {
-      await deleteUserMutation.mutateAsync({ params: { path: { id: user.id } } });
+      deleteUserMutation.mutateAsync({ params: { path: { id: user.id } } }).then(() => {
+        toastQueue.add({
+          title: t`Success`,
+          description: `User deleted successfully: ${userDisplayName}`,
+          variant: "success",
+          duration: 3000
+        });
+
+        onUsersDeleted?.();
+        onOpenChange(false);
+      });
     } else {
       const userIds = users.map((user) => user.id);
-      await bulkDeleteUsersMutation.mutateAsync({ body: { userIds: userIds } });
-    }
+      await bulkDeleteUsersMutation.mutateAsync({ body: { userIds: userIds } }).then(() => {
+        toastQueue.add({
+          title: t`Success`,
+          description: `${users.length} users deleted successfully`,
+          variant: "success",
+          duration: 3000
+        });
 
-    onOpenChange(false);
-  }, [users, isSingleUser, user, deleteUserMutation, bulkDeleteUsersMutation, onOpenChange]);
+        onUsersDeleted?.();
+        onOpenChange(false);
+      });
+    }
+  }, [
+    isSingleUser,
+    userDisplayName,
+    bulkDeleteUsersMutation,
+    deleteUserMutation,
+    user,
+    users,
+    onUsersDeleted,
+    onOpenChange
+  ]);
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} blur={false} isDismissable={true}>
@@ -42,8 +72,7 @@ export function DeleteUserDialog({ users, isOpen, onOpenChange }: Readonly<Delet
       >
         {isSingleUser ? (
           <Trans>
-            Are you sure you want to delete{" "}
-            <b>{`${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email}?</b>
+            Are you sure you want to delete <b>{userDisplayName}</b>?
           </Trans>
         ) : (
           <Trans>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
index 762a80e44..077163c04 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
@@ -4,10 +4,10 @@ import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog } from "@repo/ui/components/Dialog";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Heading } from "@repo/ui/components/Heading";
 import { Modal } from "@repo/ui/components/Modal";
 import { TextField } from "@repo/ui/components/TextField";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { XIcon } from "lucide-react";
 import { useEffect } from "react";
@@ -22,6 +22,12 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
 
   useEffect(() => {
     if (inviteUserMutation.isSuccess) {
+      toastQueue.add({
+        title: t`Success`,
+        description: t`User invited successfully`,
+        variant: "success",
+        duration: 3000
+      });
       onOpenChange(false);
     }
   }, [inviteUserMutation.isSuccess, onOpenChange]);
@@ -34,7 +40,7 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
           <Trans>Invite user</Trans>
         </Heading>
         <p className="text-muted-foreground text-sm">
-          <Trans>Invite users and assign them roles. They will appear once they log in.</Trans>
+          <Trans>An invitation email will be sent to the user with a link to log in.</Trans>
         </p>
 
         <Form
@@ -51,9 +57,13 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
             placeholder={t`user@email.com`}
             className="flex-grow"
           />
-          <FormErrorMessage error={inviteUserMutation.error} />
           <div className="mt-6 flex justify-end gap-4">
-            <Button type="reset" onPress={() => onOpenChange(false)} variant="secondary">
+            <Button
+              type="reset"
+              onPress={() => onOpenChange(false)}
+              variant="secondary"
+              isDisabled={inviteUserMutation.isPending}
+            >
               <Trans>Cancel</Trans>
             </Button>
             <Button type="submit" isDisabled={inviteUserMutation.isPending}>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index 3a534901d..ca79b6fbb 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -6,10 +6,14 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
 import { DateRangePicker } from "@repo/ui/components/DateRangePicker";
+import { Dialog } from "@repo/ui/components/Dialog";
+import { Heading } from "@repo/ui/components/Heading";
+import { Modal } from "@repo/ui/components/Modal";
 import { SearchField } from "@repo/ui/components/SearchField";
 import { Select, SelectItem } from "@repo/ui/components/Select";
+import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { FilterIcon, FilterXIcon } from "lucide-react";
+import { ListFilter, ListFilterPlus, XIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 // SearchParams interface defines the structure of URL query parameters
@@ -37,6 +41,8 @@ export function UserQuerying() {
   const [showAllFilters, setShowAllFilters] = useState(
     Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate)
   );
+  const [searchTimeoutId, setSearchTimeoutId] = useState<NodeJS.Timeout | null>(null);
+  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
 
   // Convert URL date strings to DateRange if they exist
   const dateRange =
@@ -66,20 +72,74 @@ export function UserQuerying() {
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       updateFilter({ search: (search as string) || undefined });
+      setSearchTimeoutId(null);
     }, 500);
+    setSearchTimeoutId(timeoutId);
 
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      setSearchTimeoutId(null);
+    };
   }, [search, updateFilter]);
 
+  // Count active filters for badge
+  const getActiveFilterCount = () => {
+    let count = 0;
+    if (searchParams.userRole) {
+      count++;
+    }
+    if (searchParams.userStatus) {
+      count++;
+    }
+    if (searchParams.startDate && searchParams.endDate) {
+      count++;
+    }
+    return count;
+  };
+
+  const activeFilterCount = getActiveFilterCount();
+
+  // Handle screen size changes to show/hide filters appropriately
+  useEffect(() => {
+    const handleResize = () => {
+      const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches;
+      if (isLargeScreen && activeFilterCount > 0 && !showAllFilters) {
+        // On large screens, show inline filters if there are active filters
+        setShowAllFilters(true);
+      } else if (!isLargeScreen && showAllFilters) {
+        // On small/medium screens, hide inline filters
+        setShowAllFilters(false);
+      }
+    };
+
+    // Check on mount
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [activeFilterCount, showAllFilters]);
+
+  const clearAllFilters = () => {
+    updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined });
+    setShowAllFilters(false);
+    setIsFilterPanelOpen(false);
+  };
+
   return (
     <div className="flex items-center gap-2">
       <SearchField
         placeholder={t`Search`}
         value={search}
         onChange={setSearch}
+        onSubmit={() => {
+          if (searchTimeoutId) {
+            clearTimeout(searchTimeoutId);
+            setSearchTimeoutId(null);
+          }
+          updateFilter({ search: (search as string) || undefined });
+        }}
         label={t`Search`}
         autoFocus={true}
-        className="min-w-[240px]"
       />
 
       {showAllFilters && (
@@ -91,7 +151,6 @@ export function UserQuerying() {
             }}
             label={t`User role`}
             placeholder={t`Any role`}
-            className="w-[150px]"
           >
             <SelectItem id="">
               <Trans>Any role</Trans>
@@ -110,7 +169,6 @@ export function UserQuerying() {
             }}
             label={t`User status`}
             placeholder={t`Any status`}
-            className="w-[150px]"
           >
             <SelectItem id="">
               <Trans>Any status</Trans>
@@ -131,27 +189,119 @@ export function UserQuerying() {
               });
             }}
             label={t`Modified date`}
+            placeholder={t`Select dates`}
           />
         </>
       )}
 
+      {/* Filter button with responsive behavior */}
       <Button
         variant="secondary"
-        className={showAllFilters ? "mt-6 h-10 w-10 p-0" : "mt-6"}
+        className="relative mt-6"
+        aria-label={showAllFilters ? t`Clear filters` : t`Show filters`}
+        data-testid="filter-button"
         onPress={() => {
-          if (showAllFilters) {
-            // Reset filters when hiding
-            updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined });
+          // On large screens, if filters are showing, clear them instead of opening dialog
+          const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches;
+          if (isLargeScreen && showAllFilters) {
+            clearAllFilters();
+            return;
+          }
+          // On large screens, toggle inline filters
+          if (isLargeScreen) {
+            setShowAllFilters(!showAllFilters);
+            return;
           }
-          setShowAllFilters(!showAllFilters);
+          // On small/medium screens, open dialog
+          setIsFilterPanelOpen(true);
         }}
       >
         {showAllFilters ? (
-          <FilterXIcon size={16} aria-label={t`Hide filters`} />
+          <ListFilterPlus size={16} aria-label={t`Clear filters`} />
         ) : (
-          <FilterIcon size={16} aria-label={t`Show filters`} />
+          <ListFilter size={16} aria-label={t`Show filters`} />
+        )}
+        {activeFilterCount > 0 && (
+          <span className="-right-1 -top-1 absolute flex h-5 w-5 items-center justify-center rounded-full bg-primary font-medium text-primary-foreground text-xs lg:hidden">
+            {activeFilterCount}
+          </span>
         )}
       </Button>
+
+      {/* Filter dialog for small/medium screens */}
+      <Modal isOpen={isFilterPanelOpen} onOpenChange={setIsFilterPanelOpen} isDismissable={true}>
+        <Dialog className="w-full sm:min-w-[400px]">
+          <XIcon
+            onClick={() => setIsFilterPanelOpen(false)}
+            className="absolute top-2 right-2 h-10 w-10 p-2 hover:bg-muted"
+          />
+          <Heading slot="title" className="text-2xl">
+            <Trans>Filters</Trans>
+          </Heading>
+
+          <div className="mt-4 flex flex-col gap-4">
+            <Select
+              selectedKey={searchParams.userRole}
+              onSelectionChange={(userRole) => {
+                updateFilter({ userRole: (userRole as UserRole) || undefined });
+              }}
+              label={t`User role`}
+              placeholder={t`Any role`}
+              className="w-full"
+            >
+              <SelectItem id="">
+                <Trans>Any role</Trans>
+              </SelectItem>
+              {Object.values(UserRole).map((userRole) => (
+                <SelectItem id={userRole} key={userRole}>
+                  {getUserRoleLabel(userRole)}
+                </SelectItem>
+              ))}
+            </Select>
+
+            <Select
+              selectedKey={searchParams.userStatus}
+              onSelectionChange={(userStatus) => {
+                updateFilter({ userStatus: (userStatus as UserStatus) || undefined });
+              }}
+              label={t`User status`}
+              placeholder={t`Any status`}
+              className="w-full"
+            >
+              <SelectItem id="">
+                <Trans>Any status</Trans>
+              </SelectItem>
+              {Object.values(UserStatus).map((userStatus) => (
+                <SelectItem id={userStatus} key={userStatus}>
+                  {getUserStatusLabel(userStatus)}
+                </SelectItem>
+              ))}
+            </Select>
+
+            <DateRangePicker
+              value={dateRange}
+              onChange={(range) => {
+                updateFilter({
+                  startDate: range?.start.toString() ?? undefined,
+                  endDate: range?.end.toString() ?? undefined
+                });
+              }}
+              label={t`Modified date`}
+              placeholder={t`Select dates`}
+              className="w-full"
+            />
+          </div>
+
+          <div className="mt-6 flex justify-end gap-4">
+            <Button variant="secondary" onPress={clearAllFilters} isDisabled={activeFilterCount === 0}>
+              <Trans>Clear</Trans>
+            </Button>
+            <Button variant="primary" onPress={() => setIsFilterPanelOpen(false)}>
+              <Trans>OK</Trans>
+            </Button>
+          </div>
+        </Dialog>
+      </Modal>
     </div>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index e73fe87dd..6603dcf8e 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -120,149 +120,149 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<Use
         users={userToDelete ? [userToDelete] : []}
         isOpen={userToDelete !== null}
         onOpenChange={(isOpen) => !isOpen && setUserToDelete(null)}
+        onUsersDeleted={() => onSelectedUsersChange([])}
       />
 
-      <div className="flex h-full w-full flex-col gap-2">
-        <Table
-          key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
-          selectionMode="multiple"
-          selectionBehavior="toggle"
-          selectedKeys={selectedUsers.map((user) => user.id)}
-          onSelectionChange={handleSelectionChange}
-          sortDescriptor={sortDescriptor}
-          onSortChange={handleSortChange}
-          aria-label={t`Users`}
-        >
-          <TableHeader>
-            <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
-              <Trans>Name</Trans>
-            </Column>
-            <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
-              <Trans>Email</Trans>
-            </Column>
-            <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
-              <Trans>Created</Trans>
-            </Column>
-            <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
-              <Trans>Modified</Trans>
-            </Column>
-            <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
-              <Trans>Role</Trans>
-            </Column>
-            <Column width={114}>
-              <Trans>Actions</Trans>
-            </Column>
-          </TableHeader>
-          <TableBody>
-            {users?.users.map((user) => (
-              <Row key={user.id} id={user.id}>
-                <Cell>
-                  <div className="flex h-14 items-center gap-2">
-                    <Avatar
-                      initials={getInitials(user.firstName, user.lastName, user.email)}
-                      avatarUrl={user.avatarUrl}
-                      size="sm"
-                      isRound={true}
-                    />
-                    <div className="flex flex-col truncate">
-                      <div className="truncate text-foreground">
-                        {user.firstName} {user.lastName}
-                        {user.emailConfirmed ? (
-                          ""
-                        ) : (
-                          <Badge variant="outline">
-                            <Trans>Pending</Trans>
-                          </Badge>
-                        )}
-                      </div>
-                      <div className="truncate">{user.title ?? ""}</div>
+      <Table
+        key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
+        selectionMode="multiple"
+        selectionBehavior="toggle"
+        selectedKeys={selectedUsers.map((user) => user.id)}
+        onSelectionChange={handleSelectionChange}
+        sortDescriptor={sortDescriptor}
+        onSortChange={handleSortChange}
+        aria-label={t`Users`}
+      >
+        <TableHeader>
+          <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
+            <Trans>Name</Trans>
+          </Column>
+          <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
+            <Trans>Email</Trans>
+          </Column>
+          <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
+            <Trans>Created</Trans>
+          </Column>
+          <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
+            <Trans>Modified</Trans>
+          </Column>
+          <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
+            <Trans>Role</Trans>
+          </Column>
+          <Column width={114}>
+            <Trans>Actions</Trans>
+          </Column>
+        </TableHeader>
+        <TableBody>
+          {users?.users.map((user) => (
+            <Row key={user.id} id={user.id}>
+              <Cell>
+                <div className="flex h-14 items-center gap-2">
+                  <Avatar
+                    initials={getInitials(user.firstName, user.lastName, user.email)}
+                    avatarUrl={user.avatarUrl}
+                    size="sm"
+                    isRound={true}
+                  />
+                  <div className="flex flex-col truncate">
+                    <div className="truncate text-foreground">
+                      {user.firstName} {user.lastName}
+                      {user.emailConfirmed ? (
+                        ""
+                      ) : (
+                        <Badge variant="outline">
+                          <Trans>Pending</Trans>
+                        </Badge>
+                      )}
                     </div>
+                    <div className="truncate">{user.title ?? ""}</div>
                   </div>
-                </Cell>
-                <Cell>{user.email}</Cell>
-                <Cell>{formatDate(user.createdAt)}</Cell>
-                <Cell>{formatDate(user.modifiedAt)}</Cell>
-                <Cell>
-                  <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
-                </Cell>
-                <Cell>
-                  <div className="group flex w-full gap-2">
-                    <Button
-                      variant="icon"
-                      className="opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
-                      onPress={() => {
+                </div>
+              </Cell>
+              <Cell>{user.email}</Cell>
+              <Cell>{formatDate(user.createdAt)}</Cell>
+              <Cell>{formatDate(user.modifiedAt)}</Cell>
+              <Cell>
+                <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
+              </Cell>
+              <Cell>
+                <div className="flex w-full gap-2">
+                  <Button
+                    variant="icon"
+                    className="opacity-0 transition-opacity duration-300 ease-in-out hover:opacity-100 focus:opacity-100 [tr:focus-within_&]:opacity-100 [tr:hover_&]:opacity-100"
+                    onPress={() => {
+                      onSelectedUsersChange([user]);
+                      setUserToDelete(user);
+                    }}
+                    isDisabled={user.id === userInfo?.id}
+                  >
+                    <Trash2Icon className="h-5 w-5 text-muted-foreground" />
+                  </Button>
+                  <MenuTrigger
+                    onOpenChange={(isOpen) => {
+                      if (isOpen) {
                         onSelectedUsersChange([user]);
-                        setUserToDelete(user);
-                      }}
-                      isDisabled={user.id === userInfo?.id}
-                    >
-                      <Trash2Icon className="h-5 w-5 text-muted-foreground" />
+                      }
+                    }}
+                  >
+                    <Button variant="icon" aria-label={t`User actions`}>
+                      <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
                     </Button>
-                    <MenuTrigger
-                      onOpenChange={(isOpen) => {
-                        if (isOpen) {
-                          onSelectedUsersChange([user]);
-                        }
-                      }}
-                    >
-                      <Button variant="icon" aria-label={t`Menu`}>
-                        <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
-                      </Button>
-                      <Menu>
-                        <MenuItem id="viewProfile">
-                          <UserIcon className="h-4 w-4" />
-                          <Trans>View profile</Trans>
-                        </MenuItem>
-                        <MenuItem
-                          id="changeRole"
-                          isDisabled={userInfo?.role !== "Owner" || userInfo?.id === user.id}
-                          onAction={() => setUserToChangeRole(user)}
-                        >
-                          <PencilIcon className="h-4 w-4 group-disabled:text-muted-foreground" />
-                          <span className="group-disabled:text-muted-foreground">
-                            <Trans>Change role</Trans>
-                          </span>
-                        </MenuItem>
-                        <MenuSeparator />
-                        <MenuItem
-                          id="deleteUser"
-                          isDisabled={userInfo?.role !== "Owner" || user.id === userInfo?.id}
-                          onAction={() => setUserToDelete(user)}
-                        >
-                          <Trash2Icon className="h-4 w-4 text-destructive" />
-                          <span className="text-destructive">
-                            <Trans>Delete</Trans>
-                          </span>
-                        </MenuItem>
-                      </Menu>
-                    </MenuTrigger>
-                  </div>
-                </Cell>
-              </Row>
-            ))}
-          </TableBody>
-        </Table>
-        {users && (
-          <>
-            <Pagination
-              paginationSize={5}
-              currentPage={currentPage}
-              totalPages={users?.totalPages ?? 1}
-              onPageChange={handlePageChange}
-              className="w-full pr-12 sm:hidden"
-            />
-            <Pagination
-              paginationSize={9}
-              currentPage={currentPage}
-              totalPages={users?.totalPages ?? 1}
-              onPageChange={handlePageChange}
-              previousLabel={t`Previous`}
-              nextLabel={t`Next`}
-              className="hidden w-full sm:flex"
-            />
-          </>
-        )}
-      </div>
+                    <Menu>
+                      <MenuItem id="viewProfile">
+                        <UserIcon className="h-4 w-4" />
+                        <Trans>View profile</Trans>
+                      </MenuItem>
+                      <MenuItem
+                        id="changeRole"
+                        isDisabled={userInfo?.role !== "Owner" || userInfo?.id === user.id}
+                        onAction={() => setUserToChangeRole(user)}
+                      >
+                        <PencilIcon className="h-4 w-4 group-disabled:text-muted-foreground" />
+                        <span className="group-disabled:text-muted-foreground">
+                          <Trans>Change role</Trans>
+                        </span>
+                      </MenuItem>
+                      <MenuSeparator />
+                      <MenuItem
+                        id="deleteUser"
+                        isDisabled={userInfo?.role !== "Owner" || user.id === userInfo?.id}
+                        onAction={() => setUserToDelete(user)}
+                      >
+                        <Trash2Icon className="h-4 w-4 text-destructive" />
+                        <span className="text-destructive">
+                          <Trans>Delete</Trans>
+                        </span>
+                      </MenuItem>
+                    </Menu>
+                  </MenuTrigger>
+                </div>
+              </Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+
+      {users && (
+        <div className="sticky bottom-0 z-20 bg-background py-4">
+          <Pagination
+            paginationSize={5}
+            currentPage={currentPage}
+            totalPages={users.totalPages ?? 1}
+            onPageChange={handlePageChange}
+            className="w-full pr-12 sm:hidden"
+          />
+          <Pagination
+            paginationSize={9}
+            currentPage={currentPage}
+            totalPages={users.totalPages ?? 1}
+            onPageChange={handlePageChange}
+            previousLabel={t`Previous`}
+            nextLabel={t`Next`}
+            className="hidden w-full sm:flex"
+          />
+        </div>
+      )}
     </>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
index 1fe841970..db9eef215 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
@@ -11,9 +11,10 @@ type UserDetails = components["schemas"]["UserDetails"];
 
 interface UserToolbarProps {
   selectedUsers: UserDetails[];
+  onSelectedUsersChange: (users: UserDetails[]) => void;
 }
 
-export function UserToolbar({ selectedUsers }: Readonly<UserToolbarProps>) {
+export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly<UserToolbarProps>) {
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
@@ -25,7 +26,7 @@ export function UserToolbar({ selectedUsers }: Readonly<UserToolbarProps>) {
           <Button variant="primary" onPress={() => setIsInviteModalOpen(true)}>
             <PlusIcon className="h-5 w-5" />
             <span className="hidden sm:inline">
-              <Trans>Invite users</Trans>
+              <Trans>Invite user</Trans>
             </span>
           </Button>
         )}
@@ -39,7 +40,12 @@ export function UserToolbar({ selectedUsers }: Readonly<UserToolbarProps>) {
         )}
       </div>
       <InviteUserDialog isOpen={isInviteModalOpen} onOpenChange={setIsInviteModalOpen} />
-      <DeleteUserDialog users={selectedUsers} isOpen={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen} />
+      <DeleteUserDialog
+        users={selectedUsers}
+        isOpen={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+        onUsersDeleted={() => onSelectedUsersChange([])}
+      />
     </div>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index 7c6085720..7b8a0c679 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -3,6 +3,7 @@ import { TopMenu } from "@/shared/components/topMenu";
 import { SortOrder, SortableUserProperties, UserRole, UserStatus, type components } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
+import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
@@ -32,31 +33,30 @@ export default function UsersPage() {
   const [selectedUsers, setSelectedUsers] = useState<UserDetails[]>([]);
 
   return (
-    <div className="flex h-full w-full gap-4">
+    <>
       <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
-      <div className="flex w-full flex-col gap-4 px-4 py-3">
-        <TopMenu>
-          <Breadcrumb href="/admin/users">
-            <Trans>Users</Trans>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Trans>All users</Trans>
-          </Breadcrumb>
-        </TopMenu>
-        <div className="20 mb-4 flex w-full items-center justify-between space-x-2 sm:mt-4">
-          <div className="mt-3 flex flex-col gap-2 font-semibold text-3xl text-foreground">
-            <h1>
+      <AppLayout
+        topMenu={
+          <TopMenu>
+            <Breadcrumb href="/admin/users">
               <Trans>Users</Trans>
-            </h1>
-            <p className="font-normal text-muted-foreground text-sm">
-              <Trans>Manage your users and permissions here.</Trans>
-            </p>
-          </div>
-        </div>
+            </Breadcrumb>
+            <Breadcrumb>
+              <Trans>All users</Trans>
+            </Breadcrumb>
+          </TopMenu>
+        }
+      >
+        <h1>
+          <Trans>Users</Trans>
+        </h1>
+        <p>
+          <Trans>Manage your users and permissions here.</Trans>
+        </p>
 
-        <UserToolbar selectedUsers={selectedUsers} />
+        <UserToolbar selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
         <UserTable selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
-      </div>
-    </div>
+      </AppLayout>
+    </>
   );
 }
diff --git a/application/account-management/WebApp/routes/login/-shared/loginState.ts b/application/account-management/WebApp/routes/login/-shared/loginState.ts
index 0d12fb794..9004e2e18 100644
--- a/application/account-management/WebApp/routes/login/-shared/loginState.ts
+++ b/application/account-management/WebApp/routes/login/-shared/loginState.ts
@@ -1,22 +1,70 @@
 import type { Schemas } from "@/shared/lib/api/client";
-import { t } from "@lingui/core/macro";
 
 interface LoginState {
   loginId: Schemas["LoginId"];
   emailConfirmationId: Schemas["EmailConfirmationId"];
   email: string;
   expireAt: Date;
+  codeCount: number;
+  hasRequestedNewCode: boolean;
+  autoSubmitCode: boolean;
+  lastSubmittedCode?: string;
+  currentOtpValue?: string;
+  validForSeconds?: number;
 }
 
 let currentLoginState: LoginState | undefined;
 
-export function setLoginState(newLogin: LoginState): void {
-  currentLoginState = newLogin;
+export function setLoginState(newLogin: Partial<LoginState>): void {
+  if (!currentLoginState) {
+    currentLoginState = {
+      ...(newLogin as LoginState),
+      codeCount: 1, // First code
+      hasRequestedNewCode: false,
+      autoSubmitCode: true, // Default to auto-submit
+      lastSubmittedCode: "", // Initialize with empty string
+      currentOtpValue: "" // Initialize with empty string
+    };
+  } else {
+    currentLoginState = {
+      ...currentLoginState,
+      ...newLogin
+    };
+  }
+}
+
+export function incrementCodeCount(): void {
+  if (currentLoginState) {
+    currentLoginState.codeCount += 1;
+  }
+}
+
+export function setHasRequestedNewCode(value: boolean): void {
+  if (currentLoginState) {
+    currentLoginState.hasRequestedNewCode = value;
+  }
+}
+
+export function setAutoSubmitCode(value: boolean): void {
+  if (currentLoginState) {
+    currentLoginState.autoSubmitCode = value;
+  }
 }
 
-export function getLoginState() {
-  if (currentLoginState == null) {
-    throw new Error(t`No active login.`);
+export function setLastSubmittedCode(code: string): void {
+  if (currentLoginState) {
+    currentLoginState.lastSubmittedCode = code;
   }
-  return currentLoginState;
+}
+
+export function clearLoginState(): void {
+  currentLoginState = undefined;
+}
+
+export function hasLoginState(): boolean {
+  return currentLoginState != null;
+}
+
+export function getLoginState(): Partial<LoginState> {
+  return currentLoginState || { email: "", codeCount: 0, hasRequestedNewCode: false, autoSubmitCode: true };
 }
diff --git a/application/account-management/WebApp/routes/login/expired.tsx b/application/account-management/WebApp/routes/login/expired.tsx
deleted file mode 100644
index 769442051..000000000
--- a/application/account-management/WebApp/routes/login/expired.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ErrorMessage } from "@/shared/components/ErrorMessage";
-import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
-import { Trans } from "@lingui/react/macro";
-import { loginPath } from "@repo/infrastructure/auth/constants";
-import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage";
-import { Link } from "@repo/ui/components/Link";
-import Timeout from "@spectrum-icons/illustrations/Timeout";
-import { createFileRoute } from "@tanstack/react-router";
-import { getLoginState } from "./-shared/loginState";
-
-export const Route = createFileRoute("/login/expired")({
-  component: () => (
-    <HorizontalHeroLayout>
-      <VerificationCodeExpiredMessage />
-    </HorizontalHeroLayout>
-  ),
-  errorComponent: (props) => (
-    <HorizontalHeroLayout>
-      <ErrorMessage {...props} />
-    </HorizontalHeroLayout>
-  )
-});
-
-export function VerificationCodeExpiredMessage() {
-  const { loginId } = getLoginState();
-
-  return (
-    <IllustratedMessage>
-      <Timeout />
-      <Heading>
-        <Trans>Error: Verification code has expired</Trans>
-      </Heading>
-      <Content>
-        <Trans>The verification code you are trying to use has expired for Login ID: {loginId}</Trans>
-      </Content>
-      <Link href={loginPath}>
-        <Trans>Try again</Trans>
-      </Link>
-    </IllustratedMessage>
-  );
-}
diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx
index 9e104f654..34f15f6c9 100644
--- a/application/account-management/WebApp/routes/login/index.tsx
+++ b/application/account-management/WebApp/routes/login/index.tsx
@@ -1,6 +1,6 @@
 import { ErrorMessage } from "@/shared/components/ErrorMessage";
 import logoMarkUrl from "@/shared/images/logo-mark.svg";
-import poweredByUrl from "@/shared/images/powered-by.svg";
+import logoWrapUrl from "@/shared/images/logo-wrap.svg";
 import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
 import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
@@ -9,14 +9,14 @@ import { loggedInPath, signUpPath } from "@repo/infrastructure/auth/constants";
 import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks";
 import { Button } from "@repo/ui/components/Button";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Heading } from "@repo/ui/components/Heading";
 import { Link } from "@repo/ui/components/Link";
 import { TextField } from "@repo/ui/components/TextField";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { Navigate, createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
-import { setLoginState } from "./-shared/loginState";
+import { getSignupState } from "../signup/-shared/signupState";
+import { clearLoginState, getLoginState, setLoginState } from "./-shared/loginState";
 
 export const Route = createFileRoute("/login/")({
   validateSearch: (search) => {
@@ -47,7 +47,9 @@ export const Route = createFileRoute("/login/")({
 });
 
 export function LoginForm() {
-  const [email, setEmail] = useState("");
+  const { email: savedEmail } = getLoginState();
+  const { email: signupEmail } = getSignupState(); // Prefill from signup page if user navigated here
+  const [email, setEmail] = useState(savedEmail || signupEmail || "");
   const { returnPath } = Route.useSearch();
 
   const startLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/start");
@@ -55,6 +57,7 @@ export function LoginForm() {
   if (startLoginMutation.isSuccess) {
     const { loginId, emailConfirmationId, validForSeconds } = startLoginMutation.data;
 
+    clearLoginState();
     setLoginState({
       loginId,
       emailConfirmationId,
@@ -93,16 +96,20 @@ export function LoginForm() {
         placeholder={t`yourname@example.com`}
         className="flex w-full flex-col"
       />
-      <FormErrorMessage error={startLoginMutation.error} />
       <Button type="submit" isDisabled={startLoginMutation.isPending} className="mt-4 w-full text-center">
         <Trans>Continue</Trans>
       </Button>
-      <div className="text-muted-foreground text-sm">
+      <p className="text-muted-foreground text-sm">
         <Trans>
           Don't have an account? <Link href={signUpPath}>Create one</Link>
         </Trans>
+      </p>
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-muted-foreground text-xs">
+          <Trans>Powered by</Trans>
+        </span>
+        <img src={logoWrapUrl} alt={t`PlatformPlatform`} className="h-6 w-auto" />
       </div>
-      <img src={poweredByUrl} alt={t`Powered by`} />
     </Form>
   );
 }
diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx
index c0eea9e89..9476239c8 100644
--- a/application/account-management/WebApp/routes/login/verify.tsx
+++ b/application/account-management/WebApp/routes/login/verify.tsx
@@ -1,6 +1,6 @@
 import { ErrorMessage } from "@/shared/components/ErrorMessage";
 import logoMarkUrl from "@/shared/images/logo-mark.svg";
-import poweredByUrl from "@/shared/images/powered-by.svg";
+import logoWrapUrl from "@/shared/images/logo-wrap.svg";
 import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
 import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
@@ -10,14 +10,20 @@ import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks";
 import { Button } from "@repo/ui/components/Button";
 import { DigitPattern } from "@repo/ui/components/Digit";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Link } from "@repo/ui/components/Link";
-import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput";
+import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
-import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration";
-import { Navigate, createFileRoute } from "@tanstack/react-router";
-import { useEffect } from "react";
-import { getLoginState, setLoginState } from "./-shared/loginState";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  clearLoginState,
+  getLoginState,
+  hasLoginState,
+  setLastSubmittedCode,
+  setLoginState
+} from "./-shared/loginState";
 
 export const Route = createFileRoute("/login/verify")({
   validateSearch: (search) => {
@@ -28,10 +34,22 @@ export const Route = createFileRoute("/login/verify")({
     };
   },
   component: function LoginVerifyRoute() {
+    const navigate = useNavigate();
     const isAuthenticated = useIsAuthenticated();
 
-    if (isAuthenticated) {
-      return <Navigate to={loggedInPath} />;
+    useEffect(() => {
+      if (isAuthenticated) {
+        navigate({ to: loggedInPath });
+        return;
+      }
+
+      if (!hasLoginState()) {
+        navigate({ to: "/login", search: { returnPath: "" }, replace: true });
+      }
+    }, [isAuthenticated, navigate]);
+
+    if (isAuthenticated || !hasLoginState()) {
+      return null;
     }
 
     return (
@@ -47,52 +65,135 @@ export const Route = createFileRoute("/login/verify")({
   )
 });
 
+function useCountdown(expireAt: Date) {
+  const [secondsRemaining, setSecondsRemaining] = useState(() =>
+    Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000))
+  );
+
+  // Reset the countdown when expireAt changes
+  useEffect(() => {
+    setSecondsRemaining(Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000)));
+  }, [expireAt]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setSecondsRemaining((prev) => {
+        return Math.max(0, prev - 1);
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return secondsRemaining;
+}
+
 export function CompleteLoginForm() {
-  const { loginId, emailConfirmationId, email, expireAt } = getLoginState();
-  const { expiresInString, isExpired } = useExpirationTimeout(expireAt);
+  const initialState = getLoginState();
+  const { email = "", emailConfirmationId = "" } = initialState;
+  const initialExpireAt = initialState.expireAt ? new Date(initialState.expireAt) : new Date();
+  const [expireAt, setExpireAt] = useState<Date>(initialExpireAt);
+  const secondsRemaining = useCountdown(expireAt);
+  const isExpired = secondsRemaining === 0;
+  const oneTimeCodeInputRef = useRef<OneTimeCodeInputRef | null>(null);
+  const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false);
+  const [showRequestLink, setShowRequestLink] = useState(false);
+  const [hasRequestedNewCode, setHasRequestedNewCode] = useState(false);
+  const [isRateLimited, setIsRateLimited] = useState(false);
+  const [autoSubmitCode, setAutoSubmitCode] = useState(true);
   const { returnPath } = Route.useSearch();
 
+  useEffect(() => {
+    if (!isExpired && !showRequestLink && !hasRequestedNewCode) {
+      const timeoutId = setTimeout(() => {
+        setShowRequestLink(true);
+      }, 30000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isExpired, showRequestLink, hasRequestedNewCode]);
+
   const completeLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/{id}/complete");
 
+  const resendLoginCodeMutation = api.useMutation(
+    "post",
+    "/api/account-management/authentication/login/{emailConfirmationId}/resend-code"
+  );
+
   useEffect(() => {
     if (completeLoginMutation.isSuccess) {
+      clearLoginState();
       window.location.href = returnPath ?? loggedInPath;
     }
   }, [completeLoginMutation.isSuccess, returnPath]);
 
-  const resendLoginCodeMutation = api.useMutation(
-    "post",
-    "/api/account-management/authentication/login/{emailConfirmationId}/resend-code"
-  );
+  useEffect(() => {
+    if (completeLoginMutation.isError) {
+      const statusCode = completeLoginMutation.error?.status;
+      if (statusCode === 403) {
+        setIsRateLimited(true);
+        setExpireAt(new Date(0)); // Force expiration
+      } else {
+        setTimeout(() => {
+          if (oneTimeCodeInputRef.current) {
+            oneTimeCodeInputRef.current.focus?.();
+          }
+        }, 100);
+      }
+    }
+  }, [completeLoginMutation.isError, completeLoginMutation.error]);
+
+  const resetAfterResend = useCallback((validForSeconds: number) => {
+    const newExpireAt = new Date();
+    newExpireAt.setSeconds(newExpireAt.getSeconds() + validForSeconds);
+    setExpireAt(newExpireAt);
+    getLoginState().expireAt = newExpireAt;
+
+    setIsOneTimeCodeComplete(false);
+    setShowRequestLink(false);
+    setIsRateLimited(false);
+
+    setTimeout(() => {
+      oneTimeCodeInputRef.current?.reset?.();
+      oneTimeCodeInputRef.current?.focus?.();
+    }, 100);
+  }, []);
 
   useEffect(() => {
     if (resendLoginCodeMutation.isSuccess && resendLoginCodeMutation.data) {
-      setLoginState({
-        ...getLoginState(),
-        expireAt: new Date(Date.now() + resendLoginCodeMutation.data.validForSeconds * 1000)
+      resetAfterResend(resendLoginCodeMutation.data.validForSeconds);
+      setHasRequestedNewCode(true);
+      toastQueue.add({
+        title: t`Verification code sent`,
+        description: t`A new verification code has been sent to your email.`,
+        variant: "success",
+        duration: 3000
       });
     }
-  }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data]);
+  }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data, resetAfterResend]);
 
-  useEffect(() => {
-    if (isExpired) {
-      window.location.href = "/login/expired";
-    }
-  }, [isExpired]);
+  const expiresInString = `${Math.floor(secondsRemaining / 60)}:${String(secondsRemaining % 60).padStart(2, "0")}`;
 
   return (
     <div className="w-full max-w-sm space-y-3">
       <Form
-        onSubmit={mutationSubmitter(completeLoginMutation, { path: { id: loginId } })}
+        onSubmit={(event) => {
+          const formData = new FormData(event.currentTarget);
+          const oneTimePassword = formData.get("oneTimePassword") as string;
+          if (oneTimePassword.length === 6) {
+            setLastSubmittedCode(oneTimePassword);
+          }
+          const handler = mutationSubmitter(completeLoginMutation, { path: { id: getLoginState().loginId ?? "" } });
+          return handler(event);
+        }}
         validationErrors={completeLoginMutation.error?.errors}
         validationBehavior="aria"
       >
-        <input type="hidden" name="id" value={loginId} />
+        <input type="hidden" name="id" value={getLoginState().loginId} />
         <input type="hidden" name="emailConfirmationId" value={emailConfirmationId} />
         <div className="flex w-full flex-col gap-4 rounded-lg px-6 pt-8 pb-4">
           <div className="flex justify-center">
             <Link href="/">
-              <img src={logoMarkUrl} className="h-12 w-12" alt={t`Logo`} />
+              <img src={logoMarkUrl} alt={t`Logo`} className="h-12 w-12" />
             </Link>
           </div>
           <h1 className="mb-3 w-full text-center text-2xl">
@@ -105,49 +206,94 @@ export function CompleteLoginForm() {
           </div>
           <div className="flex w-full flex-col gap-4">
             <OneTimeCodeInput
+              ref={oneTimeCodeInputRef}
               name="oneTimePassword"
               digitPattern={DigitPattern.DigitsAndChars}
               length={6}
               autoFocus={true}
               ariaLabel={t`Login verification code`}
+              disabled={isExpired || resendLoginCodeMutation.isPending}
+              onValueChange={(value: string, isComplete: boolean) => {
+                setIsOneTimeCodeComplete(isComplete);
+
+                getLoginState().currentOtpValue = value;
+
+                if (isComplete && autoSubmitCode) {
+                  setAutoSubmitCode(false);
+                  setTimeout(() => {
+                    document.querySelector("form")?.requestSubmit();
+                  }, 10);
+                }
+              }}
             />
           </div>
-          <FormErrorMessage error={completeLoginMutation.error} />
+          {!isExpired ? (
+            <p className="text-center text-neutral-500 text-xs">
+              <Trans>Your verification code is valid for {expiresInString}</Trans>
+            </p>
+          ) : (
+            <p className="text-center text-destructive text-xs">
+              <Trans>Your verification code has expired</Trans>
+            </p>
+          )}
           <Button
             type="submit"
             className="mt-4 w-full text-center"
-            isDisabled={completeLoginMutation.isPending || resendLoginCodeMutation.isPending}
+            isDisabled={
+              !isOneTimeCodeComplete ||
+              isExpired ||
+              completeLoginMutation.isPending ||
+              resendLoginCodeMutation.isPending ||
+              getLoginState()?.currentOtpValue === getLoginState()?.lastSubmittedCode
+            }
           >
             {completeLoginMutation.isPending ? <Trans>Verifying...</Trans> : <Trans>Verify</Trans>}
           </Button>
         </div>
       </Form>
 
-      <div className="flex flex-col items-center gap-6 px-6 text-neutral-500">
-        <div className="text-center text-neutral-500 text-xs">
-          <Form
-            onSubmit={mutationSubmitter(resendLoginCodeMutation, {
-              path: { emailConfirmationId: emailConfirmationId }
-            })}
-            className="inline"
-          >
-            <input type="hidden" name="id" value={loginId} />
-            <input type="hidden" name="emailConfirmationId" value={emailConfirmationId} />
-            <Button
-              type="submit"
-              variant="link"
-              className="h-auto p-0 text-xs"
-              isDisabled={completeLoginMutation.isPending || resendLoginCodeMutation.isPending}
+      <div className="flex flex-col items-center gap-2 px-6 text-neutral-500 text-xs">
+        <div className="text-center text-sm">
+          <Trans>Can&apos;t find your code?</Trans>{" "}
+          {/* Show either the spam folder message or the request link message based on conditions */}
+          {!showRequestLink || isRateLimited ? (
+            <Trans>Check your spam folder.</Trans>
+          ) : (
+            <Form
+              onSubmit={(e) => {
+                mutationSubmitter(resendLoginCodeMutation, { path: { emailConfirmationId } })(e);
+              }}
+              validationErrors={resendLoginCodeMutation.error?.errors}
+              className="inline"
             >
-              <Trans>Didn't receive the code? Resend</Trans>
-            </Button>
-          </Form>
-          <span className="ml-1 font-normal tabular-nums leading-none">({expiresInString})</span>
+              <Button
+                type="submit"
+                variant="link"
+                isDisabled={resendLoginCodeMutation.isPending}
+                className="h-auto p-0 text-sm"
+              >
+                <Trans>Request a new code</Trans>
+              </Button>
+            </Form>
+          )}
+        </div>
+        <Link
+          href="/login"
+          className="mt-2 text-xs"
+          onPress={() => {
+            const loginState = getLoginState();
+            clearLoginState();
+            setLoginState({ email: loginState?.email ?? "" });
+          }}
+        >
+          <Trans>Back to login</Trans>
+        </Link>
+        <div className="mt-6 flex flex-col items-center gap-1">
+          <span className="text-muted-foreground text-xs">
+            <Trans>Powered by</Trans>
+          </span>
+          <img src={logoWrapUrl} alt={t`PlatformPlatform`} className="h-6 w-auto" />
         </div>
-        <p className="text-xs">
-          <Trans>Can't find your code? Check your spam folder.</Trans>
-        </p>
-        <img src={poweredByUrl} alt={t`Powered by`} />
       </div>
     </div>
   );
diff --git a/application/account-management/WebApp/routes/signup/-shared/signupState.ts b/application/account-management/WebApp/routes/signup/-shared/signupState.ts
index 0dbbd630b..7971c769c 100644
--- a/application/account-management/WebApp/routes/signup/-shared/signupState.ts
+++ b/application/account-management/WebApp/routes/signup/-shared/signupState.ts
@@ -1,21 +1,69 @@
 import type { Schemas } from "@/shared/lib/api/client";
-import { t } from "@lingui/core/macro";
 
 interface SignupState {
   emailConfirmationId: Schemas["EmailConfirmationId"];
   email: string;
   expireAt: Date;
+  codeCount: number;
+  hasRequestedNewCode: boolean;
+  autoSubmitCode: boolean;
+  lastSubmittedCode?: string;
+  currentOtpValue?: string;
+  validForSeconds?: number;
 }
 
 let currentSignupState: SignupState | undefined;
 
-export function setSignupState(newSignup: SignupState): void {
-  currentSignupState = newSignup;
+export function setSignupState(newSignup: Partial<SignupState>): void {
+  if (!currentSignupState) {
+    currentSignupState = {
+      ...(newSignup as SignupState),
+      codeCount: 1, // First code
+      hasRequestedNewCode: false,
+      autoSubmitCode: true, // Default to auto-submit
+      lastSubmittedCode: "", // Initialize with empty string
+      currentOtpValue: "" // Initialize with empty string
+    };
+  } else {
+    currentSignupState = {
+      ...currentSignupState,
+      ...newSignup
+    };
+  }
+}
+
+export function incrementCodeCount(): void {
+  if (currentSignupState) {
+    currentSignupState.codeCount += 1;
+  }
+}
+
+export function setHasRequestedNewCode(value: boolean): void {
+  if (currentSignupState) {
+    currentSignupState.hasRequestedNewCode = value;
+  }
+}
+
+export function setAutoSubmitCode(value: boolean): void {
+  if (currentSignupState) {
+    currentSignupState.autoSubmitCode = value;
+  }
 }
 
-export function getSignupState() {
-  if (currentSignupState == null) {
-    throw new Error(t`No active signup session.`);
+export function setLastSubmittedCode(code: string): void {
+  if (currentSignupState) {
+    currentSignupState.lastSubmittedCode = code;
   }
-  return currentSignupState;
+}
+
+export function clearSignupState(): void {
+  currentSignupState = undefined;
+}
+
+export function hasSignupState(): boolean {
+  return currentSignupState != null;
+}
+
+export function getSignupState(): Partial<SignupState> {
+  return currentSignupState || { email: "", codeCount: 0, hasRequestedNewCode: false, autoSubmitCode: true };
 }
diff --git a/application/account-management/WebApp/routes/signup/expired.tsx b/application/account-management/WebApp/routes/signup/expired.tsx
deleted file mode 100644
index e086e1a8f..000000000
--- a/application/account-management/WebApp/routes/signup/expired.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ErrorMessage } from "@/shared/components/ErrorMessage";
-import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
-import { Trans } from "@lingui/react/macro";
-import { signUpPath } from "@repo/infrastructure/auth/constants";
-import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage";
-import { Link } from "@repo/ui/components/Link";
-import Timeout from "@spectrum-icons/illustrations/Timeout";
-import { createFileRoute } from "@tanstack/react-router";
-import { getSignupState } from "./-shared/signupState";
-
-export const Route = createFileRoute("/signup/expired")({
-  component: () => (
-    <HorizontalHeroLayout>
-      <VerificationCodeExpiredMessage />
-    </HorizontalHeroLayout>
-  ),
-  errorComponent: (props) => (
-    <HorizontalHeroLayout>
-      <ErrorMessage {...props} />
-    </HorizontalHeroLayout>
-  )
-});
-
-export function VerificationCodeExpiredMessage() {
-  const { emailConfirmationId } = getSignupState();
-
-  return (
-    <IllustratedMessage>
-      <Timeout />
-      <Heading>
-        <Trans>Error: Verification code has expired</Trans>
-      </Heading>
-      <Content>
-        <Trans>
-          The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}
-        </Trans>
-      </Content>
-      <Link href={signUpPath}>
-        <Trans>Try again</Trans>
-      </Link>
-    </IllustratedMessage>
-  );
-}
diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx
index 792746ec6..1ba5247f7 100644
--- a/application/account-management/WebApp/routes/signup/index.tsx
+++ b/application/account-management/WebApp/routes/signup/index.tsx
@@ -1,6 +1,6 @@
 import { ErrorMessage } from "@/shared/components/ErrorMessage";
 import logoMarkUrl from "@/shared/images/logo-mark.svg";
-import poweredByUrl from "@/shared/images/powered-by.svg";
+import logoWrapUrl from "@/shared/images/logo-wrap.svg";
 import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
 import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
@@ -9,7 +9,6 @@ import { loggedInPath, loginPath } from "@repo/infrastructure/auth/constants";
 import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks";
 import { Button } from "@repo/ui/components/Button";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Heading } from "@repo/ui/components/Heading";
 import { Link } from "@repo/ui/components/Link";
 import { Select, SelectItem } from "@repo/ui/components/Select";
@@ -18,7 +17,8 @@ import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { Navigate, createFileRoute } from "@tanstack/react-router";
 import { DotIcon } from "lucide-react";
 import { useState } from "react";
-import { setSignupState } from "./-shared/signupState";
+import { getLoginState } from "../login/-shared/loginState";
+import { clearSignupState, getSignupState, setSignupState } from "./-shared/signupState";
 
 export const Route = createFileRoute("/signup/")({
   component: function SignupRoute() {
@@ -42,13 +42,16 @@ export const Route = createFileRoute("/signup/")({
 });
 
 export function StartSignupForm() {
-  const [email, setEmail] = useState("");
+  const { email: savedEmail } = getSignupState();
+  const { email: loginEmail } = getLoginState(); // Prefill from login page if user navigated here
+  const [email, setEmail] = useState(savedEmail || loginEmail || "");
 
   const startSignupMutation = api.useMutation("post", "/api/account-management/signups/start");
 
   if (startSignupMutation.isSuccess) {
     const { emailConfirmationId, validForSeconds } = startSignupMutation.data;
 
+    clearSignupState();
     setSignupState({
       emailConfirmationId,
       email,
@@ -98,11 +101,10 @@ export function StartSignupForm() {
           <Trans>Europe</Trans>
         </SelectItem>
       </Select>
-      <FormErrorMessage error={startSignupMutation.error} />
       <Button type="submit" isDisabled={startSignupMutation.isPending} className="mt-4 w-full text-center">
         <Trans>Create your account</Trans>
       </Button>
-      <p className="text-muted-foreground text-xs">
+      <p className="text-muted-foreground text-sm">
         <Trans>Do you already have an account?</Trans>{" "}
         <Link href={loginPath}>
           <Trans>Log in</Trans>
@@ -120,7 +122,12 @@ export function StartSignupForm() {
           </Link>
         </div>
       </div>
-      <img src={poweredByUrl} alt={t`Powered by`} />
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-muted-foreground text-xs">
+          <Trans>Powered by</Trans>
+        </span>
+        <img src={logoWrapUrl} alt={t`PlatformPlatform`} className="h-6 w-auto" />
+      </div>
     </Form>
   );
 }
diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx
index 9e94df379..647ef4e96 100644
--- a/application/account-management/WebApp/routes/signup/verify.tsx
+++ b/application/account-management/WebApp/routes/signup/verify.tsx
@@ -1,31 +1,49 @@
 import { ErrorMessage } from "@/shared/components/ErrorMessage";
 import logoMarkUrl from "@/shared/images/logo-mark.svg";
-import poweredByUrl from "@/shared/images/powered-by.svg";
+import logoWrapUrl from "@/shared/images/logo-wrap.svg";
 import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout";
 import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { loggedInPath, signedUpPath } from "@repo/infrastructure/auth/constants";
+import { loggedInPath } from "@repo/infrastructure/auth/constants";
 import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks";
 import { preferredLocaleKey } from "@repo/infrastructure/translations/constants";
 import { Button } from "@repo/ui/components/Button";
 import { DigitPattern } from "@repo/ui/components/Digit";
 import { Form } from "@repo/ui/components/Form";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Link } from "@repo/ui/components/Link";
-import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput";
+import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
-import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration";
-import { Navigate, createFileRoute } from "@tanstack/react-router";
-import { useEffect } from "react";
-import { getSignupState, setSignupState } from "./-shared/signupState";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  clearSignupState,
+  getSignupState,
+  hasSignupState,
+  setLastSubmittedCode,
+  setSignupState
+} from "./-shared/signupState";
 
 export const Route = createFileRoute("/signup/verify")({
   component: function SignupVerifyRoute() {
+    const navigate = useNavigate();
     const isAuthenticated = useIsAuthenticated();
 
-    if (isAuthenticated) {
-      return <Navigate to={loggedInPath} />;
+    useEffect(() => {
+      if (isAuthenticated) {
+        navigate({ to: loggedInPath });
+        return;
+      }
+
+      if (!hasSignupState()) {
+        navigate({ to: "/signup", replace: true });
+      }
+    }, [isAuthenticated, navigate]);
+
+    if (isAuthenticated || !hasSignupState()) {
+      return null;
     }
 
     return (
@@ -41,45 +59,130 @@ export const Route = createFileRoute("/signup/verify")({
   )
 });
 
+function useCountdown(expireAt: Date) {
+  const [secondsRemaining, setSecondsRemaining] = useState(() =>
+    Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000))
+  );
+
+  // Reset the countdown when expireAt changes
+  useEffect(() => {
+    setSecondsRemaining(Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000)));
+  }, [expireAt]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setSecondsRemaining((prev) => {
+        return Math.max(0, prev - 1);
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return secondsRemaining;
+}
+
 export function CompleteSignupForm() {
-  const { email, emailConfirmationId, expireAt } = getSignupState();
-  const { expiresInString, isExpired } = useExpirationTimeout(expireAt);
+  const initialState = getSignupState();
+  const { email = "", emailConfirmationId = "" } = initialState;
+  const initialExpireAt = initialState.expireAt ? new Date(initialState.expireAt) : new Date();
+  const [expireAt, setExpireAt] = useState<Date>(initialExpireAt);
+  const secondsRemaining = useCountdown(expireAt);
+  const isExpired = secondsRemaining === 0;
+  const oneTimeCodeInputRef = useRef<OneTimeCodeInputRef | null>(null);
+  const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false);
+  const [showRequestLink, setShowRequestLink] = useState(false);
+  const [hasRequestedNewCode, setHasRequestedNewCode] = useState(false);
+  const [isRateLimited, setIsRateLimited] = useState(false);
+  const [autoSubmitCode, setAutoSubmitCode] = useState(true);
+
+  useEffect(() => {
+    if (!isExpired && !showRequestLink && !hasRequestedNewCode) {
+      const timeoutId = setTimeout(() => {
+        setShowRequestLink(true);
+      }, 30000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isExpired, showRequestLink, hasRequestedNewCode]);
 
   const completeSignupMutation = api.useMutation(
     "post",
     "/api/account-management/signups/{emailConfirmationId}/complete"
   );
 
+  const resendSignupCodeMutation = api.useMutation(
+    "post",
+    "/api/account-management/signups/{emailConfirmationId}/resend-code"
+  );
+
   useEffect(() => {
     if (completeSignupMutation.isSuccess) {
-      window.location.href = signedUpPath;
+      clearSignupState();
+      window.location.href = loggedInPath;
     }
   }, [completeSignupMutation.isSuccess]);
 
-  const resendSignupCodeMutation = api.useMutation(
-    "post",
-    "/api/account-management/signups/{emailConfirmationId}/resend-code"
-  );
+  useEffect(() => {
+    if (completeSignupMutation.isError) {
+      const statusCode = completeSignupMutation.error?.status;
+      if (statusCode === 403) {
+        setIsRateLimited(true);
+        setExpireAt(new Date(0)); // Force expiration
+      } else {
+        setTimeout(() => {
+          if (oneTimeCodeInputRef.current) {
+            oneTimeCodeInputRef.current.focus?.();
+          }
+        }, 100);
+      }
+    }
+  }, [completeSignupMutation.isError, completeSignupMutation.error]);
+
+  const resetAfterResend = useCallback((validForSeconds: number) => {
+    const newExpireAt = new Date();
+    newExpireAt.setSeconds(newExpireAt.getSeconds() + validForSeconds);
+    setExpireAt(newExpireAt);
+    getSignupState().expireAt = newExpireAt;
+
+    setIsOneTimeCodeComplete(false);
+    setShowRequestLink(false);
+    setIsRateLimited(false);
+
+    setTimeout(() => {
+      oneTimeCodeInputRef.current?.reset?.();
+      oneTimeCodeInputRef.current?.focus?.();
+    }, 100);
+  }, []);
 
   useEffect(() => {
     if (resendSignupCodeMutation.isSuccess && resendSignupCodeMutation.data) {
-      setSignupState({
-        ...getSignupState(),
-        expireAt: new Date(Date.now() + resendSignupCodeMutation.data.validForSeconds * 1000)
+      resetAfterResend(resendSignupCodeMutation.data.validForSeconds);
+      setHasRequestedNewCode(true);
+      toastQueue.add({
+        title: t`Verification code sent`,
+        description: t`A new verification code has been sent to your email.`,
+        variant: "success",
+        duration: 3000
       });
     }
-  }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data]);
+  }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data, resetAfterResend]);
 
-  useEffect(() => {
-    if (isExpired) {
-      window.location.href = "/signup/expired";
-    }
-  }, [isExpired]);
+  const expiresInString = `${Math.floor(secondsRemaining / 60)}:${String(secondsRemaining % 60).padStart(2, "0")}`;
 
   return (
     <div className="w-full max-w-sm space-y-3">
       <Form
-        onSubmit={mutationSubmitter(completeSignupMutation, { path: { emailConfirmationId: emailConfirmationId } })}
+        onSubmit={(event) => {
+          const formData = new FormData(event.currentTarget);
+          const oneTimePassword = formData.get("oneTimePassword") as string;
+          if (oneTimePassword.length === 6) {
+            setLastSubmittedCode(oneTimePassword);
+          }
+          const handler = mutationSubmitter(completeSignupMutation, {
+            path: { emailConfirmationId: emailConfirmationId }
+          });
+          return handler(event);
+        }}
         validationErrors={completeSignupMutation.error?.errors}
         validationBehavior="aria"
       >
@@ -88,7 +191,7 @@ export function CompleteSignupForm() {
         <div className="flex w-full flex-col gap-4 rounded-lg px-6 pt-8 pb-4">
           <div className="flex justify-center">
             <Link href="/">
-              <img src={logoMarkUrl} className="h-12 w-12" alt={t`Logo`} />
+              <img src={logoMarkUrl} alt={t`Logo`} className="h-12 w-12" />
             </Link>
           </div>
           <h1 className="mb-3 w-full text-center text-2xl">
@@ -101,48 +204,94 @@ export function CompleteSignupForm() {
           </div>
           <div className="flex w-full flex-col gap-4">
             <OneTimeCodeInput
+              ref={oneTimeCodeInputRef}
               name="oneTimePassword"
               digitPattern={DigitPattern.DigitsAndChars}
               length={6}
               autoFocus={true}
               ariaLabel={t`Signup verification code`}
+              disabled={isExpired || resendSignupCodeMutation.isPending}
+              onValueChange={(value: string, isComplete: boolean) => {
+                setIsOneTimeCodeComplete(isComplete);
+
+                getSignupState().currentOtpValue = value;
+
+                if (isComplete && autoSubmitCode) {
+                  setAutoSubmitCode(false);
+                  setTimeout(() => {
+                    document.querySelector("form")?.requestSubmit();
+                  }, 10);
+                }
+              }}
             />
           </div>
-          <FormErrorMessage error={completeSignupMutation.error} />
+          {!isExpired ? (
+            <p className="text-center text-neutral-500 text-xs">
+              <Trans>Your verification code is valid for {expiresInString}</Trans>
+            </p>
+          ) : (
+            <p className="text-center text-destructive text-xs">
+              <Trans>Your verification code has expired</Trans>
+            </p>
+          )}
           <Button
             type="submit"
             className="mt-4 w-full text-center"
-            isDisabled={completeSignupMutation.isPending || resendSignupCodeMutation.isPending}
+            isDisabled={
+              !isOneTimeCodeComplete ||
+              isExpired ||
+              completeSignupMutation.isPending ||
+              resendSignupCodeMutation.isPending ||
+              getSignupState()?.currentOtpValue === getSignupState()?.lastSubmittedCode
+            }
           >
             {completeSignupMutation.isPending ? <Trans>Verifying...</Trans> : <Trans>Verify</Trans>}
           </Button>
         </div>
       </Form>
 
-      <div className="flex flex-col items-center gap-6 px-6 text-neutral-500">
-        <div className="text-center text-neutral-500 text-xs">
-          <Form
-            onSubmit={mutationSubmitter(resendSignupCodeMutation, {
-              path: { emailConfirmationId: emailConfirmationId }
-            })}
-            className="inline"
-          >
-            <input type="hidden" name="emailConfirmationId" value={emailConfirmationId} />
-            <Button
-              type="submit"
-              variant="link"
-              className="h-auto p-0 text-xs"
-              isDisabled={completeSignupMutation.isPending || resendSignupCodeMutation.isPending}
+      <div className="flex flex-col items-center gap-2 px-6 text-neutral-500 text-xs">
+        <div className="text-center text-sm">
+          <Trans>Can&apos;t find your code?</Trans>{" "}
+          {/* Show either the spam folder message or the request link message based on conditions */}
+          {!showRequestLink || isRateLimited ? (
+            <Trans>Check your spam folder.</Trans>
+          ) : (
+            <Form
+              onSubmit={(e) => {
+                mutationSubmitter(resendSignupCodeMutation, { path: { emailConfirmationId } })(e);
+              }}
+              validationErrors={resendSignupCodeMutation.error?.errors}
+              className="inline"
             >
-              <Trans>Didn't receive the code? Resend</Trans>
-            </Button>
-          </Form>
-          <span className="ml-1 font-normal tabular-nums leading-none">({expiresInString})</span>
+              <Button
+                type="submit"
+                variant="link"
+                isDisabled={resendSignupCodeMutation.isPending}
+                className="h-auto p-0 text-sm"
+              >
+                <Trans>Request a new code</Trans>
+              </Button>
+            </Form>
+          )}
+        </div>
+        <Link
+          href="/signup"
+          className="mt-2 text-xs"
+          onPress={() => {
+            const signupState = getSignupState();
+            clearSignupState();
+            setSignupState({ email: signupState?.email ?? "" });
+          }}
+        >
+          <Trans>Back to signup</Trans>
+        </Link>
+        <div className="mt-6 flex flex-col items-center gap-1">
+          <span className="text-muted-foreground text-xs">
+            <Trans>Powered by</Trans>
+          </span>
+          <img src={logoWrapUrl} alt={t`PlatformPlatform`} className="h-6 w-auto" />
         </div>
-        <p className="text-xs">
-          <Trans>Can't find your code? Check your spam folder.</Trans>
-        </p>
-        <img src={poweredByUrl} alt={t`Powered by`} />
       </div>
     </div>
   );
diff --git a/application/account-management/WebApp/rsbuild.config.ts b/application/account-management/WebApp/rsbuild.config.ts
index d0184b235..024958a59 100644
--- a/application/account-management/WebApp/rsbuild.config.ts
+++ b/application/account-management/WebApp/rsbuild.config.ts
@@ -11,6 +11,14 @@ import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
 const customBuildEnv: CustomBuildEnv = {};
 
 export default defineConfig({
+  tools: {
+    rspack: {
+      // Exclude tests/e2e directory from file watching to prevent hot reloading issues
+      watchOptions: {
+        ignored: ["**/tests/**", "**/playwright-report/**"]
+      }
+    }
+  },
   plugins: [
     pluginReact(),
     pluginTypeCheck(),
diff --git a/application/account-management/WebApp/shared/components/AvatarButton.tsx b/application/account-management/WebApp/shared/components/AvatarButton.tsx
index 0c23fc196..c519670f6 100644
--- a/application/account-management/WebApp/shared/components/AvatarButton.tsx
+++ b/application/account-management/WebApp/shared/components/AvatarButton.tsx
@@ -7,20 +7,41 @@ import { createLoginUrlWithReturnPath } from "@repo/infrastructure/auth/util";
 import { Avatar } from "@repo/ui/components/Avatar";
 import { Button } from "@repo/ui/components/Button";
 import { Menu, MenuHeader, MenuItem, MenuSeparator, MenuTrigger } from "@repo/ui/components/Menu";
+import { useQueryClient } from "@tanstack/react-query";
 import { LogOutIcon, UserIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "aria-label": string }>) {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [hasAutoOpenedModal, setHasAutoOpenedModal] = useState(false);
   const userInfo = useUserInfo();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
-    if (userInfo?.isAuthenticated && (!userInfo.firstName || !userInfo.lastName)) {
+    // Only auto-open the modal once per session if user lacks firstName or lastName
+    if (
+      userInfo?.isAuthenticated &&
+      (!userInfo.firstName || !userInfo.lastName) &&
+      !hasAutoOpenedModal &&
+      !isProfileModalOpen
+    ) {
       setIsProfileModalOpen(true);
+      setHasAutoOpenedModal(true);
     }
-  }, [userInfo]);
+  }, [userInfo, hasAutoOpenedModal, isProfileModalOpen]);
+
+  const handleProfileModalClose = (isOpen: boolean) => {
+    setIsProfileModalOpen(isOpen);
+    // No need to check userInfo state here - once modal is closed by user, don't auto-open again
+  };
 
   const logoutMutation = api.useMutation("post", "/api/account-management/authentication/logout", {
+    onMutate: async () => {
+      // Cancel all ongoing queries and remove them from cache to prevent 401 errors
+      await queryClient.cancelQueries();
+      queryClient.clear();
+      setHasAutoOpenedModal(false); // Reset for clean state
+    },
     onSuccess: () => {
       window.location.href = createLoginUrlWithReturnPath(loginPath);
     },
@@ -44,8 +65,8 @@ export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "ar
             <div className="flex flex-row items-center gap-2">
               <Avatar avatarUrl={userInfo.avatarUrl} initials={userInfo.initials ?? ""} isRound={true} size="sm" />
               <div className="my-1 flex flex-col">
-                <h2>{userInfo.fullName}</h2>
-                <p className="text-muted-foreground">{userInfo.title ?? userInfo.email}</p>
+                <h4>{userInfo.fullName}</h4>
+                <p className="subtitle">{userInfo.title || userInfo.email}</p>
               </div>
             </div>
           </MenuHeader>
@@ -61,7 +82,7 @@ export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "ar
         </Menu>
       </MenuTrigger>
 
-      <UserProfileModal isOpen={isProfileModalOpen} onOpenChange={setIsProfileModalOpen} />
+      <UserProfileModal isOpen={isProfileModalOpen} onOpenChange={handleProfileModalClose} />
     </>
   );
 }
diff --git a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
index b17b04d97..ab0938e2e 100644
--- a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
+++ b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
@@ -1,8 +1,22 @@
+import { api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
 import { Trans } from "@lingui/react/macro";
-import { MenuButton, SideMenu, SideMenuSeparator } from "@repo/ui/components/SideMenu";
-import { CircleUserIcon, HomeIcon, UsersIcon } from "lucide-react";
+import { loginPath } from "@repo/infrastructure/auth/constants";
+import { useUserInfo } from "@repo/infrastructure/auth/hooks";
+import { createLoginUrlWithReturnPath } from "@repo/infrastructure/auth/util";
+import { type Locale, translationContext } from "@repo/infrastructure/translations/TranslationContext";
+import { Avatar } from "@repo/ui/components/Avatar";
+import { Button } from "@repo/ui/components/Button";
+import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu";
+import { MenuButton, SideMenu, SideMenuSeparator, overlayContext } from "@repo/ui/components/SideMenu";
+import { useThemeMode } from "@repo/ui/theme/mode/ThemeMode";
+import { ThemeMode } from "@repo/ui/theme/mode/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { CheckIcon, CircleUserIcon, GlobeIcon, HomeIcon, LogOutIcon, SunIcon, UserIcon, UsersIcon } from "lucide-react";
 import type React from "react";
+import { use, useContext, useState } from "react";
+import UserProfileModal from "./userModals/UserProfileModal";
 
 type SharedSideMenuProps = {
   children?: React.ReactNode;
@@ -10,15 +24,212 @@ type SharedSideMenuProps = {
 };
 
 export function SharedSideMenu({ children, ariaLabel }: Readonly<SharedSideMenuProps>) {
+  const userInfo = useUserInfo();
+  const { i18n } = useLingui();
+  const { getLocaleInfo, locales, setLocale } = use(translationContext);
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const queryClient = useQueryClient();
+  const { themeMode, setThemeMode } = useThemeMode();
+
+  // Access mobile menu overlay context to close menu when needed
+  const overlayCtx = useContext(overlayContext);
+
+  const currentLocale = i18n.locale as Locale;
+  const currentLocaleLabel = getLocaleInfo(currentLocale).label;
+
+  const getThemeName = (mode: ThemeMode) => {
+    switch (mode) {
+      case ThemeMode.System:
+        return t`System`;
+      case ThemeMode.Light:
+        return t`Light`;
+      case ThemeMode.Dark:
+        return t`Dark`;
+      default:
+        return t`System`;
+    }
+  };
+
+  const logoutMutation = api.useMutation("post", "/api/account-management/authentication/logout", {
+    onMutate: async () => {
+      await queryClient.cancelQueries();
+      queryClient.clear();
+    },
+    onSuccess: () => {
+      window.location.href = createLoginUrlWithReturnPath(loginPath);
+    },
+    meta: {
+      skipQueryInvalidation: true
+    }
+  });
+
+  const topMenuContent = (
+    <div className="flex h-full flex-col">
+      {/* User Profile Section */}
+      <div className="flex flex-col gap-3">
+        {/* User Profile */}
+        {userInfo && (
+          <div className="flex items-center gap-3 px-3">
+            <Avatar avatarUrl={userInfo.avatarUrl} initials={userInfo.initials ?? ""} isRound={true} size="md" />
+            <div className="min-w-0 flex-1">
+              <div className="truncate font-medium text-foreground text-sm">{userInfo.fullName}</div>
+              <div className="truncate text-muted-foreground text-xs">{userInfo.title || userInfo.email}</div>
+            </div>
+            <div className="shrink-0" style={{ position: "relative", zIndex: 1000 }}>
+              <button
+                type="button"
+                onClick={() => {
+                  // Close mobile menu if it's open
+                  if (overlayCtx?.isOpen) {
+                    overlayCtx.close();
+                  } else {
+                    // Fallback: dispatch custom event to close mobile menu
+                    window.dispatchEvent(new CustomEvent("close-mobile-menu"));
+                  }
+
+                  // Small delay to ensure menu closes before modal opens
+                  setTimeout(() => {
+                    setIsProfileModalOpen(true);
+                  }, 50);
+                }}
+                className="rounded border border-border bg-background px-2 py-1 text-sm hover:bg-hover-background"
+                style={{ pointerEvents: "auto", position: "relative" }}
+              >
+                <UserIcon className="mr-1 inline h-4 w-4" />
+                <Trans>Edit</Trans>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Logout */}
+        <div className="flex items-center justify-between">
+          <Button
+            variant="ghost"
+            onPress={() => {
+              // Close mobile menu if it's open
+              if (overlayCtx?.isOpen) {
+                overlayCtx.close();
+              }
+              logoutMutation.mutate({});
+            }}
+            className="flex h-11 w-full items-center justify-start gap-4 px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
+            style={{ pointerEvents: "auto" }}
+          >
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+              <LogOutIcon className="h-5 w-5 stroke-current" />
+            </div>
+            <div className="overflow-hidden whitespace-nowrap text-start">
+              <Trans>Log out</Trans>
+            </div>
+          </Button>
+        </div>
+
+        {/* Theme Section - simple button that cycles themes */}
+        <div className="flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => {
+              // Close mobile menu if it's open
+              if (overlayCtx?.isOpen) {
+                overlayCtx.close();
+              }
+
+              // Cycle through themes: System -> Light -> Dark -> System
+              const nextTheme =
+                themeMode === ThemeMode.System
+                  ? ThemeMode.Light
+                  : themeMode === ThemeMode.Light
+                    ? ThemeMode.Dark
+                    : ThemeMode.System;
+              setThemeMode(nextTheme);
+            }}
+            className="flex h-11 w-full items-center justify-start gap-4 rounded px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
+            style={{ pointerEvents: "auto" }}
+          >
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+              <SunIcon className="h-5 w-5 stroke-current" />
+            </div>
+            <div className="min-w-0 flex-1 overflow-hidden whitespace-nowrap text-start">
+              <Trans>Theme</Trans>
+            </div>
+            <div className="shrink-0 text-base text-muted-foreground">{getThemeName(themeMode)}</div>
+          </button>
+        </div>
+
+        {/* Language Section - styled like menu item */}
+        <div className="flex items-center justify-between">
+          <MenuTrigger>
+            <Button
+              variant="ghost"
+              className="flex h-11 w-full items-center justify-start gap-4 px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
+              style={{ pointerEvents: "auto" }}
+            >
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+                <GlobeIcon className="h-5 w-5 stroke-current" />
+              </div>
+              <div className="min-w-0 flex-1 overflow-hidden whitespace-nowrap text-start">
+                <Trans>Language</Trans>
+              </div>
+              <div className="shrink-0 text-base text-muted-foreground">{currentLocaleLabel}</div>
+            </Button>
+            <Menu
+              onAction={(key) => {
+                const locale = key.toString() as Locale;
+                if (locale !== currentLocale) {
+                  setLocale(locale);
+                }
+              }}
+              placement="bottom end"
+            >
+              {locales.map((locale) => (
+                <MenuItem key={locale} id={locale} textValue={getLocaleInfo(locale).label}>
+                  <div className="flex items-center gap-2">
+                    <span>{getLocaleInfo(locale).label}</span>
+                    {locale === currentLocale && <CheckIcon className="ml-auto h-4 w-4" />}
+                  </div>
+                </MenuItem>
+              ))}
+            </Menu>
+          </MenuTrigger>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="mx-3 my-5 border-border/50 border-b" />
+
+      {/* Navigation Section for Mobile */}
+      <div className="flex flex-col gap-3">
+        <SideMenuSeparator>
+          <Trans>Navigation</Trans>
+        </SideMenuSeparator>
+        <MenuButton icon={HomeIcon} label={t`Home`} href="/admin" />
+        <SideMenuSeparator>
+          <Trans>Organization</Trans>
+        </SideMenuSeparator>
+        <MenuButton icon={CircleUserIcon} label={t`Account`} href="/admin/account" />
+        <MenuButton icon={UsersIcon} label={t`Users`} href="/admin/users" />
+        {children}
+      </div>
+
+      {/* Spacer to push content up */}
+      <div className="flex-1" />
+    </div>
+  );
+
   return (
-    <SideMenu ariaLabel={ariaLabel}>
-      <MenuButton icon={HomeIcon} label={t`Home`} href="/admin" />
-      <SideMenuSeparator>
-        <Trans>Organization</Trans>
-      </SideMenuSeparator>
-      <MenuButton icon={CircleUserIcon} label={t`Account`} href="/admin/account" />
-      <MenuButton icon={UsersIcon} label={t`Users`} href="/admin/users" />
-      {children}
-    </SideMenu>
+    <>
+      <SideMenu ariaLabel={ariaLabel} topMenuContent={topMenuContent}>
+        <MenuButton icon={HomeIcon} label={t`Home`} href="/admin" />
+        <SideMenuSeparator>
+          <Trans>Organization</Trans>
+        </SideMenuSeparator>
+        <MenuButton icon={CircleUserIcon} label={t`Account`} href="/admin/account" />
+        <MenuButton icon={UsersIcon} label={t`Users`} href="/admin/users" />
+        {children}
+      </SideMenu>
+
+      <UserProfileModal isOpen={isProfileModalOpen} onOpenChange={setIsProfileModalOpen} />
+    </>
   );
 }
diff --git a/application/account-management/WebApp/shared/components/topMenu/index.tsx b/application/account-management/WebApp/shared/components/topMenu/index.tsx
index dfbb9df26..5a88735bf 100644
--- a/application/account-management/WebApp/shared/components/topMenu/index.tsx
+++ b/application/account-management/WebApp/shared/components/topMenu/index.tsx
@@ -3,6 +3,7 @@ import { Trans } from "@lingui/react/macro";
 import { LocaleSwitcher } from "@repo/infrastructure/translations/LocaleSwitcher";
 import { Breadcrumb, Breadcrumbs } from "@repo/ui/components/Breadcrumbs";
 import { Button } from "@repo/ui/components/Button";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
 import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector";
 import { LifeBuoyIcon } from "lucide-react";
 import type { ReactNode } from "react";
@@ -14,7 +15,7 @@ interface TopMenuProps {
 
 export function TopMenu({ children }: Readonly<TopMenuProps>) {
   return (
-    <nav className="flex w-full items-center justify-between">
+    <nav className="hidden w-full items-center justify-between sm:flex">
       <Breadcrumbs>
         <Breadcrumb href="/admin">
           <Trans>Home</Trans>
@@ -24,10 +25,16 @@ export function TopMenu({ children }: Readonly<TopMenuProps>) {
       <div className="flex flex-row items-center gap-6">
         <span className="flex gap-2">
           <ThemeModeSelector aria-label={t`Toggle theme`} />
-          <Button variant="icon" aria-label={t`Help`}>
-            <LifeBuoyIcon size={20} />
-          </Button>
-          <LocaleSwitcher aria-label={t`Select language`} />
+          <TooltipTrigger delay={200}>
+            <Button variant="icon" aria-label={t`Help`}>
+              <LifeBuoyIcon size={20} />
+            </Button>
+            <Tooltip>{t`Support`}</Tooltip>
+          </TooltipTrigger>
+          <TooltipTrigger delay={200}>
+            <LocaleSwitcher aria-label={t`Select language`} />
+            <Tooltip>{t`Change language`}</Tooltip>
+          </TooltipTrigger>
         </span>
         <AvatarButton aria-label={t`User profile menu`} />
       </div>
diff --git a/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx b/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx
index 80e82c681..ad8cc0fd7 100644
--- a/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx
+++ b/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx
@@ -4,13 +4,13 @@ import { Trans } from "@lingui/react/macro";
 import { AuthenticationContext } from "@repo/infrastructure/auth/AuthenticationProvider";
 import { Button } from "@repo/ui/components/Button";
 import { Dialog } from "@repo/ui/components/Dialog";
-import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage";
 import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "@repo/ui/components/Menu";
 import { Modal } from "@repo/ui/components/Modal";
 import { TextField } from "@repo/ui/components/TextField";
+import { toastQueue } from "@repo/ui/components/Toast";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { useMutation } from "@tanstack/react-query";
-import { CameraIcon, Trash2Icon, XIcon } from "lucide-react";
+import { CameraIcon, MailIcon, Trash2Icon, XIcon } from "lucide-react";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { FileTrigger, Form, Heading, Label } from "react-aria-components";
 
@@ -91,10 +91,20 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<Profile
       if (updatedUser) {
         updateUserInfo(updatedUser);
       }
+    }
+  });
 
+  useEffect(() => {
+    if (saveMutation.isSuccess) {
+      toastQueue.add({
+        title: t`Success`,
+        description: t`Profile updated successfully`,
+        variant: "success",
+        duration: 3000
+      });
       closeDialog();
     }
-  });
+  }, [saveMutation.isSuccess, closeDialog]);
 
   // Handle file selection
   const onFileSelect = (files: FileList | null) => {
@@ -212,7 +222,7 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<Profile
             name="firstName"
             label={t`First name`}
             defaultValue={user?.firstName}
-            placeholder={t`E.g., Alex`}
+            placeholder={t`E.g. Alex`}
             className="sm:w-64"
           />
           <TextField
@@ -220,17 +230,25 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly<Profile
             name="lastName"
             label={t`Last name`}
             defaultValue={user?.lastName}
-            placeholder={t`E.g., Taylor`}
+            placeholder={t`E.g. Taylor`}
             className="sm:w-64"
           />
         </div>
-        <TextField name="email" label={t`Email`} value={user?.email} />
-        <TextField name="title" label={t`Title`} defaultValue={user?.title} placeholder={t`E.g., Software engineer`} />
-
-        <FormErrorMessage error={saveMutation.error} />
+        <TextField
+          label={t`Email`}
+          value={user?.email}
+          isDisabled={true}
+          startIcon={<MailIcon className="h-4 w-4" />}
+        />
+        <TextField name="title" label={t`Title`} defaultValue={user?.title} placeholder={t`E.g. Software engineer`} />
 
         <div className="mt-6 flex justify-end gap-4">
-          <Button type="reset" onPress={closeDialog} variant="secondary">
+          <Button
+            type="reset"
+            onPress={closeDialog}
+            variant="secondary"
+            isDisabled={isLoading || saveMutation.isPending}
+          >
             <Trans>Cancel</Trans>
           </Button>
           <Button type="submit" isDisabled={isLoading || saveMutation.isPending}>
diff --git a/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx b/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx
index c8d616f1f..d3797f4aa 100644
--- a/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx
+++ b/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx
@@ -21,8 +21,8 @@ export function HorizontalHeroLayout({ children }: Readonly<HorizontalHeroLayout
         <LocaleSwitcher aria-label={t`Select language`} />
       </div>
       <div className="flex grow flex-col gap-4 md:flex-row">
-        <div className="flex flex-col items-center justify-center gap-6 p-6 md:w-1/2">{children}</div>
-        <div className="flex items-center justify-center bg-gray-50 p-6 md:w-1/2 md:px-28 md:py-12 dark:bg-gray-900">
+        <div className="flex flex-col items-center justify-center gap-6 bg-background p-6 md:w-1/2">{children}</div>
+        <div className="flex items-center justify-center bg-input-background p-6 md:w-1/2 md:px-28 md:py-12">
           <HeroImage />
         </div>
       </div>
diff --git a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
index 6aaa759b5..2960c5a4d 100644
--- a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
+++ b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
@@ -1308,9 +1308,6 @@
         "type": "object",
         "additionalProperties": false,
         "properties": {
-          "email": {
-            "type": "string"
-          },
           "firstName": {
             "type": "string"
           },
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po
index 70d809955..54fb8a285 100644
--- a/application/account-management/WebApp/shared/translations/locale/da-DK.po
+++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po
@@ -13,15 +13,24 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
 
+msgid "A new verification code has been sent to your email."
+msgstr "En ny bekræftelseskode er blevet sendt til din e-mail."
+
 msgid "Account"
 msgstr "Konto"
 
+msgid "Account information"
+msgstr "Kontoinformation"
+
 msgid "Account name"
 msgstr "Kontonavn"
 
 msgid "Account settings"
 msgstr "Kontoindstillinger"
 
+msgid "Account updated successfully"
+msgstr "Konto opdateret succesfuldt"
+
 msgid "Actions"
 msgstr "Handlinger"
 
@@ -50,6 +59,9 @@ msgstr "Alle brugere"
 msgid "An error occurred while processing your request. {0}"
 msgstr "Der opstod en fejl under behandlingen af din anmodning. {0}"
 
+msgid "An invitation email will be sent to the user with a link to log in."
+msgstr "En invitations-e-mail vil blive sendt til brugeren med et link til login."
+
 msgid "Any role"
 msgstr "Enhver rolle"
 
@@ -60,19 +72,27 @@ msgstr "Enhver status"
 msgid "Are you sure you want to delete <0>{0} users</0>?"
 msgstr "Er du sikker på, at du vil slette <0>{0} brugere</0>?"
 
-#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
-msgid "Are you sure you want to delete <0>{0}?</0>"
-msgstr "Er du sikker på, at du vil slette <0>{0}?</0>"
+msgid "Are you sure you want to delete <0>{userDisplayName}</0>?"
+msgstr "Er du sikker på, at du vil slette <0>{userDisplayName}</0>?"
+
+msgid "Back to login"
+msgstr "Tilbage til login"
+
+msgid "Back to signup"
+msgstr "Tilbage til tilmelding"
 
 msgid "By continuing, you accept our policies"
 msgstr "Ved at fortsætte accepterer du vores vilkår"
 
-msgid "Can't find your code? Check your spam folder."
-msgstr "Kan du ikke finde din kode? Tjek din spammappe."
+msgid "Can't find your code?"
+msgstr "Kan du ikke finde din kode?"
 
 msgid "Cancel"
 msgstr "Annuller"
 
+msgid "Change language"
+msgstr "Skift sprog"
+
 msgid "Change profile picture"
 msgstr "Skift profilbillede"
 
@@ -82,6 +102,15 @@ msgstr "Skift rolle"
 msgid "Change user role"
 msgstr "Skift brugerrolle"
 
+msgid "Check your spam folder."
+msgstr "Tjek din spammappe."
+
+msgid "Clear"
+msgstr "Ryd"
+
+msgid "Clear filters"
+msgstr "Ryd filtre"
+
 msgid "Continue"
 msgstr "Fortsæt"
 
@@ -94,6 +123,9 @@ msgstr "Oprettet"
 msgid "Danger zone"
 msgstr "Farezone"
 
+msgid "Dark"
+msgstr "Mørk"
+
 msgid "Delete"
 msgstr "Slet"
 
@@ -110,11 +142,8 @@ msgstr "Slet bruger"
 msgid "Delete users"
 msgstr "Slet brugere"
 
-msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution."
-msgstr "Sletning af kontoen og alle tilknyttede data. Denne handling kan ikke fortrydes, så fortsæt med forsigtighed."
-
-msgid "Didn't receive the code? Resend"
-msgstr "Modtog du ikke koden? Send igen"
+msgid "Delete your account and all data. This action is irreversible—proceed with caution."
+msgstr "Slet din konto og alle data. Denne handling kan ikke fortrydes—fortsæt med forsigtighed."
 
 msgid "Do you already have an account?"
 msgstr "Har du allerede en konto?"
@@ -122,15 +151,18 @@ msgstr "Har du allerede en konto?"
 msgid "Don't have an account? <0>Create one</0>"
 msgstr "Har du ikke en konto? <0>Opret en</0>"
 
-msgid "E.g., Alex"
+msgid "E.g. Alex"
 msgstr "F.eks. Alex"
 
-msgid "E.g., Software engineer"
-msgstr "F.eks., Softwareingeniør"
+msgid "E.g. Software engineer"
+msgstr "F.eks. Softwareingeniør"
 
-msgid "E.g., Taylor"
+msgid "E.g. Taylor"
 msgstr "F.eks. Taylor"
 
+msgid "Edit"
+msgstr "Rediger"
+
 msgid "Edit profile"
 msgstr "Rediger profil"
 
@@ -146,15 +178,15 @@ msgstr "Indtast din bekræftelseskode"
 msgid "Error: Something went wrong!"
 msgstr "Fejl: Noget gik galt!"
 
-msgid "Error: Verification code has expired"
-msgstr "Fejl: Bekræftelseskoden er udløbet"
-
 msgid "Europe"
 msgstr "Europa"
 
 msgid "Fetching data..."
 msgstr "Henter data..."
 
+msgid "Filters"
+msgstr "Filtre"
+
 msgid "First name"
 msgstr "Fornavn"
 
@@ -167,9 +199,6 @@ msgstr "Her er din oversigt over, hvad der sker."
 msgid "Hi! Welcome back"
 msgstr "Hej! Velkommen tilbage"
 
-msgid "Hide filters"
-msgstr "Skjul filtre"
-
 msgid "Home"
 msgstr "Hjem"
 
@@ -179,18 +208,18 @@ msgstr "Billedet skal være mindre end 1 MB."
 msgid "Invite user"
 msgstr "Inviter bruger"
 
-msgid "Invite users"
-msgstr "Inviter brugere"
-
-msgid "Invite users and assign them roles. They will appear once they log in."
-msgstr "Inviter brugere og tildel dem roller. De vil blive vist, når de logger ind."
-
 msgid "Invited users"
 msgstr "Inviterede brugere"
 
+msgid "Language"
+msgstr "Sprog"
+
 msgid "Last name"
 msgstr "Efternavn"
 
+msgid "Light"
+msgstr "Lys"
+
 msgid "Log in"
 msgstr "Log ind"
 
@@ -212,9 +241,6 @@ msgstr "Administrer dine brugere og tilladelser her."
 msgid "Member"
 msgstr "Medlem"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Ændret"
 
@@ -224,14 +250,14 @@ msgstr "Ændret dato"
 msgid "Name"
 msgstr "Navn"
 
+msgid "Navigation"
+msgstr "Navigation"
+
 msgid "Next"
 msgstr "Næste"
 
-msgid "No active login."
-msgstr "Ingen aktiv login."
-
-msgid "No active signup session."
-msgstr "Ingen aktiv tilmeldingssession."
+msgid "OK"
+msgstr "OK"
 
 msgid "Organization"
 msgstr "Organisation"
@@ -242,6 +268,9 @@ msgstr "Ejer"
 msgid "Pending"
 msgstr "Afventer"
 
+msgid "PlatformPlatform"
+msgstr "PlatformPlatform"
+
 msgid "Please check your email for a verification code sent to <0>{email}</0>"
 msgstr "Tjek din e-mail for en bekræftelseskode sendt til <0>{email}</0>"
 
@@ -249,7 +278,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image."
 msgstr "Vælg et JPEG-, PNG-, GIF- eller WebP-billede."
 
 msgid "Powered by"
-msgstr "Drevet af"
+msgstr "Powered by"
 
 msgid "Preview avatar"
 msgstr "Forhåndsvisning af avatar"
@@ -263,12 +292,18 @@ msgstr "Fortrolighedspolitikker"
 msgid "Profile picture"
 msgstr "Profilbillede"
 
+msgid "Profile updated successfully"
+msgstr "Profil opdateret succesfuldt"
+
 msgid "Region"
 msgstr "Region"
 
 msgid "Remove profile picture"
 msgstr "Fjern profilbillede"
 
+msgid "Request a new code"
+msgstr "Anmod om en ny kode"
+
 msgid "Role"
 msgstr "Rolle"
 
@@ -291,6 +326,9 @@ msgstr "Søg"
 msgid "Select a new role for <0>{0}</0>"
 msgstr "Vælg en ny rolle for <0>{0}</0>"
 
+msgid "Select dates"
+msgstr "Vælg datoer"
+
 msgid "Select language"
 msgstr "Vælg sprog"
 
@@ -304,19 +342,25 @@ msgid "Show filters"
 msgstr "Vis filtre"
 
 msgid "Sign up in seconds to start building on PlatformPlatform – just like thousands of others."
-msgstr "Tilmeld dig på få sekunder for at begynde at bygge på PlatformPlatform – ligesom tusinder af andre."
+msgstr "Tilmeld dig på sekunder for at bygge på PlatformPlatform – ligesom tusinder andre."
 
 msgid "Signup verification code"
 msgstr "Tilmeldingsbekræftelseskode"
 
+msgid "Success"
+msgstr "Succes"
+
+msgid "Support"
+msgstr "Support"
+
+msgid "System"
+msgstr "System"
+
 msgid "Terms of use"
 msgstr "Brugsvilkår"
 
-msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}"
-msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for e-mailbekræftelses-ID: {emailConfirmationId}"
-
-msgid "The verification code you are trying to use has expired for Login ID: {loginId}"
-msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for login-ID: {loginId}"
+msgid "Theme"
+msgstr "Tema"
 
 msgid "This is the region where your data is stored"
 msgstr "Dette er den region, hvor dine data er lagret"
@@ -342,6 +386,12 @@ msgstr "Opdater dit profilbillede og personlige oplysninger her."
 msgid "Upload profile picture"
 msgstr "Upload profilbillede"
 
+msgid "User actions"
+msgstr "Brugerhandlinger"
+
+msgid "User invited successfully"
+msgstr "Bruger inviteret succesfuldt"
+
 msgid "User profile"
 msgstr "Brugerprofil"
 
@@ -351,6 +401,9 @@ msgstr "Brugerprofilmenu"
 msgid "User role"
 msgstr "Brugerrolle"
 
+msgid "User role updated successfully for {userDisplayName}"
+msgstr "Brugerrolle opdateret succesfuldt for {userDisplayName}"
+
 msgid "User status"
 msgstr "Brugerstatus"
 
@@ -363,6 +416,9 @@ msgstr "Brugere"
 msgid "Users who haven't confirmed their email"
 msgstr "Brugere, der ikke har bekræftet deres e-mail"
 
+msgid "Verification code sent"
+msgstr "Bekræftelseskode sendt"
+
 msgid "Verify"
 msgstr "Bekræft"
 
@@ -384,8 +440,18 @@ msgstr "Se brugere"
 msgid "Welcome home"
 msgstr "Velkommen hjem"
 
+#. placeholder {0}: userInfo.firstName
+msgid "Welcome home, {0}"
+msgstr "Velkommen hjem, {0}"
+
 msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible."
 msgstr "Du er ved at slette kontoen og hele dataomgivelserne permanent via PlatformPlatform.<0/><1/>Denne handling er permanent og kan ikke fortrydes."
 
+msgid "Your verification code has expired"
+msgstr "Din bekræftelseskode er udløbet"
+
+msgid "Your verification code is valid for {expiresInString}"
+msgstr "Din bekræftelseskode er gyldig i {expiresInString}"
+
 msgid "yourname@example.com"
 msgstr "ditnavn@eksempel.com"
diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po
index 1b4e2c3f0..e3e5adcfd 100644
--- a/application/account-management/WebApp/shared/translations/locale/en-US.po
+++ b/application/account-management/WebApp/shared/translations/locale/en-US.po
@@ -13,15 +13,24 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
 
+msgid "A new verification code has been sent to your email."
+msgstr "A new verification code has been sent to your email."
+
 msgid "Account"
 msgstr "Account"
 
+msgid "Account information"
+msgstr "Account information"
+
 msgid "Account name"
 msgstr "Account name"
 
 msgid "Account settings"
 msgstr "Account settings"
 
+msgid "Account updated successfully"
+msgstr "Account updated successfully"
+
 msgid "Actions"
 msgstr "Actions"
 
@@ -50,6 +59,9 @@ msgstr "All users"
 msgid "An error occurred while processing your request. {0}"
 msgstr "An error occurred while processing your request. {0}"
 
+msgid "An invitation email will be sent to the user with a link to log in."
+msgstr "An invitation email will be sent to the user with a link to log in."
+
 msgid "Any role"
 msgstr "Any role"
 
@@ -60,19 +72,27 @@ msgstr "Any status"
 msgid "Are you sure you want to delete <0>{0} users</0>?"
 msgstr "Are you sure you want to delete <0>{0} users</0>?"
 
-#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
-msgid "Are you sure you want to delete <0>{0}?</0>"
-msgstr "Are you sure you want to delete <0>{0}?</0>"
+msgid "Are you sure you want to delete <0>{userDisplayName}</0>?"
+msgstr "Are you sure you want to delete <0>{userDisplayName}</0>?"
+
+msgid "Back to login"
+msgstr "Back to login"
+
+msgid "Back to signup"
+msgstr "Back to signup"
 
 msgid "By continuing, you accept our policies"
 msgstr "By continuing, you accept our policies"
 
-msgid "Can't find your code? Check your spam folder."
-msgstr "Can't find your code? Check your spam folder."
+msgid "Can't find your code?"
+msgstr "Can't find your code?"
 
 msgid "Cancel"
 msgstr "Cancel"
 
+msgid "Change language"
+msgstr "Change language"
+
 msgid "Change profile picture"
 msgstr "Change profile picture"
 
@@ -82,6 +102,15 @@ msgstr "Change role"
 msgid "Change user role"
 msgstr "Change user role"
 
+msgid "Check your spam folder."
+msgstr "Check your spam folder."
+
+msgid "Clear"
+msgstr "Clear"
+
+msgid "Clear filters"
+msgstr "Clear filters"
+
 msgid "Continue"
 msgstr "Continue"
 
@@ -94,6 +123,9 @@ msgstr "Created"
 msgid "Danger zone"
 msgstr "Danger zone"
 
+msgid "Dark"
+msgstr "Dark"
+
 msgid "Delete"
 msgstr "Delete"
 
@@ -110,11 +142,8 @@ msgstr "Delete user"
 msgid "Delete users"
 msgstr "Delete users"
 
-msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution."
-msgstr "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution."
-
-msgid "Didn't receive the code? Resend"
-msgstr "Didn't receive the code? Resend"
+msgid "Delete your account and all data. This action is irreversible—proceed with caution."
+msgstr "Delete your account and all data. This action is irreversible—proceed with caution."
 
 msgid "Do you already have an account?"
 msgstr "Do you already have an account?"
@@ -122,14 +151,17 @@ msgstr "Do you already have an account?"
 msgid "Don't have an account? <0>Create one</0>"
 msgstr "Don't have an account? <0>Create one</0>"
 
-msgid "E.g., Alex"
-msgstr "E.g., Alex"
+msgid "E.g. Alex"
+msgstr "E.g. Alex"
+
+msgid "E.g. Software engineer"
+msgstr "E.g. Software engineer"
 
-msgid "E.g., Software engineer"
-msgstr "E.g., Software engineer"
+msgid "E.g. Taylor"
+msgstr "E.g. Taylor"
 
-msgid "E.g., Taylor"
-msgstr "E.g., Taylor"
+msgid "Edit"
+msgstr "Edit"
 
 msgid "Edit profile"
 msgstr "Edit profile"
@@ -146,15 +178,15 @@ msgstr "Enter your verification code"
 msgid "Error: Something went wrong!"
 msgstr "Error: Something went wrong!"
 
-msgid "Error: Verification code has expired"
-msgstr "Error: Verification code has expired"
-
 msgid "Europe"
 msgstr "Europe"
 
 msgid "Fetching data..."
 msgstr "Fetching data..."
 
+msgid "Filters"
+msgstr "Filters"
+
 msgid "First name"
 msgstr "First name"
 
@@ -167,9 +199,6 @@ msgstr "Here's your overview of what's happening."
 msgid "Hi! Welcome back"
 msgstr "Hi! Welcome back"
 
-msgid "Hide filters"
-msgstr "Hide filters"
-
 msgid "Home"
 msgstr "Home"
 
@@ -179,18 +208,18 @@ msgstr "Image must be smaller than 1 MB."
 msgid "Invite user"
 msgstr "Invite user"
 
-msgid "Invite users"
-msgstr "Invite users"
-
-msgid "Invite users and assign them roles. They will appear once they log in."
-msgstr "Invite users and assign them roles. They will appear once they log in."
-
 msgid "Invited users"
 msgstr "Invited users"
 
+msgid "Language"
+msgstr "Language"
+
 msgid "Last name"
 msgstr "Last name"
 
+msgid "Light"
+msgstr "Light"
+
 msgid "Log in"
 msgstr "Log in"
 
@@ -212,9 +241,6 @@ msgstr "Manage your users and permissions here."
 msgid "Member"
 msgstr "Member"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Modified"
 
@@ -224,14 +250,14 @@ msgstr "Modified date"
 msgid "Name"
 msgstr "Name"
 
+msgid "Navigation"
+msgstr "Navigation"
+
 msgid "Next"
 msgstr "Next"
 
-msgid "No active login."
-msgstr "No active login."
-
-msgid "No active signup session."
-msgstr "No active signup session."
+msgid "OK"
+msgstr "OK"
 
 msgid "Organization"
 msgstr "Organization"
@@ -242,6 +268,9 @@ msgstr "Owner"
 msgid "Pending"
 msgstr "Pending"
 
+msgid "PlatformPlatform"
+msgstr "PlatformPlatform"
+
 msgid "Please check your email for a verification code sent to <0>{email}</0>"
 msgstr "Please check your email for a verification code sent to <0>{email}</0>"
 
@@ -263,12 +292,18 @@ msgstr "Privacy policies"
 msgid "Profile picture"
 msgstr "Profile picture"
 
+msgid "Profile updated successfully"
+msgstr "Profile updated successfully"
+
 msgid "Region"
 msgstr "Region"
 
 msgid "Remove profile picture"
 msgstr "Remove profile picture"
 
+msgid "Request a new code"
+msgstr "Request a new code"
+
 msgid "Role"
 msgstr "Role"
 
@@ -291,6 +326,9 @@ msgstr "Search"
 msgid "Select a new role for <0>{0}</0>"
 msgstr "Select a new role for <0>{0}</0>"
 
+msgid "Select dates"
+msgstr "Select dates"
+
 msgid "Select language"
 msgstr "Select language"
 
@@ -309,14 +347,20 @@ msgstr "Sign up in seconds to start building on PlatformPlatform – just like t
 msgid "Signup verification code"
 msgstr "Signup verification code"
 
+msgid "Success"
+msgstr "Success"
+
+msgid "Support"
+msgstr "Support"
+
+msgid "System"
+msgstr "System"
+
 msgid "Terms of use"
 msgstr "Terms of use"
 
-msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}"
-msgstr "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}"
-
-msgid "The verification code you are trying to use has expired for Login ID: {loginId}"
-msgstr "The verification code you are trying to use has expired for Login ID: {loginId}"
+msgid "Theme"
+msgstr "Theme"
 
 msgid "This is the region where your data is stored"
 msgstr "This is the region where your data is stored"
@@ -342,6 +386,12 @@ msgstr "Update your profile picture and personal details here."
 msgid "Upload profile picture"
 msgstr "Upload profile picture"
 
+msgid "User actions"
+msgstr "User actions"
+
+msgid "User invited successfully"
+msgstr "User invited successfully"
+
 msgid "User profile"
 msgstr "User profile"
 
@@ -351,6 +401,9 @@ msgstr "User profile menu"
 msgid "User role"
 msgstr "User role"
 
+msgid "User role updated successfully for {userDisplayName}"
+msgstr "User role updated successfully for {userDisplayName}"
+
 msgid "User status"
 msgstr "User status"
 
@@ -363,6 +416,9 @@ msgstr "Users"
 msgid "Users who haven't confirmed their email"
 msgstr "Users who haven't confirmed their email"
 
+msgid "Verification code sent"
+msgstr "Verification code sent"
+
 msgid "Verify"
 msgstr "Verify"
 
@@ -384,8 +440,18 @@ msgstr "View users"
 msgid "Welcome home"
 msgstr "Welcome home"
 
+#. placeholder {0}: userInfo.firstName
+msgid "Welcome home, {0}"
+msgstr "Welcome home, {0}"
+
 msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible."
 msgstr "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible."
 
+msgid "Your verification code has expired"
+msgstr "Your verification code has expired"
+
+msgid "Your verification code is valid for {expiresInString}"
+msgstr "Your verification code is valid for {expiresInString}"
+
 msgid "yourname@example.com"
 msgstr "yourname@example.com"
diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
index c127aa714..ff03728af 100644
--- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po
+++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
@@ -13,15 +13,24 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: @lingui/cli\n"
 
+msgid "A new verification code has been sent to your email."
+msgstr "Een nieuwe verificatiecode is naar je e-mail verzonden."
+
 msgid "Account"
 msgstr "Account"
 
+msgid "Account information"
+msgstr "Accountinformatie"
+
 msgid "Account name"
 msgstr "Accountnaam"
 
 msgid "Account settings"
 msgstr "Accountinstellingen"
 
+msgid "Account updated successfully"
+msgstr "Account succesvol bijgewerkt"
+
 msgid "Actions"
 msgstr "Acties"
 
@@ -50,6 +59,9 @@ msgstr "Alle gebruikers"
 msgid "An error occurred while processing your request. {0}"
 msgstr "Er is een fout opgetreden bij het verwerken van uw verzoek. {0}"
 
+msgid "An invitation email will be sent to the user with a link to log in."
+msgstr "Een uitnodigingsmail wordt naar de gebruiker gestuurd met een link om in te loggen."
+
 msgid "Any role"
 msgstr "Elke rol"
 
@@ -60,19 +72,27 @@ msgstr "Elke status"
 msgid "Are you sure you want to delete <0>{0} users</0>?"
 msgstr "Weet je zeker dat je <0>{0} gebruikers</0> wilt verwijderen?"
 
-#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
-msgid "Are you sure you want to delete <0>{0}?</0>"
-msgstr "Weet je zeker dat je <0>{0}?</0> wilt verwijderen?"
+msgid "Are you sure you want to delete <0>{userDisplayName}</0>?"
+msgstr "Weet je zeker dat je <0>{userDisplayName}</0> wilt verwijderen?"
+
+msgid "Back to login"
+msgstr "Terug naar inloggen"
+
+msgid "Back to signup"
+msgstr "Terug naar aanmelding"
 
 msgid "By continuing, you accept our policies"
-msgstr "Door verder te gaan, accepteer je onze voorwaarden"
+msgstr "Door te gaan, accepteer je onze voorwaarden"
 
-msgid "Can't find your code? Check your spam folder."
-msgstr "Kun je je code niet vinden? Controleer je spammap."
+msgid "Can't find your code?"
+msgstr "Kun je je code niet vinden?"
 
 msgid "Cancel"
 msgstr "Annuleren"
 
+msgid "Change language"
+msgstr "Taal wijzigen"
+
 msgid "Change profile picture"
 msgstr "Profielfoto wijzigen"
 
@@ -82,6 +102,15 @@ msgstr "Rol wijzigen"
 msgid "Change user role"
 msgstr "Gebruikersrol wijzigen"
 
+msgid "Check your spam folder."
+msgstr "Controleer je spammap."
+
+msgid "Clear"
+msgstr "Wissen"
+
+msgid "Clear filters"
+msgstr "Filters wissen"
+
 msgid "Continue"
 msgstr "Verder"
 
@@ -94,6 +123,9 @@ msgstr "Aangemaakt"
 msgid "Danger zone"
 msgstr "Gevaarzone"
 
+msgid "Dark"
+msgstr "Donker"
+
 msgid "Delete"
 msgstr "Verwijderen"
 
@@ -110,11 +142,8 @@ msgstr "Gebruiker verwijderen"
 msgid "Delete users"
 msgstr "Gebruikers verwijderen"
 
-msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution."
-msgstr "Het account en alle bijbehorende gegevens worden verwijderd. Deze actie kan niet ongedaan worden gemaakt, dus ga voorzichtig te werk."
-
-msgid "Didn't receive the code? Resend"
-msgstr "Code niet ontvangen? Verstuur opnieuw"
+msgid "Delete your account and all data. This action is irreversible—proceed with caution."
+msgstr "Verwijder je account en alle gegevens. Deze actie is onomkeerbaar—ga zorgvuldig te werk."
 
 msgid "Do you already have an account?"
 msgstr "Heb je al een account?"
@@ -122,14 +151,17 @@ msgstr "Heb je al een account?"
 msgid "Don't have an account? <0>Create one</0>"
 msgstr "Heb je geen account? <0>Maak er één aan</0>"
 
-msgid "E.g., Alex"
-msgstr "Bijv., Alex"
+msgid "E.g. Alex"
+msgstr "Bijv. Alex"
+
+msgid "E.g. Software engineer"
+msgstr "Bijv. Software engineer"
 
-msgid "E.g., Software engineer"
-msgstr "Bijv., Software engineer"
+msgid "E.g. Taylor"
+msgstr "Bijv. Taylor"
 
-msgid "E.g., Taylor"
-msgstr "Bijv., Taylor"
+msgid "Edit"
+msgstr "Bewerken"
 
 msgid "Edit profile"
 msgstr "Profiel bewerken"
@@ -146,15 +178,15 @@ msgstr "Voer je verificatiecode in"
 msgid "Error: Something went wrong!"
 msgstr "Fout: Er is iets misgegaan!"
 
-msgid "Error: Verification code has expired"
-msgstr "Fout: Verificatiecode is verlopen"
-
 msgid "Europe"
 msgstr "Europa"
 
 msgid "Fetching data..."
 msgstr "Gegevens ophalen..."
 
+msgid "Filters"
+msgstr "Filters"
+
 msgid "First name"
 msgstr "Voornaam"
 
@@ -167,9 +199,6 @@ msgstr "Hier is je overzicht van wat er gebeurt."
 msgid "Hi! Welcome back"
 msgstr "Hallo! Welkom terug"
 
-msgid "Hide filters"
-msgstr "Filters verbergen"
-
 msgid "Home"
 msgstr "Home"
 
@@ -179,18 +208,18 @@ msgstr "Afbeelding moet kleiner zijn dan 1 MB."
 msgid "Invite user"
 msgstr "Gebruiker uitnodigen"
 
-msgid "Invite users"
-msgstr "Gebruikers uitnodigen"
-
-msgid "Invite users and assign them roles. They will appear once they log in."
-msgstr "Nodig gebruikers uit en wijs hen rollen toe. Ze verschijnen zodra ze inloggen."
-
 msgid "Invited users"
 msgstr "Uitgenodigde gebruikers"
 
+msgid "Language"
+msgstr "Taal"
+
 msgid "Last name"
 msgstr "Achternaam"
 
+msgid "Light"
+msgstr "Licht"
+
 msgid "Log in"
 msgstr "Inloggen"
 
@@ -212,9 +241,6 @@ msgstr "Beheer je gebruikers en rechten hier."
 msgid "Member"
 msgstr "Lid"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Gewijzigd"
 
@@ -224,14 +250,14 @@ msgstr "Gewijzigde datum"
 msgid "Name"
 msgstr "Naam"
 
+msgid "Navigation"
+msgstr "Navigatie"
+
 msgid "Next"
 msgstr "Volgende"
 
-msgid "No active login."
-msgstr "Geen actieve login."
-
-msgid "No active signup session."
-msgstr "Geen actieve registratiesessie."
+msgid "OK"
+msgstr "OK"
 
 msgid "Organization"
 msgstr "Organisatie"
@@ -242,6 +268,9 @@ msgstr "Eigenaar"
 msgid "Pending"
 msgstr "In behandeling"
 
+msgid "PlatformPlatform"
+msgstr "PlatformPlatform"
+
 msgid "Please check your email for a verification code sent to <0>{email}</0>"
 msgstr "Controleer je e-mail voor een verificatiecode verzonden naar <0>{email}</0>"
 
@@ -249,7 +278,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image."
 msgstr "Selecteer een JPEG-, PNG-, GIF- of WebP-afbeelding."
 
 msgid "Powered by"
-msgstr "Mogelijk gemaakt door"
+msgstr "Powered by"
 
 msgid "Preview avatar"
 msgstr "Voorbeeld avatar"
@@ -263,12 +292,18 @@ msgstr "Privacybeleid"
 msgid "Profile picture"
 msgstr "Profielfoto"
 
+msgid "Profile updated successfully"
+msgstr "Profiel succesvol bijgewerkt"
+
 msgid "Region"
 msgstr "Regio"
 
 msgid "Remove profile picture"
 msgstr "Profielfoto verwijderen"
 
+msgid "Request a new code"
+msgstr "Vraag een nieuwe code aan"
+
 msgid "Role"
 msgstr "Rol"
 
@@ -291,6 +326,9 @@ msgstr "Zoeken"
 msgid "Select a new role for <0>{0}</0>"
 msgstr "Selecteer een nieuwe rol voor <0>{0}</0>"
 
+msgid "Select dates"
+msgstr "Selecteer datums"
+
 msgid "Select language"
 msgstr "Selecteer taal"
 
@@ -304,19 +342,25 @@ msgid "Show filters"
 msgstr "Filters tonen"
 
 msgid "Sign up in seconds to start building on PlatformPlatform – just like thousands of others."
-msgstr "Meld je in enkele seconden aan om te beginnen met bouwen op PlatformPlatform – net als duizenden anderen."
+msgstr "Meld je aan en begin direct met bouwen op PlatformPlatform – net als duizenden anderen."
 
 msgid "Signup verification code"
 msgstr "Verificatiecode voor aanmelding"
 
+msgid "Success"
+msgstr "Succes"
+
+msgid "Support"
+msgstr "Ondersteuning"
+
+msgid "System"
+msgstr "Systeem"
+
 msgid "Terms of use"
 msgstr "Gebruiksvoorwaarden"
 
-msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}"
-msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor E-mailbevestiging ID: {emailConfirmationId}"
-
-msgid "The verification code you are trying to use has expired for Login ID: {loginId}"
-msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor Login ID: {loginId}"
+msgid "Theme"
+msgstr "Thema"
 
 msgid "This is the region where your data is stored"
 msgstr "Dit is de regio waar je gegevens zijn opgeslagen"
@@ -342,6 +386,12 @@ msgstr "Werk hier je profielfoto en persoonlijke gegevens bij."
 msgid "Upload profile picture"
 msgstr "Profielfoto uploaden"
 
+msgid "User actions"
+msgstr "Gebruikersacties"
+
+msgid "User invited successfully"
+msgstr "Gebruiker succesvol uitgenodigd"
+
 msgid "User profile"
 msgstr "Gebruikersprofiel"
 
@@ -351,6 +401,9 @@ msgstr "Gebruikersprofielmenu"
 msgid "User role"
 msgstr "Gebruikersrol"
 
+msgid "User role updated successfully for {userDisplayName}"
+msgstr "Gebruikersrol succesvol bijgewerkt voor {userDisplayName}"
+
 msgid "User status"
 msgstr "Gebruikersstatus"
 
@@ -363,6 +416,9 @@ msgstr "Gebruikers"
 msgid "Users who haven't confirmed their email"
 msgstr "Gebruikers die hun e-mail niet hebben bevestigd"
 
+msgid "Verification code sent"
+msgstr "Verificatiecode verzonden"
+
 msgid "Verify"
 msgstr "Verifiëren"
 
@@ -384,8 +440,18 @@ msgstr "Gebruikers bekijken"
 msgid "Welcome home"
 msgstr "Welkom home"
 
+#. placeholder {0}: userInfo.firstName
+msgid "Welcome home, {0}"
+msgstr "Welkom home, {0}"
+
 msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible."
 msgstr "Je staat op het punt om het account en de volledige gegevensomgeving permanent te verwijderen via PlatformPlatform.<0/><1/>Deze actie is definitief en onomkeerbaar."
 
+msgid "Your verification code has expired"
+msgstr "Je verificatiecode is verlopen"
+
+msgid "Your verification code is valid for {expiresInString}"
+msgstr "Je verificatiecode is geldig voor {expiresInString}"
+
 msgid "yourname@example.com"
 msgstr "jouwnaam@voorbeeld.com"
diff --git a/application/account-management/WebApp/tests/e2e/localization-flows.spec.ts b/application/account-management/WebApp/tests/e2e/localization-flows.spec.ts
new file mode 100644
index 000000000..8eb09cb9e
--- /dev/null
+++ b/application/account-management/WebApp/tests/e2e/localization-flows.spec.ts
@@ -0,0 +1,163 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import { createTestContext, expectToastMessage } from "@shared/e2e/utils/test-assertions";
+import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data";
+
+test.describe("@comprehensive", () => {
+  test("should handle language changes across signup, authentication, and logout flows", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Navigate to signup page & verify default English interface")(async () => {
+      await page.goto("/signup");
+
+      await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+    })();
+
+    await step("Change language to Danish on signup page & verify interface updates")(async () => {
+      await page.getByRole("button", { name: "Select language" }).click();
+      await page.getByRole("menuitem", { name: "Dansk" }).click();
+
+      await expect(page.getByRole("heading", { name: "Opret din konto" })).toBeVisible();
+      await expect(page.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("da-DK");
+    })();
+
+    await step("Complete signup with Danish interface & verify language persists through flow")(async () => {
+      await page.getByRole("textbox", { name: "E-mail" }).fill(user.email);
+      await page.getByRole("button", { name: "Opret din konto" }).click();
+
+      await expect(page).toHaveURL("/signup/verify");
+      await expect(page.getByRole("heading", { name: "Indtast din bekræftelseskode" })).toBeVisible();
+    })();
+
+    await step("Complete verification with Danish interface & verify navigation to admin")(async () => {
+      await page.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+      await expect(page).toHaveURL("/admin");
+    })();
+
+    await step("Complete profile setup in Danish & verify profile form works")(async () => {
+      await expect(page.getByRole("dialog", { name: "Brugerprofil" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Fornavn" }).fill(user.firstName);
+      await page.getByRole("textbox", { name: "Efternavn" }).fill(user.lastName);
+      await page.getByRole("textbox", { name: "Titel" }).fill("CEO");
+      await page.getByRole("button", { name: "Gem ændringer" }).click();
+
+      await expectToastMessage(context, "Profil opdateret succesfuldt");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+      await expect(page.getByRole("heading", { name: "Velkommen hjem" })).toBeVisible();
+    })();
+
+    await step("Logout from Danish interface & verify language persists after logout")(async () => {
+      await page.getByRole("button", { name: "Brugerprofilmenu" }).click();
+      await page.getByRole("menuitem", { name: "Log ud" }).click();
+
+      await expect(page).toHaveURL("/login?returnPath=%2Fadmin");
+      await expect(page.getByRole("heading", { name: "Hej! Velkommen tilbage" })).toBeVisible();
+      await expect(page.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("da-DK");
+    })();
+
+    await step("Change login page language to English & verify interface updates")(async () => {
+      await page.getByRole("button", { name: "Vælg sprog" }).click();
+      await page.getByRole("menuitem", { name: "English" }).click();
+
+      await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible();
+      await expect(page.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("en-US");
+    })();
+
+    await step("Login with English interface & verify language resets to saved preference")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin");
+      await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible();
+    })();
+
+    await step("Complete login verification & verify language resets to user's saved preference")(async () => {
+      await page.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+      await expect(page).toHaveURL("/admin");
+      await expect(page.getByRole("heading", { name: "Velkommen hjem" })).toBeVisible();
+      await expect(page.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("da-DK");
+    })();
+
+    await step("Reset to English for cleanup & verify language change works")(async () => {
+      await page.getByRole("button", { name: "Vælg sprog" }).click();
+      await page.getByRole("menuitem", { name: "English" }).click();
+
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+
+      await page.reload(); // Fix bug where localStorage is not updated before page reload
+
+      await expect(page.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("en-US");
+    })();
+  });
+
+  test("should handle language persistence across different user sessions", async ({ browser }) => {
+    const page1 = await (await browser.newContext()).newPage();
+    const page2 = await (await browser.newContext()).newPage();
+
+    const testContext1 = createTestContext(page1);
+    const testContext2 = createTestContext(page2);
+    const user1 = testUser();
+    const user2 = testUser();
+
+    await step("Complete signup for first user with Danish & verify preference saved")(async () => {
+      await page1.goto("/signup");
+      await page1.getByRole("button", { name: "Select language" }).click();
+      await page1.getByRole("menuitem", { name: "Dansk" }).click();
+      await expect(page1.getByRole("heading", { name: "Opret din konto" })).toBeVisible();
+      await page1.getByRole("textbox", { name: "E-mail" }).fill(user1.email);
+      await page1.getByRole("button", { name: "Opret din konto" }).click();
+      await expect(page1).toHaveURL("/signup/verify");
+      await page1.keyboard.type(getVerificationCode()); // The verification code auto submits
+      await page1.getByRole("textbox", { name: "Fornavn" }).fill(user1.firstName);
+      await page1.getByRole("textbox", { name: "Efternavn" }).fill(user1.lastName);
+      await page1.getByRole("button", { name: "Gem ændringer" }).click();
+
+      await expectToastMessage(testContext1, 200, "Profil opdateret succesfuldt");
+      await expect(page1.getByRole("heading", { name: "Velkommen hjem" })).toBeVisible();
+      await expect(page1.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("da-DK");
+    })();
+
+    await step("Complete signup for second user with default English & verify different language preference")(
+      async () => {
+        await completeSignupFlow(page2, expect, user2, testContext2, true);
+
+        await expect(page2.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+        await expect(page2.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("en-US");
+      }
+    )();
+
+    await step("Login first user in new browser context & verify language preference persists")(async () => {
+      const newContext1 = await browser.newContext();
+      const newPage1 = await newContext1.newPage();
+
+      await newPage1.goto("/login");
+      await newPage1.getByRole("textbox", { name: "Email" }).fill(user1.email);
+      await newPage1.getByRole("button", { name: "Continue" }).click();
+      await expect(newPage1).toHaveURL("/login/verify");
+      await newPage1.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+      await expect(newPage1).toHaveURL("/admin");
+      await expect(newPage1.getByRole("heading", { name: "Velkommen hjem" })).toBeVisible();
+      await expect(newPage1.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("da-DK");
+    })();
+
+    await step("Login second user in new browser context & verify language preference persists")(async () => {
+      const newContext2 = await browser.newContext();
+      const newPage2 = await newContext2.newPage();
+
+      await newPage2.goto("/login");
+      await newPage2.getByRole("textbox", { name: "Email" }).fill(user2.email);
+      await newPage2.getByRole("button", { name: "Continue" }).click();
+      await expect(newPage2).toHaveURL("/login/verify");
+      await newPage2.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+      await expect(newPage2).toHaveURL("/admin");
+      await expect(newPage2.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(newPage2.evaluate(() => localStorage.getItem("preferred-locale"))).resolves.toBe("en-US");
+    })();
+  });
+});
diff --git a/application/account-management/WebApp/tests/e2e/login-flows.spec.ts b/application/account-management/WebApp/tests/e2e/login-flows.spec.ts
new file mode 100644
index 000000000..a995bf7cd
--- /dev/null
+++ b/application/account-management/WebApp/tests/e2e/login-flows.spec.ts
@@ -0,0 +1,299 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import {
+  blurActiveElement,
+  createTestContext,
+  expectNetworkErrors,
+  expectToastMessage,
+  expectValidationError
+} from "@shared/e2e/utils/test-assertions";
+import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  test("should handle login flow with validation, security, authentication protection, and logout", async ({
+    anonymousPage
+  }) => {
+    const { page, tenant } = anonymousPage;
+    const existingUser = tenant.owner;
+    const context = createTestContext(page);
+
+    // === EMAIL VALIDATION EDGE CASES ===
+    await step("Submit empty email form & verify validation error")(async () => {
+      await page.goto("/login");
+      await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible();
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login");
+      await expectValidationError(context, "Email must be in a valid format and no longer than 100 characters.");
+    })();
+
+    await step("Enter invalid email format & verify validation error")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill("invalid-email");
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login");
+      await expectValidationError(context, "Email must be in a valid format and no longer than 100 characters.");
+    })();
+
+    await step("Enter email exceeding maximum length & verify validation error")(async () => {
+      const longEmail = `${"a".repeat(90)}@example.com`; // 101 characters total
+      await page.getByRole("textbox", { name: "Email" }).fill(longEmail);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login");
+      await expectValidationError(context, "Email must be in a valid format and no longer than 100 characters.");
+    })();
+
+    await step("Enter email with consecutive dots & verify validation error")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill("test..user@example.com");
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login");
+      await expectValidationError(context, "Email must be in a valid format and no longer than 100 characters.");
+    })();
+
+    // === SUCCESSFUL LOGIN FLOW ===
+    await step("Enter valid code & verify navigation")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill(existingUser.email);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+      await expect(page.getByRole("button", { name: "Verify" })).toBeDisabled();
+      await expect(page.getByText("Can't find your code? Check your spam folder.").first()).toBeVisible();
+      await expect(page.getByText("Request a new code")).not.toBeVisible();
+    })();
+
+    await step("Enter wrong verification code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG1"); // The verification code auto submits the first time
+
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Complete successful login & verify navigation")(async () => {
+      await page.locator('input[autocomplete="one-time-code"]').first().focus();
+      await page.keyboard.type(getVerificationCode()); // The verification does not auto submit the second time
+      await page.getByRole("button", { name: "Verify" }).click();
+
+      await expect(page).toHaveURL("/admin");
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    // === AUTHENTICATION PROTECTION ===
+    await step("Logout from authenticated session & verify redirect to login")(async () => {
+      await page.getByRole("button", { name: "User profile menu" }).click();
+      await page.getByRole("menuitem", { name: "Log out" }).click();
+
+      await expect(page).toHaveURL("/login?returnPath=%2Fadmin");
+    })();
+
+    await step("Access protected routes while unauthenticated & verify redirect to login")(async () => {
+      await page.goto("/admin/users");
+      await expect(page).toHaveURL("/login?returnPath=%2Fadmin%2Fusers");
+
+      await expectNetworkErrors(context, [401]);
+
+      await page.goto("/admin");
+
+      await expect(page).toHaveURL("/login?returnPath=%2Fadmin");
+      await expectNetworkErrors(context, [401]);
+    })();
+
+    // === SECURITY EDGE CASES ===
+    await step("Navigate with malicious redirect URL & verify prevention")(async () => {
+      await page.goto("/login?returnPath=http://hacker.com");
+
+      await expect(page).toHaveURL("/login");
+    })();
+
+    await step("Complete login after back navigation & verify authentication works")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill(existingUser.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+      await page.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+      await expect(page).toHaveURL("/admin");
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  test("should enforce rate limiting for failed login attempts", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Create test user for rate limiting test & verify user created")(async () => {
+      await completeSignupFlow(page, expect, user, context, false);
+    })();
+
+    await step("Navigate to login and submit email & verify navigation")(async () => {
+      await page.goto("/login");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login/verify");
+    })();
+
+    await step("Check verification page state & verify initial help text displays")(async () => {
+      await expect(page.getByText("Can't find your code? Check your spam folder.").first()).toBeVisible();
+      await expect(page.getByText("Request a new code")).not.toBeVisible();
+    })();
+
+    await step("Enter first wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG1"); // The verification code auto submits the first time
+
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter second wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG2");
+      await page.getByRole("button", { name: "Verify" }).click();
+
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter third wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG3");
+      await page.getByRole("button", { name: "Verify" }).click();
+
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter fourth wrong code & verify rate limiting triggers")(async () => {
+      await page.keyboard.type("WRONG4");
+      await page.getByRole("button", { name: "Verify" }).click();
+
+      await expect(page.getByText("Too many attempts, please request a new code.").first()).toBeVisible();
+      await expectToastMessage(context, 403, "Too many attempts, please request a new code.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeDisabled();
+      await expect(page.getByRole("button", { name: "Verify" })).toBeDisabled();
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  test("should show detailed error message when too many login attempts are made", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Create test user for rate limiting test & verify user created")(async () => {
+      await completeSignupFlow(page, expect, user, context, false);
+    })();
+
+    await step("First 3 login attempts & verify navigation to verify page")(async () => {
+      for (let attempt = 1; attempt <= 3; attempt++) {
+        await page.goto("/login");
+        await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible();
+
+        await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+        await page.getByRole("button", { name: "Continue" }).click();
+        await expect(page).toHaveURL("/login/verify");
+      }
+    })();
+
+    await step("4th attempt triggers rate limiting & verify error message")(async () => {
+      await page.goto("/login");
+      await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login");
+      await expectToastMessage(
+        context,
+        429,
+        "Too many attempts to confirm this email address. Please try again later."
+      );
+    })();
+  });
+});
+
+test.describe("@slow", () => {
+  const requestNewCodeTimeout = 30000; // 30 seconds
+  const codeValidationTimeout = 60000; // 5 minutes
+  const sessionTimeout = codeValidationTimeout + 60000; // 6 minutes
+
+  test("should allow resend code 30 seconds after login but then not after code has expired", async ({ page }) => {
+    test.setTimeout(sessionTimeout);
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Create test user and navigate to verify & verify initial state")(async () => {
+      await completeSignupFlow(page, expect, user, context, false);
+      await page.goto("/login");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.getByText("Can't find your code? Check your spam folder.").first()).toBeVisible();
+    })();
+
+    await step("Wait 30 seconds & verify request code button appears")(async () => {
+      await page.waitForTimeout(requestNewCodeTimeout);
+
+      await expect(
+        page.getByRole("textbox", { name: "Can't find your code? Check your spam folder." })
+      ).not.toBeVisible();
+      await expect(page.getByText("Request a new code")).toBeVisible();
+    })();
+
+    await step("Click request new code & verify success message and button hides")(async () => {
+      await page.getByRole("button", { name: "Request a new code" }).click();
+
+      await expectToastMessage(context, "A new verification code has been sent to your email.");
+      await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+
+    await step("Wait for code expiration & verify expiration message displays")(async () => {
+      await page.waitForTimeout(codeValidationTimeout);
+
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.getByText("Your verification code has expired")).toBeVisible();
+      await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+  });
+
+  test("should allow resend code 5 minutes after login when code has expired", async ({ page }) => {
+    test.setTimeout(sessionTimeout);
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Create test user and start login & verify navigation")(async () => {
+      await completeSignupFlow(page, expect, user, context, false);
+      await page.goto("/login");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+
+    await step("Wait for code expiration & verify request button becomes available")(async () => {
+      await page.waitForTimeout(codeValidationTimeout);
+
+      await expect(page).toHaveURL("/login/verify");
+      await expect(page.getByText("Your verification code has expired")).toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).not.toBeVisible();
+      await expect(page.getByText("Request a new code")).toBeVisible();
+    })();
+
+    await step("Request new code & verify success and button hides")(async () => {
+      await page.getByRole("button", { name: "Request a new code" }).click();
+
+      await expectToastMessage(context, "A new verification code has been sent to your email.");
+      await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+  });
+});
diff --git a/application/account-management/WebApp/tests/e2e/signup-flows.spec.ts b/application/account-management/WebApp/tests/e2e/signup-flows.spec.ts
new file mode 100644
index 000000000..faab54161
--- /dev/null
+++ b/application/account-management/WebApp/tests/e2e/signup-flows.spec.ts
@@ -0,0 +1,360 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import {
+  blurActiveElement,
+  createTestContext,
+  expectToastMessage,
+  expectValidationError
+} from "@shared/e2e/utils/test-assertions";
+import { getVerificationCode, testUser, uniqueEmail } from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  test("should handle signup flow with validation, profile setup, and account management", async ({ browser }) => {
+    // Create two browser contexts to simulate different sessions
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    const testContext = createTestContext(page);
+    const user = testUser();
+
+    // === SIGNUP INITIATION ===
+    await step("Navigate directly to signup page & verify signup process starts")(async () => {
+      await page.goto("/signup");
+
+      await expect(page).toHaveURL("/signup");
+      await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+    })();
+
+    // === EMAIL VALIDATION EDGE CASES ===
+    await step("Submit form with empty email & verify validation error")(async () => {
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup");
+      await expect(page.getByText("Email must be in a valid format and no longer than 100 characters.")).toBeVisible();
+    })();
+
+    await step("Enter invalid email format & verify validation error")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill("invalid-email");
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup");
+      await expect(page.getByText("Email must be in a valid format and no longer than 100 characters.")).toBeVisible();
+    })();
+
+    await step("Enter email with consecutive dots & verify validation error")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill("test..user@example.com");
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup");
+      await expect(page.getByText("Email must be in a valid format and no longer than 100 characters.")).toBeVisible();
+    })();
+
+    await step("Enter email exceeding maximum length & verify validation error")(async () => {
+      const longEmail = `${"a".repeat(90)}@example.com`; // 101 characters total
+      await page.getByRole("textbox", { name: "Email" }).fill(longEmail);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup");
+      await expect(page.getByText("Email must be in a valid format and no longer than 100 characters.")).toBeVisible();
+    })();
+
+    // === SUCCESSFUL SIGNUP FLOW ===
+    await step("Complete signup with valid email & verify navigation to verification page with initial state")(
+      async () => {
+        await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+        await blurActiveElement(page);
+        await expect(page.getByText("Europe")).toBeVisible();
+        await page.getByRole("button", { name: "Create your account" }).click();
+
+        await expect(page).toHaveURL("/signup/verify");
+        await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+        await expect(page.getByRole("button", { name: "Verify" })).toBeDisabled();
+      }
+    )();
+
+    // === VERIFICATION CODE VALIDATION ===
+    await step("Enter wrong verification code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG1");
+
+      await expectToastMessage(testContext, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Type verification code & verify submit button enables")(async () => {
+      await page.keyboard.type(getVerificationCode());
+
+      await expect(page.getByRole("button", { name: "Verify" })).toBeEnabled();
+    })();
+
+    await step("Click verify button & verify navigation to admin")(async () => {
+      await page.getByRole("button", { name: "Verify" }).click();
+
+      await expect(page).toHaveURL("/admin");
+    })();
+
+    // === PROFILE FORM VALIDATION & COMPLETION ===
+    await step("Submit profile form with empty fields & verify validation errors appear")(async () => {
+      await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible();
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectValidationError(testContext, "First name must be between 1 and 30 characters.");
+      await expectValidationError(testContext, "Last name must be between 1 and 30 characters.");
+    })();
+
+    await step("Fill form with one field too long and one missing & verify all validation errors appear")(async () => {
+      const longName = "A".repeat(31);
+      const longTitle = "B".repeat(51);
+      await page.getByRole("textbox", { name: "First name" }).fill(longName);
+      await page.getByRole("textbox", { name: "Last name" }).clear();
+      await page.getByRole("textbox", { name: "Title" }).fill(longTitle);
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expect(page.getByRole("dialog")).toBeVisible();
+      await expectValidationError(testContext, "First name must be between 1 and 30 characters.");
+      await expectValidationError(testContext, "Last name must be between 1 and 30 characters.");
+      await expectValidationError(testContext, "Title must be no longer than 50 characters.");
+    })();
+
+    await step("Complete profile setup with valid data & verify navigation to dashboard")(async () => {
+      await page.getByRole("textbox", { name: "First name" }).fill(user.firstName);
+      await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName);
+      await page.getByRole("textbox", { name: "Title" }).fill("CEO & Founder");
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectToastMessage(testContext, 200, "Profile updated successfully");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    // === AVATAR & PROFILE FUNCTIONALITY ===
+    await step("Click avatar button & verify it shows initials and profile information")(async () => {
+      const initials = user.firstName.charAt(0) + user.lastName.charAt(0);
+      await expect(page.getByRole("button", { name: "User profile menu" })).toContainText(initials);
+      await page.getByRole("button", { name: "User profile menu" }).click();
+      await expect(page.getByText(`${user.firstName} ${user.lastName}`)).toBeVisible();
+      await expect(page.getByText("CEO & Founder")).toBeVisible();
+      await page.getByRole("menuitem", { name: "Edit profile" }).click();
+      await expect(page.getByRole("textbox", { name: "Title" })).toHaveValue("CEO & Founder");
+      await page.getByRole("button", { name: "Cancel" }).click();
+
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+    })();
+
+    // === AUTHENTICATED NAVIGATION PROTECTION ===
+    await step("Navigate to signup page while authenticated & verify redirect to admin")(async () => {
+      await page.goto("/signup");
+
+      await expect(page).toHaveURL("/admin");
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    // === ACCOUNT MANAGEMENT ===
+    await step("Clear account name field & verify validation error appears")(async () => {
+      await page.getByRole("button", { name: "Account" }).first().click();
+      await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Account name" }).clear();
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectValidationError(testContext, "Name must be between 1 and 30 characters.");
+    })();
+
+    await step("Update account name & verify successful save")(async () => {
+      const newAccountName = `Tech Corp ${Date.now()}`;
+      await page.getByRole("textbox", { name: "Account name" }).fill(newAccountName);
+      await page.getByRole("button", { name: "Save changes" }).focus(); // WebKit requires explicit focus before clicking
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectToastMessage(testContext, 200, "Account updated successfully");
+    })();
+
+    await step("Update user profile title & verify successful profile update")(async () => {
+      await page.getByRole("button", { name: "User profile menu" }).click();
+      await page.getByRole("menuitem", { name: "Edit profile" }).click();
+      await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Title" }).fill("Chief Executive Officer");
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectToastMessage(testContext, 200, "Profile updated successfully");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+    })();
+
+    await step("Access protected account route & verify session maintains authentication")(async () => {
+      await page.getByRole("button", { name: "Account" }).first().click();
+
+      await expect(page.getByRole("textbox", { name: "Account name" })).toBeVisible();
+    })();
+
+    await step("Cleanup browser context & verify no errors")(async () => {
+      await context.close();
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  test("should enforce rate limiting for verification attempts and handle direct access", async ({ page }) => {
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Navigate to signup and enter email & verify navigation")(async () => {
+      await page.goto("/signup");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup/verify");
+    })();
+
+    await step("Enter first wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG1");
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter second wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG2");
+      await page.getByRole("button", { name: "Verify" }).click();
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter third wrong code & verify error and focus reset")(async () => {
+      await page.keyboard.type("WRONG3");
+      await page.getByRole("button", { name: "Verify" }).click();
+      await expectToastMessage(context, 400, "The code is wrong or no longer valid.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeFocused();
+    })();
+
+    await step("Enter fourth wrong code & verify rate limiting triggers")(async () => {
+      await page.keyboard.type("WRONG4");
+      await page.getByRole("button", { name: "Verify" }).click();
+      await expect(page.getByText("Too many attempts, please request a new code.").first()).toBeVisible();
+      await expectToastMessage(context, 403, "Too many attempts, please request a new code.");
+      await expect(page.locator('input[autocomplete="one-time-code"]').first()).toBeDisabled();
+      await expect(page.getByRole("button", { name: "Verify" })).toBeDisabled();
+    })();
+  });
+
+  test("should show detailed error message when too many signup attempts are made", async ({ page }) => {
+    const context = createTestContext(page);
+    const testEmail = uniqueEmail();
+
+    await step("First 3 signup attempts & verify navigation to verify page")(async () => {
+      for (let attempt = 1; attempt <= 3; attempt++) {
+        await page.goto("/signup");
+        await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+
+        await page.getByRole("textbox", { name: "Email" }).fill(testEmail);
+        await page.getByRole("button", { name: "Create your account" }).click();
+        await expect(page).toHaveURL("/signup/verify");
+      }
+    })();
+
+    await step("4th attempt triggers rate limiting & verify error message")(async () => {
+      await page.goto("/signup");
+      await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Email" }).fill(testEmail);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup");
+      await expectToastMessage(
+        context,
+        429,
+        "Too many attempts to confirm this email address. Please try again later."
+      );
+    })();
+  });
+});
+
+test.describe("@slow", () => {
+  const requestNewCodeTimeout = 30_000; // 30 seconds
+  const codeValidationTimeout = 60_000; // 5 minutes
+  const sessionTimeout = codeValidationTimeout + 60_000; // 6 minutes
+
+  test("should allow resend code 30 seconds after signup but then not after code has expired", async ({ page }) => {
+    test.setTimeout(sessionTimeout);
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Start signup and navigate to verify & verify initial state")(async () => {
+      await page.goto("/signup");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup/verify");
+      await expect(page.getByText("Can't find your code? Check your spam folder.").first()).toBeVisible();
+    })();
+
+    await step(
+      "Wait 30 seconds before & verify Check your spam folder is not visible and that 'Request a new code' IS available"
+    )(async () => {
+      await page.waitForTimeout(requestNewCodeTimeout);
+
+      await expect(
+        page.getByRole("textbox", { name: "Can't find your code? Check your spam folder." })
+      ).not.toBeVisible();
+      await expect(page.getByText("Request a new code")).toBeVisible();
+    })();
+
+    await step(
+      "Click Request a new code & verify success toast message and that 'Request a new code' is NOT available"
+    )(async () => {
+      await page.getByRole("button", { name: "Request a new code" }).click();
+
+      await expectToastMessage(context, "A new verification code has been sent to your email.");
+      await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+
+    await step("Wait for expiration & verify inline expiration message and that 'Request a new code' is NOT available")(
+      async () => {
+        await page.waitForTimeout(codeValidationTimeout);
+
+        await expect(page).toHaveURL("/signup/verify");
+        await expect(page.getByText("Your verification code has expired")).toBeVisible();
+        await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+        await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+      }
+    )();
+  });
+
+  test("should allow resend code 5 minutes after signup when code has expired", async ({ page }) => {
+    test.setTimeout(sessionTimeout);
+    const context = createTestContext(page);
+    const user = testUser();
+
+    await step("Start signup and navigate to verify & verify initial state")(async () => {
+      await page.goto("/signup");
+      await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+      await blurActiveElement(page);
+      await page.getByRole("button", { name: "Create your account" }).click();
+
+      await expect(page).toHaveURL("/signup/verify");
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+    })();
+
+    await step(
+      "Wait 5 minutes for code expiration & verify inline expiration message and that 'Request a new code' IS available"
+    )(async () => {
+      await page.waitForTimeout(codeValidationTimeout);
+
+      await expect(page).toHaveURL("/signup/verify");
+      await expect(page.getByText("Your verification code has expired")).toBeVisible();
+      await expect(page.getByText("Can't find your code? Check your spam folder.")).not.toBeVisible();
+      await expect(page.getByText("Request a new code")).toBeVisible();
+    })();
+
+    await step("Request a new code & verify success toast message and that 'Request a new code' is NOT available")(
+      async () => {
+        await page.getByRole("button", { name: "Request a new code" }).click();
+
+        await expectToastMessage(context, "A new verification code has been sent to your email.");
+        await expect(page.getByRole("button", { name: "Request a new code" })).not.toBeVisible();
+        await expect(page.getByText("Can't find your code? Check your spam folder.")).toBeVisible();
+      }
+    )();
+  });
+});
diff --git a/application/account-management/WebApp/tests/e2e/theme-and-responsiveness-flows.spec.ts b/application/account-management/WebApp/tests/e2e/theme-and-responsiveness-flows.spec.ts
new file mode 100644
index 000000000..81c70d0b6
--- /dev/null
+++ b/application/account-management/WebApp/tests/e2e/theme-and-responsiveness-flows.spec.ts
@@ -0,0 +1,113 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import { createTestContext } from "@shared/e2e/utils/test-assertions";
+
+test.describe("@comprehensive", () => {
+  test("should handle theme and responsiveness across viewport sizes and authentication", async ({ ownerPage }) => {
+    createTestContext(ownerPage);
+
+    const initialThemeClass = await ownerPage.locator("html").getAttribute("class");
+    const initialIsLight = initialThemeClass?.includes("light");
+    const firstTheme = initialIsLight ? "dark" : "light";
+    const secondTheme = initialIsLight ? "light" : "dark";
+
+    await step("Start on admin dashboard & verify welcome page loads")(async () => {
+      await ownerPage.goto("/admin");
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    await step("Verify theme toggle button accessibility & click to change theme")(async () => {
+      const themeButton = ownerPage.getByRole("button", { name: "Toggle theme" });
+      await expect(themeButton).toHaveAttribute("aria-label", "Toggle theme");
+
+      await themeButton.click();
+
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+    })();
+
+    await step("Verify desktop side menu navigation elements are visible & verify large screen behavior")(async () => {
+      await expect(ownerPage.getByRole("button", { name: "Home" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Account" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Users" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Toggle collapsed menu" })).toBeVisible();
+    })();
+
+    await step("Collapse desktop sidebar & verify layout adapts")(async () => {
+      await ownerPage.getByRole("button", { name: "Toggle collapsed menu" }).click();
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Toggle collapsed menu" })).toBeVisible();
+    })();
+
+    await step("Switch to large desktop viewport & verify interface scales properly")(async () => {
+      await ownerPage.setViewportSize({ width: 2560, height: 1440 });
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+      await expect(ownerPage.getByRole("button", { name: "Home" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Toggle collapsed menu" })).toBeVisible();
+    })();
+
+    await step("Switch to tablet viewport & verify interface adapts and theme persists")(async () => {
+      await ownerPage.setViewportSize({ width: 768, height: 1024 });
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+    })();
+
+    await step("Verify tablet breakpoint navigation behavior & verify elements remain visible")(async () => {
+      await expect(ownerPage.getByRole("button", { name: "Home" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Toggle collapsed menu" })).toBeVisible();
+    })();
+
+    await step("Switch to mobile viewport & verify mobile interface and responsive behavior")(async () => {
+      await ownerPage.setViewportSize({ width: 375, height: 667 });
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+      await expect(ownerPage.getByRole("button", { name: "Home" })).not.toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Users" })).not.toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Account" })).not.toBeVisible();
+      const mobileMenuButton = ownerPage.getByRole("button", { name: "Toggle collapsed menu" });
+      await expect(mobileMenuButton).toBeVisible();
+    })();
+
+    await step("Toggle mobile theme button & verify theme changes")(async () => {
+      // Open mobile menu first
+      await ownerPage.getByRole("button", { name: "Toggle collapsed menu" }).click();
+
+      // Find and click theme toggle button inside mobile menu
+      await ownerPage.getByRole("button", { name: "Theme" }).click();
+
+      await expect(ownerPage.locator("html")).toHaveClass(secondTheme);
+    })();
+
+    await step("Return to desktop viewport & verify responsive transitions & side menu restoration")(async () => {
+      await ownerPage.setViewportSize({ width: 1920, height: 1080 });
+
+      await expect(ownerPage.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await expect(ownerPage.locator("html")).toHaveClass(secondTheme);
+      await expect(ownerPage.getByRole("button", { name: "Home" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Account" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Users" })).toBeVisible();
+      await expect(ownerPage.getByRole("button", { name: "Toggle collapsed menu" })).toBeVisible();
+    })();
+
+    await step("Cycle through theme one more time & verify theme cycle works completely")(async () => {
+      const finalThemeButton = ownerPage.getByRole("button", { name: "Toggle theme" });
+      await finalThemeButton.click();
+
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+    })();
+
+    await step("Logout from account & verify theme persists across authentication")(async () => {
+      await ownerPage.getByRole("button", { name: "User profile menu" }).click();
+      await ownerPage.getByRole("menuitem", { name: "Log out" }).click();
+
+      await expect(ownerPage).toHaveURL("/login?returnPath=%2Fadmin");
+      await expect(ownerPage.locator("html")).toHaveClass(firstTheme);
+    })();
+  });
+});
diff --git a/application/account-management/WebApp/tests/e2e/user-management-flows.spec.ts b/application/account-management/WebApp/tests/e2e/user-management-flows.spec.ts
new file mode 100644
index 000000000..3985c5728
--- /dev/null
+++ b/application/account-management/WebApp/tests/e2e/user-management-flows.spec.ts
@@ -0,0 +1,451 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import { createTestContext, expectToastMessage, expectValidationError } from "@shared/e2e/utils/test-assertions";
+import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  // Set a larger viewport size to avoid positioning issues in Chrome
+  test.use({ viewport: { width: 1600, height: 900 } });
+  /**
+   * COMPREHENSIVE USER MANAGEMENT WORKFLOW
+   *
+   * Tests the complete end-to-end user management journey including:
+   * - User invitation process with validation (invalid email, duplicate email)
+   * - Role management (changing user roles from Member to Admin)
+   * - Permission system (testing what owners vs admins can/cannot do)
+   * - Search and filtering functionality (email search, role filtering)
+   * - User permission restrictions (what owners vs admins can/cannot do)
+   */
+  test("should handle user invitation, role management & permissions workflow", async ({ page }) => {
+    const context = createTestContext(page);
+    const owner = testUser();
+    const adminUser = testUser();
+    const memberUser = testUser();
+
+    await step("Complete owner signup & verify owner account creation")(async () => {
+      await completeSignupFlow(page, expect, owner, context);
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    await step("Navigate to users page & verify owner is listed")(async () => {
+      await page.getByRole("button", { name: "Users" }).click();
+
+      await expect(page.getByRole("heading", { name: "Users" })).toBeVisible();
+      await expect(page.locator("tbody").locator("tr")).toHaveCount(1);
+      await expect(page.getByText(`${owner.firstName} ${owner.lastName}`)).toBeVisible();
+      await expect(page.getByText(owner.email)).toBeVisible();
+      await expect(page.getByText("Owner")).toBeVisible();
+    })();
+
+    await step("Submit invalid email invitation & verify validation error")(async () => {
+      await page.getByRole("button", { name: "Invite user" }).click();
+      await expect(page.getByRole("dialog", { name: "Invite user" })).toBeVisible();
+      await page.getByRole("textbox", { name: "Email" }).fill("invalid-email");
+      await page.getByRole("button", { name: "Send invite" }).click();
+
+      await expectValidationError(context, "Email must be in a valid format and no longer than 100 characters.");
+      await expect(page.getByRole("dialog")).toBeVisible();
+    })();
+
+    await step("Invite member user & verify successful invitation")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill(memberUser.email);
+      await page.getByRole("button", { name: "Send invite" }).click();
+
+      await expectToastMessage(context, "User invited successfully");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+      await expect(page.locator("tbody").locator("tr")).toHaveCount(2);
+      await expect(page.getByText(`${memberUser.email}`)).toBeVisible();
+    })();
+
+    await step("Invite admin user & verify successful invitation")(async () => {
+      await page.getByRole("button", { name: "Invite user" }).click();
+      await page.getByRole("textbox", { name: "Email" }).fill(adminUser.email);
+      await page.getByRole("button", { name: "Send invite" }).click();
+
+      await expectToastMessage(context, "User invited successfully");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+      await expect(page.locator("tbody").locator("tr")).toHaveCount(3);
+      await expect(page.getByText(`${adminUser.email}`)).toBeVisible();
+    })();
+
+    await step("Select Admin role from dropdown & verify role change completes")(async () => {
+      const adminUserRow = page.locator("tbody tr").filter({ hasText: adminUser.email });
+      await adminUserRow.getByLabel("User actions").click();
+      await page.getByRole("menuitem", { name: "Change role" }).click();
+      await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible();
+      await page.getByRole("button", { name: "Member User role" }).click();
+      await page.getByRole("option", { name: "Admin" }).click();
+
+      await expectToastMessage(context, `User role updated successfully for ${adminUser.email}`);
+      await expect(page.getByRole("alertdialog", { name: "Change user role" })).not.toBeVisible();
+      await expect(adminUserRow).toContainText("Admin");
+    })();
+
+    await step("Click to unselect row after role change & verify selection clears")(async () => {
+      const adminUserRow = page.locator("tbody tr").filter({ hasText: adminUser.email });
+      await expect(adminUserRow).toHaveAttribute("aria-selected", "true");
+      await adminUserRow.click(); // Unselect the row
+
+      await expect(adminUserRow).not.toHaveAttribute("aria-selected", "true");
+    })();
+
+    await step("Attempt to invite duplicate user email & verify error message appears")(async () => {
+      await page.getByRole("button", { name: "Invite user" }).click();
+      await page.getByRole("textbox", { name: "Email" }).fill(memberUser.email);
+      await page.getByRole("button", { name: "Send invite" }).click();
+
+      await expectToastMessage(context, 400, `The user with '${memberUser.email}' already exists.`);
+
+      await page.getByRole("button", { name: "Cancel" }).click();
+
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+    })();
+
+    await step("Check users table & verify invited users appear with correct roles")(async () => {
+      const userTable = page.locator("tbody");
+      await expect(userTable.locator("tr")).toHaveCount(3); // owner + 2 invited users
+      await expect(userTable).toContainText(adminUser.email);
+      await expect(userTable).toContainText(memberUser.email);
+      await expect(page.getByText("Member").first()).toBeVisible();
+    })();
+
+    await step("Try to delete owner account & verify action restrictions")(async () => {
+      const ownerRowSelf = page.locator("tbody tr").filter({ hasText: owner.email });
+      await ownerRowSelf.getByLabel("User actions").click();
+
+      await expect(page.getByRole("menuitem", { name: "Delete user" })).not.toBeVisible();
+      await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled();
+
+      await page.keyboard.press("Escape");
+    })();
+
+    await step("Filter users by email search & verify filtered results display correctly")(async () => {
+      const userTable = page.locator("tbody");
+      await page.getByPlaceholder("Search").fill(adminUser.email);
+      await page.keyboard.press("Enter"); // Trigger search immediately without debounce
+
+      await expect(userTable.locator("tr")).toHaveCount(1);
+      await expect(userTable).toContainText(adminUser.email);
+      await expect(userTable).not.toContainText(owner.email);
+      await expect(userTable).not.toContainText(memberUser.email);
+
+      await page.getByPlaceholder("Search").clear();
+      await page.keyboard.press("Enter"); // Trigger search immediately to show all results
+
+      await expect(userTable.locator("tr")).toHaveCount(3);
+      await expect(userTable).toContainText(adminUser.email);
+      await expect(userTable).toContainText(memberUser.email);
+    })();
+
+    await step("Filter users by role & verify role-based filtering works correctly")(async () => {
+      const userTable = page.locator("tbody");
+      await page.getByRole("button", { name: "Show filters" }).click();
+      await page.getByRole("button", { name: "Any role User role" }).click();
+      await page.getByRole("option", { name: "Owner" }).click();
+
+      await expect(userTable.locator("tr")).toHaveCount(1); // After filtering by Owner role, should only have 1 owner (the original)
+      await expect(userTable).toContainText(owner.email);
+      await expect(userTable).not.toContainText(adminUser.email);
+
+      await page.getByRole("button", { name: "Owner User role" }).click();
+      await page.getByRole("option", { name: "Any role" }).click();
+
+      await expect(userTable).toContainText(adminUser.email);
+    })();
+
+    await step("Logout from owner account to test admin permissions")(async () => {
+      await page.getByRole("button", { name: "Home" }).click();
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+      await page.getByRole("button", { name: "User profile menu" }).click();
+      await page.getByRole("menuitem", { name: "Log out" }).click();
+
+      await expect(page).toHaveURL("/login?returnPath=%2Fadmin");
+    })();
+
+    await step("Login as admin user & verify successful authentication")(async () => {
+      await page.getByRole("textbox", { name: "Email" }).fill(adminUser.email);
+      await page.getByRole("button", { name: "Continue" }).click();
+      await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin");
+      await page.keyboard.type(getVerificationCode());
+
+      await expect(page).toHaveURL("/admin");
+    })();
+
+    await step("Complete admin user profile setup & verify profile form completion")(async () => {
+      await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible();
+      await page.getByRole("textbox", { name: "First name" }).fill(adminUser.firstName);
+      await page.getByRole("textbox", { name: "Last name" }).fill(adminUser.lastName);
+      await page.getByRole("textbox", { name: "Title" }).fill("Administrator");
+      await page.getByRole("button", { name: "Save changes" }).click();
+
+      await expectToastMessage(context, "Profile updated successfully");
+      await expect(page.getByRole("dialog")).not.toBeVisible();
+      await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+    })();
+
+    await step("Navigate to users page as admin & verify admin can see all users")(async () => {
+      await page.getByRole("button", { name: "Users" }).click();
+
+      await expect(page.getByRole("heading", { name: "Users" })).toBeVisible();
+      await expect(page.locator("tbody tr")).toHaveCount(3); // owner + admin + member
+    })();
+
+    await step("Open member user menu as admin & verify limited actions available")(async () => {
+      const memberUserRow = page.locator("tbody tr").filter({ hasText: memberUser.email });
+      await memberUserRow.getByLabel("User actions").click({ force: true });
+
+      await expect(page.getByRole("menuitem", { name: "Change role" })).toBeVisible();
+      await expect(page.getByRole("menuitem", { name: "Delete user" })).not.toBeVisible();
+    })();
+  });
+});
+
+test.describe("@comprehensive", () => {
+  /**
+   * USER DELETION WORKFLOWS WITH DASHBOARD INTEGRATION
+   *
+   * Tests comprehensive user deletion functionality with dashboard context including:
+   * - Dashboard metrics integration (user count displays)
+   * - URL-based filtering (active users link)
+   * - Single user deletion via menu actions
+   * - Bulk user selection by clicking rows with Ctrl/Cmd modifier
+   * - Bulk deletion of multiple users via "Delete X users" button
+   * - Owner protection mechanisms (deletion restrictions)
+   * - UI state management after deletions (selection clearing, button visibility)
+   */
+  test("should handle single and bulk user deletion workflows with dashboard integration", async ({ page }) => {
+    const context = createTestContext(page);
+    const owner = testUser();
+    const user1 = testUser();
+    const user2 = testUser();
+    const user3 = testUser();
+
+    // === USER SETUP SECTION ===
+    await step("Complete owner signup & navigate to users page")(async () => {
+      await completeSignupFlow(page, expect, owner, context);
+      await page.goto("/admin/users");
+
+      await expect(page.getByRole("heading", { name: "Users" })).toBeVisible();
+    })();
+
+    await step("Invite multiple users & verify they are added to the list")(async () => {
+      const usersToInvite = [user1, user2, user3];
+
+      for (const user of usersToInvite) {
+        await page.getByRole("button", { name: "Invite user" }).click();
+        await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+        await page.getByRole("button", { name: "Send invite" }).click();
+
+        await expectToastMessage(context, "User invited successfully");
+        await expect(page.getByRole("dialog")).not.toBeVisible();
+      }
+
+      await expect(page.locator("tbody tr")).toHaveCount(4); // owner + 3 invited users
+    })();
+
+    // === DASHBOARD METRICS SECTION ===
+    await step("Navigate to dashboard & verify user count metrics display correctly")(async () => {
+      await page.goto("/admin");
+
+      await expect(page.getByRole("link", { name: "View users" })).toContainText("4");
+      await expect(page.getByRole("link", { name: "View active users" })).toContainText("1");
+      await expect(page.getByRole("link", { name: "View invited users" })).toContainText("3");
+    })();
+
+    // === URL FILTERING SECTION ===
+    await step("Click invited users link & verify URL filtering works correctly")(async () => {
+      await page.getByRole("link", { name: "View invited users" }).click();
+
+      await expect(page.getByRole("heading", { name: "Users" })).toBeVisible();
+      await expect(page.locator("tbody tr")).toHaveCount(3);
+      await expect(page.url()).toContain("userStatus=Pending");
+    })();
+
+    // === ADVANCED FILTERING SECTION ===
+    await step("Verify all filter options are available")(async () => {
+      // Filters should already be visible due to URL filtering from previous step
+      await expect(page.getByLabel("User role").first()).toBeVisible();
+      await expect(page.getByLabel("User status").first()).toBeVisible();
+      await expect(page.getByLabel("Modified date").first()).toBeVisible();
+    })();
+
+    await step("Filter by Owner role & verify only owner shown")(async () => {
+      // First dismiss any open dropdown and clear status filter
+      await page.keyboard.press("Escape");
+      await page.getByLabel("User status").first().click();
+      await page.getByRole("option", { name: "Any status" }).click();
+
+      // Now filter by Owner role
+      await page.getByLabel("User role").first().click();
+      await page.getByRole("option", { name: "Owner" }).click();
+
+      // Verify only owner is shown
+      await expect(page.locator("tbody tr")).toHaveCount(1);
+      await expect(page.locator("tbody")).toContainText(owner.email);
+      await expect(page.locator("tbody")).not.toContainText(user1.email);
+      await expect(page.locator("tbody")).not.toContainText(user2.email);
+    })();
+
+    await step("Filter by Member role & verify only members shown")(async () => {
+      // Change filter to Member role
+      await page.getByLabel("User role").first().click();
+      await page.getByRole("option", { name: "Member" }).click();
+
+      // Verify only member users are shown
+      await expect(page.locator("tbody tr")).toHaveCount(3);
+      await expect(page.locator("tbody")).toContainText(user1.email);
+      await expect(page.locator("tbody")).toContainText(user2.email);
+      await expect(page.locator("tbody")).toContainText(user3.email);
+      await expect(page.locator("tbody")).not.toContainText(owner.email);
+    })();
+
+    await step("Filter by Pending status & verify only pending users shown")(async () => {
+      // Reset role filter and set status filter
+      await page.getByLabel("User role").first().click();
+      await page.getByRole("option", { name: "Any role" }).click();
+
+      await page.getByLabel("User status").first().click();
+      await page.getByRole("option", { name: "Pending" }).click();
+
+      // Verify only pending users are shown (invited users who haven't confirmed)
+      await expect(page.locator("tbody tr")).toHaveCount(3);
+      await expect(page.locator("tbody")).toContainText(user1.email);
+      await expect(page.locator("tbody")).toContainText(user2.email);
+      await expect(page.locator("tbody")).toContainText(user3.email);
+      await expect(page.locator("tbody")).not.toContainText(owner.email);
+    })();
+
+    await step("Filter by Active status & verify only active users shown")(async () => {
+      // Change filter to Active status
+      await page.getByLabel("User status").first().click();
+      await page.getByRole("option", { name: "Active" }).click();
+
+      // Verify only active users are shown (owner who has confirmed email)
+      await expect(page.locator("tbody tr")).toHaveCount(1);
+      await expect(page.locator("tbody")).toContainText(owner.email);
+      await expect(page.locator("tbody")).not.toContainText(user1.email);
+    })();
+
+    await step("Filter by past date range & verify no users shown")(async () => {
+      // Reset status filter first
+      await page.getByLabel("User status").first().click();
+      await page.getByRole("option", { name: "Any status" }).click();
+
+      // Open date picker
+      await page.getByLabel("Modified date").first().click();
+
+      // Set start date to January 1, 2024
+      await page.locator('[role="spinbutton"][aria-label="month, Start Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="month, Start Date, "]').type("01");
+      await page.locator('[role="spinbutton"][aria-label="day, Start Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="day, Start Date, "]').type("01");
+      await page.locator('[role="spinbutton"][aria-label="year, Start Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="year, Start Date, "]').type("2024");
+
+      // Set end date to December 31, 2024
+      await page.locator('[role="spinbutton"][aria-label="month, End Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="month, End Date, "]').type("12");
+      await page.locator('[role="spinbutton"][aria-label="day, End Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="day, End Date, "]').type("31");
+      await page.locator('[role="spinbutton"][aria-label="year, End Date, "]').clear();
+      await page.locator('[role="spinbutton"][aria-label="year, End Date, "]').type("2024");
+
+      // Close the calendar
+      await page.keyboard.press("Escape");
+
+      // Verify no users are shown for the past date range (users were created in 2025)
+      await expect(page.locator("tbody tr")).toHaveCount(0);
+    })();
+
+    // === CLEAR FILTERS FOR CLEAN DELETION TESTS ===
+    await step("Clear all filters & verify all users shown again for clean deletion tests")(async () => {
+      // Reset any remaining filters to show all users
+      await page.getByRole("button", { name: "Clear filters" }).click();
+
+      // Verify all users are shown again
+      await expect(page.locator("tbody tr")).toHaveCount(4);
+      await expect(page.locator("tbody")).toContainText(owner.email);
+      await expect(page.locator("tbody")).toContainText(user1.email);
+      await expect(page.locator("tbody")).toContainText(user2.email);
+      await expect(page.locator("tbody")).toContainText(user3.email);
+    })();
+
+    // === SINGLE USER DELETION SECTION ===
+    await step("Delete single user via menu & verify removal")(async () => {
+      const user1Row = page.locator("tbody tr").filter({ hasText: user1.email });
+      await user1Row.getByLabel("User actions").click();
+      await page.getByRole("menuitem", { name: "Delete" }).click();
+
+      await expect(page.getByRole("alertdialog", { name: "Delete user" })).toBeVisible();
+      await expect(page.getByText(`Are you sure you want to delete ${user1.email}?`)).toBeVisible();
+
+      await page.getByRole("button", { name: "Delete" }).click();
+
+      await expectToastMessage(context, `User deleted successfully: ${user1.email}`);
+      await expect(page.getByRole("alertdialog")).not.toBeVisible();
+      await expect(page.locator("tbody tr")).toHaveCount(3); // owner + user2 + user3
+      await expect(page.getByText(user1.email)).not.toBeVisible();
+      await expect(page.locator("tbody")).toContainText(owner.email);
+      await expect(page.locator("tbody")).toContainText(user2.email);
+      await expect(page.locator("tbody")).toContainText(user3.email);
+    })();
+
+    // === BULK USER SELECTION SECTION ===
+    await step("Select remaining two users by clicking rows & verify selection state")(async () => {
+      const user2Row = page.locator("tbody tr").filter({ hasText: user2.email });
+      const user3Row = page.locator("tbody tr").filter({ hasText: user3.email });
+
+      // Select first user by clicking the row
+      await user2Row.click();
+      await expect(user2Row).toHaveAttribute("aria-selected", "true");
+      await expect(page.getByRole("button", { name: "Delete user" })).toBeVisible();
+
+      // Select second user by clicking the row (should enable multi-selection)
+      await user3Row.click({ modifiers: ["ControlOrMeta"] });
+      await expect(user3Row).toHaveAttribute("aria-selected", "true");
+      await expect(user2Row).toHaveAttribute("aria-selected", "true");
+      await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible();
+    })();
+
+    // === BULK USER DELETION SECTION ===
+    await step("Cancel bulk deletion & verify users remain selected")(async () => {
+      await page.getByRole("button", { name: "Delete 2 users" }).click();
+
+      await expect(page.getByRole("alertdialog", { name: "Delete users" })).toBeVisible();
+      await expect(page.getByText("Are you sure you want to delete 2 users?")).toBeVisible();
+
+      await page.getByRole("button", { name: "Cancel" }).click();
+
+      await expect(page.getByRole("alertdialog")).not.toBeVisible();
+      await expect(page.locator("tbody tr")).toHaveCount(3); // All users still present
+      await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible(); // Selection maintained
+    })();
+
+    await step("Confirm bulk delete selected users & verify removal")(async () => {
+      await page.getByRole("button", { name: "Delete 2 users" }).click();
+
+      await expect(page.getByRole("alertdialog", { name: "Delete users" })).toBeVisible();
+      await page.getByRole("button", { name: "Delete" }).click();
+
+      await expectToastMessage(context, "2 users deleted successfully");
+      await expect(page.getByRole("alertdialog")).not.toBeVisible();
+      await expect(page.locator("tbody tr")).toHaveCount(1); // Only owner left
+      await expect(page.getByText(user2.email)).not.toBeVisible();
+      await expect(page.getByText(user3.email)).not.toBeVisible();
+      await expect(page.locator("tbody")).toContainText(owner.email);
+      await expect(page.getByRole("button", { name: "Delete 2 users" })).not.toBeVisible();
+      await expect(page.getByRole("button", { name: "Invite user" })).toBeVisible();
+    })();
+
+    // === OWNER PROTECTION SECTION ===
+    await step("Verify owner menu delete option is disabled")(async () => {
+      const ownerRow = page.locator("tbody tr").filter({ hasText: owner.email });
+      await ownerRow.getByLabel("User actions").click();
+
+      await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled();
+
+      await page.keyboard.press("Escape");
+    })();
+  });
+});
diff --git a/application/account-management/WebApp/tests/playwright.config.ts b/application/account-management/WebApp/tests/playwright.config.ts
new file mode 100644
index 000000000..6256a1e95
--- /dev/null
+++ b/application/account-management/WebApp/tests/playwright.config.ts
@@ -0,0 +1,11 @@
+/// <reference types="node" />
+import { defineConfig } from "@playwright/test";
+import baseConfig from "../../../shared-webapp/tests/e2e/playwright.config";
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...baseConfig,
+  testDir: ".",
+  testMatch: "**/*.spec.ts"
+});
diff --git a/application/account-management/WebApp/tests/tsconfig.json b/application/account-management/WebApp/tests/tsconfig.json
new file mode 100644
index 000000000..7ece77c7c
--- /dev/null
+++ b/application/account-management/WebApp/tests/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Account Management E2E Tests",
+  "extends": "@repo/config/typescript/react-app.json",
+  "compilerOptions": {
+    "types": ["node", "@playwright/test"],
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "paths": {
+      "@/*": ["../*"],
+      "@shared/e2e/fixtures/*": ["../../../shared-webapp/tests/e2e/fixtures/*"],
+      "@shared/e2e/utils/*": ["../../../shared-webapp/tests/e2e/utils/*"],
+      "@shared/e2e/auth/*": ["../../../shared-webapp/tests/e2e/auth/*"],
+      "@shared/e2e/types/*": ["../../../shared-webapp/tests/e2e/types/*"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/application/account-management/WebApp/tsconfig.json b/application/account-management/WebApp/tsconfig.json
index cfa0b5464..1581d50de 100644
--- a/application/account-management/WebApp/tsconfig.json
+++ b/application/account-management/WebApp/tsconfig.json
@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "tests/**"]
 }
diff --git a/application/back-office/WebApp/routes/back-office/index.tsx b/application/back-office/WebApp/routes/back-office/index.tsx
index d51592e7b..897b58977 100644
--- a/application/back-office/WebApp/routes/back-office/index.tsx
+++ b/application/back-office/WebApp/routes/back-office/index.tsx
@@ -2,6 +2,7 @@ import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
 import { TopMenu } from "@/shared/components/topMenu";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
+import { AppLayout } from "@repo/ui/components/AppLayout";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/back-office/")({
@@ -10,24 +11,19 @@ export const Route = createFileRoute("/back-office/")({
 
 export default function Home() {
   return (
-    <div className="flex h-full w-full gap-4">
+    <>
       <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
-      <div className="flex w-full flex-col gap-4 px-4 py-3">
-        <TopMenu />
-        <div className="mb-4 flex h-20 w-full items-center justify-between space-x-2 sm:mt-4">
-          <div className="mt-3 flex flex-col gap-2 font-semibold text-3xl text-foreground">
-            <h1>
-              <Trans>Welcome to the Back Office</Trans>
-            </h1>
-            <p className="font-normal text-muted-foreground text-sm">
-              <Trans>
-                Manage tenants, view system data, see exceptions, and perform various tasks for operational and support
-                teams.
-              </Trans>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+      <AppLayout topMenu={<TopMenu />}>
+        <h1>
+          <Trans>Welcome to the Back Office</Trans>
+        </h1>
+        <p>
+          <Trans>
+            Manage tenants, view system data, see exceptions, and perform various tasks for operational and support
+            teams.
+          </Trans>
+        </p>
+      </AppLayout>
+    </>
   );
 }
diff --git a/application/back-office/WebApp/rsbuild.config.ts b/application/back-office/WebApp/rsbuild.config.ts
index b34e8d99f..6c3e40deb 100644
--- a/application/back-office/WebApp/rsbuild.config.ts
+++ b/application/back-office/WebApp/rsbuild.config.ts
@@ -11,6 +11,14 @@ import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
 const customBuildEnv: CustomBuildEnv = {};
 
 export default defineConfig({
+  tools: {
+    rspack: {
+      // Exclude tests/e2e directory from file watching to prevent hot reloading issues
+      watchOptions: {
+        ignored: ["**/tests/**", "**/playwright-report/**"]
+      }
+    }
+  },
   plugins: [
     pluginReact(),
     pluginTypeCheck(),
diff --git a/application/back-office/WebApp/shared/components/topMenu/index.tsx b/application/back-office/WebApp/shared/components/topMenu/index.tsx
index 716c387a4..49b806866 100644
--- a/application/back-office/WebApp/shared/components/topMenu/index.tsx
+++ b/application/back-office/WebApp/shared/components/topMenu/index.tsx
@@ -6,7 +6,7 @@ import { Button } from "@repo/ui/components/Button";
 import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector";
 import { LifeBuoyIcon } from "lucide-react";
 import type { ReactNode } from "react";
-import { lazy } from "react";
+import { Suspense, lazy } from "react";
 
 const AvatarButton = lazy(() => import("account-management/AvatarButton"));
 
@@ -31,7 +31,9 @@ export function TopMenu({ children }: Readonly<TopMenuProps>) {
           </Button>
           <LocaleSwitcher aria-label={t`Select language`} />
         </span>
-        <AvatarButton aria-label={t`User profile menu`} />
+        <Suspense fallback={<div className="h-10 w-10 rounded-full bg-secondary" />}>
+          <AvatarButton aria-label={t`User profile menu`} />
+        </Suspense>
       </div>
     </nav>
   );
diff --git a/application/back-office/WebApp/tests/e2e/homepage.spec.ts b/application/back-office/WebApp/tests/e2e/homepage.spec.ts
new file mode 100644
index 000000000..2bb85554f
--- /dev/null
+++ b/application/back-office/WebApp/tests/e2e/homepage.spec.ts
@@ -0,0 +1,20 @@
+import { expect } from "@playwright/test";
+import { test } from "@shared/e2e/fixtures/page-auth";
+import { step } from "@shared/e2e/utils/step-decorator";
+import { createTestContext } from "@shared/e2e/utils/test-assertions";
+import {} from "@shared/e2e/utils/test-data";
+
+test.describe("@smoke", () => {
+  test("Navigate to back-office & verify homepage loads correctly", async ({ ownerPage }) => {
+    createTestContext(ownerPage);
+
+    await step("Navigate to back-office & verify homepage loads correctly")(async () => {
+      await ownerPage.goto("/");
+      await ownerPage.goto("/back-office");
+
+      await expect(ownerPage).toHaveURL("/back-office");
+      await expect(ownerPage.getByRole("heading", { name: "Welcome to the Back Office" })).toBeVisible();
+      await expect(ownerPage.getByText("Manage tenants, view system data")).toBeVisible();
+    })();
+  });
+});
diff --git a/application/back-office/WebApp/tests/playwright.config.ts b/application/back-office/WebApp/tests/playwright.config.ts
new file mode 100644
index 000000000..83e7b9826
--- /dev/null
+++ b/application/back-office/WebApp/tests/playwright.config.ts
@@ -0,0 +1,12 @@
+/// <reference types="node" />
+import { defineConfig } from "@playwright/test";
+import baseConfig from "../../../shared-webapp/tests/e2e/playwright.config";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...baseConfig,
+  testDir: ".",
+  testMatch: "**/*.spec.ts"
+});
diff --git a/application/back-office/WebApp/tests/tsconfig.json b/application/back-office/WebApp/tests/tsconfig.json
new file mode 100644
index 000000000..0bc37c34b
--- /dev/null
+++ b/application/back-office/WebApp/tests/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Back Office E2E Tests",
+  "extends": "@repo/config/typescript/react-app.json",
+  "compilerOptions": {
+    "types": ["node", "@playwright/test"],
+    "paths": {
+      "@/*": ["../*"],
+      "@shared/e2e/fixtures/*": ["../../../shared-webapp/tests/e2e/fixtures/*"],
+      "@shared/e2e/utils/*": ["../../../shared-webapp/tests/e2e/utils/*"],
+      "@shared/e2e/auth/*": ["../../../shared-webapp/tests/e2e/auth/*"],
+      "@shared/e2e/types/*": ["../../../shared-webapp/tests/e2e/types/*"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/application/back-office/WebApp/tsconfig.json b/application/back-office/WebApp/tsconfig.json
index c5f095bd0..ecd4fb3ef 100644
--- a/application/back-office/WebApp/tsconfig.json
+++ b/application/back-office/WebApp/tsconfig.json
@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "tests/**"]
 }
diff --git a/application/package-lock.json b/application/package-lock.json
index fbb7221f4..506aab135 100644
--- a/application/package-lock.json
+++ b/application/package-lock.json
@@ -37,9 +37,11 @@
       },
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
+        "@faker-js/faker": "8.4.1",
         "@lingui/cli": "5.1.0",
         "@lingui/format-po": "5.1.0",
         "@lingui/swc-plugin": "5.0.1",
+        "@playwright/test": "1.52.0",
         "@rsbuild/core": "1.1.10",
         "@rsbuild/plugin-react": "1.1.0",
         "@rsbuild/plugin-svgr": "1.0.6",
@@ -48,10 +50,12 @@
         "@tailwindcss/container-queries": "0.1.1",
         "@tanstack/router-devtools": "1.90.0",
         "@tanstack/router-plugin": "1.87.13",
+        "@types/node": "^22.15.28",
         "@types/react": "19.0.0",
         "@types/react-dom": "19.0.0",
         "openapi-typescript": "7.4.4",
         "openapi-typescript-helpers": "0.0.15",
+        "playwright": "1.52.0",
         "rimraf": "6.0.1",
         "tailwindcss": "3.4.16",
         "tailwindcss-animate": "1.0.7",
@@ -80,6 +84,11 @@
         "@repo/ui": "*"
       }
     },
+    "End2EndTests": {
+      "name": "end-2-endtests",
+      "version": "1.0.0",
+      "extraneous": true
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -962,6 +971,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@faker-js/faker": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.4.1.tgz",
+      "integrity": "sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+        "npm": ">=6.14.13"
+      }
+    },
     "node_modules/@fontsource/inter": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.0.tgz",
@@ -1850,6 +1876,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
+      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@react-aria/accordion": {
       "version": "3.0.0-alpha.36",
       "resolved": "https://registry.npmjs.org/@react-aria/accordion/-/accordion-3.0.0-alpha.36.tgz",
@@ -4629,13 +4671,13 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.10.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
-      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
+      "version": "22.15.28",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.28.tgz",
+      "integrity": "sha512-I0okKVDmyKR281I0UIFV7EWAWRnR0gkuSKob5wVcByyyhr7Px/slhkQapcYX4u00ekzNWaS1gznKZnuzxwo4pw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.20.0"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/parse-json": {
@@ -6940,6 +6982,53 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
+      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
+      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -8867,9 +8956,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "devOptional": true,
       "license": "MIT"
     },
diff --git a/application/package.json b/application/package.json
index 9a6305443..b023fbe56 100644
--- a/application/package.json
+++ b/application/package.json
@@ -42,9 +42,11 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@faker-js/faker": "8.4.1",
     "@lingui/cli": "5.1.0",
     "@lingui/format-po": "5.1.0",
     "@lingui/swc-plugin": "5.0.1",
+    "@playwright/test": "1.52.0",
     "@rsbuild/core": "1.1.10",
     "@rsbuild/plugin-react": "1.1.0",
     "@rsbuild/plugin-svgr": "1.0.6",
@@ -53,10 +55,12 @@
     "@tailwindcss/container-queries": "0.1.1",
     "@tanstack/router-devtools": "1.90.0",
     "@tanstack/router-plugin": "1.87.13",
+    "@types/node": "^22.15.28",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "openapi-typescript": "7.4.4",
     "openapi-typescript-helpers": "0.0.15",
+    "playwright": "1.52.0",
     "rimraf": "6.0.1",
     "tailwindcss": "3.4.16",
     "tailwindcss-animate": "1.0.7",
diff --git a/application/shared-kernel/SharedKernel/Validation/SharedValidations.cs b/application/shared-kernel/SharedKernel/Validation/SharedValidations.cs
index 50a7b66d1..07756a338 100644
--- a/application/shared-kernel/SharedKernel/Validation/SharedValidations.cs
+++ b/application/shared-kernel/SharedKernel/Validation/SharedValidations.cs
@@ -9,11 +9,11 @@ public sealed class Email : AbstractValidator<string>
         // While emails can be longer, we will limit them to 100 characters which should be enough for most cases
         private const int EmailMaxLength = 100;
 
-        public Email()
+        public Email(bool allowEmpty = false)
         {
             const string errorMessage = "Email must be in a valid format and no longer than 100 characters.";
 
-            RuleFor(email => email)
+            var rule = RuleFor(email => email)
                 .EmailAddress()
                 .WithMessage(errorMessage)
                 .MaximumLength(EmailMaxLength)
@@ -34,8 +34,12 @@ public Email()
                                !parts[1].EndsWith('.');
                     }
                 )
-                .WithMessage(errorMessage)
-                .When(email => !string.IsNullOrEmpty(email));
+                .WithMessage(errorMessage);
+
+            if (!allowEmpty)
+            {
+                rule.NotEmpty().WithMessage(errorMessage);
+            }
         }
     }
 
diff --git a/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx b/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx
index add273031..e13e354a7 100644
--- a/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx
+++ b/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx
@@ -4,7 +4,7 @@ import { AuthenticationContext } from "@repo/infrastructure/auth/AuthenticationP
 import { enhancedFetch } from "@repo/infrastructure/http/httpClient";
 import { Button } from "@repo/ui/components/Button";
 import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu";
-import { CheckIcon, LanguagesIcon } from "lucide-react";
+import { CheckIcon, GlobeIcon } from "lucide-react";
 import { use, useContext, useMemo } from "react";
 import { type Locale, translationContext } from "./TranslationContext";
 import { preferredLocaleKey } from "./constants";
@@ -48,7 +48,7 @@ export function LocaleSwitcher({ "aria-label": ariaLabel }: { "aria-label": stri
   return (
     <MenuTrigger>
       <Button variant="icon" aria-label={ariaLabel}>
-        <LanguagesIcon className="h-5 w-5" />
+        <GlobeIcon className="h-5 w-5" />
       </Button>
       <Menu onAction={handleLocaleChange} aria-label={ariaLabel}>
         {items.map((item) => (
diff --git a/application/shared-webapp/package.json b/application/shared-webapp/package.json
new file mode 100644
index 000000000..9b4a70e63
--- /dev/null
+++ b/application/shared-webapp/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@repo/shared-webapp",
+  "version": "1.0.0",
+  "private": true,
+  "exports": {
+    "./tests/e2e/utils/*": "./tests/e2e/utils/*",
+    "./tests/e2e/config/*": "./tests/e2e/config/*"
+  },
+  "scripts": {
+    "test": "playwright test"
+  }
+}
diff --git a/application/shared-webapp/tests/e2e/auth/auth-state-manager.ts b/application/shared-webapp/tests/e2e/auth/auth-state-manager.ts
new file mode 100644
index 000000000..c65548ad1
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/auth/auth-state-manager.ts
@@ -0,0 +1,107 @@
+import { promises as fs } from "node:fs";
+import type { BrowserContext, Page } from "@playwright/test";
+import {
+  getStorageStatePath,
+  isAuthenticationStateValid,
+  loadAuthenticationState,
+  saveAuthenticationState
+} from "@shared/e2e/auth/storage-state";
+import type { UserRole } from "@shared/e2e/types/auth";
+
+/**
+ * Authentication state manager for handling persistence and validation
+ */
+export class AuthStateManager {
+  private readonly workerIndex: number;
+  private readonly selfContainedSystemPrefix?: string;
+
+  constructor(workerIndex: number, selfContainedSystemPrefix?: string) {
+    this.workerIndex = workerIndex;
+    this.selfContainedSystemPrefix = selfContainedSystemPrefix;
+  }
+
+  /**
+   * Get the storage state file path for a specific role
+   * @param role User role
+   * @returns Path to the storage state file
+   */
+  getStateFilePath(role: UserRole): string {
+    return getStorageStatePath(this.workerIndex, role.toLowerCase(), this.selfContainedSystemPrefix);
+  }
+
+  /**
+   * Check if authentication state exists and is valid for a role
+   * @param role User role
+   * @returns Promise resolving to true if auth state is valid
+   */
+  async hasValidAuthState(role: UserRole): Promise<boolean> {
+    const filePath = this.getStateFilePath(role);
+    return await isAuthenticationStateValid(filePath);
+  }
+
+  /**
+   * Load authentication state for a role into a browser context
+   * @param context Browser context
+   * @param role User role
+   * @returns Promise resolving when state is loaded
+   */
+  async loadAuthState(context: BrowserContext, role: UserRole): Promise<void> {
+    const filePath = this.getStateFilePath(role);
+    await loadAuthenticationState(context, filePath);
+  }
+
+  /**
+   * Save authentication state for a role from a page
+   * @param page Playwright page
+   * @param role User role
+   * @returns Promise resolving when state is saved
+   */
+  async saveAuthState(page: Page, role: UserRole): Promise<void> {
+    const filePath = this.getStateFilePath(role);
+    await saveAuthenticationState(page, filePath);
+  }
+
+  /**
+   * Test if the authentication state is still valid by checking URL after navigation
+   * @param page Playwright page with loaded auth state
+   * @returns Promise resolving to true if auth is still valid
+   */
+  async validateAuthState(page: Page): Promise<boolean> {
+    try {
+      // Navigate to a protected route
+      await page.goto("/admin");
+
+      // If we get redirected to login, auth is invalid
+      // If we stay on /admin (or any admin route), auth is valid
+      return !page.url().includes("/login");
+    } catch {
+      // If any error occurs during validation, consider auth invalid
+      return false;
+    }
+  }
+
+  /**
+   * Clear authentication state for a specific role
+   * @param role User role
+   * @returns Promise resolving when state is cleared
+   */
+  async clearAuthState(role: UserRole): Promise<void> {
+    const filePath = this.getStateFilePath(role);
+    try {
+      await fs.unlink(filePath);
+    } catch {
+      // File might not exist, which is fine
+    }
+  }
+
+}
+
+/**
+ * Create an AuthStateManager instance for the current worker
+ * @param workerIndex Playwright worker index
+ * @param selfContainedSystemPrefix Optional system prefix
+ * @returns AuthStateManager instance
+ */
+export function createAuthStateManager(workerIndex: number, selfContainedSystemPrefix?: string): AuthStateManager {
+  return new AuthStateManager(workerIndex, selfContainedSystemPrefix);
+}
diff --git a/application/shared-webapp/tests/e2e/auth/storage-state.ts b/application/shared-webapp/tests/e2e/auth/storage-state.ts
new file mode 100644
index 000000000..b942cf1a3
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/auth/storage-state.ts
@@ -0,0 +1,77 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import type { BrowserContext, Page } from "@playwright/test";
+
+/**
+ * Save authentication state from a page's context to a file
+ * Only captures cookies as session storage is not needed for PlatformPlatform's token architecture
+ */
+export async function saveAuthenticationState(page: Page, filePath: string): Promise<void> {
+  // Ensure directory exists
+  await ensureDirectoryExists(path.dirname(filePath));
+
+  // Save storage state (cookies and localStorage)
+  await page.context().storageState({ path: filePath });
+}
+
+/**
+ * Load authentication state from a file into a browser context
+ */
+export async function loadAuthenticationState(_context: BrowserContext, filePath: string): Promise<void> {
+  // Storage state is loaded when creating the context, not after
+  // This function is mainly for validation and future use
+  const exists = await fileExists(filePath);
+  if (!exists) {
+    throw new Error(`Authentication state file not found: ${filePath}`);
+  }
+}
+
+/**
+ * Get the storage state file path for a specific worker, role, and system
+ */
+export function getStorageStatePath(workerIndex: number, userRole: string, selfContainedSystemPrefix?: string): string {
+  const baseDir = path.join(process.cwd(), "tests/test-results/auth-state");
+  const systemPrefix = selfContainedSystemPrefix ?? "default";
+  return path.join(baseDir, systemPrefix, `worker-${workerIndex}-${userRole.toLowerCase()}.json`);
+}
+
+/**
+ * Check if an authentication state file is valid and exists
+ */
+export async function isAuthenticationStateValid(filePath: string): Promise<boolean> {
+  try {
+    const exists = await fileExists(filePath);
+    if (!exists) {
+      return false;
+    }
+
+    // Check if file is not empty and contains valid JSON
+    const content = await fs.readFile(filePath, "utf-8");
+    const state = JSON.parse(content);
+
+    // Basic validation - should have cookies or origins
+    return state && (state.cookies || state.origins);
+  } catch {
+    return false;
+  }
+}
+
+// Helper functions
+async function ensureDirectoryExists(dirPath: string): Promise<void> {
+  try {
+    await fs.mkdir(dirPath, { recursive: true });
+  } catch (error: unknown) {
+    if (error instanceof Error && "code" in error && error.code !== "EEXIST") {
+      throw error;
+    }
+  }
+}
+
+async function fileExists(filePath: string): Promise<boolean> {
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/application/shared-webapp/tests/e2e/auth/tenant-provisioning.ts b/application/shared-webapp/tests/e2e/auth/tenant-provisioning.ts
new file mode 100644
index 000000000..2b4ada18b
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/auth/tenant-provisioning.ts
@@ -0,0 +1,85 @@
+import { expect } from "@playwright/test";
+import type { Tenant, User } from "@shared/e2e/types/auth";
+
+/**
+ * Create a tenant with owner, admin, and member users
+ * @param workerIndex Playwright worker index for unique tenant identification
+ * @param selfContainedSystemPrefix Optional prefix to separate tenant pools between systems
+ * @returns Tenant object with user information
+ */
+export function createTenantWithUsers(workerIndex: number, selfContainedSystemPrefix?: string): Tenant {
+  const prefix = selfContainedSystemPrefix ? `${selfContainedSystemPrefix}-` : "";
+  const timestamp = Date.now();
+  const tenantName = `${prefix}e2e-tenant-${workerIndex}-${timestamp}`;
+
+  // Generate unique emails for each role with timestamp to avoid conflicts across test runs
+  const ownerEmailAddress = `e2e-${prefix}-owner-${workerIndex}-${timestamp}@platformplatform.net`;
+  const adminEmailAddress = `e2e-${prefix}-admin-${workerIndex}-${timestamp}@platformplatform.net`;
+  const memberEmailAddress = `e2e-${prefix}-member-${workerIndex}-${timestamp}@platformplatform.net`;
+
+  // Create User objects for each role
+  const owner: User = {
+    email: ownerEmailAddress,
+    firstName: "TestOwner",
+    lastName: `Worker${workerIndex}`,
+    role: "Owner"
+  };
+
+  const admin: User = {
+    email: adminEmailAddress,
+    firstName: "TestAdmin",
+    lastName: `Worker${workerIndex}`,
+    role: "Admin"
+  };
+
+  const member: User = {
+    email: memberEmailAddress,
+    firstName: "TestMember",
+    lastName: `Worker${workerIndex}`,
+    role: "Member"
+  };
+
+  // Return tenant structure - actual signup will be implemented when needed
+  const tenantId = `tenant-${workerIndex}-${timestamp}`;
+
+  return {
+    tenantId,
+    tenantName,
+    owner,
+    admin,
+    member
+  };
+}
+
+/**
+ * Ensure that all tenant users exist in the backend
+ * This provisions the users through the signup flow if they don't already exist
+ * @param tenant Tenant object with user information
+ * @returns Promise that resolves when all users are ensured to exist
+ */
+export async function ensureTenantUsersExist(tenant: Tenant): Promise<void> {
+  // Import the authentication utilities dynamically to avoid circular dependencies
+  const { createAuthStateManager } = await import("../auth/auth-state-manager.js");
+  const { completeSignupFlow } = await import("../utils/test-data.js");
+
+  // Create a temporary browser context for user provisioning
+  const { chromium } = await import("@playwright/test");
+  const browser = await chromium.launch();
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  try {
+    // Create the owner user through centralized signup flow
+    const { createTestContext } = await import("../utils/test-assertions.js");
+    const testContext = createTestContext(page);
+    await completeSignupFlow(page, expect, tenant.owner, testContext);
+
+    // Save authentication state for reuse
+    const authManager = createAuthStateManager(0, "account-management"); // Use worker 0 for shared users
+    await authManager.saveAuthState(page, "Owner");
+  } finally {
+    // Cleanup - always close browser resources
+    await context.close();
+    await browser.close();
+  }
+}
diff --git a/application/shared-webapp/tests/e2e/fixtures/page-auth.ts b/application/shared-webapp/tests/e2e/fixtures/page-auth.ts
new file mode 100644
index 000000000..b7c0a357d
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/fixtures/page-auth.ts
@@ -0,0 +1,240 @@
+import { type Browser, type BrowserContext, type Page, test as base, expect } from "@playwright/test";
+import { createAuthStateManager } from "@shared/e2e/auth/auth-state-manager";
+import { getSelfContainedSystemPrefix, getWorkerTenant } from "@shared/e2e/fixtures/worker-auth";
+import type { Tenant, User, UserRole } from "@shared/e2e/types/auth";
+import { completeSignupFlow } from "@shared/e2e/utils/test-data";
+import { createTestContext, assertNoUnexpectedErrors, type TestContext } from "@shared/e2e/utils/test-assertions";
+
+
+// Extend the global interface to include testTenant
+declare global {
+  interface Window {
+    testTenant: Tenant;
+  }
+}
+
+/**
+ * Role-specific page fixtures for authenticated testing
+ */
+export interface PageAuthFixtures {
+  /**
+   * Authenticated page instance as tenant owner
+   */
+  ownerPage: Page;
+
+  /**
+   * Authenticated page instance as tenant admin
+   */
+  adminPage: Page;
+
+  /**
+   * Authenticated page instance as tenant member
+   */
+  memberPage: Page;
+
+  /**
+   * Anonymous (unauthenticated) page with tenant provisioned
+   * Useful for testing login/signup flows from a clean state while ensuring users exist
+   */
+  anonymousPage: { page: Page; tenant: Tenant };
+}
+
+/**
+ * Perform fresh authentication by going through signup/login flow
+ */
+async function performFreshAuthentication(
+  browserContext: BrowserContext,
+  role: UserRole,
+  tenant: Tenant | undefined,
+  authManager: ReturnType<typeof createAuthStateManager>
+): Promise<Page> {
+  if (!tenant) {
+    throw new Error("Tenant data is required for fresh authentication");
+  }
+
+  // Create a new page for authentication
+  const page = await browserContext.newPage();
+
+  // Get the user for this role
+  const user = getUserForRole(tenant, role);
+
+  // Use the centralized signup flow utility
+  const testContext = createTestContext(page);
+  await completeSignupFlow(page, expect, user, testContext);
+
+  // Ensure any modal dialogs are closed by waiting for them to disappear
+  try {
+    await page.locator('[role="dialog"]').waitFor({ state: "detached", timeout: 2000 });
+  } catch {
+    // Dialog might not exist or already be closed, which is fine
+  }
+
+  // Save authentication state
+  await authManager.saveAuthState(page, role);
+
+  return page;
+}
+
+/**
+ * Get user for a specific role from tenant data
+ */
+function getUserForRole(tenant: Tenant, role: UserRole): User {
+  switch (role) {
+    case "Owner":
+      return tenant.owner;
+    case "Admin":
+      return tenant.admin;
+    case "Member":
+      return tenant.member;
+    default:
+      throw new Error(`Unknown role: ${role}`);
+  }
+}
+
+/**
+ * Create an authenticated context and page for a specific user role
+ */
+async function createAuthenticatedContextAndPage(
+  browser: Browser,
+  role: UserRole,
+  workerIndex: number,
+  selfContainedSystemPrefix?: string,
+  tenant?: Tenant
+): Promise<{ context: BrowserContext; page: Page }> {
+  const authManager = createAuthStateManager(workerIndex, selfContainedSystemPrefix);
+
+  // Check if we have valid auth state
+  const hasValidAuth = await authManager.hasValidAuthState(role);
+
+  let context: BrowserContext;
+  let page: Page;
+
+  if (hasValidAuth) {
+    // Create context with existing auth state
+    context = await browser.newContext({
+      storageState: authManager.getStateFilePath(role)
+    });
+    page = await context.newPage();
+
+    // Validate that authentication is still working
+    const isStillValid = await authManager.validateAuthState(page);
+    if (!isStillValid) {
+      // Clear invalid auth state and create fresh session
+      await authManager.clearAuthState(role);
+      await context.close();
+
+      // Create fresh context and perform authentication
+      context = await browser.newContext();
+      page = await performFreshAuthentication(context, role, tenant, authManager);
+    }
+  } else {
+    // Create fresh context and perform authentication
+    context = await browser.newContext();
+    page = await performFreshAuthentication(context, role, tenant, authManager);
+  }
+
+  return { context, page };
+}
+
+/**
+ * Extended test with role-specific authenticated page fixtures
+ */
+export const test = base.extend<PageAuthFixtures>({
+  ownerPage: async ({ browser }, use, testInfo) => {
+    const workerIndex = testInfo.parallelIndex;
+    const systemPrefix = getSelfContainedSystemPrefix();
+
+    // Get tenant for this worker
+    const tenant = await getWorkerTenant(workerIndex, systemPrefix);
+
+    // Create authenticated context and page for owner
+    const { context, page } = await createAuthenticatedContextAndPage(
+      browser,
+      "Owner",
+      workerIndex,
+      systemPrefix,
+      tenant
+    );
+
+    await use(page);
+
+    // Cleanup - close the context and page
+    await context.close();
+  },
+
+  adminPage: async ({ browser }, use, testInfo) => {
+    const workerIndex = testInfo.parallelIndex;
+    const systemPrefix = getSelfContainedSystemPrefix();
+
+    // Get tenant for this worker
+    const tenant = await getWorkerTenant(workerIndex, systemPrefix);
+
+    // Create authenticated context and page for admin
+    const { context, page } = await createAuthenticatedContextAndPage(
+      browser,
+      "Admin",
+      workerIndex,
+      systemPrefix,
+      tenant
+    );
+
+    await use(page);
+
+    // Cleanup - close the context and page
+    await context.close();
+  },
+
+  memberPage: async ({ browser }, use, testInfo) => {
+    const workerIndex = testInfo.parallelIndex;
+    const systemPrefix = getSelfContainedSystemPrefix();
+
+    // Get tenant for this worker
+    const tenant = await getWorkerTenant(workerIndex, systemPrefix);
+
+    // Create authenticated context and page for member
+    const { context, page } = await createAuthenticatedContextAndPage(
+      browser,
+      "Member",
+      workerIndex,
+      systemPrefix,
+      tenant
+    );
+
+    await use(page);
+
+    // Cleanup - close the context and page
+    await context.close();
+  },
+
+  anonymousPage: async ({ browser }, use, testInfo) => {
+    const workerIndex = testInfo.parallelIndex;
+    const systemPrefix = getSelfContainedSystemPrefix();
+
+    // Get tenant for this worker - ensure users exist for testing existing user flows
+    const tenant = await getWorkerTenant(workerIndex, systemPrefix, {
+      workerIndex,
+      selfContainedSystemPrefix: systemPrefix,
+      ensureUsersExist: true
+    });
+
+    // Create a fresh, unauthenticated context and page
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    await use({ page, tenant });
+
+    // Cleanup - close the context and page
+    await context.close();
+  }
+});
+
+// Global afterEach hook to automatically run error checking for ALL tests
+base.afterEach(({ page }) => {
+  if (page) {
+    // Retrieve the existing context that was created during the test
+    const existingContext = (page as Page & { __testContext?: TestContext }).__testContext;
+    if (existingContext) {
+      assertNoUnexpectedErrors(existingContext);
+    }
+  }
+});
diff --git a/application/shared-webapp/tests/e2e/fixtures/worker-auth.ts b/application/shared-webapp/tests/e2e/fixtures/worker-auth.ts
new file mode 100644
index 000000000..820256d56
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/fixtures/worker-auth.ts
@@ -0,0 +1,73 @@
+import { getStorageStatePath, isAuthenticationStateValid } from "@shared/e2e/auth/storage-state";
+import { createTenantWithUsers, ensureTenantUsersExist } from "@shared/e2e/auth/tenant-provisioning";
+import type { Tenant, TenantProvisioningOptions } from "@shared/e2e/types/auth";
+
+/**
+ * Worker-scoped tenant cache to ensure each worker gets a unique tenant
+ */
+const workerTenantCache = new Map<string, Tenant>();
+
+/**
+ * Get or create a tenant for the current worker
+ * This ensures each Playwright worker gets a unique tenant for parallel execution
+ * @param workerIndex Playwright worker index from testInfo.parallelIndex
+ * @param selfContainedSystemPrefix Optional prefix for system separation
+ * @param options Optional provisioning options
+ * @returns Promise resolving to a unique tenant for this worker
+ */
+export async function getWorkerTenant(
+  workerIndex: number,
+  selfContainedSystemPrefix?: string,
+  options?: TenantProvisioningOptions
+): Promise<Tenant> {
+  const cacheKey = `${workerIndex}-${selfContainedSystemPrefix || "default"}`;
+
+  // Return cached tenant if available
+  if (workerTenantCache.has(cacheKey)) {
+    const cachedTenant = workerTenantCache.get(cacheKey);
+    if (cachedTenant) {
+      // If we need to ensure users exist, do that now
+      if (options?.ensureUsersExist) {
+        await ensureTenantUsersExist(cachedTenant);
+      }
+      return cachedTenant;
+    }
+  }
+
+  // Check if we have valid authentication state for the owner (primary user)
+  const ownerStorageStatePath = getStorageStatePath(workerIndex, "owner", selfContainedSystemPrefix);
+  const hasValidAuth = await isAuthenticationStateValid(ownerStorageStatePath);
+
+  let tenant: Tenant;
+
+  if (hasValidAuth) {
+    // Reuse existing tenant - reconstruct from storage path pattern
+    tenant = createTenantWithUsers(workerIndex, selfContainedSystemPrefix);
+  } else {
+    // Create new tenant with all users
+    tenant = createTenantWithUsers(workerIndex, selfContainedSystemPrefix);
+
+    // Actual tenant creation will be implemented when authentication is needed
+  }
+
+  // If we need to ensure users exist, do that now
+  if (options?.ensureUsersExist) {
+    await ensureTenantUsersExist(tenant);
+  }
+
+  // Cache the tenant for this worker
+  workerTenantCache.set(cacheKey, tenant);
+  return tenant;
+}
+
+/**
+ * Extract the self-contained system prefix from the current working directory or test context
+ * @returns The self-contained system prefix (e.g., "account-management" or "back-office")
+ */
+export function getSelfContainedSystemPrefix(): string | undefined {
+  // Try to extract from current working directory
+  const cwd = process.cwd();
+  const match = cwd.match(/application\/([^\/]+)\/WebApp/);
+  return match ? match[1] : undefined;
+}
+
diff --git a/application/shared-webapp/tests/e2e/playwright.config.ts b/application/shared-webapp/tests/e2e/playwright.config.ts
new file mode 100644
index 000000000..de52f8496
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/playwright.config.ts
@@ -0,0 +1,117 @@
+/// <reference types="node" />
+import { defineConfig, devices } from "@playwright/test";
+import { getBaseUrl, isWindows } from "./utils/constants";
+
+let workers: number | undefined;
+if (process.env.CI) {
+  workers = 1; // Limit to 1 worker on CI
+} else if (isWindows) {
+  workers = 4; // Limit to 4 workers on Windows to avoid performance issues
+} else {
+  workers = undefined; // On non-Windows systems, use all available CPUs
+}
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  // Run tests in files in parallel
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+
+  workers: workers,
+
+  // Reporter to use. See https://playwright.dev/docs/test-reporters
+  reporter: process.env.CI ? "github" : [["list"], ["html", { open: "never", outputFolder: "test-results/playwright-report" }]],
+
+  // Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions.
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`.
+    // biome-ignore lint/style/useNamingConvention: Using Playwright's required property name
+    baseURL: getBaseUrl(),
+
+    // Default timeout for actions like click(), fill(), etc.
+    actionTimeout: 10000,
+
+    // Browser launch options
+    launchOptions: {
+      // Slow motion delay controlled by CLI --slow-mo flag
+      slowMo: process.env.PLAYWRIGHT_SLOW_MO ? Number.parseInt(process.env.PLAYWRIGHT_SLOW_MO) : 0
+    },
+
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    trace: "on-first-retry",
+    // Take screenshot on failure
+    screenshot: "only-on-failure",
+    // Record video - always use retain-on-failure for better HTML report compatibility
+    // Videos will be recorded for failed tests and can be forced on via CLI if needed
+    video: process.env.PLAYWRIGHT_VIDEO_MODE === "on" ? "on" : "retain-on-failure"
+  },
+
+  // Global timeout for each test (double timeout for slow motion)
+  timeout: (() => {
+    const baseTimeout = process.env.PLAYWRIGHT_TIMEOUT ? Number.parseInt(process.env.PLAYWRIGHT_TIMEOUT) : 30000;
+    const isSlowMotion = !!process.env.PLAYWRIGHT_SLOW_MO;
+    return isSlowMotion ? baseTimeout * 2 : baseTimeout;
+  })(),
+  expect: {
+    timeout: 10000
+  },
+
+  // Output directories - centralized test artifacts
+  outputDir: "test-results/test-artifacts/",
+
+  // Configure projects for major browsers
+  projects: [
+    // Smoke tests run first (all browsers) - matches @smoke tag in any file
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+      grep: /@smoke/
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+      grep: /@smoke/
+    },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+        // Ignore HTTPS errors only for WebKit on Windows, as it's stricter than other browsers
+        // biome-ignore lint/style/useNamingConvention: <explanation>
+        ignoreHTTPSErrors: isWindows
+      },
+      grep: /@smoke/
+    },
+
+    // Comprehensive tests run second (all browsers) - matches @comprehensive tag in any file
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+      grepInvert: /@smoke/
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+      grepInvert: /@smoke/
+    },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+        // Ignore HTTPS errors only for WebKit on Windows, as it's stricter than other browsers
+        // biome-ignore lint/style/useNamingConvention: <explanation>
+        ignoreHTTPSErrors: isWindows
+      },
+      grepInvert: /@smoke/
+    },
+  ]
+});
diff --git a/application/shared-webapp/tests/e2e/tsconfig.json b/application/shared-webapp/tests/e2e/tsconfig.json
new file mode 100644
index 000000000..7c0a460f5
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "end-to-end-tests",
+  "extends": "@repo/config/typescript/node-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["node"],
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "paths": {
+      "@shared/e2e/fixtures/*": ["./fixtures/*"],
+      "@shared/e2e/utils/*": ["./utils/*"],
+      "@shared/e2e/auth/*": ["./auth/*"],
+      "@shared/e2e/types/*": ["./types/*"]
+    }
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "test-results/**"]
+}
diff --git a/application/shared-webapp/tests/e2e/types/auth.ts b/application/shared-webapp/tests/e2e/types/auth.ts
new file mode 100644
index 000000000..6ad44564d
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/types/auth.ts
@@ -0,0 +1,43 @@
+
+/**
+ * Authentication types and interfaces for E2E testing
+ */
+
+/**
+ * User roles available in the system - must match UserInfoEnv.role from environment.d.ts
+ */
+export type UserRole = "Owner" | "Admin" | "Member";
+
+/**
+ * User interface containing all user information for E2E testing
+ */
+export interface User {
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: UserRole;
+}
+
+/**
+ * Tenant interface containing all user information for E2E testing
+ */
+export interface Tenant {
+  tenantId: string;
+  tenantName: string;
+  owner: User;
+  admin: User;
+  member: User;
+}
+
+
+/**
+ * Configuration options for tenant provisioning
+ */
+export interface TenantProvisioningOptions {
+  workerIndex: number;
+  selfContainedSystemPrefix?: string;
+  isolated?: boolean;
+  ensureUsersExist?: boolean;
+}
+
+
diff --git a/application/shared-webapp/tests/e2e/utils/constants.ts b/application/shared-webapp/tests/e2e/utils/constants.ts
new file mode 100644
index 000000000..2d404ca44
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/utils/constants.ts
@@ -0,0 +1,23 @@
+/// <reference types="node" />
+
+/**
+ * Shared constants for End2End tests
+ */
+
+const DEFAULT_BASE_URL = "https://localhost:9000";
+
+export const isWindows = process.platform === "win32";
+
+/**
+ * Get the base URL for tests
+ */
+export function getBaseUrl(): string {
+  return process.env.PUBLIC_URL ?? DEFAULT_BASE_URL;
+}
+
+/**
+ * Check if we're running against localhost
+ */
+export function isLocalhost(): boolean {
+  return getBaseUrl() === DEFAULT_BASE_URL;
+}
diff --git a/application/shared-webapp/tests/e2e/utils/step-decorator.ts b/application/shared-webapp/tests/e2e/utils/step-decorator.ts
new file mode 100644
index 000000000..082c8b8c3
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/utils/step-decorator.ts
@@ -0,0 +1,199 @@
+import { test } from '@playwright/test';
+
+interface StepOptions {
+  /** Expected timeout in milliseconds for slow operations (e.g., waiting for OTP timeouts) */
+  timeout?: number;
+}
+
+/**
+ * Decorator function that wraps methods in Playwright test steps.
+ * 
+ * @param description - Required description for the test step
+ * @param options - Optional configuration for the step
+ * @returns Method decorator that wraps the original method in test.step()
+ * 
+ * @example
+ * ```typescript
+ * class MyPageObject {
+ *   @step('Navigate to users page')
+ *   async navigateToUsersPage() {
+ *     await this.page.goto('/users');
+ *   }
+ * 
+ *   @step('Wait for OTP timeout', { timeout: 30000 })
+ *   async waitForOtpTimeout() {
+ *     await this.page.waitForTimeout(30000);
+ *   }
+ * }
+ * 
+ * // Direct function usage
+ * await step('Delete user & verify removal', { timeout: 5000 })(async () => {
+ *   await deleteUser();
+ *   await expectToastMessage(context, "User deleted successfully");
+ * })();
+ * ```
+ */
+export function step(description: string, options: StepOptions = {}): any {
+  // Support both decorator usage and direct function wrapping
+  function stepFunction(targetOrFunction: any, propertyKey?: string, descriptor?: PropertyDescriptor): any {
+    // If called with a function directly (not as decorator)
+    if (typeof targetOrFunction === 'function' && !propertyKey) {
+      const originalFunction = targetOrFunction;
+      return function (this: any, ...args: any[]) {
+        return test.step(description, async () => {
+          const startTime = performance.now();
+          const result = originalFunction.apply(this, args);
+          const finalResult = result && typeof result.then === 'function' ? await result : result;
+          const endTime = performance.now();
+          const duration = endTime - startTime;
+
+          // Check for slow steps that might indicate missing toast assertions
+          // Skip slow step detection during debug mode or slow-mo to prevent false failures
+          const isDebugMode = Boolean(process.env.PLAYWRIGHT_SLOW_MO) || 
+                            process.env.PLAYWRIGHT_DEBUG === '1' || 
+                            process.env.PWDEBUG === '1';
+          
+          const slowThreshold = 3500; // 3.5 seconds
+          const allowedTimeout = options.timeout || slowThreshold;
+          
+          if (!isDebugMode) {
+            if (duration >= slowThreshold && !options.timeout) {
+              const durationSeconds = (duration / 1000).toFixed(1);
+              throw new Error(
+                `❌ Step "${description}" took ${durationSeconds}s, which exceeds the ${slowThreshold/1000}s threshold.\n\n` +
+                `💡 This usually indicates missing toast assertions. Unasserted toasts cause 3+ second delays.\n` +
+                `   Solutions:\n` +
+                `   • Add missing toast assertion: await expectToastMessage(context, "expected message")\n` +
+                `   • If this step is intentionally slow, add timeout: step("${description}", { timeout: ${Math.ceil(duration)} })`
+              );
+            } else if (duration > allowedTimeout) {
+              const durationSeconds = (duration / 1000).toFixed(1);
+              const timeoutSeconds = (allowedTimeout / 1000).toFixed(1);
+              throw new Error(
+                `❌ Step "${description}" took ${durationSeconds}s, which exceeds the allowed timeout of ${timeoutSeconds}s.\n\n` +
+                `💡 Consider increasing the timeout or optimizing the step.`
+              );
+            }
+          }
+
+          // Debug timing output if enabled
+          if (process.env.PLAYWRIGHT_SHOW_DEBUG_TIMING === 'true') {
+            const timestamp = new Date().toLocaleTimeString('en-US', { 
+              hour12: false, 
+              hour: '2-digit', 
+              minute: '2-digit', 
+              second: '2-digit',
+              fractionalSecondDigits: 3 
+            });
+            const durationSeconds = (duration / 1000).toFixed(3);
+            
+            // Color coding: green (<250ms), yellow (250ms-1s), red (>1s)
+            let colorCode = '\x1b[32m'; // Green
+            if (duration >= 1000) {
+              colorCode = '\x1b[31m'; // Red
+            } else if (duration >= 250) {
+              colorCode = '\x1b[33m'; // Yellow
+            }
+            const resetCode = '\x1b[0m';
+            
+            console.log(`${timestamp} - ${colorCode}[${durationSeconds}s]${resetCode} - ${description}`);
+          }
+          
+          return finalResult;
+        });
+      };
+    }
+
+    // Decorator usage
+    const target = targetOrFunction;
+    
+    // Get the descriptor if not provided
+    if (!descriptor) {
+      descriptor = Object.getOwnPropertyDescriptor(target, propertyKey!) || {
+        value: target[propertyKey!],
+        writable: true,
+        enumerable: false,
+        configurable: true
+      };
+    }
+
+    const originalMethod = descriptor.value;
+
+    if (!originalMethod || typeof originalMethod !== 'function') {
+      throw new Error(`@step decorator can only be applied to methods. Property '${propertyKey}' is not a method.`);
+    }
+
+    descriptor.value = function (this: any, ...args: any[]) {
+      return test.step(description, async () => {
+        const startTime = performance.now();
+        const result = originalMethod.apply(this, args);
+        const finalResult = result && typeof result.then === 'function' ? await result : result;
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+
+        // Check for slow steps that might indicate missing toast assertions
+        // Skip slow step detection during debug mode or slow-mo to prevent false failures
+        const isDebugMode = Boolean(process.env.PLAYWRIGHT_SLOW_MO) || 
+                          process.env.PLAYWRIGHT_DEBUG === '1' || 
+                          process.env.PWDEBUG === '1';
+        
+        const slowThreshold = 3500; // 3.5 seconds
+        const allowedTimeout = options.timeout || slowThreshold;
+        
+        if (!isDebugMode) {
+          if (duration >= slowThreshold && !options.timeout) {
+            const durationSeconds = (duration / 1000).toFixed(1);
+            throw new Error(
+              `❌ Step "${description}" took ${durationSeconds}s, which exceeds the ${slowThreshold/1000}s threshold.\n\n` +
+              `💡 This usually indicates missing toast assertions. Unasserted toasts cause 3+ second delays.\n` +
+              `   Solutions:\n` +
+              `   • Add missing toast assertion: await expectToastMessage(context, "expected message")\n` +
+              `   • If this step is intentionally slow, add timeout: step("${description}", { timeout: ${Math.ceil(duration)} })`
+            );
+          } else if (duration > allowedTimeout) {
+            const durationSeconds = (duration / 1000).toFixed(1);
+            const timeoutSeconds = (allowedTimeout / 1000).toFixed(1);
+            throw new Error(
+              `❌ Step "${description}" took ${durationSeconds}s, which exceeds the allowed timeout of ${timeoutSeconds}s.\n\n` +
+              `💡 Consider increasing the timeout or optimizing the step.`
+            );
+          }
+        }
+
+        // Debug timing output if enabled
+        if (process.env.PLAYWRIGHT_SHOW_DEBUG_TIMING === 'true') {
+          const timestamp = new Date().toLocaleTimeString('en-US', { 
+            hour12: false, 
+            hour: '2-digit', 
+            minute: '2-digit', 
+            second: '2-digit',
+            fractionalSecondDigits: 3 
+          });
+          const durationSeconds = (duration / 1000).toFixed(3);
+          
+          // Color coding: green (<250ms), yellow (250ms-1s), red (>1s)
+          let colorCode = '\x1b[32m'; // Green
+          if (duration >= 1000) {
+            colorCode = '\x1b[31m'; // Red
+          } else if (duration >= 250) {
+            colorCode = '\x1b[33m'; // Yellow
+          }
+          const resetCode = '\x1b[0m';
+          
+          console.log(`${timestamp} - ${colorCode}[${durationSeconds}s]${resetCode} - ${description}`);
+        }
+        
+        return finalResult;
+      });
+    };
+
+    // For legacy decorator support, define the property if needed
+    if (!Object.getOwnPropertyDescriptor(target, propertyKey!)) {
+      Object.defineProperty(target, propertyKey!, descriptor);
+    }
+
+    return descriptor;
+  }
+
+  return stepFunction;
+}
\ No newline at end of file
diff --git a/application/shared-webapp/tests/e2e/utils/test-assertions.ts b/application/shared-webapp/tests/e2e/utils/test-assertions.ts
new file mode 100644
index 000000000..32315865a
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/utils/test-assertions.ts
@@ -0,0 +1,457 @@
+import type { ConsoleMessage, Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+/**
+ * Interface for monitoring results - captures ALL errors/messages for strict assertion
+ */
+export interface MonitoringResults {
+  consoleMessages: ConsoleMessage[];
+  networkErrors: string[];
+  expectedStatusCodes: number[];
+}
+
+/**
+ * Test context that holds page and monitoring for simplified function calls
+ */
+export interface TestContext {
+  page: Page;
+  monitoring: MonitoringResults;
+}
+
+/**
+ * Options for expectToastMessage function
+ */
+interface AssertToastOptions {
+  expectNetworkError?: boolean;
+}
+
+/**
+ * Create a test context with page and monitoring for simplified function calls
+ * @param page Playwright page instance
+ * @returns Test context with page and monitoring
+ */
+export function createTestContext(page: Page): TestContext {
+  const monitoring = startMonitoring(page);
+  const context = { page, monitoring };
+
+  // Store context on page object so afterEach hook can access the same instance
+  (page as Page & { __testContext?: TestContext }).__testContext = context;
+
+  return context;
+}
+
+/**
+ * Internal function to start monitoring console messages, network errors, and toast messages for a page
+ * @param page Playwright page instance
+ * @returns Monitoring results object that will be populated during test execution
+ */
+function startMonitoring(page: Page): MonitoringResults {
+  const results: MonitoringResults = {
+    consoleMessages: [],
+    networkErrors: [],
+    expectedStatusCodes: []
+  };
+
+  // Monitor console errors and warnings with filtering for expected messages
+  page.on("console", (consoleMessage) => {
+    if (["warning", "error"].includes(consoleMessage.type())) {
+      const message = consoleMessage.text();
+
+      // Filter out expected console messages in test environment
+      const expectedMessages = [
+        "Error with Permissions-Policy header: Unrecognized feature: 'web-share'",
+        "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility",
+        "Content-Security-Policy:",
+        "MouseEvent.mozInputSource is deprecated",
+        "A PressResponder was rendered without a pressable child",
+        "WebSocket connection to", // Hot reload/dev server WebSocket connections
+        "Refused to connect to ws://", // WebSocket CSP violations from dev servers
+        "Refused to connect to wss://", // Secure WebSocket CSP violations from dev servers
+        "Loading failed for the <script>", // Firefox/WebKit JS loading failures in dev environment
+        "ChunkLoadError: Loading chunk", // Webpack/Rspack chunk loading errors in dev environment
+        "Loading chunk", // Additional chunk loading error variations
+        "Loading CSS chunk", // CSS chunk loading failures in dev environment
+        "Error: Loading CSS chunk", // CSS chunk loading error variations
+        "downloadable font: download failed", // Firefox font loading failures
+        "downloadable font: glyf:" // Firefox font loading failures
+      ];
+
+      const isExpected = expectedMessages.some((expected) => message.includes(expected));
+      if (!isExpected) {
+        results.consoleMessages.push(consoleMessage);
+      }
+    }
+  });
+
+  // Monitor network errors with filtering for expected errors
+  page.on("response", (response) => {
+    if (response.status() >= 400) {
+      const url = response.url();
+
+      // Filter out expected network errors in test environment
+      const expectedNetworkErrors = [
+        "/apple-touch-icon.png", // Common 404 in browsers
+        "/favicon.ico" // Common 404 in browsers
+      ];
+
+      const isExpected = expectedNetworkErrors.some((expected) => url.includes(expected));
+      if (!isExpected) {
+        results.networkErrors.push(`${response.request().method()} ${response.url()} - HTTP ${response.status()}`);
+      }
+    }
+  });
+
+  return results;
+}
+
+/**
+ * Expect that EXACTLY ONE toast message occurred
+ * @param context Test context containing page and monitoring
+ * @param statusOrMessage The expected HTTP status code (e.g., 400, 403, 409) or just the message
+ * @param expectedMessage The expected toast message text (can be partial match) - optional if first param is the message
+ * @param options Options for assertion behavior:
+ *   - expectNetworkError: Whether to expect network error (default: true)
+ */
+export async function expectToastMessage(
+  context: TestContext,
+  statusOrMessage: string | number,
+  expectedMessage?: string,
+  options: AssertToastOptions = { expectNetworkError: true }
+): Promise<void> {
+  const { page } = context;
+  const toastRegionSelector = '[role="region"]';
+  const timeoutMs = 3000;
+
+  // Determine if we have status + message or just message
+  const hasStatus = expectedMessage !== undefined;
+  const status = hasStatus ? statusOrMessage : undefined;
+  const message = hasStatus ? expectedMessage : String(statusOrMessage);
+
+  // Wait for and validate toast message
+  const toastLocator = page
+    .locator(`${toastRegionSelector} div[class*="whitespace-pre-line"]:has-text("${message}")`)
+    .first();
+  
+  try {
+    await toastLocator.waitFor({ timeout: timeoutMs });
+  } catch (error) {
+    // If expected toast wasn't found, provide helpful error with actual toasts
+    const actualToasts = await checkUnexpectedToasts(context);
+    const totalToastCount = await page.locator(`${toastRegionSelector} > div`).count();
+    
+    throw new Error(
+      `Expected toast with message "${message}" not found within ${timeoutMs}ms.
+Found ${totalToastCount} toast(s) total.
+Actual toasts: ${actualToasts.length > 0 ? actualToasts.map((t) => `"${t}"`).join(", ") : "None"}
+
+💡 Solutions:
+  • If this toast should appear, check the application logic
+  • If the message is different, update the expected message
+  • If no toast should appear, remove this assertion
+
+Original error: ${error}`
+    );
+  }
+
+  // Check for multiple toasts
+  const allToasts = await checkUnexpectedToasts(context, message);
+  if (allToasts.length > 0) {
+    const totalToastCount = await page.locator(`${toastRegionSelector} > div`).count();
+    throw new Error(
+      `Expected exactly 1 toast with message "${message}", but found ${totalToastCount} toasts total.
+Expected: 1, Unexpected: ${allToasts.length}
+Unexpected toasts: ${allToasts.map((t) => `"${t}"`).join(", ")}
+Ensure tests assert all expected toasts or fix the root cause.`
+    );
+  }
+
+  // Close the toast
+  try {
+    const toastContainer = page.locator(`${toastRegionSelector} > div`).filter({ hasText: message }).last();
+    const closeButton = toastContainer.locator('button[aria-label="Close"]').first();
+    if (await closeButton.isVisible()) {
+      await closeButton.click();
+    }
+  } catch {
+    // Toast might have auto-dismissed, which is fine
+  }
+
+  if (hasStatus && options.expectNetworkError && typeof status === "number") {
+    // Only look for network errors if it's actually an error status code (4xx, 5xx)
+    if (status >= 400) {
+      // Clean up the network error immediately
+      await expectNetworkErrors(context, [status]);
+    }
+  }
+}
+
+/**
+ * Expect that a validation error message is visible on the page and automatically clean up 400 network errors
+ * @param context Test context containing page and monitoring
+ * @param expectedMessage The expected validation error message text (can be partial match)
+ */
+export async function expectValidationError(context: TestContext, expectedMessage: string): Promise<void> {
+  const { monitoring, page } = context;
+  const timeoutMs = 3000;
+
+  // Wait for validation error to appear on the page
+  try {
+    const validationErrorLocator = page.getByText(expectedMessage).first();
+    await validationErrorLocator.waitFor({ timeout: timeoutMs });
+    await expect(validationErrorLocator).toBeVisible();
+  } catch (error) {
+    throw new Error(
+      `Expected validation error message containing "${expectedMessage}" not found within ${timeoutMs}ms. Error: ${error}`
+    );
+  }
+
+  // Automatically clean up any 400 network errors (if they exist)
+  const http400Error = "HTTP 400";
+  const matchingNetworkErrors = monitoring.networkErrors.filter((error) => error.includes(http400Error));
+
+  if (matchingNetworkErrors.length > 0) {
+    const errorIndex = monitoring.networkErrors.findIndex((error) => error.includes(http400Error));
+    monitoring.networkErrors.splice(errorIndex, 1);
+
+    const consoleErrorMessage = "Failed to load resource: the server responded with a status of 400";
+    const consoleIndex = monitoring.consoleMessages.findIndex((msg) => msg.text().includes(consoleErrorMessage));
+    if (consoleIndex !== -1) {
+      monitoring.consoleMessages.splice(consoleIndex, 1);
+    }
+  }
+}
+
+/**
+ * Expect that specific network errors occurred and remove them from monitoring
+ * @param context Test context containing page and monitoring
+ * @param expectedStatusCodes Array of expected HTTP status codes (e.g., [401, 403])
+ */
+export async function expectNetworkErrors(context: TestContext, expectedStatusCodes: number[]): Promise<void> {
+  const { monitoring } = context;
+
+  for (const statusCode of expectedStatusCodes) {
+    const expectedNetworkError = `HTTP ${statusCode}`;
+
+    // Find matching network errors
+    const matchingErrors = monitoring.networkErrors.filter((error) => error.includes(expectedNetworkError));
+
+    if (matchingErrors.length === 0) {
+      throw new Error(
+        `Expected network error "${expectedNetworkError}" not found. Actual errors: [${monitoring.networkErrors.join(", ")}]`
+      );
+    }
+
+    // Remove all matching network errors for this status code
+    for (let i = monitoring.networkErrors.length - 1; i >= 0; i--) {
+      if (monitoring.networkErrors[i].includes(expectedNetworkError)) {
+        monitoring.networkErrors.splice(i, 1);
+      }
+    }
+
+    // Also remove corresponding console error messages for this HTTP status
+    const consoleErrorMessage = `Failed to load resource: the server responded with a status of ${statusCode}`;
+    for (let i = monitoring.consoleMessages.length - 1; i >= 0; i--) {
+      if (monitoring.consoleMessages[i].text().includes(consoleErrorMessage)) {
+        monitoring.consoleMessages.splice(i, 1);
+      }
+    }
+  }
+}
+
+/**
+ * Assert that ALL queues are completely empty - no unexpected errors or console messages
+ * @param context Test context containing page and monitoring
+ */
+export async function assertNoUnexpectedErrors(context: TestContext): Promise<void> {
+  const monitoring = context.monitoring;
+
+  // No polling interval cleanup needed anymore
+
+  // Clean up expected network errors and tracking errors
+  cleanupExpectedNetworkErrors(monitoring);
+
+  // Check for any remaining unexpected issues
+  const hasUnexpectedNetworkErrors = monitoring.networkErrors.length > 0;
+
+  // Check for unexpected toasts using our new silent checking function
+  const unexpectedToasts = await checkUnexpectedToasts(context);
+  const hasUnexpectedToasts = unexpectedToasts.length > 0;
+
+  // If we have any unexpected issues, throw a helpful error message
+  if (hasUnexpectedNetworkErrors || hasUnexpectedToasts) {
+    const errorMessage = buildUnexpectedErrorsMessage(monitoring.networkErrors, unexpectedToasts);
+    throw new Error(errorMessage);
+  }
+}
+
+/**
+ * Remove expected network errors from monitoring results
+ */
+function cleanupExpectedNetworkErrors(monitoring: MonitoringResults): void {
+  if (monitoring.expectedStatusCodes.length === 0) {
+    return;
+  }
+
+  for (const expectedStatusCode of monitoring.expectedStatusCodes) {
+    const expectedNetworkError = `HTTP ${expectedStatusCode}`;
+    const networkErrors = monitoring.networkErrors.filter((error) => error.includes(expectedNetworkError));
+
+    // Remove all matching network errors (Firefox may create multiple)
+    for (const error of networkErrors) {
+      const index = monitoring.networkErrors.indexOf(error);
+      if (index !== -1) {
+        monitoring.networkErrors.splice(index, 1);
+      }
+    }
+  }
+}
+
+/**
+ * Build a comprehensive error message for unexpected issues
+ */
+function buildUnexpectedErrorsMessage(networkErrors: string[], unassertedToasts: string[]): string {
+  const errorParts: string[] = [];
+
+  errorParts.push("🎭 Test completed successfully, BUT unexpected issues were detected:");
+  errorParts.push(""); // Empty line for readability
+
+  if (networkErrors.length > 0) {
+    errorParts.push("❌ UNEXPECTED NETWORK ERRORS:");
+    networkErrors.forEach((error) => {
+      errorParts.push(`   ${error}`);
+    });
+    errorParts.push("");
+    errorParts.push("💡 Solutions:");
+    errorParts.push("   • If this error is expected, use: expectNetworkErrors(context, [statusCode])");
+    errorParts.push("   • If this is a bug, fix the root cause in the application");
+    errorParts.push("");
+  }
+
+  if (unassertedToasts.length > 0) {
+    errorParts.push("🍞 UNEXPECTED TOAST MESSAGES:");
+    unassertedToasts.forEach((toast) => {
+      errorParts.push(`   "${toast}"`);
+    });
+    errorParts.push("");
+    errorParts.push("💡 Solutions:");
+    errorParts.push('   • If this toast is expected, use: expectToastMessage(context, "message")');
+    errorParts.push("   • If this toast shouldn't appear, fix the root cause in the application");
+    errorParts.push("");
+  }
+
+  return errorParts.join("\n");
+}
+
+/**
+ * Silently check for unexpected toasts without adding to trace
+ * This runs after each step to verify no unexpected toasts appeared
+ * @param context Test context containing page and monitoring
+ * @param expectedMessage Optional message to exclude from unexpected list (currently being asserted)
+ * @returns Array of unexpected toast messages found
+ */
+export async function checkUnexpectedToasts(context: TestContext, expectedMessage?: string): Promise<string[]> {
+  const { page } = context;
+  const unexpectedToasts: string[] = [];
+
+  try {
+    const toastRegionSelector = '[role="region"]';
+
+    // Quick non-blocking check - don't wait if no toasts exist
+    const toastRegions = page.locator(toastRegionSelector);
+    const regionCount = await toastRegions.count();
+
+    if (regionCount === 0) {
+      // DEBUG: If no role="region" found, let's look for other potential toast selectors
+      const debugToasts = await page.evaluate(() => {
+        const toasts = [];
+        
+        // Look for ANY element that might contain toast text patterns
+        document.querySelectorAll('*').forEach(el => {
+          const text = el.textContent?.trim();
+          if (text && text.length > 0) {
+            // Check for success/deletion patterns
+            if (text.includes('deleted successfully') || 
+                text.includes('User deleted') ||
+                text.includes('Success') ||
+                (text.includes('success') && text.includes('delete'))) {
+              
+              // Make sure element is visible
+              const rect = el.getBoundingClientRect();
+              if (rect.width > 0 && rect.height > 0) {
+                toasts.push(text);
+              }
+            }
+          }
+        });
+        
+        // Also specifically look for common toast class patterns
+        document.querySelectorAll('[class*="toast"], [class*="success"], [class*="notification"], [data-testid*="toast"], [role="status"], [role="alert"]').forEach(el => {
+          const text = el.textContent?.trim();
+          if (text && text.length > 0) {
+            const rect = el.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+              toasts.push(text);
+            }
+          }
+        });
+        
+        return toasts;
+      });
+      
+      // If we found potential toasts with alternative selectors, add them
+      if (debugToasts.length > 0) {
+        debugToasts.forEach(toast => {
+          if (!expectedMessage || !toast.includes(expectedMessage)) {
+            unexpectedToasts.push(toast);
+          }
+        });
+      }
+      
+      return unexpectedToasts;
+    }
+
+    // Get all current toast messages
+    const toastElements = await page.locator(`${toastRegionSelector} > div`).all();
+
+    for (const toastElement of toastElements) {
+      try {
+        const descriptionElement = toastElement.locator('div[class*="whitespace-pre-line"]').first();
+        const descriptionText = await descriptionElement.textContent();
+
+        if (descriptionText?.trim()) {
+          const toastMessage = descriptionText.trim();
+          // Exclude the currently expected message
+          if (!expectedMessage || !toastMessage.includes(expectedMessage)) {
+            unexpectedToasts.push(toastMessage);
+          }
+        }
+      } catch {
+        // Element might have been removed, continue
+      }
+    }
+  } catch {
+    // No toasts found or error accessing them
+  }
+
+  return unexpectedToasts;
+}
+
+/**
+ * Blur the currently focused element to ensure input values are committed
+ *
+ * This is a workaround for a Playwright issue where WebKit and Firefox don't properly
+ * register input values when a form is submitted immediately after filling an input.
+ * Without blurring the input first, these browsers may submit empty or stale values.
+ *
+ * This issue doesn't occur in real browsers, only in Playwright's automation.
+ *
+ * @param page The Playwright page instance
+ */
+export async function blurActiveElement(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const element = (globalThis as { document?: { activeElement?: { blur?: () => void } } }).document?.activeElement;
+    if (element?.blur) {
+      element.blur();
+    }
+  });
+}
diff --git a/application/shared-webapp/tests/e2e/utils/test-data.ts b/application/shared-webapp/tests/e2e/utils/test-data.ts
new file mode 100644
index 000000000..b70646fe6
--- /dev/null
+++ b/application/shared-webapp/tests/e2e/utils/test-data.ts
@@ -0,0 +1,130 @@
+import { faker } from "@faker-js/faker";
+import type { Page} from "@playwright/test";
+import { isLocalhost } from "./constants";
+import type { TestContext } from "./test-assertions";
+import { expectToastMessage } from "./test-assertions";
+
+/**
+ * Generate a unique email with timestamp to ensure uniqueness
+ * @param domain Optional domain, defaults to 'platformplatform.net'
+ * @returns Unique email address
+ */
+export function uniqueEmail(domain = "localhost.local"): string {
+  const timestamp = Date.now();
+  const username = faker.internet.userName().toLowerCase();
+  return `${username}.${timestamp}@${domain}`;
+}
+
+
+/**
+ * Generate a random first name
+ * @returns Random first name
+ */
+export function firstName(): string {
+  return faker.person.firstName();
+}
+
+/**
+ * Generate a random last name
+ * @returns Random last name
+ */
+export function lastName(): string {
+  return faker.person.lastName();
+}
+
+
+/**
+ * Generate a random job title
+ * @returns Random job title
+ */
+export function jobTitle(): string {
+  return faker.person.jobTitle();
+}
+
+/**
+ * Generate a random company name
+ * @returns Random company name
+ */
+export function companyName(): string {
+  return faker.company.name();
+}
+
+/**
+ * Get the correct verification code for the current environment
+ * @returns "UNLOCK" for local development, or instructions for CI
+ */
+export function getVerificationCode(): string {
+  // For local development, always use "UNLOCK"
+  if (isLocalhost()) {
+    return "UNLOCK";
+  }
+
+  // For CI/CD environments, we'll need to implement email checking
+  // For now, throw an error to remind us to implement this
+  throw new Error("CI/CD verification code retrieval not yet implemented. Need to check email service.");
+}
+
+/**
+ * Generate test user data
+ * @returns Complete user data object
+ */
+export function testUser() {
+  const first = firstName();
+  const last = lastName();
+  const timestamp = Date.now();
+  const email = `${first.toLowerCase()}.${last.toLowerCase()}.${timestamp}@platformplatform.net`;
+
+  return {
+    email,
+    firstName: first,
+    lastName: last,
+    fullName: `${first} ${last}`,
+    jobTitle: jobTitle(),
+    company: companyName()
+  };
+}
+
+/**
+ * Complete the full signup flow for a user
+ * @param page Playwright page instance
+ * @param expect Playwright expect function
+ * @param user User data object with email, firstName, lastName
+ * @param keepUserLoggedIn Whether to keep the user logged in after signup (default: true)
+ * @param context Test context for asserting toasts
+ * @returns Promise that resolves when signup is complete
+ */
+export async function completeSignupFlow(
+  page: Page,
+  expect: typeof import("@playwright/test").expect,
+  user: { email: string; firstName: string; lastName: string },
+  context: TestContext,
+  keepUserLoggedIn = true
+): Promise<void> {
+  // Step 1: Navigate directly to signup page
+  await page.goto("/signup");
+  await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+
+  // Step 2: Enter email and submit
+  await page.getByRole("textbox", { name: "Email" }).fill(user.email);
+  await page.getByRole("button", { name: "Create your account" }).click();
+  await expect(page).toHaveURL("/signup/verify");
+
+  // Step 3: Enter verification code
+  await page.keyboard.type(getVerificationCode()); // The verification code auto submits
+
+  // Step 4: Complete profile setup and verify successful save
+  await page.getByRole("textbox", { name: "First name" }).fill(user.firstName);
+  await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName);
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expectToastMessage(context, "Success", "Profile updated successfully");
+
+  // Step 5: Wait for successful completion
+  await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible();
+
+  // Step 6: Logout if requested (useful for login flow tests)
+  if (!keepUserLoggedIn) {
+    await page.getByRole("button", { name: "User profile menu" }).click();
+    await page.getByRole("menuitem", { name: "Log out" }).click();
+    await expect(page).toHaveURL("/login?returnPath=%2Fadmin");
+  }
+}
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
new file mode 100644
index 000000000..caa4b198d
--- /dev/null
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -0,0 +1,133 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useSideMenuLayout } from "../hooks/useSideMenuLayout";
+import { MEDIA_QUERIES } from "../utils/responsive";
+
+type AppLayoutVariant = "full" | "center";
+
+type AppLayoutProps = {
+  children: React.ReactNode;
+  topMenu: React.ReactNode;
+  variant?: AppLayoutVariant;
+  maxWidth?: string;
+};
+
+/**
+ * AppLayout provides the fixed layout structure for applications with a side menu.
+ * - Fixed TopMenu that doesn't scroll with content
+ * - Scrollable content area that respects the side menu width
+ * - Proper margin adjustments based on side menu state
+ *
+ * Variants:
+ * - full: Content takes full width with standard padding
+ * - center: Content is always centered with configurable max width (default: 640px). When SideMenu is expanded on large screens, content is shifted 50px left for better visual balance.
+ */
+export function AppLayout({ children, topMenu, variant = "full", maxWidth = "640px" }: Readonly<AppLayoutProps>) {
+  const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout();
+
+  const [isLargeScreen, setIsLargeScreen] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false
+  );
+  const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(() => {
+    if (typeof window === "undefined") {
+      return true;
+    }
+    // Check if we're on large screen
+    const isLarge = window.matchMedia(MEDIA_QUERIES.xl).matches;
+    if (!isLarge) {
+      return true; // Always collapsed on smaller screens
+    }
+
+    const stored = localStorage.getItem("side-menu-collapsed");
+    return stored === "true";
+  });
+
+  // Listen for screen size changes
+  useEffect(() => {
+    const xlQuery = window.matchMedia(MEDIA_QUERIES.xl);
+    const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches);
+
+    xlQuery.addEventListener("change", handleXlChange);
+    return () => xlQuery.removeEventListener("change", handleXlChange);
+  }, []);
+
+  // Listen for side menu toggle events
+  useEffect(() => {
+    const handleMenuToggle = (event: CustomEvent) => {
+      if (isLargeScreen) {
+        setIsSideMenuCollapsed(event.detail.isCollapsed);
+      }
+    };
+
+    window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener);
+    return () => window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener);
+  }, [isLargeScreen]);
+
+  // Update side menu state when screen size changes
+  useEffect(() => {
+    if (!isLargeScreen) {
+      setIsSideMenuCollapsed(true);
+    } else {
+      const stored = localStorage.getItem("side-menu-collapsed");
+      setIsSideMenuCollapsed(stored === "true");
+    }
+  }, [isLargeScreen]);
+
+  // Prevent body scroll when overlay is open
+  useEffect(() => {
+    if (isOverlayOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOverlayOpen]);
+
+  return (
+    <div
+      className={`${className} flex h-screen flex-col`}
+      style={style}
+      // Prevent interaction with content when overlay is open, but not with the menu
+      {...(isOverlayOpen && ({ inert: "" } as unknown as React.HTMLAttributes<HTMLDivElement>))}
+    >
+      {/* Fixed TopMenu with blur effect */}
+      <div
+        className={`fixed top-0 right-0 left-0 z-30 bg-background/95 px-4 py-3 backdrop-blur-sm ${
+          isMobileMenuOpen ? "hidden" : ""
+        }`}
+        style={{ marginLeft: style.marginLeft }}
+      >
+        {topMenu}
+      </div>
+      {/* Soft gradient fade below TopMenu */}
+      <div
+        className={`pointer-events-none fixed inset-x-0 top-[60px] z-30 h-4 bg-gradient-to-b from-background/30 to-transparent ${
+          isMobileMenuOpen ? "hidden" : ""
+        }`}
+        style={{ marginLeft: style.marginLeft }}
+      />
+
+      {/* Scrollable content area with bounce */}
+      <div className="flex h-full min-h-[600px] w-full flex-1 flex-col px-4 pt-4 sm:pt-24">
+        {variant === "center" ? (
+          <div className="flex w-full flex-col items-center">
+            <div
+              className="w-full"
+              style={{
+                maxWidth,
+                transform: isLargeScreen && !isSideMenuCollapsed ? "translateX(-50px)" : "translateX(0)"
+              }}
+            >
+              {children}
+            </div>
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/application/shared-webapp/ui/components/Button.tsx b/application/shared-webapp/ui/components/Button.tsx
index c0c010098..af9e3af73 100644
--- a/application/shared-webapp/ui/components/Button.tsx
+++ b/application/shared-webapp/ui/components/Button.tsx
@@ -29,8 +29,8 @@ const button = tv({
       secondary: "bg-secondary pressed:bg-secondary/70 text-secondary-foreground hover:bg-secondary/80",
       destructive: "bg-destructive pressed:bg-destructive/80 text-destructive-foreground hover:bg-destructive/90",
       outline:
-        "border border-input pressed:bg-accent/80 text-accent-foreground hover:bg-accent hover:text-accent-foreground/90",
-      ghost: "pressed:bg-accent/80 text-accent-foreground hover:bg-accent hover:text-accent-foreground/90",
+        "border border-input pressed:bg-accent/80 text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90",
+      ghost: "pressed:bg-accent/80 text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90",
       link: "pressed:text-primary/80 text-primary underline-offset-4 hover:underline"
     },
     size: {
diff --git a/application/shared-webapp/ui/components/Checkbox.tsx b/application/shared-webapp/ui/components/Checkbox.tsx
index a28a2a576..c61420d7b 100644
--- a/application/shared-webapp/ui/components/Checkbox.tsx
+++ b/application/shared-webapp/ui/components/Checkbox.tsx
@@ -52,7 +52,7 @@ const boxStyles = tv({
   base: "flex h-full w-full flex-shrink-0 items-center justify-center rounded border transition",
   variants: {
     isSelected: {
-      false: "border-[--color] bg-background [--color:theme(colors.foreground)] group-pressed:opacity-90",
+      false: "border-[--color] bg-input-background [--color:theme(colors.foreground)] group-pressed:opacity-90",
       true: "border-[--color] bg-[--color] text-primary-foreground [--color:theme(colors.primary.DEFAULT)] group-pressed:group-pressed:opacity-90"
     },
     isInvalid: {
diff --git a/application/shared-webapp/ui/components/ComboBox.tsx b/application/shared-webapp/ui/components/ComboBox.tsx
index 17e185e5e..407dd36c1 100644
--- a/application/shared-webapp/ui/components/ComboBox.tsx
+++ b/application/shared-webapp/ui/components/ComboBox.tsx
@@ -50,7 +50,7 @@ export function ComboBox<T extends object>({
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="w-[--trigger-width]" isOpen={isOpen}>
+      <Popover className="w-[--trigger-width] bg-input-background" isOpen={isOpen}>
         <ListBox
           items={items}
           className="max-h-[inherit] overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_.75rem)]"
diff --git a/application/shared-webapp/ui/components/DatePicker.tsx b/application/shared-webapp/ui/components/DatePicker.tsx
index 2a37af0a5..484c78a02 100644
--- a/application/shared-webapp/ui/components/DatePicker.tsx
+++ b/application/shared-webapp/ui/components/DatePicker.tsx
@@ -35,7 +35,7 @@ export function DatePicker<T extends DateValue>({
   return (
     <AriaDatePicker {...props} className={composeTailwindRenderProps(props.className, "group flex flex-col gap-1")}>
       {label && <Label>{label}</Label>}
-      <FieldGroup className="w-auto min-w-[208px]">
+      <FieldGroup className="w-auto min-w-[208px] bg-input-background">
         <DateInput className="min-w-[150px] flex-1 px-2 py-1.5 text-sm" />
         <Button variant="icon" className="mr-1 h-6 w-6 rounded-sm outline-offset-0">
           <CalendarIcon aria-hidden={true} className="h-4 w-4" />
@@ -43,7 +43,7 @@ export function DatePicker<T extends DateValue>({
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover>
+      <Popover className="bg-input-background">
         <Dialog>
           <Calendar />
         </Dialog>
diff --git a/application/shared-webapp/ui/components/DateRangePicker.tsx b/application/shared-webapp/ui/components/DateRangePicker.tsx
index 4be18c119..7987fc8f5 100644
--- a/application/shared-webapp/ui/components/DateRangePicker.tsx
+++ b/application/shared-webapp/ui/components/DateRangePicker.tsx
@@ -2,6 +2,7 @@
  * ref: https://react-spectrum.adobe.com/react-aria-tailwind-starter/index.html?path=/docs/daterangepicker--docs
  */
 import { CalendarIcon, XIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import {
   DateRangePicker as AriaDateRangePicker,
@@ -24,6 +25,7 @@ export interface DateRangePickerProps<T extends DateValue> extends AriaDateRange
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
 }
 
 export function DateRangePicker<T extends DateValue>({
@@ -32,34 +34,93 @@ export function DateRangePicker<T extends DateValue>({
   errorMessage,
   value,
   onChange,
+  placeholder = "Select dates",
   ...props
 }: Readonly<DateRangePickerProps<T>>) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasValue = value !== null && value !== undefined;
+
+  // Automatically expand when there's a value
+  useEffect(() => {
+    if (hasValue) {
+      setIsExpanded(true);
+    }
+  }, [hasValue]);
+
+  // Format date range for compact display
+  const formatDateRange = () => {
+    if (!value) {
+      return "";
+    }
+
+    const formatDate = (date: DateValue) => {
+      return date.toString().split("T")[0];
+    };
+
+    return `${formatDate(value.start)} - ${formatDate(value.end)}`;
+  };
+
+  // Clear the date range
+  const clearDateRange = (e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+    onChange?.(null);
+    setIsExpanded(false);
+  };
+
   return (
     <AriaDateRangePicker
       {...props}
       value={value}
-      onChange={onChange}
+      onChange={(newValue) => {
+        onChange?.(newValue);
+        // Keep expanded if a value is selected
+        if (!newValue) {
+          setIsExpanded(false);
+        }
+      }}
       className={composeTailwindRenderProps(props.className, "group flex flex-col gap-1")}
     >
       {label && <Label>{label}</Label>}
-      <FieldGroup className="w-auto min-w-[208px]">
-        <DateInput slot="start" className="px-2 py-1.5 text-sm" />
-        <span
-          aria-hidden="true"
-          className="text-foreground group-disabled:text-muted forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]"
-        >
-          –
-        </span>
-        <DateInput slot="end" className="flex-1 px-2 py-1.5 text-sm" />
-        {value && (
-          <Button variant="icon" className="mr-1 w-6 group-empty:invisible" onPress={() => onChange?.(null)}>
-            <XIcon aria-hidden={true} className="h-4 w-4" />
+
+      {isExpanded ? (
+        // Expanded view - standard date range picker
+        <FieldGroup className="w-auto min-w-[208px]">
+          <DateInput slot="start" className="px-2 py-1.5 text-sm" />
+          <span
+            aria-hidden="true"
+            className="text-foreground group-disabled:text-muted forced-colors:text-[ButtonText] group-disabled:forced-colors:text-[GrayText]"
+          >
+            –
+          </span>
+          <DateInput slot="end" className="flex-1 px-2 py-1.5 text-sm" />
+          {value && (
+            <Button variant="icon" className="mr-1 w-6 group-empty:invisible" onPress={() => onChange?.(null)}>
+              <XIcon aria-hidden={true} className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="icon" className="h-6 w-6 rounded-sm outline-offset-0">
+            <CalendarIcon aria-hidden={true} className="h-4 w-4" />
           </Button>
-        )}
-        <Button variant="icon" className="h-6 w-6 rounded-sm outline-offset-0">
-          <CalendarIcon aria-hidden={true} className="h-4 w-4" />
+        </FieldGroup>
+      ) : (
+        // Compact view - just a button with calendar icon
+        <Button
+          variant="outline"
+          className={`flex h-10 items-center justify-between gap-2 border border-input bg-input-background px-3 py-2 text-foreground hover:bg-accent hover:text-accent-foreground ${
+            hasValue ? "w-full min-w-[240px]" : "w-full min-w-[180px]"
+          }`}
+          onPress={() => setIsExpanded(true)}
+        >
+          <div className="flex items-center gap-2 truncate">
+            <CalendarIcon className="h-5 w-5 flex-shrink-0" />
+            <span className="truncate text-sm">{hasValue ? formatDateRange() : placeholder}</span>
+          </div>
+          {hasValue && <XIcon className="h-5 w-5 flex-shrink-0 cursor-pointer" onClick={clearDateRange} />}
         </Button>
-      </FieldGroup>
+      )}
+
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
       <Popover>
diff --git a/application/shared-webapp/ui/components/Dialog.tsx b/application/shared-webapp/ui/components/Dialog.tsx
index 0c682d899..f26e35a8a 100644
--- a/application/shared-webapp/ui/components/Dialog.tsx
+++ b/application/shared-webapp/ui/components/Dialog.tsx
@@ -1,6 +1,3 @@
-/**
- * ref: https://react-spectrum.adobe.com/react-aria-tailwind-starter/?path=/docs/alertdialog--docs
- */
 import { Dialog as AriaDialog, type DialogProps } from "react-aria-components";
 import { twMerge } from "tailwind-merge";
 
@@ -11,7 +8,7 @@ export function Dialog(props: Readonly<DialogProps>) {
     <AriaDialog
       {...props}
       className={twMerge(
-        "relative max-h-[inherit] overflow-auto p-11 outline outline-0 [[data-placement]>&]:p-4",
+        "relative max-h-full min-h-0 overflow-y-auto overscroll-contain p-4 outline outline-0 sm:p-11 [[data-placement]>&]:p-4",
         props.className
       )}
     />
diff --git a/application/shared-webapp/ui/components/Digit.tsx b/application/shared-webapp/ui/components/Digit.tsx
index b749f0877..b6f095e38 100644
--- a/application/shared-webapp/ui/components/Digit.tsx
+++ b/application/shared-webapp/ui/components/Digit.tsx
@@ -5,7 +5,7 @@ import { focusRing } from "./focusRing";
 
 const digitStyles = tv({
   extend: focusRing,
-  base: "h-14 w-10 rounded-md border border-input bg-transparent text-center text-input-foreground"
+  base: "h-14 w-10 rounded-md border border-input bg-input-background text-center text-input-foreground"
 });
 
 export enum DigitPattern {
diff --git a/application/shared-webapp/ui/components/Dropdown.tsx b/application/shared-webapp/ui/components/Dropdown.tsx
index 6fe9b6a47..b89fa3b51 100644
--- a/application/shared-webapp/ui/components/Dropdown.tsx
+++ b/application/shared-webapp/ui/components/Dropdown.tsx
@@ -14,14 +14,17 @@ import {
 import { tv } from "tailwind-variants";
 
 export const dropdownItemStyles = tv({
-  base: "group flex cursor-default select-none items-center gap-4 rounded-md py-2 pr-1 pl-3 text-sm outline outline-0 forced-color-adjust-none",
+  base: "group flex cursor-default select-none items-center gap-4 rounded-md bg-input-background py-2 pr-1 pl-3 text-sm outline outline-0 forced-color-adjust-none hover:bg-hover-background",
   variants: {
     isDisabled: {
       false: "text-foreground",
       true: "text-accent forced-colors:text-[GrayText]"
     },
     isFocused: {
-      true: "bg-accent text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+      true: "bg-hover-background text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+    },
+    isSelected: {
+      true: "bg-active-background hover:bg-selected-hover-background"
     }
   },
   compoundVariants: [
diff --git a/application/shared-webapp/ui/components/Field.tsx b/application/shared-webapp/ui/components/Field.tsx
index 7fec79a95..78b8df3ef 100644
--- a/application/shared-webapp/ui/components/Field.tsx
+++ b/application/shared-webapp/ui/components/Field.tsx
@@ -22,7 +22,7 @@ export const fieldBorderStyles = tv({
 
 export const fieldGroupStyles = tv({
   extend: focusRing,
-  base: "group flex h-10 items-center overflow-hidden rounded-md border bg-background forced-colors:bg-[Field]",
+  base: "group flex h-10 items-center overflow-hidden rounded-md border bg-input-background forced-colors:bg-[Field]",
   variants: fieldBorderStyles.variants
 });
 
diff --git a/application/shared-webapp/ui/components/Input.tsx b/application/shared-webapp/ui/components/Input.tsx
index 2203024cf..7ef491af3 100644
--- a/application/shared-webapp/ui/components/Input.tsx
+++ b/application/shared-webapp/ui/components/Input.tsx
@@ -10,12 +10,14 @@ import { focusRing } from "./focusRing";
 
 export interface InputProps extends Omit<AriaInputProps, "disabled">, React.RefAttributes<HTMLInputElement> {
   isDisabled?: boolean;
+  isReadOnly?: boolean;
   isEmbedded?: boolean;
+  startIcon?: React.ReactNode;
 }
 
 const inputStyles = tv({
   extend: focusRing,
-  base: "h-10 shrink-0 rounded-md border bg-background px-2 py-1.5 text-foreground text-sm placeholder:text-muted-foreground",
+  base: "h-10 w-full shrink-0 rounded-md border bg-input-background px-2 py-1.5 text-foreground text-sm placeholder:text-muted-foreground",
   variants: {
     isInvalid: {
       true: "border-destructive"
@@ -23,31 +25,57 @@ const inputStyles = tv({
     isDisabled: {
       true: "cursor-not-allowed opacity-50"
     },
+    isReadOnly: {
+      true: "cursor-default opacity-50"
+    },
     isFile: {
       true: "cursor-pointer file:cursor-pointer file:border-0 file:bg-transparent file:font-medium file:text-sm"
     },
     isEmbedded: {
       true: "border-0 border-muted bg-transparent"
+    },
+    hasStartIcon: {
+      true: "pl-9"
     }
   }
 });
 
-export function Input({ className, type, isEmbedded, isDisabled, ...props }: Readonly<InputProps>) {
+export function Input({
+  className,
+  type,
+  isEmbedded,
+  isDisabled,
+  isReadOnly,
+  startIcon,
+  ...props
+}: Readonly<InputProps>) {
   return (
-    <AriaInput
-      {...props}
-      disabled={isDisabled}
-      type={type}
-      className={composeRenderProps(className, (className, { isFocusVisible, isDisabled, ...renderProps }) =>
-        inputStyles({
-          ...renderProps,
-          isFile: type === "file",
-          isFocusVisible: isEmbedded ? false : isFocusVisible,
-          isEmbedded,
-          isDisabled,
-          className
-        })
+    <div className="relative">
+      {startIcon && (
+        <div className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 flex items-center">
+          {startIcon}
+        </div>
       )}
-    />
+      <AriaInput
+        {...props}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        type={type}
+        className={composeRenderProps(
+          className,
+          (className, { isFocusVisible, isDisabled, ...renderProps }) =>
+            `${inputStyles({
+              ...renderProps,
+              isFile: type === "file",
+              isFocusVisible: isEmbedded ? false : isFocusVisible,
+              isEmbedded,
+              isDisabled,
+              isReadOnly,
+              hasStartIcon: !!startIcon,
+              className
+            })} ${isDisabled || isReadOnly ? "border-input" : ""}`
+        )}
+      />
+    </div>
   );
 }
diff --git a/application/shared-webapp/ui/components/ListBox.tsx b/application/shared-webapp/ui/components/ListBox.tsx
index 3c765ef8d..03602ed96 100644
--- a/application/shared-webapp/ui/components/ListBox.tsx
+++ b/application/shared-webapp/ui/components/ListBox.tsx
@@ -30,8 +30,8 @@ export const itemStyles = tv({
   base: "group relative flex cursor-default select-none items-center gap-8 rounded-md px-2.5 py-1.5 text-sm will-change-transform forced-color-adjust-none",
   variants: {
     isSelected: {
-      false: "bg-background pressed:bg-muted/90 hover:bg-muted",
-      true: "bg-muted/50 pressed:bg-muted/80 hover:bg-muted/90 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:outline-[HighlightText]"
+      false: "bg-background pressed:bg-active-background hover:bg-hover-background",
+      true: "bg-active-background pressed:bg-active-background hover:bg-selected-hover-background forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:outline-[HighlightText]"
     },
     isDisabled: {
       true: "text-muted-foreground/50 forced-colors:text-[GrayText]"
diff --git a/application/shared-webapp/ui/components/Menu.tsx b/application/shared-webapp/ui/components/Menu.tsx
index a7b8fb940..68ca920af 100644
--- a/application/shared-webapp/ui/components/Menu.tsx
+++ b/application/shared-webapp/ui/components/Menu.tsx
@@ -27,7 +27,7 @@ interface MenuProps<T> extends AriaMenuProps<T> {
 
 export function Menu<T extends object>(props: Readonly<MenuProps<T>>) {
   return (
-    <Popover placement={props.placement} className="min-w-[150px] p-px">
+    <Popover placement={props.placement} className="min-w-[150px] bg-input-background p-px">
       <AriaMenu {...props} className="max-h-[inherit] overflow-auto rounded-t-sm p-1 outline outline-0" />
     </Popover>
   );
diff --git a/application/shared-webapp/ui/components/Modal.tsx b/application/shared-webapp/ui/components/Modal.tsx
index fe252797c..dfca62963 100644
--- a/application/shared-webapp/ui/components/Modal.tsx
+++ b/application/shared-webapp/ui/components/Modal.tsx
@@ -6,7 +6,7 @@ import { Modal as AriaModal, ModalOverlay, type ModalOverlayProps } from "react-
 import { tv } from "tailwind-variants";
 
 const overlayStyles = tv({
-  base: "fixed top-0 left-0 isolate z-20 flex h-[--visual-viewport-height] w-full bg-black/[15%] text-center",
+  base: "fixed top-0 left-0 isolate flex h-[--visual-viewport-height] w-full bg-black/[15%] text-center",
   variants: {
     isEntering: {
       true: "fade-in animate-in duration-200 ease-out"
@@ -23,22 +23,27 @@ const overlayStyles = tv({
     },
     fullSize: {
       true: "",
-      false: "p-4"
+      false: "p-2 sm:p-4"
     },
     blur: {
       true: "backdrop-blur-lg",
       false: ""
+    },
+    zIndex: {
+      normal: "z-[100]",
+      high: "z-[300]"
     }
   },
   defaultVariants: {
     position: "center",
     fullSize: false,
-    blur: true
+    blur: true,
+    zIndex: "normal"
   }
 });
 
 const modalStyles = tv({
-  base: "w-full rounded-lg border border-border bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl sm:w-fit dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]",
+  base: "flex max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-lg border border-border bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl sm:w-fit dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]",
   variants: {
     isEntering: {
       true: "zoom-in-105 animate-in duration-200 ease-out"
@@ -53,11 +58,15 @@ type ModalProps = {
   position?: "center" | "top" | "left" | "right" | "bottom";
   fullSize?: boolean;
   blur?: boolean;
+  zIndex?: "normal" | "high";
 } & ModalOverlayProps;
 
-export function Modal({ position, fullSize, blur, ...props }: Readonly<ModalProps>) {
+export function Modal({ position, fullSize, blur, zIndex, ...props }: Readonly<ModalProps>) {
   return (
-    <ModalOverlay {...props} className={(renderProps) => overlayStyles({ position, fullSize, blur, ...renderProps })}>
+    <ModalOverlay
+      {...props}
+      className={(renderProps) => overlayStyles({ position, fullSize, blur, zIndex, ...renderProps })}
+    >
       <AriaModal {...props} className={modalStyles} />
     </ModalOverlay>
   );
diff --git a/application/shared-webapp/ui/components/OneTimeCodeInput.tsx b/application/shared-webapp/ui/components/OneTimeCodeInput.tsx
index 738493517..5b9b39a68 100644
--- a/application/shared-webapp/ui/components/OneTimeCodeInput.tsx
+++ b/application/shared-webapp/ui/components/OneTimeCodeInput.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useId, useMemo, useState } from "react";
+import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useState } from "react";
 import { Digit } from "./Digit";
 import type { DigitPattern } from "./Digit";
 
@@ -9,20 +9,25 @@ export interface OneTimeCodeInputProps {
   name?: string;
   autoFocus?: boolean;
   ariaLabel: string;
+  onValueChange?: (value: string, isComplete: boolean) => void;
 }
 
-export function OneTimeCodeInput({
-  digitPattern,
-  disabled,
-  length = 6,
-  name = "code",
-  autoFocus,
-  ariaLabel
-}: OneTimeCodeInputProps) {
+export interface OneTimeCodeInputRef {
+  reset: () => void;
+  focus: () => void;
+  getValue: () => string;
+  isComplete: () => boolean;
+}
+
+export const OneTimeCodeInput = forwardRef<OneTimeCodeInputRef, OneTimeCodeInputProps>(function OneTimeCodeInput(
+  { digitPattern, disabled, length = 6, name = "code", autoFocus, ariaLabel, onValueChange },
+  ref
+) {
   const [digits, setDigits] = useState<string[]>(new Array(length).fill(""));
   const id = useId();
   const digitRefs = useMemo(() => new Array(length).fill(id).map((id, i) => `${id}_${i}`), [id, length]);
   const inputValue = digits.join("");
+  const isComplete = inputValue.length === length;
 
   const setFocus = useCallback(
     (i: number) => {
@@ -42,19 +47,43 @@ export function OneTimeCodeInput({
     [digitRefs]
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      reset: () => {
+        setDigits(new Array(length).fill(""));
+        setFocus(0);
+      },
+      focus: () => {
+        setFocus(0);
+      },
+      getValue: () => inputValue,
+      isComplete: () => isComplete
+    }),
+    [inputValue, isComplete, length, setFocus]
+  );
+
   const onChangeHandler = (value: string, i: number): void => {
+    let newDigits: string[];
+
     if (value.length > 1) {
       // If the user pastes more than one digit
       const pastedDigits = value.substring(0, length).split("");
-      setDigits([...pastedDigits]);
+      newDigits = [...pastedDigits];
+      setDigits(newDigits);
       setFocus(pastedDigits.length);
-      return;
+    } else {
+      newDigits = [...digits];
+      newDigits[i] = value;
+      setDigits(newDigits);
+      const nextFocusIndex = value.length > 0 ? Math.min(digits.length, i + 1) : Math.max(0, i - 1);
+      setFocus(nextFocusIndex);
     }
-    const newDigits = [...digits];
-    newDigits[i] = value;
-    setDigits(newDigits);
-    const nextFocusIndex = value.length > 0 ? Math.min(digits.length, i + 1) : Math.max(0, i - 1);
-    setFocus(nextFocusIndex);
+
+    // Call onValueChange callback if provided
+    const newValue = newDigits.join("");
+    const newIsComplete = newValue.length === length;
+    onValueChange?.(newValue, newIsComplete);
   };
   return (
     <div className="flex flex-row gap-4" aria-label={ariaLabel}>
@@ -74,4 +103,4 @@ export function OneTimeCodeInput({
       <input type="hidden" name={name} value={inputValue} />
     </div>
   );
-}
+});
diff --git a/application/shared-webapp/ui/components/Popover.tsx b/application/shared-webapp/ui/components/Popover.tsx
index 8d3d48876..fdf3c9bee 100644
--- a/application/shared-webapp/ui/components/Popover.tsx
+++ b/application/shared-webapp/ui/components/Popover.tsx
@@ -19,7 +19,7 @@ export interface PopoverProps extends Omit<AriaPopoverProps, "children"> {
 }
 
 const styles = tv({
-  base: "rounded-lg border bg-popover text-popover-foreground shadow-lg backdrop-blur-2xl transition-opacity forced-colors:bg-[Canvas]",
+  base: "rounded-lg border bg-input-background text-popover-foreground shadow-lg backdrop-blur-2xl transition-opacity forced-colors:bg-[Canvas]",
   variants: {
     isEntering: {
       true: "fade-in-0 animate-in duration-200 ease-out"
diff --git a/application/shared-webapp/ui/components/SearchField.tsx b/application/shared-webapp/ui/components/SearchField.tsx
index 9191fec14..7224c1d0a 100644
--- a/application/shared-webapp/ui/components/SearchField.tsx
+++ b/application/shared-webapp/ui/components/SearchField.tsx
@@ -32,9 +32,13 @@ export function SearchField({ label, description, errorMessage, placeholder, ...
       <FieldGroup>
         <SearchIcon
           aria-hidden={true}
-          className="ml-2 h-4 w-4 text-muted-foreground group-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]"
+          className="ml-2 h-4 min-h-[16px] w-4 min-w-[16px] text-muted-foreground group-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]"
+        />
+        <Input
+          placeholder={placeholder}
+          isEmbedded={true}
+          className="bg-transparent [&::-webkit-search-cancel-button]:hidden"
         />
-        <Input placeholder={placeholder} isEmbedded={true} className="[&::-webkit-search-cancel-button]:hidden" />
         <Button variant="icon" className="mr-1 w-6 group-empty:invisible">
           <XIcon aria-hidden={true} className="h-4 w-4" />
         </Button>
diff --git a/application/shared-webapp/ui/components/Select.tsx b/application/shared-webapp/ui/components/Select.tsx
index 2d24ad94a..c5d114952 100644
--- a/application/shared-webapp/ui/components/Select.tsx
+++ b/application/shared-webapp/ui/components/Select.tsx
@@ -29,14 +29,14 @@ const buttonStyles = tv({
   extend: focusRing,
   base: [
     "flex h-10 w-full min-w-[150px] cursor-default items-center gap-4 py-2 pr-2 pl-3 text-start transition",
-    "rounded-md border border-border text-foreground"
+    "rounded-md border border-border bg-input-background text-foreground"
   ],
   variants: {
     isInvalid: {
       true: "border-destructive group-invalid:border-destructive forced-colors:group-invalid:border-[Mark]"
     },
     isDisabled: {
-      false: "pressed:bg-accent pressed:text-accent-foreground hover:bg-accent/90",
+      false: "pressed:bg-active-background pressed:text-accent-foreground hover:bg-hover-background",
       true: "opacity-50 forced-colors:border-[GrayText] forced-colors:text-[GrayText]"
     }
   }
@@ -75,7 +75,7 @@ export function Select<T extends object>({
       </Button>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="min-w-[--trigger-width]">
+      <Popover className="min-w-[--trigger-width] bg-input-background">
         <ListBox
           items={items}
           className="max-h-[inherit] overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_.75rem)]"
diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index e6e3c8520..5ce602718 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -1,35 +1,68 @@
 import type { Href } from "@react-types/shared";
-import { useRouter } from "@tanstack/react-router";
-import { ChevronsLeftIcon, type LucideIcon } from "lucide-react";
+import { type MakeRouteMatch, useRouter } from "@tanstack/react-router";
+import { ChevronsLeftIcon, type LucideIcon, Menu, X } from "lucide-react";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ToggleButton, composeRenderProps } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import { useLocalStorage } from "../hooks/useLocalStorage";
+import { useResponsiveMenu } from "../hooks/useResponsiveMenu";
 import logoMarkUrl from "../images/logo-mark.svg";
 import logoWrapUrl from "../images/logo-wrap.svg";
+import { MEDIA_QUERIES } from "../utils/responsive";
 import { Button } from "./Button";
-import { Dialog, DialogTrigger } from "./Dialog";
-import { Modal } from "./Modal";
 import { Tooltip, TooltipTrigger } from "./Tooltip";
+import { focusRing } from "./focusRing";
 
 const collapsedContext = createContext(false);
+export const overlayContext = createContext<{ isOpen: boolean; close: () => void } | null>(null);
+
+// Helper function to handle focus trap tab navigation
+const _handleFocusTrap = (e: KeyboardEvent, containerRef: React.RefObject<HTMLElement | null>) => {
+  if (e.key !== "Tab") {
+    return;
+  }
+
+  const focusableElements = containerRef.current?.querySelectorAll(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  );
+
+  if (!focusableElements || focusableElements.length === 0) {
+    return;
+  }
+
+  const firstElement = focusableElements[0] as HTMLElement;
+  const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+  if (e.shiftKey && document.activeElement === firstElement) {
+    e.preventDefault();
+    lastElement.focus();
+  } else if (!e.shiftKey && document.activeElement === lastElement) {
+    e.preventDefault();
+    firstElement.focus();
+  }
+};
 
 const menuButtonStyles = tv({
-  base: "flex w-full justify-start font-normal text-base transition-all duration-300",
+  extend: focusRing,
+  base: "menu-item relative flex h-11 w-full items-center justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base hover:bg-hover-background",
   variants: {
     isCollapsed: {
-      true: "gap-0 ease-out",
-      false: "gap-4 ease-in"
+      true: "",
+      false: ""
+    },
+    isActive: {
+      true: "text-foreground",
+      false: "text-muted-foreground hover:text-foreground"
     }
   }
 });
 
 const menuTextStyles = tv({
-  base: "text-start text-foreground transition-all duration-300",
+  base: "overflow-hidden whitespace-nowrap text-start",
   variants: {
     isCollapsed: {
-      true: "w-0 text-xs opacity-0 ease-out",
-      false: "w-fit text-base opacity-100 ease-in"
+      true: "max-w-0 opacity-0",
+      false: "max-w-[200px] opacity-100"
     }
   }
 });
@@ -57,11 +90,47 @@ export function MenuButton({
   forceReload = false
 }: Readonly<MenuButtonProps>) {
   const isCollapsed = useContext(collapsedContext);
-  const { navigate } = useRouter();
+  const overlayCtx = useContext(overlayContext);
+  const router = useRouter();
+  const { navigate } = router;
+
+  // Check if this menu item is active
+  const currentPath = router.state.location.pathname;
+  let targetPath: string;
+
+  if (typeof to === "string") {
+    targetPath = to;
+  } else {
+    try {
+      targetPath = router.buildLocation({ to: to as MakeRouteMatch }).pathname;
+    } catch {
+      // If buildLocation fails, fallback to string representation
+      targetPath = String(to);
+    }
+  }
+
+  // Normalize paths by removing trailing slashes
+  const normalizedCurrentPath = currentPath.replace(/\/$/, "") || "/";
+  const normalizedTargetPath = targetPath.replace(/\/$/, "") || "/";
+
+  // Check if current path matches the target path exactly
+  const isActive = normalizedCurrentPath === normalizedTargetPath;
+
   const onPress = () => {
     if (to == null) {
       return;
     }
+
+    // Auto-close overlay after navigation (including when clicking active menu item)
+    if (overlayCtx?.isOpen) {
+      overlayCtx.close();
+    }
+
+    // If clicking on the current active page, still close menu but don't navigate
+    if (isActive) {
+      return;
+    }
+
     if (forceReload) {
       window.location.href = to;
     } else {
@@ -69,53 +138,76 @@ export function MenuButton({
     }
   };
 
+  // Check if we're in the mobile menu context
+  const isMobileMenu =
+    typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.sm).matches && overlayCtx?.isOpen;
+
   return (
-    <TooltipTrigger delay={300}>
-      <Button variant="link" className={menuButtonStyles({ isCollapsed })} onPress={onPress} isDisabled={isDisabled}>
-        <Icon className="h-6 w-6 shrink-0 grow-0" />
-        <div className={menuTextStyles({ isCollapsed })}>{label}</div>
-      </Button>
-      {isCollapsed && <Tooltip placement="right">{label}</Tooltip>}
-    </TooltipTrigger>
+    <div className="relative">
+      {/* Active indicator bar - positioned outside button for proper visibility */}
+      {isActive && (
+        <div
+          className={`-translate-y-1/2 absolute top-1/2 h-8 w-1 bg-primary ${
+            isMobileMenu ? "-left-3" : isCollapsed ? "-left-2" : "-left-6"
+          }`}
+        />
+      )}
+      <TooltipTrigger delay={0}>
+        <ToggleButton
+          className={composeRenderProps("", (className, renderProps) =>
+            menuButtonStyles({
+              ...renderProps,
+              className,
+              isCollapsed,
+              isActive
+            })
+          )}
+          onPress={onPress}
+          isDisabled={isDisabled}
+        >
+          <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+            <Icon className={`h-5 w-5 ${isActive ? "stroke-foreground" : "stroke-current"}`} />
+          </div>
+          <div className={`${menuTextStyles({ isCollapsed })} ${isCollapsed ? "" : "ml-4"}`}>{label}</div>
+        </ToggleButton>
+        {isCollapsed && (
+          <Tooltip placement="right" offset={4}>
+            {label}
+          </Tooltip>
+        )}
+      </TooltipTrigger>
+    </div>
   );
 }
 
 const sideMenuStyles = tv({
-  base: "relative hidden shrink-0 grow-0 flex-col items-start py-4 pr-2 transition-all duration-300 sm:flex",
+  base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-[width] duration-100",
   variants: {
     isCollapsed: {
-      true: "w-[72px] gap-2 pl-2 ease-out",
-      false: "w-72 gap-4 pl-8 ease-in"
+      true: "mr-2 w-[72px]",
+      false: "mr-2 w-72"
+    },
+    overlayMode: {
+      true: "",
+      false: ""
+    },
+    isOverlayOpen: {
+      true: "shadow-2xl",
+      false: ""
+    },
+    isHidden: {
+      true: "hidden",
+      false: "flex"
     }
   }
 });
 
 const chevronStyles = tv({
-  base: "h-4 w-4 transition-all duration-300",
+  base: "h-4 w-4 transition-transform duration-100",
   variants: {
     isCollapsed: {
-      true: "rotate-180 transform ease-out",
-      false: "rotate-0 transform ease-in"
-    }
-  }
-});
-
-const logoWrapStyles = tv({
-  base: "self-start transition-all duration-300",
-  variants: {
-    isCollapsed: {
-      true: "h-8 opacity-0 ease-out",
-      false: "h-8 opacity-100 ease-in"
-    }
-  }
-});
-
-const logoMarkStyles = tv({
-  base: "self-start transition-all duration-300",
-  variants: {
-    isCollapsed: {
-      true: "h-8 opacity-100 ease-in",
-      false: "h-8 opacity-0 ease-out"
+      true: "rotate-180 transform",
+      false: "rotate-0 transform"
     }
   }
 });
@@ -123,69 +215,221 @@ const logoMarkStyles = tv({
 type SideMenuProps = {
   children: React.ReactNode;
   ariaLabel: string;
+  topMenuContent?: React.ReactNode;
 };
 
-export function SideMenu({ children, ariaLabel }: Readonly<SideMenuProps>) {
-  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>(
-    !window.matchMedia("(min-width: 1024px)").matches,
-    "side-menu-collapsed"
-  );
+export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly<SideMenuProps>) {
+  const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu();
+  const sideMenuRef = useRef<HTMLDivElement>(null);
+  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+
+  // Initialize collapsed state with synchronous check to prevent flicker
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window === "undefined") {
+      return true;
+    }
+
+    // Force collapsed on medium screens
+    if (forceCollapsed) {
+      return true;
+    }
+
+    // Check localStorage for large screens
+    try {
+      return localStorage.getItem("side-menu-collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  // Save the user's preference before being forced collapsed
+  const [userPreference, setUserPreference] = useState(() => {
+    try {
+      return localStorage.getItem("side-menu-collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  // Update collapsed state when screen size changes
+  useEffect(() => {
+    if (forceCollapsed) {
+      // Going to medium screen - force collapse but remember user preference
+      setIsCollapsed(true);
+    } else {
+      // Going back to large screen - restore user preference
+      setIsCollapsed(userPreference);
+    }
+  }, [forceCollapsed, userPreference]);
+
+  // The actual visual collapsed state
+  const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed;
 
-  const toggleCollapse = () => {
-    setIsCollapsed((v: boolean) => !v);
+  const toggleMenu = () => {
+    if (overlayMode) {
+      setIsOverlayOpen(!isOverlayOpen);
+      // Dispatch event for layout hook
+      window.dispatchEvent(
+        new CustomEvent("side-menu-overlay-toggle", {
+          detail: { isExpanded: !isOverlayOpen }
+        })
+      );
+    } else if (!forceCollapsed) {
+      const newCollapsed = !isCollapsed;
+      setIsCollapsed(newCollapsed);
+      setUserPreference(newCollapsed);
+      try {
+        localStorage.setItem("side-menu-collapsed", newCollapsed.toString());
+      } catch {}
+      // Dispatch event for layout hook
+      window.dispatchEvent(
+        new CustomEvent("side-menu-toggle", {
+          detail: { isCollapsed: newCollapsed }
+        })
+      );
+    }
   };
 
+  const closeOverlay = useCallback(() => {
+    if (overlayMode && isOverlayOpen) {
+      setIsOverlayOpen(false);
+      window.dispatchEvent(
+        new CustomEvent("side-menu-overlay-toggle", {
+          detail: { isExpanded: false }
+        })
+      );
+    }
+  }, [overlayMode, isOverlayOpen]);
+
+  // Handle click outside for overlay
+  useEffect(() => {
+    if (!overlayMode || !isOverlayOpen) {
+      return;
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (sideMenuRef.current && !sideMenuRef.current.contains(event.target as Node)) {
+        closeOverlay();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closeOverlay();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [overlayMode, isOverlayOpen, closeOverlay]);
+
+  // Close mobile menu on resize
+  useEffect(() => {
+    const handleResize = () => {
+      const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches;
+      if (isNowMedium && isOverlayOpen) {
+        closeOverlay();
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOverlayOpen, closeOverlay]);
+
+  // Focus trap for overlay
+  useEffect(() => {
+    if (!isOverlayOpen || !overlayMode) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      _handleFocusTrap(e, sideMenuRef);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOverlayOpen, overlayMode]);
+
   return (
     <>
-      <collapsedContext.Provider value={isCollapsed}>
-        <div className={sideMenuStyles({ isCollapsed })}>
-          <div className="h-20">
-            <Button
-              variant="ghost"
-              size="sm"
-              onPress={toggleCollapse}
-              className="absolute top-3.5 right-0 rounded-r-none border-border border-r-2 hover:bg-transparent hover:text-muted-foreground"
-              aria-label={ariaLabel}
-            >
-              <ChevronsLeftIcon className={chevronStyles({ isCollapsed })} />
-            </Button>
-            <div className="pr-8">
-              <img src={logoWrapUrl} alt="Logo Wrap" className={logoWrapStyles({ isCollapsed })} />
+      {/* Backdrop for overlay mode */}
+      {overlayMode && isOverlayOpen && (
+        <div
+          className="fixed top-0 right-0 bottom-0 left-[72px] z-40 bg-black/50 transition-opacity duration-100 sm:block xl:hidden"
+          onClick={closeOverlay}
+          onKeyDown={(e) => e.key === "Enter" && closeOverlay()}
+          role="button"
+          tabIndex={0}
+          aria-label="Close menu"
+        />
+      )}
+
+      <collapsedContext.Provider value={actualIsCollapsed}>
+        <overlayContext.Provider value={{ isOpen: isOverlayOpen, close: closeOverlay }}>
+          <div
+            ref={sideMenuRef}
+            className={sideMenuStyles({
+              isCollapsed: actualIsCollapsed,
+              overlayMode,
+              isOverlayOpen,
+              isHidden: isHidden && !overlayMode,
+              className
+            })}
+          >
+            {/* Vertical divider line */}
+            <div className="absolute top-0 right-0 h-full border-border/50 border-r opacity-0 transition-opacity duration-100 group-focus-within:opacity-100 group-hover:opacity-100" />
+
+            {/* Fixed header section with logo */}
+            <div className="relative flex h-20 w-full shrink-0 items-center">
+              {/* Logo container - fixed position */}
+              <div className={actualIsCollapsed ? "-mt-5 flex w-full justify-center pt-1" : "-mt-5 pt-1 pl-7"}>
+                {actualIsCollapsed ? (
+                  <img src={logoMarkUrl} alt="Logo" className="h-8 w-8" />
+                ) : (
+                  <img src={logoWrapUrl} alt="Logo" className="h-8 w-auto" />
+                )}
+              </div>
+
+              {/* Toggle button centered on divider, midway between logo and first menu item */}
+              <ToggleButton
+                aria-label={ariaLabel}
+                className={`toggle-button absolute top-[62px] flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100 ${
+                  actualIsCollapsed ? "-right-3" : "right-0 translate-x-1/2"
+                }`}
+                isSelected={actualIsCollapsed}
+                onPress={toggleMenu}
+              >
+                <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
+              </ToggleButton>
             </div>
-            <div className="flex pt-4 pl-3">
-              <img src={logoMarkUrl} alt="Logo" className={logoMarkStyles({ isCollapsed })} />
+
+            {/* Scrollable menu content */}
+            <div className={`flex-1 overflow-y-auto ${actualIsCollapsed ? "px-2" : "px-6"} mt-2`}>
+              <div className="flex flex-col gap-2 pt-1.5">{children}</div>
             </div>
           </div>
-          {children}
-        </div>
+        </overlayContext.Provider>
       </collapsedContext.Provider>
+
+      {/* Mobile floating button */}
       <collapsedContext.Provider value={false}>
-        <div className="absolute right-2 bottom-2 z-50 sm:hidden">
-          <DialogTrigger>
-            <Button aria-label="Help" variant="icon">
-              <img src={logoMarkUrl} alt="Logo" className="h-8 w-8" />
-            </Button>
-            <Modal position="left" fullSize={true}>
-              <Dialog className="w-60">
-                <div className="pb-8">
-                  <img src={logoWrapUrl} alt="Logo Wrap" />
-                </div>
-                {children}
-              </Dialog>
-            </Modal>
-          </DialogTrigger>
-        </div>
+        <MobileMenu ariaLabel={ariaLabel} topMenuContent={topMenuContent} />
       </collapsedContext.Provider>
     </>
   );
 }
 
 const sideMenuSeparatorStyles = tv({
-  base: "border-b-0 font-semibold text-muted-foreground uppercase leading-4 transition-all duration-300",
+  base: "border-b-0 font-semibold text-muted-foreground uppercase leading-4",
   variants: {
     isCollapsed: {
-      true: "h-0 w-6 self-center border-border/100 border-b-4 pt-0 text-[0px] text-muted-foreground/0 ease-out",
-      false: "h-8 w-full border-border/0 pt-4 text-xs ease-in"
+      true: "-mt-2 mb-2 flex h-8 w-full justify-center",
+      false: "h-8 w-full border-border/0 pt-4 pl-4 text-xs"
     }
   }
 });
@@ -197,8 +441,8 @@ type SideMenuSeparatorProps = {
 export function SideMenuSeparator({ children }: Readonly<SideMenuSeparatorProps>) {
   const isCollapsed = useContext(collapsedContext);
   return (
-    <div className="pl-4">
-      <div className={sideMenuSeparatorStyles({ isCollapsed })}>{children}</div>
+    <div className={sideMenuSeparatorStyles({ isCollapsed })}>
+      {isCollapsed ? <div className="w-6 border-border/100 border-b-4" /> : children}
     </div>
   );
 }
@@ -206,3 +450,108 @@ export function SideMenuSeparator({ children }: Readonly<SideMenuSeparatorProps>
 export function SideMenuSpacer() {
   return <div className="grow" />;
 }
+
+// Mobile Menu Component
+function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuContent?: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Close on resize
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleResize = () => {
+      const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches;
+      if (isNowMedium) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isOpen]);
+
+  // Listen for custom close event
+  useEffect(() => {
+    const handleCloseMobileMenu = () => {
+      setIsOpen(false);
+    };
+
+    window.addEventListener("close-mobile-menu", handleCloseMobileMenu);
+    return () => window.removeEventListener("close-mobile-menu", handleCloseMobileMenu);
+  }, []);
+
+  // Focus trap and body scroll prevention
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    // Prevent body scroll
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      _handleFocusTrap(e, dialogRef);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      // Restore body scroll
+      document.body.style.overflow = originalStyle;
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      {!isOpen && (
+        <div className="absolute right-2 bottom-3 z-30 sm:hidden">
+          <Button
+            aria-label={ariaLabel}
+            className="m-0 inline-flex h-12 w-12 shrink-0 items-center justify-center border-0 bg-background pressed:bg-muted p-0 hover:bg-hover-background focus:bg-hover-background"
+            onPress={() => setIsOpen(true)}
+          >
+            <Menu className="h-7 w-7 text-foreground" />
+          </Button>
+        </div>
+      )}
+      {isOpen && (
+        <overlayContext.Provider value={{ isOpen, close: () => setIsOpen(false) }}>
+          <div
+            className="fixed inset-0 z-[200] h-[100vh] w-[100vw] bg-background"
+            style={{ margin: 0, padding: 0, border: "none", top: 0, left: 0, right: 0, bottom: 0 }}
+          >
+            <div
+              className="flex h-[100vh] w-[100vw] flex-col bg-background"
+              ref={dialogRef}
+              style={{ margin: 0, padding: 0 }}
+            >
+              <div
+                className="flex-1 overflow-y-auto px-3"
+                style={{ margin: 0, padding: "0 12px", pointerEvents: "auto" }}
+              >
+                {topMenuContent && <div className="pt-5 pb-3">{topMenuContent}</div>}
+              </div>
+
+              {/* Floating close button at bottom right - same position as hamburger */}
+              <div className="absolute right-2 bottom-3 z-10">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onPress={() => setIsOpen(false)}
+                  aria-label="Close menu"
+                  className="h-12 w-12 rounded-full border border-border/50 bg-background/80 shadow-lg backdrop-blur-sm hover:bg-background/90"
+                >
+                  <X className="h-7 w-7" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </overlayContext.Provider>
+      )}
+    </>
+  );
+}
diff --git a/application/shared-webapp/ui/components/Table.tsx b/application/shared-webapp/ui/components/Table.tsx
index 4289bf34f..45c33f08b 100644
--- a/application/shared-webapp/ui/components/Table.tsx
+++ b/application/shared-webapp/ui/components/Table.tsx
@@ -130,11 +130,11 @@ const rowStyles = tv({
   base: "group/row -outline-offset-2 relative cursor-default select-none font-normal text-sm transition-colors [&>td:first-child]:pl-4 [&>td:last-child]:pr-4",
   variants: {
     isDisabled: {
-      false: "text-muted-foreground hover:bg-muted/80",
+      false: "text-muted-foreground hover:bg-hover-background",
       true: "text-muted-foreground/90"
     },
     isSelected: {
-      true: "bg-muted"
+      true: "bg-active-background hover:bg-selected-hover-background"
     }
   }
 });
@@ -161,7 +161,7 @@ export function Row<T extends object>({ id, columns, children, ...rowProps }: Re
 
 const cellStyles = tv({
   extend: focusRing,
-  base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0 group-selected/row:border-ring [:has(+[data-selected])_&]:border-ring"
+  base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0 group-selected/row:border-accent [:has(+[data-selected])_&]:border-accent"
 });
 
 type CellProps = {
diff --git a/application/shared-webapp/ui/components/TextArea.tsx b/application/shared-webapp/ui/components/TextArea.tsx
index dd5c39cee..670b04aeb 100644
--- a/application/shared-webapp/ui/components/TextArea.tsx
+++ b/application/shared-webapp/ui/components/TextArea.tsx
@@ -18,7 +18,7 @@ import { composeTailwindRenderProps } from "./utils";
 
 const textAreaStyles = tv({
   extend: focusRing,
-  base: "h-auto resize-y rounded-md border bg-background px-2 py-1.5 text-foreground text-sm placeholder:text-muted-foreground",
+  base: "h-auto resize-y rounded-md border bg-input-background px-2 py-1.5 text-foreground text-sm placeholder:text-muted-foreground",
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     isInvalid: {
diff --git a/application/shared-webapp/ui/components/TextField.tsx b/application/shared-webapp/ui/components/TextField.tsx
index e7b728942..e414ee8a4 100644
--- a/application/shared-webapp/ui/components/TextField.tsx
+++ b/application/shared-webapp/ui/components/TextField.tsx
@@ -31,16 +31,37 @@ export interface TextFieldProps
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  inputClassName?: string;
+  startIcon?: React.ReactNode;
 }
 
-export function TextField({ label, description, errorMessage, className, ...props }: Readonly<TextFieldProps>) {
+export function TextField({
+  label,
+  description,
+  errorMessage,
+  className,
+  isDisabled,
+  isReadOnly,
+  inputClassName,
+  startIcon,
+  ...props
+}: Readonly<TextFieldProps>) {
   if (props.children) {
     return <AriaTextField {...props} className={composeTailwindRenderProps(className, "flex flex-col gap-1")} />;
   }
+
   return (
     <AriaTextField {...props} className={composeTailwindRenderProps(className, "flex flex-col gap-1")}>
       {label && <Label>{label}</Label>}
-      <Input name={props.name} className={inputStyles} />
+      <Input
+        name={props.name}
+        className={`${inputStyles} ${inputClassName || ""}`}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        startIcon={startIcon}
+      />
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </AriaTextField>
diff --git a/application/shared-webapp/ui/components/Toast.tsx b/application/shared-webapp/ui/components/Toast.tsx
index 9543bb6c2..50d5ced23 100644
--- a/application/shared-webapp/ui/components/Toast.tsx
+++ b/application/shared-webapp/ui/components/Toast.tsx
@@ -77,7 +77,7 @@ function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<Toas
     <div
       {...regionProps}
       ref={ref}
-      className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-1 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]"
+      className="pointer-events-none fixed top-4 right-4 z-[100] flex max-h-screen w-full max-w-[420px] flex-col gap-1"
     >
       {state.visibleToasts.map((toast) => (
         <Toast key={toast.key} toast={toast} state={state} />
diff --git a/application/shared-webapp/ui/hooks/useResponsiveMenu.ts b/application/shared-webapp/ui/hooks/useResponsiveMenu.ts
new file mode 100644
index 000000000..824794cc1
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useResponsiveMenu.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { MEDIA_QUERIES } from "../utils/responsive";
+
+/**
+ * Hook to determine responsive menu behavior based on screen size
+ * @returns Configuration object for responsive menu behavior
+ */
+export function useResponsiveMenu() {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+
+  useEffect(() => {
+    // Check initial values
+    const smQuery = window.matchMedia(MEDIA_QUERIES.sm);
+    const xlQuery = window.matchMedia(MEDIA_QUERIES.xl);
+
+    setIsSmallScreen(smQuery.matches);
+    setIsLargeScreen(xlQuery.matches);
+
+    // Set up listeners
+    const handleSmChange = (e: MediaQueryListEvent) => setIsSmallScreen(e.matches);
+    const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches);
+
+    smQuery.addEventListener("change", handleSmChange);
+    xlQuery.addEventListener("change", handleXlChange);
+
+    return () => {
+      smQuery.removeEventListener("change", handleSmChange);
+      xlQuery.removeEventListener("change", handleXlChange);
+    };
+  }, []);
+
+  // Determine menu behavior based on screen size
+  const isHidden = !isSmallScreen; // < 640px: hidden
+  const forceCollapsed = isSmallScreen && !isLargeScreen; // 640px - 1279px: force collapsed
+  const overlayMode = isSmallScreen && !isLargeScreen; // 640px - 1279px: overlay mode
+  const className = isHidden ? "hidden" : "flex";
+
+  return { className, forceCollapsed, overlayMode, isHidden };
+}
diff --git a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts
new file mode 100644
index 000000000..b2dd3ea1e
--- /dev/null
+++ b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts
@@ -0,0 +1,115 @@
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { MEDIA_QUERIES, SIDE_MENU_COLLAPSED_WIDTH, SIDE_MENU_EXPANDED_WIDTH } from "../utils/responsive";
+
+/**
+ * Hook to provide proper layout styles for content when using a fixed side menu.
+ * Listens to side menu toggle events and screen size changes to calculate
+ * the correct margin and width to prevent content from being hidden behind the menu.
+ */
+export function useSideMenuLayout(): {
+  className: string;
+  style: React.CSSProperties;
+  isOverlayOpen: boolean;
+  isMobileMenuOpen: boolean;
+} {
+  // Track screen sizes
+  const [isSmallScreen, setIsSmallScreen] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.sm).matches : false
+  );
+  const [isLargeScreen, setIsLargeScreen] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false
+  );
+
+  // Track menu state
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    // Synchronous check to prevent flicker
+    if (typeof window === "undefined") {
+      return true;
+    }
+
+    const isSmallScreenSync = window.matchMedia(MEDIA_QUERIES.sm).matches;
+    const isLargeScreenSync = window.matchMedia(MEDIA_QUERIES.xl).matches;
+
+    // Force collapsed on medium screens
+    if (isSmallScreenSync && !isLargeScreenSync) {
+      return true;
+    }
+
+    // Check localStorage for large screens
+    const stored = localStorage.getItem("side-menu-collapsed");
+    return stored === "true";
+  });
+
+  const [isOverlayExpanded, setIsOverlayExpanded] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  // Listen for screen size changes
+  useEffect(() => {
+    const smQuery = window.matchMedia(MEDIA_QUERIES.sm);
+    const xlQuery = window.matchMedia(MEDIA_QUERIES.xl);
+
+    const handleSmChange = (e: MediaQueryListEvent) => setIsSmallScreen(e.matches);
+    const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches);
+
+    smQuery.addEventListener("change", handleSmChange);
+    xlQuery.addEventListener("change", handleXlChange);
+
+    return () => {
+      smQuery.removeEventListener("change", handleSmChange);
+      xlQuery.removeEventListener("change", handleXlChange);
+    };
+  }, []);
+
+  // Listen for menu state changes via custom events
+  useEffect(() => {
+    const handleMenuToggle = (event: CustomEvent) => {
+      setIsCollapsed(event.detail.isCollapsed);
+    };
+
+    const handleOverlayToggle = (event: CustomEvent) => {
+      setIsOverlayExpanded(event.detail.isExpanded);
+    };
+
+    const handleMobileMenuToggle = (event: CustomEvent) => {
+      setIsMobileMenuOpen(event.detail.isOpen);
+    };
+
+    window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener);
+    window.addEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener);
+    window.addEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener);
+
+    return () => {
+      window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener);
+      window.removeEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener);
+      window.removeEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener);
+    };
+  }, []);
+
+  // Calculate layout styles
+  const className = "flex flex-col flex-1 min-h-0";
+
+  const style = useMemo((): React.CSSProperties => {
+    // Mobile: full width
+    if (!isSmallScreen) {
+      return {};
+    }
+
+    // Medium screens (overlay mode): always use collapsed width
+    if (isSmallScreen && !isLargeScreen) {
+      return {
+        marginLeft: SIDE_MENU_COLLAPSED_WIDTH
+      };
+    }
+
+    // Large screens: adjust based on menu state
+    return {
+      marginLeft: isCollapsed ? SIDE_MENU_COLLAPSED_WIDTH : SIDE_MENU_EXPANDED_WIDTH
+    };
+  }, [isSmallScreen, isLargeScreen, isCollapsed]);
+
+  // Determine if in overlay mode
+  const isOverlayMode = isSmallScreen && !isLargeScreen;
+
+  return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded, isMobileMenuOpen };
+}
diff --git a/application/shared-webapp/ui/tailwind-preset.ts b/application/shared-webapp/ui/tailwind-preset.ts
index 07b79d0e3..3129c36d9 100644
--- a/application/shared-webapp/ui/tailwind-preset.ts
+++ b/application/shared-webapp/ui/tailwind-preset.ts
@@ -9,6 +9,7 @@ export default {
     path.join(path.dirname(require.resolve("@repo/ui")), "components", "*.js"),
     path.join(path.dirname(require.resolve("@repo/ui")), "components", "**/*.js")
   ],
+  safelist: [".dark", ".light"],
   darkMode: ["class"],
   theme: {
     container: {
@@ -72,7 +73,13 @@ export default {
         info: {
           DEFAULT: "hsl(var(--info))",
           foreground: "hsl(var(--info-foreground))"
-        }
+        },
+        // Dark theme specific colors
+        sidebar: "hsl(var(--sidebar))",
+        "hover-background": "hsl(var(--hover-background))",
+        "active-background": "hsl(var(--active-background))",
+        "selected-hover-background": "hsl(var(--selected-hover-background))",
+        "input-background": "hsl(var(--input-background))"
       },
       borderRadius: {
         lg: "var(--radius)",
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css
index fcd9ff4df..047f8876d 100644
--- a/application/shared-webapp/ui/tailwind.css
+++ b/application/shared-webapp/ui/tailwind.css
@@ -13,81 +13,79 @@
 @layer base {
   :root,
   .light {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 210 14% 98%;
+    --foreground: 219 42% 11%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 210 14% 98%; /* Same as background */
+    --popover-foreground: 219 42% 11%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: 210 14% 98%; /* Same as background */
+    --card-foreground: 219 42% 11%;
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
+    --secondary: 220 17% 93%;
+    --secondary-foreground: 219 42% 11%;
+    --accent: 210 40% 90%;
+    --accent-foreground: 219 42% 11%;
+    --destructive: 2 66% 51%;
     --destructive-foreground: 210 40% 98%;
+    --ring: 215 20.2% 65.1%;
+    --sidebar: 210 14% 98%; /* Same as background */
+    --hover-background: 207 35% 94%;
+    --active-background: 0 0% 100%; /* Same as input-background */
+    --selected-hover-background: 207 35% 94%; /* Same as hover-background */
+    --input-background: 0 0% 100%;
 
-    --danger: 0 70% 35%;
+    --danger: 2 66% 51%;
     --danger-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 210 40% 98%;
     --success: 143 64% 24%;
     --success-foreground: 210 40% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 210 40% 98%;
     --info: 226 71% 40%;
     --info-foreground: 210 40% 98%;
 
-    --chart-1: 60 100% 50%;
-    --chart-2: 71 100% 48%;
-    --chart-3: 84 100% 45%;
-    --chart-4: 102 100% 42%;
-    --chart-5: 124 100% 37%;
-    --chart-6: 155 100% 30%;
-    --chart-7: 181 100% 25%;
-    --chart-8: 195 100% 22%;
-    --chart-9: 211 100% 19%;
-
-    --ring: 215 20.2% 65.1%;
     --panel-opacity: 0.5;
     --radius: 0.5rem;
-
-    --accordion-content-height: 36px;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222 29% 12%;
     --foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    --muted: 223 15% 18%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --popover: 222 29% 12%; /* Same as background */
     --popover-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --card: 222.2 84% 4.9%;
+    --border: 217 19% 27%;
+    --input: 217 19% 27%; /* Same as border */
+    --card: 222 29% 12%; /* Same as background */
     --card-foreground: 210 40% 98%;
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: 217 19% 27%;
     --secondary-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 2 66% 51%;
     --destructive-foreground: 210 40% 98%;
+    --ring: 0 0% 100%;
+    --sidebar: 222 29% 12%; /* Same as background */
+    --hover-background: 219 31% 15%;
+    --active-background: 222 45% 8%; /* Same as input-background */
+    --selected-hover-background: 219 31% 15%; /* Same as hover-background */
+    --input-background: 222 45% 8%;
 
-    --danger: 0 63% 31%;
-    --danger-foreground: 210 40% 98%;
-    --warning: 41 96% 40%;
-    --warning-foreground: 210 40% 98%;
-    --success: 144 61% 20%;
-    --success-foreground: 210 40% 98%;
-    --info: 224 64% 33%;
-    --info-foreground: 210 40% 98%;
+    --danger: 2 66% 51%;
+    --danger-foreground: 0 0% 100%;
+    --success: 143 64% 24%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
 
-    --ring: 216 34% 17%;
     --panel-opacity: 0.5;
     --radius: 0.5rem;
   }
@@ -111,9 +109,44 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
   html {
-    font-family: "Inter", sans-serif;
+    -webkit-text-size-adjust: 100%;
+    font-variation-settings: normal;
+    font-variant: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-synthesis: none;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    touch-action: manipulation;
+  }
+  h1 {
+    @apply mb-2 font-semibold text-3xl text-foreground;
+  }
+  h2 {
+    @apply mt-6 mb-1 font-semibold text-xl text-foreground;
+  }
+  h3 {
+    @apply mb-2 font-semibold text-lg text-foreground;
+  }
+  h4 {
+    @apply mb-0 font-semibold text-sm text-foreground;
+  }
+  /* Page description paragraph - applies to paragraphs immediately following h1 */
+  h1 + p {
+    @apply mb-6 font-normal text-muted-foreground text-sm;
+  }
+  /* Subtitle styling for secondary text */
+  .subtitle {
+    @apply font-normal text-muted-foreground text-sm;
+  }
+  /* General paragraph styling for content areas */
+  p {
+    @apply text-sm text-foreground;
   }
 }
 
diff --git a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
index f5120999e..d78ccfbca 100644
--- a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
+++ b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
@@ -1,29 +1,37 @@
 import { Button } from "@repo/ui/components/Button";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
 import { MoonIcon, MoonStarIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { toggleThemeMode, useThemeMode } from "./mode/ThemeMode";
+import { SystemThemeMode, ThemeMode } from "./mode/utils";
 
 /**
- * A button that toggles the theme mode between light and dark.
+ * A button that toggles the theme mode between system, light and dark.
  */
 export function ThemeModeSelector({ "aria-label": ariaLabel }: { "aria-label": string }) {
-  const { setThemeMode } = useThemeMode();
+  const { themeMode, resolvedThemeMode, setThemeMode } = useThemeMode();
+
+  const tooltipText = getTooltipText(themeMode, resolvedThemeMode);
+
   return (
-    <Button variant="icon" onPress={() => setThemeMode(toggleThemeMode)} aria-label={ariaLabel}>
-      <ThemeModeIcon />
-    </Button>
+    <TooltipTrigger delay={200}>
+      <Button variant="icon" onPress={() => setThemeMode(toggleThemeMode)} aria-label={ariaLabel}>
+        <ThemeModeIcon themeMode={themeMode} resolvedThemeMode={resolvedThemeMode} />
+      </Button>
+      <Tooltip>{tooltipText}</Tooltip>
+    </TooltipTrigger>
   );
 }
 
-function ThemeModeIcon() {
-  const { themeMode, resolvedThemeMode } = useThemeMode();
-  if (themeMode === "light") {
-    return <SunIcon className="h-4 w-4" />;
-  }
-  if (themeMode === "dark") {
-    return <MoonIcon className="h-4 w-4" />;
+function getTooltipText(themeMode: ThemeMode, resolvedThemeMode: SystemThemeMode): string {
+  if (resolvedThemeMode === SystemThemeMode.Dark) {
+    return themeMode === ThemeMode.System ? "System mode (dark)" : "Dark mode";
   }
-  if (resolvedThemeMode === "light") {
-    return <SunMoonIcon className="h-4 w-4" />;
+  return themeMode === ThemeMode.System ? "System mode (light)" : "Light mode";
+}
+
+function ThemeModeIcon({ themeMode, resolvedThemeMode }: { themeMode: ThemeMode; resolvedThemeMode: SystemThemeMode }) {
+  if (resolvedThemeMode === SystemThemeMode.Dark) {
+    return themeMode === ThemeMode.System ? <MoonStarIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />;
   }
-  return <MoonStarIcon className="h-4 w-4" />;
+  return themeMode === ThemeMode.System ? <SunMoonIcon className="h-4 w-4" /> : <SunIcon className="h-4 w-4" />;
 }
diff --git a/application/shared-webapp/ui/theme/mode/ThemeMode.tsx b/application/shared-webapp/ui/theme/mode/ThemeMode.tsx
index b39bd64c0..2c8dd18a2 100644
--- a/application/shared-webapp/ui/theme/mode/ThemeMode.tsx
+++ b/application/shared-webapp/ui/theme/mode/ThemeMode.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { createContext, useContext, useEffect, useMemo } from "react";
 import { getStorageThemeMode, useStorageThemeMode } from "./useStorageThemeMode";
 import { getSystemThemeMode, useSystemThemeMode } from "./useSystemThemeMode";
-import { type SystemThemeMode, type ThemeMode, resolveThemeMode, setClassNameThemeMode } from "./utils";
+import { SystemThemeMode, ThemeMode, resolveThemeMode, setClassNameThemeMode } from "./utils";
 
 type ThemeModeSetter = (mode: ThemeMode) => ThemeMode;
 
@@ -13,15 +13,26 @@ export type ThemeModeContextType = {
 };
 
 export const ThemeModeContext = createContext<ThemeModeContextType>({
-  themeMode: "system",
-  resolvedThemeMode: "light",
+  themeMode: ThemeMode.System,
+  resolvedThemeMode: SystemThemeMode.Light,
   setThemeMode: () => {}
 });
 
-const getInitialThemeMode = () => resolveThemeMode(getStorageThemeMode(), getSystemThemeMode());
+// Helper to convert SystemThemeMode to ThemeMode
+const systemToThemeMode = (mode: SystemThemeMode): ThemeMode => {
+  return mode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light;
+};
+
+// Get initial theme mode
+const initialStorageMode = getStorageThemeMode();
+const initialSystemMode = getSystemThemeMode();
+const resolvedSystemMode = resolveThemeMode(initialStorageMode, systemToThemeMode(initialSystemMode));
+
+// Convert SystemThemeMode to ThemeMode for setClassNameThemeMode
+const resolvedInitialMode = resolvedSystemMode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light;
 
 // Set the initial theme mode on the document element as soon as possible
-setClassNameThemeMode(getInitialThemeMode());
+setClassNameThemeMode(resolvedInitialMode);
 
 type ThemeModeProviderProps = {
   children: React.ReactNode;
@@ -32,11 +43,15 @@ export function ThemeModeProvider({ children }: Readonly<ThemeModeProviderProps>
   const [storageThemeMode, setStorageThemeMode] = useStorageThemeMode();
 
   const resolvedThemeMode = useMemo(
-    () => resolveThemeMode(storageThemeMode, systemThemeMode),
+    () => resolveThemeMode(storageThemeMode, systemToThemeMode(systemThemeMode)),
     [storageThemeMode, systemThemeMode]
   );
 
-  useEffect(() => setClassNameThemeMode(resolvedThemeMode), [resolvedThemeMode]);
+  // Convert SystemThemeMode to ThemeMode for setClassNameThemeMode
+  useEffect(() => {
+    const themeMode = resolvedThemeMode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light;
+    setClassNameThemeMode(themeMode);
+  }, [resolvedThemeMode]);
 
   const value = useMemo<ThemeModeContextType>(
     () => ({
@@ -60,12 +75,20 @@ export const useThemeMode = () => useContext(ThemeModeContext);
 
 export function toggleThemeMode(mode: ThemeMode): ThemeMode {
   const systemMode = getSystemThemeMode();
-  if (mode === "light") {
-    return systemMode === "dark" ? "system" : "dark";
+
+  // First click should go to opposite of system
+  if (mode === ThemeMode.System) {
+    return systemMode === SystemThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark;
   }
-  if (mode === "dark") {
-    return systemMode === "light" ? "system" : "light";
+
+  // Second click should force the same mode as system
+  if (
+    (mode === ThemeMode.Light && systemMode === SystemThemeMode.Dark) ||
+    (mode === ThemeMode.Dark && systemMode === SystemThemeMode.Light)
+  ) {
+    return mode === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark;
   }
-  // mode was system so toggle between light and dark
-  return systemMode === "dark" ? "light" : "dark";
+
+  // Third click should go back to system
+  return ThemeMode.System;
 }
diff --git a/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts b/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts
index c5fff3345..2f623f33c 100644
--- a/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts
+++ b/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { type ThemeMode, sanitizeThemeMode } from "./utils";
 
-const STORAGE_KEY = "themeMode";
+const STORAGE_KEY = "preferred-theme";
 
 export function getStorageThemeMode(): ThemeMode {
   return sanitizeThemeMode(localStorage.getItem(STORAGE_KEY));
diff --git a/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts b/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts
index 9c0a896b8..d4dc5d115 100644
--- a/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts
+++ b/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import type { SystemThemeMode } from "./utils";
+import { SystemThemeMode } from "./utils";
 
 const mq = window.matchMedia("(prefers-color-scheme: dark)");
 
 export function getSystemThemeMode(): SystemThemeMode {
-  return mq.matches ? "dark" : "light";
+  return mq.matches ? SystemThemeMode.Dark : SystemThemeMode.Light;
 }
 
 /**
diff --git a/application/shared-webapp/ui/theme/mode/utils.ts b/application/shared-webapp/ui/theme/mode/utils.ts
index 62b42e77c..6f7d9a710 100644
--- a/application/shared-webapp/ui/theme/mode/utils.ts
+++ b/application/shared-webapp/ui/theme/mode/utils.ts
@@ -1,23 +1,34 @@
-export type SystemThemeMode = "light" | "dark";
-export type ThemeMode = SystemThemeMode | "system";
+export enum SystemThemeMode {
+  Light = "light",
+  Dark = "dark"
+}
+
+export enum ThemeMode {
+  System = "system",
+  Light = "light",
+  Dark = "dark"
+}
 
 export function sanitizeThemeMode(themeMode: string | null): ThemeMode {
-  return themeMode === "light" || themeMode === "dark" ? themeMode : "system";
+  return themeMode === ThemeMode.Light || themeMode === ThemeMode.Dark ? (themeMode as ThemeMode) : ThemeMode.System;
 }
 
-export function resolveThemeMode(...modes: ThemeMode[]): SystemThemeMode {
+export function resolveThemeMode(...modes: (ThemeMode | SystemThemeMode)[]): SystemThemeMode {
   for (const mode of modes) {
-    if (mode === "light" || mode === "dark") {
-      return mode;
+    if (mode === ThemeMode.Light) {
+      return SystemThemeMode.Light;
+    }
+    if (mode === ThemeMode.Dark) {
+      return SystemThemeMode.Dark;
     }
   }
 
-  return "light";
+  return SystemThemeMode.Light;
 }
 
 export const setClassNameThemeMode = (mode: ThemeMode) => {
-  document.documentElement.classList.remove("light", "dark");
-  if (mode === "dark" || mode === "light") {
+  document.documentElement.classList.remove(SystemThemeMode.Light, SystemThemeMode.Dark);
+  if (mode === ThemeMode.Dark || mode === ThemeMode.Light) {
     document.documentElement.classList.add(mode);
     document.documentElement.style.colorScheme = mode;
   } else {
@@ -25,12 +36,12 @@ export const setClassNameThemeMode = (mode: ThemeMode) => {
   }
 };
 
-export function getClassNameThemeMode() {
-  if (document.documentElement.classList.contains("light")) {
-    return "light";
+export function getClassNameThemeMode(): ThemeMode {
+  if (document.documentElement.classList.contains(SystemThemeMode.Light)) {
+    return ThemeMode.Light;
   }
-  if (document.documentElement.classList.contains("dark")) {
-    return "dark";
+  if (document.documentElement.classList.contains(SystemThemeMode.Dark)) {
+    return ThemeMode.Dark;
   }
-  return "system";
+  return ThemeMode.System;
 }
diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts
new file mode 100644
index 000000000..732bd1e46
--- /dev/null
+++ b/application/shared-webapp/ui/utils/responsive.ts
@@ -0,0 +1,24 @@
+/**
+ * Centralized responsive breakpoint utilities
+ * Uses Tailwind's default breakpoint values
+ */
+export const BREAKPOINTS = {
+  sm: "sm", // 640px
+  md: "md", // 768px
+  lg: "lg", // 1024px
+  xl: "xl", // 1280px
+  "2xl": "2xl" // 1536px
+} as const;
+
+// Media query strings matching Tailwind breakpoints
+export const MEDIA_QUERIES = {
+  sm: "(min-width: 640px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 1024px)",
+  xl: "(min-width: 1280px)",
+  "2xl": "(min-width: 1536px)"
+} as const;
+
+// Side menu width constants (including 8px right margin)
+export const SIDE_MENU_COLLAPSED_WIDTH = "80px"; // 72px + 8px margin
+export const SIDE_MENU_EXPANDED_WIDTH = "296px"; // 288px + 8px margin
diff --git a/application/turbo.json b/application/turbo.json
index 5d0092355..d4fcc7737 100644
--- a/application/turbo.json
+++ b/application/turbo.json
@@ -3,7 +3,7 @@
   "globalEnv": ["CERTIFICATE_PASSWORD"],
   "tasks": {
     "build": {
-      "outputs": ["dist/**"],
+      "outputs": ["dist/**", "tests/test-results/**"],
       "dependsOn": ["^build"]
     },
     "check": {
@@ -26,6 +26,10 @@
     },
     "clean": {
       "cache": false
+    },
+    "test": {
+      "cache": false,
+      "dependsOn": ["^build"]
     }
   },
   "remoteCache": {
diff --git a/developer-cli/Commands/End2EndCommand.cs b/developer-cli/Commands/End2EndCommand.cs
new file mode 100644
index 000000000..e05b92aab
--- /dev/null
+++ b/developer-cli/Commands/End2EndCommand.cs
@@ -0,0 +1,517 @@
+using System.CommandLine;
+using System.CommandLine.NamingConventionBinder;
+using System.Diagnostics;
+using PlatformPlatform.DeveloperCli.Installation;
+using PlatformPlatform.DeveloperCli.Utilities;
+using Spectre.Console;
+
+namespace PlatformPlatform.DeveloperCli.Commands;
+
+public class End2EndCommand : Command
+{
+    private static readonly string[] ValidBrowsers = ["chromium", "firefox", "webkit", "safari", "all"];
+
+    // Get available self-contained systems
+    private static readonly string[] AvailableSelfContainedSystems = SelfContainedSystemHelper.GetAvailableSelfContainedSystems();
+
+    public End2EndCommand() : base("e2e", "Run end-to-end tests using Playwright")
+    {
+        // Add argument for search term or test file patterns
+        AddArgument(new Argument<string[]>("search-terms", () => [], "Search terms for test filtering (e.g., 'user management', '@smoke', 'smoke', 'comprehensive', 'user-management-flows.spec.ts')"));
+
+        // All options in alphabetical order
+        AddOption(new Option<string>(["--browser", "-b"], () => "all", "Browser to use for tests (chromium, firefox, webkit, safari, all)"));
+        AddOption(new Option<bool>(["--debug"], () => false, "Start with Playwright Inspector for debugging (automatically enables headed mode)"));
+        AddOption(new Option<bool>(["--debug-timing"], () => false, "Show step timing output with color coding during test execution"));
+        AddOption(new Option<bool>(["--headed"], () => false, "Show browser UI while running tests (automatically enables sequential execution)"));
+        AddOption(new Option<bool>(["--include-slow"], () => false, "Include tests marked as @slow"));
+        AddOption(new Option<bool>(["--last-failed"], () => false, "Only re-run the failures"));
+        AddOption(new Option<bool>(["--only-changed"], () => false, "Only run test files that have uncommitted changes"));
+        AddOption(new Option<bool>(["--quiet"], () => false, "Suppress all output including terminal output and automatic report opening"));
+        AddOption(new Option<int?>(["--repeat-each"], "Number of times to repeat each test"));
+        AddOption(new Option<bool>(["--delete-artifacts"], () => false, "Delete all test artifacts and exit"));
+        AddOption(new Option<int?>(["--retries"], "Maximum retry count for flaky tests, zero for no retries"));
+        AddOption(new Option<string?>(["<self-contained-system>", "--self-contained-system", "-s"], $"The name of the self-contained system to test ({string.Join(", ", AvailableSelfContainedSystems)}, etc.)"));
+        AddOption(new Option<bool>(["--show-report"], () => false, "Always show HTML report after test run"));
+        AddOption(new Option<bool>(["--slow-mo"], () => false, "Run tests in slow motion (automatically enables headed mode)"));
+        AddOption(new Option<bool>(["--smoke"], () => false, "Run only smoke tests"));
+        AddOption(new Option<bool>(["--stop-on-first-failure", "-x"], () => false, "Stop after the first failure"));
+        AddOption(new Option<bool>(["--ui"], () => false, "Run tests in interactive UI mode with time-travel debugging"));
+        AddOption(new Option<int?>(["--workers", "-w"], "Number of worker processes to use for running tests"));
+
+        Handler = CommandHandler.Create(Execute);
+    }
+
+    private static string BaseUrl => Environment.GetEnvironmentVariable("PUBLIC_URL") ?? "https://localhost:9000";
+
+    private static void Execute(
+        string[] searchTerms,
+        string browser,
+        bool debug,
+        bool debugTiming,
+        bool headed,
+        bool includeSlow,
+        bool lastFailed,
+        bool onlyChanged,
+        bool quiet,
+        int? repeatEach,
+        bool deleteArtifacts,
+        int? retries,
+        string? selfContainedSystem,
+        bool showReport,
+        bool slowMo,
+        bool smoke,
+        bool stopOnFirstFailure,
+        bool ui,
+        int? workers)
+    {
+        Prerequisite.Ensure(Prerequisite.Node);
+
+        if (deleteArtifacts)
+        {
+            DeleteAllTestArtifacts();
+            AnsiConsole.MarkupLine("[yellow]Note: --delete-artifacts is a standalone operation and exits after cleaning artifacts.[/]");
+            Environment.Exit(0);
+        }
+
+        AnsiConsole.MarkupLine("[blue]Checking server availability...[/]");
+        CheckWebsiteAccessibility();
+
+        PlaywrightInstaller.EnsurePlaywrightBrowsers();
+
+        // Convert search terms to test patterns and grep patterns
+        var (testPatterns, searchGrep) = ProcessSearchTerms(searchTerms);
+
+        // Determine which self-contained systems to test based on the provided patterns or grep
+        string[] selfContainedSystemsToTest;
+        if (selfContainedSystem is not null)
+        {
+            if (!AvailableSelfContainedSystems.Contains(selfContainedSystem))
+            {
+                AnsiConsole.MarkupLine($"[red]Invalid self-contained system '{selfContainedSystem}'. Available systems: {string.Join(", ", AvailableSelfContainedSystems)}[/]");
+                Environment.Exit(1);
+            }
+
+            selfContainedSystemsToTest = [selfContainedSystem];
+        }
+        else
+        {
+            selfContainedSystemsToTest = DetermineSystemsToTest(testPatterns, searchGrep, AvailableSelfContainedSystems);
+        }
+
+        // If debug or UI mode is enabled, we need a specific self-contained system
+        if ((debug || ui) && selfContainedSystem is null)
+        {
+            if (selfContainedSystemsToTest.Length == 1)
+            {
+                selfContainedSystem = selfContainedSystemsToTest[0];
+                selfContainedSystemsToTest = [selfContainedSystem];
+            }
+            else
+            {
+                selfContainedSystem = SelfContainedSystemHelper.PromptForSelfContainedSystem(
+                    selfContainedSystemsToTest.Length > 0 ? selfContainedSystemsToTest : AvailableSelfContainedSystems);
+                selfContainedSystemsToTest = [selfContainedSystem];
+            }
+        }
+
+        // Validate browser option
+        if (!ValidBrowsers.Contains(browser.ToLower()))
+        {
+            AnsiConsole.MarkupLine($"[red]Invalid browser '{browser}'. Valid options are: {string.Join(", ", ValidBrowsers)}[/]");
+            Environment.Exit(1);
+        }
+
+        var stopwatch = Stopwatch.StartNew();
+        var overallSuccess = true;
+        var failedSelfContainedSystems = new List<string>();
+
+        foreach (var currentSelfContainedSystem in selfContainedSystemsToTest)
+        {
+            var selfContainedSystemSuccess = RunTestsForSystem(currentSelfContainedSystem, testPatterns, browser, debug, debugTiming, searchGrep, headed, includeSlow, lastFailed,
+                onlyChanged, quiet, repeatEach, retries, showReport, slowMo, smoke, stopOnFirstFailure, ui, workers
+            );
+
+            if (!selfContainedSystemSuccess)
+            {
+                overallSuccess = false;
+                failedSelfContainedSystems.Add(currentSelfContainedSystem);
+
+                // If stop on first failure is enabled, exit the loop after the first failure
+                if (stopOnFirstFailure)
+                {
+                    break;
+                }
+            }
+        }
+
+        stopwatch.Stop();
+
+        AnsiConsole.MarkupLine(overallSuccess
+            ? $"[green]All tests completed in {stopwatch.Elapsed.TotalSeconds:F1} seconds[/]"
+            : $"[red]Some tests failed in {stopwatch.Elapsed.TotalSeconds:F1} seconds[/]"
+        );
+
+        if (!quiet)
+        {
+            if (showReport)
+            {
+                foreach (var currentSelfContainedSystem in selfContainedSystemsToTest)
+                {
+                    OpenHtmlReport(currentSelfContainedSystem);
+                }
+            }
+            else if (!overallSuccess)
+            {
+                foreach (var currentSelfContainedSystem in failedSelfContainedSystems)
+                {
+                    OpenHtmlReport(currentSelfContainedSystem);
+                }
+            }
+        }
+
+        if (!overallSuccess) Environment.Exit(1);
+    }
+
+    private static (string[] testPatterns, string? grep) ProcessSearchTerms(string[] searchTerms)
+    {
+        if (searchTerms.Length == 0)
+        {
+            return ([], null);
+        }
+
+        var testPatterns = new List<string>();
+        var grepTerms = new List<string>();
+
+        foreach (var term in searchTerms)
+        {
+            var processedTerm = term;
+            var wasAtSymbol = false;
+            
+            // Handle escaped @tag syntax from CommandLineArgumentsPreprocessor
+            if (term.StartsWith(CommandLineArgumentsPreprocessor.EscapedAtSymbolMarker))
+            {
+                processedTerm = term.Substring(CommandLineArgumentsPreprocessor.EscapedAtSymbolMarker.Length);
+                wasAtSymbol = true;
+            }
+
+            // If the term ends with .spec.ts or looks like a file, treat it as a test pattern
+            if (processedTerm.EndsWith(".spec.ts") || processedTerm.Contains('/') || processedTerm.Contains('\\'))
+            {
+                testPatterns.Add(processedTerm);
+            }
+            else
+            {
+                // For grep terms, preserve the @ if it was originally there
+                var grepTerm = wasAtSymbol ? $"@{processedTerm}" : processedTerm;
+                grepTerms.Add(grepTerm);
+            }
+        }
+
+        // Combine search terms
+        var finalGrep = grepTerms.Count > 0 ? string.Join(" ", grepTerms) : null;
+
+        return (testPatterns.ToArray(), finalGrep);
+    }
+
+    private static bool RunTestsForSystem(
+        string selfContainedSystem,
+        string[] testPatterns,
+        string browser,
+        bool debug,
+        bool debugTiming,
+        string? searchGrep,
+        bool headed,
+        bool includeSlow,
+        bool lastFailed,
+        bool onlyChanged,
+        bool quiet,
+        int? repeatEach,
+        int? retries,
+        bool showReport,
+        bool slowMo,
+        bool smoke,
+        bool stopOnFirstFailure,
+        bool ui,
+        int? workers)
+    {
+        var systemPath = Path.Combine(Configuration.ApplicationFolder, selfContainedSystem, "WebApp");
+        var e2eTestsPath = Path.Combine(systemPath, "tests/e2e");
+
+        if (!Directory.Exists(e2eTestsPath))
+        {
+            AnsiConsole.MarkupLine($"[yellow]No e2e tests found for {selfContainedSystem}. Skipping...[/]");
+            return true;
+        }
+
+        AnsiConsole.MarkupLine($"[blue]Running tests for {selfContainedSystem}...[/]");
+
+        // Clean up report directory if we're going to show it
+        if (showReport)
+        {
+            var reportDirectory = Path.Combine(systemPath, "tests", "test-results", "playwright-report");
+            if (Directory.Exists(reportDirectory))
+            {
+                AnsiConsole.MarkupLine("[blue]Cleaning up previous test report...[/]");
+                Directory.Delete(reportDirectory, true);
+            }
+        }
+
+        var showBrowser = headed || debug || slowMo;
+        var runSequential = showBrowser || debugTiming;
+        var isLocalhost = BaseUrl.Contains("localhost", StringComparison.OrdinalIgnoreCase);
+
+        var playwrightArgs = BuildPlaywrightArgs(
+            testPatterns, browser, debug, searchGrep, showBrowser, includeSlow, lastFailed, onlyChanged, quiet, repeatEach,
+            retries, runSequential, smoke, stopOnFirstFailure, ui, workers
+        );
+
+        var processStartInfo = new ProcessStartInfo
+        {
+            FileName = Configuration.IsWindows ? "cmd.exe" : "npx",
+            Arguments = $"{(Configuration.IsWindows ? "/C npx" : string.Empty)} playwright test --config=./tests/playwright.config.ts {playwrightArgs}",
+            WorkingDirectory = systemPath,
+            UseShellExecute = false
+        };
+
+        AnsiConsole.MarkupLine($"[cyan]Running command in {selfContainedSystem}: npx playwright test --config=./tests/playwright.config.ts {playwrightArgs}[/]");
+
+        processStartInfo.EnvironmentVariables["PUBLIC_URL"] = BaseUrl;
+
+        if (slowMo) processStartInfo.EnvironmentVariables["PLAYWRIGHT_SLOW_MO"] = "500";
+        if (isLocalhost) processStartInfo.EnvironmentVariables["PLAYWRIGHT_VIDEO_MODE"] = "on";
+        if (debugTiming) processStartInfo.EnvironmentVariables["PLAYWRIGHT_SHOW_DEBUG_TIMING"] = "true";
+
+        // Prevent HTML report from opening automatically
+        processStartInfo.EnvironmentVariables["PLAYWRIGHT_HTML_OPEN"] = "never";
+
+        var testsFailed = false;
+        try
+        {
+            ProcessHelper.StartProcess(processStartInfo, throwOnError: true);
+            AnsiConsole.MarkupLine(testsFailed
+                ? $"[red]Tests for {selfContainedSystem} failed[/]"
+                : $"[green]Tests for {selfContainedSystem} completed successfully[/]"
+            );
+        }
+        catch (Exception)
+        {
+            testsFailed = true;
+            AnsiConsole.MarkupLine($"[red]Tests for {selfContainedSystem} failed[/]");
+        }
+
+        return !testsFailed;
+    }
+
+    private static void CheckWebsiteAccessibility()
+    {
+        try
+        {
+            using var httpClient = new HttpClient();
+            httpClient.Timeout = TimeSpan.FromSeconds(5);
+
+            var response = httpClient.Send(new HttpRequestMessage(HttpMethod.Head, BaseUrl));
+
+            if (response.IsSuccessStatusCode)
+            {
+                AnsiConsole.MarkupLine($"[green]Server is accessible at {BaseUrl}[/]");
+                return;
+            }
+        }
+        catch
+        {
+            // Fall through to error handling
+        }
+
+        AnsiConsole.MarkupLine($"[red]Server is not accessible at {BaseUrl}[/]");
+        AnsiConsole.MarkupLine($"[yellow]Please start AppHost in your IDE before running '{Configuration.AliasName} e2e'[/]");
+        Environment.Exit(1);
+    }
+
+    private static string[] DetermineSystemsToTest(string[] testPatterns, string? grep, string[] availableSystems)
+    {
+        if ((testPatterns.Length == 0 || testPatterns[0] == "*") && string.IsNullOrEmpty(grep))
+        {
+            return availableSystems;
+        }
+
+        var matchingSystems = new HashSet<string>();
+
+        foreach (var pattern in testPatterns.Where(p => p != null && p != "*"))
+        {
+            var normalizedPattern = pattern.EndsWith(".spec.ts") ? pattern : $"{pattern}.spec.ts";
+            normalizedPattern = Path.GetFileName(normalizedPattern);
+
+            foreach (var system in availableSystems)
+            {
+                var e2eTestsPath = Path.Combine(Configuration.ApplicationFolder, system, "WebApp", "tests", "e2e");
+                if (!Directory.Exists(e2eTestsPath)) continue;
+
+                var testFiles = Directory.GetFiles(e2eTestsPath, "*.spec.ts", SearchOption.AllDirectories)
+                    .Select(Path.GetFileName);
+
+                if (testFiles.Any(file => file?.Equals(normalizedPattern, StringComparison.OrdinalIgnoreCase) == true))
+                {
+                    matchingSystems.Add(system);
+                }
+            }
+        }
+
+        if (matchingSystems.Count > 0) return matchingSystems.ToArray();
+
+        if (!string.IsNullOrEmpty(grep))
+        {
+            foreach (var system in availableSystems)
+            {
+                var e2eTestsPath = Path.Combine(Configuration.ApplicationFolder, system, "WebApp", "tests", "e2e");
+                if (!Directory.Exists(e2eTestsPath)) continue;
+
+                var testFiles = Directory.GetFiles(e2eTestsPath, "*.spec.ts", SearchOption.AllDirectories);
+                foreach (var testFile in testFiles)
+                {
+                    // For filename search, remove @ if present for comparison
+                    var filenameSearchTerm = grep.StartsWith("@") ? grep.Substring(1) : grep;
+                    var fileName = Path.GetFileNameWithoutExtension(testFile);
+                    if (fileName.Contains(filenameSearchTerm, StringComparison.OrdinalIgnoreCase))
+                    {
+                        matchingSystems.Add(system);
+                        break;
+                    }
+                    
+                    // For content search, use the grep term as-is (with @ if present)
+                    if (File.ReadAllText(testFile).Contains(grep, StringComparison.OrdinalIgnoreCase))
+                    {
+                        matchingSystems.Add(system);
+                        break;
+                    }
+                }
+            }
+
+            return matchingSystems.ToArray();
+        }
+
+        return availableSystems;
+    }
+
+    private static string BuildPlaywrightArgs(
+        string[] testPatterns,
+        string browser,
+        bool debug,
+        string? grep,
+        bool showBrowser,
+        bool includeSlow,
+        bool lastFailed,
+        bool onlyChanged,
+        bool quiet,
+        int? repeatEach,
+        int? retries,
+        bool runSequential,
+        bool smoke,
+        bool stopOnFirstFailure,
+        bool ui,
+        int? workers)
+    {
+        var args = new List<string>();
+
+        // Handle browser project first as it affects test selection
+        if (!browser.Equals("all", StringComparison.CurrentCultureIgnoreCase))
+        {
+            var playwrightBrowser = browser.ToLower() == "safari" ? "webkit" : browser.ToLower();
+            args.Add($"--project={playwrightBrowser}");
+        }
+
+        // Handle test patterns - they should be relative to the tests/e2e directory
+        if (testPatterns.Length > 0)
+        {
+            args.AddRange(testPatterns.Select(pattern =>
+                    pattern.StartsWith("./") || pattern.StartsWith("tests/e2e/") ? pattern : $"./tests/e2e/{pattern}"
+                )
+            );
+        }
+
+        // Handle test filtering
+        if (grep != null)
+        {
+            args.Add($"--grep=\"{grep}\"");
+        }
+
+        if (smoke) args.Add("--grep=\"@smoke\"");
+        if (!includeSlow) args.Add("--grep-invert=\"@slow\"");
+
+        // Handle test execution options
+        if (ui) args.Add("--ui");
+        if (debug) args.Add("--debug");
+        if (showBrowser) args.Add("--headed");
+        if (lastFailed) args.Add("--last-failed");
+        if (onlyChanged) args.Add("--only-changed");
+        if (repeatEach.HasValue) args.Add($"--repeat-each={repeatEach.Value}");
+        if (retries.HasValue) args.Add($"--retries={retries.Value}");
+        if (workers.HasValue)
+        {
+            args.Add($"--workers={workers.Value}");
+        }
+        else if (runSequential) args.Add("--workers=1");
+
+        if (stopOnFirstFailure) args.Add("-x");
+
+        return string.Join(" ", args);
+    }
+
+    private static string PromptForSelfContainedSystem(string[] availableSystems)
+    {
+        if (availableSystems.Length == 0)
+        {
+            AnsiConsole.MarkupLine("[red]No self-contained systems found.[/]");
+            Environment.Exit(1);
+            return string.Empty; // This line will never be reached but is needed to satisfy the compiler
+        }
+
+        var selectedSystem = AnsiConsole.Prompt(
+            new SelectionPrompt<string>()
+                .Title("Select a [green]self-contained system[/] to test:")
+                .PageSize(10)
+                .MoreChoicesText("[grey](Move up and down to reveal more systems)[/]")
+                .AddChoices(availableSystems)
+        );
+
+        return selectedSystem;
+    }
+
+    private static void OpenHtmlReport(string selfContainedSystem)
+    {
+        var reportPath = Path.Combine(Configuration.ApplicationFolder, selfContainedSystem, "WebApp", "tests", "test-results", "playwright-report", "index.html");
+
+        if (File.Exists(reportPath))
+        {
+            AnsiConsole.MarkupLine($"[green]Opening test report for '{selfContainedSystem}'...[/]");
+            ProcessHelper.OpenBrowser(reportPath);
+        }
+        else
+        {
+            AnsiConsole.MarkupLine($"[yellow]No test report found for '{selfContainedSystem}' at '{reportPath}'[/]");
+        }
+    }
+
+    private static void DeleteAllTestArtifacts()
+    {
+        AnsiConsole.MarkupLine("[blue]Deleting test artifacts...[/]");
+
+        var totalDeleted = 0;
+
+        foreach (var selfContainedSystemName in AvailableSelfContainedSystems)
+        {
+            var testResultsDirectory = Path.Combine(Configuration.ApplicationFolder, selfContainedSystemName, "WebApp", "tests", "test-results");
+
+            if (!Directory.Exists(testResultsDirectory)) continue;
+
+            Directory.Delete(testResultsDirectory, true);
+            totalDeleted++;
+            AnsiConsole.MarkupLine($"[green]Deleted test-results directory for {selfContainedSystemName}[/]");
+        }
+
+        AnsiConsole.MarkupLine(totalDeleted > 0
+            ? $"[green]Successfully deleted test artifacts from {totalDeleted} system(s)[/]"
+            : "[yellow]No test artifacts found to delete[/]"
+        );
+    }
+}
diff --git a/developer-cli/Installation/PlaywrightInstaller.cs b/developer-cli/Installation/PlaywrightInstaller.cs
new file mode 100644
index 000000000..990f94e22
--- /dev/null
+++ b/developer-cli/Installation/PlaywrightInstaller.cs
@@ -0,0 +1,23 @@
+using System.Diagnostics;
+using PlatformPlatform.DeveloperCli.Utilities;
+using Spectre.Console;
+
+namespace PlatformPlatform.DeveloperCli.Installation;
+
+public static class PlaywrightInstaller
+{
+    public static void EnsurePlaywrightBrowsers()
+    {
+        AnsiConsole.MarkupLine("[blue]Ensuring Playwright browsers are installed...[/]");
+        
+        var processStartInfo = new ProcessStartInfo
+        {
+            FileName = Configuration.IsWindows ? "cmd.exe" : "npx",
+            Arguments = $"{(Configuration.IsWindows ? "/C npx" : string.Empty)} --yes playwright install --with-deps",
+            WorkingDirectory = Configuration.ApplicationFolder,
+            UseShellExecute = false
+        };
+
+        ProcessHelper.StartProcess(processStartInfo, throwOnError: true);
+    }
+}
\ No newline at end of file
diff --git a/developer-cli/Program.cs b/developer-cli/Program.cs
index bdba27b22..a852a75c0 100644
--- a/developer-cli/Program.cs
+++ b/developer-cli/Program.cs
@@ -1,6 +1,9 @@
-using System.CommandLine;
+using System.CommandLine;
+using System.CommandLine.Builder;
+using System.CommandLine.Parsing;
 using System.Reflection;
 using PlatformPlatform.DeveloperCli.Installation;
+using PlatformPlatform.DeveloperCli.Utilities;
 using Spectre.Console;
 
 var isDebugBuild = new FileInfo(Environment.ProcessPath!).FullName.Contains("debug");
@@ -17,6 +20,9 @@
     args = ["--help"];
 }
 
+// Preprocess arguments to handle @ symbols in search terms
+args = CommandLineArgumentsPreprocessor.PreprocessArguments(args);
+
 var solutionName = new DirectoryInfo(Configuration.SourceCodeFolder).Name;
 if (args.Length == 1 && (args[0] == "--help" || args[0] == "-h" || args[0] == "-?"))
 {
@@ -45,4 +51,9 @@
 
 allCommands.ForEach(rootCommand.AddCommand);
 
-await rootCommand.InvokeAsync(args);
+// Create a CommandLineBuilder with the root command
+var builder = new CommandLineBuilder(rootCommand);
+
+builder.UseDefaults();
+
+await builder.Build().InvokeAsync(args);
diff --git a/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs b/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs
new file mode 100644
index 000000000..3cfa3a110
--- /dev/null
+++ b/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs
@@ -0,0 +1,36 @@
+namespace PlatformPlatform.DeveloperCli.Utilities;
+
+public static class CommandLineArgumentsPreprocessor
+{
+    public const string EscapedAtSymbolMarker = "ESCAPED_AT_SYMBOL";
+
+    /// <summary>
+    ///     Preprocesses command-line arguments to handle special cases like positional arguments with @ symbols.
+    ///     This works around System.CommandLine's response file handling which treats @ as a response file indicator.
+    /// </summary>
+    /// <param name="args">The original command-line arguments</param>
+    /// <returns>Preprocessed command-line arguments</returns>
+    public static string[] PreprocessArguments(string[] args)
+    {
+        var result = new List<string>();
+        for (var i = 0; i < args.Length; i++)
+        {
+            var arg = args[i];
+
+            // Handle positional arguments that start with @ (for e2e search terms)
+            if (arg.StartsWith("@"))
+            {
+                // Replace @ with a special marker that won't trigger response file handling
+                var escapedValue = EscapedAtSymbolMarker + arg.Substring(1);
+                result.Add(escapedValue);
+            }
+            else
+            {
+                // Add the argument as-is
+                result.Add(arg);
+            }
+        }
+
+        return result.ToArray();
+    }
+}
\ No newline at end of file
diff --git a/developer-cli/Utilities/GitHelper.cs b/developer-cli/Utilities/GitHelper.cs
index a702e8033..047fa648e 100644
--- a/developer-cli/Utilities/GitHelper.cs
+++ b/developer-cli/Utilities/GitHelper.cs
@@ -136,7 +136,9 @@ public static Dictionary<string, string> GetChangedFiles()
             .Where(f => !f.EndsWith('/') && !f.EndsWith('\\'))
             .Select(line => line[3..].Trim());
 
-        return changedFiles.ToDictionary(file => file.Replace(Configuration.SourceCodeFolder, ""), GetFileHash);
+        return changedFiles
+            .Where(File.Exists)
+            .ToDictionary(file => file.Replace(Configuration.SourceCodeFolder, ""), GetFileHash);
 
         string GetFileHash(string file)
         {
diff --git a/developer-cli/Utilities/SelfContainedSystemHelper.cs b/developer-cli/Utilities/SelfContainedSystemHelper.cs
new file mode 100644
index 000000000..1094d6ccf
--- /dev/null
+++ b/developer-cli/Utilities/SelfContainedSystemHelper.cs
@@ -0,0 +1,43 @@
+using PlatformPlatform.DeveloperCli.Installation;
+using Spectre.Console;
+
+namespace PlatformPlatform.DeveloperCli.Utilities;
+
+public static class SelfContainedSystemHelper
+{
+    public static string[] GetAvailableSelfContainedSystems()
+    {
+        return Directory.GetDirectories(Configuration.ApplicationFolder)
+            .Where(dir => HasRequiredFolders(dir))
+            .Select(Path.GetFileName)
+            .Where(name => name is not null)
+            .Select(name => name!)
+            .OrderBy(name => name)
+            .ToArray();
+    }
+
+    private static bool HasRequiredFolders(string directory)
+    {
+        return Directory.Exists(Path.Combine(directory, "Api")) &&
+               Directory.Exists(Path.Combine(directory, "Core")) &&
+               Directory.Exists(Path.Combine(directory, "Tests")) &&
+               Directory.Exists(Path.Combine(directory, "WebApp"));
+    }
+
+    public static string PromptForSelfContainedSystem(string[] availableSystems)
+    {
+        if (!AnsiConsole.Profile.Capabilities.Interactive)
+        {
+            AnsiConsole.MarkupLine("[red]Cannot show selection prompt in non-interactive terminal.[/]");
+            AnsiConsole.MarkupLine("[yellow]Please specify a self-contained system using the -s flag.[/]");
+            AnsiConsole.MarkupLine($"[yellow]Available systems: {string.Join(", ", availableSystems)}[/]");
+            Environment.Exit(1);
+        }
+
+        return AnsiConsole.Prompt(
+            new SelectionPrompt<string>()
+                .Title("Select a [green]self-contained system[/] to test:")
+                .AddChoices(availableSystems)
+        );
+    }
+}