diff --git a/AGENTS.md b/AGENTS.md
index 7db2e24d..14a7396f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,6 +4,7 @@ Owns the Angular public website, operator dashboard and embeddable authenticatio
 
 Start with the canonical [work state](../user-proxy/docs/WORK-STATE.md), [architecture](../user-proxy/docs/ARCHITECTURE.md), [capabilities](../user-proxy/docs/CAPABILITIES.md), [development](../user-proxy/docs/DEVELOPMENT.md), [security](../user-proxy/docs/SECURITY-OPERATIONS.md) and [design](../user-proxy/docs/DESIGN.md). Preserve existing README contribution rules and DESIGNGUIDE.md. Read widget integration/event guides before changing the custom element contract.
 
+- Branch workflow: use `production` as the frontend base and PR target. Before pushing a feature branch or opening its PR, fetch and merge the latest `origin/production` into that feature branch. Keep release branches unchanged until PR review.
 - Inspect status/diff; preserve unrelated changes. New application code uses TypeScript and existing standalone Angular patterns. Use Angular CLI scaffolding when practical; never change architecture solely to satisfy scaffolding.
 - Install from lock using `npm ci --ignore-scripts --legacy-peer-deps`; generate ignored env modules with `node tools/set-env`. Review environment base URLs before starting: local config defaults to a remote test API.
 - Run `node --test tools/tests/*.test.cjs`, affected builds and `git diff --check`. Existing Nx/Jest targets have known gaps: report exact commands and limitations in canonical work state.
diff --git a/README.md b/README.md
index 535ca807..10a73ac0 100755
--- a/README.md
+++ b/README.md
@@ -18,6 +18,12 @@ Read [AGENTS.md](AGENTS.md), [current work state](../user-proxy/docs/WORK-STATE.
 
 The existing contribution and style guidance below remains applicable. Use the canonical development and design guides where obsolete runtime/module instructions conflict with the current standalone Angular architecture.
 
+## Isolated design review
+
+Product and API guidance lives at [developers.36blocks.com](https://developers.36blocks.com). `/docs` is a legacy handoff page, not another documentation site.
+
+Run `npm run review:build`, then `npm run review:serve` for the local review at `http://127.0.0.1:4360`. It renders the real routes using synthetic fixtures and a separate bootstrap. All mutations are rejected; no live API calls or credentials are issued. `review-version.json` identifies the source fingerprint. Release configurations continue to use `src/main.ts`. This review does not verify live authentication or providers.
+
 ## Contributing Guide
 
 Before contributing it is required that you should have a proper knowledge of **Git** and **Nx**. If you're unfamiliar with Git or Nx you should first visit the recommended [Udacity Git course](https://blog.udacity.com/2015/06/a-beginners-git-github-tutorial.html) and [Nx Docs](https://nx.dev/getting-started/intro)
diff --git a/apps/36-blocks/project.json b/apps/36-blocks/project.json
index 62a7c035..3a37dd9a 100644
--- a/apps/36-blocks/project.json
+++ b/apps/36-blocks/project.json
@@ -127,6 +127,20 @@
                     "optimization": false,
                     "extractLicenses": false,
                     "sourceMap": true
+                },
+                "review": {
+                    "browser": "apps/36-blocks/src/main.review.ts",
+                    "tsConfig": "apps/36-blocks/tsconfig.review.json",
+                    "outputPath": "dist/review",
+                    "optimization": false,
+                    "extractLicenses": false,
+                    "sourceMap": false,
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/36-blocks/src/environments/environment.ts",
+                            "with": "apps/36-blocks/src/environments/environment.review.ts"
+                        }
+                    ]
                 }
             },
             "defaultConfiguration": "production"
diff --git a/apps/36-blocks/src/app/panel/activity/activity.component.html b/apps/36-blocks/src/app/panel/activity/activity.component.html
index 0c6dfd67..345b93a6 100644
--- a/apps/36-blocks/src/app/panel/activity/activity.component.html
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.html
@@ -1,15 +1,18 @@
 <section class="activity-page" aria-labelledby="activity-title">
-    <header>
-        <h1 id="activity-title">Activity</h1>
-        <p>
-            Investigate operator actions for the current client. Login as records include the actor, target, reason and
-            outcome.
-        </p>
-        <p>
-            Older operations may have no audit details. A started attempt without a final outcome needs investigation.
-        </p>
+    <header class="page-heading">
+        <div>
+            <span class="page-kicker">INVESTIGATE WITH CONTEXT</span>
+            <h1 id="activity-title">Operator activity</h1>
+            <p>Who acted, what changed, and the recorded outcome in this workspace.</p>
+        </div>
+        <a routerLink="/app/users">Find a person →</a>
     </header>
-
+    <div class="experience-notice">
+        <span
+            >Older operations may have no audit details. A started attempt without a final outcome needs
+            investigation.</span
+        ><a href="https://developers.36blocks.com">Activity guidance ↗</a>
+    </div>
     <details class="login-as">
         <summary>Login as an end user</summary>
         <p>
@@ -18,9 +21,9 @@ <h1 id="activity-title">Activity</h1>
             client. If no company is specified, the user's first company is checked for eligibility.
         </p>
         <p>
-            Confirm the user and company before continuing. Configure an HTTPS application redirect on the block
-            before starting; this panel does not display raw session tokens. The application remains responsible for
-            business permissions.
+            Confirm the user and company before continuing. Configure an HTTPS application redirect on the block before
+            starting; this panel does not display raw session tokens. The application remains responsible for business
+            permissions.
         </p>
         <form
             class="activity-filters"
@@ -97,52 +100,66 @@ <h1 id="activity-title">Activity</h1>
         }
     </details>
 
-    <form
-        class="activity-filters"
-        #filterForm="ngForm"
-        (ngSubmit)="filterForm.valid && applyFilters()"
-        aria-label="Filter activity"
-    >
-        <mat-form-field
-            ><mat-label>Operation</mat-label
-            ><input matInput name="operation" [(ngModel)]="filters.operation" placeholder="For example, login_as"
-        /></mat-form-field>
-        <mat-form-field
-            ><mat-label>Actor name or email</mat-label><input matInput name="actor" [(ngModel)]="filters.name"
-        /></mat-form-field>
-        <mat-form-field
-            ><mat-label>Outcome</mat-label
-            ><mat-select name="outcome" [(ngModel)]="filters.outcome">
-                <mat-option value="">All outcomes</mat-option>
-                <mat-option value="started">Started</mat-option><mat-option value="succeeded">Succeeded</mat-option>
-                <mat-option value="denied">Denied</mat-option><mat-option value="failed">Failed</mat-option>
-            </mat-select></mat-form-field
+    <details class="activity-filter-panel">
+        <summary>
+            Filter operator activity
+            @if (filters.target_user_id) {
+                <span class="filter-target">User {{ filters.target_user_id }}</span>
+            }
+        </summary>
+        <form
+            class="activity-filters"
+            #filterForm="ngForm"
+            (ngSubmit)="filterForm.valid && applyFilters()"
+            aria-label="Filter activity"
         >
-        <mat-form-field
-            ><mat-label>Target user ID</mat-label
-            ><input matInput name="target" [(ngModel)]="filters.target_user_id" inputmode="numeric" pattern="[0-9]+"
-        /></mat-form-field>
-        <mat-form-field
-            ><mat-label>Block ID</mat-label
-            ><input
-                matInput
-                name="block"
-                [(ngModel)]="filters.feature_configuration_id"
-                inputmode="numeric"
-                pattern="[0-9]+"
-        /></mat-form-field>
-        <mat-form-field
-            ><mat-label>From date</mat-label><input matInput name="from" type="date" [(ngModel)]="filters.startDate"
-        /></mat-form-field>
-        <mat-form-field
-            ><mat-label>Through date</mat-label
-            ><input matInput name="through" type="date" [(ngModel)]="filters.endDate"
-        /></mat-form-field>
-        <div class="filter-actions">
-            <button mat-flat-button type="submit" [disabled]="loading() || filterForm.invalid">Apply filters</button
-            ><button mat-button type="button" (click)="clearFilters()" [disabled]="loading()">Clear</button>
-        </div>
-    </form>
+            <mat-form-field
+                ><mat-label>Operation</mat-label
+                ><input matInput name="operation" [(ngModel)]="filters.operation" placeholder="For example, login_as"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>Actor name or email</mat-label><input matInput name="actor" [(ngModel)]="filters.name"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>Outcome</mat-label
+                ><mat-select name="outcome" [(ngModel)]="filters.outcome">
+                    <mat-option value="">All outcomes</mat-option>
+                    <mat-option value="started">Started</mat-option><mat-option value="succeeded">Succeeded</mat-option>
+                    <mat-option value="denied">Denied</mat-option><mat-option value="failed">Failed</mat-option>
+                </mat-select></mat-form-field
+            >
+            <mat-form-field
+                ><mat-label>Target user ID</mat-label
+                ><input
+                    matInput
+                    name="target"
+                    [(ngModel)]="filters.target_user_id"
+                    inputmode="numeric"
+                    pattern="[0-9]+"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>Block ID</mat-label
+                ><input
+                    matInput
+                    name="block"
+                    [(ngModel)]="filters.feature_configuration_id"
+                    inputmode="numeric"
+                    pattern="[0-9]+"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>From date</mat-label
+                ><input matInput name="from" type="date" [(ngModel)]="filters.startDate"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>Through date</mat-label
+                ><input matInput name="through" type="date" [(ngModel)]="filters.endDate"
+            /></mat-form-field>
+            <div class="filter-actions">
+                <button mat-flat-button type="submit" [disabled]="loading() || filterForm.invalid">Apply filters</button
+                ><button mat-button type="button" (click)="clearFilters()" [disabled]="loading()">Clear</button>
+            </div>
+        </form>
+    </details>
 
     @if (loading()) {
         <p role="status" aria-live="polite">Loading activity…</p>
diff --git a/apps/36-blocks/src/app/panel/activity/activity.component.scss b/apps/36-blocks/src/app/panel/activity/activity.component.scss
index df6e1cfb..b2fa6497 100644
--- a/apps/36-blocks/src/app/panel/activity/activity.component.scss
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.scss
@@ -2,7 +2,7 @@
     display: block;
 }
 .activity-page {
-    padding: 1.5rem;
+    padding: 0;
     max-width: 1500px;
     margin: auto;
 }
@@ -96,9 +96,38 @@ dd {
 }
 @media (max-width: 600px) {
     .activity-page {
-        padding: 1rem;
+        padding: 0;
     }
     .reason-field {
         grid-column: auto;
     }
 }
+
+.login-as {
+    background: var(--experience-surface);
+}
+.activity-page th {
+    background: var(--experience-soft);
+    font-size: 11px;
+    color: var(--experience-muted);
+}
+.activity-page td {
+    font-size: 12px;
+}
+
+.activity-filter-panel {
+    border: 1px solid var(--experience-border);
+    border-radius: 8px;
+    background: var(--experience-surface);
+    padding: 14px 16px;
+    margin: 18px 0;
+}
+.activity-filter-panel summary {
+    font-size: 13px;
+}
+.filter-target {
+    margin-left: 14px;
+    font-weight: 400;
+    color: var(--experience-muted);
+    font-size: 12px;
+}
diff --git a/apps/36-blocks/src/app/panel/activity/activity.component.ts b/apps/36-blocks/src/app/panel/activity/activity.component.ts
index 318b0ab4..1b3dabbd 100644
--- a/apps/36-blocks/src/app/panel/activity/activity.component.ts
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.ts
@@ -1,3 +1,4 @@
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -18,11 +19,20 @@ import { ActivityService } from './activity.service';
 @Component({
     selector: 'proxy-activity',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [DatePipe, FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+    imports: [
+        RouterModule,
+        DatePipe,
+        FormsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+    ],
     templateUrl: './activity.component.html',
     styleUrl: './activity.component.scss',
 })
 export class ActivityComponent implements OnInit, OnDestroy {
+    private readonly route = inject(ActivatedRoute);
     private readonly service = inject(ActivityService);
     private request?: Subscription;
     private loginRequest?: Subscription;
@@ -44,6 +54,12 @@ export class ActivityComponent implements OnInit, OnDestroy {
     readonly loginRedirect = signal<string | null>(null);
 
     ngOnInit(): void {
+        const target = this.route.snapshot.queryParamMap.get('target_user_id');
+        if (target && /^[1-9][0-9]*$/.test(target) && Number.isSafeInteger(Number(target))) {
+            this.filters.target_user_id = target;
+            this.appliedFilters.target_user_id = target;
+            this.loginTarget = target;
+        }
         this.load(1);
     }
 
diff --git a/apps/36-blocks/src/app/panel/chatbot/chatbot.component.ts b/apps/36-blocks/src/app/panel/chatbot/chatbot.component.ts
index 0437ab0a..933aa442 100644
--- a/apps/36-blocks/src/app/panel/chatbot/chatbot.component.ts
+++ b/apps/36-blocks/src/app/panel/chatbot/chatbot.component.ts
@@ -1,9 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'app-chatbot',
     imports: [],
-    template: `<p></p>`,
+    template: `<div class="page-heading">
+        <div>
+            <span class="page-kicker">WORKSPACE ASSISTANT</span>
+            <h1>Assistant</h1>
+            <p>Help for the current workspace. Availability depends on your configured integration.</p>
+        </div>
+        <a href="https://developers.36blocks.com">Developer documentation ↗</a>
+    </div>`,
 })
 export class ChatbotComponent {}
diff --git a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html
index 36d091f3..2b08a206 100644
--- a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html
+++ b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.html
@@ -1,4 +1,4 @@
-<div class="rounded-2xl bg-color shadow-sm p-5 flex flex-col gap-2 relative">
+<div class="rounded-xl bg-color border border-color p-5 flex flex-col gap-2 relative">
     <!-- Card Header -->
     <div class="flex items-center justify-between">
         <div class="flex items-center gap-1">
@@ -10,7 +10,13 @@
                 >info_outline</mat-icon
             >
         </div>
-        <button mat-icon-button class="w-7 h-7 leading-7" (click)="openExpand()" matTooltip="Expand">
+        <button
+            mat-icon-button
+            class="w-7 h-7 leading-7"
+            (click)="openExpand()"
+            matTooltip="Expand"
+            aria-label="Expand usage breakdown"
+        >
             <mat-icon class="mat-icon-16 text-gray-400">open_in_full</mat-icon>
         </button>
     </div>
@@ -24,9 +30,9 @@
 
     <!-- Error -->
     @if (error()) {
-        <div class="flex items-center gap-2 text-red-500 text-sm">
+        <div class="experience-notice error" role="alert">
             <mat-icon class="mat-icon-18">error_outline</mat-icon>
-            {{ error() }}
+            {{ error() }}<button mat-button (click)="retry()">Retry breakdown</button>
         </div>
     }
 
@@ -36,7 +42,11 @@
             <div #chartEl class="!h-60 !w-full"></div>
             <div class="flex justify-end mt-1 xl:absolute top-[40%] right-[10%]">
                 <mat-form-field class="no-padding w-32">
-                    <mat-select [value]="selectedGroupBy()" (valueChange)="onGroupByChange($event)">
+                    <mat-select
+                        aria-label="Group usage breakdown"
+                        [value]="selectedGroupBy()"
+                        (valueChange)="onGroupByChange($event)"
+                    >
                         @for (opt of groupByOptions; track opt.value) {
                             <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
                         }
@@ -50,7 +60,11 @@
             </div>
             <div class="flex justify-end mt-1">
                 <mat-form-field class="no-padding w-32">
-                    <mat-select [value]="selectedGroupBy()" (valueChange)="onGroupByChange($event)">
+                    <mat-select
+                        aria-label="Group usage breakdown"
+                        [value]="selectedGroupBy()"
+                        (valueChange)="onGroupByChange($event)"
+                    >
                         @for (opt of groupByOptions; track opt.value) {
                             <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
                         }
@@ -66,7 +80,7 @@
         <span class="text-base font-semibold">
             Breakdown — {{ groupByOptions.find(o => o.value === selectedGroupBy())?.label ?? '' }}
         </span>
-        <button mat-icon-button (click)="closeExpand()">
+        <button mat-icon-button (click)="closeExpand()" aria-label="Close expanded chart">
             <mat-icon>close</mat-icon>
         </button>
     </div>
diff --git a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts
index 5524ee99..657a1564 100644
--- a/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts
+++ b/apps/36-blocks/src/app/panel/dashboard/breakdown-chart/breakdown-chart.component.ts
@@ -17,7 +17,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
 import { BaseComponent } from '@proxy/ui/base-component';
 import { AnalyticsService } from '@proxy/services/proxy/analytics';
-import { takeUntil } from 'rxjs';
+import { Subscription, takeUntil } from 'rxjs';
 import * as echarts from 'echarts';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -60,6 +60,11 @@ export class BreakdownChartComponent extends BaseComponent implements OnDestroy
     private chart: echarts.ECharts | null = null;
     private themeObserver: MutationObserver | null = null;
 
+    private chartRequest?: Subscription;
+    private lastParams: IBreakdownParams;
+    retry(): void {
+        if (this.lastParams) this.fetchBreakdown(this.lastParams);
+    }
     readonly isLoading = signal(false);
     readonly error = signal<string | null>(null);
     readonly chartData = signal<{ key: string; count: number }[]>([]);
@@ -90,22 +95,29 @@ export class BreakdownChartComponent extends BaseComponent implements OnDestroy
     }
 
     fetchBreakdown(params: IBreakdownParams): void {
+        this.chartRequest?.unsubscribe();
+        this.lastParams = params;
         this.isLoading.set(true);
         this.error.set(null);
         this.chartData.set([]);
 
-        this.analyticsService
+        this.chartRequest = this.analyticsService
             .getBreakdown(params)
             .pipe(takeUntil(this.destroy$))
             .subscribe({
                 next: (res: any) => {
-                    const data = res?.data?.data ?? [];
+                    if (res?.hasError || !Array.isArray(res?.data?.data)) {
+                        this.error.set('Usage breakdown is unavailable. Retry or check your workspace access.');
+                        this.isLoading.set(false);
+                        return;
+                    }
+                    const data = res.data.data;
                     this.chartData.set(data);
                     this.isLoading.set(false);
                     setTimeout(() => this.renderChart(), 0);
                 },
                 error: (err: any) => {
-                    this.error.set(err?.message ?? 'Failed to load breakdown');
+                    this.error.set('Usage breakdown could not be loaded. Check your connection and retry.');
                     this.isLoading.set(false);
                 },
             });
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
index 8ca577c1..a0b0db65 100644
--- a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.html
@@ -1,14 +1,47 @@
-<div class="flex flex-col gap-5 h-full">
+<div class="flex flex-col gap-5">
+    <div class="page-heading">
+        <div>
+            <span class="page-kicker">YOUR WORKSPACE, IN CONTEXT</span>
+            <h1>Overview</h1>
+            <p>Find what is connected. Understand access. Follow the evidence.</p>
+        </div>
+        <a href="https://developers.36blocks.com">Developer documentation ↗</a>
+    </div>
+    <div class="journey-links">
+        <a class="journey-link" routerLink="/app/features"
+            ><span class="step">01</span>
+            <div>
+                <strong>Connect an application</strong>
+                <p>Configure a block and verify sign-in.</p>
+            </div>
+            <span class="arrow">↗</span></a
+        ><a class="journey-link" routerLink="/app/users"
+            ><span class="step">02</span>
+            <div>
+                <strong>Understand a person</strong>
+                <p>Find a user and investigate their activity.</p>
+            </div>
+            <span class="arrow">↗</span></a
+        ><a class="journey-link" routerLink="/app/logs"
+            ><span class="step">03</span>
+            <div>
+                <strong>Investigate a request</strong>
+                <p>Inspect a failure and its context.</p>
+            </div>
+            <span class="arrow">↗</span></a
+        >
+    </div>
     <!-- Header -->
     <div class="flex flex-wrap items-center justify-between gap-4">
-        <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
+        <h2 class="my-0 text-xl font-bold">Usage in context</h2>
         <div class="flex items-center gap-3">
             <mat-form-field class="no-padding">
                 <mat-icon matPrefix class="mat-icon-18 text-gray-400 mr-1">search</mat-icon>
                 <input
                     matInput
                     type="text"
-                    placeholder="All Blocks"
+                    placeholder="All blocks"
+                    aria-label="Filter usage by authentication block"
                     [formControl]="featureSearchControl"
                     [matAutocomplete]="featureAutocomplete"
                     (input)="onFeatureInputChange($any($event.target).value)"
@@ -33,7 +66,7 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
                 </mat-autocomplete>
             </mat-form-field>
             <mat-form-field class="no-padding w-36">
-                <mat-select [value]="range()" (valueChange)="onRangeChange($event)">
+                <mat-select aria-label="Usage date range" [value]="range()" (valueChange)="onRangeChange($event)">
                     @for (opt of rangeOptions; track opt.value) {
                         <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
                     }
@@ -42,14 +75,21 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
         </div>
     </div>
 
-    <!-- Error -->
+    @if (featuresError()) {
+        <div class="experience-notice error" role="alert">
+            {{ featuresError() }}<button mat-button (click)="fetchFeatures()">Retry filters</button>
+        </div>
+    }
     @if (overviewError()) {
-        <div class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-600 mat-body-2 flex items-center gap-2">
-            <mat-icon class="mat-icon-18">error_outline</mat-icon>
-            {{ overviewError() }}
+        <div class="experience-notice error" role="alert">
+            {{ overviewError() }}<button mat-button (click)="fetchOverview(params())">Retry usage</button>
         </div>
     }
 
+    <p class="secondary-text-color text-xs" role="status">
+        Scope:
+        {{ featureConfigurationId() ? displayFeatureName(featureConfigurationId()) : 'All blocks in this workspace' }}
+    </p>
     <!-- KPI Cards -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
         @if (isLoadingOverview()) {
@@ -62,7 +102,7 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
             }
         } @else {
             @for (card of overviewCards; track card.key) {
-                <div class="rounded-2xl bg-color p-5 shadow-sm flex flex-col gap-1">
+                <div class="metric-card rounded-xl bg-color p-5 border border-color flex flex-col gap-1">
                     <div class="flex items-center gap-2 mb-1">
                         <span
                             class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-teal-400/10 border border-teal-400/20"
@@ -78,7 +118,11 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
                         >
                     </div>
                     <p class="text-3xl font-bold m-0 leading-tight">
-                        {{ getCardValue(overviewData(), card.valueKey, card.valueKeyFallback) | number }}
+                        {{
+                            getCardValue(overviewData(), card.valueKey, card.valueKeyFallback) === null
+                                ? '—'
+                                : (getCardValue(overviewData(), card.valueKey, card.valueKeyFallback) | number)
+                        }}
                     </p>
                     <span class="text-xs mt-1">{{ card.sub }}</span>
                 </div>
@@ -86,6 +130,15 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
         }
     </div>
 
+    <p class="secondary-text-color text-xs">
+        Usage reflects the selected period and available analytics. A dash means unavailable; it does not mean zero.
+        Active users are not a count of current sessions.
+    </p>
+    <div class="experience-notice">
+        <strong>Need to understand an operator action?</strong
+        ><span>Activity records who acted, the target and the recorded outcome.</span
+        ><a routerLink="/app/activity">Open operator activity →</a>
+    </div>
     <!-- Charts 2x2 Grid -->
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <timeseries-chart [range]="range()" [featureConfigurationId]="featureConfigurationId()"></timeseries-chart>
diff --git a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
index 780a87ab..e41bc0dd 100644
--- a/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
+++ b/apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts
@@ -16,7 +16,7 @@ import { FeaturesService } from '@proxy/services/proxy/features';
 import { IFeature } from '@proxy/models/features-model';
 import { TimeseriesChartComponent } from './timeseries-chart/timeseries-chart.component';
 import { BreakdownChartComponent } from './breakdown-chart/breakdown-chart.component';
-import { takeUntil } from 'rxjs';
+import { Subscription, takeUntil } from 'rxjs';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +44,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 
     readonly features = signal<IFeature[]>([]);
     readonly isLoadingFeatures = signal(false);
+    readonly featuresError = signal<string | null>(null);
 
     readonly featureSearchControl = new FormControl('');
     readonly featureSearchQuery = signal('');
@@ -68,16 +69,13 @@ export class DashboardComponent extends BaseComponent implements OnInit {
         return base;
     });
 
+    private overviewRequest?: Subscription;
     readonly overviewCards = OVERVIEW_CARDS;
 
-    getCardValue(data: any, path: string, fallbackPath?: string): number {
+    getCardValue(data: any, path: string, fallbackPath?: string): number | null {
         const read = (p: string) => p.split('.').reduce((acc, k) => acc?.[k], data);
-        const primary = read(path);
-        if (fallbackPath) {
-            if (primary) return primary as number;
-            return (read(fallbackPath) as number) ?? 0;
-        }
-        return (primary as number) ?? 0;
+        const value = read(path) ?? (fallbackPath && !this.featureConfigurationId() ? read(fallbackPath) : null);
+        return typeof value === 'number' && Number.isFinite(value) ? value : null;
     }
 
     readonly rangeOptions = RANGE_OPTIONS;
@@ -96,15 +94,23 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 
     fetchFeatures(): void {
         this.isLoadingFeatures.set(true);
+        this.featuresError.set(null);
         this.featuresService
-            .getFeature({})
+            .getFeature({ itemsPerPage: 100, pageNo: 1 })
             .pipe(takeUntil(this.destroy$))
             .subscribe({
                 next: (res: any) => {
-                    this.features.set(res?.data?.data ?? []);
+                    if (res?.hasError || !Array.isArray(res?.data?.data)) {
+                        this.featuresError.set('Application filters could not be loaded. Retry to choose a block.');
+                    } else {
+                        this.features.set(res.data.data);
+                    }
                     this.isLoadingFeatures.set(false);
                 },
-                error: () => this.isLoadingFeatures.set(false),
+                error: () => {
+                    this.isLoadingFeatures.set(false);
+                    this.featuresError.set('Application filters could not be loaded. Check your access and retry.');
+                },
             });
     }
 
@@ -129,20 +135,31 @@ export class DashboardComponent extends BaseComponent implements OnInit {
     }
 
     fetchOverview(params: IAnalyticsParams): void {
+        this.overviewRequest?.unsubscribe();
         this.isLoadingOverview.set(true);
         this.overviewData.set(null);
         this.overviewError.set(null);
 
-        this.analyticsService
+        this.overviewRequest = this.analyticsService
             .getOverview(params)
             .pipe(takeUntil(this.destroy$))
             .subscribe({
                 next: (res: any) => {
-                    this.overviewData.set(res?.data?.data ?? null);
+                    if (res?.hasError || !res?.data?.data || typeof res.data.data !== 'object') {
+                        this.overviewError.set(
+                            'Usage is unavailable. Retry or check your access with an administrator.'
+                        );
+                    } else {
+                        this.overviewData.set(res.data.data);
+                    }
                     this.isLoadingOverview.set(false);
                 },
                 error: (err: any) => {
-                    this.overviewError.set(err?.message ?? 'Failed to load overview');
+                    this.overviewError.set(
+                        err?.status === 403 || err?.errorCode === 403
+                            ? 'You do not have access to usage in this workspace. Ask a workspace administrator.'
+                            : 'Usage could not be loaded. Check your connection and retry.'
+                    );
                     this.isLoadingOverview.set(false);
                 },
             });
diff --git a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html
index 7ace5b6c..6f20d341 100644
--- a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html
+++ b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.html
@@ -8,26 +8,26 @@
 
 <!-- Error -->
 @if (error()) {
-    <div class="flex items-center gap-2 text-red-500 mat-body-2">
+    <div class="experience-notice error" role="alert">
         <mat-icon class="mat-icon-18">error_outline</mat-icon>
-        {{ error() }}
+        {{ error() }}<button mat-button (click)="fetchAllMetrics(featureConfigurationId())">Retry trends</button>
     </div>
 }
 
 <!-- Charts: bare cards, parent grid controls layout -->
 @if (isLoading()) {
-    <div class="rounded-2xl bg-color shadow-sm p-5 animate-pulse">
+    <div class="rounded-xl bg-color border border-color p-5 animate-pulse">
         <div class="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-4"></div>
         <div class="h-48 rounded bg-gray-100 dark:bg-gray-600"></div>
     </div>
-    <div class="rounded-2xl bg-color shadow-sm p-5 animate-pulse">
+    <div class="rounded-xl bg-color border border-color p-5 animate-pulse">
         <div class="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-4"></div>
         <div class="h-48 rounded bg-gray-100 dark:bg-gray-600"></div>
     </div>
 }
 @if (!isLoading() && seriesList().length) {
     @for (s of seriesList(); track s.label) {
-        <div class="rounded-2xl bg-color shadow-sm p-5 flex flex-col gap-2">
+        <div class="rounded-xl bg-color border border-color p-5 flex flex-col gap-2">
             <div class="flex items-center justify-between">
                 <div class="flex items-center gap-1">
                     <span class="text-base font-bold" [style.color]="s.color">{{ s.label }}</span>
@@ -38,7 +38,13 @@
                         >info_outline</mat-icon
                     >
                 </div>
-                <button mat-icon-button class="w-7 h-7 leading-7" (click)="openExpand(s)" matTooltip="Expand">
+                <button
+                    mat-icon-button
+                    class="w-7 h-7 leading-7"
+                    (click)="openExpand(s)"
+                    matTooltip="Expand"
+                    [attr.aria-label]="'Expand ' + s.label"
+                >
                     <mat-icon class="mat-icon-16 text-gray-400">open_in_full</mat-icon>
                 </button>
             </div>
@@ -46,9 +52,9 @@
         </div>
     }
 }
-@if (!isLoading() && !seriesList().length) {
+@if (!isLoading() && !error() && !seriesList().length) {
     <div
-        class="col-span-2 rounded-2xl bg-color shadow-sm p-5 flex flex-col items-center justify-center h-48 gap-2 text-gray-400"
+        class="col-span-2 rounded-xl bg-color border border-color p-5 flex flex-col items-center justify-center h-48 gap-2 text-gray-400"
     >
         <mat-icon class="w-12 h-12 opacity-30" style="font-size: 48px">show_chart</mat-icon>
         <span class="text-sm">No data for this period</span>
@@ -58,7 +64,7 @@
 <ng-template #expandTpl>
     <div class="flex items-center justify-between px-6 pt-5 pb-2">
         <span class="text-base font-semibold" [style.color]="expandSeries()?.color">{{ expandSeries()?.label }}</span>
-        <button mat-icon-button (click)="closeExpand()">
+        <button mat-icon-button (click)="closeExpand()" aria-label="Close expanded chart">
             <mat-icon>close</mat-icon>
         </button>
     </div>
diff --git a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts
index ab68e605..357a8efe 100644
--- a/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts
+++ b/apps/36-blocks/src/app/panel/dashboard/timeseries-chart/timeseries-chart.component.ts
@@ -19,7 +19,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
 import { BaseComponent } from '@proxy/ui/base-component';
 import { AnalyticsService } from '@proxy/services/proxy/analytics';
-import { forkJoin, takeUntil } from 'rxjs';
+import { Subscription, forkJoin, takeUntil } from 'rxjs';
 import * as echarts from 'echarts';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -61,6 +61,7 @@ export class TimeseriesChartComponent extends BaseComponent implements OnDestroy
     private dialog = inject(MatDialog);
     private expandDialogRef: MatDialogRef<any> | null = null;
 
+    private chartRequest?: Subscription;
     readonly isLoading = signal(false);
     readonly error = signal<string | null>(null);
     readonly seriesList = signal<ITimeseriesSeries[]>([]);
@@ -84,6 +85,7 @@ export class TimeseriesChartComponent extends BaseComponent implements OnDestroy
     }
 
     fetchAllMetrics(fcId: number | null): void {
+        this.chartRequest?.unsubscribe();
         this.isLoading.set(true);
         this.error.set(null);
         this.seriesList.set([]);
@@ -98,10 +100,15 @@ export class TimeseriesChartComponent extends BaseComponent implements OnDestroy
             return this.analyticsService.getTimeseries(params);
         });
 
-        forkJoin(calls)
+        this.chartRequest = forkJoin(calls)
             .pipe(takeUntil(this.destroy$))
             .subscribe({
                 next: (results: any[]) => {
+                    if (results.some((res) => res?.hasError || !Array.isArray(res?.data?.data))) {
+                        this.error.set('Usage trends are unavailable. Retry or check your workspace access.');
+                        this.isLoading.set(false);
+                        return;
+                    }
                     const metricValues = Object.values(this.metrics);
                     const list = results.map((res, i) => ({
                         label: metricValues[i]!.label,
@@ -114,7 +121,7 @@ export class TimeseriesChartComponent extends BaseComponent implements OnDestroy
                     setTimeout(() => this.renderCharts(), 0);
                 },
                 error: (err: any) => {
-                    this.error.set(err?.message ?? 'Failed to load timeseries');
+                    this.error.set('Usage trends could not be loaded. Check your connection and retry.');
                     this.isLoading.set(false);
                 },
             });
diff --git a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
index 36dab841..f4f39d9f 100644
--- a/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html
@@ -1,3 +1,9 @@
+<div class="experience-notice">
+    <span
+        ><strong>Setup path:</strong> Configure this block → preview authentication → integrate in your application →
+        verify a real sign-in. A preview alone does not verify your integration.</span
+    ><a href="https://developers.36blocks.com">Integration guidance ↗</a>
+</div>
 <div class="flex flex-col h-full">
     @if ((isLoading$ | async) || (loadingScript | async)) {
         <proxy-loader></proxy-loader>
diff --git a/apps/36-blocks/src/app/panel/features/feature/feature.component.html b/apps/36-blocks/src/app/panel/features/feature/feature.component.html
index 7f98894b..9783c70a 100644
--- a/apps/36-blocks/src/app/panel/features/feature/feature.component.html
+++ b/apps/36-blocks/src/app/panel/features/feature/feature.component.html
@@ -1,5 +1,21 @@
+<div class="page-heading">
+    <div>
+        <span class="page-kicker">CONNECT YOUR APPLICATIONS</span>
+        <h1>Applications & blocks</h1>
+        <p>
+            A block holds your application's authentication configuration. Open one to configure methods and
+            integration.
+        </p>
+    </div>
+    <a href="https://developers.36blocks.com">Setup guidance ↗</a>
+</div>
 @if (loading$ | async; as loading) {
     <div class="flex flex-col h-full">
+        @if (error$ | async; as error) {
+            <div class="experience-notice error" role="alert">
+                {{ error }}<button mat-button (click)="getFeatures()">Retry</button>
+            </div>
+        }
         @if (loading.dataLoading && (hasSomeFeatures$ | async) === null) {
             <proxy-loader></proxy-loader>
         }
@@ -22,7 +38,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
             <div class="flex items-center gap-4 ml-auto flex-wrap">
                 <button matButton="filled" class="mat-btn-xs" [routerLink]="['/app', 'features', 'create']">
                     <mat-icon class="mat-icon-prefix mat-icon-18 material-icons-outlined">add</mat-icon>
-                    <span class="hide-xs">Add New Block</span>
+                    <span class="hide-xs">Create a block</span>
                 </button>
                 <button
                     matButton="filled"
@@ -36,13 +52,17 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
             </div>
         </div>
 
-        @if ((hasSomeFeatures$ | async) === false) {
-            <p class="mat-body-2 text-secondary w-1/2">
-                The "Features" component in the Proxy Server is a dynamic tool that offers versatile authentication and
-                subscription plan options. It supports various authentication methods like OTP and social logins (e.g.,
-                Google, Microsoft) while providing flexible subscription plans. Users benefit from enhanced security,
-                cost-efficient resource allocation, and a user-friendly dashboard for easy configuration.
-            </p>
+        @if ((hasSomeFeatures$ | async) === false && !(error$ | async)) {
+            <div class="experience-notice">
+                <div>
+                    <strong>Connect your first application.</strong>
+                    <p>
+                        Create an authentication block, choose a login method, then verify sign-in in the connected
+                        application.
+                    </p>
+                </div>
+                <a href="https://developers.36blocks.com">Read the setup guidance ↗</a>
+            </div>
         }
         @if ((hasSomeFeatures$ | async) === true) {
             <div class="table-scroll">
@@ -168,7 +188,9 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
 
                     <tr *matNoDataRow>
                         <td class="mat-cell border-0" [attr.colspan]="displayedColumns.length">
-                            <proxy-no-record-found [title]="'blocks'" [showBtn]="false"></proxy-no-record-found>
+                            @if (!(error$ | async)) {
+                                <proxy-no-record-found [title]="'blocks'" [showBtn]="false"></proxy-no-record-found>
+                            }
                         </td>
                     </tr>
                 </table>
@@ -178,7 +200,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                 [pageSize]="(feature$ | async)?.itemsPerPage || 25"
                 [pageSizeOptions]="pageSizeOptions"
                 (page)="pageChange($event)"
-                [pageIndex]="(feature$ | async)?.pageNumber - 1"
+                [pageIndex]="((feature$ | async)?.pageNumber || 1) - 1"
                 class="box-shadow-none"
             ></mat-paginator-goto>
         }
diff --git a/apps/36-blocks/src/app/panel/features/feature/feature.component.ts b/apps/36-blocks/src/app/panel/features/feature/feature.component.ts
index ed242d47..4e19ce23 100644
--- a/apps/36-blocks/src/app/panel/features/feature/feature.component.ts
+++ b/apps/36-blocks/src/app/panel/features/feature/feature.component.ts
@@ -70,6 +70,8 @@ export class FeatureComponent extends BaseComponent implements OnDestroy, OnInit
     /** Store page size option */
     public pageSizeOptions = PAGE_SIZE_OPTIONS;
 
+    readonly error$ = this.componentStore.error$;
+
     ngOnInit(): void {
         this.getFeatures();
     }
diff --git a/apps/36-blocks/src/app/panel/features/feature/feature.store.ts b/apps/36-blocks/src/app/panel/features/feature/feature.store.ts
index 2ea240a8..b0d62e06 100644
--- a/apps/36-blocks/src/app/panel/features/feature/feature.store.ts
+++ b/apps/36-blocks/src/app/panel/features/feature/feature.store.ts
@@ -10,6 +10,7 @@ export interface IFeatureInitialState {
     features: IPaginatedResponse<IFeature[]>;
     isLoading: boolean;
     hasSomeFeatures: boolean;
+    error: string | null;
 }
 
 @Injectable()
@@ -22,6 +23,7 @@ export class FeatureComponentStore extends ComponentStore<IFeatureInitialState>
             features: null,
             isLoading: false,
             hasSomeFeatures: null,
+            error: null,
         });
     }
 
@@ -29,24 +31,24 @@ export class FeatureComponentStore extends ComponentStore<IFeatureInitialState>
         dataLoading: state.isLoading,
     }));
     readonly feature$: Observable<IPaginatedResponse<IFeature[]>> = this.select((state) => state.features);
+    readonly error$ = this.select((state) => state.error);
     readonly hasSomeFeatures$: Observable<boolean> = this.select((state) => state.hasSomeFeatures);
 
     readonly getFeature = this.effect((data: Observable<IFeatureReq>) => {
         return data.pipe(
             switchMap((req: IFeatureReq) => {
-                this.patchState({ isLoading: true });
+                this.patchState({ isLoading: true, error: null });
                 return this.service.getFeature(req).pipe(
                     tapResponse(
                         (res: BaseResponse<IPaginatedResponse<IFeature[]>, IFeatureReq>) => {
-                            if (res?.hasError) {
-                                this.showErrorMessages(res?.errors);
-                            }
+                            const failed = res?.hasError || !Array.isArray(res?.data?.data);
                             return this.patchState({
                                 isLoading: false,
-                                features: res?.data,
-                                ...(!req.search && {
-                                    hasSomeFeatures: res.data.totalEntityCount > 0,
-                                }),
+                                features: failed ? null : res.data,
+                                error: failed
+                                    ? 'Applications could not be loaded. Retry or check your workspace access.'
+                                    : null,
+                                ...(!req.search && !failed && { hasSomeFeatures: res.data.totalEntityCount > 0 }),
                             });
                         },
                         (error: any) => {
@@ -54,6 +56,10 @@ export class FeatureComponentStore extends ComponentStore<IFeatureInitialState>
                             this.patchState({
                                 isLoading: false,
                                 features: null,
+                                error:
+                                    error?.status === 403 || error?.errorCode === 403
+                                        ? 'You need permission to view applications in this workspace. Ask an administrator.'
+                                        : 'Applications could not be loaded. Check your connection and retry.',
                             });
                         }
                     ),
diff --git a/apps/36-blocks/src/app/panel/layout/layout.component.html b/apps/36-blocks/src/app/panel/layout/layout.component.html
index 0044a8c4..1e32c1d9 100644
--- a/apps/36-blocks/src/app/panel/layout/layout.component.html
+++ b/apps/36-blocks/src/app/panel/layout/layout.component.html
@@ -1,10 +1,20 @@
-<div class="flex w-full h-full" [class.collapsed-sidebar]="!sideNavService.isSideNavOpen()">
+<div
+    class="workspace-shell"
+    (keydown.escape)="sideNavService.close()"
+    [class.collapsed-sidebar]="!sideNavService.isSideNavOpen()"
+>
     <div
-        class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
+        class="workspace-sidebar flex flex-col mat-drawer-content bg-color p-2"
         [class.mat-drawer-toggle-btn-hover]="sideNavService.isSideNavOpen()"
         [class]="!sideNavService.isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[260px]'"
         [class.!hidden]="sideNavService.hideSidebar()"
     >
+        <a class="workspace-brand brand" routerLink="/app/dashboard" aria-label="36blocks overview"
+            ><span class="brand-mark" aria-hidden="true">▦</span>
+            @if (sideNavService.isSideNavOpen()) {
+                <span>36blocks</span>
+            }
+        </a>
         @let clientSettings = clientSettings$ | async; @let clientList = clients$ | async;
         @let isMultipleClients = (clientList?.data?.length ?? 0) > 1;
         <div
@@ -14,6 +24,11 @@
         >
             <div
                 class="flex items-center grow gap-2 mat-drawer-header-title pr-2"
+                role="button"
+                tabindex="0"
+                aria-label="Switch workspace"
+                (keydown.enter)="clientsMenuTrigger.openMenu()"
+                (keydown.space)="$event.preventDefault(); clientsMenuTrigger.openMenu()"
                 #clientsMenuTrigger="matMenuTrigger"
                 [matMenuTriggerFor]="isMultipleClients ? clientsMenu : null"
                 [class.pl-2]="!sideNavService.isSideNavOpen()"
@@ -62,6 +77,7 @@
                 matIconButton
                 class="sidebar-toggle-btn"
                 (click)="toggleSideBarEvent()"
+                [attr.aria-label]="sideNavService.isSideNavOpen() ? 'Collapse menu' : 'Expand menu'"
                 [matTooltip]="sideNavService.isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
                 matTooltipPosition="right"
                 type="button"
@@ -113,11 +129,35 @@
         </div>
     </div>
 
-    <div class="flex-1 flex flex-col" [class.app-content]="!showContainer">
-        <!-- Content::START -->
-        <router-outlet></router-outlet>
-        <div id="ChatbotContainer" class="h-screen w-full"></div>
-
-        <!-- Content::END -->
+    @if (sideNavService.isSideNavOpen()) {
+        <button class="sidebar-scrim" aria-label="Close navigation" (click)="sideNavService.close()"></button>
+    }
+    <div class="workspace-main">
+        <header class="workspace-topbar">
+            <button
+                mat-icon-button
+                type="button"
+                class="workspace-mobile-menu"
+                (click)="toggleSideBarEvent()"
+                aria-label="Open navigation"
+                [attr.aria-expanded]="sideNavService.isSideNavOpen()"
+            >
+                <mat-icon>menu</mat-icon>
+            </button>
+            <div class="context-path">
+                <span class="context-client">{{ (clientSettings$ | async)?.client?.name || 'Workspace' }}</span
+                ><span class="context-separator" aria-hidden="true">/</span
+                ><span class="context-area">{{ currentArea() }}</span>
+            </div>
+            <div class="context-meta">
+                <span class="environment-label"
+                    ><span class="environment-prefix">Console: </span>{{ environmentLabel }}</span
+                ><a href="https://developers.36blocks.com">Developer docs ↗</a>
+            </div>
+        </header>
+        <main id="workspace-content" class="workspace-content" [class.chatbot-content]="showContainer">
+            <router-outlet></router-outlet>
+            <div id="ChatbotContainer" class="h-full w-full" [style.display]="showContainer ? 'block' : 'none'"></div>
+        </main>
     </div>
 </div>
diff --git a/apps/36-blocks/src/app/panel/layout/layout.component.scss b/apps/36-blocks/src/app/panel/layout/layout.component.scss
index fa8e59d7..5948085d 100644
--- a/apps/36-blocks/src/app/panel/layout/layout.component.scss
+++ b/apps/36-blocks/src/app/panel/layout/layout.component.scss
@@ -1,144 +1,117 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100dvh;
+}
+.workspace-sidebar {
+    width: 248px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--experience-border);
+    background: var(--experience-surface);
+    padding: 16px 12px !important;
+    z-index: 50;
+}
+.workspace-brand {
+    padding: 5px 16px 26px;
+    font-size: 23px;
+    letter-spacing: -0.06em;
+}
+.workspace-brand .brand-mark {
+    font-size: 30px;
+}
+.mat-drawer-header-title {
+    min-height: 42px;
+    border: 1px solid var(--experience-border);
+    background: var(--experience-page);
+    border-radius: 7px;
+    padding: 9px 12px;
+    margin-bottom: 18px;
+}
+.mat-drawer-header-subtitle {
+    font-size: 12px;
+}
+.sidebar-toggle-btn {
+    flex-shrink: 0;
+}
+.mat-drawer-nav {
+    padding-top: 6px;
+}
 .sidebar-billing-link {
-    margin-top: 8px;
-    padding: 0 2px 4px;
-
-    &__anchor {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-        min-height: 48px;
-        padding: 10px 12px;
-        border-radius: 10px;
-        text-decoration: none;
-        color: var(--mat-sys-on-surface);
-        border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 28%, transparent);
-        background: linear-gradient(
-            135deg,
-            color-mix(in srgb, var(--mat-sys-primary) 14%, var(--mat-sys-surface)),
-            color-mix(in srgb, var(--mat-sys-primary) 5%, var(--mat-sys-surface))
-        );
-        box-shadow: 0 1px 2px color-mix(in srgb, var(--mat-sys-shadow) 12%, transparent);
-        transition:
-            border-color 0.2s ease,
-            background 0.2s ease,
-            transform 0.2s ease,
-            box-shadow 0.2s ease;
-
-        &:hover {
-            border-color: color-mix(in srgb, var(--mat-sys-primary) 50%, transparent);
-            background: linear-gradient(
-                135deg,
-                color-mix(in srgb, var(--mat-sys-primary) 20%, var(--mat-sys-surface)),
-                color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface))
-            );
-            box-shadow: 0 4px 12px color-mix(in srgb, var(--mat-sys-primary) 18%, transparent);
-            transform: translateY(-1px);
-        }
-
-        &--active {
-            border-color: var(--mat-sys-primary);
-            background: var(--mat-sys-primary-container);
-            color: var(--mat-sys-on-primary-container);
-            box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 35%, transparent);
-
-            .sidebar-billing-link__icon-wrap {
-                background: var(--mat-sys-primary);
-                color: var(--mat-sys-on-primary);
-            }
-
-            .sidebar-billing-link__hint {
-                color: color-mix(in srgb, var(--mat-sys-on-primary-container) 72%, transparent);
-            }
-
-            .sidebar-billing-link__arrow {
-                color: var(--mat-sys-primary);
-            }
-        }
-    }
-
-    &__icon-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 34px;
-        height: 34px;
-        border-radius: 8px;
-        flex-shrink: 0;
-        background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent);
-        color: var(--mat-sys-primary);
-
-        mat-icon {
-            width: 20px;
-            height: 20px;
-            font-size: 20px;
-        }
-    }
-
-    &__text {
-        display: flex;
-        flex-direction: column;
-        gap: 1px;
-        min-width: 0;
-        flex: 1;
-    }
-
-    &__label {
-        font-size: 0.8125rem;
-        font-weight: 600;
-        line-height: 1.25;
-    }
-
-    &__hint {
-        font-size: 0.6875rem;
-        line-height: 1.25;
-        color: var(--mat-sys-on-surface-variant);
-    }
-
-    &__arrow {
-        width: 18px;
-        height: 18px;
-        font-size: 18px;
-        flex-shrink: 0;
-        color: var(--mat-sys-on-surface-variant);
-        transition: transform 0.2s ease;
+    border-top: 1px solid var(--experience-border);
+    margin-top: 14px;
+    padding-top: 12px;
+}
+.sidebar-billing-link__anchor {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    color: var(--experience-muted);
+    border-radius: 6px;
+    text-decoration: none;
+    font-size: 12px;
+}
+.sidebar-billing-link__anchor:hover,
+.sidebar-billing-link__anchor--active {
+    background: var(--experience-soft);
+    color: var(--experience-accent);
+}
+.sidebar-billing-link__text {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.sidebar-billing-link__label {
+    font-weight: 550;
+}
+.sidebar-billing-link__hint {
+    font-size: 10px;
+    color: var(--experience-muted);
+}
+.sidebar-billing-link__arrow {
+    margin-left: auto;
+}
+.collapsed-sidebar .workspace-brand {
+    padding: 5px 0 20px;
+    justify-content: center;
+}
+.collapsed-sidebar .workspace-sidebar {
+    padding-inline: 6px !important;
+}
+.collapsed-sidebar .mat-drawer-header-title {
+    padding: 5px;
+    border: 0;
+    margin-bottom: 8px;
+}
+.sidebar-scrim {
+    display: none;
+}
+.chatbot-content {
+    padding: 0 !important;
+}
+@media (max-width: 992px) {
+    .workspace-sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        width: 260px !important;
+        box-shadow: 8px 0 30px #18251420;
     }
-
-    &__anchor:hover &__arrow {
-        transform: translateX(2px);
+    .collapsed-sidebar .workspace-sidebar {
+        display: none !important;
     }
-
-    &--collapsed {
-        padding: 0 2px;
-
-        .sidebar-billing-link__anchor {
-            justify-content: center;
-            min-height: 40px;
-            padding: 8px;
-        }
+    .sidebar-scrim {
+        display: block;
+        position: fixed;
+        inset: 0;
+        background: #16231350;
+        border: 0;
+        z-index: 40;
     }
-}
-
-:not(.collapsed-sidebar) {
-    .mat-drawer-content {
-        .sidebar-toggle-btn {
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
-
-        &:hover .sidebar-toggle-btn {
-            opacity: 1;
-        }
+    .workspace-mobile-menu {
+        display: inline-flex !important;
     }
-}
-:not(.collapsed-sidebar) {
-    @media (max-width: 992px) {
-        .mat-drawer-content {
-            position: fixed;
-            z-index: 999999;
-            top: 0;
-            bottom: 0;
-            background: var(--mat-sys-surface);
-        }
+    .workspace-brand {
+        padding-bottom: 20px;
     }
 }
diff --git a/apps/36-blocks/src/app/panel/layout/layout.component.ts b/apps/36-blocks/src/app/panel/layout/layout.component.ts
index 47a5eda8..cabd033b 100644
--- a/apps/36-blocks/src/app/panel/layout/layout.component.ts
+++ b/apps/36-blocks/src/app/panel/layout/layout.component.ts
@@ -74,6 +74,29 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
 
     public toggleMenuSideBar: boolean;
     public showContainer = false;
+    readonly currentArea = signal('Overview');
+    readonly environmentLabel = environment.production
+        ? 'Production'
+        : environment.env === 'local'
+          ? 'Local'
+          : environment.env;
+    private updateArea(url: string): void {
+        const section = url.split('?')[0].split('/')[2] || 'dashboard';
+        this.currentArea.set(
+            (
+                {
+                    dashboard: 'Overview',
+                    features: 'Applications & blocks',
+                    users: 'People',
+                    logs: 'Request logs',
+                    activity: 'Operator activity',
+                    chatbot: 'Assistant',
+                    billing: 'Billing',
+                } as Record<string, string>
+            )[section] || 'Workspace'
+        );
+        this.showContainer = section === 'chatbot';
+    }
     public clientsParams = {
         itemsPerPage: 100,
         pageNo: 1,
@@ -112,29 +135,36 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
             takeUntil(this.destroy$)
         );
 
-        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
-            this.showContainer = event?.url?.includes('chatbot');
-            const container = document.getElementById('ChatbotContainer');
-            if (container) {
-                container.style.display = this.showContainer ? 'block' : 'none';
-            }
-            if (event?.url?.startsWith('/widget-preview')) {
-                (window as any).closeChatbot?.();
-            }
-            if (event?.url?.includes('/features/create')) {
-                this.featuresService
-                    .getFeature({ itemsPerPage: 1, pageNo: 1 })
-                    .pipe(take(1))
-                    .subscribe((res) => {
-                        const hasFeatures = (res?.data?.totalEntityCount ?? 0) > 0;
-                        this.sideNavService.hideSidebar.set(!hasFeatures);
-                        this.cdr.markForCheck();
-                    });
-            } else {
-                this.sideNavService.hideSidebar.set(false);
-            }
-            this.cdr.markForCheck();
-        });
+        this.updateArea(this.router.url);
+        this.router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this.destroy$)
+            )
+            .subscribe((event: NavigationEnd) => {
+                this.updateArea(event.urlAfterRedirects || event.url);
+                if (this.isMobileDevice()) this.sideNavService.close();
+                const container = document.getElementById('ChatbotContainer');
+                if (container) {
+                    container.style.display = this.showContainer ? 'block' : 'none';
+                }
+                if (event?.url?.startsWith('/widget-preview')) {
+                    (window as any).closeChatbot?.();
+                }
+                if (event?.url?.includes('/features/create')) {
+                    this.featuresService
+                        .getFeature({ itemsPerPage: 1, pageNo: 1 })
+                        .pipe(take(1))
+                        .subscribe((res) => {
+                            const hasFeatures = (res?.data?.totalEntityCount ?? 0) > 0;
+                            this.sideNavService.hideSidebar.set(!hasFeatures);
+                            this.cdr.markForCheck();
+                        });
+                } else {
+                    this.sideNavService.hideSidebar.set(false);
+                }
+                this.cdr.markForCheck();
+            });
     }
     ngOnInit(): void {
         this.getClients();
@@ -173,55 +203,57 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
         //     }
         // });
 
-        combineLatest([this.logInData$, this.clientSettings$]).subscribe(([loginData, clientSettings]) => {
-            if (loginData && clientSettings) {
-                this.rootService.generateToken({ source: 'chatbot' }).subscribe((res) => {
-                    const scriptId = 'chatbot-main-script';
-                    const existingScript = document.getElementById(scriptId);
-                    if (existingScript) {
-                        existingScript.remove();
-                    }
-                    const scriptElement = document.createElement('script');
-                    scriptElement.type = 'text/javascript';
-                    scriptElement.src = environment.interfaceScriptUrl;
-                    scriptElement.id = scriptId;
-                    scriptElement.setAttribute('embedToken', res?.data?.jwt);
-                    scriptElement.setAttribute('parentId', 'ChatbotContainer');
-                    scriptElement.setAttribute('fullScreen', 'true');
-                    scriptElement.setAttribute('hideIcon', 'true');
-                    scriptElement.setAttribute('hideCloseButton', 'true');
+        combineLatest([this.logInData$, this.clientSettings$])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([loginData, clientSettings]) => {
+                if (loginData && clientSettings) {
+                    this.rootService.generateToken({ source: 'chatbot' }).subscribe((res) => {
+                        const scriptId = 'chatbot-main-script';
+                        const existingScript = document.getElementById(scriptId);
+                        if (existingScript) {
+                            existingScript.remove();
+                        }
+                        const scriptElement = document.createElement('script');
+                        scriptElement.type = 'text/javascript';
+                        scriptElement.src = environment.interfaceScriptUrl;
+                        scriptElement.id = scriptId;
+                        scriptElement.setAttribute('embedToken', res?.data?.jwt);
+                        scriptElement.setAttribute('parentId', 'ChatbotContainer');
+                        scriptElement.setAttribute('fullScreen', 'true');
+                        scriptElement.setAttribute('hideIcon', 'true');
+                        scriptElement.setAttribute('hideCloseButton', 'true');
 
-                    scriptElement.onload = () => {
-                        const payload = {
-                            variables: {
-                                variables: JSON.stringify({
-                                    session: this.authService.getTokenSync(),
-                                }),
-                            },
-                            threadId: `${loginData?.email}${clientSettings?.client?.id}`,
-                            bridgeName: 'root',
-                            parentId: 'ChatbotContainer',
-                            fullScreen: true,
+                        scriptElement.onload = () => {
+                            const payload = {
+                                variables: {
+                                    variables: JSON.stringify({
+                                        session: this.authService.getTokenSync(),
+                                    }),
+                                },
+                                threadId: `${loginData?.email}${clientSettings?.client?.id}`,
+                                bridgeName: 'root',
+                                parentId: 'ChatbotContainer',
+                                fullScreen: true,
+                            };
+                            setTimeout(() => {
+                                if (this.router.url.startsWith('/widget-preview')) {
+                                    return;
+                                }
+                                (window as any).SendDataToChatbot(payload);
+                                (window as any).openChatbot();
+                                // Body have class light-theme
+                                if (document.body.classList.contains('light-theme')) {
+                                    this.sendThemeToChatbot('light');
+                                } else {
+                                    this.sendThemeToChatbot('dark');
+                                }
+                            }, 2000);
                         };
-                        setTimeout(() => {
-                            if (this.router.url.startsWith('/widget-preview')) {
-                                return;
-                            }
-                            (window as any).SendDataToChatbot(payload);
-                            (window as any).openChatbot();
-                            // Body have class light-theme
-                            if (document.body.classList.contains('light-theme')) {
-                                this.sendThemeToChatbot('light');
-                            } else {
-                                this.sendThemeToChatbot('dark');
-                            }
-                        }, 2000);
-                    };
 
-                    document.body.appendChild(scriptElement);
-                });
-            }
-        });
+                        document.body.appendChild(scriptElement);
+                    });
+                }
+            });
     }
 
     public logOut() {
diff --git a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.html b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.html
index b2cff2d2..1a1b7c86 100644
--- a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.html
+++ b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.html
@@ -1,17 +1,19 @@
-<!-- Menus::START -->
-<mat-nav-list class="service-list">
+<nav aria-label="Workspace navigation" class="workspace-navigation">
+    <span class="nav-section" [class.hidden]="isSideNavOpen()">WORKSPACE</span>
     @for (item of navItems; track item.route) {
         <a
-            mat-list-item
-            [routerLink]="[item.route]"
-            routerLinkActive="mdc-list-item--activated"
-            [matTooltipPosition]="'right'"
+            [routerLink]="['/app', item.route]"
+            routerLinkActive="active"
+            ariaCurrentWhenActive="page"
             [matTooltip]="isSideNavOpen() ? item.label : ''"
-            [style.padding]="isSideNavOpen() ? '8px' : ''"
+            matTooltipPosition="right"
+            [attr.aria-label]="item.label"
+            ><mat-icon aria-hidden="true">{{ item.icon }}</mat-icon
+            ><span [class.hidden]="isSideNavOpen()">{{ item.label }}</span></a
         >
-            <mat-icon matListIcon [class.mr-3]="!isSideNavOpen()" aria-hidden="false">{{ item.icon }}</mat-icon>
-            <span [class.hidden]="isSideNavOpen()" matLine>{{ item.label }}</span>
-        </a>
     }
-</mat-nav-list>
-<!-- Menus::END -->
+    <a class="nav-docs" href="https://developers.36blocks.com" [attr.aria-label]="'Developer documentation'"
+        ><mat-icon aria-hidden="true">menu_book</mat-icon
+        ><span [class.hidden]="isSideNavOpen()">Developer docs ↗</span></a
+    >
+</nav>
diff --git a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.scss b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.scss
index e69de29b..de0399bb 100644
--- a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.scss
+++ b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.scss
@@ -0,0 +1,46 @@
+.workspace-navigation {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.nav-section {
+    font:
+        9px ui-monospace,
+        monospace;
+    letter-spacing: 0.12em;
+    color: var(--experience-muted);
+    padding: 10px 12px 14px;
+}
+.workspace-navigation a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 42px;
+    padding: 10px 12px;
+    border-radius: 7px;
+    color: var(--experience-muted);
+    font-size: 12px;
+    text-decoration: none;
+    transition: background 0.15s;
+}
+.workspace-navigation a:hover {
+    background: var(--experience-page);
+}
+.workspace-navigation a.active {
+    background: var(--experience-soft);
+    color: var(--experience-accent);
+    font-weight: 600;
+    box-shadow: inset 2px 0 var(--experience-accent);
+}
+mat-icon {
+    font-size: 19px;
+    width: 19px;
+    height: 19px;
+    flex-shrink: 0;
+}
+.nav-docs {
+    margin-top: 24px;
+    border-top: 1px solid var(--experience-border);
+    padding-top: 18px !important;
+    border-radius: 0 !important;
+}
diff --git a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.ts b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.ts
index bb7d9ec2..d9201c7a 100644
--- a/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.ts
+++ b/apps/36-blocks/src/app/panel/layout/main-left-side-nav/main-left-side-nav.component.ts
@@ -29,11 +29,11 @@ export class MainLeftSideNavComponent extends BaseComponent {
     public isSideNavOpen = input<boolean>();
 
     protected readonly navItems = [
-        { route: 'dashboard', icon: 'dashboard', label: 'Dashboard' },
-        { route: 'features', icon: 'featured_play_list', label: 'Blocks' },
-        { route: 'users', icon: 'person', label: 'User' },
-        { route: 'logs', icon: 'description', label: 'Logs' },
-        { route: 'activity', icon: 'history', label: 'Activity' },
-        { route: 'chatbot', icon: 'face', label: 'Ask Ai' },
+        { route: 'dashboard', icon: 'dashboard', label: 'Overview' },
+        { route: 'features', icon: 'featured_play_list', label: 'Applications & blocks' },
+        { route: 'users', icon: 'person', label: 'People' },
+        { route: 'logs', icon: 'description', label: 'Request logs' },
+        { route: 'activity', icon: 'history', label: 'Operator activity' },
+        { route: 'chatbot', icon: 'face', label: 'Assistant' },
     ];
 }
diff --git a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
index 1b3c7026..9d18af47 100644
--- a/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
+++ b/apps/36-blocks/src/app/panel/layout/sidebar-user-menu/sidebar-user-menu.component.html
@@ -33,18 +33,23 @@
 }
 <mat-menu #menu="matMenu" class="profile-menu ml-1 w-[260px]">
     <h4 class="m-0 py-2 px-6 text-dark font-medium">{{ user.displayName }}</h4>
-    <div mat-menu-item class="flex items-center gap-2" (click)="darkModeToggled.emit(!isDarkMode)">
+    <button type="button" mat-menu-item class="flex items-center gap-2" (click)="darkModeToggled.emit(!isDarkMode)">
         <mat-icon class="mat-icon-18 material-icons-outlined">{{ isDarkMode ? 'dark_mode' : 'light_mode' }}</mat-icon>
         <span>{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>
-    </div>
-    <a mat-menu-item class="flex items-center justify-between text-danger" (click)="loggedOut.emit()">
+    </button>
+    <button
+        type="button"
+        mat-menu-item
+        class="flex items-center justify-between text-danger"
+        (click)="loggedOut.emit()"
+    >
         Logout <mat-icon class="mat-icon-18 text-danger mr-0">logout</mat-icon>
-    </a>
+    </button>
 </mat-menu>
 
 <ng-template #displayPicture>
     @if (user.photoURL) {
-        <img [src]="user.photoURL" alt="No Image" class="w-7 h-7 rounded-full" loading="lazy" />
+        <img [src]="user.photoURL" alt="" class="w-7 h-7 rounded-full" loading="lazy" />
     } @else {
         <mat-icon aria-hidden="false" class="mr-6 text-grey material-icons-outlined">account_circle</mat-icon>
     }
diff --git a/apps/36-blocks/src/app/panel/logs/log/log.component.html b/apps/36-blocks/src/app/panel/logs/log/log.component.html
index c89c60e3..df1d3f63 100644
--- a/apps/36-blocks/src/app/panel/logs/log/log.component.html
+++ b/apps/36-blocks/src/app/panel/logs/log/log.component.html
@@ -1,3 +1,15 @@
+<div class="page-heading">
+    <div>
+        <span class="page-kicker">FOLLOW THE REQUEST</span>
+        <h1>Request logs</h1>
+        <p>Choose a project and environment, narrow the time range, then open a request to inspect its outcome.</p>
+    </div>
+    <a href="https://developers.36blocks.com">Troubleshooting guidance ↗</a>
+</div>
+<div class="experience-notice">
+    <span>Request logs show API execution. To investigate an operator action, use Activity.</span
+    ><a href="/app/activity">Open operator activity →</a>
+</div>
 <div class="flex flex-col h-full">
     @if (isLoading$ | async) {
         <proxy-loader></proxy-loader>
diff --git a/apps/36-blocks/src/app/panel/users/user/user.component.html b/apps/36-blocks/src/app/panel/users/user/user.component.html
index 9404cb0d..925f9219 100644
--- a/apps/36-blocks/src/app/panel/users/user/user.component.html
+++ b/apps/36-blocks/src/app/panel/users/user/user.component.html
@@ -1,3 +1,11 @@
+<div class="page-heading">
+    <div>
+        <span class="page-kicker">PEOPLE & ACCESS</span>
+        <h1>People</h1>
+        <p>Find a user, identify their block, and follow the recorded activity.</p>
+    </div>
+    <a href="https://developers.36blocks.com">User management guidance ↗</a>
+</div>
 @if (loading$ | async; as loading) {
     <div class="flex flex-col h-full">
         <mat-tab-group
@@ -7,12 +15,12 @@
             (selectedTabChange)="onTabChange($event.index)"
         >
             <!-- User Tab -->
-            <mat-tab label="User">
+            <mat-tab label="Directory">
                 <div class="flex flex-col h-full">
                     <div class="flex flex-wrap items-center justify-between gap-4 my-6">
                         <proxy-lib-search
                             [matFormFieldClass]="'no-padding w-xs-100'"
-                            [placeholder]="'Search'"
+                            [placeholder]="'Search name or email'"
                             (inputChanges)="search($event)"
                             class="w-xs-100"
                         ></proxy-lib-search>
@@ -85,6 +93,11 @@
                             </button>
                         </div>
                     </div>
+                    @if (usersError$ | async; as error) {
+                        <div class="experience-notice error" role="alert">
+                            {{ error }}<button mat-button (click)="getUsers()">Retry</button>
+                        </div>
+                    }
                     <div class="table-scroll">
                         <table
                             mat-table
@@ -95,14 +108,27 @@
                                       ? [1, 2, 3, 4]
                                       : []
                             "
-                            class="default-table responsive-table"
+                            class="default-table responsive-table people-table"
                         >
                             <!-- Name Column -->
                             <ng-container matColumnDef="name">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
                                 <td mat-cell *matCellDef="let element" data-label="Name">
                                     @if (!loading.dataLoading) {
-                                        <span>{{ element.name }}</span>
+                                        <div>
+                                            <span>{{ element.name }}</span>
+                                            <details class="mobile-profile-details">
+                                                <summary>Profile details</summary>
+                                                <dl>
+                                                    <dt>User ID</dt>
+                                                    <dd>{{ element.id }}</dd>
+                                                    <dt>Phone</dt>
+                                                    <dd>{{ element.mobile || 'Not provided' }}</dd>
+                                                    <dt>Created</dt>
+                                                    <dd>{{ element.created_at | date: 'mediumDate' }}</dd>
+                                                </dl>
+                                            </details>
+                                        </div>
                                     } @else {
                                         <ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
                                     }
@@ -225,6 +251,20 @@
                                 </td>
                             </ng-container>
 
+                            <ng-container matColumnDef="investigate"
+                                ><th mat-header-cell *matHeaderCellDef>Investigate</th>
+                                <td mat-cell *matCellDef="let element" data-label="Investigate">
+                                    @if (!loading.dataLoading) {
+                                        <a
+                                            class="table-action"
+                                            [routerLink]="['/app/activity']"
+                                            [queryParams]="{ target_user_id: element.id }"
+                                            [attr.aria-label]="'View activity for ' + (element.name || element.id)"
+                                            >View activity →</a
+                                        >
+                                    }
+                                </td></ng-container
+                            >
                             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                             <tr
                                 mat-row
@@ -235,7 +275,18 @@
 
                             <tr *matNoDataRow>
                                 <td class="mat-cell border-0" [attr.colspan]="displayedColumns.length">
-                                    <proxy-no-record-found [title]="'users'" [showBtn]="false"></proxy-no-record-found>
+                                    @if (!(usersError$ | async)) {
+                                        <div class="p-8 text-center">
+                                            <strong>No people match these filters.</strong>
+                                            <p class="secondary-text-color text-sm">
+                                                Try a different name or email, a wider date range, or reset company and
+                                                block filters.
+                                            </p>
+                                            <button mat-button (click)="resetParam()">
+                                                Reset company & block filters
+                                            </button>
+                                        </div>
+                                    }
                                 </td>
                             </tr>
                         </table>
@@ -245,7 +296,7 @@
                         [pageSize]="(users$ | async)?.itemsPerPage || 25"
                         [pageSizeOptions]="pageSizeOptions"
                         (page)="pageChange($event)"
-                        [pageIndex]="(users$ | async)?.pageNumber - 1"
+                        [pageIndex]="((users$ | async)?.pageNumber || 1) - 1"
                         class="box-shadow-none"
                     ></mat-paginator-goto>
                 </div>
@@ -253,7 +304,7 @@
 
             <!-- Management Tab -->
             <mat-tab label="Management">
-                <proxy-management></proxy-management>
+                <ng-template matTabContent><proxy-management></proxy-management></ng-template>
             </mat-tab>
         </mat-tab-group>
     </div>
diff --git a/apps/36-blocks/src/app/panel/users/user/user.component.scss b/apps/36-blocks/src/app/panel/users/user/user.component.scss
index 42385324..a932601f 100644
--- a/apps/36-blocks/src/app/panel/users/user/user.component.scss
+++ b/apps/36-blocks/src/app/panel/users/user/user.component.scss
@@ -2,3 +2,36 @@
     display: block;
     height: 100%;
 }
+
+.mobile-profile-details {
+    display: none;
+}
+@media (max-width: 720px) {
+    .people-table td[data-label='Phone Number'],
+    .people-table td[data-label='User ID'],
+    .people-table td[data-label='Created At'] {
+        display: none !important;
+    }
+    .mobile-profile-details {
+        display: block;
+        margin-top: 8px;
+        font-size: 11px;
+        color: var(--experience-muted);
+    }
+    .mobile-profile-details summary {
+        cursor: pointer;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+    .mobile-profile-details dl {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 8px 14px;
+        margin: 12px 0 4px;
+        text-align: left;
+    }
+    .mobile-profile-details dd {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/users/user/user.component.ts b/apps/36-blocks/src/app/panel/users/user/user.component.ts
index 380d862f..5a9d257f 100644
--- a/apps/36-blocks/src/app/panel/users/user/user.component.ts
+++ b/apps/36-blocks/src/app/panel/users/user/user.component.ts
@@ -25,7 +25,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { DateRangePickerComponent } from '@proxy/date-range-picker';
-import { NoRecordFoundComponent } from '@proxy/ui/no-record-found';
 import { MatPaginatorGotoComponent } from '@proxy/ui/mat-paginator-goto';
 import { SearchComponent } from '@proxy/ui/search';
 import { SkeletonDirective } from '@proxy/directives/skeleton';
@@ -77,7 +76,6 @@ import { MatMenuTrigger } from '@angular/material/menu';
         MatTableModule,
         MatPaginatorModule,
         DateRangePickerComponent,
-        NoRecordFoundComponent,
         MatPaginatorGotoComponent,
         SearchComponent,
         SkeletonDirective,
@@ -100,6 +98,7 @@ export class UserComponent extends BaseComponent implements OnDestroy, OnInit {
     /** Store current API inprogress state */
     public loading$: Observable<{ [key: string]: boolean }> = this.componentStore.loading$;
     /** Store User data */
+    readonly usersError$ = this.componentStore.usersError$;
     public users$: Observable<IPaginatedResponse<IUser[]>> = this.componentStore.users$;
     /** Store display column */
     public displayedColumns: string[] = [
@@ -110,6 +109,7 @@ export class UserComponent extends BaseComponent implements OnDestroy, OnInit {
         'block_name',
         'last_login',
         'created_at',
+        'investigate',
     ];
     /** Store params for fetching feature data */
     public params: any = {};
@@ -256,6 +256,7 @@ export class UserComponent extends BaseComponent implements OnDestroy, OnInit {
      * @param event
      */
     public setDateRange(event) {
+        this.params.pageNo = 1;
         this.selectedRangeValue = event;
         this.params = {
             ...this.params,
diff --git a/apps/36-blocks/src/app/panel/users/user/user.store.ts b/apps/36-blocks/src/app/panel/users/user/user.store.ts
index be176216..925bc53d 100644
--- a/apps/36-blocks/src/app/panel/users/user/user.store.ts
+++ b/apps/36-blocks/src/app/panel/users/user/user.store.ts
@@ -22,6 +22,7 @@ export interface IUserInitialState {
     featureDetails: any;
     createUpdateObject: IFeature;
     isLoading: boolean;
+    usersError: string | null;
 }
 @Injectable()
 export class UserComponentStore extends ComponentStore<IUserInitialState> {
@@ -42,6 +43,7 @@ export class UserComponentStore extends ComponentStore<IUserInitialState> {
             updatePermission: null,
             featureDetails: null,
             createUpdateObject: null,
+            usersError: null,
             isLoading: false,
         });
     }
@@ -62,35 +64,39 @@ export class UserComponentStore extends ComponentStore<IUserInitialState> {
     readonly updatePermission$: Observable<any> = this.select((state) => state.updatePermission);
     readonly featureDetails$: Observable<any> = this.select((state) => state.featureDetails);
     readonly createUpdateObject$: Observable<IFeature> = this.select((state) => state.createUpdateObject);
+    readonly usersError$ = this.select((state) => state.usersError);
     /** Get users data */
-    readonly getUsers = this.effect((data: Observable<IUserReq>) => {
-        return data.pipe(
-            switchMap((req: IUserReq) => {
-                this.patchState({ isLoading: true });
+    readonly getUsers = this.effect((data: Observable<IUserReq>) =>
+        data.pipe(
+            switchMap((req) => {
+                this.patchState({ isLoading: true, users: null, usersError: null });
                 return this.service.getUsers(req).pipe(
                     tapResponse(
                         (res: BaseResponse<IPaginatedResponse<IUser[]>, IUserReq>) => {
-                            if (res?.hasError) {
-                                this.showError(res?.errors);
-                            }
-                            return this.patchState({
+                            const valid = !res?.hasError && Array.isArray(res?.data?.data);
+                            this.patchState({
                                 isLoading: false,
-                                users: res?.data,
+                                users: valid ? res.data : null,
+                                usersError: valid
+                                    ? null
+                                    : 'People could not be loaded. Retry or check your workspace access.',
                             });
                         },
-                        (error: any) => {
-                            this.showError(error?.errors);
-                            return this.patchState({
+                        (error: any) =>
+                            this.patchState({
                                 isLoading: false,
                                 users: null,
-                            });
-                        }
+                                usersError:
+                                    error?.status === 403 || error?.errorCode === 403
+                                        ? 'You need permission to view users in this workspace. Ask an administrator.'
+                                        : 'People could not be loaded. Check your connection and retry.',
+                            })
                     ),
-                    catchError((err) => EMPTY)
+                    catchError(() => EMPTY)
                 );
             })
-        );
-    });
+        )
+    );
 
     readonly getRoles = this.effect((data: Observable<any>) => {
         return data.pipe(
diff --git a/apps/36-blocks/src/app/website/about/about.component.html b/apps/36-blocks/src/app/website/about/about.component.html
index 03085c85..4c322e34 100644
--- a/apps/36-blocks/src/app/website/about/about.component.html
+++ b/apps/36-blocks/src/app/website/about/about.component.html
@@ -1,120 +1,40 @@
-<main class="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
-    <!-- Hero -->
-    <section class="mb-16 text-center" aria-labelledby="about-heading" wsReveal="up">
-        <h1
-            id="about-heading"
-            class="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#f0f6fc] tracking-tight mb-6 leading-[1.1]"
-        >
-            Built for developers.<br />
-            <span class="text-teal-400">Shared identity for connected apps.</span>
-        </h1>
-        <p class="text-lg text-[#8b949e] max-w-2xl mx-auto leading-relaxed">
-            36Blocks was created to remove the burden of building authentication from scratch. We believe every
-            developer should be able to configure authentication, understand failures, and enforce application access
-            with clear boundaries.
-        </p>
-    </section>
-
-    <!-- Mission -->
-    <section
-        class="rounded-2xl border border-teal-400/20 bg-[#0f1f1e] p-10 mb-10 text-center ws-hover-glow"
-        aria-labelledby="about-mission"
-        wsReveal="scale"
-    >
-        <h2 id="about-mission" class="text-2xl font-bold text-[#f0f6fc] mb-4">Our Mission</h2>
-        <p class="text-[#8b949e] text-base leading-relaxed max-w-2xl mx-auto">
-            To make secure user authentication and access management a solved problem — so SaaS founders, indie
-            developers, and engineering teams can focus on what actually differentiates their products.
-        </p>
-    </section>
-
-    <!-- Values -->
-    <section class="mb-14" aria-labelledby="about-values">
-        <h2 id="about-values" class="text-2xl font-bold text-[#f0f6fc] mb-8 text-center">What We Stand For</h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            @for (value of values; track value.title) {
-                <div
-                    class="rounded-xl border border-[#21262d] bg-[#161b22] p-6 ws-hover-lift ws-hover-glow text-center sm:text-left"
-                    wsReveal="up"
-                >
-                    <div class="feature-main-icon mx-auto sm:mx-0" aria-hidden="true">
-                        <svg
-                            class="w-5 h-5 text-teal-400"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            aria-hidden="true"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" [attr.d]="value.iconPath" />
-                        </svg>
-                    </div>
-                    <h3 class="text-base font-bold text-[#f0f6fc] mb-2">{{ value.title }}</h3>
-                    <p class="text-sm text-[#8b949e] leading-relaxed">{{ value.description }}</p>
-                </div>
-            }
-        </div>
-    </section>
-
-    <!-- Stats -->
-    <section class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-14" aria-label="36Blocks by the numbers">
-        @for (stat of stats; track stat.label) {
-            <div class="rounded-xl border border-[#21262d] bg-[#161b22] p-6 text-center ws-hover-lift" wsReveal="up">
-                <p class="text-3xl font-extrabold text-teal-400 tracking-tight">{{ stat.value }}</p>
-                <p class="text-xs text-[#8b949e] mt-1">{{ stat.label }}</p>
+<section class="content-page section-width">
+    <p class="eyebrow">OUR APPROACH</p>
+    <h1>Clarity is<br />a product feature.</h1>
+    <p class="content-lead">
+        36blocks brings application authentication, people, and investigation into an internal workspace for our teams.
+    </p>
+    <p>
+        Developers should be able to answer a few practical questions without assembling the story across disconnected
+        screens: what is connected, who has access, what happened, and what to do next.
+    </p>
+    <div class="journey-links">
+        <article class="journey-link">
+            <div>
+                <strong>Start with the outcome</strong>
+                <p>Configure a block, connect your application, and verify that sign-in works.</p>
             </div>
-        }
-    </section>
-
-    <!-- What we build -->
-    <section
-        class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 mb-10 ws-hover-glow"
-        aria-labelledby="about-product"
-        wsReveal="up"
-    >
-        <h2 id="about-product" class="text-xl font-bold text-[#f0f6fc] mb-4">What We Build</h2>
-        <p class="text-sm text-[#8b949e] leading-relaxed mb-5">
-            36Blocks is a complete authentication infrastructure layer. Drop our widget into any web app and get instant
-            support for:
-        </p>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            @for (feature of productFeatures; track feature) {
-                <div class="flex items-center gap-2 text-sm text-[#c9d1d9]">
-                    <svg
-                        class="w-4 h-4 text-teal-400 flex-shrink-0"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        stroke-width="2.5"
-                        aria-hidden="true"
-                    >
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                    </svg>
-                    {{ feature }}
-                </div>
-            }
-        </div>
-    </section>
-
-    <!-- CTA -->
-    <section class="text-center py-8" aria-labelledby="about-cta" wsReveal="up">
-        <h2 id="about-cta" class="text-2xl font-bold text-[#f0f6fc] mb-4">Ready to get started?</h2>
-        <p class="text-[#8b949e] mb-6">
-            Explore the configured capabilities and read the integration guide before connecting your application.
-        </p>
-        <div class="flex items-center justify-center gap-4 flex-wrap">
-            <a
-                routerLink="/register"
-                class="px-6 py-2.5 rounded-sm font-bold text-sm bg-teal-400 text-[#0d1117] no-underline transition-all duration-200 hover:-translate-y-px"
-            >
-                Get Started Free
-            </a>
-            <a
-                routerLink="/pricing"
-                class="px-6 py-2.5 rounded-sm font-semibold text-sm border border-teal-400/40 text-teal-400 no-underline transition-all duration-200 hover:border-teal-400 hover:-translate-y-px"
-            >
-                View Pricing
-            </a>
-        </div>
-    </section>
-</main>
+        </article>
+        <article class="journey-link">
+            <div>
+                <strong>Keep context close</strong>
+                <p>Keep users, their application, and recorded operator actions connected.</p>
+            </div>
+        </article>
+        <article class="journey-link">
+            <div>
+                <strong>Respect boundaries</strong>
+                <p>
+                    Keep tenant administration separate from platform operations. Your application owns its resource
+                    permissions.
+                </p>
+            </div>
+        </article>
+    </div>
+    <p>
+        Our focus today is the verified capabilities of the current product. Broader identity infrastructure for
+        applications and AI agents remains a future direction.
+    </p>
+    <a class="action-primary" href="https://developers.36blocks.com">Explore developer documentation ↗</a
+    ><a class="action-text" routerLink="/login">Open your workspace →</a>
+</section>
diff --git a/apps/36-blocks/src/app/website/about/about.component.ts b/apps/36-blocks/src/app/website/about/about.component.ts
index 1e4d469d..28c9dbda 100644
--- a/apps/36-blocks/src/app/website/about/about.component.ts
+++ b/apps/36-blocks/src/app/website/about/about.component.ts
@@ -1,93 +1,21 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
-import { Meta, Title } from '@angular/platform-browser';
+import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { ScrollRevealDirective } from '../directives/scroll-reveal.directive';
-
+import { Meta, Title } from '@angular/platform-browser';
 @Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-about',
-    imports: [RouterModule, ScrollRevealDirective],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [RouterModule],
     templateUrl: './about.component.html',
 })
 export class AboutComponent implements OnInit {
-    private readonly titleService = inject(Title);
-    private readonly metaService = inject(Meta);
-
-    public ngOnInit(): void {
-        this.titleService.setTitle('About Us — 36Blocks');
-        this.metaService.updateTag({
+    private readonly title = inject(Title);
+    private readonly meta = inject(Meta);
+    ngOnInit(): void {
+        this.title.setTitle('Our approach — 36blocks');
+        this.meta.updateTag({
             name: 'description',
-            content:
-                '36Blocks is a developer-first authentication platform. Learn about our mission, values, and the team building secure, plug-and-play auth for SaaS teams worldwide.',
-        });
-        this.metaService.updateTag({ name: 'robots', content: 'index, follow' });
-        this.metaService.updateTag({ property: 'og:title', content: 'About Us — 36Blocks' });
-        this.metaService.updateTag({
-            property: 'og:description',
-            content: 'Built for developers. Shared identity for connected apps. Learn about 36Blocks.',
+            content: 'Clarity for application authentication, people and investigation. Built for our internal teams.',
         });
-        this.metaService.updateTag({ property: 'og:type', content: 'website' });
+        this.meta.updateTag({ property: 'og:title', content: 'Our approach — 36blocks' });
     }
-
-    public readonly values: { title: string; description: string; iconPath: string }[] = [
-        {
-            title: 'Developer First',
-            description:
-                'APIs, the browser widget, and dashboard features is designed to reduce friction for engineering teams.',
-            iconPath: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
-        },
-        {
-            title: 'Configurable Security',
-            description:
-                'Configure authentication providers and bot protection for your block. Validate the complete access flow in your environment.',
-            iconPath:
-                'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z',
-        },
-        {
-            title: 'Transparent Pricing',
-            description: 'Confirm enabled plans, usage limits, and commercial terms with the team before purchase.',
-            iconPath:
-                'M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-        },
-        {
-            title: 'Clear Boundaries',
-            description:
-                'Integrate through existing APIs and the browser widget. Your application owns its business permissions.',
-            iconPath:
-                'M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
-        },
-        {
-            title: 'Fast Integration',
-            description:
-                'Mount the widget using your block reference ID, configure providers, and verify your server session flow.',
-            iconPath: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
-        },
-        {
-            title: 'Practical Operations',
-            description:
-                'Inspect request logs, usage views, and recorded sensitive operations while supporting your users.',
-            iconPath:
-                'M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941',
-        },
-    ];
-
-    public readonly stats: { value: string; label: string }[] = [
-        { value: 'Widget', label: 'Browser integration' },
-        { value: 'API', label: 'Server integration' },
-        { value: 'Users', label: 'Identity management' },
-        { value: 'Logs', label: 'Request investigation' },
-    ];
-
-    public readonly productFeatures: string[] = [
-        'Email & password authentication',
-        'Google & Apple social login',
-        'OTP via SMS or email',
-        'Role-Based Access Control (RBAC)',
-        'hCaptcha bot protection',
-        'User analytics & request logs',
-        'Customisable branding & themes',
-        'Multi-organisation support',
-        'Configurable session expiry',
-        'APIs & browser widget',
-    ];
 }
diff --git a/apps/36-blocks/src/app/website/contact/contact.component.html b/apps/36-blocks/src/app/website/contact/contact.component.html
index b3311f26..ee53b8e4 100644
--- a/apps/36-blocks/src/app/website/contact/contact.component.html
+++ b/apps/36-blocks/src/app/website/contact/contact.component.html
@@ -1,35 +1,35 @@
-<main class="max-w-[720px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
+<div class="max-w-[720px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
     <!-- Hero -->
     <section class="mb-14 text-center" aria-labelledby="contact-heading" wsReveal="up">
         <h1
             id="contact-heading"
-            class="text-4xl sm:text-5xl font-bold text-[#f0f6fc] tracking-tight mb-5 leading-[1.1]"
+            class="text-4xl sm:text-5xl font-bold text-[#202d1d] tracking-tight mb-5 leading-[1.1]"
         >
             Get in Touch
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
+        <p class="text-lg text-[#5e6c56] max-w-xl mx-auto leading-relaxed">
             Have a question, integration issue, or billing enquiry? We're here to help.
         </p>
     </section>
 
     <!-- Contact Form -->
     <section
-        class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 mb-6"
+        class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 mb-6"
         aria-labelledby="contact-form-heading"
         wsReveal="up"
     >
-        <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send us a message</h2>
-        <p class="text-sm text-[#8b949e] mb-7">Fill in the form and we'll get back to you within 24 hours.</p>
+        <h2 id="contact-form-heading" class="text-xl font-bold text-[#202d1d] mb-1">Send us a message</h2>
+        <p class="text-sm text-[#5e6c56] mb-7">Fill in the form and we'll get back to you within 24 hours.</p>
 
         <!-- Success state -->
         @if (submitSuccess()) {
             <div
-                class="flex items-start gap-4 rounded-xl border border-teal-400/30 bg-teal-400/5 px-5 py-4 mb-6"
+                class="flex items-start gap-4 rounded-xl border border-teal-400/30 bg-[#dce9d4]/5 px-5 py-4 mb-6"
                 role="alert"
                 aria-live="polite"
             >
                 <svg
-                    class="w-5 h-5 text-teal-400 flex-shrink-0 mt-0.5"
+                    class="w-5 h-5 text-[#3c6533] flex-shrink-0 mt-0.5"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -43,8 +43,8 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                     />
                 </svg>
                 <div>
-                    <p class="text-sm font-semibold text-teal-400">Message sent!</p>
-                    <p class="text-sm text-[#8b949e] mt-0.5">Thanks for reaching out. We'll reply within 24 hours.</p>
+                    <p class="text-sm font-semibold text-[#3c6533]">Message sent!</p>
+                    <p class="text-sm text-[#5e6c56] mt-0.5">Thanks for reaching out. We'll reply within 24 hours.</p>
                 </div>
             </div>
         }
@@ -53,8 +53,8 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
             <!-- Name + Email row -->
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                 <div>
-                    <label for="contact-name" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Full name <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="contact-name" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Full name <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <input
                         id="contact-name"
@@ -65,12 +65,12 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                         aria-required="true"
                         [attr.aria-invalid]="isFieldInvalid('name') ? 'true' : null"
                         aria-describedby="contact-name-error"
-                        class="block w-full rounded-lg border bg-[#0d1117] px-3.5 py-2.5 text-sm text-[#f0f6fc] placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                        class="block w-full rounded-lg border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
                         [class.border-red-500]="isFieldInvalid('name')"
                         [class.border-[#30363d]]="!isFieldInvalid('name')"
                     />
                     @if (isFieldInvalid('name')) {
-                        <p id="contact-name-error" class="mt-1.5 text-xs text-red-400" role="alert">
+                        <p id="contact-name-error" class="mt-1.5 text-xs text-red-700" role="alert">
                             @if (contactForm.get('name')?.errors?.['required']) {
                                 Name is required.
                             } @else if (contactForm.get('name')?.errors?.['minlength']) {
@@ -81,8 +81,8 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                 </div>
 
                 <div>
-                    <label for="contact-email" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Email address <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="contact-email" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Email address <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <input
                         id="contact-email"
@@ -93,12 +93,12 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                         aria-required="true"
                         [attr.aria-invalid]="isFieldInvalid('email') ? 'true' : null"
                         aria-describedby="contact-email-error"
-                        class="block w-full rounded-lg border bg-[#0d1117] px-3.5 py-2.5 text-sm text-[#f0f6fc] placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                        class="block w-full rounded-lg border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
                         [class.border-red-500]="isFieldInvalid('email')"
                         [class.border-[#30363d]]="!isFieldInvalid('email')"
                     />
                     @if (isFieldInvalid('email')) {
-                        <p id="contact-email-error" class="mt-1.5 text-xs text-red-400" role="alert">
+                        <p id="contact-email-error" class="mt-1.5 text-xs text-red-700" role="alert">
                             @if (contactForm.get('email')?.errors?.['required']) {
                                 Email is required.
                             } @else if (contactForm.get('email')?.errors?.['email']) {
@@ -111,15 +111,15 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
 
             <!-- Category -->
             <div>
-                <label for="contact-category" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                    Category <span class="text-red-400" aria-hidden="true">*</span>
+                <label for="contact-category" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                    Category <span class="text-red-700" aria-hidden="true">*</span>
                 </label>
                 <div class="relative">
                     <select
                         id="contact-category"
                         formControlName="category"
                         aria-required="true"
-                        class="block w-full appearance-none rounded-lg border border-[#30363d] bg-[#0d1117] pl-3.5 pr-9 py-2.5 text-sm text-[#f0f6fc] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                        class="block w-full appearance-none rounded-lg border border-[#30363d] bg-[#f8f9f3] pl-3.5 pr-9 py-2.5 text-sm text-[#202d1d] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
                     >
                         @for (cat of categories; track cat) {
                             <option [value]="cat">{{ cat }}</option>
@@ -130,7 +130,7 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                         aria-hidden="true"
                     >
                         <svg
-                            class="w-4 h-4 text-[#484f58]"
+                            class="w-4 h-4 text-[#65735c]"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -145,8 +145,8 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
 
             <!-- Subject -->
             <div>
-                <label for="contact-subject" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                    Subject <span class="text-red-400" aria-hidden="true">*</span>
+                <label for="contact-subject" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                    Subject <span class="text-red-700" aria-hidden="true">*</span>
                 </label>
                 <input
                     id="contact-subject"
@@ -156,12 +156,12 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                     aria-required="true"
                     [attr.aria-invalid]="isFieldInvalid('subject') ? 'true' : null"
                     aria-describedby="contact-subject-error"
-                    class="block w-full rounded-lg border bg-[#0d1117] px-3.5 py-2.5 text-sm text-[#f0f6fc] placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                    class="block w-full rounded-lg border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
                     [class.border-red-500]="isFieldInvalid('subject')"
                     [class.border-[#30363d]]="!isFieldInvalid('subject')"
                 />
                 @if (isFieldInvalid('subject')) {
-                    <p id="contact-subject-error" class="mt-1.5 text-xs text-red-400" role="alert">
+                    <p id="contact-subject-error" class="mt-1.5 text-xs text-red-700" role="alert">
                         @if (contactForm.get('subject')?.errors?.['required']) {
                             Subject is required.
                         } @else if (contactForm.get('subject')?.errors?.['minlength']) {
@@ -173,8 +173,8 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
 
             <!-- Message -->
             <div>
-                <label for="contact-message" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                    Message <span class="text-red-400" aria-hidden="true">*</span>
+                <label for="contact-message" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                    Message <span class="text-red-700" aria-hidden="true">*</span>
                 </label>
                 <textarea
                     id="contact-message"
@@ -184,13 +184,13 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                     aria-required="true"
                     [attr.aria-invalid]="isFieldInvalid('message') ? 'true' : null"
                     aria-describedby="contact-message-error contact-message-hint"
-                    class="block w-full rounded-lg border bg-[#0d1117] px-3.5 py-2.5 text-sm text-[#f0f6fc] placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400 resize-y min-h-[120px]"
+                    class="block w-full rounded-lg border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400 resize-y min-h-[120px]"
                     [class.border-red-500]="isFieldInvalid('message')"
                     [class.border-[#30363d]]="!isFieldInvalid('message')"
                 ></textarea>
                 <div class="flex items-start justify-between mt-1.5">
                     @if (isFieldInvalid('message')) {
-                        <p id="contact-message-error" class="text-xs text-red-400" role="alert">
+                        <p id="contact-message-error" class="text-xs text-red-700" role="alert">
                             @if (contactForm.get('message')?.errors?.['required']) {
                                 Message is required.
                             } @else if (contactForm.get('message')?.errors?.['minlength']) {
@@ -198,9 +198,9 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                             }
                         </p>
                     } @else {
-                        <span id="contact-message-hint" class="text-xs text-[#484f58]">Minimum 20 characters</span>
+                        <span id="contact-message-hint" class="text-xs text-[#65735c]">Minimum 20 characters</span>
                     }
-                    <span class="text-xs text-[#484f58] ml-auto">
+                    <span class="text-xs text-[#65735c] ml-auto">
                         {{ contactForm.get('message')?.value?.length ?? 0 }} / 2000
                     </span>
                 </div>
@@ -214,7 +214,7 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                     aria-live="polite"
                 >
                     <svg
-                        class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"
+                        class="w-5 h-5 text-red-700 flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -228,18 +228,18 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
                         />
                     </svg>
                     <div>
-                        <p class="text-sm font-semibold text-red-400">Something went wrong</p>
-                        <p class="text-sm text-[#8b949e] mt-0.5">Failed to send your message. Please try again.</p>
+                        <p class="text-sm font-semibold text-red-700">Something went wrong</p>
+                        <p class="text-sm text-[#5e6c56] mt-0.5">Failed to send your message. Please try again.</p>
                     </div>
                 </div>
             }
 
             <!-- Submit -->
             <div class="flex items-center justify-between gap-4 pt-1 flex-wrap">
-                <p class="text-xs text-[#484f58]"><span class="text-red-400">*</span> Required fields</p>
+                <p class="text-xs text-[#65735c]"><span class="text-red-700">*</span> Required fields</p>
                 <button
                     type="submit"
-                    class="cursor-pointer inline-flex items-center gap-2 px-6 py-2.5 !rounded-sm bg-teal-400 text-[#0d1117] text-sm font-bold transition-all duration-200 hover:-translate-y-px hover:bg-teal-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 disabled:opacity-50 disabled:cursor-not-allowed disabled:translate-y-0"
+                    class="cursor-pointer inline-flex items-center gap-2 px-6 py-2.5 !rounded-sm bg-[#315b2b] text-white text-sm font-bold transition-all duration-200 hover:-translate-y-px hover:bg-[#24471f] focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 disabled:opacity-50 disabled:cursor-not-allowed disabled:translate-y-0"
                     [disabled]="isSubmitting() || (contactForm.invalid && submitted())"
                 >
                     @if (isSubmitting()) {
@@ -282,9 +282,9 @@ <h2 id="contact-form-heading" class="text-xl font-bold text-[#f0f6fc] mb-1">Send
     </section>
 
     <!-- Response time note -->
-    <div class="rounded-2xl border border-[#21262d] bg-[#161b22] p-7 text-center ws-hover-glow" wsReveal="up">
-        <p class="text-sm text-[#8b949e]">
-            Our typical response time is <strong class="text-[#c9d1d9]">under 24 hours</strong> on business days.
+    <div class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-7 text-center ws-hover-glow" wsReveal="up">
+        <p class="text-sm text-[#5e6c56]">
+            Our typical response time is <strong class="text-[#43523c]">under 24 hours</strong> on business days.
         </p>
     </div>
-</main>
+</div>
diff --git a/apps/36-blocks/src/app/website/contact/contact.component.ts b/apps/36-blocks/src/app/website/contact/contact.component.ts
index 6c97205d..d279eb9e 100644
--- a/apps/36-blocks/src/app/website/contact/contact.component.ts
+++ b/apps/36-blocks/src/app/website/contact/contact.component.ts
@@ -116,18 +116,11 @@ export class ContactComponent implements OnInit {
                         this.ngZone.run(() => setTimeout(() => this.submitSuccess.set(false), 5000));
                     } else {
                         this.submitError.set(true);
-                        this.ngZone.run(() => setTimeout(() => this.submitError.set(false), 5000));
                     }
                 },
                 error: (httpError) => {
-                    console.error(
-                        '%c❌ Contact form submission failed',
-                        'color: #f87171; font-weight: bold;',
-                        httpError
-                    );
                     this.isSubmitting.set(false);
                     this.submitError.set(true);
-                    this.ngZone.run(() => setTimeout(() => this.submitError.set(false), 5000));
                 },
             });
     }
diff --git a/apps/36-blocks/src/app/website/docs/docs.component.html b/apps/36-blocks/src/app/website/docs/docs.component.html
index 82ee386a..01d5b919 100644
--- a/apps/36-blocks/src/app/website/docs/docs.component.html
+++ b/apps/36-blocks/src/app/website/docs/docs.component.html
@@ -1,80 +1,11 @@
-<main class="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20 text-[#c9d1d9]">
-    <h1 class="text-4xl font-bold text-[#f0f6fc] mb-5">Authentication integration guide</h1>
-    <p class="mb-8 text-[#8b949e]">
-        Use the existing authentication widget with your configured block. This guide describes the current widget
-        contract; availability depends on your environment and enabled providers.
+<section class="content-page section-width">
+    <p class="eyebrow">DEVELOPER DOCUMENTATION</p>
+    <h1>Start with the source.</h1>
+    <p class="content-lead">Setup, integration, and API guidance for 36blocks lives at developers.36blocks.com.</p>
+    <p>
+        Follow the guidance for your deployed version and enabled authentication methods. Contact your team if access is
+        required.
     </p>
-    <section aria-labelledby="widget-setup" class="mb-10">
-        <h2 id="widget-setup" class="text-2xl font-semibold mb-4">1. Configure and mount the widget</h2>
-        <ol class="list-decimal pl-6 space-y-3 mb-5">
-            <li>
-                Create or select an authentication block in the panel and copy its reference ID. Configure login
-                methods, provider credentials, and allowed source domains for your application.
-            </li>
-            <li>
-                Replace both occurrences of <code>YOUR_REFERENCE_ID</code> with that ID. Authorization mode mounts into
-                the element whose ID exactly matches the reference ID.
-            </li>
-            <li>
-                Replace <code>WIDGET_ORIGIN</code> with the origin hosting the widget built for your API environment.
-                The widget build produces <code>/assets/proxy-auth/proxy-auth.js</code>. Load it before calling
-                <code>window.initVerification</code>.
-            </li>
-        </ol>
-        <pre
-            class="p-5 bg-[#161b22] rounded-xl border border-[#30363d] overflow-x-auto text-sm"
-        ><code>{{ example }}</code></pre>
-        <p class="mt-4 text-[#8b949e]">
-            The success callback is required. The example reports completion only; implement your application's private
-            server handoff before granting access. Never log the callback result, credentials, or session tokens.
-        </p>
-    </section>
-    <section aria-labelledby="session-boundary" class="mb-10">
-        <h2 id="session-boundary" class="text-2xl font-semibold mb-4">2. Establish your application session</h2>
-        <p class="mb-3">
-            A browser callback alone does not authorize access. Your backend must verify the authentication result using
-            the contract for your configured block and environment, check expiry and application membership, and
-            establish its own session. Do not assume the returned token is a JWT that your application can decode or
-            verify locally.
-        </p>
-        <p>
-            Keep credentials out of URLs, logs, analytics, and support screenshots. Confirm session expiration, logout,
-            and recovery behavior in your environment before launch.
-        </p>
-    </section>
-    <section aria-labelledby="membership-boundary" class="mb-10">
-        <h2 id="membership-boundary" class="text-2xl font-semibold mb-4">
-            3. Enforce membership and business permissions
-        </h2>
-        <p class="mb-3">
-            Identity, authentication, application membership, and business authorization are distinct. A shared identity
-            does not grant access to every application or organization. Your product must enforce tenant membership,
-            resource ownership, and business permissions on every protected server request.
-        </p>
-        <p>
-            Authenticated widget views use the fixed mount point <code>userProxyContainer</code> and require an
-            <code>authToken</code>. View types include <code>user-profile</code>, <code>user-management</code>, and
-            <code>organization-details</code>. Enable these only for authorized users; hiding a control does not enforce
-            a permission.
-        </p>
-    </section>
-    <section aria-labelledby="widget-checks" class="mb-10">
-        <h2 id="widget-checks" class="text-2xl font-semibold mb-4">4. Verify the complete flow</h2>
-        <ul class="list-disc pl-6 space-y-3">
-            <li>Test on an approved source domain with the widget and API configured for the same environment.</li>
-            <li>
-                Confirm the mount element exists, the script loads, and the callback runs after a real configured login.
-            </li>
-            <li>Test invalid credentials, expired sessions, logout, and cross-organization access denial.</li>
-            <li>
-                Use request logs to investigate API failures. Sensitive-operation activity history covers instrumented
-                operations; it is not a complete history of every action.
-            </li>
-        </ul>
-        <p class="mt-5">
-            For an API integration contract or environment-specific setup,
-            <a routerLink="/contact" class="text-teal-400 underline">contact the team</a>. Review
-            <a routerLink="/security" class="text-teal-400 underline">security boundaries</a> before enabling access.
-        </p>
-    </section>
-</main>
+    <a class="action-primary" href="https://developers.36blocks.com">Open developer documentation ↗</a
+    ><a class="action-text" routerLink="/login">Return to your workspace →</a>
+</section>
diff --git a/apps/36-blocks/src/app/website/docs/docs.component.ts b/apps/36-blocks/src/app/website/docs/docs.component.ts
index de1dcddf..362f61cb 100644
--- a/apps/36-blocks/src/app/website/docs/docs.component.ts
+++ b/apps/36-blocks/src/app/website/docs/docs.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
-import { WIDGET_EXAMPLE } from './widget-example';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12,16 +11,14 @@ import { WIDGET_EXAMPLE } from './widget-example';
 export class DocsComponent implements OnInit {
     private readonly title = inject(Title);
     private readonly meta = inject(Meta);
-    public readonly example = WIDGET_EXAMPLE;
 
     public ngOnInit(): void {
-        this.title.setTitle('Integration guide — 36Blocks');
+        this.title.setTitle('Developer documentation — 36blocks');
         this.meta.updateTag({
             name: 'description',
-            content:
-                'Mount the 36Blocks authentication widget and understand application, session, and permission boundaries.',
+            content: 'Open the canonical 36blocks developer documentation for setup, integration and API guidance.',
         });
-        this.meta.updateTag({ property: 'og:title', content: 'Integration guide — 36Blocks' });
+        this.meta.updateTag({ property: 'og:title', content: 'Developer documentation — 36blocks' });
         this.meta.updateTag({
             property: 'og:description',
             content: 'Widget configuration and application security boundaries.',
diff --git a/apps/36-blocks/src/app/website/home/home.component.html b/apps/36-blocks/src/app/website/home/home.component.html
index af3d3a1e..7c9f907a 100644
--- a/apps/36-blocks/src/app/website/home/home.component.html
+++ b/apps/36-blocks/src/app/website/home/home.component.html
@@ -1,418 +1,234 @@
-<!-- ─── HERO ─────────────────────────────────────────── -->
-<main
-    id="main-content"
-    class="relative z-[1] grid grid-cols-1 lg:grid-cols-2 items-center gap-20 max-w-[1400px] mx-auto md:gap-12 px-4 pt-8 pb-16 md:px-8 sm:px-5 lg:px-18"
-    role="main"
->
-    <!-- Decorative: dot grid + orbs -->
-    <div
-        class="absolute inset-0 pointer-events-none z-0 [background-image:radial-gradient(circle,rgba(45,212,191,0.12)_1px,transparent_1px)] [background-size:32px_32px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,black_20%,transparent_100%)]"
-        aria-hidden="true"
-    ></div>
-    <div
-        class="absolute -top-40 -left-40 w-[520px] h-[520px] rounded-full pointer-events-none z-0 blur-[80px] [background:radial-gradient(circle,rgba(45,212,191,0.12)_0%,transparent_70%)] animate-[glowPulse_6s_ease-in-out_infinite]"
-        aria-hidden="true"
-    ></div>
-    <div
-        class="absolute bottom-0 right-0 w-[380px] h-[380px] rounded-full pointer-events-none z-0 blur-[80px] [background:radial-gradient(circle,rgba(59,130,246,0.07)_0%,transparent_70%)] animate-[glowPulse_10s_ease-in-out_infinite]"
-        aria-hidden="true"
-    ></div>
-
-    <!-- Left: Copy -->
-    <div class="relative z-[1] flex flex-col gap-7 items-center lg:items-start">
-        <div
-            class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium w-fit anim-fade-up stagger-1"
-            [class]="accent.pillBadge"
-            aria-hidden="true"
-        >
-            <span class="w-2 h-2 rounded-full animate-pulse bg-teal-400"></span>
-            Plug &amp; Play Authentication
-        </div>
-
-        <h1
-            class="leading-[1.08] text-center lg:text-left font-bold text-[#f0f6fc] m-0 tracking-[-2px] text-[36px] md:text-[44px] lg:text-[48px] anim-fade-up stagger-2"
-        >
-            <span class="shimmer-text">Secure Auth</span> &amp; User<br />Management for<br />Modern Apps
-        </h1>
-
-        <p
-            class="text-[17px] leading-relaxed text-[#8b949e] text-center lg:text-left max-w-[460px] m-0 anim-fade-up stagger-3"
-        >
-            Configure user signup, login, roles, and access controls for your application. Investigate failures and
-            manage users from one panel.
-        </p>
-
-        <div
-            class="flex flex-col gap-2 px-5 py-4 bg-[#161b22] border border-[#21262d] border-teal-400/20 rounded-2xl max-w-[420px] anim-fade-up stagger-4"
-            aria-live="polite"
-            aria-label="Platform description"
-        >
-            <span class="text-[15px] font-medium leading-relaxed text-teal-400"
-                >A developer-friendly authentication platform with social login, OTP, analytics, and role-based access
-                control.</span
-            >
-        </div>
-
-        <div class="flex gap-3 flex-col md:flex-row anim-fade-up stagger-5" role="group" aria-label="Primary actions">
-            <button
-                class="cursor-pointer border-0 px-5 py-2 !rounded-sm font-semibold text-sm btn-cta-glow"
-                [class]="accent.btnPrimary"
-                (click)="login()"
-                aria-label="Explore the 36Blocks platform"
-            >
-                Explore Platform
-            </button>
-            <button
-                class="cursor-pointer px-5 py-2 !rounded-sm bg-transparent border border-[#21262d] text-[#c9d1d9] font-semibold text-sm transition-all duration-200 hover:border-teal-400/50 hover:-translate-y-px"
-                routerLink="/docs"
-                aria-label="View 36Blocks documentation"
-            >
-                View Documentation
-            </button>
-        </div>
-
-        <ul
-            class="flex list-none p-0 m-0 md:gap-6 flex-wrap gap-4 anim-fade-up stagger-6"
-            aria-label="Key features"
-            role="list"
-        >
-            @for (badge of heroBadges; track badge.label) {
-                <li class="flex items-center gap-2 text-[#8b949e] text-sm" role="listitem">
-                    <mat-icon class="!text-base !w-4 text-teal-400" aria-hidden="true">check_circle</mat-icon>
-                    {{ badge.label }}
-                </li>
-            }
-        </ul>
-
-        <!-- Stats row -->
-        <ul
-            class="grid w-full sm:w-1/2 list-none p-0 m-0 gap-3 pt-2 border-t border-teal-400/10 anim-fade-up stagger-7 grid-cols-2"
-            aria-label="Platform statistics"
-            role="list"
-        >
-            @for (stat of heroStats; track stat.label) {
-                <li
-                    class="stat-card bg-[#161b22] border border-[#21262d] border-teal-400/10 rounded-xl px-3 py-3 text-center"
-                    role="listitem"
-                >
-                    <p class="m-0 text-[22px] font-bold text-teal-400 leading-none">{{ stat.value }}</p>
-                    <p class="m-0 text-[11px] text-[#8b949e] mt-1 leading-tight">{{ stat.label }}</p>
-                </li>
-            }
-        </ul>
-    </div>
-
-    <!-- Right: Code Card -->
-    <div class="relative z-[1] anim-fade-right stagger-3 sm:mx-2" aria-label="Code integration example">
-        <!-- Spinning decorative ring -->
-        <div
-            class="absolute -inset-6 rounded-3xl border border-teal-400/10 ring-spin pointer-events-none"
-            aria-hidden="true"
-        ></div>
-        <div
-            class="absolute -inset-12 rounded-[40px] border border-teal-400/5 ring-spin pointer-events-none"
-            style="animation-direction: reverse; animation-duration: 28s"
-            aria-hidden="true"
-        ></div>
-
-        @for (badge of floatingBadges; track badge.text) {
-            <div
-                class="absolute -top-3 z-[2] inline-flex items-center gap-1.5 px-3 bg-[#161b22] border border-[#21262d] rounded-full text-xs font-medium text-[#c9d1d9] shadow-lg"
-                [class.left-5]="badge.side === 'left'"
-                [class.right-5]="badge.side === 'right'"
-                [class.py-1.5]="badge.side === 'left'"
-                [class.py-0.5]="badge.side === 'right'"
-                aria-hidden="true"
-            >
-                @if (badge.dot) {
-                    <span class="w-2 h-2 rounded-full" [class]="badge.dot"></span>
-                }
-                @if (badge.icon) {
-                    <mat-icon class="!text-base !w-4 text-teal-400" aria-hidden="true">{{ badge.icon }}</mat-icon>
-                }
-                {{ badge.text }}
-            </div>
-        }
-
-        <figure
-            class="bg-[#161b22] border border-[#21262d] border-teal-400/15 overflow-hidden rounded-2xl shadow-[0_30px_80px_rgba(0,0,0,0.5)] animate-[floatUp_7s_ease-in-out_infinite] m-0"
-            aria-label="Widget integration code sample"
-        >
-            <div
-                class="flex items-center gap-3 px-5 pt-6 pb-3 bg-black/30 border-b border-teal-400/10"
-                aria-hidden="true"
-            >
-                <div class="flex gap-2">
-                    @for (dot of macDots; track dot) {
-                        <span class="w-3 h-3 rounded-full" [class]="dot"></span>
-                    }
-                </div>
-                <span class="text-[#8b949e] text-[13px] ml-2">proxy-auth.js</span>
-                <span class="ml-auto text-[11px] px-2 py-0.5 rounded-full bg-teal-400/10 text-teal-400"
-                    >JavaScript</span
-                >
-            </div>
-            <pre
-                class="m-0 bg-transparent border-0 overflow-x-auto px-6 py-5 text-sm leading-[1.8]"
-                role="region"
-                aria-label="JavaScript integration snippet"
-            ><code class="block font-mono">{{ codeSnippet }}</code></pre>
-            <figcaption
-                class="flex items-center justify-between mx-5 mb-5 px-4 py-2.5 rounded-xl text-[#c9d1d9] text-[13px] font-medium bg-teal-400/10 border border-teal-400/20"
-            >
-                <span class="flex items-center gap-1.5">
-                    <mat-icon class="!text-base !w-4 text-teal-400" aria-hidden="true">bolt</mat-icon>
-                    Widget setup
-                </span>
-                <span class="flex items-center gap-1 text-teal-400/70 text-[11px]">
-                    <mat-icon class="!text-base !w-4" aria-hidden="true">verified</mat-icon>
-                    Production ready
-                </span>
-            </figcaption>
-        </figure>
-    </div>
-</main>
-
-<!-- ─── SECTION: Customizable Auth Forms ─────────────── -->
-<section
-    class="section-forms-grid relative z-[1] w-fit grid items-center gap-16 max-w-[1400px] mx-auto xl:grid-cols-2 grid-cols-1 md:gap-12 sm:gap-8 px-4 py-16 md:px-8 md:py-20 sm:px-5 sm:py-16 lg:px-18 lg:py-28"
-    aria-labelledby="forms-heading"
->
-    <div class="form-preview-grid relative grid items-start gap-4 sm:gap-3" aria-hidden="true">
-        <div class="col1-row1 bg-[#161b22] themed-card border border-teal-400/15 rounded-xl px-4 py-3">
-            <span class="block text-xs themed-text-secondary mb-2.5">Colour</span>
-            <div class="flex gap-2">
-                @for (color of themeColors; track color.hex) {
-                    <span
-                        class="w-6 h-6 rounded-[6px] cursor-pointer transition-all duration-200"
-                        [style.background-color]="color.hex"
-                        [style.outline]="selectedColor === color.hex ? '2px solid ' + color.hex : 'none'"
-                        [style.outline-offset]="selectedColor === color.hex ? '2px' : '0'"
-                        [style.transform]="selectedColor !== color.hex ? 'scale(1.1)' : 'scale(1)'"
-                        (click)="selectColor(color.hex)"
-                    ></span>
-                }
+<div class="home-page">
+    <section class="hero section-width" aria-labelledby="hero-title">
+        <div class="hero-copy">
+            <p class="eyebrow"><span class="status-dot"></span> Built for our teams. Ready for the work.</p>
+            <h1 id="hero-title">Your applications.<br />Your people.<br /><span>A clearer picture.</span></h1>
+            <p class="hero-description">
+                Bring authentication, user access, and investigation into one workspace. Less time connecting the dots.
+                More time building what matters.
+            </p>
+            <div class="hero-actions">
+                <a class="action-primary" routerLink="/login">Open your workspace <span aria-hidden="true">↗</span></a
+                ><a class="action-text" href="#workspace">Take a closer look ↓</a>
             </div>
+            <p class="hero-note">36blocks is an internal platform. Team access is required.</p>
         </div>
-
-        <div
-            class="col2-rows relative"
-            [style.--bg-page]="themeVars['--bg-page']"
-            [style.--bg-card]="themeVars['--bg-card']"
-            [style.--bg-card2]="themeVars['--bg-card2']"
-            [style.--border]="themeVars['--border']"
-            [style.--text-primary]="themeVars['--text-primary']"
-            [style.--text-secondary]="themeVars['--text-secondary']"
-            [style.--text-body]="themeVars['--text-body']"
-        >
-            <div
-                class="text-center themed-card border rounded-2xl p-8 min-w-[280px] shadow-[0_20px_50px_rgba(0,0,0,0.3)]"
-            >
-                <div
-                    class="grid place-items-center w-12 h-12 text-[#0d1117] font-bold text-2xl mx-auto mb-5"
-                    [style.background-color]="selectedColor"
-                    [style.border-radius.px]="borderRadius"
-                >
-                    S
-                </div>
-                <h3 class="m-0 mb-6 themed-text-primary text-xl font-semibold">Sign in to SuperApp</h3>
-                @for (field of mockFormFields; track field.label) {
-                    <div class="text-left mb-4">
-                        <label class="block text-[13px] themed-text-body mb-2">{{ field.label }}</label>
-                        <div
-                            class="px-3.5 py-3 themed-card border themed-text-secondary text-sm"
-                            [style.border-radius.px]="borderRadius"
-                        >
-                            {{ field.placeholder }}
-                        </div>
-                    </div>
-                }
-                <button
-                    class="w-full cursor-pointer border-0 py-3 text-[#0d1117] font-semibold text-[15px] mb-5 transition-all duration-200"
-                    [style.background-color]="selectedColor"
-                    [style.border-radius.px]="borderRadius"
-                    tabindex="-1"
-                >
-                    Continue
-                </button>
-                <div
-                    class="or-divider flex items-center gap-3 mb-5 themed-text-secondary text-[13px]"
-                    [style.--divider-color]="themeVars['--border']"
-                >
-                    OR
+        <div class="hero-art" aria-label="Authentication, people and activity connected in one workspace">
+            <span class="art-caption mono">THE CONNECTED WORKSPACE / 36</span>
+            <div class="connection-line line-one"></div>
+            <div class="connection-line line-two"></div>
+            <div class="art-node node-app">
+                <span class="node-symbol">◫</span>
+                <div>
+                    <small>01 / CONNECT</small><strong>Your application</strong><span>Configured authentication</span>
                 </div>
-                <button
-                    class="w-full flex items-center justify-center gap-2.5 bg-transparent border py-3 themed-text-body font-medium text-sm mb-5 cursor-pointer"
-                    [style.border-color]="themeVars['--border']"
-                    [style.border-radius.px]="borderRadius"
-                    tabindex="-1"
-                >
-                    <span class="font-bold text-base">G</span> Continue with Google
-                </button>
-                <p class="m-0 text-[13px] themed-text-secondary">
-                    Don't have an account? <span class="cursor-pointer" [style.color]="selectedColor">Sign up</span>
-                </p>
+                <span class="node-check">✓</span>
             </div>
-        </div>
-
-        <div class="col3-row1 bg-[#161b22] themed-card border border-teal-400/15 rounded-xl px-4 py-3">
-            <span class="block text-xs themed-text-secondary mb-2.5">Logo icon</span>
-            <div class="flex gap-2">
-                <div
-                    class="grid place-items-center w-10 h-10 rounded-[10px] text-[#0d1117] font-semibold cursor-pointer bg-teal-400 border"
-                >
-                    S
+            <div class="art-node node-people">
+                <span class="node-symbol">◎</span>
+                <div>
+                    <small>02 / UNDERSTAND</small><strong>People & access</strong><span>Users, companies, roles</span>
                 </div>
-                <div
-                    class="grid place-items-center w-10 h-10 border-teal-400/15 rounded-[10px] themed-card border themed-text-body cursor-pointer"
-                >
-                    <mat-icon class="!text-xl !w-5">tune</mat-icon>
+            </div>
+            <div class="art-node node-activity">
+                <span class="node-symbol">↳</span>
+                <div>
+                    <small>03 / INVESTIGATE</small><strong>A useful trail</strong
+                    ><span>Requests and operator activity</span>
                 </div>
             </div>
         </div>
-
-        <div class="col1-row3 bg-[#161b22] themed-card border border-teal-400/15 rounded-xl px-4 py-3">
-            <span class="block text-xs themed-text-secondary mb-2.5">Radius — {{ borderRadius }}px</span>
-            <input
-                type="range"
-                min="0"
-                max="24"
-                [value]="borderRadius"
-                (input)="onRadiusChange($event)"
-                class="radius-slider w-full cursor-pointer"
-                [style.accent-color]="'rgb(45, 212, 191)'"
-                tabindex="-1"
-            />
-            <div class="flex justify-between mt-1">
-                <span class="w-6 h-2 rounded-full bg-gray-600"></span>
-                <span class="w-6 h-2 rounded-full bg-gray-600"></span>
+    </section>
+    <section class="workflow-strip section-width" aria-label="Questions we help answer">
+        <span>MAKE SENSE OF ACCESS</span>
+        <p>What is connected?</p>
+        <b aria-hidden="true">/</b>
+        <p>Who has access?</p>
+        <b aria-hidden="true">/</b>
+        <p>What happened?</p>
+    </section>
+    <section id="workspace" class="workspace-section section-width" aria-labelledby="workspace-title">
+        <div class="section-heading">
+            <div>
+                <p class="eyebrow">A WORKSPACE, NOT ANOTHER GUESS</p>
+                <h2 id="workspace-title">From a question<br />to a next step.</h2>
             </div>
+            <p>Start with an application. Find the person. <br />Follow the activity. Keep the context.</p>
         </div>
-
-        <div class="col3-row3 self-end rounded-xl px-4 py-3 border border-teal-400/15 bg-[#161b22]">
-            <span class="block text-xs mb-2.5">Appearance</span>
-            <div class="flex rounded-lg p-1 border border-teal-400/15">
-                @for (mode of appearanceModes; track mode.value) {
+        <div class="workspace-demo">
+            <div class="demo-sidebar">
+                <a class="brand" routerLink="/"><span class="brand-mark" aria-hidden="true">▦</span>36blocks</a>
+                <div class="demo-account">
+                    <span class="account-avatar">A</span> Acme workspace <span aria-hidden="true">⌄</span>
+                </div>
+                <span class="demo-nav-label">WORKSPACE</span>
+                @for (view of views; track view) {
                     <button
-                        [class]="
-                            'cursor-pointer border-0 px-3 py-1.5 grow !rounded-sm text-xs transition-all duration-200' +
-                            (selectedAppearance === mode.value ? ' bg-teal-400 text-dark' : '')
-                        "
-                        (click)="selectAppearance(mode.value)"
-                        tabindex="-1"
+                        type="button"
+                        [class.active]="selectedView() === view"
+                        (click)="selectedView.set(view)"
+                        [attr.aria-pressed]="selectedView() === view"
                     >
-                        {{ mode.label }}
+                        <span aria-hidden="true">{{
+                            view === 'Applications' ? '◫' : view === 'People' ? '◎' : '↳'
+                        }}</span
+                        >{{ view }}
                     </button>
                 }
+                <a class="demo-help" href="https://developers.36blocks.com">Developer documentation ↗</a>
+            </div>
+            <div class="demo-content" aria-live="polite">
+                <div class="demo-toolbar">
+                    <span>Acme / {{ selectedView() }}</span
+                    ><span class="demo-badge">Illustrative data</span>
+                </div>
+                @if (selectedView() === 'Applications') {
+                    <div class="demo-title">
+                        <div>
+                            <small>YOUR CONNECTED APPLICATIONS</small>
+                            <h3>A home for every login.</h3>
+                        </div>
+                        <span class="demo-count">02 applications</span>
+                    </div>
+                    <div class="demo-table">
+                        <div class="demo-row table-head">
+                            <span>APPLICATION</span><span>AUTHENTICATION</span><span>NEXT STEP</span>
+                        </div>
+                        <div class="demo-row">
+                            <span
+                                ><b class="app-avatar">P</b
+                                ><strong>People portal<small>Authentication block</small></strong></span
+                            ><span><i class="status-dot"></i> Email & password</span
+                            ><a href="https://developers.36blocks.com">View setup ↗</a>
+                        </div>
+                        <div class="demo-row">
+                            <span
+                                ><b class="app-avatar amber">S</b
+                                ><strong>Support desk<small>Authentication block</small></strong></span
+                            ><span><i class="status-dot"></i> Google sign-in</span
+                            ><a href="https://developers.36blocks.com">View setup ↗</a>
+                        </div>
+                    </div>
+                    <div class="demo-insight">
+                        <span>↳</span>
+                        <div>
+                            <strong>Configuration is the beginning.</strong>
+                            <p>Verify a login in your connected application before calling setup complete.</p>
+                        </div>
+                    </div>
+                } @else if (selectedView() === 'People') {
+                    <div class="demo-title">
+                        <div>
+                            <small>PEOPLE & ACCESS</small>
+                            <h3>Put a person in context.</h3>
+                        </div>
+                        <span class="demo-count">Example user</span>
+                    </div>
+                    <div class="person-example">
+                        <span class="person-avatar">AL</span>
+                        <div>
+                            <h4>Alex Lee</h4>
+                            <p>alex&#64;example.com · People portal</p>
+                        </div>
+                    </div>
+                    <div class="person-facts">
+                        <div><small>COMPANY</small><strong>Acme</strong></div>
+                        <div><small>ROLE</small><strong>Member</strong></div>
+                        <div><small>INVESTIGATE</small><strong>Operator activity →</strong></div>
+                    </div>
+                    <div class="demo-insight">
+                        <span>◎</span>
+                        <div>
+                            <strong>Identity with the right boundaries.</strong>
+                            <p>Manage memberships and roles. Your application enforces access to its own resources.</p>
+                        </div>
+                    </div>
+                } @else {
+                    <div class="demo-title">
+                        <div>
+                            <small>OPERATOR ACTIVITY</small>
+                            <h3>Understand the action.</h3>
+                        </div>
+                        <span class="demo-count">Example record</span>
+                    </div>
+                    <div class="activity-example">
+                        <span class="activity-icon">↳</span>
+                        <div>
+                            <strong>Login as · completed</strong>
+                            <p>Admin → Alex Lee · People portal</p>
+                            <blockquote>“Reproduce the reported sign-in issue.”</blockquote>
+                            <small>Actor, target, reason and outcome kept together.</small>
+                        </div>
+                        <span class="demo-badge">Audited action</span>
+                    </div>
+                    <div class="demo-insight">
+                        <span>↗</span>
+                        <div>
+                            <strong>Different evidence. One investigation.</strong>
+                            <p>Use request logs for API failures and Activity for instrumented operator actions.</p>
+                        </div>
+                    </div>
+                }
             </div>
         </div>
-    </div>
-
-    <div class="flex flex-col gap-7 items-center lg:items-start">
-        <div
-            class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium md:w-fit"
-            [class]="accent.pillBadge"
-            aria-hidden="true"
-        >
-            <span class="w-2 h-2 rounded-full animate-pulse bg-teal-400"></span>
-            Beautiful UI Components
-        </div>
-        <h2
-            id="forms-heading"
-            class="leading-[1.08] font-bold text-center lg:text-left text-[#f0f6fc] m-0 tracking-[-1.5px] text-[32px] md:text-[40px] lg:text-[44px]"
-        >
-            Customizable <span class="shimmer-text">Auth Forms</span><br />Ready to Deploy
-        </h2>
-        <p class="text-[17px] leading-relaxed text-[#8b949e] max-w-[400px] m-0">
-            Pre-built, beautiful authentication components that match your brand. Customize colors, radius, logos, and
-            more with our visual editor.
+        <p class="demo-disclosure">
+            Interactive illustration of supported workflows. Synthetic records; no live usage data.
         </p>
-        <ul
-            class="grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 list-none p-0 m-0 gap-4 mt-2 grid-cols-1 w-full"
-            aria-label="UI customisation features"
-            role="list"
-        >
-            @for (card of uiFeatureCards; track card.title) {
-                <li class="feature-card bg-[#161b22] border border-[#21262d] rounded-xl p-4" role="listitem">
-                    <div class="feature-main-icon">
-                        <mat-icon aria-hidden="true" class="!text-teal-400">{{ card.icon }}</mat-icon>
-                    </div>
-                    <h3 class="m-0 mb-1 text-[#f0f6fc] text-[16px] font-semibold">{{ card.title }}</h3>
-                    <p class="m-0 text-[#8b949e] text-[12px] leading-snug">{{ card.desc }}</p>
-                </li>
-            }
-        </ul>
-    </div>
-</section>
-
-<!-- ─── SECTIONS: Features + What You Can Build (unified) ─ -->
-@for (section of cardSections; track section.id) {
-    <section
-        class="relative z-[1] text-center max-w-[1400px] mx-auto px-4 py-16 md:px-8 md:py-20 sm:px-5 sm:py-16 lg:px-18 lg:py-28"
-        [attr.aria-labelledby]="section.headingId"
-    >
-        <div class="mb-16 sm:mb-8 relative z-[1]">
-            <h2
-                [id]="section.headingId"
-                class="text-[32px] leading-[1.12] font-bold text-[#f0f6fc] m-0 mb-5 tracking-[-1.5px] md:text-[44px]"
-            >
-                {{ section.label }} <span class="shimmer-text">{{ section.accentWord }}</span>
-            </h2>
-            @if (section.desc) {
-                <p class="text-[17px] leading-relaxed text-[#8b949e] max-w-[560px] mx-auto m-0">
-                    {{ section.desc }}
+    </section>
+    <section id="workflow" class="journeys section-width" aria-labelledby="journey-title">
+        <p class="eyebrow">BUILT AROUND THE WORK</p>
+        <h2 id="journey-title">Keep moving.<br />Keep your bearings.</h2>
+        <div class="journey-grid">
+            <article>
+                <span class="journey-number">01 / SET UP</span>
+                <h3>Give your app <br />a way in.</h3>
+                <p>
+                    Create an authentication block, choose supported login methods, and connect the widget. Verify the
+                    flow in your application.
+                </p>
+                <a href="https://developers.36blocks.com">Explore developer documentation ↗</a>
+            </article>
+            <article>
+                <span class="journey-number">02 / UNDERSTAND</span>
+                <h3>Find the person. <br />See the context.</h3>
+                <p>
+                    Find users by name or email. Filter by block and company, then follow their operator activity when
+                    you need to investigate.
+                </p>
+                <a routerLink="/login">Open your workspace ↗</a>
+            </article>
+            <article>
+                <span class="journey-number">03 / INVESTIGATE</span>
+                <h3>Make the next <br />action clear.</h3>
+                <p>
+                    Inspect request failures, review recorded operator actions, and reproduce a user issue with
+                    authorized, audited Login as.
                 </p>
-            }
+                <a routerLink="/security">Understand access boundaries ↗</a>
+            </article>
         </div>
-        <ul
-            class="grid list-none p-0 m-0 gap-5 relative z-[1]"
-            [class]="section.gridCols"
-            [attr.aria-label]="section.headingId"
-            role="list"
-        >
-            @for (card of section.cards; track card.title) {
-                <li class="feature-card text-left bg-[#161b22] border border-[#21262d] rounded-xl p-4" role="listitem">
-                    <div class="feature-main-icon">
-                        <mat-icon aria-hidden="true" class="!text-teal-400">{{ card.icon }}</mat-icon>
-                    </div>
-                    <h3 class="m-0 mb-1 text-[#f0f6fc] text-[16px] font-semibold">{{ card.title }}</h3>
-                    <p class="m-0 text-[#8b949e] text-[12px] leading-snug">{{ card.desc }}</p>
-                </li>
-            }
-        </ul>
     </section>
-}
-
-<!-- ─── CTA ──────────────────────────────────────────── -->
-<section
-    class="relative z-[1] text-center max-w-[1400px] mx-auto px-4 py-16 md:px-8 md:py-20 sm:px-5 sm:py-16 lg:px-18 lg:py-28 overflow-hidden"
-    aria-labelledby="cta-heading"
->
-    <div
-        class="absolute inset-0 opacity-40 pointer-events-none z-0 [background-image:radial-gradient(circle,rgba(45,212,191,0.12)_1px,transparent_1px)] [background-size:32px_32px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,black_20%,transparent_100%)]"
-        aria-hidden="true"
-    ></div>
-    <div
-        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[520px] h-[520px] rounded-full pointer-events-none z-0 blur-[80px] [background:radial-gradient(circle,rgba(45,212,191,0.12)_0%,transparent_70%)] animate-[glowPulse_6s_ease-in-out_infinite]"
-        aria-hidden="true"
-    ></div>
-    <div class="relative z-[1]">
-        <h2
-            id="cta-heading"
-            class="text-[32px] leading-[1.15] font-bold text-[#f0f6fc] m-0 mb-5 tracking-[-2px] md:text-[30px] lg:text-[44px]"
-        >
-            Stop Building Authentication.<br /><span class="shimmer-text">Start Building Your Product.</span>
-        </h2>
-        <p class="text-[18px] leading-relaxed text-[#8b949e] max-w-[540px] mx-auto m-0 mb-10 sm:text-base">
-            Handle user signup, login, security, and access control with a modern authentication and user management
-            platform.
-        </p>
-        <button
-            class="cursor-pointer border-0 px-8 py-2.5 !rounded-sm font-bold text-[15px] bg-teal-400 text-[#0d1117] btn-cta-glow"
-            routerLink="/register"
-            aria-label="Get started with 36Blocks for free"
-        >
-            Get Started Free
-        </button>
-    </div>
-</section>
+    <section class="developer-section section-width">
+        <div>
+            <p class="eyebrow">FOR THE PEOPLE BUILDING IT</p>
+            <h2>One product.<br />One source of guidance.</h2>
+            <p>
+                Setup, integration, and API guidance live together in our developer documentation. Follow the guidance
+                for your deployed version.
+            </p>
+            <a class="action-primary" href="https://developers.36blocks.com">Go to developer documentation ↗</a>
+        </div>
+        <div class="developer-index">
+            <span class="mono">DEVELOPERS.36BLOCKS.COM</span
+            ><a href="https://developers.36blocks.com">Configure authentication <span>↗</span></a
+            ><a href="https://developers.36blocks.com">Connect the widget <span>↗</span></a
+            ><a href="https://developers.36blocks.com">Understand users & access <span>↗</span></a>
+            <p>Available methods depend on your block configuration.<br />Confirm enabled providers with your team.</p>
+        </div>
+    </section>
+    <section class="closing section-width">
+        <span class="brand-mark" aria-hidden="true">▦</span>
+        <h2>Less guesswork.<br />More building.</h2>
+        <a class="action-primary" routerLink="/login">Open your workspace ↗</a>
+    </section>
+</div>
diff --git a/apps/36-blocks/src/app/website/home/home.component.scss b/apps/36-blocks/src/app/website/home/home.component.scss
index d27d6ba2..31ebb8ac 100644
--- a/apps/36-blocks/src/app/website/home/home.component.scss
+++ b/apps/36-blocks/src/app/website/home/home.component.scss
@@ -1,244 +1,700 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
-// ─── Custom grid column ratios ────────────────────────────────────────────────
-@media (min-width: 768px) {
-    .form-preview-grid {
-        grid-template-columns: auto 1fr auto;
-        grid-template-rows: auto 1fr auto;
-
-        .col1-row1 {
-            grid-column: 1;
-            grid-row: 1;
-        }
-        .col3-row1 {
-            grid-column: 3;
-            grid-row: 1;
-        }
-        .col2-rows {
-            grid-column: 2;
-            grid-row: 1 / 4;
-        }
-        .col1-row3 {
-            grid-column: 1;
-            grid-row: 3;
-        }
-        .col3-row3 {
-            grid-column: 3;
-            grid-row: 3;
-        }
-    }
-}
-
-// ─── OR divider ───────────────────────────────────────────────────────────────
-.or-divider {
-    &::before,
-    &::after {
-        content: '';
-        flex: 1;
-        height: 1px;
-        background-color: var(--divider-color, #21262d);
-    }
+:host {
+    display: block;
+}
+.hero {
+    display: grid;
+    grid-template-columns: 1.15fr 1fr;
+    align-items: center;
+    gap: 64px;
+    padding-block: 88px 80px;
+}
+h1 {
+    font-size: clamp(44px, 5vw, 72px);
+    line-height: 1.04;
+    letter-spacing: -0.065em;
+    font-weight: 500;
+    margin: 24px 0;
+}
+h1 span {
+    color: var(--experience-accent);
+}
+.hero-description {
+    font-size: 18px;
+    line-height: 1.75;
+    max-width: 490px;
+    color: var(--experience-muted);
+}
+.hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: center;
+    margin-top: 32px;
+}
+.hero-note {
+    font-size: 12px;
+    color: var(--experience-muted);
+    margin-top: 20px;
+}
+.hero-art {
+    position: relative;
+    height: 438px;
+    border: 1px solid var(--experience-border);
+    border-radius: 12px;
+    background: #e9eee7;
+    overflow: hidden;
+    background-image: radial-gradient(#bac8b9 0.7px, transparent 0.7px);
+    background-size: 18px 18px;
+}
+.art-caption {
+    position: absolute;
+    top: 22px;
+    left: 24px;
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    color: #556652;
+}
+.art-node {
+    position: absolute;
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    background: #fff;
+    border: 1px solid #d4dcd1;
+    border-radius: 10px;
+    padding: 20px;
+    width: calc(100% - 80px);
+    max-width: 330px;
+    box-shadow: 0 8px 20px #203b1910;
+}
+.art-node small,
+.art-node strong,
+.art-node div > span {
+    display: block;
+}
+.art-node small {
+    font:
+        9px ui-monospace,
+        monospace;
+    color: #697665;
+    letter-spacing: 0.08em;
+    margin-bottom: 7px;
+}
+.art-node strong {
+    font-size: 16px;
+}
+.art-node div > span {
+    font-size: 11px;
+    color: #697665;
+    margin-top: 4px;
+}
+.node-app {
+    top: 70px;
+    left: 24px;
+}
+.node-people {
+    top: 194px;
+    right: 24px;
+}
+.node-activity {
+    top: 318px;
+    left: 24px;
+    padding-block: 14px;
+}
+.node-symbol {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 42px;
+    height: 42px;
+    font-size: 26px;
+    color: #365836;
+    background: #eef3eb;
+    border: 1px solid #dbe3d6;
+    border-radius: 9px;
+}
+.node-check {
+    margin-left: auto;
+    color: #3b6736;
+}
+.connection-line {
+    position: absolute;
+    border: 1px dashed #8ca585;
+    width: 180px;
+    height: 70px;
+    border-top: 0;
+}
+.line-one {
+    top: 162px;
+    left: 100px;
+}
+.line-two {
+    top: 272px;
+    left: 100px;
+}
+.workflow-strip {
+    display: flex;
+    gap: 28px;
+    align-items: center;
+    border-block: 1px solid var(--experience-border);
+    padding-block: 23px;
+}
+.workflow-strip > span {
+    font:
+        10px ui-monospace,
+        monospace;
+    letter-spacing: 0.08em;
+    margin-right: auto;
+    color: var(--experience-muted);
+}
+.workflow-strip p {
+    font-size: 13px;
+    margin: 0;
+}
+.workflow-strip b {
+    color: #bdc5b9;
+    font-weight: 400;
+}
+.workspace-section {
+    padding-block: 88px;
+    scroll-margin-top: 90px;
+}
+.section-heading {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 30px;
+    margin-bottom: 34px;
+}
+.section-heading > p {
+    font-size: 15px;
+    line-height: 1.7;
+    color: var(--experience-muted);
+}
+.section-heading h2 {
+    margin-bottom: 0;
+}
+h2 {
+    font-size: clamp(32px, 3.2vw, 48px);
+    letter-spacing: -0.045em;
+    line-height: 1.1;
+    font-weight: 500;
+    margin: 18px 0 28px;
+}
+.workspace-demo {
+    display: grid;
+    grid-template-columns: 215px 1fr;
+    background: white;
+    border: 1px solid var(--experience-border);
+    border-radius: 12px;
+    min-height: 400px;
+    overflow: hidden;
+    box-shadow: 0 16px 44px #28382008;
+}
+.demo-sidebar {
+    padding: 24px 16px;
+    background: #f5f7f2;
+    border-right: 1px solid var(--experience-border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.demo-sidebar .brand {
+    font-size: 19px;
+    gap: 8px;
+    margin-bottom: 24px;
+}
+.demo-sidebar .brand-mark {
+    font-size: 26px;
+}
+.demo-account {
+    padding: 10px 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    border-block: 1px solid #e2e7dc;
+}
+.account-avatar {
+    display: grid;
+    place-items: center;
+    background: #e6eadd;
+    width: 25px;
+    height: 25px;
+    border-radius: 5px;
+}
+.demo-nav-label {
+    font:
+        9px ui-monospace,
+        monospace;
+    color: #6c7565;
+    letter-spacing: 0.1em;
+    margin: 22px 12px 8px;
+}
+.demo-sidebar button {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-align: left;
+    border: 0;
+    background: transparent;
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #57634f;
+    cursor: pointer;
+}
+.demo-sidebar button.active {
+    background: #e4ebdc;
+    color: #31572c;
+    font-weight: 600;
+}
+.demo-sidebar button > span {
+    font-size: 20px;
+}
+.demo-help {
+    font-size: 11px;
+    margin: auto 10px 0;
+    padding-top: 30px;
+    color: #69715f;
+}
+.demo-content {
+    padding: 0 30px 30px;
+    min-width: 0;
+}
+.demo-toolbar {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    align-items: center;
+    font-size: 11px;
+    color: #65715e;
+    border-bottom: 1px solid #e7ebe2;
+    min-height: 55px;
+}
+.demo-badge {
+    font-size: 10px;
+    border: 1px solid #dde4d7;
+    border-radius: 5px;
+    padding: 5px 8px;
+    background: #f6f8f2;
+    white-space: nowrap;
+}
+.demo-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 28px 0;
+    gap: 20px;
+}
+.demo-title small {
+    font:
+        9px ui-monospace,
+        monospace;
+    letter-spacing: 0.1em;
+    color: #67765c;
+}
+.demo-title h3 {
+    font-size: 24px;
+    letter-spacing: -0.04em;
+    margin: 8px 0 0;
+    font-weight: 500;
+}
+.demo-count {
+    font-size: 11px;
+    color: #74806b;
+}
+.demo-row {
+    display: grid;
+    grid-template-columns: 1.2fr 1fr 0.6fr;
+    gap: 14px;
+    align-items: center;
+    padding: 18px 0;
+    border-bottom: 1px solid #e9ece4;
+    font-size: 11px;
+}
+.demo-row > span:first-child {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.demo-row strong {
+    font-size: 12px;
+    font-weight: 500;
+}
+.demo-row small {
+    display: block;
+    font-size: 10px;
+    color: #7b8374;
+    font-weight: 400;
+    margin-top: 4px;
+}
+.demo-row > span:nth-child(2) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.table-head {
+    font:
+        9px ui-monospace,
+        monospace;
+    color: #738069;
+    padding: 12px 0;
+}
+.app-avatar {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    background: #e9efe4;
+    border: 1px solid #dce5d5;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+}
+.app-avatar.amber {
+    background: #f6efdd;
+    border-color: #eae0c8;
+}
+.demo-row a {
+    color: #3a6331;
+    text-align: right;
+}
+.demo-insight {
+    display: flex;
+    gap: 12px;
+    background: #f5f7f1;
+    border: 1px solid #e5eadd;
+    padding: 14px;
+    border-radius: 7px;
+    margin-top: 24px;
+    font-size: 11px;
+}
+.demo-insight > span {
+    font-size: 19px;
+    color: #57724b;
+}
+.demo-insight p {
+    margin: 5px 0 0;
+    line-height: 1.6;
+    color: #69775f;
+}
+.demo-disclosure {
+    text-align: center;
+    font-size: 11px;
+    color: #65705e;
+    margin: 16px 0 0;
+}
+.person-example {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    margin-bottom: 30px;
 }
-
-// ─── Keyframes ────────────────────────────────────────────────────────────────
-@keyframes floatUp {
-    0%,
-    100% {
-        transform: translateY(8px);
+.person-avatar {
+    background: #e6eddd;
+    padding: 15px;
+    border-radius: 50%;
+}
+.person-example h4 {
+    margin: 0;
+    font-size: 18px;
+}
+.person-example p {
+    font-size: 12px;
+    color: #65715e;
+}
+.person-facts {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1.5fr;
+    gap: 15px;
+    border-block: 1px solid #e7ebe1;
+    padding: 20px 0;
+}
+.person-facts small {
+    display: block;
+    font:
+        9px ui-monospace,
+        monospace;
+    margin-bottom: 8px;
+    color: #65715e;
+}
+.person-facts strong {
+    font-size: 12px;
+}
+.activity-example {
+    display: flex;
+    gap: 14px;
+    font-size: 13px;
+}
+.activity-icon {
+    background: #e6eddd;
+    border-radius: 8px;
+    padding: 12px;
+    height: 45px;
+}
+.activity-example p,
+.activity-example small {
+    font-size: 11px;
+    color: #6a7760;
+}
+.activity-example blockquote {
+    margin: 18px 0;
+    border-left: 2px solid #b7c8ab;
+    padding: 8px 12px;
+    font-size: 12px;
+}
+.activity-example .demo-badge {
+    align-self: start;
+    margin-left: auto;
+}
+.journeys {
+    padding-block: 0 88px;
+}
+.journey-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border-block: 1px solid var(--experience-border);
+    margin-top: 40px;
+}
+.journey-grid article {
+    padding: 32px 30px 32px 0;
+}
+.journey-grid article + article {
+    border-left: 1px solid var(--experience-border);
+    padding-left: 30px;
+}
+.journey-number {
+    font:
+        10px ui-monospace,
+        monospace;
+    color: #65705e;
+}
+.journey-grid h3 {
+    font-size: 26px;
+    font-weight: 500;
+    letter-spacing: -0.04em;
+    line-height: 1.18;
+    margin: 26px 0 18px;
+}
+.journey-grid p {
+    font-size: 14px;
+    line-height: 1.8;
+    color: var(--experience-muted);
+}
+.journey-grid a {
+    display: inline-block;
+    font-size: 12px;
+    margin-top: 20px;
+    color: var(--experience-accent);
+}
+.developer-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 90px;
+    padding: 58px;
+    background: #e9eee3;
+    border: 1px solid #dce4d3;
+    border-radius: 10px;
+}
+.developer-section p {
+    font-size: 14px;
+    line-height: 1.8;
+    color: var(--experience-muted);
+}
+.developer-section .action-primary {
+    margin-top: 15px;
+}
+.developer-index {
+    align-self: center;
+}
+.developer-index > .mono {
+    font-size: 10px;
+    color: #69795d;
+}
+.developer-index a {
+    display: flex;
+    justify-content: space-between;
+    font-size: 15px;
+    border-bottom: 1px solid #cfdac5;
+    padding: 22px 0;
+}
+.developer-index p {
+    font-size: 11px;
+    margin-top: 24px;
+}
+.closing {
+    text-align: center;
+    padding-block: 88px;
+}
+.closing > .brand-mark {
+    font-size: 40px;
+}
+.closing h2 {
+    margin-top: 22px;
+}
+@media (max-width: 1000px) {
+    .hero {
+        gap: 32px;
+        padding-block: 60px;
     }
-    50% {
-        transform: translateY(-6px);
+    .art-node {
+        width: calc(100% - 44px);
+        padding: 16px;
     }
-}
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(32px);
+    .node-app,
+    .node-activity {
+        left: 12px;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    .node-people {
+        right: 12px;
     }
-}
-@keyframes fadeInRight {
-    from {
-        opacity: 0;
-        transform: translateX(24px);
+    .developer-section {
+        gap: 40px;
+        padding: 36px;
     }
-    to {
-        opacity: 1;
-        transform: translateX(0);
+    .workspace-demo {
+        grid-template-columns: 185px 1fr;
     }
-}
-@keyframes glowPulse {
-    0%,
-    100% {
-        opacity: 0.5;
-        transform: scale(1);
+    .demo-content {
+        padding-inline: 20px;
     }
-    50% {
-        opacity: 1;
-        transform: scale(1.08);
+    .workflow-strip {
+        gap: 14px;
     }
 }
-@keyframes shimmer {
-    0% {
-        background-position: -200% center;
+@media (max-width: 720px) {
+    .hero {
+        grid-template-columns: 1fr;
+        padding-block: 44px;
+        gap: 35px;
     }
-    100% {
-        background-position: 200% center;
+    h1 {
+        font-size: clamp(40px, 10vw, 52px);
     }
-}
-@keyframes spin-slow {
-    from {
-        transform: rotate(0deg);
+    .hero-description {
+        font-size: 16px;
     }
-    to {
-        transform: rotate(360deg);
+    .hero-art {
+        height: 420px;
     }
-}
-@keyframes borderGlow {
-    0%,
-    100% {
-        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
+    .art-node {
+        max-width: 340px;
+        width: calc(100% - 50px);
     }
-    50% {
-        box-shadow: 0 0 24px 4px rgba(45, 212, 191, 0.25);
+    .node-app,
+    .node-activity {
+        left: 14px;
     }
-}
-
-// ─── Entry animations ─────────────────────────────────────────────────────────
-.anim-fade-up {
-    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-.anim-fade-right {
-    animation: fadeInRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-@for $i from 1 through 7 {
-    .stagger-#{$i} {
-        animation-delay: #{$i * 0.1}s;
+    .node-people {
+        right: 14px;
     }
-}
-
-// ─── Shimmer text ─────────────────────────────────────────────────────────────
-.shimmer-text {
-    background: linear-gradient(90deg, #2dd4bf 0%, #a5f3fc 40%, #2dd4bf 60%, #5eead4 100%);
-    background-size: 200% auto;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: shimmer 3s linear infinite;
-}
-
-// ─── Stat card ───────────────────────────────────────────────────────────────
-.stat-card {
-    transition:
-        transform 0.3s ease,
-        box-shadow 0.3s ease;
-    &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 0 20px rgba(45, 212, 191, 0.18);
+    .workflow-strip {
+        flex-wrap: wrap;
+        gap: 10px 16px;
     }
-}
-
-// ─── Feature card ────────────────────────────────────────────────────────────
-.feature-card {
-    transition:
-        transform 0.3s ease,
-        box-shadow 0.3s ease,
-        border-color 0.3s ease;
-    &:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
-        border-color: rgba(45, 212, 191, 0.4) !important;
+    .workflow-strip > span {
+        width: 100%;
     }
-    @media screen and (max-width: 640px) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    .workflow-strip p {
+        font-size: 11px;
     }
-}
-
-// ─── CTA glow button ─────────────────────────────────────────────────────────
-.btn-cta-glow {
-    transition:
-        transform 0.2s ease,
-        box-shadow 0.2s ease;
-    animation: borderGlow 3s ease-in-out infinite;
-    &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 0 48px rgba(45, 212, 191, 0.45) !important;
+    .section-heading {
+        display: block;
     }
-}
-
-// ─── Section forms-grid: text before preview on xs ─────────────────────────
-.section-forms-grid {
-    grid-template-columns: 1fr 1fr;
-
-    @media (max-width: 1200px) {
+    .section-heading > p {
+        font-size: 14px;
+    }
+    .workspace-section {
+        padding-block: 56px;
+    }
+    .workspace-demo {
         grid-template-columns: 1fr;
     }
-}
-
-// ─── Hero code card: constrain on xs ─────────────────────────────────────────
-@media (max-width: 639px) {
-    figure pre {
-        font-size: 0.72rem !important;
+    .demo-sidebar {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        border-right: 0;
+        border-bottom: 1px solid #dfe5d6;
+        padding: 12px;
+        gap: 4px;
+    }
+    .demo-sidebar .brand,
+    .demo-account,
+    .demo-nav-label,
+    .demo-help {
+        display: none;
     }
-}
-
-// ─── Spinning ring ───────────────────────────────────────────────────────────
-.ring-spin {
-    animation: spin-slow 18s linear infinite;
-    z-index: -1;
-    @media (max-width: 639px) {
+    .demo-sidebar button {
+        flex: 1;
+        justify-content: center;
+        font-size: 12px;
+        padding: 9px 5px;
+        gap: 7px;
+    }
+    .demo-content {
+        padding: 0 16px 20px;
+        min-height: 360px;
+    }
+    .demo-row {
+        grid-template-columns: 1.2fr 1fr;
+        gap: 10px;
+        font-size: 10px;
+    }
+    .demo-row > a,
+    .demo-row > span:nth-child(3) {
         display: none;
     }
-}
-
-// ─── Skip link focus ─────────────────────────────────────────────────────────
-.skip-link:focus {
-    top: 0 !important;
-    outline: 3px solid #fff;
-    outline-offset: 2px;
-}
-
-// ─── Syntax highlight tokens ─────────────────────────────────────────────────
-code .token {
-    &.comment {
-        color: #8b949e;
+    .demo-title h3 {
+        font-size: 21px;
     }
-    &.keyword {
-        color: #ff7b72;
+    .demo-count {
+        display: none;
     }
-    &.string {
-        color: #a5d6ff;
+    .demo-toolbar {
+        font-size: 10px;
     }
-    &.variable {
-        color: #ffa657;
+    .demo-badge {
+        font-size: 9px;
+        padding: 4px;
     }
-    &.property {
-        color: #79c0ff;
+    .demo-insight {
+        font-size: 10px;
     }
-    &.punctuation {
-        color: #c9d1d9;
+    .person-facts {
+        grid-template-columns: 1fr 1fr;
     }
-    &.operator {
-        color: #79c0ff;
+    .activity-example {
+        gap: 8px;
     }
-    &.function {
-        color: #d2a8ff;
+    .activity-example > .demo-badge {
+        display: none;
+    }
+    .journey-grid {
+        grid-template-columns: 1fr;
     }
-    &.boolean {
-        color: #79c0ff;
+    .journey-grid article,
+    .journey-grid article + article {
+        padding: 28px 0;
+        border-left: 0;
     }
-    &.tag {
-        color: #7ee787;
+    .journey-grid article + article {
+        border-top: 1px solid var(--experience-border);
     }
-    &.attr-name {
-        color: #79c0ff;
+    .journey-grid h3 br {
+        display: none;
+    }
+    .journeys {
+        padding-bottom: 50px;
+    }
+    .developer-section {
+        grid-template-columns: 1fr;
+        gap: 32px;
+        padding: 26px;
     }
-    &.object {
-        color: #ffa657;
+    .closing {
+        padding-block: 56px;
     }
 }
diff --git a/apps/36-blocks/src/app/website/home/home.component.ts b/apps/36-blocks/src/app/website/home/home.component.ts
index 5a260f6f..342f1463 100644
--- a/apps/36-blocks/src/app/website/home/home.component.ts
+++ b/apps/36-blocks/src/app/website/home/home.component.ts
@@ -1,420 +1,29 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, PLATFORM_ID, inject } from '@angular/core';
-import { WIDGET_EXAMPLE } from '../docs/widget-example';
-import { WidgetTheme } from '@proxy/constant';
-import { WidgetThemeService } from 'apps/36-blocks-widget/src/app/otp/service/widget-theme.service';
-import { Meta, Title } from '@angular/platform-browser';
-import { isPlatformBrowser } from '@angular/common';
-import { DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { Router } from '@angular/router';
-import { BaseComponent } from '@proxy/ui/base-component';
-import { PrimeNgToastService } from '@proxy/ui/prime-ng-toast';
-import { Store, select } from '@ngrx/store';
-import { isEqual } from 'lodash-es';
-import { Observable, distinctUntilChanged, takeUntil, debounceTime } from 'rxjs';
-import {
-    selectLogInErrors,
-    selectLogInData,
-    selectLogInDataInProcess,
-    selectLogInDataSuccess,
-} from './ngrx/selector/login.selector';
-import { ILogInFeatureStateWithRootState } from './ngrx/store/login.state';
-import * as logInActions from './ngrx/actions/login.action';
-
+import { Meta, Title } from '@angular/platform-browser';
 @Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-home',
-    imports: [RouterModule, ReactiveFormsModule, MatCardModule, MatButtonModule, MatIconModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [RouterModule],
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.scss'],
-    providers: [WidgetThemeService],
+    styleUrl: './home.component.scss',
 })
-export class HomeComponent extends BaseComponent implements OnInit {
-    public selectLogInErrors$: Observable<string[]>;
-    public logInData$: Observable<any>;
-    public logInDataInProcess$: Observable<boolean>;
-    public logInDataSuccess$: Observable<boolean>;
-
-    private toast = inject(PrimeNgToastService);
-    private _store = inject<Store<ILogInFeatureStateWithRootState>>(Store);
-    private router = inject(Router);
-    private cdr = inject(ChangeDetectorRef);
-    private meta = inject(Meta);
-    private titleService = inject(Title);
-    private platformId = inject(PLATFORM_ID);
-    private document = inject(DOCUMENT);
-    // temp chagnes
-    public readonly accent = {
-        text: 'text-teal-400',
-        bg: 'bg-teal-400',
-        border: 'border-teal-400',
-        bgAlpha10: 'bg-teal-400/10',
-        bgAlpha30: 'bg-teal-400/30',
-        borderAlpha20: 'border-teal-400/20',
-        borderAlpha30: 'border-teal-400/30',
-        pillBadge: 'bg-teal-400/10 border border-teal-400/30 text-teal-400',
-        iconBg: 'bg-teal-400/10 border border-teal-400/20',
-        btnPrimary: 'bg-teal-400 text-[#0d1117] shadow-[0_8px_24px_rgba(45,212,191,0.3)] hover:-translate-y-0.5',
-        btnOutline: 'border border-teal-400 text-teal-400',
-    };
-
-    public readonly appearanceModes: { label: string; value: 'dark' | 'light' | 'system' }[] = [
-        { label: 'System', value: 'system' },
-        { label: 'Light', value: 'light' },
-        { label: 'Dark', value: 'dark' },
-    ];
-
-    public readonly themeColors: { name: string; hex: string }[] = [
-        { name: 'teal', hex: '#2dd4bf' }, // Default
-        { name: 'red', hex: '#ef4444' },
-        { name: 'orange', hex: '#f97316' },
-        { name: 'blue', hex: '#3b82f6' },
-    ];
-    public selectedColor = this.themeColors[0].hex;
-    public selectedAppearance: 'dark' | 'light' | 'system' = 'dark';
-    public borderRadius = 8;
-    private readonly themeService = inject(WidgetThemeService);
-
-    public get isDark(): boolean {
-        return this.themeService.isDark(this.selectedAppearance as WidgetTheme);
-    }
-
-    public get themeVars(): Record<string, string> {
-        const dark = this.isDark;
-        return {
-            '--bg-page': dark ? '#0d1117' : '#f6f8fa',
-            '--bg-card': dark ? '#161b22' : '#ffffff',
-            '--bg-card2': dark ? '#21262d' : '#eaeef2',
-            '--border': dark ? '#21262d' : '#d0d7de',
-            '--text-primary': dark ? '#f0f6fc' : '#1f2328',
-            '--text-secondary': dark ? '#8b949e' : '#656d76',
-            '--text-body': dark ? '#c9d1d9' : '#24292f',
-        };
-    }
-
-    public selectColor(hex: string): void {
-        this.selectedColor = hex;
-        this.cdr.markForCheck();
-    }
-
-    public selectAppearance(mode: 'dark' | 'light' | 'system'): void {
-        this.selectedAppearance = mode;
-        this.themeService.setInputTheme(mode);
-        this.cdr.markForCheck();
-    }
-
-    public onRadiusChange(event: Event): void {
-        this.borderRadius = +(event.target as HTMLInputElement).value;
-        this.cdr.markForCheck();
-    }
-
-    public colorAlpha(hex: string, alpha: number): string {
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return `rgba(${r},${g},${b},${alpha})`;
-    }
-
-    public readonly heroBadges: { label: string }[] = [
-        { label: 'Social Login' },
-        { label: 'OTP Auth' },
-        { label: 'RBAC' },
-    ];
-
-    public readonly uiFeatureCards: { icon: string; title: string; desc: string }[] = [
-        { icon: 'brush', title: 'Theme Editor', desc: 'Match your brand colors' },
-        { icon: 'dashboard', title: 'Layout Options', desc: 'Multiple form layouts' },
-        { icon: 'smartphone', title: 'Responsive', desc: 'Works on all devices' },
-        { icon: 'tune', title: 'Configurable', desc: 'Configure enabled login methods' },
-    ];
-
-    public readonly platformFeatures: { icon: string; title: string; desc: string }[] = [
-        {
-            icon: 'link',
-            title: 'Plug and Play',
-            desc: 'Pre-built signup, login, profile, and access control components.',
-        },
-        { icon: 'security', title: 'Secure with hCaptcha', desc: 'Bot protection to prevent fake signups and abuse.' },
-        {
-            icon: 'group',
-            title: 'Multiple Login Options',
-            desc: 'Google, Apple, OTP, and username-password authentication.',
-        },
-        { icon: 'bar_chart', title: 'User Analytics', desc: 'Track total users, active users, and login trends.' },
-        {
-            icon: 'contactless',
-            title: 'Social & OTP Login',
-            desc: 'Passwordless and social authentication for better conversion.',
-        },
-        { icon: 'lock', title: 'Role-Based Access', desc: 'Fine-grained permissions using RBAC.' },
-        {
-            icon: 'trending_up',
-            title: 'Activity Tracking',
-            desc: 'Request logs and instrumented sensitive-operation activity.',
-        },
-        { icon: 'schedule', title: 'Secure Sessions', desc: 'Token-based authentication with session expiry.' },
-        {
-            icon: 'menu_book',
-            title: 'Developer Documentation',
-            desc: 'Widget setup and application security boundaries.',
-        },
-    ];
-
-    public readonly buildCards: { icon: string; title: string; desc: string; highlight?: boolean }[] = [
-        {
-            icon: 'edit',
-            title: 'SaaS Applications',
-            desc: 'Launch faster with secure authentication and access control.',
-        },
-        {
-            icon: 'business',
-            title: 'Team Applications',
-            desc: 'Manage organization memberships, roles, and permissions.',
-        },
-        {
-            icon: 'smartphone',
-            title: 'Consumer Apps',
-            desc: 'Seamless social login and OTP authentication.',
-            highlight: true,
-        },
-        { icon: 'settings', title: 'Internal Admin Panels', desc: 'Track activity and control access across tools.' },
-    ];
-
-    public readonly heroStats: { value: string; label: string }[] = [
-        { value: 'Widget', label: 'Browser integration' },
-        { value: 'API', label: 'Server integration' },
-    ];
-
-    public readonly mockFormFields: { label: string; placeholder: string }[] = [
-        { label: 'Email', placeholder: 'Your email address' },
-        { label: 'Password', placeholder: 'Enter your password' },
-    ];
-
-    public readonly floatingBadges: { side: 'left' | 'right'; dot?: string; icon?: string; text: string }[] = [
-        { side: 'left', dot: 'bg-green-500', text: 'JavaScript Ready' },
-        { side: 'right', icon: 'verified', text: 'Configurable UI' },
-    ];
-
-    public readonly macDots: string[] = ['bg-[#ff5f56]', 'bg-[#ffbd2e]', 'bg-[#27ca40]'];
-
-    public readonly cardSections: {
-        id: string;
-        headingId: string;
-        label: string;
-        accentWord: string;
-        desc: string;
-        gridCols: string;
-        cards: { icon: string; title: string; desc: string; highlight?: boolean }[];
-    }[] = [
-        {
-            id: 'features',
-            headingId: 'features-heading',
-            label: 'Everything You Need to Manage Users',
-            accentWord: 'Securely',
-            desc: 'Configure authentication, user management, and investigation tools for your connected applications.',
-            gridCols: 'grid-cols-1 md:grid-cols-3 sm:grid-cols-2',
-            cards: this.platformFeatures,
-        },
-        {
-            id: 'build',
-            headingId: 'build-heading',
-            label: 'What You Can',
-            accentWord: 'Build',
-            desc: '',
-            gridCols: 'grid-cols-1 md:grid-cols-3 sm:grid-cols-2 lg:grid-cols-4',
-            cards: this.buildCards,
-        },
-    ];
-
-    public readonly codeSnippet = WIDGET_EXAMPLE;
-
-    public currentlyBuilding: string = '';
-    private buildingTexts = [
-        'A developer-friendly authentication platform with social login, OTP, analytics, and role-based access control.',
-    ];
-    private currentTextIndex = 0;
-    private currentCharIndex = 0;
-    private isDeleting = false;
-    private typewriterInterval: any;
-
-    constructor() {
-        super();
-
-        this.selectLogInErrors$ = this._store.pipe(
-            select(selectLogInErrors),
-            distinctUntilChanged(isEqual),
-            takeUntil(this.destroy$)
-        );
-        this.logInData$ = this._store.pipe(
-            select(selectLogInData),
-            distinctUntilChanged(isEqual),
-            takeUntil(this.destroy$)
-        );
-        this.logInDataInProcess$ = this._store.pipe(
-            select(selectLogInDataInProcess),
-            debounceTime(200),
-            distinctUntilChanged(isEqual),
-            takeUntil(this.destroy$)
-        );
-        this.logInDataSuccess$ = this._store.pipe(
-            select(selectLogInDataSuccess),
-            distinctUntilChanged(isEqual),
-            takeUntil(this.destroy$)
-        );
-    }
-
+export class HomeComponent implements OnInit {
+    private readonly title = inject(Title);
+    private readonly meta = inject(Meta);
+    readonly selectedView = signal('Applications');
+    readonly views = ['Applications', 'People', 'Activity'];
     ngOnInit(): void {
-        this.titleService.setTitle('36Blocks — Secure Auth & User Management for Modern Apps');
-        this.meta.addTags([
-            {
-                name: 'description',
-                content:
-                    'Configure user signup, login, roles, and access controls with 36Blocks. Plug & play authentication with social login, OTP, RBAC, and analytics.',
-            },
-            {
-                name: 'keywords',
-                content:
-                    'authentication platform, OTP login, social login, RBAC, user management, Angular auth, developer authentication, passwordless login, hCaptcha, role-based access control',
-            },
-            { name: 'robots', content: 'index, follow' },
-            { name: 'author', content: '36Blocks' },
-            { property: 'og:site_name', content: '36Blocks' },
-            { property: 'og:title', content: '36Blocks — Secure Auth & User Management for Modern Apps' },
-            {
-                property: 'og:description',
-                content:
-                    'Configure user signup, login, roles, and access controls. Plug & play authentication platform with social login, OTP, and RBAC.',
-            },
-            { property: 'og:type', content: 'website' },
-            { property: 'og:url', content: 'https://36blocks.com/' },
-            { property: 'og:image', content: 'https://36blocks.com/assets/og-image.png' },
-            { property: 'og:image:width', content: '1200' },
-            { property: 'og:image:height', content: '630' },
-            { property: 'og:image:alt', content: '36Blocks — Secure Auth & User Management' },
-            { name: 'twitter:card', content: 'summary_large_image' },
-            { name: 'twitter:site', content: '@36blocks' },
-            { name: 'twitter:title', content: '36Blocks — Secure Auth & User Management for Modern Apps' },
-            {
-                name: 'twitter:description',
-                content:
-                    'Plug & play authentication with social login, OTP, RBAC, and analytics. Configurable widget integration.',
-            },
-            { name: 'twitter:image', content: 'https://36blocks.com/assets/og-image.png' },
-            { name: 'twitter:image:alt', content: '36Blocks — Secure Auth & User Management' },
-        ]);
-
-        this.injectJsonLdSchema();
-
-        if (isPlatformBrowser(this.platformId)) {
-            this.selectLogInErrors$.subscribe((errors) => {
-                errors?.forEach((errorMessage) => {
-                    this.toast.error(errorMessage);
-                });
-            });
-
-            this.startTypewriter();
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.typewriterInterval) {
-            clearInterval(this.typewriterInterval);
-        }
-        super.ngOnDestroy();
-    }
-
-    private startTypewriter(): void {
-        if (!isPlatformBrowser(this.platformId)) return;
-        this.typewriterInterval = setInterval(
-            () => {
-                const currentText = this.buildingTexts[this.currentTextIndex];
-
-                if (!this.isDeleting) {
-                    this.currentlyBuilding = currentText.substring(0, this.currentCharIndex + 1);
-                    this.currentCharIndex++;
-
-                    if (this.currentCharIndex === currentText.length) {
-                        this.isDeleting = true;
-                        setTimeout(() => {}, 1500);
-                    }
-                } else {
-                    this.currentlyBuilding = currentText.substring(0, this.currentCharIndex - 1);
-                    this.currentCharIndex--;
-
-                    if (this.currentCharIndex === 0) {
-                        this.isDeleting = false;
-                        this.currentTextIndex = (this.currentTextIndex + 1) % this.buildingTexts.length;
-                    }
-                }
-                this.cdr.markForCheck();
-            },
-            this.isDeleting ? 50 : 100
-        );
-    }
-
-    login() {
-        this._store.dispatch(logInActions.logInAction());
-    }
-
-    private injectJsonLdSchema(): void {
-        const schemas = [
-            {
-                '@context': 'https://schema.org',
-                '@type': 'Organization',
-                name: '36Blocks',
-                url: 'https://36blocks.com/',
-                logo: 'https://36blocks.com/assets/logo.png',
-                sameAs: [],
-                contactPoint: {
-                    '@type': 'ContactPoint',
-                    contactType: 'customer support',
-                    url: 'https://36blocks.com/',
-                },
-            },
-            {
-                '@context': 'https://schema.org',
-                '@type': 'WebSite',
-                name: '36Blocks',
-                url: 'https://36blocks.com/',
-                description: 'Authentication and user management with configurable login, roles, and analytics.',
-            },
-            {
-                '@context': 'https://schema.org',
-                '@type': 'SoftwareApplication',
-                name: '36Blocks',
-                url: 'https://36blocks.com/',
-                applicationCategory: 'DeveloperApplication',
-                operatingSystem: 'Web',
-                description:
-                    'Plug & play authentication platform with social login, OTP, role-based access control, and user analytics. Integrate using the configured widget.',
-                featureList: [
-                    'Social Login (Google, Apple)',
-                    'OTP Authentication',
-                    'Role-Based Access Control (RBAC)',
-                    'hCaptcha Bot Protection',
-                    'User Analytics Dashboard',
-                    'Customizable Auth Forms',
-                    'Configurable Login Methods',
-                    'Secure Sessions with Token Expiry',
-                    'Request Logs',
-                ],
-                author: {
-                    '@type': 'Organization',
-                    name: '36Blocks',
-                    url: 'https://36blocks.com/',
-                },
-            },
-        ];
-
-        schemas.forEach((schema) => {
-            const script = this.document.createElement('script');
-            script.type = 'application/ld+json';
-            script.text = JSON.stringify(schema);
-            this.document.head.appendChild(script);
+        this.title.setTitle('36blocks — A clearer view of access');
+        this.meta.updateTag({
+            name: 'description',
+            content:
+                'An internal workspace for application authentication, people, request logs and operator activity.',
+        });
+        this.meta.updateTag({ property: 'og:title', content: '36blocks — A clearer view of access' });
+        this.meta.updateTag({
+            property: 'og:description',
+            content: 'Application authentication, people and investigation in one internal workspace.',
         });
     }
 }
diff --git a/apps/36-blocks/src/app/website/layout/website-layout.component.html b/apps/36-blocks/src/app/website/layout/website-layout.component.html
index c37ed043..3bf34ca5 100644
--- a/apps/36-blocks/src/app/website/layout/website-layout.component.html
+++ b/apps/36-blocks/src/app/website/layout/website-layout.component.html
@@ -1,187 +1,58 @@
-<!-- Skip to main content (accessibility) -->
-<a
-    href="#main-content"
-    class="sr-only focus:not-sr-only focus:absolute focus:left-0 focus:top-0 focus:z-[9999] focus:no-underline focus:px-6 focus:py-3 focus:text-[#0d1117] focus:font-semibold focus:text-sm focus:rounded-br-md focus:bg-teal-400"
-    >Skip to main content</a
->
-
-<div
-    class="min-h-dvh relative overflow-x-hidden [font-family:'Space_Grotesk','Inter',system-ui,-apple-system,sans-serif]"
->
-    <!-- ─── HEADER ─────────────────────────────────────────── -->
+<div class="website-shell">
+    <a class="skip-link" href="#main-content">Skip to content</a>
     @if (!hideHeader) {
-        <header
-            class="website-header fixed top-0 left-0 right-0 z-[100] backdrop-blur-sm border-b border-[#21262d] transition-colors duration-300 px-4 sm:px-6 md:px-8"
-            role="banner"
-        >
-            <div class="h-full max-w-[1400px] mx-auto grid grid-cols-[auto_1fr_auto] items-center gap-4">
-                <!-- Left: Logo -->
-                <a
-                    routerLink="/"
-                    class="flex items-center gap-2 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-sm"
+        <header class="website-header">
+            <div class="header-inner section-width">
+                <a class="brand" routerLink="/" aria-label="36blocks home" (click)="closeMobileMenu()"
+                    ><span class="brand-mark" aria-hidden="true">▦</span>36blocks</a
                 >
-                    <img
-                        src="/assets/images/36-blocks-logo.svg"
-                        alt="36Blocks — home"
-                        height="32"
-                        width="96"
-                        class="block"
-                        fetchpriority="high"
-                        loading="eager"
-                    />
-                </a>
-
-                <!-- Center: Desktop nav -->
-                <nav class="hidden md:flex items-center justify-center gap-6" aria-label="Primary navigation">
-                    @for (link of headerNavLinks; track link.route) {
-                        <a
-                            [routerLink]="link.route"
-                            routerLinkActive="!text-teal-400 font-medium"
-                            [routerLinkActiveOptions]="{ exact: link.route === '/' }"
-                            class="text-sm text-[#8b949e] no-underline transition-colors duration-200 hover:text-teal-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-sm"
-                            >{{ link.label }}</a
-                        >
-                    }
+                <nav class="desktop-nav" aria-label="Main navigation">
+                    <a routerLink="/" fragment="workspace">Product</a
+                    ><a href="https://developers.36blocks.com">Developers <span aria-hidden="true">↗</span></a
+                    ><a routerLink="/about" routerLinkActive="active">Our approach</a>
                 </nav>
-
-                <!-- Right: Login + hamburger -->
-                <div class="flex items-center justify-end gap-3">
-                    <a
-                        routerLink="/register"
-                        (click)="onRegisterCtaClick()"
-                        class="hidden sm:inline-flex cursor-pointer px-4 py-1.5 rounded-sm text-xs font-semibold bg-teal-400 text-[#0d1117] transition-all duration-200 hover:bg-teal-300 hover:-translate-y-px focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
-                        aria-label="Create a free 36Blocks account"
-                    >
-                        Get started
-                    </a>
-                    <a
-                        routerLink="/login"
-                        class="cursor-pointer px-4 py-1.5 bg-transparent !rounded-sm text-xs font-semibold border border-teal-400 text-teal-400 transition-all duration-200 hover:-translate-y-px focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
-                        aria-label="Login to your 36Blocks account"
-                    >
-                        Login
-                    </a>
-
-                    <!-- Hamburger (mobile only) -->
-                    <button
-                        class="md:hidden cursor-pointer flex flex-col items-center justify-center w-9 h-9 gap-1.5 rounded-md text-[#8b949e] hover:text-teal-400 hover:bg-[#21262d] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
-                        (click)="toggleMobileMenu()"
-                        [attr.aria-expanded]="mobileMenuOpen()"
-                        aria-controls="mobile-nav"
-                        aria-label="Toggle navigation menu"
-                    >
-                        @if (mobileMenuOpen()) {
-                            <svg
-                                class="w-5 h-5"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                aria-hidden="true"
-                            >
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        } @else {
-                            <svg
-                                class="w-5 h-5"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                aria-hidden="true"
-                            >
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-                            </svg>
-                        }
-                    </button>
-                </div>
-            </div>
-        </header>
-
-        <!-- Mobile nav drawer -->
-        @if (mobileMenuOpen()) {
-            <nav
-                id="mobile-nav"
-                class="md:hidden fixed top-[var(--website-header-height)] left-0 right-0 z-[99] bg-[#0d1117]/95 backdrop-blur-sm border-b border-[#21262d] flex flex-col py-3"
-                aria-label="Mobile navigation"
-            >
-                @for (link of headerNavLinks; track link.route) {
-                    <a
-                        [routerLink]="link.route"
-                        routerLinkActive="text-teal-400 bg-teal-400/5"
-                        [routerLinkActiveOptions]="{ exact: link.route === '/' }"
-                        class="px-5 py-3 text-sm text-[#8b949e] no-underline transition-colors duration-150 hover:text-teal-400 hover:bg-[#161b22] focus-visible:outline focus-visible:outline-2 focus-visible:outline-inset focus-visible:outline-teal-400"
-                        (click)="closeMobileMenu()"
-                        >{{ link.label }}</a
-                    >
-                }
-                <a
-                    routerLink="/login"
-                    class="mx-5 mt-2 flex items-center justify-center rounded-sm px-4 py-2.5 text-sm font-semibold border border-teal-400 text-teal-400 transition-colors duration-150 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
-                    aria-label="Login to your 36Blocks account"
-                    (click)="closeMobileMenu()"
+                <a class="header-workspace" routerLink="/login">Open workspace <span aria-hidden="true">↗</span></a
+                ><button
+                    class="mobile-toggle"
+                    type="button"
+                    (click)="toggleMobileMenu()"
+                    [attr.aria-expanded]="mobileMenuOpen()"
+                    aria-controls="mobile-navigation"
+                    [attr.aria-label]="mobileMenuOpen() ? 'Close navigation' : 'Open navigation'"
                 >
-                    Login
-                </a>
-                <a
-                    routerLink="/register"
-                    class="mx-5 mt-2 mb-1 flex items-center justify-center rounded-sm px-4 py-2.5 text-sm font-semibold bg-teal-400 text-[#0d1117] transition-colors duration-150 hover:bg-teal-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
-                    aria-label="Create a free 36Blocks account"
-                    (click)="closeMobileMenu(); onRegisterCtaClick()"
+                    {{ mobileMenuOpen() ? '✕' : '☰' }}
+                </button>
+            </div>
+            @if (mobileMenuOpen()) {
+                <nav
+                    id="mobile-navigation"
+                    class="mobile-navigation"
+                    aria-label="Mobile navigation"
+                    (keydown.escape)="closeMobileMenu()"
                 >
-                    Get started
-                </a>
-            </nav>
-        }
+                    <a routerLink="/" fragment="workspace" (click)="closeMobileMenu()">Product</a
+                    ><a href="https://developers.36blocks.com">Developers ↗</a
+                    ><a routerLink="/about" (click)="closeMobileMenu()">Our approach</a
+                    ><a routerLink="/login" (click)="closeMobileMenu()">Open workspace ↗</a>
+                </nav>
+            }
+        </header>
     }
-
-    <!-- ─── PAGE CONTENT ──────────────────────────────────── -->
-    <main
-        id="main-content"
-        class="website-main ws-page-enter"
-        [class.website-main--no-footer]="hideFooter && !hideHeader"
-        [class.website-main--no-header]="hideHeader && !hideFooter"
-        [class.website-main--no-header-no-footer]="hideHeader && hideFooter"
-        [style.padding-top]="!hideHeader ? 'var(--website-header-height)' : null"
-        [style.min-height]="!hideFooter && !hideHeader ? 'calc(100dvh - var(--website-footer-height))' : null"
-    >
-        <router-outlet />
-    </main>
-
-    <!-- ─── FOOTER ────────────────────────────────────────── -->
+    <main id="main-content" class="website-main"><router-outlet /></main>
     @if (!hideFooter) {
-        <footer
-            class="website-footer bg-[#161b22] border-t border-[#21262d] px-4 sm:px-6 md:px-8 py-6"
-            role="contentinfo"
-        >
-            <div class="max-w-[1400px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
-                <small class="text-sm text-[#6e7681] order-2 sm:order-1"
-                    >&copy; 2026 36Blocks. All rights reserved.</small
-                >
-                <nav
-                    class="flex items-center gap-x-5 gap-y-2 flex-wrap justify-center order-1 sm:order-2"
-                    aria-label="Footer navigation"
-                >
-                    @for (link of footerLinks; track link.label) {
-                        @if (link.route) {
-                            <a
-                                [routerLink]="link.route"
-                                class="text-sm text-[#8b949e] no-underline transition-colors duration-200 hover:text-teal-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-sm"
-                                [attr.aria-label]="link.ariaLabel"
-                                >{{ link.label }}</a
-                            >
-                        } @else if (link.href) {
-                            <a
-                                [href]="link.href"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="text-sm text-[#8b949e] no-underline transition-colors duration-200 hover:text-teal-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-sm"
-                                [attr.aria-label]="link.ariaLabel + ' (opens in new tab)'"
-                                >{{ link.label }}</a
-                            >
-                        }
-                    }
+        <footer class="website-footer">
+            <div class="section-width footer-inner">
+                <div>
+                    <a class="brand" routerLink="/"><span class="brand-mark" aria-hidden="true">▦</span>36blocks</a>
+                    <p>A clearer view of access.</p>
+                    <small>© 2026 36blocks</small>
+                </div>
+                <nav aria-label="Footer navigation">
+                    <a href="https://developers.36blocks.com">Documentation ↗</a><a routerLink="/security">Security</a
+                    ><a routerLink="/about">About</a><a routerLink="/contact">Contact</a
+                    ><a routerLink="/privacy">Privacy</a><a routerLink="/terms">Terms</a>
                 </nav>
+                <span class="footer-note"><span class="status-dot"></span> Built for our teams</span>
             </div>
         </footer>
     }
diff --git a/apps/36-blocks/src/app/website/layout/website-layout.component.scss b/apps/36-blocks/src/app/website/layout/website-layout.component.scss
index eda3e440..b303ed2a 100644
--- a/apps/36-blocks/src/app/website/layout/website-layout.component.scss
+++ b/apps/36-blocks/src/app/website/layout/website-layout.component.scss
@@ -1,26 +1,138 @@
 :host {
-    display: contents;
+    display: block;
 }
 .website-header {
-    height: var(--website-header-height);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #f8f9f3f5;
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--experience-border);
 }
-
-.website-main {
-    min-height: calc(100dvh - var(--website-header-height) - var(--website-footer-height));
-
-    &--no-footer {
-        min-height: calc(100dvh - var(--website-header-height));
+.header-inner {
+    height: 76px;
+    display: flex;
+    align-items: center;
+    gap: 36px;
+}
+.desktop-nav {
+    display: flex;
+    gap: 28px;
+    margin-left: 48px;
+    font-size: 13px;
+    color: var(--experience-muted);
+}
+.desktop-nav a:hover,
+.desktop-nav a.active {
+    color: var(--experience-accent);
+}
+.header-workspace {
+    margin-left: auto;
+    display: flex;
+    gap: 28px;
+    align-items: center;
+    background: #fff;
+    border: 1px solid #d7dfcf;
+    border-radius: 7px;
+    padding: 11px 16px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.mobile-toggle {
+    display: none;
+    border: 1px solid var(--experience-border);
+    background: transparent;
+    border-radius: 6px;
+    width: 40px;
+    height: 40px;
+}
+.mobile-navigation {
+    display: grid;
+    padding: 12px 24px 24px;
+    gap: 16px;
+    border-top: 1px solid var(--experience-border);
+    font-size: 14px;
+}
+.website-footer {
+    border-top: 1px solid var(--experience-border);
+    padding-block: 40px;
+    background: #f1f4eb;
+}
+.footer-inner {
+    display: flex;
+    gap: 40px;
+    justify-content: space-between;
+    align-items: start;
+}
+.footer-inner p {
+    font-size: 12px;
+    color: var(--experience-muted);
+    margin: 12px 0 20px;
+}
+.footer-inner small {
+    font-size: 10px;
+    color: var(--experience-muted);
+}
+.footer-inner nav {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 22px 40px;
+    padding-top: 8px;
+    font-size: 12px;
+    color: var(--experience-muted);
+}
+.footer-note {
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-top: 10px;
+}
+.skip-link {
+    position: fixed;
+    left: 12px;
+    top: -80px;
+    z-index: 1000;
+    padding: 12px;
+    background: white;
+    color: #183d1b;
+}
+.skip-link:focus {
+    top: 12px;
+}
+@media (max-width: 800px) {
+    .header-inner {
+        height: 66px;
+        gap: 16px;
+    }
+    .desktop-nav {
+        margin-left: 10px;
+        gap: 18px;
     }
-
-    &--no-header {
-        min-height: calc(100dvh - var(--website-footer-height));
+    .header-workspace {
+        gap: 10px;
     }
-
-    &--no-header-no-footer {
-        min-height: 100dvh;
+    .footer-note {
+        display: none;
     }
 }
-
-.website-footer {
-    min-height: var(--website-footer-height);
+@media (max-width: 640px) {
+    .desktop-nav,
+    .header-workspace {
+        display: none;
+    }
+    .mobile-toggle {
+        display: block;
+        margin-left: auto;
+    }
+    .footer-inner {
+        flex-direction: column;
+        gap: 28px;
+    }
+    .footer-inner nav {
+        gap: 20px 28px;
+    }
+    .website-footer {
+        padding-block: 30px;
+    }
 }
diff --git a/apps/36-blocks/src/app/website/login/login-page.component.html b/apps/36-blocks/src/app/website/login/login-page.component.html
index d5324b72..d2612bd2 100644
--- a/apps/36-blocks/src/app/website/login/login-page.component.html
+++ b/apps/36-blocks/src/app/website/login/login-page.component.html
@@ -2,12 +2,12 @@
     <div class="w-full max-w-md">
         <!-- Header -->
         <div class="text-center mb-8">
-            <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome back</h1>
-            <p class="mt-2 text-sm text-[#8b949e]">Log in to your 36Blocks account.</p>
+            <h1 class="text-2xl sm:text-3xl font-bold text-[#202d1d] tracking-tight">Welcome back</h1>
+            <p class="mt-2 text-sm text-[#5e6c56]">Log in to your 36Blocks account.</p>
         </div>
 
         <!-- Card -->
-        <div class="rounded-xl border border-[#21262d] bg-[#161b22] px-6 py-8 space-y-5">
+        <div class="rounded-xl border border-[#dce3d4] bg-[#ffffff] px-6 py-8 space-y-5">
             <!-- Global errors -->
             @if (loginErrors().length > 0) {
                 <div
@@ -16,7 +16,7 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                     class="rounded-sm border border-red-500/30 bg-red-500/5 px-4 py-3"
                 >
                     @for (loginError of loginErrors(); track loginError) {
-                        <p class="text-sm text-red-400">{{ loginError }}</p>
+                        <p class="text-sm text-red-700">{{ loginError }}</p>
                     }
                 </div>
             }
@@ -31,8 +31,8 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
             >
                 <!-- Email -->
                 <div>
-                    <label for="login-email" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Email Address <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="login-email" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Email Address <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <input
                         id="login-email"
@@ -42,12 +42,12 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                         placeholder="jane@company.com"
                         aria-describedby="login-email-error"
                         [attr.aria-invalid]="getFieldError('email') ? 'true' : null"
-                        class="block w-full rounded-sm border bg-[#0d1117] px-3.5 py-2.5 text-sm text-white placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
-                        [class.border-[#21262d]]="!getFieldError('email')"
+                        class="block w-full rounded-sm border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                        [class.border-[#dce3d4]]="!getFieldError('email')"
                         [class.border-red-500]="!!getFieldError('email')"
                     />
                     @if (getFieldError('email')) {
-                        <p id="login-email-error" role="alert" class="mt-1.5 text-xs text-red-400">
+                        <p id="login-email-error" role="alert" class="mt-1.5 text-xs text-red-700">
                             {{ getFieldError('email') }}
                         </p>
                     }
@@ -55,8 +55,8 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
 
                 <!-- Password -->
                 <div>
-                    <label for="login-password" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Password <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="login-password" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Password <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <div class="relative">
                         <input
@@ -67,14 +67,14 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                             placeholder="Your password"
                             aria-describedby="login-password-error"
                             [attr.aria-invalid]="getFieldError('password') ? 'true' : null"
-                            class="block w-full rounded-sm border bg-[#0d1117] pl-3.5 pr-11 py-2.5 text-sm text-white placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
-                            [class.border-[#21262d]]="!getFieldError('password')"
+                            class="block w-full rounded-sm border bg-[#f8f9f3] pl-3.5 pr-11 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                            [class.border-[#dce3d4]]="!getFieldError('password')"
                             [class.border-red-500]="!!getFieldError('password')"
                         />
                         <button
                             type="button"
                             (click)="togglePasswordVisibility()"
-                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-[#484f58] hover:text-[#8b949e] cursor-pointer transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-r-lg"
+                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-[#65735c] hover:text-[#5e6c56] cursor-pointer transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-r-lg"
                             [attr.aria-label]="passwordVisible ? 'Hide password' : 'Show password'"
                             [attr.aria-pressed]="passwordVisible"
                         >
@@ -117,7 +117,7 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                         </button>
                     </div>
                     @if (getFieldError('password')) {
-                        <p id="login-password-error" role="alert" class="mt-1.5 text-xs text-red-400">
+                        <p id="login-password-error" role="alert" class="mt-1.5 text-xs text-red-700">
                             {{ getFieldError('password') }}
                         </p>
                     }
@@ -127,7 +127,7 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                 <button
                     type="submit"
                     [disabled]="loginInProgress()"
-                    class="w-full flex items-center justify-center gap-2 !rounded-sm bg-teal-400 px-4 py-3 text-sm font-semibold text-[#0d1117] transition-all duration-200 cursor-pointer hover:bg-teal-300 active:bg-teal-500 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-400"
+                    class="w-full flex items-center justify-center gap-2 !rounded-sm bg-[#315b2b] px-4 py-3 text-sm font-semibold text-white transition-all duration-200 cursor-pointer hover:bg-[#24471f] active:bg-teal-500 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-400"
                     aria-label="Log in to your account"
                 >
                     @if (loginInProgress()) {
@@ -149,10 +149,10 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
             <!-- Divider -->
             <div class="relative">
                 <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                    <div class="w-full border-t border-[#21262d]"></div>
+                    <div class="w-full border-t border-[#dce3d4]"></div>
                 </div>
                 <div class="relative flex justify-center text-xs">
-                    <span class="px-3 bg-[#161b22] text-[#6e7681]">or continue with</span>
+                    <span class="px-3 bg-[#ffffff] text-[#627059]">or continue with</span>
                 </div>
             </div>
 
@@ -170,7 +170,7 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                     ></div>
                     @if (googleLoginInProgress()) {
                         <div
-                            class="absolute inset-0 flex items-center justify-center gap-2 text-sm text-[#c9d1d9] bg-[#161b22]/80 rounded-sm"
+                            class="absolute inset-0 flex items-center justify-center gap-2 text-sm text-[#43523c] bg-[#ffffff]/80 rounded-sm"
                         >
                             <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                                 <circle
@@ -197,7 +197,7 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
                     type="button"
                     (click)="loginWithGoogle()"
                     [disabled]="googleLoginInProgress()"
-                    class="w-full flex items-center justify-center gap-3 !rounded-sm border border-[#21262d] bg-transparent px-4 py-2.5 text-sm font-medium text-[#c9d1d9] transition-all duration-200 cursor-pointer hover:border-[#8b949e] hover:text-white disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
+                    class="w-full flex items-center justify-center gap-3 !rounded-sm border border-[#dce3d4] bg-transparent px-4 py-2.5 text-sm font-medium text-[#43523c] transition-all duration-200 cursor-pointer hover:border-[#5e6c56] hover:text-[#202d1d] disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400"
                     aria-label="Log in with Google"
                 >
                     @if (googleLoginInProgress()) {
@@ -235,13 +235,13 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Welcome bac
             }
 
             <!-- Sign up link -->
-            <p class="text-center text-sm text-[#6e7681]">
+            <p class="text-center text-sm text-[#627059]">
                 Don't have an account?
                 <a
                     routerLink="/register"
-                    class="text-teal-400 font-medium cursor-pointer hover:text-teal-300 transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 rounded-sm"
+                    class="text-[#3c6533] font-medium cursor-pointer hover:text-teal-300 transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 rounded-sm"
                 >
-                    Sign up free
+                    Create an account
                 </a>
             </p>
         </div>
diff --git a/apps/36-blocks/src/app/website/pricing/pricing.component.html b/apps/36-blocks/src/app/website/pricing/pricing.component.html
index 56a9786f..05e9c642 100644
--- a/apps/36-blocks/src/app/website/pricing/pricing.component.html
+++ b/apps/36-blocks/src/app/website/pricing/pricing.component.html
@@ -1,14 +1,14 @@
-<main class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
+<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Hero -->
     <section class="text-center pt-10 pb-12 sm:pb-16" aria-labelledby="pricing-heading">
         <h1
             id="pricing-heading"
-            class="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#f0f6fc] tracking-tight mb-5 leading-[1.1]"
+            class="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#202d1d] tracking-tight mb-5 leading-[1.1]"
         >
             Plan your integration.<br class="hidden sm:block" />
-            <span class="text-teal-400">Confirm your service terms.</span>
+            <span class="text-[#3c6533]">Confirm your service terms.</span>
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
+        <p class="text-lg text-[#5e6c56] max-w-xl mx-auto leading-relaxed">
             Current prices, limits, and service commitments require confirmation for your environment.
         </p>
     </section>
@@ -19,18 +19,18 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch" aria-label="Pricing plans">
             @for (plan of plans; track plan.name) {
                 <article
-                    class="relative flex flex-col rounded-2xl border text-left transition-all duration-300 group bg-[#161b22]"
+                    class="relative flex flex-col rounded-2xl border text-left transition-all duration-300 group bg-[#ffffff]"
                     [class.border-teal-400\/60]="plan.highlight"
                     [class.shadow-\[0_0_0_1px_rgba\(45\,212\,191\,0\.25\)\,0_8px_48px_rgba\(45\,212\,191\,0\.12\)\]]="
                         plan.highlight
                     "
                     [class.bg-\[\#0f1f1e\]]="plan.highlight"
-                    [class.border-\[\#21262d\]]="!plan.highlight"
+                    [class.border-\[\#dce3d4\]]="!plan.highlight"
                     [class.hover\:border-\[\#30363d\]]="!plan.highlight"
                 >
                     @if (plan.badge) {
                         <span
-                            class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold whitespace-nowrap bg-[#0d1117] text-teal-400 border border-teal-400/50 shadow-[0_0_12px_rgba(45,212,191,0.3)]"
+                            class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold whitespace-nowrap bg-[#f8f9f3] text-[#3c6533] border border-teal-400/50 shadow-[0_0_12px_rgba(45,212,191,0.3)]"
                         >
                             {{ plan.badge }}
                         </span>
@@ -40,27 +40,27 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
                     <div
                         class="p-7 pb-6 border-b"
                         [class.border-teal-400\/15]="plan.highlight"
-                        [class.border-\[\#21262d\]]="!plan.highlight"
+                        [class.border-\[\#dce3d4\]]="!plan.highlight"
                     >
                         <h3
                             class="text-xl font-bold mb-1"
-                            [class.text-teal-400]="plan.highlight"
-                            [class.text-\[\#f0f6fc\]]="!plan.highlight"
+                            [class.text-[#3c6533]]="plan.highlight"
+                            [class.text-\[\#202d1d\]]="!plan.highlight"
                         >
                             {{ plan.name }}
                         </h3>
-                        <p class="text-sm mb-5 leading-snug text-[#8b949e]">
+                        <p class="text-sm mb-5 leading-snug text-[#5e6c56]">
                             {{ plan.description }}
                         </p>
                         <div class="flex items-end gap-1.5">
                             <span
                                 class="text-[42px] font-extrabold leading-none tracking-tight"
-                                [class.text-teal-400]="plan.highlight"
-                                [class.text-\[\#f0f6fc\]]="!plan.highlight"
+                                [class.text-[#3c6533]]="plan.highlight"
+                                [class.text-\[\#202d1d\]]="!plan.highlight"
                             >
                                 {{ plan.price }}
                             </span>
-                            <span class="text-sm font-medium pb-1.5 text-[#8b949e]">
+                            <span class="text-sm font-medium pb-1.5 text-[#5e6c56]">
                                 {{ plan.period }}
                             </span>
                         </div>
@@ -77,16 +77,16 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
                                 [class.opacity-40]="!feature.included"
                             >
                                 <mat-icon
-                                    class="!text-[18px] !w-[18px] !h-[18px] flex-shrink-0 mt-px text-teal-400"
-                                    [class.!text-\[\#6e7681\]]="!feature.included"
+                                    class="!text-[18px] !w-[18px] !h-[18px] flex-shrink-0 mt-px text-[#3c6533]"
+                                    [class.!text-\[\#627059\]]="!feature.included"
                                     aria-hidden="true"
                                 >
                                     {{ feature.included ? 'check_circle' : 'remove_circle_outline' }}
                                 </mat-icon>
                                 <span
                                     [class.font-semibold]="feature.bold"
-                                    [class.text-\[\#c9d1d9\]]="!feature.bold"
-                                    [class.text-\[\#8b949e\]]="feature.bold"
+                                    [class.text-\[\#43523c\]]="!feature.bold"
+                                    [class.text-\[\#5e6c56\]]="feature.bold"
                                 >
                                     {{ feature.text }}
                                 </span>
@@ -101,8 +101,8 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
                             class="block text-center no-underline w-full py-3 px-6 !rounded-sm font-semibold text-sm transition-all duration-200 cursor-pointer hover:-translate-y-0.5 active:translate-y-0 border"
                             [ngClass]="
                                 plan.highlight
-                                    ? 'bg-teal-400 text-[#0d1117] border-teal-400 hover:bg-teal-300'
-                                    : 'bg-transparent text-teal-400 border-teal-400/30 hover:border-teal-400/60 hover:bg-teal-400/5'
+                                    ? 'bg-[#315b2b] text-white border-teal-400 hover:bg-[#24471f]'
+                                    : 'bg-transparent text-[#3c6533] border-teal-400/30 hover:border-teal-400/60 hover:bg-[#dce9d4]/5'
                             "
                             [attr.aria-label]="plan.cta + ' — ' + plan.name + ' plan'"
                         >
@@ -118,14 +118,14 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
     <section class="mb-12 grid grid-cols-1 lg:grid-cols-2 gap-4" aria-label="Pricing information">
         @for (banner of infoBanners; track banner.title) {
             <div
-                class="flex items-start gap-5 rounded-2xl border border-[#21262d] bg-[#161b22] p-6 hover:border-[#30363d] transition-colors duration-200"
+                class="flex items-start gap-5 rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-6 hover:border-[#30363d] transition-colors duration-200"
             >
                 <div class="feature-main-icon">
-                    <mat-icon aria-hidden="true" class="!text-teal-400">{{ banner.icon }}</mat-icon>
+                    <mat-icon aria-hidden="true" class="!text-[#3c6533]">{{ banner.icon }}</mat-icon>
                 </div>
                 <div>
-                    <h2 class="text-sm font-semibold text-[#f0f6fc] mb-1">{{ banner.title }}</h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed m-0">{{ banner.description }}</p>
+                    <h2 class="text-sm font-semibold text-[#202d1d] mb-1">{{ banner.title }}</h2>
+                    <p class="text-sm text-[#5e6c56] leading-relaxed m-0">{{ banner.description }}</p>
                 </div>
             </div>
         }
@@ -134,27 +134,27 @@ <h2 class="text-sm font-semibold text-[#f0f6fc] mb-1">{{ banner.title }}</h2>
     <!-- Trust Section -->
     <section class="pb-20" aria-labelledby="trust-heading">
         <div class="text-center mb-10">
-            <h2 id="trust-heading" class="text-2xl sm:text-3xl font-bold text-[#f0f6fc] mb-3 tracking-tight">
+            <h2 id="trust-heading" class="text-2xl sm:text-3xl font-bold text-[#202d1d] mb-3 tracking-tight">
                 Built for serious SaaS teams
             </h2>
-            <p class="text-[#8b949e] text-base max-w-md mx-auto">
+            <p class="text-[#5e6c56] text-base max-w-md mx-auto">
                 Understand your configuration and verify the integration before launch.
             </p>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" aria-label="Trust features">
             @for (item of trustItems; track item.title) {
                 <div
-                    class="flex flex-col items-center text-center sm:items-start sm:text-left gap-3 p-6 rounded-xl border border-[#21262d] bg-[#161b22] hover:border-[#30363d] transition-colors duration-200"
+                    class="flex flex-col items-center text-center sm:items-start sm:text-left gap-3 p-6 rounded-xl border border-[#dce3d4] bg-[#ffffff] hover:border-[#30363d] transition-colors duration-200"
                 >
                     <div class="feature-main-icon mx-auto sm:mx-0">
-                        <mat-icon aria-hidden="true" class="!text-teal-400">{{ item.icon }}</mat-icon>
+                        <mat-icon aria-hidden="true" class="!text-[#3c6533]">{{ item.icon }}</mat-icon>
                     </div>
                     <div>
-                        <p class="text-sm font-semibold text-[#f0f6fc] mb-1">{{ item.title }}</p>
-                        <p class="text-xs text-[#8b949e] leading-relaxed m-0">{{ item.description }}</p>
+                        <p class="text-sm font-semibold text-[#202d1d] mb-1">{{ item.title }}</p>
+                        <p class="text-xs text-[#5e6c56] leading-relaxed m-0">{{ item.description }}</p>
                     </div>
                 </div>
             }
         </div>
     </section>
-</main>
+</div>
diff --git a/apps/36-blocks/src/app/website/privacy/privacy.component.html b/apps/36-blocks/src/app/website/privacy/privacy.component.html
index 68654959..fc3d1ab3 100644
--- a/apps/36-blocks/src/app/website/privacy/privacy.component.html
+++ b/apps/36-blocks/src/app/website/privacy/privacy.component.html
@@ -1,25 +1,25 @@
-<main class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
+<div class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
     <!-- Hero -->
     <section class="mb-14 text-center" aria-labelledby="privacy-heading" wsReveal="up">
         <h1
             id="privacy-heading"
-            class="text-4xl sm:text-5xl font-bold text-[#f0f6fc] tracking-tight mb-5 leading-[1.1]"
+            class="text-4xl sm:text-5xl font-bold text-[#202d1d] tracking-tight mb-5 leading-[1.1]"
         >
             Privacy Policy
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
+        <p class="text-lg text-[#5e6c56] max-w-xl mx-auto leading-relaxed">
             Your privacy matters. Here's exactly what we collect, why we collect it, and how we protect it.
         </p>
-        <p class="text-sm text-[#484f58] mt-3">Last updated: January 2026</p>
+        <p class="text-sm text-[#65735c] mt-3">Last updated: January 2026</p>
     </section>
 
-    <div class="flex flex-col gap-8 text-sm text-[#8b949e] leading-relaxed">
+    <div class="flex flex-col gap-8 text-sm text-[#5e6c56] leading-relaxed">
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-intro"
             wsReveal="up"
         >
-            <h2 id="priv-intro" class="text-xl font-bold text-[#f0f6fc] mb-3">1. Introduction</h2>
+            <h2 id="priv-intro" class="text-xl font-bold text-[#202d1d] mb-3">1. Introduction</h2>
             <p>
                 36Blocks ("we", "our", "us") operates the 36Blocks authentication and user management platform
                 ("Service"). This Privacy Policy explains how we collect, use, disclose, and safeguard your information
@@ -29,16 +29,16 @@ <h2 id="priv-intro" class="text-xl font-bold text-[#f0f6fc] mb-3">1. Introductio
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-collect"
             wsReveal="up"
         >
-            <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Information We Collect</h2>
+            <h2 id="priv-collect" class="text-xl font-bold text-[#202d1d] mb-3">2. Information We Collect</h2>
             <p class="mb-4">We collect the following categories of information:</p>
             <ul class="flex flex-col gap-3">
                 <li class="flex items-start gap-2">
                     <svg
-                        class="w-4 h-4 text-teal-400 flex-shrink-0 mt-0.5"
+                        class="w-4 h-4 text-[#3c6533] flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -48,13 +48,13 @@ <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Informati
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                     </svg>
                     <span
-                        ><strong class="text-[#c9d1d9]">Account Information:</strong> Email address, name, and password
+                        ><strong class="text-[#43523c]">Account Information:</strong> Email address, name, and password
                         when you register a developer account.</span
                     >
                 </li>
                 <li class="flex items-start gap-2">
                     <svg
-                        class="w-4 h-4 text-teal-400 flex-shrink-0 mt-0.5"
+                        class="w-4 h-4 text-[#3c6533] flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -64,14 +64,14 @@ <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Informati
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                     </svg>
                     <span
-                        ><strong class="text-[#c9d1d9]">End-User Data:</strong> Data about your application's users
+                        ><strong class="text-[#43523c]">End-User Data:</strong> Data about your application's users
                         (emails, phone numbers, login events) that flows through our authentication infrastructure on
                         your behalf. You are the data controller for this data.</span
                     >
                 </li>
                 <li class="flex items-start gap-2">
                     <svg
-                        class="w-4 h-4 text-teal-400 flex-shrink-0 mt-0.5"
+                        class="w-4 h-4 text-[#3c6533] flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -81,14 +81,14 @@ <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Informati
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                     </svg>
                     <span
-                        ><strong class="text-[#c9d1d9]">Usage &amp; Analytics:</strong> API call volumes, error rates,
+                        ><strong class="text-[#43523c]">Usage &amp; Analytics:</strong> API call volumes, error rates,
                         MAU counts, and dashboard activity to power your analytics views and our service
                         improvements.</span
                     >
                 </li>
                 <li class="flex items-start gap-2">
                     <svg
-                        class="w-4 h-4 text-teal-400 flex-shrink-0 mt-0.5"
+                        class="w-4 h-4 text-[#3c6533] flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -98,7 +98,7 @@ <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Informati
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                     </svg>
                     <span
-                        ><strong class="text-[#c9d1d9]">Technical Data:</strong> IP address, browser type, and device
+                        ><strong class="text-[#43523c]">Technical Data:</strong> IP address, browser type, and device
                         identifiers collected automatically for security and fraud detection.</span
                     >
                 </li>
@@ -106,11 +106,11 @@ <h2 id="priv-collect" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Informati
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-use"
             wsReveal="up"
         >
-            <h2 id="priv-use" class="text-xl font-bold text-[#f0f6fc] mb-3">3. How We Use Your Information</h2>
+            <h2 id="priv-use" class="text-xl font-bold text-[#202d1d] mb-3">3. How We Use Your Information</h2>
             <ul class="flex flex-col gap-2">
                 @for (
                     item of [
@@ -124,7 +124,7 @@ <h2 id="priv-use" class="text-xl font-bold text-[#f0f6fc] mb-3">3. How We Use Yo
                 ) {
                     <li class="flex items-center gap-2">
                         <svg
-                            class="w-4 h-4 text-teal-400 flex-shrink-0"
+                            class="w-4 h-4 text-[#3c6533] flex-shrink-0"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -140,11 +140,11 @@ <h2 id="priv-use" class="text-xl font-bold text-[#f0f6fc] mb-3">3. How We Use Yo
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-share"
             wsReveal="up"
         >
-            <h2 id="priv-share" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Data Sharing</h2>
+            <h2 id="priv-share" class="text-xl font-bold text-[#202d1d] mb-3">4. Data Sharing</h2>
             <p class="mb-3">We do not sell your data. We share data only with:</p>
             <ul class="flex flex-col gap-2">
                 @for (
@@ -157,7 +157,7 @@ <h2 id="priv-share" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Data Sharin
                 ) {
                     <li class="flex items-center gap-2">
                         <svg
-                            class="w-4 h-4 text-teal-400 flex-shrink-0"
+                            class="w-4 h-4 text-[#3c6533] flex-shrink-0"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -173,11 +173,11 @@ <h2 id="priv-share" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Data Sharin
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-retention"
             wsReveal="up"
         >
-            <h2 id="priv-retention" class="text-xl font-bold text-[#f0f6fc] mb-3">5. Data Retention</h2>
+            <h2 id="priv-retention" class="text-xl font-bold text-[#202d1d] mb-3">5. Data Retention</h2>
             <p>
                 Retention and deletion schedules depend on the deployed environment and applicable service terms.
                 Contact the team to confirm the current policy for account data, request logs, and activity records
@@ -186,11 +186,11 @@ <h2 id="priv-retention" class="text-xl font-bold text-[#f0f6fc] mb-3">5. Data Re
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="priv-rights"
             wsReveal="up"
         >
-            <h2 id="priv-rights" class="text-xl font-bold text-[#f0f6fc] mb-3">6. Your Rights</h2>
+            <h2 id="priv-rights" class="text-xl font-bold text-[#202d1d] mb-3">6. Your Rights</h2>
             <p class="mb-3">Depending on your jurisdiction, you may have the right to:</p>
             <ul class="flex flex-col gap-2">
                 @for (
@@ -205,7 +205,7 @@ <h2 id="priv-rights" class="text-xl font-bold text-[#f0f6fc] mb-3">6. Your Right
                 ) {
                     <li class="flex items-center gap-2">
                         <svg
-                            class="w-4 h-4 text-teal-400 flex-shrink-0"
+                            class="w-4 h-4 text-[#3c6533] flex-shrink-0"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -220,16 +220,16 @@ <h2 id="priv-rights" class="text-xl font-bold text-[#f0f6fc] mb-3">6. Your Right
             </ul>
             <p class="mt-4">
                 To exercise any right, email
-                <a href="mailto:privacy@36blocks.com" class="text-teal-400 hover:underline">privacy&#64;36blocks.com</a
+                <a href="mailto:privacy@36blocks.com" class="text-[#3c6533] hover:underline">privacy&#64;36blocks.com</a
                 >.
             </p>
         </section>
 
-        <!-- <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow" aria-labelledby="priv-contact" wsReveal="up">
-            <h2 id="priv-contact" class="text-xl font-bold text-[#f0f6fc] mb-3">7. Contact</h2>
+        <!-- <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow" aria-labelledby="priv-contact" wsReveal="up">
+            <h2 id="priv-contact" class="text-xl font-bold text-[#202d1d] mb-3">7. Contact</h2>
             <p>
-                Questions about this policy? Contact us at <a href="mailto:privacy@36blocks.com" class="text-teal-400 hover:underline">privacy&#64;36blocks.com</a>.
+                Questions about this policy? Contact us at <a href="mailto:privacy@36blocks.com" class="text-[#3c6533] hover:underline">privacy&#64;36blocks.com</a>.
             </p>
         </section> -->
     </div>
-</main>
+</div>
diff --git a/apps/36-blocks/src/app/website/register/register-page.component.html b/apps/36-blocks/src/app/website/register/register-page.component.html
index dc321ff1..3267ecc8 100644
--- a/apps/36-blocks/src/app/website/register/register-page.component.html
+++ b/apps/36-blocks/src/app/website/register/register-page.component.html
@@ -3,24 +3,24 @@
     <div class="w-full max-w-lg">
         <!-- Header -->
         <div class="text-center mb-8">
-            <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Create your account</h1>
-            <p class="mt-2 text-sm text-[#8b949e]">Join 36Blocks and start building in minutes.</p>
+            <h1 class="text-2xl sm:text-3xl font-bold text-[#202d1d] tracking-tight">Create your account</h1>
+            <p class="mt-2 text-sm text-[#5e6c56]">Join 36Blocks and start building in minutes.</p>
         </div>
 
         <!-- Success state -->
         @if (registrationSuccess()) {
             <div
-                class="rounded-xl border border-teal-400/30 bg-teal-400/5 px-6 py-8 text-center"
+                class="rounded-xl border border-teal-400/30 bg-[#dce9d4]/5 px-6 py-8 text-center"
                 role="alert"
                 aria-live="polite"
                 id="registration-success-banner"
             >
                 <div
-                    class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-teal-400/10 border border-teal-400/20 mb-4"
+                    class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[#dce9d4]/10 border border-teal-400/20 mb-4"
                     aria-hidden="true"
                 >
                     <svg
-                        class="w-7 h-7 text-teal-400"
+                        class="w-7 h-7 text-[#3c6533]"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -34,17 +34,17 @@ <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight">Create your
                         />
                     </svg>
                 </div>
-                <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
-                <p class="text-sm text-[#8b949e] leading-relaxed">
+                <h2 class="text-xl font-bold text-[#202d1d] mb-2">Check your inbox!</h2>
+                <p class="text-sm text-[#5e6c56] leading-relaxed">
                     We've sent a verification link to
-                    <span class="font-semibold text-teal-400">{{ registeredEmail() }}</span
+                    <span class="font-semibold text-[#3c6533]">{{ registeredEmail() }}</span
                     >. Click the link in the email to verify your address and complete sign-up.
                 </p>
-                <p class="mt-3 text-xs text-[#6e7681]">
+                <p class="mt-3 text-xs text-[#627059]">
                     Didn't receive it? Check your spam folder or
                     <button
                         type="button"
-                        class="text-teal-400 underline cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 transition-colors duration-150 hover:text-teal-300"
+                        class="text-[#3c6533] underline cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 transition-colors duration-150 hover:text-teal-300"
                         (click)="submitRegistration()"
                     >
                         try again</button
@@ -58,7 +58,7 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                 (ngSubmit)="submitRegistration()"
                 novalidate
                 aria-label="Registration form"
-                class="rounded-xl border border-[#21262d] bg-[#161b22] px-6 py-8 space-y-5"
+                class="rounded-xl border border-[#dce3d4] bg-[#ffffff] px-6 py-8 space-y-5"
             >
                 <!-- Global API errors -->
                 @if (registrationErrors().length > 0) {
@@ -68,15 +68,15 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                         class="rounded-sm border border-red-500/30 bg-red-500/5 px-4 py-3"
                     >
                         @for (registrationError of registrationErrors(); track registrationError) {
-                            <p class="text-sm text-red-400">{{ registrationError }}</p>
+                            <p class="text-sm text-red-700">{{ registrationError }}</p>
                         }
                     </div>
                 }
 
                 <!-- Email -->
                 <div>
-                    <label for="reg-email" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Email Address <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="reg-email" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Email Address <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <input
                         id="reg-email"
@@ -86,12 +86,12 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                         placeholder="jane@company.com"
                         aria-describedby="reg-email-error"
                         [attr.aria-invalid]="getFieldError('email') ? 'true' : null"
-                        class="block w-full rounded-sm border bg-[#0d1117] px-3.5 py-2.5 text-sm text-white placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
-                        [class.border-[#21262d]]="!getFieldError('email')"
+                        class="block w-full rounded-sm border bg-[#f8f9f3] px-3.5 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                        [class.border-[#dce3d4]]="!getFieldError('email')"
                         [class.border-red-500]="!!getFieldError('email')"
                     />
                     @if (getFieldError('email')) {
-                        <p id="reg-email-error" role="alert" class="mt-1.5 text-xs text-red-400">
+                        <p id="reg-email-error" role="alert" class="mt-1.5 text-xs text-red-700">
                             {{ getFieldError('email') }}
                         </p>
                     }
@@ -99,8 +99,8 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
 
                 <!-- Password -->
                 <div>
-                    <label for="reg-password" class="block text-sm font-medium text-[#c9d1d9] mb-1.5">
-                        Password <span class="text-red-400" aria-hidden="true">*</span>
+                    <label for="reg-password" class="block text-sm font-medium text-[#43523c] mb-1.5">
+                        Password <span class="text-red-700" aria-hidden="true">*</span>
                     </label>
                     <div class="relative">
                         <input
@@ -111,14 +111,14 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                             placeholder="Min. 8 characters"
                             aria-describedby="reg-password-error"
                             [attr.aria-invalid]="getFieldError('password') ? 'true' : null"
-                            class="block w-full rounded-sm border bg-[#0d1117] pl-3.5 pr-11 py-2.5 text-sm text-white placeholder:text-[#484f58] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
-                            [class.border-[#21262d]]="!getFieldError('password')"
+                            class="block w-full rounded-sm border bg-[#f8f9f3] pl-3.5 pr-11 py-2.5 text-sm text-[#202d1d] placeholder:text-[#65735c] transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-teal-400"
+                            [class.border-[#dce3d4]]="!getFieldError('password')"
                             [class.border-red-500]="!!getFieldError('password')"
                         />
                         <button
                             type="button"
                             (click)="togglePasswordVisibility()"
-                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-[#484f58] hover:text-[#8b949e] cursor-pointer transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-r-lg"
+                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-[#65735c] hover:text-[#5e6c56] cursor-pointer transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 focus-visible:rounded-r-lg"
                             [attr.aria-label]="passwordVisible ? 'Hide password' : 'Show password'"
                             [attr.aria-pressed]="passwordVisible"
                         >
@@ -161,7 +161,7 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                         </button>
                     </div>
                     @if (getFieldError('password')) {
-                        <p id="reg-password-error" role="alert" class="mt-1.5 text-xs text-red-400">
+                        <p id="reg-password-error" role="alert" class="mt-1.5 text-xs text-red-700">
                             {{ getFieldError('password') }}
                         </p>
                     }
@@ -181,7 +181,7 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                                 >
                                     @if (rule.met) {
                                         <svg
-                                            class="w-3.5 h-3.5 shrink-0 text-teal-400"
+                                            class="w-3.5 h-3.5 shrink-0 text-[#3c6533]"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor"
@@ -194,10 +194,10 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                                                 d="M4.5 12.75l6 6 9-13.5"
                                             />
                                         </svg>
-                                        <span class="text-teal-400">{{ rule.label }}</span>
+                                        <span class="text-[#3c6533]">{{ rule.label }}</span>
                                     } @else {
                                         <svg
-                                            class="w-3.5 h-3.5 shrink-0 text-[#484f58]"
+                                            class="w-3.5 h-3.5 shrink-0 text-[#65735c]"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor"
@@ -210,7 +210,7 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                                                 d="M6 18L18 6M6 6l12 12"
                                             />
                                         </svg>
-                                        <span class="text-[#6e7681]">{{ rule.label }}</span>
+                                        <span class="text-[#627059]">{{ rule.label }}</span>
                                     }
                                 </li>
                             }
@@ -222,7 +222,7 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                 <button
                     type="submit"
                     [disabled]="registrationInProgress()"
-                    class="w-full flex items-center justify-center gap-2 !rounded-sm bg-teal-400 px-4 py-3 text-sm font-semibold text-[#0d1117] transition-all duration-200 cursor-pointer hover:bg-teal-300 active:bg-teal-500 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-400"
+                    class="w-full flex items-center justify-center gap-2 !rounded-sm bg-[#315b2b] px-4 py-3 text-sm font-semibold text-white transition-all duration-200 cursor-pointer hover:bg-[#24471f] active:bg-teal-500 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-400"
                     aria-label="Create your 36Blocks account"
                 >
                     @if (registrationInProgress()) {
@@ -241,11 +241,11 @@ <h2 class="text-xl font-bold text-white mb-2">Check your inbox!</h2>
                 </button>
 
                 <!-- Login link -->
-                <p class="text-center text-sm text-[#6e7681]">
+                <p class="text-center text-sm text-[#627059]">
                     Already have an account?
                     <a
                         routerLink="/login"
-                        class="text-teal-400 font-medium cursor-pointer hover:text-teal-300 transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 rounded-sm"
+                        class="text-[#3c6533] font-medium cursor-pointer hover:text-teal-300 transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-400 rounded-sm"
                     >
                         Log in
                     </a>
diff --git a/apps/36-blocks/src/app/website/security/security.component.html b/apps/36-blocks/src/app/website/security/security.component.html
index ffebfb1a..50eaaedd 100644
--- a/apps/36-blocks/src/app/website/security/security.component.html
+++ b/apps/36-blocks/src/app/website/security/security.component.html
@@ -1,26 +1,26 @@
-<main class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
+<div class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
     <section class="mb-14 text-center" aria-labelledby="security-heading" wsReveal="up">
         <h1
             id="security-heading"
-            class="text-4xl sm:text-5xl font-bold text-[#f0f6fc] tracking-tight mb-5 leading-[1.1]"
+            class="text-4xl sm:text-5xl font-bold text-[#202d1d] tracking-tight mb-5 leading-[1.1]"
         >
             Security at 36Blocks
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
+        <p class="text-lg text-[#5e6c56] max-w-xl mx-auto leading-relaxed">
             Understand the access boundaries and configuration that protect your connected applications.
         </p>
     </section>
-    <div class="flex flex-col gap-8 text-sm text-[#8b949e] leading-relaxed">
-        <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8" aria-labelledby="sec-auth">
-            <h2 id="sec-auth" class="text-xl font-bold text-[#f0f6fc] mb-3">Authentication configuration</h2>
+    <div class="flex flex-col gap-8 text-sm text-[#5e6c56] leading-relaxed">
+        <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8" aria-labelledby="sec-auth">
+            <h2 id="sec-auth" class="text-xl font-bold text-[#202d1d] mb-3">Authentication configuration</h2>
             <p>
                 Blocks support configurable login methods, provider settings, session expiry, and hCaptcha integration.
                 Availability and enforcement depend on the selected block and deployment. Configure the providers and
                 verify failure, expiry, and recovery behavior for your application before launch.
             </p>
         </section>
-        <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8" aria-labelledby="sec-access">
-            <h2 id="sec-access" class="text-xl font-bold text-[#f0f6fc] mb-3">Identity and application access</h2>
+        <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8" aria-labelledby="sec-access">
+            <h2 id="sec-access" class="text-xl font-bold text-[#202d1d] mb-3">Identity and application access</h2>
             <p class="mb-3">
                 Authentication identifies a user. It does not grant access to every application or organization. Roles
                 and permissions help model membership, while each connected product remains responsible for resource
@@ -31,8 +31,8 @@ <h2 id="sec-access" class="text-xl font-bold text-[#f0f6fc] mb-3">Identity and a
                 verify authentication results, expiry, membership, and permissions before granting access.
             </p>
         </section>
-        <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8" aria-labelledby="sec-activity">
-            <h2 id="sec-activity" class="text-xl font-bold text-[#f0f6fc] mb-3">Investigation and activity history</h2>
+        <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8" aria-labelledby="sec-activity">
+            <h2 id="sec-activity" class="text-xl font-bold text-[#202d1d] mb-3">Investigation and activity history</h2>
             <p class="mb-3">
                 Request logs help investigate API failures. Sensitive-operation activity history records the operations
                 that have been instrumented, including Login as attempts. Coverage and availability depend on the
@@ -43,21 +43,21 @@ <h2 id="sec-activity" class="text-xl font-bold text-[#f0f6fc] mb-3">Investigatio
                 records within their documented coverage.
             </p>
         </section>
-        <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8" aria-labelledby="sec-hosting">
-            <h2 id="sec-hosting" class="text-xl font-bold text-[#f0f6fc] mb-3">Deployment responsibilities</h2>
+        <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8" aria-labelledby="sec-hosting">
+            <h2 id="sec-hosting" class="text-xl font-bold text-[#202d1d] mb-3">Deployment responsibilities</h2>
             <p>
                 Transport protection, database encryption, backups, recovery, and availability depend on the hosting
                 environment. Confirm these controls and any service commitments for your deployment. Ask the team for
                 environment-specific availability and recovery commitments.
             </p>
         </section>
-        <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8" aria-labelledby="sec-disclosure">
-            <h2 id="sec-disclosure" class="text-xl font-bold text-[#f0f6fc] mb-3">Report a security concern</h2>
+        <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8" aria-labelledby="sec-disclosure">
+            <h2 id="sec-disclosure" class="text-xl font-bold text-[#202d1d] mb-3">Report a security concern</h2>
             <p>
-                Contact the team through the <a href="/contact" class="text-teal-400 underline">contact page</a>.
+                Contact the team through the <a href="/contact" class="text-[#3c6533] underline">contact page</a>.
                 Include the affected flow and safe reproduction steps. Do not include passwords, session tokens, or
                 personal data in your initial message.
             </p>
         </section>
     </div>
-</main>
+</div>
diff --git a/apps/36-blocks/src/app/website/terms/terms.component.html b/apps/36-blocks/src/app/website/terms/terms.component.html
index e8663699..f4ee4051 100644
--- a/apps/36-blocks/src/app/website/terms/terms.component.html
+++ b/apps/36-blocks/src/app/website/terms/terms.component.html
@@ -1,22 +1,22 @@
-<main class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
+<div class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
     <!-- Hero -->
     <section class="mb-14 text-center" aria-labelledby="terms-heading" wsReveal="up">
-        <h1 id="terms-heading" class="text-4xl sm:text-5xl font-bold text-[#f0f6fc] tracking-tight mb-5 leading-[1.1]">
+        <h1 id="terms-heading" class="text-4xl sm:text-5xl font-bold text-[#202d1d] tracking-tight mb-5 leading-[1.1]">
             Terms of Service
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
+        <p class="text-lg text-[#5e6c56] max-w-xl mx-auto leading-relaxed">
             Please read these terms carefully before using 36Blocks.
         </p>
-        <p class="text-sm text-[#484f58] mt-3">Last updated: January 2026</p>
+        <p class="text-sm text-[#65735c] mt-3">Last updated: January 2026</p>
     </section>
 
-    <div class="flex flex-col gap-8 text-sm text-[#8b949e] leading-relaxed">
+    <div class="flex flex-col gap-8 text-sm text-[#5e6c56] leading-relaxed">
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-accept"
             wsReveal="up"
         >
-            <h2 id="terms-accept" class="text-xl font-bold text-[#f0f6fc] mb-3">1. Acceptance of Terms</h2>
+            <h2 id="terms-accept" class="text-xl font-bold text-[#202d1d] mb-3">1. Acceptance of Terms</h2>
             <p>
                 By accessing or using the 36Blocks platform, APIs, browser widget, or any related services
                 (collectively, the "Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not
@@ -25,11 +25,11 @@ <h2 id="terms-accept" class="text-xl font-bold text-[#f0f6fc] mb-3">1. Acceptanc
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-service"
             wsReveal="up"
         >
-            <h2 id="terms-service" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Description of Service</h2>
+            <h2 id="terms-service" class="text-xl font-bold text-[#202d1d] mb-3">2. Description of Service</h2>
             <p>
                 36Blocks provides a developer authentication and user management platform, including plug-and-play login
                 widgets, role-based access control, user analytics, and session management. The Service is provided on a
@@ -38,11 +38,11 @@ <h2 id="terms-service" class="text-xl font-bold text-[#f0f6fc] mb-3">2. Descript
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-accounts"
             wsReveal="up"
         >
-            <h2 id="terms-accounts" class="text-xl font-bold text-[#f0f6fc] mb-3">3. Accounts &amp; Registration</h2>
+            <h2 id="terms-accounts" class="text-xl font-bold text-[#202d1d] mb-3">3. Accounts &amp; Registration</h2>
             <p class="mb-3">
                 You must provide accurate, complete information when creating an account. You are responsible for
                 maintaining the confidentiality of your credentials and all activity under your account. You must
@@ -52,11 +52,11 @@ <h2 id="terms-accounts" class="text-xl font-bold text-[#f0f6fc] mb-3">3. Account
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-use"
             wsReveal="up"
         >
-            <h2 id="terms-use" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Acceptable Use</h2>
+            <h2 id="terms-use" class="text-xl font-bold text-[#202d1d] mb-3">4. Acceptable Use</h2>
             <p class="mb-3">You agree not to use the Service to:</p>
             <ul class="flex flex-col gap-2">
                 @for (
@@ -72,7 +72,7 @@ <h2 id="terms-use" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Acceptable U
                 ) {
                     <li class="flex items-center gap-2">
                         <svg
-                            class="w-4 h-4 text-[#6e7681] flex-shrink-0"
+                            class="w-4 h-4 text-[#627059] flex-shrink-0"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -88,11 +88,11 @@ <h2 id="terms-use" class="text-xl font-bold text-[#f0f6fc] mb-3">4. Acceptable U
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-billing"
             wsReveal="up"
         >
-            <h2 id="terms-billing" class="text-xl font-bold text-[#f0f6fc] mb-3">5. Billing &amp; Payment</h2>
+            <h2 id="terms-billing" class="text-xl font-bold text-[#202d1d] mb-3">5. Billing &amp; Payment</h2>
             <p class="mb-3">
                 Paid plans are billed monthly in advance. Usage-based charges (MAU overages, SMS) are billed in arrears
                 at the end of each billing cycle. All prices are in USD and exclusive of applicable taxes.
@@ -104,11 +104,11 @@ <h2 id="terms-billing" class="text-xl font-bold text-[#f0f6fc] mb-3">5. Billing
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-ip"
             wsReveal="up"
         >
-            <h2 id="terms-ip" class="text-xl font-bold text-[#f0f6fc] mb-3">6. Intellectual Property</h2>
+            <h2 id="terms-ip" class="text-xl font-bold text-[#202d1d] mb-3">6. Intellectual Property</h2>
             <p>
                 The Service and its original content, features, and functionality are and remain the exclusive property
                 of 36Blocks. You retain all ownership of your application data. You grant us a limited licence to
@@ -117,11 +117,11 @@ <h2 id="terms-ip" class="text-xl font-bold text-[#f0f6fc] mb-3">6. Intellectual
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-disclaimer"
             wsReveal="up"
         >
-            <h2 id="terms-disclaimer" class="text-xl font-bold text-[#f0f6fc] mb-3">
+            <h2 id="terms-disclaimer" class="text-xl font-bold text-[#202d1d] mb-3">
                 7. Disclaimer &amp; Limitation of Liability
             </h2>
             <p class="mb-3">
@@ -136,11 +136,11 @@ <h2 id="terms-disclaimer" class="text-xl font-bold text-[#f0f6fc] mb-3">
         </section>
 
         <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow"
+            class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow"
             aria-labelledby="terms-changes"
             wsReveal="up"
         >
-            <h2 id="terms-changes" class="text-xl font-bold text-[#f0f6fc] mb-3">8. Changes to Terms</h2>
+            <h2 id="terms-changes" class="text-xl font-bold text-[#202d1d] mb-3">8. Changes to Terms</h2>
             <p>
                 We may update these Terms at any time. We will provide at least 14 days' notice of material changes via
                 email or in-dashboard notice. Continued use of the Service after changes take effect constitutes
@@ -148,11 +148,11 @@ <h2 id="terms-changes" class="text-xl font-bold text-[#f0f6fc] mb-3">8. Changes
             </p>
         </section>
 
-        <!-- <section class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-glow" aria-labelledby="terms-contact" wsReveal="up">
-            <h2 id="terms-contact" class="text-xl font-bold text-[#f0f6fc] mb-3">9. Contact</h2>
+        <!-- <section class="rounded-2xl border border-[#dce3d4] bg-[#ffffff] p-8 ws-hover-glow" aria-labelledby="terms-contact" wsReveal="up">
+            <h2 id="terms-contact" class="text-xl font-bold text-[#202d1d] mb-3">9. Contact</h2>
             <p>
-                Questions about these Terms? Email us at <a href="mailto:legal@36blocks.com" class="text-teal-400 hover:underline">legal&#64;36blocks.com</a>.
+                Questions about these Terms? Email us at <a href="mailto:legal@36blocks.com" class="text-[#3c6533] hover:underline">legal&#64;36blocks.com</a>.
             </p>
         </section> -->
     </div>
-</main>
+</div>
diff --git a/apps/36-blocks/src/assets/fonts/MATERIAL-ICONS-LICENSE.txt b/apps/36-blocks/src/assets/fonts/MATERIAL-ICONS-LICENSE.txt
new file mode 100644
index 00000000..7a4a3ea2
--- /dev/null
+++ b/apps/36-blocks/src/assets/fonts/MATERIAL-ICONS-LICENSE.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
\ No newline at end of file
diff --git a/apps/36-blocks/src/assets/fonts/material-icons-outlined.woff2 b/apps/36-blocks/src/assets/fonts/material-icons-outlined.woff2
new file mode 100644
index 00000000..d44b9486
Binary files /dev/null and b/apps/36-blocks/src/assets/fonts/material-icons-outlined.woff2 differ
diff --git a/apps/36-blocks/src/assets/fonts/material-icons.woff2 b/apps/36-blocks/src/assets/fonts/material-icons.woff2
new file mode 100644
index 00000000..f1fd22ff
Binary files /dev/null and b/apps/36-blocks/src/assets/fonts/material-icons.woff2 differ
diff --git a/apps/36-blocks/src/assets/scss/component/_experience.scss b/apps/36-blocks/src/assets/scss/component/_experience.scss
new file mode 100644
index 00000000..126ab008
--- /dev/null
+++ b/apps/36-blocks/src/assets/scss/component/_experience.scss
@@ -0,0 +1,541 @@
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('/assets/fonts/material-icons.woff2') format('woff2');
+}
+@font-face {
+    font-family: 'Material Icons Outlined';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('/assets/fonts/material-icons-outlined.woff2') format('woff2');
+}
+.mat-icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+.material-icons-outlined {
+    font-family: 'Material Icons Outlined';
+}
+/* Shared website and application language. Keep semantic colors separate from status. */
+:root {
+    --experience-page: #f8f9f3;
+    --experience-surface: #fff;
+    --experience-ink: #202d1d;
+    --experience-muted: #5e6c56;
+    --experience-border: #dce3d4;
+    --experience-accent: #315b2b;
+    --experience-soft: #edf2e7;
+    --experience-radius: 10px;
+    --website-header-height: 76px;
+}
+body {
+    font-family:
+        Inter,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        sans-serif;
+    letter-spacing: -0.012em;
+}
+body.light-theme {
+    --mat-sys-primary: #315b2b;
+    --mat-sys-on-primary: #fff;
+    --mat-sys-primary-container: #e4eddc;
+    --mat-sys-on-primary-container: #25491e;
+    --mat-sys-surface: #fff;
+    --mat-sys-on-surface: #202d1d;
+    --mat-sys-on-surface-variant: #5e6c56;
+    --mat-sys-outline: #8d9d82;
+    --mat-sys-outline-variant: #dce3d4;
+    --color-common-primary: #315b2b;
+    --color-common-primary-light: #edf2e7;
+    --color-common-app-bg: #f8f9f3;
+    --color-common-border: #dce3d4;
+    --color-common-secondary-text: #5e6c56;
+    --color-common-text: #202d1d;
+    --color-link-color: #315b2b;
+}
+body.dark-theme {
+    --experience-page: #151d16;
+    --experience-surface: #1d281e;
+    --experience-ink: #e5eddf;
+    --experience-muted: #a9b7a0;
+    --experience-border: #344430;
+    --experience-accent: #b0ce9f;
+    --experience-soft: #283624;
+}
+body.website-active {
+    background: var(--experience-page);
+    background-image: none;
+    color: var(--experience-ink);
+}
+.website-shell {
+    --experience-page: #f8f9f3;
+    --experience-surface: #fff;
+    --experience-ink: #202d1d;
+    --experience-muted: #5e6c56;
+    --experience-border: #dce3d4;
+    --experience-accent: #315b2b;
+    --experience-soft: #edf2e7;
+    color: #202d1d;
+    background: #f8f9f3;
+    min-height: 100vh;
+}
+.section-width {
+    width: min(1180px, calc(100% - 80px));
+    margin-inline: auto;
+}
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 24px;
+    font-weight: 650;
+    letter-spacing: -0.065em;
+    text-decoration: none;
+    color: inherit;
+}
+.brand-mark {
+    font-size: 32px;
+    line-height: 1;
+    color: var(--experience-accent);
+    font-weight: 400;
+}
+.eyebrow {
+    font-size: 10px;
+    line-height: 1.6;
+    letter-spacing: 0.075em;
+    font-weight: 500;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--experience-muted);
+}
+.mono {
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+.status-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #668459;
+    flex-shrink: 0;
+}
+.action-primary {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    padding: 14px 20px;
+    border-radius: 7px;
+    background: #315b2b;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    min-height: 46px;
+    text-decoration: none;
+    border: 1px solid #315b2b;
+    transition: background 0.15s;
+}
+.action-primary:hover {
+    background: #24491f;
+    color: #fff;
+}
+.action-text {
+    font-size: 12px;
+    color: var(--experience-accent);
+    text-decoration: none;
+}
+a,
+button,
+input,
+select,
+textarea {
+    touch-action: manipulation;
+}
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+    outline: 2px solid #638e50;
+    outline-offset: 3px;
+}
+.content-page {
+    max-width: 900px;
+    padding-block: 80px 100px;
+    min-height: 60vh;
+}
+.content-page h1 {
+    font-size: clamp(36px, 5vw, 60px);
+    font-weight: 500;
+    letter-spacing: -0.055em;
+    line-height: 1.08;
+    margin: 18px 0 24px;
+}
+.content-page p {
+    line-height: 1.8;
+    color: var(--experience-muted);
+    max-width: 650px;
+}
+.content-page .content-lead {
+    font-size: 20px;
+}
+.content-page .action-primary {
+    margin: 24px 20px 0 0;
+}
+.workspace-shell {
+    color: var(--experience-ink);
+    background: var(--experience-page);
+    width: 100%;
+    height: 100dvh;
+    display: flex;
+    overflow: hidden;
+}
+.workspace-main {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.workspace-topbar {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    min-height: 66px;
+    padding: 0 32px;
+    border-bottom: 1px solid var(--experience-border);
+    background: var(--experience-surface);
+    font-size: 12px;
+}
+.workspace-topbar .context-path {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+.context-client {
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.context-separator {
+    color: var(--experience-muted);
+    opacity: 0.5;
+}
+.context-area {
+    font-weight: 500;
+}
+.context-meta {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--experience-muted);
+}
+.environment-label {
+    border: 1px solid var(--experience-border);
+    border-radius: 5px;
+    padding: 4px 7px;
+    font:
+        10px ui-monospace,
+        monospace;
+}
+.workspace-content {
+    padding: 32px;
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+    scrollbar-gutter: stable;
+}
+.workspace-content > router-outlet + * {
+    display: block;
+    max-width: 1500px;
+    margin-inline: auto;
+}
+.page-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 28px;
+}
+.page-heading h1,
+.page-heading h2 {
+    font-size: 30px;
+    letter-spacing: -0.045em;
+    font-weight: 500;
+    margin: 6px 0 8px;
+    line-height: 1.15;
+}
+.page-heading p {
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--experience-muted);
+    margin: 0;
+}
+.page-heading a {
+    font-size: 12px;
+    color: var(--experience-accent);
+    white-space: nowrap;
+}
+.page-kicker {
+    font:
+        10px ui-monospace,
+        monospace;
+    letter-spacing: 0.1em;
+    color: var(--experience-muted);
+}
+.journey-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-block: 26px;
+}
+.journey-link {
+    display: flex;
+    gap: 14px;
+    align-items: start;
+    padding: 22px;
+    border: 1px solid var(--experience-border);
+    background: var(--experience-surface);
+    border-radius: var(--experience-radius);
+    text-decoration: none;
+    color: inherit;
+}
+.journey-link:hover {
+    border-color: #8eaa7e;
+    background: var(--experience-soft);
+}
+.journey-link .step {
+    font:
+        11px ui-monospace,
+        monospace;
+    color: var(--experience-muted);
+    padding-top: 3px;
+}
+.journey-link strong {
+    font-size: 14px;
+    font-weight: 500;
+    display: block;
+}
+.journey-link p {
+    font-size: 12px;
+    line-height: 1.7;
+    color: var(--experience-muted);
+    margin: 7px 0 0;
+}
+.journey-link .arrow {
+    margin-left: auto;
+    color: var(--experience-accent);
+}
+.experience-notice {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    border: 1px solid var(--experience-border);
+    border-radius: 8px;
+    padding: 15px 18px;
+    background: var(--experience-soft);
+    font-size: 12px;
+    line-height: 1.7;
+    margin-bottom: 22px;
+}
+.experience-notice a {
+    color: var(--experience-accent);
+    text-decoration: underline;
+    margin-left: auto;
+}
+.experience-notice.error {
+    background: #fff3ef;
+    border-color: #e8c7b9;
+    color: #8b3626;
+}
+.dark-theme .experience-notice.error {
+    background: #39251e;
+    color: #ffc3af;
+}
+.experience-notice button {
+    margin-left: auto;
+}
+.workspace-content .table-scroll {
+    border: 1px solid var(--experience-border);
+    border-radius: 10px;
+    overflow: auto;
+    background: var(--experience-surface);
+}
+.workspace-content .default-table {
+    background: var(--experience-surface);
+}
+.workspace-content .default-table th {
+    background: var(--experience-soft);
+    font-size: 10px;
+    letter-spacing: 0.045em;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: var(--experience-muted);
+    height: 44px;
+}
+.workspace-content .default-table td {
+    font-size: 13px;
+    height: 68px;
+    border-color: var(--experience-border);
+}
+.workspace-content .default-table tr:hover td {
+    background: color-mix(in srgb, var(--experience-soft) 50%, var(--experience-surface));
+}
+.workspace-content .mat-mdc-card {
+    box-shadow: none;
+    border: 1px solid var(--experience-border);
+    border-radius: 10px;
+}
+.workspace-content .mat-mdc-tab-header {
+    border-bottom: 1px solid var(--experience-border);
+}
+.workspace-content .mat-mdc-tab-body-content {
+    padding-top: 4px;
+}
+.workspace-content .mat-mdc-paginator {
+    background: transparent;
+}
+.workspace-content .mat-mdc-outlined-button,
+.workspace-content .mat-mdc-unelevated-button {
+    border-radius: 7px;
+}
+.workspace-content .mat-mdc-form-field {
+    font-size: 13px;
+}
+.workspace-content .mdc-notched-outline {
+    --mdc-outlined-text-field-container-shape: 7px;
+}
+.workspace-content .mat-mdc-dialog-surface {
+    border-radius: 12px;
+}
+.table-action {
+    font-size: 12px;
+    color: var(--experience-accent);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    white-space: nowrap;
+}
+button.workspace-mobile-menu {
+    display: none;
+}
+.screen-reader-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+@media (max-width: 1000px) {
+    .section-width {
+        width: calc(100% - 48px);
+    }
+    .workspace-content {
+        padding: 24px;
+    }
+    .workspace-topbar {
+        padding-inline: 24px;
+    }
+    .journey-links {
+        gap: 10px;
+    }
+    .journey-link {
+        padding: 16px;
+        gap: 10px;
+    }
+}
+@media (max-width: 720px) {
+    .section-width {
+        width: calc(100% - 36px);
+    }
+    .workspace-topbar {
+        padding: 0 16px;
+        min-height: 60px;
+        gap: 10px;
+    }
+    .workspace-mobile-menu {
+        display: inline-flex;
+    }
+    .context-client {
+        max-width: 110px;
+    }
+    .context-meta > a {
+        display: none;
+    }
+    .context-meta {
+        gap: 8px;
+    }
+    .workspace-content {
+        padding: 20px 16px;
+    }
+    .page-heading {
+        align-items: start;
+        margin-bottom: 22px;
+    }
+    .page-heading h1,
+    .page-heading h2 {
+        font-size: 26px;
+    }
+    .page-heading > a {
+        font-size: 11px;
+    }
+    .journey-links {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+    .journey-link {
+        padding: 16px;
+    }
+    .content-page {
+        padding-block: 48px 60px;
+    }
+    .workspace-content .default-table td {
+        height: auto;
+        min-height: 42px;
+    }
+    .experience-notice a {
+        margin-left: 0;
+    }
+}
+
+.workspace-content .default-table .actions {
+    opacity: 1;
+    visibility: visible;
+}
+@media (max-width: 480px) {
+    .workspace-content proxy-lib-search {
+        max-width: 100%;
+    }
+}
+
+.environment-label {
+    white-space: nowrap;
+}
+@media (max-width: 720px) {
+    .environment-prefix {
+        display: none;
+    }
+    .context-area {
+        white-space: nowrap;
+    }
+}
diff --git a/apps/36-blocks/src/environments/environment.review.ts b/apps/36-blocks/src/environments/environment.review.ts
new file mode 100644
index 00000000..4a4530b0
--- /dev/null
+++ b/apps/36-blocks/src/environments/environment.review.ts
@@ -0,0 +1,10 @@
+/** Compile-time replacement for the isolated review build. Contains no live configuration. */
+export const environment = {
+    production: false,
+    env: 'local',
+    baseUrl: '/review-api',
+    proxyServer: '',
+    googleClientId: '',
+    interfaceScriptUrl: '',
+    firebaseConfig: {},
+} as unknown as typeof import('./environment').environment;
diff --git a/apps/36-blocks/src/index.html b/apps/36-blocks/src/index.html
index a9ca052e..27dbd648 100644
--- a/apps/36-blocks/src/index.html
+++ b/apps/36-blocks/src/index.html
@@ -5,7 +5,7 @@
         <title>36Blocks — Secure Auth &amp; User Management for Modern Apps</title>
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#3f51b5" />
+        <meta name="theme-color" content="#315b2b" />
         <meta name="robots" content="index, follow" />
         <meta name="author" content="36Blocks" />
         <link rel="canonical" href="https://36blocks.com/" />
@@ -17,32 +17,6 @@
             type="image/svg+xml"
             fetchpriority="high"
         />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
-            rel="stylesheet"
-            media="print"
-            onload="this.media = 'all'"
-        />
-        <noscript>
-            <link
-                href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
-                rel="stylesheet"
-            />
-        </noscript>
-        <link
-            href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined&display=swap"
-            rel="stylesheet"
-            media="print"
-            onload="this.media = 'all'"
-        />
-        <noscript>
-            <link
-                href="https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined&display=swap"
-                rel="stylesheet"
-            />
-        </noscript>
     </head>
     <body>
         <div id="app-splash-screen">
diff --git a/apps/36-blocks/src/main.review.ts b/apps/36-blocks/src/main.review.ts
new file mode 100644
index 00000000..7f26e4bd
--- /dev/null
+++ b/apps/36-blocks/src/main.review.ts
@@ -0,0 +1,136 @@
+import { MarkdownModule } from 'ngx-markdown';
+/** Local review entry only. Never imported by main.ts or a release configuration. */
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Component, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, RouterOutlet, withInMemoryScrolling } from '@angular/router';
+import {
+    HttpBackend,
+    HttpErrorResponse,
+    HttpEvent,
+    HttpRequest,
+    HttpResponse,
+    provideHttpClient,
+} from '@angular/common/http';
+import { provideStore, provideState } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { Observable, of, throwError, delay } from 'rxjs';
+import { ProxyBaseUrls } from '@proxy/models/root-models';
+import { appRoutes } from './app/app.routes';
+import { reducers } from './app/core/ngrx/store/app.state';
+import { loginsReducer } from './app/website/home/ngrx/store/login.state';
+import { registrationReducer } from './app/website/home/ngrx/reducers/registration.reducer';
+import { RootEffects } from './app/core/ngrx/effects/root';
+import { CanActivateRouteGuard } from './app/website/home/authguard';
+import { LoggedInGuard } from './app/website/home/authguard/logged-in.guard';
+import { GoogleOneTapService } from './app/website/login/google-one-tap.service';
+import { page, reviewData } from './review/fixtures';
+
+class ReviewBackend implements HttpBackend {
+    handle(request: HttpRequest<unknown>): Observable<HttpEvent<unknown>> {
+        const state = new URLSearchParams(location.search).get('reviewState');
+        const path = new URL(request.url, location.origin).pathname.replace('/review-api/', '');
+        const fail = (status: number) =>
+            throwError(
+                () => new HttpErrorResponse({ status, error: { errors: { message: 'Synthetic review response' } } })
+            );
+        if (request.method !== 'GET') return fail(403);
+        if (state === 'denied') return fail(403);
+        if (state === 'error') return fail(503);
+        let data = reviewData(path, request.params);
+        if (data === undefined) return fail(404);
+        if (state === 'empty' && data?.data && Array.isArray(data.data)) data = page([]);
+        return of(new HttpResponse({ status: 200, body: { hasError: false, errors: [], data } })).pipe(
+            delay(state === 'loading' ? 15000 : 100)
+        );
+    }
+}
+@Component({
+    selector: 'proxy-root',
+    imports: [RouterOutlet],
+    template: `<div class="review-banner">
+            LOCAL REVIEW · Synthetic data · No live API calls or credential issuance <a href="/">Website</a
+            ><a href="/app/dashboard">Workspace</a><a href="/app/users?reviewState=denied">Denied state</a
+            ><a href="/app/users?reviewState=error">Error state</a
+            ><a href="/app/users?reviewState=empty">Empty state</a>
+        </div>
+        <router-outlet />`,
+    styles: [
+        `
+            .review-banner {
+                min-height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 16px;
+                padding: 6px 10px;
+                background: #253a22;
+                color: #fff;
+                font: 10px system-ui;
+                flex-wrap: wrap;
+            }
+            .review-banner a {
+                color: #e7f0de;
+                text-decoration: underline;
+            }
+            :host {
+                display: block;
+            }
+            :host ::ng-deep .workspace-shell,
+            :host ::ng-deep proxy-layout {
+                height: calc(100dvh - 32px);
+            }
+            @media (max-width: 720px) {
+                .review-banner {
+                    font-size: 9px;
+                    gap: 8px;
+                }
+                .review-banner a:nth-last-child(-n + 3) {
+                    display: none;
+                }
+            }
+        `,
+    ],
+})
+class ReviewRoot {}
+document.getElementById('app-splash-screen')?.remove();
+bootstrapApplication(ReviewRoot, {
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideAnimations(),
+        provideRouter(
+            appRoutes,
+            withInMemoryScrolling({ scrollPositionRestoration: 'top', anchorScrolling: 'enabled' })
+        ),
+        provideStore(reducers),
+        provideState('auth', loginsReducer),
+        provideState('registration', registrationReducer),
+        provideEffects([RootEffects]),
+        importProvidersFrom(MarkdownModule.forRoot()),
+        provideHttpClient(),
+        { provide: HttpBackend, useClass: ReviewBackend },
+        { provide: ProxyBaseUrls.BaseURL, useValue: '/review-api' },
+        { provide: ProxyBaseUrls.ProxyLogsUrl, useValue: '/review-api' },
+        { provide: ProxyBaseUrls.IToken, useValue: { token: null, companyId: null } },
+        { provide: ProxyBaseUrls.FirebaseConfig, useValue: {} },
+        { provide: AngularFireAuth, useValue: { authState: of(null) } },
+        { provide: CanActivateRouteGuard, useValue: { canActivate: () => true } },
+        { provide: LoggedInGuard, useValue: { canActivate: () => true } },
+        {
+            provide: GoogleOneTapService,
+            useValue: {
+                loadScript: () => Promise.resolve(),
+                isAvailable: () => false,
+                prompt: () => {},
+                initialize: () => {},
+                renderButton: () => {},
+                cancel: () => {},
+            },
+        },
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
+    ],
+}).catch(() => {
+    document.body.textContent = 'The local review could not start. Check the build output.';
+});
diff --git a/apps/36-blocks/src/review/fixtures.ts b/apps/36-blocks/src/review/fixtures.ts
new file mode 100644
index 00000000..777d9a2d
--- /dev/null
+++ b/apps/36-blocks/src/review/fixtures.ts
@@ -0,0 +1,212 @@
+import { HttpParams } from '@angular/common/http';
+export const page = (data: any[]) => ({
+    data,
+    itemsPerPage: 25,
+    pageNo: 1,
+    pageNumber: 1,
+    totalEntityCount: data.length,
+    totalPageCount: data.length ? 1 : 0,
+});
+const client = { id: 1, name: 'Acme workspace', url_unique_id: 'review', email: 'team@example.test' };
+const blocks = [
+    {
+        id: 11,
+        name: 'People portal',
+        reference_id: 'people-portal',
+        feature_id: 1,
+        created_at: '2026-10-20T08:00:00Z',
+        updated_at: '2026-10-29T10:00:00Z',
+        feature: { name: 'Authentication' },
+        services: [{ name: 'Email & password' }],
+    },
+    {
+        id: 12,
+        name: 'Support desk',
+        reference_id: 'support-desk',
+        feature_id: 1,
+        created_at: '2026-10-22T08:00:00Z',
+        updated_at: '2026-10-29T12:00:00Z',
+        feature: { name: 'Authentication' },
+        services: [{ name: 'Google' }],
+    },
+];
+const people = ['Alex Lee', 'Morgan Chen', 'Sam Rivera', 'Jamie Patel', 'Taylor Kim'].map((name, i) => ({
+    id: 25 + i,
+    name,
+    email: name.toLowerCase().replace(' ', '.') + '@example.test',
+    mobile: null,
+    is_block: false,
+    feature_configuration: blocks[i % 2],
+    created_at: `2026-10-${22 + i}T08:30:00Z`,
+    last_login_at: i === 3 ? null : '2026-10-30T05:20:00Z',
+}));
+const operations = [
+    {
+        id: 301,
+        session_id: 1,
+        operation: 'login_as',
+        user: { user_id: 2, name: 'Review Admin', email: 'admin@example.test' },
+        created_at: '2026-10-30T05:30:00Z',
+        audit_context: {
+            actor_user_id: 2,
+            target_user_id: 25,
+            target_company_id: 10,
+            feature_configuration_id: 11,
+            reason: 'Reproduce the reported sign-in issue. TEST-123',
+            outcome: 'succeeded',
+        },
+    },
+    {
+        id: 300,
+        session_id: 1,
+        operation: 'login_as',
+        user: { user_id: 2, name: 'Review Admin', email: 'admin@example.test' },
+        created_at: '2026-10-30T05:10:00Z',
+        audit_context: {
+            actor_user_id: 2,
+            target_user_id: 26,
+            target_company_id: 10,
+            feature_configuration_id: 12,
+            reason: 'Investigate company membership. TEST-122',
+            outcome: 'denied',
+            failure_code: 'membership_denied',
+        },
+    },
+    {
+        id: 299,
+        session_id: 1,
+        operation: 'view_c_users',
+        user: { user_id: 2, name: 'Review Admin', email: 'admin@example.test' },
+        created_at: '2026-10-30T05:00:00Z',
+        audit_context: null,
+    },
+];
+export function reviewData(path: string, params: HttpParams): any {
+    if (path === 'getClientSettings') return { client, role: { id: 3, role_name: 'Admin' } };
+    if (path === 'clients') return page([client]);
+    if (path === 'features')
+        return page(
+            blocks.filter(
+                (b) => !params.get('search') || b.name.toLowerCase().includes(params.get('search')!.toLowerCase())
+            )
+        );
+    if (path === 'getFeatures') return [{ id: 1, name: 'Authentication', description: 'Application sign-in' }];
+    if (path === 'featureWebhookEvents') return [];
+    if (path === 'getMethodsService/1')
+        return [
+            {
+                id: 1,
+                name: 'Authentication',
+                service_use: 'authentication',
+                icon: 'login',
+                authorization_format: { format: {}, encode_type: 'json', key: '' },
+                method_services: [
+                    {
+                        name: 'Email & password',
+                        method_id: 1,
+                        service_id: 1,
+                        is_enable: true,
+                        requirements: {},
+                        configurations: { fields: {}, mappings: [] },
+                    },
+                ],
+            },
+        ];
+    const detail = blocks.find((block) => path === `features/${block.id}`);
+    if (detail)
+        return {
+            ...detail,
+            method_id: 1,
+            method: { id: 1, name: 'Authentication' },
+            session_time: 3600,
+            callback_url: '',
+            redirect_url: '',
+            block_registration: false,
+            extra_configurations: {},
+            origins: [],
+            service_configurations: [],
+            authorization_format: { format: {}, encode_type: 'json', key: '' },
+        };
+    if (/^features\/\d+\/(allowedOrigins|clientSecrets|oauthConfigs|blockScopes)$/.test(path)) return [];
+    if (path === 'clientUsers')
+        return page(
+            people.filter(
+                (p) =>
+                    (!params.get('search') ||
+                        p.name.toLowerCase().includes(params.get('search')!.toLowerCase()) ||
+                        p.email === params.get('search')) &&
+                    (!params.get('feature_id') || p.feature_configuration.reference_id === params.get('feature_id')) &&
+                    (!params.get('company_name') || params.get('company_name') === 'Acme')
+            )
+        );
+    if (path === 'operations')
+        return page(
+            operations.filter(
+                (o) =>
+                    (!params.get('target_user_id') ||
+                        o.audit_context?.target_user_id === Number(params.get('target_user_id'))) &&
+                    (!params.get('outcome') || o.audit_context?.outcome === params.get('outcome'))
+            )
+        );
+    if (path === 'analytics/overview')
+        return {
+            data: {
+                users: {
+                    client_total: 128,
+                    feature_configuration_total: params.get('feature_configuration_id') ? 0 : null,
+                },
+                signups: { total: 12 },
+                logins: { total: 86 },
+                active_users: { unique: 42 },
+            },
+        };
+    if (path === 'analytics/timeseries')
+        return { data: [3, 7, 5, 10, 8, 14, 12].map((value, i) => ({ period: `Oct ${24 + i}`, value })) };
+    if (path === 'analytics/breakdown')
+        return {
+            data: [
+                { key: 'Email & password', count: 62 },
+                { key: 'Google', count: 24 },
+            ],
+        };
+    if (path === 'projects') return page([{ id: 1, name: 'People portal' }]);
+    if (path === 'environments')
+        return page([
+            { id: 1, name: 'Development' },
+            { id: 2, name: 'Production' },
+        ]);
+    if (path === 'proxyLogs')
+        return page([
+            {
+                id: 401,
+                created_at: '2026-10-30T05:45:00Z',
+                project_name: 'People portal',
+                environment_name: 'Development',
+                user_ip: '192.0.2.15',
+                endpoint: '/api/profile',
+                request_type: 'GET',
+                status_code: 401,
+                response_time: 48,
+            },
+            {
+                id: 400,
+                created_at: '2026-10-30T05:44:00Z',
+                project_name: 'People portal',
+                environment_name: 'Development',
+                user_ip: '192.0.2.15',
+                endpoint: '/api/profile',
+                request_type: 'GET',
+                status_code: 200,
+                response_time: 32,
+            },
+        ]);
+    if (path.startsWith('proxyLogs/'))
+        return {
+            id: 401,
+            request_body: {},
+            headers: { 'content-type': 'application/json' },
+            response: { message: 'Session expired. Sign in again.', code: 'session_expired' },
+        };
+    if (path.endsWith('/cRoles') || path.endsWith('/cPermission')) return page([]);
+    return undefined;
+}
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 8052c8e2..02e7e9a5 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -14,6 +14,7 @@
 @use 'assets/scss/component/utility-classes';
 @use 'assets/scss/component/website-animations';
 @use '../../shared/scss/global';
+@use 'assets/scss/component/experience';
 
 /* Website layout dimensions */
 :root {
@@ -46,11 +47,9 @@ body {
     font-size: 0.875rem;
 
     &.website-active {
-        background-color: #0d1117;
-        background-image:
-            radial-gradient(ellipse 80% 50% at 50% -20%, rgba(45, 212, 191, 0.15), transparent),
-            radial-gradient(ellipse 60% 40% at 100% 100%, rgba(45, 212, 191, 0.08), transparent);
-        color: #c9d1d9;
+        background-color: var(--experience-page);
+        background-image: none;
+        color: var(--experience-ink);
     }
 }
 .text-color {
diff --git a/apps/36-blocks/tsconfig.review.json b/apps/36-blocks/tsconfig.review.json
new file mode 100644
index 00000000..d4d5df26
--- /dev/null
+++ b/apps/36-blocks/tsconfig.review.json
@@ -0,0 +1 @@
+{ "extends": "./tsconfig.app.json", "files": ["src/main.review.ts"], "include": ["src/**/*.d.ts"] }
diff --git a/libs/ui/copy-button/src/lib/copy-button.component.ts b/libs/ui/copy-button/src/lib/copy-button.component.ts
index 860c596b..29a9ef30 100644
--- a/libs/ui/copy-button/src/lib/copy-button.component.ts
+++ b/libs/ui/copy-button/src/lib/copy-button.component.ts
@@ -17,10 +17,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
             color="primary"
             [class]="btnClass()"
             [cdkCopyToClipboard]="copyData()"
-            onclick="this.blur()"
             (click)="onCopy()"
             [class.pointer-events-none]="copied | async"
             [matTooltip]="tooltip()"
+            [attr.aria-label]="tooltip() || 'Copy value'"
         >
             <mat-icon
                 [class]="'material-icons-outlined mat-icon-18 ' + iconClass()"
diff --git a/libs/ui/search/src/lib/search/search.component.html b/libs/ui/search/src/lib/search/search.component.html
index 2257c62b..8de589e4 100644
--- a/libs/ui/search/src/lib/search/search.component.html
+++ b/libs/ui/search/src/lib/search/search.component.html
@@ -4,6 +4,7 @@
             [attr.type]="type()"
             matInput
             [placeholder]="placeholder()"
+            [attr.aria-label]="placeholder() || 'Search'"
             autocomplete="off"
             [matTooltip]="toolTipString()"
             #tooltip="matTooltip"
@@ -17,6 +18,7 @@
             [attr.type]="type()"
             matInput
             [placeholder]="placeholder()"
+            [attr.aria-label]="placeholder() || 'Search'"
             autocomplete="off"
             [matTooltip]="toolTipString()"
             #tooltip="matTooltip"
@@ -30,7 +32,14 @@
     }
     <mat-icon matPrefix>search</mat-icon>
     @if (searchFormControl.value?.length && !hideCloseIcon()) {
-        <button (click)="clearSearch()" class="icon-btn-md mr-1" matIconButton matSuffix>
+        <button
+            type="button"
+            aria-label="Clear search"
+            (click)="clearSearch()"
+            class="icon-btn-md mr-1"
+            matIconButton
+            matSuffix
+        >
             <mat-icon>close</mat-icon>
         </button>
     }
diff --git a/package.json b/package.json
index 16217761..f77281b0 100755
--- a/package.json
+++ b/package.json
@@ -48,7 +48,9 @@
         "update-public-suffix": "node ./libs/ui/handle-domain/src/lib/updater.js",
         "format:code": "npx prettier --write --ignore-unknown .",
         "prepare": "husky install",
-        "test:v0": "node --test tools/tests/*.test.cjs"
+        "test:v0": "node --test tools/tests/*.test.cjs",
+        "review:build": "NX_DAEMON=false NX_ISOLATE_PLUGINS=false nx build 36-blocks --configuration=review && node tools/review/version.cjs",
+        "review:serve": "node tools/review/serve.cjs dist/review/browser 4360"
     },
     "private": true,
     "dependencies": {
diff --git a/tools/review/browser-qa.cjs b/tools/review/browser-qa.cjs
new file mode 100644
index 00000000..85a5c9cc
--- /dev/null
+++ b/tools/review/browser-qa.cjs
@@ -0,0 +1,287 @@
+// Local-only browser QA. Uses a caller-selected Playwright installation; no dependency changes.
+const { chromium } = require(process.env.PLAYWRIGHT_MODULE || 'playwright-core');
+const fs = require('node:fs');
+const path = require('node:path');
+const assert = require('node:assert/strict');
+const output = path.resolve(process.argv[2] || '/tmp/36blocks-browser-review');
+fs.mkdirSync(output, { recursive: true });
+const report = {
+    data: 'synthetic',
+    liveAuthentication: 'not exercised',
+    consoleErrors: [],
+    routes: [],
+    interactions: [],
+    failures: [],
+};
+(async () => {
+    const browser = await chromium.launch({
+        executablePath: process.env.CHROMIUM_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        headless: true,
+    });
+    const views = [
+        { name: 'desktop', width: 1440, height: 1000 },
+        { name: 'mobile', width: 390, height: 844 },
+    ];
+    const matched = [
+        ['home', '/'],
+        ['overview', '/app/dashboard'],
+        ['people', '/app/users'],
+        ['activity', '/app/activity'],
+        ['requests', '/app/logs'],
+    ];
+    for (const version of ['before', 'after']) {
+        const base = `http://127.0.0.1:${version === 'before' ? 4361 : 4360}`;
+        for (const view of views) {
+            const context = await browser.newContext({
+                viewport: { width: view.width, height: view.height },
+                reducedMotion: 'reduce',
+            });
+            await context.route('**/*', (route) =>
+                new URL(route.request().url()).hostname === '127.0.0.1' ? route.continue() : route.abort()
+            );
+            const page = await context.newPage();
+            for (const [name, route] of matched) {
+                const errors = [];
+                const onError = (error) => errors.push(error.message);
+                page.on('pageerror', onError);
+                await page.goto(base + route);
+                await page.waitForTimeout(600);
+                await page.evaluate(() => document.fonts.ready);
+                const state = await page.evaluate(() => ({
+                    title: document.title,
+                    width: innerWidth,
+                    documentWidth: document.documentElement.scrollWidth,
+                    headings: [...document.querySelectorAll('h1')].map((h) => h.textContent.trim()),
+                    text: document.body.innerText.slice(0, 200),
+                }));
+                await page.screenshot({
+                    path: path.join(output, `${name}-${view.name}-${version}.png`),
+                    fullPage: true,
+                });
+                report.routes.push({ version, viewport: view.name, route, ...state, errors });
+                page.off('pageerror', onError);
+            }
+            await context.close();
+        }
+    }
+    const context = await browser.newContext({ viewport: { width: 1440, height: 1000 }, reducedMotion: 'reduce' });
+    await context.route('**/*', (route) =>
+        new URL(route.request().url()).hostname === '127.0.0.1' ? route.continue() : route.abort()
+    );
+    const page = await context.newPage();
+    page.setDefaultTimeout(6000);
+    page.on('console', (message) => {
+        if (message.type() === 'error')
+            report.consoleErrors.push({ url: page.url(), message: message.text().slice(0, 1200) });
+    });
+    const check = async (name, work) => {
+        try {
+            await work();
+            report.interactions.push({ name, passed: true });
+        } catch (error) {
+            report.failures.push({ name, error: error.message });
+        }
+    };
+    const base = 'http://127.0.0.1:4360';
+    await check('website product illustration tabs', async () => {
+        await page.goto(base);
+        await page.getByRole('button', { name: 'People', exact: true }).click();
+        await page.getByRole('heading', { name: 'Put a person in context.' }).waitFor();
+        await page.getByRole('button', { name: 'Activity', exact: true }).click();
+        await page.getByRole('heading', { name: 'Understand the action.' }).waitFor();
+    });
+    await check('people search to target-filtered activity without session submission', async () => {
+        await page.goto(base + '/app/users');
+        await page.getByRole('textbox', { name: 'Search name or email', exact: true }).fill('Alex');
+        await page.getByRole('link', { name: 'View activity for Alex Lee' }).waitFor();
+        await page.waitForFunction(() => document.querySelectorAll('tr[mat-row]').length === 1);
+        assert.equal(await page.locator('tr[mat-row]').count(), 1);
+        await page.getByRole('link', { name: 'View activity for Alex Lee' }).click();
+        await page.waitForURL('**/app/activity?target_user_id=25');
+        assert.equal(await page.locator('input[name="target"]').inputValue(), '25');
+        await page.locator('summary').filter({ hasText: 'Login as' }).click();
+        assert.equal(await page.locator('input[name="loginTarget"]').inputValue(), '25');
+        assert.equal(await page.locator('input[name="confirmed"]').isChecked(), false);
+        assert.equal(await page.getByRole('button', { name: 'Create impersonated session' }).isDisabled(), true);
+        await page.screenshot({
+            path: path.join(output, 'activity-target-and-confirmation-desktop.png'),
+            fullPage: true,
+        });
+    });
+    await check('scoped zero remains zero in overview', async () => {
+        await page.goto(base + '/app/dashboard');
+        await page.getByRole('combobox', { name: 'Filter usage by authentication block' }).click();
+        await page.getByRole('option', { name: 'People portal', exact: true }).click();
+        await page.waitForTimeout(300);
+        assert.equal((await page.locator('.metric-card').first().innerText()).includes('\n0\n'), true);
+        assert.match(await page.locator('p[role="status"]').innerText(), /People portal/);
+    });
+    await check('request detail opens and closes with literal sanitized response', async () => {
+        await page.goto(base + '/app/logs');
+        await page.waitForTimeout(350);
+        const row = page.locator('tr[mat-row]').first();
+        await row.click();
+        await page.getByRole('dialog').waitFor();
+        await page
+            .getByRole('dialog')
+            .getByText(/session_expired/)
+            .waitFor();
+        assert.match(await page.getByRole('dialog').innerText(), /session_expired|Session expired/);
+        await page.getByRole('button', { name: /Close/i }).last().click();
+        await page.getByRole('dialog').waitFor({ state: 'hidden' });
+    });
+    for (const state of ['denied', 'error', 'empty'])
+        await check(`people ${state} state`, async () => {
+            await page.goto(base + '/app/users?reviewState=' + state);
+            await page.waitForTimeout(350);
+            const text = await page.locator('body').innerText();
+            if (state === 'empty') assert.match(text, /No people match/);
+            else {
+                assert.match(text, state === 'denied' ? /permission to view users/ : /could not be loaded/);
+                assert.equal(text.includes('No people match'), false);
+            }
+            await page.screenshot({ path: path.join(output, `people-${state}-desktop.png`), fullPage: true });
+        });
+    await check('error retry recovers without a page reload', async () => {
+        await page.goto(base + '/app/users?reviewState=error');
+        await page.getByRole('alert').waitFor();
+        await page.evaluate(() => history.replaceState({}, '', '/app/users'));
+        await page.getByRole('button', { name: 'Retry', exact: true }).click();
+        await page.waitForFunction(() => document.querySelectorAll('tr[mat-row]').length === 5);
+        assert.equal(await page.getByRole('alert').count(), 0);
+    });
+    await check('company and block filter menu applies both values', async () => {
+        await page.goto(base + '/app/users');
+        await page.getByRole('button', { name: 'Filter', exact: true }).click();
+        await page.getByRole('textbox', { name: 'Company Name', exact: true }).fill('Acme');
+        await page.getByRole('combobox', { name: 'Block', exact: true }).click();
+        await page.getByRole('option', { name: 'People portal', exact: true }).click();
+        await page.getByRole('button', { name: 'Apply', exact: true }).click();
+        await page.waitForFunction(() => document.querySelectorAll('tr[mat-row]').length === 3);
+    });
+    await check('Login as requires reason and confirmation and handles a denied operation', async () => {
+        await page.goto(base + '/app/activity?target_user_id=25');
+        await page.locator('summary').filter({ hasText: 'Login as' }).click();
+        await page.getByRole('textbox', { name: 'Reason', exact: true }).fill('Synthetic local support investigation');
+        assert.equal(await page.getByRole('button', { name: 'Create impersonated session' }).isDisabled(), true);
+        await page.locator('input[name="confirmed"]').check();
+        await page.getByRole('button', { name: 'Create impersonated session' }).click();
+        await page.getByRole('alert').filter({ hasText: 'requires an Owner' }).waitFor();
+        assert.equal(await page.locator('input[name="confirmed"]').isChecked(), false);
+        await page.screenshot({ path: path.join(output, 'login-as-denied-desktop.png'), fullPage: true });
+    });
+    await check('expanded analytics dialog opens and closes', async () => {
+        await page.goto(base + '/app/dashboard');
+        await page.getByRole('button', { name: 'Expand Signups', exact: true }).click();
+        await page.getByRole('dialog').waitFor();
+        await page.getByRole('button', { name: 'Close expanded chart', exact: true }).click();
+        await page.getByRole('dialog').waitFor({ state: 'hidden' });
+    });
+    await check('login field validation and password visibility', async () => {
+        await page.goto(base + '/login');
+        await page.locator('#login-email').fill('invalid-email');
+        await page.getByRole('button', { name: 'Log in to your account', exact: true }).click();
+        await page.waitForFunction(
+            () => document.getElementById('login-email')?.getAttribute('aria-invalid') === 'true'
+        );
+        assert.equal(await page.locator('#login-email').getAttribute('aria-invalid'), 'true');
+        await page.locator('#login-password').fill('synthetic-review-only');
+        await page.getByRole('button', { name: 'Show password', exact: true }).click();
+        await page.waitForFunction(() => document.getElementById('login-password')?.getAttribute('type') === 'text');
+        assert.equal(await page.locator('#login-password').getAttribute('type'), 'text');
+        await page.getByRole('button', { name: 'Hide password', exact: true }).click();
+        await page.waitForFunction(
+            () => document.getElementById('login-password')?.getAttribute('type') === 'password'
+        );
+        assert.equal(await page.locator('#login-password').getAttribute('type'), 'password');
+    });
+    const audit = [
+        '/about',
+        '/security',
+        '/pricing',
+        '/privacy',
+        '/terms',
+        '/contact',
+        '/login',
+        '/register',
+        '/docs',
+        '/app/features/create',
+        '/app/features/manage/11',
+        '/app/billing',
+        '/app/chatbot',
+    ];
+    for (const route of audit) {
+        const errors = [];
+        const handle = (error) => errors.push(error.message);
+        page.on('pageerror', handle);
+        await page.goto(base + route);
+        await page.waitForTimeout(450);
+        report.routes.push({
+            version: 'after',
+            viewport: 'desktop',
+            route,
+            errors,
+            ...(await page.evaluate(() => ({
+                documentWidth: document.documentElement.scrollWidth,
+                width: innerWidth,
+                headings: [...document.querySelectorAll('h1')].map((h) => h.textContent.trim()),
+                text: document.body.innerText.slice(0, 500),
+            }))),
+        });
+        page.off('pageerror', handle);
+    }
+    await check('mobile website and workspace navigation', async () => {
+        await page.setViewportSize({ width: 390, height: 844 });
+        await page.goto(base);
+        await page.getByRole('button', { name: 'Open navigation', exact: true }).click();
+        await page.locator('#mobile-navigation').getByRole('link', { name: 'Our approach', exact: true }).click();
+        await page.waitForURL('**/about');
+        await page.goto(base + '/app/dashboard');
+        await page.getByRole('button', { name: 'Open navigation', exact: true }).click();
+        await page.getByRole('link', { name: 'People', exact: true }).click();
+        await page.waitForURL('**/app/users');
+        assert.equal(await page.locator('.sidebar-scrim').count(), 0);
+    });
+    await check('mobile profile details reveal secondary fields', async () => {
+        await page.goto(base + '/app/users');
+        const details = page.locator('.mobile-profile-details').first();
+        await details.locator('summary').click();
+        assert.match(await details.innerText(), /User ID/);
+        assert.match(await details.innerText(), /25/);
+        await page.screenshot({ path: path.join(output, 'people-mobile-profile-details.png'), fullPage: true });
+    });
+    await check('mobile activity prioritizes records and reveals advanced filters', async () => {
+        await page.goto(base + '/app/activity');
+        const filters = page.locator('.activity-filter-panel');
+        assert.equal(await filters.getAttribute('open'), null);
+        await filters.locator('summary').click();
+        assert.equal(await page.locator('input[name="target"]').isVisible(), true);
+    });
+    await browser.close();
+    report.finishedAt = new Date().toISOString();
+    fs.writeFileSync(path.join(output, 'browser-report.json'), JSON.stringify(report, null, 2));
+    console.log(
+        JSON.stringify(
+            {
+                screenshots: fs.readdirSync(output).filter((f) => f.endsWith('.png')).length,
+                interactions: report.interactions.length,
+                failures: report.failures,
+                consoleErrors: report.consoleErrors,
+                routeErrors: report.routes.filter((r) => r.errors.length),
+                documentOverflow: report.routes
+                    .filter((r) => r.documentWidth > r.width + 1)
+                    .map((r) => ({
+                        version: r.version,
+                        viewport: r.viewport,
+                        route: r.route,
+                        overflow: r.documentWidth - r.width,
+                    })),
+            },
+            null,
+            2
+        )
+    );
+})().catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+});
diff --git a/tools/review/serve.cjs b/tools/review/serve.cjs
new file mode 100644
index 00000000..fe003028
--- /dev/null
+++ b/tools/review/serve.cjs
@@ -0,0 +1,42 @@
+// Loopback-only SPA server for an isolated review; never forwards an API request.
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const root = path.resolve(process.argv[2] || 'dist/review/browser');
+const port = Number(process.argv[3] || 4360);
+const mime = {
+    '.html': 'text/html',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.woff2': 'font/woff2',
+    '.ico': 'image/x-icon',
+    '.json': 'application/json',
+};
+http.createServer((req, res) => {
+    const pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+    if (pathname.startsWith('/review-api')) {
+        res.writeHead(403);
+        return res.end('No live API in local review');
+    }
+    let file = path.resolve(root, '.' + pathname);
+    if (!file.startsWith(root + path.sep) && file !== root) {
+        res.writeHead(403);
+        return res.end();
+    }
+    if (!fs.existsSync(file) || fs.statSync(file).isDirectory()) {
+        if (path.extname(pathname)) {
+            res.writeHead(404);
+            return res.end('Asset not found');
+        }
+        file = path.join(root, 'index.html');
+    }
+    res.writeHead(200, {
+        'Content-Type': mime[path.extname(file)] || 'application/octet-stream',
+        'Cache-Control': 'no-store',
+        'Content-Security-Policy':
+            "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'",
+    });
+    fs.createReadStream(file).pipe(res);
+}).listen(port, '127.0.0.1', () => process.stdout.write(`Local review: http://127.0.0.1:${port}\n`));
diff --git a/tools/review/version.cjs b/tools/review/version.cjs
new file mode 100644
index 00000000..4b3abf08
--- /dev/null
+++ b/tools/review/version.cjs
@@ -0,0 +1,27 @@
+const { createHash } = require('node:crypto');
+const { execFileSync } = require('node:child_process');
+const { readFileSync, writeFileSync } = require('node:fs');
+const files = execFileSync('git', ['ls-files', '--cached', '--others', '--exclude-standard', '-z'], {
+    encoding: 'utf8',
+})
+    .split('\0')
+    .filter(Boolean)
+    .sort();
+const digest = createHash('sha256');
+for (const file of files) {
+    try {
+        digest.update(file);
+        digest.update(readFileSync(file));
+    } catch {}
+}
+const sourceHash = digest.digest('hex').slice(0, 12);
+const version = {
+    version: '0.0.3',
+    build: 'experience-refresh-' + sourceHash,
+    baseCommit: execFileSync('git', ['rev-parse', 'HEAD'], { encoding: 'utf8' }).trim(),
+    sourceHash,
+    data: 'synthetic',
+    liveApi: false,
+};
+writeFileSync('dist/review/browser/review-version.json', JSON.stringify(version, null, 2) + '\n');
+process.stdout.write(JSON.stringify(version) + '\n');
diff --git a/tools/tests/activity.test.cjs b/tools/tests/activity.test.cjs
index 8c0e87af..c9ee749e 100644
--- a/tools/tests/activity.test.cjs
+++ b/tools/tests/activity.test.cjs
@@ -35,7 +35,8 @@ function load(relative, dependencies = {}) {
 const modelPath = 'apps/36-blocks/src/app/panel/activity/activity.models.ts';
 const models = load(modelPath);
 const componentPath = 'apps/36-blocks/src/app/panel/activity/activity.component.ts';
-function createComponent(service) {
+function createComponent(service, target = null) {
+    class ActivatedRoute {}
     const signal = (initial) => {
         let value = initial;
         const get = () => value;
@@ -48,9 +49,11 @@ function createComponent(service) {
         '@angular/core': {
             Component: () => (target) => target,
             ChangeDetectionStrategy: {},
-            inject: () => service,
+            inject: (token) =>
+                token === ActivatedRoute ? { snapshot: { queryParamMap: { get: () => target } } } : service,
             signal,
         },
+        '@angular/router': { ActivatedRoute },
         './activity.models': models,
         './activity.service': { ActivityService: class {} },
     });
@@ -220,3 +223,35 @@ test('editing the impersonation target clears the previous credential link and c
     assert.equal(component.loginMessage(), null);
     assert.equal(component.loginConfirmed, false);
 });
+
+test('a user investigation link prefills a valid target without creating a session', () => {
+    let params;
+    const component = createComponent(
+        {
+            getOperations: (value) => {
+                params = value;
+                return of(empty);
+            },
+            loginAs: () => {
+                throw new Error('Must not submit from navigation');
+            },
+        },
+        '25'
+    );
+    component.ngOnInit();
+    assert.equal(params.target_user_id, '25');
+    assert.equal(component.loginTarget, '25');
+    assert.equal(component.loginConfirmed, false);
+    const malformed = createComponent(
+        {
+            getOperations: (value) => {
+                params = value;
+                return of(empty);
+            },
+        },
+        '25<script>'
+    );
+    malformed.ngOnInit();
+    assert.equal(params.target_user_id, undefined);
+    assert.equal(malformed.loginTarget, '');
+});
diff --git a/tools/tests/overview.test.cjs b/tools/tests/overview.test.cjs
new file mode 100644
index 00000000..4fbeb23d
--- /dev/null
+++ b/tools/tests/overview.test.cjs
@@ -0,0 +1,101 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { test } = require('node:test');
+const vm = require('node:vm');
+const ts = require('typescript');
+const { Subject, of, throwError } = require('rxjs');
+const source = readFileSync('apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts', 'utf8');
+function component(service) {
+    const signal = (value) =>
+        Object.assign(() => value, {
+            set: (next) => {
+                value = next;
+            },
+        });
+    const module = { exports: {} };
+    vm.runInNewContext(
+        ts.transpileModule(source, {
+            compilerOptions: {
+                target: ts.ScriptTarget.ES2022,
+                module: ts.ModuleKind.CommonJS,
+                experimentalDecorators: true,
+            },
+        }).outputText,
+        {
+            exports: module.exports,
+            module,
+            require: (name) => {
+                if (name === 'rxjs') return require('rxjs');
+                if (name === '@angular/core')
+                    return {
+                        Component: () => (type) => type,
+                        ChangeDetectionStrategy: {},
+                        inject: () => service,
+                        signal,
+                        computed: (fn) => fn,
+                        effect: () => {},
+                    };
+                if (name === '@angular/forms') return { FormControl: class {} };
+                if (name === '@proxy/ui/base-component')
+                    return {
+                        BaseComponent: class {
+                            destroy$ = new Subject();
+                        },
+                    };
+                if (name === './dashboard.models')
+                    return { DateRange: { week: 'week' }, OVERVIEW_CARDS: [], RANGE_OPTIONS: [] };
+                return {};
+            },
+        }
+    );
+    return new module.exports.DashboardComponent();
+}
+test('zero scoped usage stays zero; missing scoped usage does not become a client total', () => {
+    const c = component({});
+    c.featureConfigurationId.set(11);
+    assert.equal(
+        c.getCardValue(
+            { users: { feature_configuration_total: 0, client_total: 128 } },
+            'users.feature_configuration_total',
+            'users.client_total'
+        ),
+        0
+    );
+    assert.equal(
+        c.getCardValue({ users: { client_total: 128 } }, 'users.feature_configuration_total', 'users.client_total'),
+        null
+    );
+    c.featureConfigurationId.set('');
+    assert.equal(
+        c.getCardValue({ users: { client_total: 128 } }, 'users.feature_configuration_total', 'users.client_total'),
+        128
+    );
+    for (const value of [undefined, null, NaN, Infinity, '12'])
+        assert.equal(c.getCardValue({ count: value }, 'count'), null);
+});
+test('failed or malformed overview responses stay unavailable and retry can recover', () => {
+    let response = throwError(() => ({ errorCode: 403 }));
+    const c = component({ getOverview: () => response });
+    c.fetchOverview({ range: 'week' });
+    assert.match(c.overviewError(), /access/);
+    assert.equal(c.overviewData(), null);
+    assert.equal(c.isLoadingOverview(), false);
+    response = of({ hasError: false, data: null });
+    c.fetchOverview({ range: 'week' });
+    assert.match(c.overviewError(), /unavailable/);
+    response = of({ hasError: false, data: { data: { logins: { total: 0 } } } });
+    c.fetchOverview({ range: 'week' });
+    assert.equal(c.overviewError(), null);
+    assert.equal(c.getCardValue(c.overviewData(), 'logins.total'), 0);
+});
+test('a changed scope cancels the old request before it can overwrite new data', () => {
+    const old = new Subject();
+    let response = old;
+    const c = component({ getOverview: () => response });
+    c.fetchOverview({ range: 'week' });
+    response = of({ data: { data: { logins: { total: 7 } } } });
+    c.fetchOverview({ range: 'day' });
+    old.next({ data: { data: { logins: { total: 900 } } } });
+    assert.equal(c.overviewData().logins.total, 7);
+    assert.equal(old.observed, false);
+});
diff --git a/tools/tests/panel-investigation.test.cjs b/tools/tests/panel-investigation.test.cjs
index 56b291a0..94e63cfb 100644
--- a/tools/tests/panel-investigation.test.cjs
+++ b/tools/tests/panel-investigation.test.cjs
@@ -245,3 +245,58 @@ test('production panel keeps authentication without restoring project gating', (
     assert.equal(panel.children.find((route) => route.path === '').redirectTo, 'dashboard');
     assert.equal(typeof panel.children.find((route) => route.path === 'activity').loadComponent, 'function');
 });
+
+const { UserComponentStore } = loadClass('apps/36-blocks/src/app/panel/users/user/user.store.ts', {
+    '@angular/core': angular,
+    '@ngrx/component-store': { ComponentStore: StateHost },
+    '@ngrx/operators': { tapResponse: (next, error) => tap({ next, error }) },
+    '@proxy/models/root-models': { errorResolver: () => ['Request failed'] },
+});
+test('people directory keeps denied/error/malformed responses separate from a successful empty result', () => {
+    let response = throwError(() => ({ errorCode: 403 }));
+    const store = new UserComponentStore({ getUsers: () => response }, {}, { error() {} });
+    store.getUsers({});
+    assert.match(store.state$.value.usersError, /permission/);
+    assert.equal(store.state$.value.users, null);
+    response = of({ hasError: false, data: null });
+    store.getUsers({});
+    assert.match(store.state$.value.usersError, /could not be loaded/);
+    response = of({ hasError: false, data: { data: [] } });
+    store.getUsers({});
+    assert.equal(store.state$.value.usersError, null);
+    assert.equal(store.state$.value.users.data.length, 0);
+    assert.equal(store.state$.value.isLoading, false);
+});
+test('people directory cancels stale filters and clears old records during a new request', () => {
+    const stale = new Subject();
+    let response = stale;
+    const store = new UserComponentStore({ getUsers: () => response }, {}, { error() {} });
+    store.patchState({ users: { data: [{ id: 1 }] } });
+    store.getUsers({ search: 'Alex' });
+    assert.equal(store.state$.value.users, null);
+    response = of({ data: { data: [{ id: 2 }] } });
+    store.getUsers({ search: 'Morgan' });
+    stale.next({ data: { data: [{ id: 1 }] } });
+    assert.equal(store.state$.value.users.data[0].id, 2);
+    assert.equal(stale.observed, false);
+});
+const { FeatureComponentStore } = loadClass('apps/36-blocks/src/app/panel/features/feature/feature.store.ts', {
+    '@angular/core': angular,
+    '@ngrx/component-store': { ComponentStore: StateHost },
+    '@ngrx/operators': { tapResponse: (next, error) => tap({ next, error }) },
+    '@proxy/models/root-models': { errorResolver: () => ['Request failed'] },
+});
+test('application list malformed or denied responses are recoverable without claiming an empty workspace', () => {
+    let response = of({ data: null });
+    const store = new FeatureComponentStore({ getFeature: () => response }, { error() {} });
+    store.getFeature({});
+    assert.match(store.state$.value.error, /could not be loaded/);
+    assert.equal(store.state$.value.hasSomeFeatures, null);
+    response = throwError(() => ({ status: 403 }));
+    store.getFeature({});
+    assert.match(store.state$.value.error, /permission/);
+    response = of({ data: { data: [], totalEntityCount: 0 } });
+    store.getFeature({});
+    assert.equal(store.state$.value.error, null);
+    assert.equal(store.state$.value.hasSomeFeatures, false);
+});