diff --git a/.github/workflows/v0-behavior.yml b/.github/workflows/v0-behavior.yml
new file mode 100644
index 00000000..2d9cd2ff
--- /dev/null
+++ b/.github/workflows/v0-behavior.yml
@@ -0,0 +1,25 @@
+name: V0 behavior checks
+on:
+  pull_request:
+  workflow_dispatch:
+permissions:
+  contents: read
+jobs:
+  behavior:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+          cache: npm
+      - name: Install locked dependencies without lifecycle hooks
+        run: npm ci --ignore-scripts --legacy-peer-deps --no-audit --no-fund
+      - name: Run focused behavior and HTTP routing tests
+        run: npm run test:v0
+      - name: Generate local environment modules without credentials
+        env:
+          CI: 'false'
+        run: node tools/set-env
+      - name: Check application types and templates
+        run: node_modules/.bin/ngc --noEmit -p apps/36-blocks/tsconfig.app.json
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..40a4c164
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,13 @@
+# Working on proxy-ui
+
+Owns the Angular public website, operator dashboard and embeddable authentication widget. Backend APIs, persistence and session policy belong to sibling `user-proxy`; connected applications own business authorization.
+
+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.
+- PR disclosure requirement: when a change introduces or changes required environment variables/secrets, removes a configuration fallback, changes authentication/security behavior, requires migrations or deployment ordering, invalidates sessions/tokens, or otherwise affects rollout/backward compatibility, explicitly notify the user when raising or updating the PR. Add a prominent `Deployment impact` section to the PR description naming the affected service/environment, exact configuration names (never secret values), behavior if prerequisites are missing, required setup/migration/restart order, compatibility/session effects, and what was or was not verified. Repeat critical prerequisites in the user-facing PR handoff; a note only in repository documentation or the PR body is insufficient. This is a notification requirement, not an additional approval gate.
+- 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.
+- Keep error, denied, empty and loading states distinct; provide retry. Never render request data as HTML or log/store tokens. Client visibility does not replace server authorization.
+- Update the single backend-owned capability matrix and work state alongside changes. Product/architecture guidance is linked, not duplicated here. Public claims require evidence; do not invent SLAs, guarantees or future functional controls.
diff --git a/DESIGNGUIDE.md b/DESIGNGUIDE.md
index f9a3dde3..811df2d1 100644
--- a/DESIGNGUIDE.md
+++ b/DESIGNGUIDE.md
@@ -1,20 +1,8 @@
 # Proxy UI Design Guide
 
-##   Setup Guide
+## Setup
 
-1. Clone https://github.com/Walkover-Web-Solution/proxy-UI.git.
-
-2. This project requires Node version 14+, install Node from [here](https://nodejs.org/en/).
-
-3. Go inside the cloned directory `proxy-UI` in any terminal and run these following commands in the terminal to install dependency and start local serve.
-
-4. Run `npm i` for installation of dependencies.
-
-5. Serving the project locally: 
-    * For proxy: Run `npm start` to local serve the project.
-    * For Admin Panel: Run `npm run start:admin` to local serve the project.
-    * For chat-widget: Run `npm run start:chat-widget` to local serve the project.
-    * For otp-provider: Run `npm run start:otp-provider` to local serve the project.
+Use the current [README](README.md) and canonical [development guide](../user-proxy/docs/DEVELOPMENT.md) for runtime, install and startup commands. Legacy admin/chat/OTP application commands formerly listed here no longer describe the supplied workspace. The following styling guidance remains reference material; use the canonical [design standards](../user-proxy/docs/DESIGN.md) for product behavior.
 
 ## Prerequisites
 It is important to have a thorough understanding of **HTML**, **CSS** and its pre-processor **SASS** to contribute to this project. If unaware of any of the above then go through their documention first.
diff --git a/README.md b/README.md
index ccd8dd09..10a73ac0 100755
--- a/README.md
+++ b/README.md
@@ -6,13 +6,23 @@
 
 1. Clone https://github.com/Walkover-Web-Solution/proxy-ui.git.
 
-2. This project requires Node version 14+, install Node from [here](https://nodejs.org/en/).
+2. This is Angular 21.2 / Nx 21.6 / TypeScript 5.9. Use a compatible Node runtime; see the [canonical development guide](../user-proxy/docs/DEVELOPMENT.md). Node 14 is unsupported.
 
 3. Go inside the cloned directory `proxy-ui` in any terminal and run these following commands in the terminal to install dependency and start local serve.
 
-4. Run `npm i` for installation of dependencies.
+4. Run `npm ci --ignore-scripts --legacy-peer-deps` to install the locked dependencies. Review the development guide before enabling install hooks.
 
-5. Run `npm start` to local serve the project.
+5. Configure approved local environment values, run `node tools/set-env`, then `npm start`. The checked-in local API URL points to a remote test service; change it before exercising mutations.
+
+Read [AGENTS.md](AGENTS.md), [current work state](../user-proxy/docs/WORK-STATE.md), [architecture](../user-proxy/docs/ARCHITECTURE.md) and the authoritative [capability matrix](../user-proxy/docs/CAPABILITIES.md). The API is the sibling `user-proxy` repository. `node --test tools/tests/*.test.cjs` runs focused behavior tests; legacy Nx/Jest targets have known gaps recorded in the 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
 
@@ -344,3 +354,9 @@ We have a server [Marlin](marlin.phone91.com) [for Prod] & [sailfish](sailfish.p
 
 If client origin is widget (origin = `chat`) [will implement for all in v2], we have an option to start meet from `client-card-component`.
 For selected client we use `call-session-creds` API to fetch `room` & `jwt` to init socket connection and Jitsi meet room with Jitsi Options. [Jitsi Reference Doc](https://developer.8x8.com/jaas/docs/iframe-api-integration)
+
+## Production integration — 29 October 2026
+
+The V0 changes are reconciled with production commit `2b1deb17`. Production deliberately uses a browser-only build and removed `ProjectGuard`; this merge preserves both decisions and the newer production navigation, OAuth/client-secret features, and compact website spacing. The original feature branch's SSR and project-guard changes/tests are therefore not part of this production integration.
+
+Validation: 23 applicable `npm run test:v0` checks, Angular type/template checking, and `npm run build:prod` passed, including the widget bundle and post-build packaging. Build warnings remain; this does not certify configured Firebase/provider login. Activity and Login as require the companion backend API/migrations from [user-proxy PR #1476](https://github.com/Walkover-Web-Solution/user-proxy/pull/1476) before live use. See the canonical [work state](../user-proxy/docs/WORK-STATE.md) for remaining integration gates.
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/core/ngrx/effects/root/root.effect.ts b/apps/36-blocks/src/app/core/ngrx/effects/root/root.effect.ts
index f75e4a5d..8e86fe2e 100755
--- a/apps/36-blocks/src/app/core/ngrx/effects/root/root.effect.ts
+++ b/apps/36-blocks/src/app/core/ngrx/effects/root/root.effect.ts
@@ -82,7 +82,7 @@ export class RootEffects {
             switchMap((req) => {
                 return this.rootService.getProjects().pipe(
                     map((res) => {
-                        if (res.hasError) {
+                        if (res.hasError || !Array.isArray(res.data?.data)) {
                             this.showError(res.errors);
                             return rootActions.getAllProjectsError();
                         }
diff --git a/apps/36-blocks/src/app/core/ngrx/store/reducer/root.reducer.ts b/apps/36-blocks/src/app/core/ngrx/store/reducer/root.reducer.ts
index 6445d5d8..d8e4b2ae 100755
--- a/apps/36-blocks/src/app/core/ngrx/store/reducer/root.reducer.ts
+++ b/apps/36-blocks/src/app/core/ngrx/store/reducer/root.reducer.ts
@@ -18,6 +18,7 @@ export interface IRootState {
     //All project
     allProjects: IPaginatedResponse<IProjects[]>;
     projectInProcess: boolean;
+    projectLoadFailed: boolean;
 }
 
 export const initialState: IRootState = {
@@ -33,6 +34,7 @@ export const initialState: IRootState = {
     clientsInProcess: false,
     switchClientSuccess: false,
     projectInProcess: false,
+    projectLoadFailed: false,
     allProjects: null,
 };
 
@@ -121,6 +123,7 @@ const _rootReducer = createReducer(
         return {
             ...state,
             projectInProcess: true,
+            projectLoadFailed: false,
         };
     }),
     on(rootActions.getAllProjectSuccess, (state, { response }) => {
@@ -128,6 +131,7 @@ const _rootReducer = createReducer(
             ...state,
             allProjects: response,
             projectInProcess: false,
+            projectLoadFailed: false,
         };
     }),
     on(rootActions.getAllProjectsError, (state) => {
@@ -135,6 +139,7 @@ const _rootReducer = createReducer(
             ...state,
             allProjects: null,
             projectInProcess: false,
+            projectLoadFailed: true,
         };
     })
 );
diff --git a/apps/36-blocks/src/app/core/ngrx/store/selectors/root.selector.ts b/apps/36-blocks/src/app/core/ngrx/store/selectors/root.selector.ts
index c3ccb551..3a3e3efe 100755
--- a/apps/36-blocks/src/app/core/ngrx/store/selectors/root.selector.ts
+++ b/apps/36-blocks/src/app/core/ngrx/store/selectors/root.selector.ts
@@ -32,3 +32,10 @@ export const selectProjectInProcess = createSelector(
     selectRootState,
     (rootState: IRootState) => rootState.projectInProcess
 );
+
+/** One selector keeps project data and its request outcome consistent for guards. */
+export const selectProjectAccessState = createSelector(selectRootState, (state: IRootState) => ({
+    projects: state.allProjects,
+    loading: state.projectInProcess,
+    failed: state.projectLoadFailed,
+}));
diff --git a/apps/36-blocks/src/app/panel/activity/activity.component.html b/apps/36-blocks/src/app/panel/activity/activity.component.html
new file mode 100644
index 00000000..345b93a6
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.html
@@ -0,0 +1,242 @@
+<section class="activity-page" aria-labelledby="activity-title">
+    <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>
+            For client Owners, Admins and Super admins. This creates a session with the target user's access to their
+            application. The action and your reason are recorded in Activity. Use internal numeric IDs from the current
+            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.
+        </p>
+        <form
+            class="activity-filters"
+            #loginForm="ngForm"
+            (ngSubmit)="loginForm.valid && loginAs()"
+            aria-label="Login as an end user"
+        >
+            <mat-form-field
+                ><mat-label>Target user ID</mat-label
+                ><input
+                    matInput
+                    name="loginTarget"
+                    [(ngModel)]="loginTarget"
+                    (ngModelChange)="clearLoginResult()"
+                    [disabled]="loggingIn()"
+                    required
+                    inputmode="numeric"
+                    pattern="[0-9]+"
+            /></mat-form-field>
+            <mat-form-field
+                ><mat-label>Company ID (optional)</mat-label
+                ><input
+                    matInput
+                    name="loginCompany"
+                    [(ngModel)]="loginCompany"
+                    (ngModelChange)="clearLoginResult()"
+                    [disabled]="loggingIn()"
+                    inputmode="numeric"
+                    pattern="[0-9]+"
+            /></mat-form-field>
+            <mat-form-field class="reason-field"
+                ><mat-label>Reason</mat-label
+                ><textarea
+                    matInput
+                    name="loginReason"
+                    [(ngModel)]="loginReason"
+                    (ngModelChange)="clearLoginResult()"
+                    [disabled]="loggingIn()"
+                    required
+                    maxlength="500"
+                    rows="2"
+                    placeholder="Support ticket or investigation purpose; do not include credentials"
+                ></textarea>
+            </mat-form-field>
+            <label class="confirmation"
+                ><input
+                    type="checkbox"
+                    name="confirmed"
+                    [(ngModel)]="loginConfirmed"
+                    [disabled]="loggingIn()"
+                    required
+                />
+                I confirm the target and understand this creates an impersonated session.</label
+            >
+            <button mat-flat-button type="submit" [disabled]="loggingIn() || loginForm.invalid">
+                {{ loggingIn() ? 'Creating session…' : 'Create impersonated session' }}
+            </button>
+        </form>
+        @if (loginError(); as message) {
+            <p role="alert">{{ message }}</p>
+        }
+        @if (loginMessage(); as message) {
+            <p role="status">{{ message }}</p>
+        }
+        @if (loginRedirect(); as redirect) {
+            <a
+                mat-stroked-button
+                [href]="redirect"
+                target="_blank"
+                rel="noopener noreferrer"
+                referrerpolicy="no-referrer"
+                >Open connected application</a
+            >
+        }
+    </details>
+
+    <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>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>
+    } @else if (error(); as message) {
+        <div role="alert">
+            <p>{{ message }}</p>
+            <button mat-stroked-button type="button" (click)="load(page())">Retry</button>
+        </div>
+    } @else if (rows().length === 0) {
+        <p role="status">No activity matches these filters for the current client.</p>
+    } @else {
+        <p role="status">{{ total() }} matching operations · Page {{ page() }} of {{ totalPages() }}</p>
+        <div class="table-scroll" role="region" aria-label="Activity results" tabindex="0">
+            <table>
+                <caption class="visually-hidden">
+                    Operator activity in the current client
+                </caption>
+                <thead>
+                    <tr>
+                        <th scope="col">When</th>
+                        <th scope="col">Actor</th>
+                        <th scope="col">Operation</th>
+                        <th scope="col">Outcome</th>
+                        <th scope="col">Audit details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (row of rows(); track row.id) {
+                        <tr>
+                            <td>
+                                {{ row.created_at | date: 'medium'
+                                }}<small>Operation #{{ row.id }} · Session {{ row.session_id ?? 'unavailable' }}</small>
+                            </td>
+                            <td>
+                                {{ row.user?.name || row.user?.email || 'Unavailable'
+                                }}<small>{{ row.user?.email }}</small
+                                ><small
+                                    >Actor ID:
+                                    {{ row.audit_context?.actor_user_id ?? row.user?.user_id ?? 'unavailable' }}</small
+                                >
+                            </td>
+                            <td>{{ row.operation }}</td>
+                            <td>
+                                {{ row.audit_context?.outcome || 'Not recorded' }}
+                                @if (row.audit_context?.failure_code) {
+                                    <small>{{ row.audit_context.failure_code }}</small>
+                                }
+                            </td>
+                            <td>
+                                @if (row.audit_context; as audit) {
+                                    <dl>
+                                        <dt>Target user</dt>
+                                        <dd>{{ audit.target_user_id ?? 'Not recorded' }}</dd>
+                                        <dt>Company</dt>
+                                        <dd>{{ audit.target_company_id ?? 'Not recorded' }}</dd>
+                                        <dt>Block</dt>
+                                        <dd>{{ audit.feature_configuration_id ?? 'Not recorded' }}</dd>
+                                        <dt>Reason</dt>
+                                        <dd class="reason">{{ audit.reason || 'Not recorded' }}</dd>
+                                        <dt>Source IP</dt>
+                                        <dd>{{ audit.source_ip || 'Not recorded' }}</dd>
+                                    </dl>
+                                } @else {
+                                    <span>No audit details were recorded for this operation.</span>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+        <nav class="pagination" aria-label="Activity pages">
+            <button mat-stroked-button type="button" (click)="load(page() - 1)" [disabled]="page() <= 1">
+                Previous</button
+            ><button mat-stroked-button type="button" (click)="load(page() + 1)" [disabled]="page() >= totalPages()">
+                Next
+            </button>
+        </nav>
+    }
+</section>
diff --git a/apps/36-blocks/src/app/panel/activity/activity.component.scss b/apps/36-blocks/src/app/panel/activity/activity.component.scss
new file mode 100644
index 00000000..b2fa6497
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.scss
@@ -0,0 +1,133 @@
+:host {
+    display: block;
+}
+.activity-page {
+    padding: 0;
+    max-width: 1500px;
+    margin: auto;
+}
+h1 {
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+}
+header p {
+    max-width: 80ch;
+}
+.login-as {
+    padding: 1rem;
+    border: 1px solid var(--mat-sys-outline-variant, #888);
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+}
+summary {
+    cursor: pointer;
+    font-weight: 600;
+}
+.reason-field {
+    grid-column: span 2;
+}
+.confirmation {
+    display: flex;
+    align-items: start;
+    gap: 0.5rem;
+}
+.activity-filters {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 0.75rem;
+    margin: 1.5rem 0;
+}
+.filter-actions,
+.pagination {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.table-scroll {
+    overflow-x: auto;
+    border: 1px solid var(--mat-sys-outline-variant, #888);
+    border-radius: 0.5rem;
+}
+table {
+    border-collapse: collapse;
+    width: 100%;
+    text-align: left;
+}
+th,
+td {
+    padding: 1rem;
+    vertical-align: top;
+    border-bottom: 1px solid var(--mat-sys-outline-variant, #888);
+}
+th {
+    white-space: nowrap;
+}
+small {
+    display: block;
+    margin-top: 0.35rem;
+}
+dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.25rem 0.75rem;
+    min-width: 230px;
+    margin: 0;
+}
+dt {
+    font-weight: 600;
+}
+dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+.reason {
+    white-space: pre-wrap;
+}
+.pagination {
+    margin-top: 1rem;
+}
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+}
+@media (max-width: 600px) {
+    .activity-page {
+        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
new file mode 100644
index 00000000..1b3dabbd
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/activity/activity.component.ts
@@ -0,0 +1,178 @@
+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';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { Subscription } from 'rxjs';
+import {
+    ActivityOperation,
+    activityParams,
+    emptyActivityFilters,
+    isActivityForbidden,
+    safeLoginRedirect,
+} from './activity.models';
+import { ActivityService } from './activity.service';
+
+@Component({
+    selector: 'proxy-activity',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    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;
+    filters = emptyActivityFilters();
+    private appliedFilters = emptyActivityFilters();
+    readonly rows = signal<ActivityOperation[]>([]);
+    readonly loading = signal(false);
+    readonly error = signal<string | null>(null);
+    readonly page = signal(1);
+    readonly totalPages = signal(0);
+    readonly total = signal(0);
+    loginTarget = '';
+    loginCompany = '';
+    loginReason = '';
+    loginConfirmed = false;
+    readonly loggingIn = signal(false);
+    readonly loginError = signal<string | null>(null);
+    readonly loginMessage = signal<string | null>(null);
+    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);
+    }
+
+    ngOnDestroy(): void {
+        this.request?.unsubscribe();
+        this.loginRequest?.unsubscribe();
+    }
+
+    applyFilters(): void {
+        if (this.filters.startDate && this.filters.endDate && this.filters.endDate < this.filters.startDate) {
+            this.error.set('The end date must be on or after the start date.');
+            return;
+        }
+        this.appliedFilters = { ...this.filters };
+        this.load(1);
+    }
+
+    clearFilters(): void {
+        this.filters = emptyActivityFilters();
+        this.appliedFilters = emptyActivityFilters();
+        this.load(1);
+    }
+
+    load(page: number): void {
+        this.request?.unsubscribe();
+        this.loading.set(true);
+        this.error.set(null);
+        this.rows.set([]);
+        this.total.set(0);
+        this.totalPages.set(0);
+        this.page.set(page);
+        this.request = this.service.getOperations(activityParams(this.appliedFilters, page)).subscribe({
+            next: (response) => {
+                this.loading.set(false);
+                if (response.hasError || !response.data || !Array.isArray(response.data.data)) {
+                    this.error.set('Activity could not be loaded. Retry or contact an administrator.');
+                    return;
+                }
+                this.rows.set(response.data.data);
+                this.total.set(response.data.totalEntityCount);
+                this.totalPages.set(response.data.totalPageCount);
+            },
+            error: (error: unknown) => {
+                this.loading.set(false);
+                this.error.set(
+                    isActivityForbidden(error)
+                        ? 'You need the view_operations permission for this client to view activity. Ask a client administrator.'
+                        : 'Activity could not be loaded. Check your connection and retry.'
+                );
+            },
+        });
+    }
+
+    loginAs(): void {
+        if (this.loggingIn()) return;
+        this.loginError.set(null);
+        this.loginMessage.set(null);
+        this.loginRedirect.set(null);
+        const userId = Number(this.loginTarget);
+        const companyId = this.loginCompany.trim() ? Number(this.loginCompany) : undefined;
+        const reason = this.loginReason.trim();
+        if (
+            !Number.isSafeInteger(userId) ||
+            userId < 1 ||
+            (companyId !== undefined && (!Number.isSafeInteger(companyId) || companyId < 1)) ||
+            !reason ||
+            reason.length > 500 ||
+            !this.loginConfirmed
+        ) {
+            this.loginError.set(
+                'Enter a valid user ID, an optional company ID and a reason of 1–500 characters, then confirm the action.'
+            );
+            return;
+        }
+        this.loggingIn.set(true);
+        this.loginRequest = this.service
+            .loginAs({ user_id: userId, ...(companyId === undefined ? {} : { company_id: companyId }), reason })
+            .subscribe({
+                next: (response) => {
+                    this.loggingIn.set(false);
+                    this.loginConfirmed = false;
+                    if (response.hasError || !response.data) {
+                        this.loginError.set(
+                            'Login as could not be completed. Check the target membership and your permissions.'
+                        );
+                    } else {
+                        const redirect = safeLoginRedirect(response.data.redirect_url);
+                        this.loginRedirect.set(redirect);
+                        this.loginMessage.set(
+                            redirect
+                                ? 'An impersonated session was created and audited. Open the connected application to continue.'
+                                : 'An impersonated session was created and audited, but no safe application redirect is configured. Configure an HTTPS redirect on the block before using this journey.'
+                        );
+                    }
+                    this.load(1);
+                },
+                error: (error: unknown) => {
+                    this.loggingIn.set(false);
+                    this.loginConfirmed = false;
+                    this.loginError.set(
+                        isActivityForbidden(error)
+                            ? 'Login as requires an Owner, Admin or Super admin role in the current client and an eligible target membership.'
+                            : 'Login as could not be completed. Check the reason and target, then investigate Activity before retrying.'
+                    );
+                    this.load(1);
+                },
+            });
+    }
+
+    clearLoginResult(): void {
+        this.loginRedirect.set(null);
+        this.loginMessage.set(null);
+        this.loginError.set(null);
+        this.loginConfirmed = false;
+    }
+}
diff --git a/apps/36-blocks/src/app/panel/activity/activity.models.ts b/apps/36-blocks/src/app/panel/activity/activity.models.ts
new file mode 100644
index 00000000..60094d8f
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/activity/activity.models.ts
@@ -0,0 +1,78 @@
+export type AuditOutcome = 'started' | 'succeeded' | 'denied' | 'failed';
+
+export interface AuditContext {
+    actor_user_id?: number;
+    target_user_id?: number;
+    target_company_id?: number;
+    feature_configuration_id?: number;
+    reason?: string;
+    source_ip?: string;
+    outcome?: AuditOutcome;
+    failure_code?: string;
+}
+
+export interface ActivityOperation {
+    id: number;
+    session_id: number | null;
+    operation: string;
+    created_at: string;
+    user?: { user_id: number; name: string; email: string } | null;
+    audit_context?: AuditContext | null;
+}
+
+export interface ActivityFilters {
+    operation: string;
+    name: string;
+    outcome: AuditOutcome | '';
+    target_user_id: string;
+    feature_configuration_id: string;
+    startDate: string;
+    endDate: string;
+}
+
+export function emptyActivityFilters(): ActivityFilters {
+    return {
+        operation: '',
+        name: '',
+        outcome: '',
+        target_user_id: '',
+        feature_configuration_id: '',
+        startDate: '',
+        endDate: '',
+    };
+}
+
+export function activityParams(filters: ActivityFilters, pageNo: number): Record<string, string | number> {
+    const params: Record<string, string | number> = { pageNo, itemsPerPage: 25 };
+    for (const [key, value] of Object.entries(filters)) {
+        if (value.trim()) params[key] = value.trim();
+    }
+    return params;
+}
+
+/** Only explicit web redirects may carry the issued credentials to a connected application. */
+export function safeLoginRedirect(value: unknown): string | null {
+    if (typeof value !== 'string') return null;
+    try {
+        const url = new URL(value);
+        if (url.username || url.password) return null;
+        if (
+            url.protocol === 'https:' ||
+            (url.protocol === 'http:' && ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname))
+        ) {
+            return url.href;
+        }
+    } catch {
+        return null;
+    }
+    return null;
+}
+
+/** The shared interceptor uses errorCode; direct HttpClient failures retain status. */
+export function isActivityForbidden(error: unknown): boolean {
+    return (
+        typeof error === 'object' &&
+        error !== null &&
+        (('status' in error && error.status === 403) || ('errorCode' in error && error.errorCode === 403))
+    );
+}
diff --git a/apps/36-blocks/src/app/panel/activity/activity.service.ts b/apps/36-blocks/src/app/panel/activity/activity.service.ts
new file mode 100644
index 00000000..fb3bd42f
--- /dev/null
+++ b/apps/36-blocks/src/app/panel/activity/activity.service.ts
@@ -0,0 +1,35 @@
+import { Inject, Injectable, inject } from '@angular/core';
+import { BaseResponse, IPaginatedResponse, ProxyBaseUrls } from '@proxy/models/root-models';
+import { createUrl } from '@proxy/service';
+import { HttpWrapperService } from '@proxy/services/httpWrapper';
+import { Observable } from 'rxjs';
+import { ActivityOperation } from './activity.models';
+
+export type ActivityResponse = BaseResponse<IPaginatedResponse<ActivityOperation[]>, void>;
+
+export interface LoginAsRequest {
+    user_id: number;
+    company_id?: number;
+    reason: string;
+}
+
+export interface LoginAsResult {
+    redirect_url?: string;
+    proxy_auth_token?: string;
+    refresh_token?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ActivityService {
+    private readonly http = inject(HttpWrapperService);
+
+    constructor(@Inject(ProxyBaseUrls.BaseURL) private readonly baseUrl: string) {}
+
+    getOperations(params: Record<string, string | number>): Observable<ActivityResponse> {
+        return this.http.get<ActivityResponse>(createUrl(this.baseUrl, 'operations'), params);
+    }
+
+    loginAs(request: LoginAsRequest): Observable<BaseResponse<LoginAsResult, void>> {
+        return this.http.post<BaseResponse<LoginAsResult, void>>(createUrl(this.baseUrl, 'loginAs'), request);
+    }
+}
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 cc1ebe40..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,10 +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' }, //  Temporary hide this page
-        { 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-details-side-dialog/log-details-side-dialog.component.html b/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.html
index 52c8a1a1..4e39050a 100755
--- a/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.html
+++ b/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.html
@@ -4,7 +4,7 @@
 <!-- Top Fixed Header::START -->
 <div class="flex items-center justify-between pe-5">
     <h2 mat-dialog-title class="mat-title mat-subheading-2 mb-0 text-dark">Logs Details</h2>
-    <button matIconButton (click)="onCloseDialog()" role="button">
+    <button matIconButton (click)="onCloseDialog()" aria-label="Close log details">
         <mat-icon>close</mat-icon>
     </button>
 </div>
@@ -13,7 +13,12 @@ <h2 mat-dialog-title class="mat-title mat-subheading-2 mb-0 text-dark">Logs Deta
 <!-- Content::START -->
 @if (data) {
     <mat-dialog-content class="!max-h-[calc(100vh-100px)] overflow-y-auto !py-3">
-        @if (data.logData$ | async; as logdata) {
+        @if (data.error$ | async; as error) {
+            <div role="alert">
+                <p>{{ error }}</p>
+                <button matButton="outlined" (click)="data.retry()">Retry loading details</button>
+            </div>
+        } @else if (data.logData$ | async; as logdata) {
             @if (!data?.logSettings || data?.logSettings?.store_headers) {
                 <ng-container
                     [ngTemplateOutlet]="jsonCard"
@@ -44,7 +49,7 @@ <h2 mat-dialog-title class="mat-title mat-subheading-2 mb-0 text-dark">Logs Deta
     <span class="mb-2 mt-1 mat-body-2 font-medium">{{ title }}</span>
     <mat-card class="outline-card overflow-y-auto w-break">
         <mat-card-content>
-            <pre [innerHtml]="jsonData | json"></pre>
+            <pre>{{ jsonData | json }}</pre>
         </mat-card-content>
     </mat-card>
 </ng-template>
diff --git a/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.ts b/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.ts
index 329a0964..ec55c2bd 100755
--- a/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.ts
+++ b/apps/36-blocks/src/app/panel/logs/log-details-side-dialog/log-details-side-dialog.component.ts
@@ -32,6 +32,8 @@ export class LogsDetailsSideDialogComponent extends BaseComponent implements OnD
     public data = inject<{
         logData$: Observable<ILogDetailRes>;
         isLoading$: Observable<boolean>;
+        error$: Observable<string | null>;
+        retry: () => void;
         logSettings: any;
     }>(MAT_DIALOG_DATA);
 
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 6d98bda2..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>
@@ -195,6 +207,12 @@
         </div>
     </div>
 
+    @if (logsError$ | async; as error) {
+        <div role="alert" class="p-4 mb-4 border rounded">
+            <p>{{ error }}</p>
+            <button matButton="outlined" (click)="getLogs()">Retry loading logs</button>
+        </div>
+    }
     <div class="table-scroll">
         <table
             mat-table
@@ -286,6 +304,10 @@
                 mat-row
                 *matRowDef="let row; columns: displayedColumns; let i = index"
                 (click)="viewLogsDetails(row?._id)"
+                (keydown.enter)="viewLogsDetails(row?._id)"
+                (keydown.space)="$event.preventDefault(); viewLogsDetails(row?._id)"
+                tabindex="0"
+                aria-label="View request log details"
                 class="cursor-pointer"
                 [class.highlight]="(reqLogs$ | async)?.id === row._id"
                 [class.last-child]="i + 1 === pageSizeOptions[0]"
@@ -294,7 +316,9 @@
 
             <tr *matNoDataRow>
                 <td class="mat-cell border-0" [attr.colspan]="displayedColumns.length">
-                    <proxy-no-record-found [title]="'logs'" [showBtn]="false"></proxy-no-record-found>
+                    @if (!(logsError$ | async) && !(isLoading$ | async)) {
+                        <proxy-no-record-found [title]="'logs'" [showBtn]="false"></proxy-no-record-found>
+                    }
                 </td>
             </tr>
         </table>
diff --git a/apps/36-blocks/src/app/panel/logs/log/log.component.ts b/apps/36-blocks/src/app/panel/logs/log/log.component.ts
index cb4c06f0..73698b92 100644
--- a/apps/36-blocks/src/app/panel/logs/log/log.component.ts
+++ b/apps/36-blocks/src/app/panel/logs/log/log.component.ts
@@ -133,6 +133,7 @@ export class LogComponent extends BaseComponent implements OnDestroy, OnInit {
     });
     // Observable
     public isLoading$: Observable<boolean> = this.componentStore.isLoading$;
+    public logsError$ = this.componentStore.logsError$;
     public logs$: Observable<IPaginatedResponse<ILogsRes[]>> = this.componentStore.logsData$;
     public environments$: Observable<IPaginatedResponse<IEnvironments[]>> = this.componentStore.environments$;
     public projects$: Observable<IPaginatedResponse<IProjects[]>> = this.componentStore.projects$;
@@ -252,6 +253,7 @@ export class LogComponent extends BaseComponent implements OnDestroy, OnInit {
             ...this.params,
             ...this.formatDateRange(),
         };
+        this.params.pageNo = 1;
         this.getLogs();
     }
 
@@ -277,6 +279,7 @@ export class LogComponent extends BaseComponent implements OnDestroy, OnInit {
             project_id,
             environment_id,
         });
+        this.params.pageNo = 1;
         this.getLogs();
     }
 
@@ -352,8 +355,8 @@ export class LogComponent extends BaseComponent implements OnDestroy, OnInit {
             this.params = CustomValidators.removeNullKeys({
                 ...this.params,
                 range: formValue.range ? formValue.range : null,
-                from: formValue.from ? formValue.from : null,
-                to: formValue.to ? formValue.to : null,
+                from: formValue.from ?? null,
+                to: formValue.to ?? null,
                 request_type:
                     formValue.requestType?.length && formValue.requestType.length !== this.requestTypes.length
                         ? formValue.requestType.join(',')
@@ -391,6 +394,8 @@ export class LogComponent extends BaseComponent implements OnDestroy, OnInit {
                 data: {
                     logData$: this.reqLogs$,
                     isLoading$: this.componentStore.reqLogsInProcess$,
+                    error$: this.componentStore.reqLogsError$,
+                    retry: () => this.componentStore.getLogsById(id),
                     logSettings: clientSettings?.client?.settings?.logs,
                 },
                 maxHeight: '100vh',
diff --git a/apps/36-blocks/src/app/panel/logs/log/logs.store.ts b/apps/36-blocks/src/app/panel/logs/log/logs.store.ts
index c28a6417..c9128305 100644
--- a/apps/36-blocks/src/app/panel/logs/log/logs.store.ts
+++ b/apps/36-blocks/src/app/panel/logs/log/logs.store.ts
@@ -10,12 +10,14 @@ import { EMPTY, Observable, catchError, switchMap } from 'rxjs';
 export interface ILogsInitialState {
     logs: IPaginatedResponse<ILogsRes[]>;
     logsInProcess: boolean;
+    logsError: string | null;
     environments: IPaginatedResponse<IEnvironments[]>;
     environmentsInProcess: boolean;
     projects: IPaginatedResponse<IProjects[]>;
     projectsInProcess: boolean;
     reqLogs: ILogDetailRes;
     reqLogsInProcess: boolean;
+    reqLogsError: string | null;
 }
 
 @Injectable()
@@ -27,12 +29,14 @@ export class LogsComponentStore extends ComponentStore<ILogsInitialState> {
         super({
             logs: null,
             logsInProcess: false,
+            logsError: null,
             environments: null,
             environmentsInProcess: false,
             projects: null,
             projectsInProcess: false,
             reqLogs: null,
             reqLogsInProcess: false,
+            reqLogsError: null,
         });
     }
 
@@ -41,27 +45,33 @@ export class LogsComponentStore extends ComponentStore<ILogsInitialState> {
         (state) => state.environments
     );
     readonly projects$: Observable<IPaginatedResponse<IProjects[]>> = this.select((state) => state.projects);
-    readonly reqLogs$: Observable<any> = this.select((state) => state.reqLogs);
+    readonly logsError$ = this.select((state) => state.logsError);
+    readonly reqLogsError$ = this.select((state) => state.reqLogsError);
+    readonly reqLogs$: Observable<ILogDetailRes> = this.select((state) => state.reqLogs);
     readonly isLoading$: Observable<boolean> = this.select(
         (state) => state.logsInProcess || state.environmentsInProcess || state.projectsInProcess
     );
     readonly reqLogsInProcess$: Observable<boolean> = this.select((state) => state.reqLogsInProcess);
 
-    readonly resetReqLog = this.updater((state) => ({ ...state, reqLogs: null }));
+    readonly resetReqLog = this.updater((state) => ({ ...state, reqLogs: null, reqLogsError: null }));
 
     readonly getLogs = this.effect((data: Observable<ILogsReq>) => {
         return data.pipe(
             switchMap((req: ILogsReq) => {
-                this.patchState({ logsInProcess: true });
+                this.patchState({ logsInProcess: true, logsError: null, logs: null });
                 return this.service.getProxyLogs(req).pipe(
                     tapResponse(
                         (res: BaseResponse<IPaginatedResponse<ILogsRes[]>, ILogsReq>) => {
-                            if (res.hasError) {
+                            const failed = !res || res.hasError || !Array.isArray(res.data?.data);
+                            if (res?.hasError) {
                                 this.showErrorMessages(res.errors);
                             }
                             return this.patchState({
                                 logsInProcess: false,
-                                logs: res?.data,
+                                logs: failed ? null : res.data,
+                                logsError: failed
+                                    ? 'Logs could not be loaded. Retry or check the logging service.'
+                                    : null,
                             });
                         },
                         (error: any) => {
@@ -69,6 +79,7 @@ export class LogsComponentStore extends ComponentStore<ILogsInitialState> {
                             return this.patchState({
                                 logsInProcess: false,
                                 logs: null,
+                                logsError: 'Logs could not be loaded. Retry or check the logging service.',
                             });
                         }
                     ),
@@ -81,21 +92,30 @@ export class LogsComponentStore extends ComponentStore<ILogsInitialState> {
     readonly getLogsById = this.effect((data: Observable<any>) => {
         return data.pipe(
             switchMap((req: any) => {
-                this.patchState({ reqLogsInProcess: true, reqLogs: null });
+                this.patchState({ reqLogsInProcess: true, reqLogs: null, reqLogsError: null });
                 return this.service.getProxyLogsById(req).pipe(
                     tapResponse(
                         (res: BaseResponse<ILogDetailRes, void>) => {
-                            if (res.hasError) {
+                            const failed =
+                                !res ||
+                                res.hasError ||
+                                !res.data ||
+                                typeof res.data !== 'object' ||
+                                Array.isArray(res.data);
+                            if (res?.hasError) {
                                 this.showErrorMessages(res.errors);
                             }
                             return this.patchState({
                                 reqLogsInProcess: false,
-                                reqLogs: {
-                                    ...res.data,
-                                    request_body: this.parseJson(res?.data?.request_body),
-                                    headers: this.parseJson(res?.data?.headers),
-                                    response: this.parseJson(res?.data?.response),
-                                },
+                                reqLogsError: failed ? 'Log details could not be loaded. Retry this request.' : null,
+                                reqLogs: failed
+                                    ? null
+                                    : {
+                                          ...res.data,
+                                          request_body: this.parseJson(res?.data?.request_body),
+                                          headers: this.parseJson(res?.data?.headers),
+                                          response: this.parseJson(res?.data?.response),
+                                      },
                             });
                         },
                         (error: any) => {
@@ -103,6 +123,7 @@ export class LogsComponentStore extends ComponentStore<ILogsInitialState> {
                             return this.patchState({
                                 reqLogsInProcess: false,
                                 reqLogs: null,
+                                reqLogsError: 'Log details could not be loaded. Retry this request.',
                             });
                         }
                     ),
diff --git a/apps/36-blocks/src/app/panel/panel.routes.ts b/apps/36-blocks/src/app/panel/panel.routes.ts
index c737474a..cfba2279 100644
--- a/apps/36-blocks/src/app/panel/panel.routes.ts
+++ b/apps/36-blocks/src/app/panel/panel.routes.ts
@@ -11,6 +11,10 @@ export const panelRoutes: Route[] = [
                 path: 'logs',
                 loadChildren: () => import('./logs/logs.routes').then((r) => r.logsRoutes),
             },
+            {
+                path: 'activity',
+                loadComponent: () => import('./activity/activity.component').then((c) => c.ActivityComponent),
+            },
             {
                 path: 'dashboard',
                 loadComponent: () => import('./dashboard/dashboard.component').then((c) => c.DashboardComponent),
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 dd3b1c90..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,117 +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">Trusted by SaaS teams.</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 deserves a production-ready, secure auth stack they can drop in within minutes — not months.
-        </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">Ship auth in 5 minutes. Free forever on the Starter plan.</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 bcba9425..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,90 +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. Trusted by SaaS teams. 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: 'Every API, SDK, and dashboard feature is designed to reduce friction for engineering teams.',
-            iconPath: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
-        },
-        {
-            title: 'Security by Default',
-            description:
-                'Encryption, rate limiting, hCaptcha, and audit logs are on out of the box — not optional extras.',
-            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:
-                'No hidden fees, no surprise invoices. Pay only for what you use with predictable, public rates.',
-            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: 'No Lock-in',
-            description: 'Standard OAuth flows, portable data exports, and straightforward APIs. Switch away any time.',
-            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: 'A single script tag and a reference ID. Most teams are live in under 5 minutes.',
-            iconPath: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
-        },
-        {
-            title: 'Built to Scale',
-            description: 'Handles millions of MAU without configuration changes. Auto-scales with your growth.',
-            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: '5 min', label: 'Avg. integration time' },
-        { value: '99.9%', label: 'Uptime SLA' },
-        { value: '30+', label: 'Languages supported' },
-        { value: '$0', label: 'To get started' },
-    ];
-
-    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 & activity logs',
-        'Customisable branding & themes',
-        'Multi-organisation support',
-        'Secure session management',
-        'Developer-friendly APIs & SDKs',
-    ];
 }
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
new file mode 100644
index 00000000..01d5b919
--- /dev/null
+++ b/apps/36-blocks/src/app/website/docs/docs.component.html
@@ -0,0 +1,11 @@
+<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>
+    <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
new file mode 100644
index 00000000..362f61cb
--- /dev/null
+++ b/apps/36-blocks/src/app/website/docs/docs.component.ts
@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'proxy-docs',
+    imports: [RouterModule],
+    templateUrl: './docs.component.html',
+})
+export class DocsComponent implements OnInit {
+    private readonly title = inject(Title);
+    private readonly meta = inject(Meta);
+
+    public ngOnInit(): void {
+        this.title.setTitle('Developer documentation — 36blocks');
+        this.meta.updateTag({
+            name: 'description',
+            content: 'Open the canonical 36blocks developer documentation for setup, integration and API guidance.',
+        });
+        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/docs/widget-example.ts b/apps/36-blocks/src/app/website/docs/widget-example.ts
new file mode 100644
index 00000000..13ca3908
--- /dev/null
+++ b/apps/36-blocks/src/app/website/docs/widget-example.ts
@@ -0,0 +1,22 @@
+/** Authorization mode mounts at the configured reference ID. */
+export const WIDGET_EXAMPLE = `<div id="YOUR_REFERENCE_ID"></div>
+<p id="auth-status" role="status"></p>
+<script>
+  const configuration = {
+    referenceId: 'YOUR_REFERENCE_ID',
+    type: 'authorization',
+    theme: 'system',
+    success: function (result) {
+      // Hand off privately to your application's session flow.
+      // Verify the result on your server before granting access.
+      document.getElementById('auth-status').textContent =
+        'Authentication completed. Continue in your application.';
+    },
+    failure: function () {
+      document.getElementById('auth-status').textContent =
+        'Authentication failed. Please try again.';
+    }
+  };
+</script>
+<script src="WIDGET_ORIGIN/assets/proxy-auth/proxy-auth.js"
+        onload="window.initVerification(configuration)"></script>`;
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 cdd5f6f0..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,419 +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"
-        >
-            Launch secure user signup, login, roles, and access control in minutes — without building complex
-            authentication systems from scratch.
-        </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"
-                (click)="login()"
-                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="5-minute 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">@for (line of codeSnippetLines; track line.num) {<span class="text-[#484f58] mr-5 select-none">{{ line.num }}</span><span [innerHTML]="line.html"></span>
-}@empty {}</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>
-                    5 min 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 706f67a7..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,479 +1,29 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, PLATFORM_ID, inject } from '@angular/core';
-import { WidgetTheme } from '@proxy/constant';
-import { WidgetThemeService } from 'apps/36-blocks-widget/src/app/otp/service/widget-theme.service';
-import { DomSanitizer, Meta, SafeHtml, 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);
-    private sanitizer = inject(DomSanitizer);
-    // 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: 'translate', title: 'i18n Ready', desc: '30+ languages' },
-    ];
-
-    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: 'Audit logs and user activity monitoring.' },
-        { icon: 'schedule', title: 'Secure Sessions', desc: 'Token-based authentication with session expiry.' },
-        { icon: 'menu_book', title: 'Developer Documentation', desc: 'Clear APIs, SDKs, and step-by-step guides.' },
-    ];
-
-    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: 'Enterprise Tools', desc: 'Manage teams, roles, and permissions at scale.' },
-        {
-            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: '5 min', label: 'Integration time' },
-        { value: '99.9%', label: 'Uptime SLA' },
-    ];
-
-    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: 'Enterprise-grade' },
-    ];
-
-    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: 'Replace months of custom authentication development with production-ready components built for security, scale, and speed.',
-            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 codeSnippetLines: { num: string; html: SafeHtml }[] = this.buildCodeLines([
-        {
-            num: '01',
-            html: `  <span class="token tag">&lt;script</span> <span class="token attr-name">type</span>=<span class="token string">"text/javascript"</span><span class="token tag">&gt;</span>`,
-        },
-        {
-            num: '02',
-            html: `    <span class="token keyword">var</span> <span class="token variable">configuration</span> <span class="token operator">=</span> <span class="token punctuation">&#123;</span>`,
-        },
-        {
-            num: '03',
-            html: `      <span class="token property">referenceId:</span> <span class="token string">'4512365a176770...'</span>,`,
-        },
-        {
-            num: '04',
-            html: `      <span class="token property">type:</span> <span class="token string">'authorization'</span>,`,
-        },
-        {
-            num: '05',
-            html: `      <span class="token property">success:</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">&#123;</span>`,
-        },
-        { num: '06', html: `        <span class="token comment">// get verified token in response</span>` },
-        {
-            num: '07',
-            html: `        <span class="token object">console</span>.<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'success response'</span>, data<span class="token punctuation">)</span>;`,
-        },
-        { num: '08', html: `      <span class="token punctuation">&#125;</span>,` },
-        {
-            num: '09',
-            html: `      <span class="token property">failure:</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">&#123;</span>`,
-        },
-        { num: '10', html: `        <span class="token comment">// handle error</span>` },
-        {
-            num: '11',
-            html: `        <span class="token object">console</span>.<span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'failure reason'</span>, error<span class="token punctuation">)</span>;`,
-        },
-        { num: '12', html: `      <span class="token punctuation">&#125;</span>,` },
-        { num: '13', html: `    <span class="token punctuation">&#125;</span>;` },
-        { num: '14', html: `  <span class="token tag">&lt;/script&gt;</span>` },
-        { num: '15', html: `  <span class="token tag">&lt;script</span>` },
-        {
-            num: '16',
-            html: `    <span class="token attr-name">type</span>=<span class="token string">"text/javascript"</span>`,
-        },
-        {
-            num: '17',
-            html: `    <span class="token attr-name">onload</span>=<span class="token string">"initVerification(configuration)"</span>`,
-        },
-        {
-            num: '18',
-            html: `    <span class="token attr-name">src</span>=<span class="token string">"https://36blocks.com/..."</span><span class="token tag">&gt;</span>`,
-        },
-        { num: '19', html: `  <span class="token tag">&lt;/script&gt;</span>` },
-    ]);
-
-    private buildCodeLines(lines: { num: string; html: string }[]): { num: string; html: SafeHtml }[] {
-        return lines.map((l) => ({ num: l.num, html: this.sanitizer.bypassSecurityTrustHtml(l.html) }));
-    }
-
-    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:
-                    'Launch secure user signup, login, roles, and access control in minutes with 36Blocks. Plug & play authentication with social login, OTP, RBAC, and analytics.',
-            },
-            {
-                name: 'keywords',
-                content:
-                    'authentication platform, SSO, 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:
-                    'Launch secure user signup, login, roles, and access control in minutes. 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. 5-minute setup.',
-            },
-            { 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:
-                    'Secure authentication and user management platform with social login, OTP, RBAC, and analytics.',
-                potentialAction: {
-                    '@type': 'SearchAction',
-                    target: {
-                        '@type': 'EntryPoint',
-                        urlTemplate: 'https://36blocks.com/?q={search_term_string}',
-                    },
-                    'query-input': 'required name=search_term_string',
-                },
-            },
-            {
-                '@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 in 5 minutes.',
-                offers: {
-                    '@type': 'Offer',
-                    price: '0',
-                    priceCurrency: 'USD',
-                    availability: 'https://schema.org/InStock',
-                },
-                featureList: [
-                    'Social Login (Google, Apple)',
-                    'OTP Authentication',
-                    'Role-Based Access Control (RBAC)',
-                    'hCaptcha Bot Protection',
-                    'User Analytics Dashboard',
-                    'Customizable Auth Forms',
-                    'Multi-language Support (30+ languages)',
-                    'Secure Sessions with Token Expiry',
-                    'Activity Tracking & Audit 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/layout/website-layout.component.ts b/apps/36-blocks/src/app/website/layout/website-layout.component.ts
index 39951844..2ab5f995 100644
--- a/apps/36-blocks/src/app/website/layout/website-layout.component.ts
+++ b/apps/36-blocks/src/app/website/layout/website-layout.component.ts
@@ -22,13 +22,14 @@ export class WebsiteLayoutComponent implements OnInit, OnDestroy {
 
     public readonly headerNavLinks: { label: string; ariaLabel: string; route: string }[] = [
         { label: 'Home', ariaLabel: '36Blocks home', route: '/' },
+        { label: 'Docs', ariaLabel: '36Blocks integration guide', route: '/docs' },
         { label: 'Pricing', ariaLabel: '36Blocks Pricing plans', route: '/pricing' },
         { label: 'Contact', ariaLabel: 'Contact 36Blocks', route: '/contact' },
     ];
 
     public readonly footerLinks: { label: string; ariaLabel: string; route?: string; href?: string }[] = [
         { label: 'About Us', ariaLabel: '36Blocks About us', route: '/about' },
-        { label: 'Documentation', ariaLabel: '36Blocks Documentation', href: 'https://36blocks.com/help' },
+        { label: 'Documentation', ariaLabel: '36Blocks Documentation', route: '/docs' },
         { label: 'Security', ariaLabel: '36Blocks Security information', route: '/security' },
         { label: 'Privacy', ariaLabel: '36Blocks Privacy policy', route: '/privacy' },
         { label: 'Terms', ariaLabel: '36Blocks Terms of service', route: '/terms' },
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 388bab65..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,15 +1,15 @@
-<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]"
         >
-            Simple pricing.<br class="hidden sm:block" />
-            <span class="text-teal-400">No enterprise drama.</span>
+            Plan your integration.<br class="hidden sm:block" />
+            <span class="text-[#3c6533]">Confirm your service terms.</span>
         </h1>
-        <p class="text-lg text-[#8b949e] max-w-xl mx-auto leading-relaxed">
-            Built for SaaS founders who want authentication done — without complexity.
+        <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>
@@ -96,18 +96,18 @@ <h2 id="plans-heading" class="sr-only">Pricing plans</h2>
 
                     <!-- CTA -->
                     <div class="px-7 pb-7">
-                        <button
-                            routerLink="/register"
-                            class="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"
+                        <a
+                            routerLink="/contact"
+                            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'"
                         >
                             {{ plan.cta }}
-                        </button>
+                        </a>
                     </div>
                 </article>
             }
@@ -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">
-                Everything you need to ship auth fast and scale confidently.
+            <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/pricing/pricing.component.ts b/apps/36-blocks/src/app/website/pricing/pricing.component.ts
index 1cb8bd34..9e089a14 100644
--- a/apps/36-blocks/src/app/website/pricing/pricing.component.ts
+++ b/apps/36-blocks/src/app/website/pricing/pricing.component.ts
@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
 
 export interface PricingFeature {
     text: string;
@@ -37,7 +37,7 @@ export interface TrustItem {
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-pricing',
-    imports: [CommonModule, RouterModule, MatIconModule],
+    imports: [CommonModule, MatIconModule, RouterModule],
     templateUrl: './pricing.component.html',
 })
 export class PricingComponent implements OnInit {
@@ -48,112 +48,57 @@ export class PricingComponent implements OnInit {
         this.titleService.setTitle('Pricing — 36Blocks');
         this.metaService.updateTag({
             name: 'description',
-            content:
-                'Simple, transparent pricing for 36Blocks. Start free with 1,000 MAU. Upgrade as you grow. No hidden fees, no contracts.',
+            content: 'Confirm current 36Blocks pricing, usage limits, and service terms with the team.',
         });
         this.metaService.updateTag({ name: 'robots', content: 'index, follow' });
         this.metaService.updateTag({ property: 'og:title', content: 'Pricing — 36Blocks' });
         this.metaService.updateTag({
             property: 'og:description',
-            content: 'Start free. Scale with confidence. Transparent usage-based pricing.',
+            content: 'Contact the team for current pricing and service terms.',
         });
         this.metaService.updateTag({ property: 'og:type', content: 'website' });
     }
 
     public readonly plans: PricingPlan[] = [
         {
-            name: 'Starter',
-            price: '$0',
-            period: '/ month',
-            description: 'Everything you need to get started with authentication.',
-            highlight: false,
-            features: [
-                { text: '1,000 Monthly Active Users', included: true },
-                { text: '3 Blocks', included: true },
-                { text: '7-day logs', included: true },
-                { text: '3-hour sessions', included: true },
-                { text: 'Email authentication', included: true },
-                { text: 'SMS (Not available)', included: false },
-                { text: '36Blocks branding', included: true },
-            ],
-            cta: 'Start Free',
-            ctaStyle: 'outline',
-        },
-        {
-            name: 'Growth',
-            price: '$49',
-            period: '/ month',
-            description: 'Scale your product with powerful auth and branding control.',
-            highlight: true,
-            badge: 'Most Popular',
-            features: [
-                { text: '10,000 MAU included', included: true },
-                { text: '10 Blocks', included: true },
-                { text: '30-day logs', included: true },
-                { text: '12-hour sessions', included: true },
-                { text: 'Custom branding', included: true },
-                { text: 'SMS available (usage-based)', included: true },
-                { text: 'Auto multi-org mapping', included: true },
-                { text: 'Extra Usage: +$10 per 5k MAU', included: true, bold: true },
-                { text: '+$5 per extra Block', included: true, bold: true },
-            ],
-            cta: 'Upgrade to Growth',
-            ctaStyle: 'primary',
-        },
-        {
-            name: 'Scale',
-            price: '$149',
-            period: '/ month',
-            description: 'Enterprise-grade auth for high-volume, complex SaaS products.',
+            name: 'Plan and environment review',
+            price: 'Contact us',
+            period: '',
+            description: 'Confirm current commercial terms and enabled capabilities for your application.',
             highlight: false,
             features: [
-                { text: '50,000 MAU included', included: true },
-                { text: 'Unlimited Blocks', included: true },
-                { text: '24-hour sessions', included: true },
-                { text: 'Advanced org rules', included: true },
-                { text: 'SMS available (usage-based)', included: true },
-                { text: 'Extra Usage: +$25 per 25k MAU', included: true, bold: true },
+                { text: 'Review login methods and provider configuration', included: true },
+                { text: 'Confirm usage limits and billing terms', included: true },
+                { text: 'Confirm session and retention policies', included: true },
             ],
-            cta: 'Choose Scale',
+            cta: 'Discuss your setup',
             ctaStyle: 'outline',
         },
     ];
 
     public readonly infoBanners: InfoBanner[] = [
         {
-            icon: 'bar_chart',
-            title: 'Transparent usage-based pricing',
+            icon: 'info',
+            title: 'Current terms require confirmation',
             description:
-                'MAU = unique logged-in users per calendar month. Usage visible in real time. No hidden fees. No contracts.',
+                'Plan names and limits in older material may differ from your environment. Confirm pricing, usage allowances, and enabled providers with the team before purchase.',
         },
         {
             icon: 'sms',
-            title: 'Optional Add-ons',
+            title: 'Provider dependencies',
             description:
-                'Transactional SMS on paid plans. Billed per message by destination country. Requires a configurable monthly spending cap.',
+                'SMS, email, and social login require the appropriate provider configuration. Confirm provider costs and availability for your environment.',
         },
     ];
 
     public readonly trustItems: TrustItem[] = [
+        { title: 'Widget integration', description: 'Use your configured block reference ID.', icon: 'code' },
+        { title: 'Application boundaries', description: 'Your product enforces business authorization.', icon: 'lock' },
+        { title: 'Environment review', description: 'Confirm enabled providers and service terms.', icon: 'settings' },
         {
-            title: '5-minute setup',
-            description: 'Minimal configuration. Production-ready instantly.',
-            icon: 'bolt',
-        },
-        {
-            title: 'No vendor lock-in',
-            description: 'Simple architecture and predictable APIs.',
-            icon: 'lock_open',
-        },
-        {
-            title: 'Cancel anytime',
-            description: 'No contracts. Upgrade or downgrade freely.',
-            icon: 'autorenew',
-        },
-        {
-            title: 'Security-first',
-            description: 'Encrypted in transit and at rest.',
-            icon: 'security',
+            title: 'Investigation tools',
+            description: 'Inspect request failures and recorded activity.',
+            icon: 'search',
         },
     ];
 }
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 7969cc56..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,24 +173,24 @@ <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>
-                Account data is retained for the life of your account. End-user authentication logs are retained per
-                your plan (7 days on Starter, 30 days on Growth, 90 days on Scale). On account deletion, all data is
-                purged within 30 days.
+                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
+                before sending personal data. No fixed retention or deletion schedule is published here.
             </p>
         </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 c0616ff5..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,233 +1,63 @@
-<main class="max-w-[860px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
-    <!-- Hero -->
+<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">
-            We take security seriously. Every layer of 36Blocks is designed with your users' data and trust in mind.
+        <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>
-        <p class="text-sm text-[#484f58] mt-3">Last updated: January 2026</p>
     </section>
-
-    <!-- Sections -->
-    <div class="flex flex-col gap-10">
-        <!-- Card -->
-        <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-lift ws-hover-glow ws-stagger-1"
-            aria-labelledby="sec-infra"
-            wsReveal="up"
-        >
-            <div class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left gap-4 mb-4">
-                <div class="feature-main-icon flex-shrink-0 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" d="M5 12h14M12 5l7 7-7 7" />
-                    </svg>
-                </div>
-                <div>
-                    <h2 id="sec-infra" class="text-xl font-bold text-[#f0f6fc] mb-2">Infrastructure &amp; Hosting</h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed">
-                        36Blocks runs on enterprise-grade cloud infrastructure with automatic failover, redundancy, and
-                        geographic distribution. All services are containerised and isolated to prevent cross-tenant
-                        data leakage.
-                    </p>
-                </div>
-            </div>
+    <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 ws-hover-lift ws-hover-glow"
-            aria-labelledby="sec-data"
-            wsReveal="up"
-        >
-            <div class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left gap-4 mb-4">
-                <div class="feature-main-icon flex-shrink-0 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"
-                            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
-                        />
-                    </svg>
-                </div>
-                <div>
-                    <h2 id="sec-data" class="text-xl font-bold text-[#f0f6fc] mb-2">Data Encryption</h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed mb-4">
-                        All data is encrypted both in transit and at rest. We use TLS 1.2+ for all network communication
-                        and AES-256 for data stored on disk. Passwords are hashed using bcrypt and are never stored in
-                        plaintext.
-                    </p>
-                    <ul class="flex flex-col gap-2">
-                        @for (
-                            item of [
-                                'TLS 1.2+ for all API and dashboard traffic',
-                                'AES-256 encryption at rest',
-                                'bcrypt password hashing',
-                                'Encrypted database backups',
-                            ];
-                            track item
-                        ) {
-                            <li 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>
-                                {{ item }}
-                            </li>
-                        }
-                    </ul>
-                </div>
-            </div>
+        <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
+                ownership and business authorization on its backend.
+            </p>
+            <p>
+                Do not rely on a browser callback or hidden UI control to protect a resource. Your application must
+                verify authentication results, expiry, membership, and permissions before granting access.
+            </p>
         </section>
-
-        <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-lift ws-hover-glow"
-            aria-labelledby="sec-auth"
-            wsReveal="up"
-        >
-            <div class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left gap-4 mb-4">
-                <div class="feature-main-icon flex-shrink-0 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"
-                            d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                        />
-                    </svg>
-                </div>
-                <div>
-                    <h2 id="sec-auth" class="text-xl font-bold text-[#f0f6fc] mb-2">Authentication Security</h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed mb-4">
-                        36Blocks implements industry best practices for authentication flows including OTP expiry, rate
-                        limiting, brute-force protection, and bot prevention via hCaptcha.
-                    </p>
-                    <ul class="flex flex-col gap-2">
-                        @for (
-                            item of [
-                                'hCaptcha bot protection on all public endpoints',
-                                'OTP codes expire within 10 minutes',
-                                'Rate limiting on login and OTP requests',
-                                'Session tokens with configurable expiry',
-                                'Secure, HttpOnly cookies where applicable',
-                            ];
-                            track item
-                        ) {
-                            <li 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>
-                                {{ item }}
-                            </li>
-                        }
-                    </ul>
-                </div>
-            </div>
+        <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
+                deployed version and permissions.
+            </p>
+            <p>
+                Confirm retention, operator access, and the required investigation coverage with the team. Use activity
+                records within their documented coverage.
+            </p>
         </section>
-
-        <section
-            class="rounded-2xl border border-[#21262d] bg-[#161b22] p-8 ws-hover-lift ws-hover-glow"
-            aria-labelledby="sec-access"
-            wsReveal="up"
-        >
-            <div class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left gap-4">
-                <div class="feature-main-icon flex-shrink-0 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"
-                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                    </svg>
-                </div>
-                <div>
-                    <h2 id="sec-access" class="text-xl font-bold text-[#f0f6fc] mb-2">
-                        Access Control &amp; Audit Logs
-                    </h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed">
-                        Role-Based Access Control (RBAC) is built into the core of 36Blocks. Every action is logged with
-                        a full audit trail so you can see who did what, when. Logs are retained per your plan and are
-                        tamper-evident.
-                    </p>
-                </div>
-            </div>
+        <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 ws-hover-lift ws-hover-glow"
-            aria-labelledby="sec-disclosure"
-            wsReveal="up"
-        >
-            <div class="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left gap-4">
-                <div class="feature-main-icon flex-shrink-0 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"
-                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                        />
-                    </svg>
-                </div>
-                <div>
-                    <h2 id="sec-disclosure" class="text-xl font-bold text-[#f0f6fc] mb-2">Responsible Disclosure</h2>
-                    <p class="text-sm text-[#8b949e] leading-relaxed">
-                        If you discover a security vulnerability, please contact us at
-                        <a href="mailto:security@36blocks.com" class="text-teal-400 hover:underline"
-                            >security&#64;36blocks.com</a
-                        >. We will respond within 48 hours and work with you to resolve the issue responsibly.
-                    </p>
-                </div>
-            </div>
+        <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-[#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/security/security.component.ts b/apps/36-blocks/src/app/website/security/security.component.ts
index 61aa948e..92383c7e 100644
--- a/apps/36-blocks/src/app/website/security/security.component.ts
+++ b/apps/36-blocks/src/app/website/security/security.component.ts
@@ -17,13 +17,13 @@ export class SecurityComponent implements OnInit {
         this.metaService.updateTag({
             name: 'description',
             content:
-                'Learn how 36Blocks keeps your users safe with enterprise-grade encryption, hCaptcha bot protection, rate limiting, RBAC audit logs, and responsible disclosure.',
+                'Understand authentication configuration, application access boundaries, and investigation coverage in 36Blocks.',
         });
         this.metaService.updateTag({ name: 'robots', content: 'index, follow' });
         this.metaService.updateTag({ property: 'og:title', content: 'Security — 36Blocks' });
         this.metaService.updateTag({
             property: 'og:description',
-            content: 'Enterprise-grade security built into every layer of 36Blocks.',
+            content: 'Authentication configuration and application security boundaries.',
         });
         this.metaService.updateTag({ property: 'og:type', content: 'website' });
     }
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 c6174084..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,35 +1,35 @@
-<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, SDKs, or any related services (collectively, the
-                "Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not agree, do not use
-                the Service.
+                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
+                agree, do not use the Service.
             </p>
         </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/app/website/website.routes.ts b/apps/36-blocks/src/app/website/website.routes.ts
index 77e5f6af..bd31e274 100644
--- a/apps/36-blocks/src/app/website/website.routes.ts
+++ b/apps/36-blocks/src/app/website/website.routes.ts
@@ -12,6 +12,10 @@ export const websiteRoutes: Route[] = [
                 canActivate: [LoggedInGuard],
                 loadComponent: () => import('./home/home.component').then((c) => c.HomeComponent),
             },
+            {
+                path: 'docs',
+                loadComponent: () => import('./docs/docs.component').then((c) => c.DocsComponent),
+            },
             {
                 path: 'pricing',
                 loadComponent: () => import('./pricing/pricing.component').then((c) => c.PricingComponent),
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/docs/widget-integration-guide.md b/docs/widget-integration-guide.md
index 0ab1bf06..852da1e9 100644
--- a/docs/widget-integration-guide.md
+++ b/docs/widget-integration-guide.md
@@ -1,5 +1,7 @@
 # Proxy Auth Widget — Client Integration Guide
 
+> **Verification:** Examples describe existing widget contracts; provider login and application session flows still require environment testing. Browser callbacks alone do not authorize business resources.
+>
 > **Created:** Mar 25, 2026  
 > **Scope:** `apps/36-blocks-widget` — `initVerification` usage examples for all widget types  
 > **Script output:** `dist/apps/36-blocks/assets/proxy-auth/proxy-auth.js`
@@ -52,11 +54,12 @@ Default widget type. Shows OTP, social login, and/or password login buttons base
         type: 'authorization',
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
@@ -83,11 +86,12 @@ Displays the authenticated user's profile. Requires an `authToken` obtained from
         authToken: 'ENCRYPTED_AUTH_TOKEN',
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
@@ -115,11 +119,12 @@ Shows a role & user management panel. Requires an `authToken`. Use `isRolePermis
         isRolePermission: true,
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
@@ -147,11 +152,12 @@ Renders the organization details view. Use `showCompanyDetails` to include the c
         showCompanyDetails: true,
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
@@ -178,11 +184,12 @@ Shows subscription plans. Set `isLogin: true` to display a login flow alongside
         isLogin: true,
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
@@ -213,11 +220,12 @@ Uses `version: 'v2'` UI, icon-only social buttons, custom input field position,
         target: '_blank',
         success: (data) => {
             // get verified token in response
-            console.log('success response', data);
+            // Privately hand off to your application's verified session flow.
+            // Never log callback data: it may contain credentials.
         },
         failure: (error) => {
             // handle error
-            console.log('failure reason', error);
+            // Show a safe failure message; do not log credential-bearing payloads.
         },
     };
 </script>
diff --git a/libs/services/proxy/root/src/lib/services-proxy-root.module.ts b/libs/services/proxy/root/src/lib/services-proxy-root.module.ts
index 5ead552f..e1730370 100644
--- a/libs/services/proxy/root/src/lib/services-proxy-root.module.ts
+++ b/libs/services/proxy/root/src/lib/services-proxy-root.module.ts
@@ -36,7 +36,7 @@ export class RootService {
     public generateToken(params: { [key: string]: any } = {}): Observable<BaseResponse<{ jwt: string }, void>> {
         return this.http.get<BaseResponse<{ jwt: string }, void>>(RootUrls.generateToken(this.baseUrl), params);
     }
-    public getProjects(): Observable<BaseResponse<IProjects, void>> {
-        return this.http.get<BaseResponse<IProjects, void>>(RootUrls.getProject(this.baseUrl));
+    public getProjects(): Observable<BaseResponse<IPaginatedResponse<IProjects[]>, void>> {
+        return this.http.get<BaseResponse<IPaginatedResponse<IProjects[]>, void>>(RootUrls.getProject(this.baseUrl));
     }
 }
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 0959de66..f77281b0 100755
--- a/package.json
+++ b/package.json
@@ -47,7 +47,10 @@
         "workspace-generator": "nx workspace-generator",
         "update-public-suffix": "node ./libs/ui/handle-domain/src/lib/updater.js",
         "format:code": "npx prettier --write --ignore-unknown .",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "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/set-env.js b/tools/set-env.js
index b635de00..622416ec 100644
--- a/tools/set-env.js
+++ b/tools/set-env.js
@@ -18,7 +18,7 @@ const path = require('path');
 // Object.assign ensures .env values override any stale/dev env vars pre-set by Amplify.
 try {
     const dotenvResult = require('dotenv').config({
-        path: path.resolve(__dirname, '../.env')
+        path: path.resolve(__dirname, '../.env'),
     });
     if (dotenvResult.parsed) {
         Object.assign(process.env, dotenvResult.parsed);
@@ -45,20 +45,16 @@ if (DEBUG) {
 
 function get(key, fallback = undefined) {
     const value = env[key] !== undefined ? env[key] : fallback;
-    
+
     // Debug logging to track credential source
     if (DEBUG) {
         if (value !== undefined) {
-            // Show first 8 chars for verification without exposing full secrets
-            const preview = typeof value === 'string' && value.length > 8 
-                ? `${value.substring(0, 8)}...` 
-                : '***SET***';
-            console.log(`[set-env DEBUG] ${key} = ${preview}`);
+            console.log(`[set-env DEBUG] ${key} = SET`);
         } else {
             console.log(`[set-env DEBUG] ${key} = MISSING`);
         }
     }
-    
+
     if (value === undefined) {
         if (isCI) missingKeys.push(key);
         else console.warn(`[set-env] WARNING: env var "${key}" is not set`);
@@ -117,4 +113,4 @@ const onlyAuth = args.includes('--auth');
 
 if (!onlyAuth) writeProxyEnv();
 if (!onlyProxy) writeProxyAuthEnv();
-assertNoMissingKeys();
\ No newline at end of file
+assertNoMissingKeys();
diff --git a/tools/tests/activity.test.cjs b/tools/tests/activity.test.cjs
new file mode 100644
index 00000000..c9ee749e
--- /dev/null
+++ b/tools/tests/activity.test.cjs
@@ -0,0 +1,257 @@
+// Run: node --test tools/tests/activity.test.cjs
+// Exercises actual component/service TypeScript with RxJS; Angular DI and signals
+// are hosted locally. Browser rendering and backend authorization are separate checks.
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const path = require('node:path');
+const { test } = require('node:test');
+const vm = require('node:vm');
+const ts = require('typescript');
+const { Subject, of, throwError } = require('rxjs');
+
+function load(relative, dependencies = {}) {
+    const source = readFileSync(path.resolve(__dirname, '../..', relative), 'utf8');
+    const compiled = ts.transpileModule(source, {
+        compilerOptions: {
+            target: ts.ScriptTarget.ES2022,
+            module: ts.ModuleKind.CommonJS,
+            experimentalDecorators: true,
+        },
+    }).outputText;
+    const module = { exports: {} };
+    vm.runInNewContext(compiled, {
+        module,
+        exports: module.exports,
+        URL,
+        require: (name) => {
+            if (Object.hasOwn(dependencies, name)) return dependencies[name];
+            if (name === 'rxjs') return require(name);
+            if (name.startsWith('@angular/')) return {};
+            throw new Error(`Unexpected runtime dependency: ${name}`);
+        },
+    });
+    return module.exports;
+}
+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, target = null) {
+    class ActivatedRoute {}
+    const signal = (initial) => {
+        let value = initial;
+        const get = () => value;
+        get.set = (next) => {
+            value = next;
+        };
+        return get;
+    };
+    const { ActivityComponent } = load(componentPath, {
+        '@angular/core': {
+            Component: () => (target) => target,
+            ChangeDetectionStrategy: {},
+            inject: (token) =>
+                token === ActivatedRoute ? { snapshot: { queryParamMap: { get: () => target } } } : service,
+            signal,
+        },
+        '@angular/router': { ActivatedRoute },
+        './activity.models': models,
+        './activity.service': { ActivityService: class {} },
+    });
+    return new ActivityComponent();
+}
+const empty = { hasError: false, data: { data: [], totalEntityCount: 0, totalPageCount: 0 } };
+
+test('activity distinguishes denied, failed and empty responses and recovers on retry', () => {
+    let response = throwError(() => ({ errorCode: 403 }));
+    const component = createComponent({ getOperations: () => response });
+    component.ngOnInit();
+    assert.match(component.error(), /view_operations/);
+    assert.equal(component.loading(), false);
+    response = of({ hasError: true, data: empty.data });
+    component.load(1);
+    assert.match(component.error(), /could not be loaded/);
+    response = of(empty);
+    component.load(1);
+    assert.equal(component.error(), null);
+    assert.equal(component.rows().length, 0);
+});
+
+test('new requests clear stale rows and cancel older work', () => {
+    const first = new Subject();
+    const second = new Subject();
+    let count = 0;
+    const component = createComponent({ getOperations: () => (++count === 1 ? first : second) });
+    component.ngOnInit();
+    first.next({ data: { data: [{ id: 1 }], totalEntityCount: 1, totalPageCount: 1 } });
+    component.load(2);
+    assert.equal(first.observers.length, 0);
+    assert.equal(component.rows().length, 0);
+    assert.equal(component.loading(), true);
+    second.next(empty);
+    assert.equal(component.loading(), false);
+    component.ngOnDestroy();
+    assert.equal(second.observers.length, 0);
+});
+
+test('pagination uses applied filters rather than unsaved form edits; clear resets page and filters', () => {
+    const requests = [];
+    const component = createComponent({
+        getOperations: (params) => {
+            requests.push(params);
+            return of(empty);
+        },
+    });
+    component.filters.operation = '  Login as  ';
+    component.filters.target_user_id = '17';
+    component.applyFilters();
+    component.filters.operation = 'Unsaved';
+    component.load(2);
+    assert.equal(requests[1].operation, 'Login as');
+    assert.equal(requests[1].target_user_id, '17');
+    assert.equal(requests[1].pageNo, 2);
+    assert.equal(Object.hasOwn(requests[1], 'outcome'), false);
+    component.clearFilters();
+    assert.equal(requests[2].pageNo, 1);
+    assert.equal(Object.hasOwn(requests[2], 'operation'), false);
+});
+
+test('reversed dates prevent a request', () => {
+    const component = createComponent({
+        getOperations: () => {
+            throw new Error('must not send');
+        },
+    });
+    component.filters.startDate = '2026-10-28';
+    component.filters.endDate = '2026-10-27';
+    component.applyFilters();
+    assert.match(component.error(), /end date/);
+});
+
+test('Login as requires valid target, reason and explicit confirmation before sending credentials request', () => {
+    const calls = [];
+    const component = createComponent({
+        loginAs: (request) => {
+            calls.push(request);
+            return of({ data: { redirect_url: 'https://app.example.test/?token=example' } });
+        },
+        getOperations: () => of(empty),
+    });
+    component.loginTarget = '17';
+    component.loginReason = '  Support ticket 123  ';
+    component.loginAs();
+    assert.equal(calls.length, 0);
+    assert.match(component.loginError(), /confirm/);
+    component.loginConfirmed = true;
+    component.loginAs();
+    assert.equal(calls[0].user_id, 17);
+    assert.equal(calls[0].reason, 'Support ticket 123');
+    assert.equal(Object.hasOwn(calls[0], 'company_id'), false);
+    assert.equal(component.loginConfirmed, false);
+    assert.equal(component.loginRedirect(), 'https://app.example.test/?token=example');
+});
+
+test('Login as never presents a returned raw token or unsafe redirect', () => {
+    const component = createComponent({
+        loginAs: () =>
+            of({ data: { redirect_url: 'javascript:alert(1)', proxy_auth_token: 'secret', refresh_token: 'secret' } }),
+        getOperations: () => of(empty),
+    });
+    component.loginTarget = '17';
+    component.loginReason = 'Support';
+    component.loginConfirmed = true;
+    component.loginAs();
+    assert.equal(component.loginRedirect(), null);
+    assert.match(component.loginMessage(), /no safe application redirect/);
+    assert.equal(component.loginMessage().includes('secret'), false);
+});
+
+test('Login as permission failures remain actionable and do not display backend errors', () => {
+    const component = createComponent({
+        loginAs: () => throwError(() => ({ errorCode: 403, errors: 'secret' })),
+        getOperations: () => of(empty),
+    });
+    component.loginTarget = '17';
+    component.loginReason = 'Support';
+    component.loginConfirmed = true;
+    component.loginAs();
+    assert.match(component.loginError(), /Owner, Admin/);
+    assert.equal(component.loginError().includes('secret'), false);
+    assert.equal(component.loggingIn(), false);
+});
+
+test('credential redirects allow HTTPS and loopback HTTP only, without embedded userinfo', () => {
+    for (const value of [
+        'javascript:alert(1)',
+        '//app.test/path',
+        'data:text/plain,a',
+        'http://app.test/',
+        'https://user:pass@app.test/',
+        null,
+    ]) {
+        assert.equal(models.safeLoginRedirect(value), null);
+    }
+    assert.equal(models.safeLoginRedirect('https://app.test/path#fragment'), 'https://app.test/path#fragment');
+    assert.equal(models.safeLoginRedirect('http://localhost:4200/path'), 'http://localhost:4200/path');
+});
+
+test('service uses authenticated wrapper and POST JSON for impersonation reason', () => {
+    const calls = [];
+    const http = { get: (...args) => calls.push(['get', ...args]), post: (...args) => calls.push(['post', ...args]) };
+    class Wrapper {}
+    const { ActivityService } = load('apps/36-blocks/src/app/panel/activity/activity.service.ts', {
+        '@angular/core': { Injectable: () => (target) => target, Inject: () => () => {}, inject: () => http },
+        '@proxy/models/root-models': { ProxyBaseUrls: { BaseURL: 'BASE_URL' } },
+        '@proxy/service': { createUrl: (base, endpoint) => `${base}/${endpoint}` },
+        '@proxy/services/httpWrapper': { HttpWrapperService: Wrapper },
+    });
+    const service = new ActivityService('https://api.example.test/api');
+    service.getOperations({ pageNo: 2 });
+    service.loginAs({ user_id: 17, reason: 'Support' });
+    assert.equal(calls[0][1], 'https://api.example.test/api/operations');
+    assert.equal(calls[1][0], 'post');
+    assert.equal(calls[1][1], 'https://api.example.test/api/loginAs');
+    assert.equal(calls[1][2].reason, 'Support');
+});
+
+test('editing the impersonation target clears the previous credential link and confirmation', () => {
+    const component = createComponent({});
+    component.loginRedirect.set('https://app.test/?token=example');
+    component.loginMessage.set('Created');
+    component.loginConfirmed = true;
+    component.clearLoginResult();
+    assert.equal(component.loginRedirect(), null);
+    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/environment-logging.test.cjs b/tools/tests/environment-logging.test.cjs
new file mode 100644
index 00000000..3c92559d
--- /dev/null
+++ b/tools/tests/environment-logging.test.cjs
@@ -0,0 +1,35 @@
+const assert = require('node:assert/strict');
+const { mkdtempSync, mkdirSync, copyFileSync, rmSync } = require('node:fs');
+const { tmpdir } = require('node:os');
+const path = require('node:path');
+const { spawnSync } = require('node:child_process');
+const { test } = require('node:test');
+
+test('environment generation reports presence without leaking credential prefixes', () => {
+    const root = mkdtempSync(path.join(tmpdir(), '36blocks-env-'));
+    try {
+        mkdirSync(path.join(root, 'tools'));
+        mkdirSync(path.join(root, 'apps/36-blocks-widget/src/environments'), { recursive: true });
+        copyFileSync(path.resolve(__dirname, '../set-env.js'), path.join(root, 'tools/set-env.js'));
+        const secret = 'SYNTHETIC-TEST-SECRET-not-a-real-credential';
+        const result = spawnSync(process.execPath, [path.join(root, 'tools/set-env.js'), '--auth'], {
+            encoding: 'utf8',
+            env: {
+                DEBUG_SET_ENV: 'true',
+                AUTH_UI_ENCODE_KEY: secret,
+                AUTH_UI_IV_KEY: secret,
+                AUTH_API_ENCODE_KEY: secret,
+                AUTH_API_IV_KEY: secret,
+                HCAPTCHA_SITE_KEY: secret,
+                SEND_OTP_AUTH_KEY: secret,
+            },
+        });
+        assert.equal(result.status, 0);
+        const output = result.stdout + result.stderr;
+        assert.ok(output.includes('AUTH_UI_ENCODE_KEY = SET'));
+        assert.ok(!output.includes(secret));
+        assert.ok(!output.includes(secret.substring(0, 8)));
+    } finally {
+        rmSync(root, { recursive: true, force: true });
+    }
+});
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
new file mode 100644
index 00000000..94e63cfb
--- /dev/null
+++ b/tools/tests/panel-investigation.test.cjs
@@ -0,0 +1,302 @@
+// Run: node --test tools/tests/panel-investigation.test.cjs
+// Execute actual TypeScript classes with RxJS. Only framework DI/state hosting is
+// stubbed, so these checks do not replace a browser or Angular template build.
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const path = require('node:path');
+const { test } = require('node:test');
+const vm = require('node:vm');
+const ts = require('typescript');
+const { BehaviorSubject, Subject, of, throwError, map, tap } = require('rxjs');
+
+class StateHost {
+    constructor(state) {
+        this.state$ = new BehaviorSubject(state);
+    }
+    select(selector) {
+        return this.state$.pipe(map(selector));
+    }
+    patchState(patch) {
+        const state = this.state$.value;
+        this.state$.next({ ...state, ...(typeof patch === 'function' ? patch(state) : patch) });
+    }
+    updater(update) {
+        return () => this.state$.next(update(this.state$.value));
+    }
+    effect(project) {
+        const requests = new Subject();
+        project(requests).subscribe();
+        return (request) => requests.next(request);
+    }
+}
+
+function loadClass(relativePath, dependencies) {
+    const source = readFileSync(path.resolve(__dirname, '../..', relativePath), 'utf8');
+    const compiled = ts.transpileModule(source, {
+        compilerOptions: {
+            target: ts.ScriptTarget.ES2022,
+            module: ts.ModuleKind.CommonJS,
+            experimentalDecorators: true,
+            useDefineForClassFields: false,
+        },
+    }).outputText;
+    const module = { exports: {} };
+    const importModule = (name) => {
+        if (Object.hasOwn(dependencies, name)) return dependencies[name];
+        if (name === 'rxjs' || name === 'rxjs/operators') return require(name);
+        throw new Error(`Unexpected runtime dependency: ${name}`);
+    };
+    vm.runInNewContext(compiled, { module, exports: module.exports, require: importModule });
+    return module.exports;
+}
+
+const angular = { Injectable: () => (target) => target };
+const { LogsComponentStore } = loadClass('apps/36-blocks/src/app/panel/logs/log/logs.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'] },
+});
+
+function createLogsStore(service) {
+    return new LogsComponentStore(service, { error() {} });
+}
+
+test('a failed logs response remains distinguishable from an empty successful result and can recover', () => {
+    let response = { hasError: true, errors: ['Unavailable'], data: { data: [{ id: 'stale' }] } };
+    const store = createLogsStore({ getProxyLogs: () => of(response) });
+    store.getLogs({});
+    assert.equal(store.state$.value.logs, null);
+    assert.match(store.state$.value.logsError, /could not be loaded/);
+    assert.equal(store.state$.value.logsInProcess, false);
+    response = { hasError: false, data: { data: [] } };
+    store.getLogs({});
+    assert.equal(store.state$.value.logsError, null);
+    assert.equal(store.state$.value.logs.data.length, 0);
+});
+
+test('transport failures clear loading and a later retry still runs', () => {
+    let failed = true;
+    const store = createLogsStore({
+        getProxyLogs: () => (failed ? throwError(() => ({ errors: ['Offline'] })) : of({ data: { data: [] } })),
+    });
+    store.getLogs({});
+    assert.equal(store.state$.value.logsInProcess, false);
+    assert.match(store.state$.value.logsError, /could not be loaded/);
+    failed = false;
+    store.getLogs({});
+    assert.equal(store.state$.value.logsError, null);
+});
+
+test('a new list request clears stale rows while it is pending', () => {
+    const pending = new Subject();
+    const store = createLogsStore({ getProxyLogs: () => pending });
+    store.patchState({ logs: { data: [{ id: 1 }] } });
+    store.getLogs({});
+    assert.equal(store.state$.value.logs, null);
+    assert.equal(store.state$.value.logsInProcess, true);
+    pending.next({ data: { data: [] } });
+    assert.equal(store.state$.value.logsInProcess, false);
+});
+
+test('failed detail envelopes never become a fabricated successful detail object', () => {
+    const store = createLogsStore({ getProxyLogsById: () => of({ hasError: true, data: { headers: 'private' } }) });
+    store.getLogsById('request-id');
+    assert.equal(store.state$.value.reqLogs, null);
+    assert.match(store.state$.value.reqLogsError, /could not be loaded/);
+    store.resetReqLog();
+    assert.equal(store.state$.value.reqLogsError, null);
+});
+
+test('detail retry clears errors and decodes nested JSON without altering literal markup', () => {
+    let failed = true;
+    const store = createLogsStore({
+        getProxyLogsById: () =>
+            failed
+                ? throwError(() => ({ errors: ['Offline'] }))
+                : of({
+                      data: {
+                          headers: JSON.stringify(JSON.stringify({ label: '<b>literal</b>' })),
+                          request_body: 'plain text',
+                      },
+                  }),
+    });
+    store.getLogsById('request-id');
+    assert.equal(store.state$.value.reqLogsInProcess, false);
+    assert.match(store.state$.value.reqLogsError, /could not be loaded/);
+    failed = false;
+    store.getLogsById('request-id');
+    assert.equal(store.state$.value.reqLogsError, null);
+    assert.equal(store.state$.value.reqLogs.headers.label, '<b>literal</b>');
+    assert.equal(store.state$.value.reqLogs.request_body, 'plain text');
+});
+
+const rootActionCreators = new Proxy({}, { get: (_, type) => Object.assign(() => ({ type }), { type }) });
+const { rootReducer, initialState } = loadClass('apps/36-blocks/src/app/core/ngrx/store/reducer/root.reducer.ts', {
+    '@ngrx/store': {
+        on: (action, update) => ({ type: action.type, update }),
+        createReducer:
+            (initial, ...handlers) =>
+            (state = initial, action) => {
+                const handler = handlers.find((entry) => entry.type === action.type);
+                return handler ? handler.update(state, action) : state;
+            },
+    },
+    '../../actions': { rootActions: rootActionCreators },
+});
+
+test('project reducer records failure separately from empty data and resets it on retry/success', () => {
+    let state = rootReducer(initialState, { type: 'getAllProjectsError' });
+    assert.equal(state.projectLoadFailed, true);
+    assert.equal(state.allProjects, null);
+    assert.equal(state.projectInProcess, false);
+    state = rootReducer(state, { type: 'getAllProject' });
+    assert.equal(state.projectLoadFailed, false);
+    assert.equal(state.projectInProcess, true);
+    state = rootReducer(state, { type: 'getAllProjectSuccess', response: { data: [] } });
+    assert.equal(state.projectLoadFailed, false);
+    assert.equal(state.projectInProcess, false);
+    assert.equal(state.allProjects.data.length, 0);
+});
+
+const { RootEffects } = loadClass('apps/36-blocks/src/app/core/ngrx/effects/root/root.effect.ts', {
+    '@angular/core': angular,
+    '@ngrx/effects': {
+        createEffect: (factory) => factory(),
+        ofType: (creator) => require('rxjs').filter((action) => action.type === creator.type),
+    },
+    '../../actions/root.action': rootActionCreators,
+    '@proxy/models/root-models': { errorResolver: () => ['Request failed'] },
+});
+
+test('project effect emits recoverable failure for transport errors, error envelopes, and malformed data', () => {
+    const actions = new Subject();
+    let response = throwError(() => ({ errors: ['Offline'] }));
+    const effects = new RootEffects(actions, { error() {} }, { getProjects: () => response });
+    const results = [];
+    effects.getAllProject$.subscribe((action) => results.push(action));
+    actions.next({ type: 'getAllProject' });
+    response = of({ hasError: true });
+    actions.next({ type: 'getAllProject' });
+    response = of({ hasError: false, data: null });
+    actions.next({ type: 'getAllProject' });
+    response = of({ hasError: false, data: { data: [] } });
+    actions.next({ type: 'getAllProject' });
+    assert.deepEqual(
+        results.map((action) => action.type),
+        ['getAllProjectsError', 'getAllProjectsError', 'getAllProjectsError', 'getAllProjectSuccess']
+    );
+});
+
+test('malformed successful log list envelopes produce recoverable errors while valid empty results succeed', () => {
+    for (const malformed of [
+        null,
+        {},
+        { hasError: false, data: null },
+        { hasError: false, data: {} },
+        { hasError: false, data: { data: {} } },
+    ]) {
+        let response = malformed;
+        const store = createLogsStore({ getProxyLogs: () => of(response) });
+        store.getLogs({});
+        assert.equal(store.state$.value.logs, null);
+        assert.equal(store.state$.value.logsInProcess, false);
+        assert.match(store.state$.value.logsError, /could not be loaded/);
+        response = { hasError: false, data: { data: [] } };
+        store.getLogs({});
+        assert.equal(store.state$.value.logsError, null);
+        assert.equal(store.state$.value.logs.data.length, 0);
+        assert.equal(store.state$.value.logsInProcess, false);
+    }
+});
+
+test('missing or malformed successful log details produce recoverable errors and retry accepts a valid object', () => {
+    for (const malformed of [
+        null,
+        {},
+        { hasError: false, data: null },
+        { hasError: false, data: [] },
+        { hasError: false, data: 'invalid' },
+    ]) {
+        let response = malformed;
+        const store = createLogsStore({ getProxyLogsById: () => of(response) });
+        store.getLogsById('request-id');
+        assert.equal(store.state$.value.reqLogs, null);
+        assert.equal(store.state$.value.reqLogsInProcess, false);
+        assert.match(store.state$.value.reqLogsError, /could not be loaded/);
+        response = { hasError: false, data: { id: 1, headers: null, request_body: null, response: null } };
+        store.getLogsById('request-id');
+        assert.equal(store.state$.value.reqLogsError, null);
+        assert.equal(store.state$.value.reqLogs.id, 1);
+        assert.equal(store.state$.value.reqLogsInProcess, false);
+    }
+});
+
+// Production removed project gating: preserve authenticated panel access even
+// when the client has no projects, while exposing the new Activity route.
+test('production panel keeps authentication without restoring project gating', () => {
+    const authGuard = class {};
+    const { panelRoutes } = loadClass('apps/36-blocks/src/app/panel/panel.routes.ts', {
+        '../website/home/authguard': { CanActivateRouteGuard: authGuard },
+    });
+    const panel = panelRoutes[0];
+    assert.equal(panel.canActivate.length, 1);
+    assert.equal(panel.canActivate[0], authGuard);
+    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);
+});
diff --git a/tools/tests/widget-example.test.cjs b/tools/tests/widget-example.test.cjs
new file mode 100644
index 00000000..35a82978
--- /dev/null
+++ b/tools/tests/widget-example.test.cjs
@@ -0,0 +1,54 @@
+// Checks the actual public example without making provider or network requests.
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+const { test } = require('node:test');
+const ts = require('typescript');
+
+const source = fs.readFileSync(
+    path.resolve(__dirname, '../../apps/36-blocks/src/app/website/docs/widget-example.ts'),
+    'utf8'
+);
+const exportsObject = {};
+vm.runInNewContext(ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS } }).outputText, {
+    exports: exportsObject,
+});
+const example = exportsObject.WIDGET_EXAMPLE;
+
+function executeExample() {
+    const status = { textContent: '' };
+    let config;
+    const context = vm.createContext({
+        document: { getElementById: (id) => (id === 'auth-status' ? status : null) },
+        window: {
+            initVerification: (configuration) => {
+                config = configuration;
+            },
+        },
+    });
+    const inlineScript = example.match(/<script>([\s\S]*?)<\/script>/)[1];
+    vm.runInContext(inlineScript, context);
+    const onload = example.match(/onload="([^"]+)"/)[1];
+    vm.runInContext(onload, context);
+    return { status, config };
+}
+
+test('public example loads the built asset and initializes authorization at the matching mount point', () => {
+    const { config } = executeExample();
+    assert.match(example, /src="WIDGET_ORIGIN\/assets\/proxy-auth\/proxy-auth.js"/);
+    assert.equal(config.type, 'authorization');
+    assert.equal(config.theme, 'system');
+    assert.ok(example.includes(`id="${config.referenceId}"`));
+    assert.equal(typeof config.success, 'function');
+});
+
+test('public callbacks report completion and failure without exposing callback payloads', () => {
+    const { status, config } = executeExample();
+    config.success({ token: 'PRIVATE_TEST_TOKEN' });
+    assert.match(status.textContent, /Authentication completed/);
+    assert.ok(!status.textContent.includes('PRIVATE_TEST_TOKEN'));
+    config.failure({ secret: 'PRIVATE_TEST_TOKEN' });
+    assert.match(status.textContent, /Authentication failed/);
+    assert.ok(!status.textContent.includes('PRIVATE_TEST_TOKEN'));
+});