diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index 3943eeca..2991de3f 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, ErrorHandler, provideZonelessChangeDetection } from '@angular/core';
-import { provideRouter, Router } from '@angular/router';
+import { ErrorHandler, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
@@ -10,9 +10,6 @@ import { AppComponent } from './app.component';
 import { GlobalErrorHandler } from './error/global-error-handler';
 import { API_BASE_URL } from './tokens';
 
-/** Lightweight stub used as a route target to avoid recursively rendering AppComponent. */
-@Component({ selector: 'app-stub', template: '', standalone: true })
-class StubComponent {}
 
 describe('AppComponent', () => {
     let fixture: ComponentFixture<AppComponent>;
@@ -133,8 +130,8 @@ describe('AppComponent (mobile viewport)', () => {
             imports: [AppComponent, NoopAnimationsModule],
             providers: [
                 provideZonelessChangeDetection(),
-                // Provide a non-root route so we can navigate away from `/` to reveal the app shell.
-                provideRouter([{ path: 'compiler', component: StubComponent }]),
+                // Provide empty routes — no longer need StubComponent
+                provideRouter([]),
                 provideHttpClient(),
                 provideHttpClientTesting(),
                 { provide: ErrorHandler, useClass: GlobalErrorHandler },
@@ -165,11 +162,7 @@ describe('AppComponent (mobile viewport)', () => {
         localStorage.clear();
     });
 
-    it('should render menu button with aria-label on non-landing routes', async () => {
-        // The app shell hamburger is only shown on non-landing-page routes.
-        // Navigate away from `/` to make isLandingPage() = false and reveal the shell header.
-        const router = TestBed.inject(Router);
-        await router.navigate(['/compiler']);
+    it('should render menu button with aria-label', async () => {
         await fixture.whenStable();
         fixture.detectChanges();
         const menuBtn = fixture.nativeElement.querySelector('button[aria-label="Toggle navigation"]');
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 52f171ab..1c3d8608 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, inject, signal, viewChild, effect } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet, Router, NavigationEnd } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
@@ -24,7 +24,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { ThemeService } from './services/theme.service';
 import { ErrorBoundaryComponent } from './error/error-boundary.component';
 import { NotificationContainerComponent } from './notification/notification-container.component';
@@ -105,8 +105,7 @@ interface NavItem {
       <mat-sidenav-content>
         <div class="page-wrapper">
 
-          <!-- Header — Bloqr nav bar: sticky, glass morphism, orange accent (hidden on landing page) -->
-          @if (!isLandingPage()) {
+          <!-- Header — Bloqr nav bar: sticky, glass morphism, orange accent -->
           <header class="app-header-shell">
             <div class="app-title-row">
               @if (isMobile()) {
@@ -158,7 +157,6 @@ interface NavItem {
               }
             </nav>
           </header>
-          } <!-- end @if (!isLandingPage()) header -->
 
           <!-- Main content area -->
           <main id="main-content" class="app-main-content" role="main" aria-label="Main content" tabindex="-1">
@@ -168,12 +166,10 @@ interface NavItem {
             <router-outlet />
           </main>
 
-          <!-- Footer (hidden on landing page which has its own footer) -->
-          @if (!isLandingPage()) {
+          <!-- Footer matching original -->
           <footer class="app-footer-shell">
             <p>Powered by <a href="https://github.com/jaypatrick/adblock-compiler" target="_blank" rel="noopener noreferrer">@jk-com/adblock-compiler<span class="visually-hidden"> (opens in new tab)</span></a></p>
           </footer>
-          } <!-- end @if (!isLandingPage()) footer -->
 
         </div>
       </mat-sidenav-content>
@@ -241,29 +237,6 @@ export class AppComponent {
      */
     readonly themeService = inject(ThemeService);
 
-    /**
-     * Router — used to detect the landing page URL.
-     * isLandingPage drives @if blocks that hide the shell header/footer on `/`.
-     * initialValue reads router.url synchronously so direct navigation to non-root
-     * routes (e.g. /compiler) starts with the correct false value, preventing a
-     * brief flash of hidden/shown shell on deep-link access.
-     */
-    private readonly router = inject(Router);
-
-    private isLandingPageUrl(url: string): boolean {
-        const normalizedUrl = url.split(/[?#]/u, 1)[0];
-
-        return normalizedUrl === '' || normalizedUrl === '/';
-    }
-
-    readonly isLandingPage = toSignal(
-        this.router.events.pipe(
-            filter(e => e instanceof NavigationEnd),
-            map(e => this.isLandingPageUrl((e as NavigationEnd).urlAfterRedirects)),
-        ),
-        { initialValue: this.isLandingPageUrl(this.router.url) },
-    );
-
     constructor() {
         // Close the mobile drawer whenever desktop layout is active (horizontal nav takes over).
         // Runs whenever isMobile() is false to ensure the drawer stays closed on desktop.
diff --git a/frontend/src/app/home/home.component.spec.ts b/frontend/src/app/home/home.component.spec.ts
index c569023b..2e399e0c 100644
--- a/frontend/src/app/home/home.component.spec.ts
+++ b/frontend/src/app/home/home.component.spec.ts
@@ -1,51 +1,148 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { HomeComponent } from './home.component';
+import { API_BASE_URL } from '../tokens';
 
 describe('HomeComponent', () => {
     let fixture: ComponentFixture<HomeComponent>;
     let component: HomeComponent;
+    let httpTesting: HttpTestingController;
+
+    /** Flush the initial MetricsStore HTTP requests so signals settle. */
+    function flushPendingRequests(opts: { status?: 'healthy' | 'degraded' | 'unhealthy' } = {}): void {
+        const status = opts.status ?? 'healthy';
+        httpTesting.match('/api/metrics').forEach(req =>
+            req.flush({ totalRequests: 100, averageDuration: 45.5, cacheHitRate: 85, successRate: 98 }),
+        );
+        httpTesting.match('/api/health').forEach(req =>
+            req.flush({ status, version: '1.2.3' }),
+        );
+        httpTesting.match('/api/queue/stats').forEach(req =>
+            req.flush({ currentDepth: 3, pending: 2, completed: 50, failed: 1, processingRate: 5, lag: 0, depthHistory: [] }),
+        );
+    }
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [HomeComponent],
+            imports: [HomeComponent, NoopAnimationsModule],
             providers: [
                 provideZonelessChangeDetection(),
                 provideRouter([]),
+                provideHttpClient(),
+                provideHttpClientTesting(),
+                { provide: API_BASE_URL, useValue: '/api' },
             ],
         }).compileComponents();
 
         fixture = TestBed.createComponent(HomeComponent);
         component = fixture.componentInstance;
+        httpTesting = TestBed.inject(HttpTestingController);
+
+        flushPendingRequests();
         await fixture.whenStable();
     });
 
+    afterEach(() => {
+        vi.restoreAllMocks();
+        httpTesting.verify();
+    });
+
     it('should create', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should render nav bar', async () => {
-        await fixture.whenStable();
-        const nav = fixture.nativeElement.querySelector('app-nav-bar');
-        expect(nav).toBeTruthy();
+    it('should have 6 navigation cards', () => {
+        expect(component.navCards.length).toBe(6);
     });
 
-    it('should render hero section', async () => {
-        await fixture.whenStable();
-        const hero = fixture.nativeElement.querySelector('app-hero-section');
-        expect(hero).toBeTruthy();
+    it('should include Compiler card', () => {
+        const card = component.navCards.find(c => c.path === '/compiler');
+        expect(card).toBeTruthy();
+        expect(card!.label).toContain('Compiler');
     });
 
-    it('should render landing content wrapper', async () => {
-        await fixture.whenStable();
-        const wrapper = fixture.nativeElement.querySelector('.landing-content');
-        expect(wrapper).toBeTruthy();
+    it('should include Admin card with warn tag', () => {
+        const card = component.navCards.find(c => c.path === '/admin');
+        expect(card).toBeTruthy();
+        expect(card!.tag).toBe('Admin');
+    });
+
+    it('should derive live stats from metrics', () => {
+        const stats = component.liveStats();
+        expect(stats.totalRequests).toContain('100');
+        expect(stats.avgDuration).toContain('45.5');
+        expect(stats.cacheHitRate).toContain('85.0%');
+        expect(stats.successRate).toContain('98.0%');
+    });
+
+    it('should navigate when navigateTo is called', async () => {
+        const router = TestBed.inject(Router);
+        const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+        component.navigateTo('/compiler');
+        expect(navigateSpy).toHaveBeenCalledWith(['/compiler']);
+    });
+
+    it('should open absolute external URLs in a new tab via window.open', () => {
+        const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+        component.navigateTo('https://docs.example.com/', true);
+        expect(openSpy).toHaveBeenCalledWith('https://docs.example.com/', '_blank', 'noopener,noreferrer');
+    });
+
+    it('should open worker-handled relative paths in a new tab when external flag is true', () => {
+        const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+        component.navigateTo('/admin', true);
+        expect(openSpy).toHaveBeenCalledWith('/admin', '_blank', 'noopener,noreferrer');
+    });
+
+    it('should NOT call window.open for internal paths without external flag', async () => {
+        const router = TestBed.inject(Router);
+        const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+        const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+        component.navigateTo('/performance');
+        expect(openSpy).not.toHaveBeenCalled();
+        expect(navigateSpy).toHaveBeenCalledWith(['/performance']);
+    });
+
+    it('should navigate to performance on stat card click for Total Requests', async () => {
+        const router = TestBed.inject(Router);
+        const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+        component.onStatCardClicked('Total Requests');
+        expect(navigateSpy).toHaveBeenCalledWith(['/performance']);
+    });
+
+    it('should navigate to performance on stat card click for Avg Response Time', async () => {
+        const router = TestBed.inject(Router);
+        const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+        component.onStatCardClicked('Avg Response Time');
+        expect(navigateSpy).toHaveBeenCalledWith(['/performance']);
     });
 
-    it('should render footer section', async () => {
+    it('should not navigate for non-metric stat card clicks', async () => {
+        const router = TestBed.inject(Router);
+        const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+        component.onStatCardClicked('Cache Hit Rate');
+        expect(navigateSpy).not.toHaveBeenCalled();
+    });
+
+    it('should show default health icon when no data', async () => {
+        // After the flush in beforeEach, health is 'healthy'
+        expect(component.healthIcon()).toBe('check_circle');
+    });
+
+    it('should show default health color when no data', async () => {
+        // After the flush in beforeEach, health is 'healthy'
+        expect(component.healthColor()).toBe('var(--app-success, #4caf50)');
+    });
+
+    it('should render the page heading', async () => {
         await fixture.whenStable();
-        const footer = fixture.nativeElement.querySelector('app-footer-section');
-        expect(footer).toBeTruthy();
+        fixture.detectChanges();
+        const h1 = fixture.nativeElement.querySelector('h1');
+        expect(h1?.textContent).toContain('Adblock Compiler Dashboard');
     });
 });
+
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index 0841fff6..2bbf9ea6 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -1,64 +1,795 @@
 /**
- * HomeComponent — Bloqr Landing Page
+ * HomeComponent — Adblock Compiler Dashboard
  *
- * Full-page landing page at route `/`. Composes all landing page sections:
- *   Nav → Hero → Problem/VPN → Features → HowItWorks → BYO → Audiences → Pricing → CTA → Footer
+ * Full-featured application dashboard at route `/`.
+ * Displays system health, live performance stats, quick actions,
+ * navigation cards, endpoint comparison, and an interactive API tester.
  *
- * All section panels (e.g. persona tabs) are SSR-rendered in the DOM for SEO/AEO.
- * Angular signals drive reactive state (tab selection, code toggle).
- * No EventEmitter, no zone-based patterns.
+ * Angular 21 patterns: signal(), computed(), inject(), toSignal(), DestroyRef
+ * Design language: Bloqr dark theme (Space Grotesk / Inter, orange accent)
  */
 
-import { Component } from '@angular/core';
-import { NavBarComponent } from './sections/nav-bar/nav-bar.component';
-import { HeroSectionComponent } from './sections/hero-section/hero-section.component';
-import { ProblemSectionComponent } from './sections/problem-section/problem-section.component';
-import { FeaturesSectionComponent } from './sections/features-section/features-section.component';
-import { HowItWorksSectionComponent } from './sections/how-it-works-section/how-it-works-section.component';
-import { ByoSectionComponent } from './sections/byo-section/byo-section.component';
-import { AudiencesSectionComponent } from './sections/audiences-section/audiences-section.component';
-import { PricingSectionComponent } from './sections/pricing-section/pricing-section.component';
-import { CtaBannerSectionComponent } from './sections/cta-banner-section/cta-banner-section.component';
-import { FooterSectionComponent } from './sections/footer-section/footer-section.component';
+import {
+    Component,
+    computed,
+    inject,
+    signal,
+    DestroyRef,
+    PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Router } from '@angular/router';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { StatCardComponent } from '../stat-card/stat-card.component';
+import { SkeletonCardComponent } from '../skeleton/skeleton-card.component';
+import { QueueChartComponent } from '../queue-chart/queue-chart.component';
+import { ApiTesterComponent } from '../api-tester/api-tester.component';
+import { MetricsStore } from '../store/metrics.store';
+import { NotificationService } from '../services/notification.service';
+import { LogService } from '../services/log.service';
+
+/** Navigation card definition */
+export interface NavCard {
+    readonly path: string;
+    readonly label: string;
+    readonly icon: string;
+    readonly description: string;
+    readonly tag?: string;
+    readonly external?: true;
+}
+
+/** Endpoint comparison row */
+export interface EndpointInfo {
+    readonly endpoint: string;
+    readonly method: string;
+    readonly auth: string;
+    readonly description: string;
+    readonly rateLimit: string;
+}
 
 @Component({
     selector: 'app-home',
     standalone: true,
     imports: [
-        NavBarComponent,
-        HeroSectionComponent,
-        ProblemSectionComponent,
-        FeaturesSectionComponent,
-        HowItWorksSectionComponent,
-        ByoSectionComponent,
-        AudiencesSectionComponent,
-        PricingSectionComponent,
-        CtaBannerSectionComponent,
-        FooterSectionComponent,
+        MatCardModule,
+        MatButtonModule,
+        MatIconModule,
+        MatDividerModule,
+        MatChipsModule,
+        MatProgressSpinnerModule,
+        MatSlideToggleModule,
+        MatTooltipModule,
+        StatCardComponent,
+        SkeletonCardComponent,
+        QueueChartComponent,
+        ApiTesterComponent,
     ],
     template: `
-    <app-nav-bar />
-    <div class="landing-content">
-        <app-hero-section />
-        <app-problem-section />
-        <app-features-section />
-        <app-how-it-works-section />
-        <app-byo-section />
-        <app-audiences-section />
-        <app-pricing-section />
-        <app-cta-banner-section />
+    <div class="dashboard-page">
+
+      <!-- Page Header -->
+      <div class="dashboard-header">
+        <h1 class="dashboard-title">Adblock Compiler Dashboard</h1>
+        <p class="dashboard-subtitle">Manage, compile, and monitor adblock filter lists.</p>
+      </div>
+
+      <!-- System Status Bar -->
+      <mat-card appearance="outlined" class="status-bar bloqr-card">
+        <mat-card-content>
+          <div class="status-row">
+            <div class="status-indicator">
+              <mat-icon [style.color]="healthColor()">{{ healthIcon() }}</mat-icon>
+              <span class="status-text">System {{ store.health()?.status ?? 'loading…' }}</span>
+              @if (store.health()?.version) {
+                <mat-chip class="version-chip">v{{ store.health()!.version }}</mat-chip>
+              }
+            </div>
+            <div class="status-actions">
+              <button mat-icon-button (click)="store.refresh()"
+                [matTooltip]="store.isLoading() ? 'Refreshing…' : 'Refresh data'"
+                aria-label="Refresh metrics">
+                @if (store.isLoading()) {
+                  <mat-progress-spinner diameter="20" mode="indeterminate" />
+                } @else {
+                  <mat-icon>refresh</mat-icon>
+                }
+              </button>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+
+      <!-- Live Stats Grid -->
+      <section aria-labelledby="stats-heading" class="stats-section">
+        <h2 id="stats-heading" class="section-heading">Live Statistics</h2>
+        @if (store.isLoading() && !store.metrics()) {
+          <div class="stats-grid">
+            @for (_ of [0,1,2,3,4]; track $index) {
+              <app-skeleton-card />
+            }
+          </div>
+        } @else {
+          <div class="stats-grid">
+            <app-stat-card
+              label="Total Requests"
+              [value]="liveStats().totalRequests"
+              icon="bar_chart"
+              color="var(--mat-sys-primary)"
+              [(highlighted)]="highlightedCard"
+              (cardClicked)="onStatCardClicked($event)"
+            />
+            <app-stat-card
+              label="Avg Response Time"
+              [value]="liveStats().avgDuration"
+              icon="timer"
+              color="var(--mat-sys-secondary)"
+              [(highlighted)]="highlightedCard"
+              (cardClicked)="onStatCardClicked($event)"
+            />
+            <app-stat-card
+              label="Cache Hit Rate"
+              [value]="liveStats().cacheHitRate"
+              icon="cached"
+              color="var(--app-success, #4caf50)"
+              [(highlighted)]="highlightedCard"
+              (cardClicked)="onStatCardClicked($event)"
+            />
+            <app-stat-card
+              label="Success Rate"
+              [value]="liveStats().successRate"
+              icon="check_circle"
+              color="var(--app-success, #4caf50)"
+              [(highlighted)]="highlightedCard"
+              (cardClicked)="onStatCardClicked($event)"
+            />
+            <app-stat-card
+              label="Queue Depth"
+              [value]="liveStats().queueDepth"
+              icon="queue"
+              color="var(--app-warning, #ff9800)"
+              [(highlighted)]="highlightedCard"
+              (cardClicked)="onStatCardClicked($event)"
+            />
+          </div>
+        }
+      </section>
+
+      <!-- Queue Chart -->
+      @if (queueDepthHistory().length > 0 || store.queueStats()) {
+        <section aria-labelledby="queue-heading" class="chart-section">
+          <h2 id="queue-heading" class="section-heading">Queue Depth History</h2>
+          <app-queue-chart
+            [dataPoints]="queueDepthHistory()"
+            label="Queue Depth Over Time"
+            [color]="'var(--app-warning, #ff9800)'"
+          />
+          @if (queueProcessingRate() !== null) {
+            <p class="processing-rate">
+              Processing rate: <strong>{{ queueProcessingRate() }}</strong> jobs/min
+            </p>
+          }
+        </section>
+      }
+
+      <!-- Quick Actions -->
+      <section aria-labelledby="actions-heading" class="actions-section">
+        <h2 id="actions-heading" class="section-heading">Quick Actions</h2>
+        <div class="actions-grid">
+          <button mat-raised-button class="bloqr-btn-primary action-btn"
+            (click)="navigateTo('/compiler')">
+            <mat-icon>build</mat-icon>
+            Compile Filter List
+          </button>
+          <button mat-stroked-button class="action-btn"
+            (click)="navigateTo('/compiler')">
+            <mat-icon>layers</mat-icon>
+            Batch Compile
+          </button>
+          <button mat-stroked-button class="action-btn"
+            (click)="navigateTo('/compiler')">
+            <mat-icon>cloud_queue</mat-icon>
+            Async Compile
+          </button>
+          <button mat-stroked-button class="action-btn"
+            (click)="showTester.set(true); testerCollapsed.set(false)">
+            <mat-icon>science</mat-icon>
+            API Tester
+          </button>
+        </div>
+      </section>
+
+      <!-- Deferred API Tester -->
+      @if (showTester()) {
+        @defer (on idle) {
+          <section class="tester-section">
+            <app-api-tester [(collapsed)]="testerCollapsed" />
+          </section>
+        } @placeholder {
+          <div class="tester-placeholder">Loading API tester…</div>
+        }
+      }
+
+      <!-- Navigation Grid -->
+      <section aria-labelledby="nav-heading" class="nav-section">
+        <h2 id="nav-heading" class="section-heading">Navigation</h2>
+        <div class="nav-grid">
+          @for (card of navCards; track card.path) {
+            <mat-card
+              appearance="outlined"
+              class="nav-card bloqr-card cursor-pointer"
+              (click)="navigateTo(card.path, card.external)"
+              role="link"
+              tabindex="0"
+              (keydown.enter)="navigateTo(card.path, card.external)"
+              (keydown.space)="navigateTo(card.path, card.external)"
+              [matTooltip]="card.description"
+            >
+              <mat-card-header>
+                <mat-icon mat-card-avatar class="nav-card-icon">{{ card.icon }}</mat-icon>
+                <mat-card-title class="nav-card-title">{{ card.label }}</mat-card-title>
+                @if (card.tag) {
+                  <mat-chip class="nav-card-tag"
+                    [class.warn-tag]="card.tag === 'Admin'"
+                    [class.info-tag]="card.tag !== 'Admin'">
+                    {{ card.tag }}
+                  </mat-chip>
+                }
+              </mat-card-header>
+              <mat-card-content>
+                <p class="nav-card-desc">{{ card.description }}</p>
+              </mat-card-content>
+            </mat-card>
+          }
+        </div>
+      </section>
+
+      <!-- Endpoint Comparison Table -->
+      <section aria-labelledby="endpoints-heading" class="endpoints-section">
+        <h2 id="endpoints-heading" class="section-heading">API Endpoints</h2>
+        <mat-card appearance="outlined" class="bloqr-card">
+          <mat-card-content>
+            <div class="table-wrapper" role="region" aria-label="API endpoints table" tabindex="0">
+              <table class="endpoints-table" aria-labelledby="endpoints-heading">
+                <thead>
+                  <tr>
+                    <th scope="col">Endpoint</th>
+                    <th scope="col">Method</th>
+                    <th scope="col">Auth</th>
+                    <th scope="col">Description</th>
+                    <th scope="col">Rate Limit</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (ep of endpointComparison; track ep.endpoint) {
+                    <tr>
+                      <td><code>{{ ep.endpoint }}</code></td>
+                      <td><mat-chip class="method-chip" [class.post-chip]="ep.method === 'POST'">{{ ep.method }}</mat-chip></td>
+                      <td>{{ ep.auth }}</td>
+                      <td>{{ ep.description }}</td>
+                      <td>{{ ep.rateLimit }}</td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </section>
+
+      <!-- Settings -->
+      <section aria-labelledby="settings-heading" class="settings-section">
+        <h2 id="settings-heading" class="section-heading">Settings</h2>
+        <mat-card appearance="outlined" class="bloqr-card settings-card">
+          <mat-card-content>
+            <div class="setting-row">
+              <div class="setting-label">
+                <mat-icon>notifications</mat-icon>
+                <span>Browser Notifications</span>
+                <span class="setting-hint">Get notified when async jobs complete</span>
+              </div>
+              <mat-slide-toggle
+                [checked]="notifications.isEnabled()"
+                (change)="notifications.toggleNotifications()"
+                aria-label="Toggle browser notifications"
+              />
+            </div>
+            <mat-divider />
+            <div class="setting-row">
+              <div class="setting-label">
+                <mat-icon>autorenew</mat-icon>
+                <span>Auto-Refresh</span>
+                <span class="setting-hint">Automatically refresh metrics every {{ autoRefreshInterval }}s</span>
+              </div>
+              <mat-slide-toggle
+                [checked]="autoRefreshEnabled()"
+                (change)="onAutoRefreshToggle()"
+                aria-label="Toggle auto-refresh"
+              />
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </section>
+
     </div>
-    <app-footer-section />
     `,
     styles: [`
-    :host {
-        display: block;
-        background: #070B14;
-        min-height: 100vh;
+    .dashboard-page {
+        padding: 24px;
+        max-width: 1280px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    .dashboard-header {
+        padding-bottom: 8px;
+    }
+
+    .dashboard-title {
+        font-family: 'Space Grotesk', system-ui, sans-serif;
+        font-size: clamp(1.75rem, 3vw, 2.25rem);
+        font-weight: 800;
+        color: #F1F5F9;
+        margin: 0 0 8px;
+        letter-spacing: -0.02em;
+    }
+
+    .dashboard-subtitle {
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 1rem;
+        color: #94A3B8;
+        margin: 0;
+    }
+
+    .section-heading {
+        font-family: 'Space Grotesk', system-ui, sans-serif;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #F1F5F9;
+        margin: 0 0 16px;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        opacity: 0.85;
+    }
+
+    /* Status Bar */
+    .status-bar {
+        border-radius: 8px !important;
+    }
+
+    .status-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .status-indicator {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .status-text {
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 0.875rem;
+        color: #F1F5F9;
+        text-transform: capitalize;
+    }
+
+    .version-chip {
+        font-size: 0.7rem;
+        font-family: 'JetBrains Mono', monospace;
+        background: rgba(255, 85, 0, 0.15) !important;
+        color: #FF5500 !important;
     }
-    .landing-content {
-        background: #070B14;
+
+    /* Stats */
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 16px;
+    }
+
+    /* Chart */
+    .chart-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .processing-rate {
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 0.875rem;
+        color: #94A3B8;
+        margin: 4px 0 0;
+    }
+
+    /* Quick Actions */
+    .actions-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-family: 'Space Grotesk', system-ui, sans-serif !important;
+        font-weight: 600 !important;
+    }
+
+    /* Tester */
+    .tester-placeholder {
+        padding: 24px;
+        text-align: center;
+        color: #94A3B8;
+        font-style: italic;
+    }
+
+    /* Nav Grid */
+    .nav-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+        gap: 16px;
+    }
+
+    .nav-card {
+        cursor: pointer;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .nav-card:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.4)) !important;
+    }
+
+    .nav-card:focus-visible {
+        outline: 2px solid var(--mat-sys-primary);
+        outline-offset: 2px;
+    }
+
+    .nav-card-icon {
+        color: var(--mat-sys-primary) !important;
+        font-size: 28px !important;
+        width: 28px !important;
+        height: 28px !important;
+    }
+
+    .nav-card-title {
+        font-family: 'Space Grotesk', system-ui, sans-serif;
+        font-weight: 600;
+        font-size: 1rem;
+        color: #F1F5F9;
+    }
+
+    .nav-card-desc {
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 0.85rem;
+        color: #94A3B8;
+        margin: 0;
+    }
+
+    .nav-card-tag {
+        font-size: 0.7rem !important;
+    }
+
+    .warn-tag {
+        background: rgba(255, 85, 0, 0.15) !important;
+        color: #FF5500 !important;
+    }
+
+    .info-tag {
+        background: rgba(0, 212, 255, 0.12) !important;
+        color: #00D4FF !important;
+    }
+
+    /* Endpoint Table */
+    .table-wrapper {
+        overflow-x: auto;
+    }
+
+    .endpoints-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 0.85rem;
+    }
+
+    .endpoints-table th {
+        text-align: left;
+        padding: 10px 12px;
+        border-bottom: 1px solid #1E2D40;
+        color: #94A3B8;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: 0.75rem;
+    }
+
+    .endpoints-table td {
+        padding: 10px 12px;
+        border-bottom: 1px solid #162035;
+        color: #F1F5F9;
+        vertical-align: middle;
+    }
+
+    .endpoints-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .endpoints-table code {
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.8rem;
+        color: #00D4FF;
+        background: rgba(0, 212, 255, 0.08);
+        padding: 2px 6px;
+        border-radius: 4px;
+    }
+
+    .method-chip {
+        font-size: 0.7rem !important;
+        font-family: 'JetBrains Mono', monospace !important;
+        font-weight: 700 !important;
+        background: rgba(0, 212, 255, 0.12) !important;
+        color: #00D4FF !important;
+    }
+
+    .post-chip {
+        background: rgba(255, 85, 0, 0.15) !important;
+        color: #FF5500 !important;
+    }
+
+    /* Settings */
+    .settings-card {
+        border-radius: 8px !important;
+    }
+
+    .setting-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+        gap: 16px;
+    }
+
+    .setting-label {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .setting-label mat-icon {
+        color: var(--mat-sys-primary);
+        flex-shrink: 0;
+    }
+
+    .setting-label span:first-of-type {
+        font-family: 'Space Grotesk', system-ui, sans-serif;
+        font-weight: 600;
+        color: #F1F5F9;
+    }
+
+    .setting-hint {
+        font-family: 'Inter', system-ui, sans-serif;
+        font-size: 0.8rem;
+        color: #94A3B8;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /* Bloqr card override */
+    :host ::ng-deep .bloqr-card.mat-mdc-card {
+        background: #0E1829;
+        border: 1px solid #1E2D40;
+        border-radius: 12px;
+    }
+
+    /* Bloqr primary button */
+    :host ::ng-deep .bloqr-btn-primary.mat-mdc-raised-button {
+        background: #FF5500;
+        color: #ffffff;
+        box-shadow: 0 0 20px rgba(255,85,0,0.30);
+        border-radius: 8px;
+        font-family: 'Space Grotesk', system-ui, sans-serif;
+        font-weight: 600;
+    }
+
+    /* Responsive */
+    @media (max-width: 600px) {
+        .dashboard-page {
+            padding: 16px;
+            gap: 24px;
+        }
+
+        .actions-grid {
+            flex-direction: column;
+        }
+
+        .action-btn {
+            width: 100%;
+        }
     }
     `],
 })
-export class HomeComponent {}
+export class HomeComponent {
+    // ── Services ────────────────────────────────────────────────────────────
+    readonly store = inject(MetricsStore);
+    readonly notifications = inject(NotificationService);
+    private readonly log = inject(LogService);
+    private readonly liveAnnouncer = inject(LiveAnnouncer);
+    private readonly router = inject(Router);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly platformId = inject(PLATFORM_ID);
+
+    // ── UI state signals ────────────────────────────────────────────────────
+    readonly highlightedCard = signal(false);
+    readonly showTester = signal(false);
+    readonly testerCollapsed = signal(true);
+    readonly autoRefreshEnabled = signal(false);
+
+    /** Auto-refresh interval in seconds */
+    readonly autoRefreshInterval = 30;
+
+    private refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+    // ── Navigation cards (6 entries) ────────────────────────────────────────
+    readonly navCards: NavCard[] = [
+        {
+            path: '/compiler',
+            label: 'Filter List Compiler',
+            icon: 'build',
+            description: 'Compile, merge, and transform adblock filter lists from multiple sources.',
+        },
+        {
+            path: '/performance',
+            label: 'Performance Metrics',
+            icon: 'monitoring',
+            description: 'Real-time compilation performance metrics and system health dashboards.',
+        },
+        {
+            path: '/validation',
+            label: 'Rule Validation',
+            icon: 'check_circle',
+            description: 'Validate adblock rules for syntax errors and compatibility issues.',
+        },
+        {
+            path: '/api-docs',
+            label: 'API Documentation',
+            icon: 'description',
+            description: 'Interactive REST API documentation with live request/response examples.',
+        },
+        {
+            path: '/admin',
+            label: 'Storage Admin',
+            icon: 'admin_panel_settings',
+            description: 'Manage R2 storage objects, D1 database tables, and KV cache entries.',
+            tag: 'Admin',
+        },
+        {
+            path: 'https://docs.bloqr.jaysonknight.com/',
+            label: 'Documentation',
+            icon: 'menu_book',
+            description: 'Full developer documentation: API reference, guides, and examples.',
+            tag: 'External',
+            external: true,
+        },
+    ];
+
+    // ── Endpoint comparison (9 entries) ────────────────────────────────────
+    readonly endpointComparison: EndpointInfo[] = [
+        { endpoint: '/api',              method: 'GET',  auth: 'None',     description: 'API information and version',         rateLimit: '100/min' },
+        { endpoint: '/api/health',       method: 'GET',  auth: 'None',     description: 'System health status',                rateLimit: '100/min' },
+        { endpoint: '/api/metrics',      method: 'GET',  auth: 'None',     description: 'Performance metrics snapshot',        rateLimit: '60/min'  },
+        { endpoint: '/api/compile',      method: 'POST', auth: 'API Key',  description: 'Synchronous filter list compilation', rateLimit: '20/min'  },
+        { endpoint: '/api/validate',     method: 'POST', auth: 'None',     description: 'Validate adblock rule syntax',        rateLimit: '60/min'  },
+        { endpoint: '/api/queue/submit', method: 'POST', auth: 'API Key',  description: 'Submit async compilation job',        rateLimit: '10/min'  },
+        { endpoint: '/api/queue/stats',  method: 'GET',  auth: 'None',     description: 'Queue depth and processing stats',    rateLimit: '60/min'  },
+        { endpoint: '/api/ast/parse',    method: 'POST', auth: 'None',     description: 'Parse rules into AST',                rateLimit: '30/min'  },
+        { endpoint: '/admin/storage',    method: 'GET',  auth: 'CF Access', description: 'Storage admin (R2/D1/KV)',           rateLimit: '30/min'  },
+    ];
+
+    // ── Computed stats ──────────────────────────────────────────────────────
+    readonly liveStats = computed(() => {
+        const m = this.store.metrics();
+        const q = this.store.queueStats();
+        return {
+            totalRequests: m ? m.totalRequests.toLocaleString() : '—',
+            avgDuration:   m ? `${m.averageDuration.toFixed(1)} ms` : '—',
+            cacheHitRate:  m ? `${m.cacheHitRate.toFixed(1)}%` : '—',
+            successRate:   m ? `${m.successRate.toFixed(1)}%` : '—',
+            queueDepth:    q ? q.currentDepth.toString() : '—',
+        };
+    });
+
+    readonly queueDepthHistory = computed(() => {
+        const q = this.store.queueStats();
+        if (!q?.depthHistory) return [];
+        return q.depthHistory.map(e => e.depth);
+    });
+
+    readonly queueProcessingRate = computed(() => {
+        const q = this.store.queueStats();
+        return q ? q.processingRate : null;
+    });
+
+    readonly healthColor = computed(() => {
+        const h = this.store.health();
+        if (!h) return 'var(--app-success, #4caf50)';
+        if (h.status === 'healthy') return 'var(--app-success, #4caf50)';
+        if (h.status === 'degraded') return 'var(--app-warning, #ff9800)';
+        return 'var(--app-error, #f44336)';
+    });
+
+    readonly healthIcon = computed(() => {
+        const h = this.store.health();
+        if (!h) return 'check_circle';
+        if (h.status === 'healthy') return 'check_circle';
+        if (h.status === 'degraded') return 'warning';
+        return 'error';
+    });
+
+    constructor() {
+        this.destroyRef.onDestroy(() => this.stopAutoRefresh());
+    }
+
+    // ── Event handlers ──────────────────────────────────────────────────────
+    navigateTo(path: string, external?: true): void {
+        if (external === true || path.startsWith('http://') || path.startsWith('https://')) {
+            if (isPlatformBrowser(this.platformId)) {
+                window.open(path, '_blank', 'noopener,noreferrer');
+            }
+            return;
+        }
+        void this.router.navigate([path]);
+    }
+
+    onStatCardClicked(label: string): void {
+        const metricLabels = new Set(['Total Requests', 'Avg Response Time']);
+        if (metricLabels.has(label)) {
+            void this.router.navigate(['/performance']);
+            void this.liveAnnouncer.announce(`Navigating to performance metrics`);
+            this.log.info(`Stat card clicked: ${label}`, 'home');
+        }
+    }
+
+    onAutoRefreshToggle(): void {
+        if (this.autoRefreshEnabled()) {
+            this.autoRefreshEnabled.set(false);
+            this.stopAutoRefresh();
+            this.log.info('Auto-refresh disabled', 'home');
+        } else {
+            this.autoRefreshEnabled.set(true);
+            this.startAutoRefresh();
+            this.log.info(`Auto-refresh enabled (${this.autoRefreshInterval}s)`, 'home');
+        }
+    }
+
+    // ── Private helpers ─────────────────────────────────────────────────────
+    private startAutoRefresh(): void {
+        if (!isPlatformBrowser(this.platformId)) return;
+        this.stopAutoRefresh();
+        this.refreshTimer = setInterval(() => {
+            this.store.refresh();
+        }, this.autoRefreshInterval * 1000);
+    }
+
+    private stopAutoRefresh(): void {
+        if (this.refreshTimer !== null) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
+}
diff --git a/frontend/src/app/home/sections/audiences-section/audiences-section.component.ts b/frontend/src/app/home/sections/audiences-section/audiences-section.component.ts
deleted file mode 100644
index f463c958..00000000
--- a/frontend/src/app/home/sections/audiences-section/audiences-section.component.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Component, signal } from '@angular/core';
-
-interface Persona {
-    readonly id: string;
-    readonly tab: string;
-    readonly headline: string;
-    readonly body: string;
-    readonly cta: string;
-}
-
-@Component({
-    selector: 'app-audiences-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="audiences" aria-label="Who It's For">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">WHO IT'S FOR</span>
-            <h2 class="bloqr-section-title">Built for every kind of user.</h2>
-            <!-- Tabs -->
-            <div class="persona-tabs" role="tablist" aria-label="User personas">
-                @for (persona of personas; track persona.id) {
-                    <button
-                        class="persona-tab"
-                        [class.active]="activePersona() === persona.id"
-                        role="tab"
-                        [attr.id]="'tab-' + persona.id"
-                        [attr.aria-selected]="activePersona() === persona.id"
-                        [attr.aria-controls]="'panel-' + persona.id"
-                        (click)="activePersona.set(persona.id)">
-                        {{ persona.tab }}
-                    </button>
-                }
-            </div>
-            <!-- Panels — ALL kept in DOM for SSR/SEO, visibility toggled -->
-            <div class="persona-panels">
-                @for (persona of personas; track persona.id) {
-                    <div
-                        class="persona-panel bloqr-card"
-                        role="tabpanel"
-                        [attr.id]="'panel-' + persona.id"
-                        [attr.aria-labelledby]="'tab-' + persona.id"
-                        [class.panel-active]="activePersona() === persona.id"
-                        [attr.aria-hidden]="activePersona() !== persona.id"
-                        [attr.inert]="activePersona() !== persona.id ? true : null">
-                        <h3 class="persona-headline">{{ persona.headline }}</h3>
-                        <p class="persona-body">{{ persona.body }}</p>
-                        <a href="#pricing" class="bloqr-btn-primary">{{ persona.cta }}</a>
-                    </div>
-                }
-            </div>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .persona-tabs {
-        display: flex;
-        gap: 4px;
-        margin-top: 40px;
-        margin-bottom: 0;
-        border-bottom: 1px solid #1E2D40;
-        flex-wrap: wrap;
-    }
-    .persona-tab {
-        background: none;
-        border: none;
-        border-bottom: 2px solid transparent;
-        padding: 10px 16px;
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 14px;
-        font-weight: 500;
-        color: #94A3B8;
-        cursor: pointer;
-        transition: color 0.2s, border-color 0.2s;
-        margin-bottom: -1px;
-    }
-    .persona-tab:hover { color: #F1F5F9; }
-    .persona-tab.active {
-        color: #FF5500;
-        border-bottom-color: #FF5500;
-    }
-    .persona-panels {
-        position: relative;
-        margin-top: 0;
-    }
-    .persona-panel {
-        margin-top: 24px;
-        flex-direction: column;
-        gap: 20px;
-        max-width: 700px;
-        /* Hidden panels are still in the DOM (SSR-rendered for SEO/AEO),
-           but visually removed with clip and zero-height to avoid layout shifts. */
-        clip: rect(0 0 0 0);
-        clip-path: inset(50%);
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        white-space: nowrap;
-        position: absolute;
-        pointer-events: none;
-        display: flex;
-    }
-    .persona-panel.panel-active {
-        /* Active panel is shown normally */
-        clip: auto;
-        clip-path: none;
-        width: auto;
-        height: auto;
-        overflow: visible;
-        white-space: normal;
-        position: static;
-        pointer-events: auto;
-    }
-    .persona-headline {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1.4rem;
-        font-weight: 800;
-        color: #F1F5F9;
-        line-height: 1.2;
-        margin: 0;
-    }
-    .persona-body { font-size: 0.95rem; color: #94A3B8; line-height: 1.65; margin: 0; }
-    `],
-})
-export class AudiencesSectionComponent {
-    readonly activePersona = signal('consumer');
-
-    readonly personas: Persona[] = [
-        {
-            id: 'consumer',
-            tab: 'The Beneficiary',
-            headline: 'The internet you always thought you had. Now you actually do.',
-            body: 'No setup, no acronyms, one switch. AI handles everything. You just browse.',
-            cta: 'Join the waitlist',
-        },
-        {
-            id: 'power',
-            tab: 'The Advocate',
-            headline: 'Keep your vendor. Finally stop managing it in 12 places.',
-            body: 'Multi-instance sync, AI rules, one change everywhere. Your filters are finally coherent.',
-            cta: 'Get early access',
-        },
-        {
-            id: 'dev',
-            tab: 'The Builder',
-            headline: 'REST, streaming, or embedded. Running before your next coffee.',
-            body: 'TypeScript library, REST API, JSON/YAML config. Fully typed. Works in CI.',
-            cta: 'Read the docs',
-        },
-        {
-            id: 'vendor',
-            tab: 'The Ally',
-            headline: 'Your users trust you. We make that trust more powerful.',
-            body: 'Partner with Bloqr to add list intelligence to your platform. White-label available.',
-            cta: 'Learn more',
-        },
-    ];
-}
diff --git a/frontend/src/app/home/sections/byo-section/byo-section.component.ts b/frontend/src/app/home/sections/byo-section/byo-section.component.ts
deleted file mode 100644
index 8de1362a..00000000
--- a/frontend/src/app/home/sections/byo-section/byo-section.component.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'app-byo-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="byo" aria-label="Bring Your Own or Use Ours">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">FLEXIBILITY</span>
-            <h2 class="bloqr-section-title">Bring your own. Or use ours.</h2>
-            <div class="byo-grid">
-                <div class="byo-card bloqr-card">
-                    <div class="byo-card-header">
-                        <div class="byo-icon" aria-hidden="true">
-                            <span class="material-symbols-outlined">extension</span>
-                        </div>
-                        <h3 class="byo-card-title">Bring Your Own</h3>
-                    </div>
-                    <p class="byo-card-body">Already on AdGuard, NextDNS, or Pi-hole? Keep it. Bloqr adds AI-maintained lists, natural language rules, and multi-instance sync. Your setup stays yours.</p>
-                    <ul class="byo-list">
-                        <li>✓ Keep your current vendor</li>
-                        <li>✓ AI-enhanced filter lists</li>
-                        <li>✓ Multi-instance sync</li>
-                        <li>✓ Natural language rules</li>
-                    </ul>
-                </div>
-                <div class="byo-card bloqr-card">
-                    <div class="byo-card-header">
-                        <div class="byo-icon byo-icon-orange" aria-hidden="true">
-                            <span class="material-symbols-outlined">rocket_launch</span>
-                        </div>
-                        <h3 class="byo-card-title">Use Ours</h3>
-                    </div>
-                    <p class="byo-card-body">No vendor? No problem. We handle everything — vendor selection, configuration, list maintenance. You flip one switch.</p>
-                    <ul class="byo-list">
-                        <li>✓ We pick the best vendor for you</li>
-                        <li>✓ Zero configuration required</li>
-                        <li>✓ Fully managed list maintenance</li>
-                        <li>✓ One switch to get started</li>
-                    </ul>
-                </div>
-            </div>
-            <p class="byo-footer">Either way, you're not locked in.</p>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .byo-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 24px;
-        margin-top: 48px;
-    }
-    .byo-card { display: flex; flex-direction: column; gap: 20px; }
-    .byo-card-header { display: flex; align-items: center; gap: 12px; }
-    .byo-icon {
-        width: 44px; height: 44px;
-        display: flex; align-items: center; justify-content: center;
-        background: rgba(0,212,255,0.08);
-        border-radius: 8px;
-        color: #00D4FF;
-        flex-shrink: 0;
-    }
-    .byo-icon-orange { background: rgba(255,85,0,0.08); color: #FF5500; }
-    .byo-icon .material-symbols-outlined { font-size: 22px; }
-    .byo-card-title {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: #F1F5F9;
-        margin: 0;
-    }
-    .byo-card-body { font-size: 0.9rem; color: #94A3B8; line-height: 1.65; margin: 0; }
-    .byo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
-    .byo-list li { font-size: 0.875rem; color: #94A3B8; }
-    .byo-footer {
-        margin-top: 32px;
-        text-align: center;
-        font-size: 1rem;
-        font-weight: 600;
-        color: #F1F5F9;
-        font-style: italic;
-    }
-    @media (max-width: 640px) {
-        .byo-grid { grid-template-columns: 1fr; }
-    }
-    `],
-})
-export class ByoSectionComponent {}
diff --git a/frontend/src/app/home/sections/cta-banner-section/cta-banner-section.component.ts b/frontend/src/app/home/sections/cta-banner-section/cta-banner-section.component.ts
deleted file mode 100644
index 6522c077..00000000
--- a/frontend/src/app/home/sections/cta-banner-section/cta-banner-section.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'app-cta-banner-section',
-    standalone: true,
-    template: `
-    <section class="cta-banner" aria-label="Call to Action">
-        <div class="bloqr-container cta-inner">
-            <h2 class="cta-title">Internet Hygiene. Automated.</h2>
-            <p class="cta-sub">Join the waitlist. Be first when we launch.</p>
-            <a href="#pricing" class="bloqr-btn-primary bloqr-btn-xl">Join the waitlist</a>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .cta-banner {
-        background:
-            radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,85,0,0.10), transparent),
-            #070B14;
-        border-top: 1px solid #1E2D40;
-        border-bottom: 1px solid #1E2D40;
-        padding: 96px 0;
-    }
-    .cta-inner {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 24px;
-    }
-    .cta-title {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: clamp(2rem, 5vw, 3.5rem);
-        font-weight: 800;
-        letter-spacing: -0.03em;
-        line-height: 1.05;
-        color: #F1F5F9;
-        margin: 0;
-    }
-    .cta-sub { font-size: 1.1rem; color: #94A3B8; margin: 0; }
-    .bloqr-btn-xl { padding: 14px 32px; font-size: 16px; }
-    `],
-})
-export class CtaBannerSectionComponent {}
diff --git a/frontend/src/app/home/sections/features-section/features-section.component.ts b/frontend/src/app/home/sections/features-section/features-section.component.ts
deleted file mode 100644
index 46fe34a5..00000000
--- a/frontend/src/app/home/sections/features-section/features-section.component.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Component } from '@angular/core';
-
-interface Feature {
-    readonly icon: string;
-    readonly title: string;
-    readonly tagline: string;
-    readonly body: string;
-}
-
-@Component({
-    selector: 'app-features-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="features" aria-label="Features">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">FEATURES</span>
-            <h2 class="bloqr-section-title">Everything you need. Nothing you don't.</h2>
-            <div class="features-grid" role="list">
-                @for (feature of features; track feature.title) {
-                    <div class="feature-card bloqr-card" role="listitem">
-                        <div class="feature-icon-wrap" aria-hidden="true">
-                            <span class="material-symbols-outlined">{{ feature.icon }}</span>
-                        </div>
-                        <div class="feature-content">
-                            <h3 class="feature-title">{{ feature.title }}</h3>
-                            <p class="feature-tagline">{{ feature.tagline }}</p>
-                            <p class="feature-body">{{ feature.body }}</p>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .features-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 24px;
-        margin-top: 48px;
-    }
-    .feature-card { display: flex; flex-direction: column; gap: 16px; }
-    .feature-icon-wrap {
-        width: 44px;
-        height: 44px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255,85,0,0.08);
-        border-radius: 8px;
-        color: #FF5500;
-        flex-shrink: 0;
-    }
-    .feature-icon-wrap .material-symbols-outlined { font-size: 22px; }
-    .feature-title {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: #F1F5F9;
-        margin: 0 0 4px;
-    }
-    .feature-tagline {
-        font-size: 0.8rem;
-        font-weight: 600;
-        color: #FF5500;
-        margin: 0 0 8px;
-        letter-spacing: 0.02em;
-    }
-    .feature-body { font-size: 0.9rem; color: #94A3B8; line-height: 1.6; margin: 0; }
-    @media (max-width: 640px) {
-        .features-grid { grid-template-columns: 1fr; }
-    }
-    `],
-})
-export class FeaturesSectionComponent {
-    readonly features: Feature[] = [
-        {
-            icon: 'auto_awesome',
-            title: 'AI-maintained lists',
-            tagline: 'No setup. No maintenance.',
-            body: 'Bloqr builds your filter list automatically and keeps it current.',
-        },
-        {
-            icon: 'dashboard',
-            title: 'One pane of glass',
-            tagline: 'Manage every instance from one place.',
-            body: 'Manage every AdGuard, NextDNS, or Pi-hole instance from a single dashboard.',
-        },
-        {
-            icon: 'device_hub',
-            title: 'Coverage that follows you',
-            tagline: 'Every device. Every network.',
-            body: 'The same rules protect your home network, your phone, and any network you connect to.',
-        },
-        {
-            icon: 'extension',
-            title: 'Bring your own vendor',
-            tagline: 'Keep what you have. Add intelligence.',
-            body: 'Keep AdGuard. Keep NextDNS. Keep Pi-hole. Add intelligence.',
-        },
-    ];
-}
diff --git a/frontend/src/app/home/sections/footer-section/footer-section.component.ts b/frontend/src/app/home/sections/footer-section/footer-section.component.ts
deleted file mode 100644
index 2209a2ee..00000000
--- a/frontend/src/app/home/sections/footer-section/footer-section.component.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'app-footer-section',
-    standalone: true,
-    template: `
-    <footer class="bloqr-footer" role="contentinfo">
-        <div class="bloqr-container">
-            <div class="footer-grid">
-                <div class="footer-brand">
-                    <div class="footer-brand-row">
-                        <img src="assets/logo.svg"
-                             alt="Bloqr logo" width="28" height="28" />
-                        <span class="footer-wordmark">Bloqr</span>
-                    </div>
-                    <p class="footer-tagline">Internet Hygiene. Automated.</p>
-                    <p class="footer-copy">&copy; 2026 Bloqr</p>
-                </div>
-                <div class="footer-col">
-                    <h4 class="footer-heading">Product</h4>
-                    <ul>
-                        <li><a href="#features">Features</a></li>
-                        <li><a href="#how-it-works">How It Works</a></li>
-                        <li><a href="#pricing">Pricing</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler/releases" target="_blank" rel="noopener noreferrer">Changelog</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4 class="footer-heading">Resources</h4>
-                    <ul>
-                        <li><a href="https://docs.bloqr.jaysonknight.com/" target="_blank" rel="noopener noreferrer">Docs</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler" target="_blank" rel="noopener noreferrer">GitHub</a></li>
-                        <li><a href="https://docs.bloqr.jaysonknight.com/api" target="_blank" rel="noopener noreferrer">API Reference</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler/discussions" target="_blank" rel="noopener noreferrer">Blog</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4 class="footer-heading">Company</h4>
-                    <ul>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler" target="_blank" rel="noopener noreferrer">About</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler/blob/main/PRIVACY.md" target="_blank" rel="noopener noreferrer">Privacy</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler/blob/main/TERMS.md" target="_blank" rel="noopener noreferrer">Terms</a></li>
-                        <li><a href="https://github.com/jaypatrick/adblock-compiler/security" target="_blank" rel="noopener noreferrer">Security</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="footer-divider" aria-hidden="true"></div>
-            <p class="footer-legal">Built with ♥ for privacy-conscious users worldwide.</p>
-        </div>
-    </footer>
-    `,
-    styles: [`
-    :host { display: block; }
-    .bloqr-footer {
-        background: #070B14;
-        border-top: 1px solid #1E2D40;
-        padding: 48px 0 32px;
-    }
-    .footer-grid {
-        display: grid;
-        grid-template-columns: 2fr 1fr 1fr 1fr;
-        gap: 40px;
-    }
-    .footer-brand-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 12px;
-    }
-    .footer-wordmark {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 18px;
-        font-weight: 700;
-        color: #F1F5F9;
-    }
-    .footer-tagline { font-size: 13px; color: #94A3B8; margin: 0 0 8px; }
-    .footer-copy { font-size: 12px; color: #475569; margin: 0; }
-    .footer-heading {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 13px;
-        font-weight: 600;
-        color: #F1F5F9;
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-        margin: 0 0 16px;
-    }
-    .footer-col ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-    .footer-col a {
-        font-size: 14px;
-        color: #94A3B8;
-        text-decoration: none;
-        transition: color 0.2s;
-    }
-    .footer-col a:hover { color: #F1F5F9; }
-    .footer-divider {
-        height: 1px;
-        background: linear-gradient(90deg, transparent, #FF5500 50%, transparent);
-        opacity: 0.3;
-        margin: 32px 0 24px;
-    }
-    .footer-legal { font-size: 12px; color: #475569; text-align: center; margin: 0; }
-    @media (max-width: 768px) {
-        .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
-        .footer-brand { grid-column: 1 / -1; }
-    }
-    @media (max-width: 480px) {
-        .footer-grid { grid-template-columns: 1fr; }
-    }
-    `],
-})
-export class FooterSectionComponent {}
diff --git a/frontend/src/app/home/sections/hero-section/hero-section.component.ts b/frontend/src/app/home/sections/hero-section/hero-section.component.ts
deleted file mode 100644
index f263796b..00000000
--- a/frontend/src/app/home/sections/hero-section/hero-section.component.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'app-hero-section',
-    standalone: true,
-    template: `
-    <section class="hero" aria-label="Hero">
-        <div class="hero-content">
-            <div class="hero-badge" aria-label="Status">
-                <span>AI-powered adblock management</span>
-            </div>
-            <h1 class="hero-headline">
-                The internet you always thought you had.
-            </h1>
-            <p class="hero-subheadline">
-                Block ads. Block trackers. Block malware. One account. Zero setup.
-            </p>
-            <div class="hero-cta-group">
-                <a href="#pricing" class="bloqr-btn-primary bloqr-btn-lg">
-                    Join the waitlist
-                </a>
-                <a href="#how-it-works" class="bloqr-btn-ghost bloqr-btn-lg">
-                    See how it works
-                </a>
-            </div>
-            <p class="hero-social-proof">Trusted by privacy-conscious users worldwide.</p>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .hero {
-        min-height: 100dvh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 96px 24px 64px;
-        background:
-            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,85,0,0.12), transparent),
-            radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0,212,255,0.06), transparent),
-            #070B14;
-        text-align: center;
-    }
-    .hero-content {
-        max-width: 800px;
-        width: 100%;
-    }
-    .hero-badge {
-        display: inline-block;
-        background: rgba(0,212,255,0.10);
-        color: #00D4FF;
-        border: 1px solid rgba(0,212,255,0.20);
-        border-radius: 9999px;
-        padding: 4px 14px;
-        font-size: 12px;
-        font-weight: 600;
-        margin-bottom: 24px;
-        letter-spacing: 0.01em;
-    }
-    .hero-headline {
-        font-family: 'Space Grotesk', system-ui, sans-serif;
-        font-size: clamp(2.5rem, 6vw, 4.5rem);
-        font-weight: 800;
-        letter-spacing: -0.03em;
-        line-height: 1.05;
-        color: #F1F5F9;
-        margin: 0 0 24px;
-    }
-    .hero-subheadline {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: clamp(1rem, 2vw, 1.25rem);
-        font-weight: 400;
-        color: #94A3B8;
-        line-height: 1.6;
-        margin: 0 0 40px;
-    }
-    .hero-cta-group {
-        display: flex;
-        gap: 16px;
-        justify-content: center;
-        flex-wrap: wrap;
-        margin-bottom: 32px;
-    }
-    .bloqr-btn-lg { padding: 14px 32px; font-size: 16px; }
-    .hero-social-proof {
-        font-size: 13px;
-        color: #64748B;
-        margin: 0;
-    }
-    `],
-})
-export class HeroSectionComponent {}
diff --git a/frontend/src/app/home/sections/how-it-works-section/how-it-works-section.component.ts b/frontend/src/app/home/sections/how-it-works-section/how-it-works-section.component.ts
deleted file mode 100644
index 9ee30aea..00000000
--- a/frontend/src/app/home/sections/how-it-works-section/how-it-works-section.component.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { Component, signal } from '@angular/core';
-
-@Component({
-    selector: 'app-how-it-works-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="how-it-works" aria-label="How It Works">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">HOW IT WORKS</span>
-            <h2 class="bloqr-section-title">Set it. Bloqr it. Forget it.</h2>
-            <div class="steps-grid" role="list">
-                @for (step of steps; track step.num) {
-                    <div class="step" role="listitem">
-                        <div class="step-num" aria-hidden="true">{{ step.num }}</div>
-                        <div class="step-content">
-                            <h3 class="step-title">{{ step.title }}</h3>
-                            <p class="step-body">{{ step.body }}</p>
-                        </div>
-                    </div>
-                }
-            </div>
-            <!-- Code/UI Toggle -->
-            <div class="toggle-section">
-                <p class="toggle-copy">You'll never write a line of this. The UI builds it for you. But it's here if you want it.</p>
-                <div class="toggle-controls">
-                    <button class="toggle-btn" [class.active]="!showCode()" (click)="showCode.set(false)">
-                        Show UI
-                    </button>
-                    <button class="toggle-btn" [class.active]="showCode()" (click)="showCode.set(true)">
-                        Show code
-                    </button>
-                </div>
-                <div class="toggle-view">
-                    @if (!showCode()) {
-                        <div class="ui-mockup bloqr-card">
-                            <div class="ui-form-row">
-                                <p class="ui-label">DNS Vendor</p>
-                                <div class="ui-select" role="presentation">AdGuard Home</div>
-                            </div>
-                            <div class="ui-form-row">
-                                <p class="ui-label">List profile</p>
-                                <div class="ui-select" role="presentation">Balanced (AI-recommended)</div>
-                            </div>
-                            <div class="ui-form-row">
-                                <p class="ui-label">Update frequency</p>
-                                <div class="ui-select" role="presentation">Every 6 hours</div>
-                            </div>
-                            <div class="ui-form-row">
-                                <p class="ui-label">Devices</p>
-                                <div class="ui-tags" role="presentation">
-                                    <span class="ui-tag">Home network</span>
-                                    <span class="ui-tag">Mobile</span>
-                                    <span class="ui-tag">+ Add device</span>
-                                </div>
-                            </div>
-                            <button class="bloqr-btn-primary" style="margin-top:16px; cursor:default;">Apply configuration</button>
-                        </div>
-                    } @else {
-                        <div class="code-block" aria-label="Configuration YAML">
-<pre><code><span class="code-comment"># Bloqr configuration — generated by the UI</span>
-<span class="code-key">vendor</span>: adguard-home
-<span class="code-key">profile</span>: balanced
-<span class="code-key">update_frequency</span>: 6h
-<span class="code-key">devices</span>:
-  - <span class="code-string">home_network</span>
-  - <span class="code-string">mobile</span>
-<span class="code-key">ai</span>:
-  <span class="code-key">enabled</span>: <span class="code-bool">true</span>
-  <span class="code-key">threat_intel</span>: <span class="code-bool">true</span>
-  <span class="code-key">auto_update</span>: <span class="code-bool">true</span></code></pre>
-                        </div>
-                    }
-                </div>
-            </div>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .steps-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 32px;
-        margin: 48px 0;
-        position: relative;
-    }
-    .steps-grid::before {
-        content: '';
-        position: absolute;
-        top: 24px;
-        left: calc(16.666% + 16px);
-        right: calc(16.666% + 16px);
-        height: 1px;
-        background: linear-gradient(90deg, #FF5500, #1E2D40, #FF5500);
-        opacity: 0.3;
-    }
-    .step { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
-    .step-num {
-        width: 48px; height: 48px;
-        background: rgba(255,85,0,0.1);
-        border: 1px solid rgba(255,85,0,0.3);
-        border-radius: 50%;
-        display: flex; align-items: center; justify-content: center;
-        font-family: 'Space Grotesk', sans-serif;
-        font-weight: 800;
-        font-size: 1.1rem;
-        color: #FF5500;
-        flex-shrink: 0;
-        position: relative;
-        z-index: 1;
-        background-color: #070B14;
-    }
-    .step-title {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1rem;
-        font-weight: 700;
-        color: #F1F5F9;
-        margin: 0 0 8px;
-    }
-    .step-body { font-size: 0.875rem; color: #94A3B8; line-height: 1.6; margin: 0; }
-    .toggle-section { margin-top: 48px; }
-    .toggle-copy { font-size: 0.95rem; color: #94A3B8; margin-bottom: 20px; font-style: italic; }
-    .toggle-controls {
-        display: flex;
-        gap: 0;
-        margin-bottom: 24px;
-        background: #0E1829;
-        border: 1px solid #1E2D40;
-        border-radius: 8px;
-        padding: 4px;
-        width: fit-content;
-    }
-    .toggle-btn {
-        background: none;
-        border: none;
-        padding: 8px 20px;
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 13px;
-        font-weight: 500;
-        color: #94A3B8;
-        cursor: pointer;
-        border-radius: 6px;
-        transition: background 0.2s, color 0.2s;
-    }
-    .toggle-btn.active { background: #1E2D40; color: #F1F5F9; }
-    .toggle-view { max-width: 640px; }
-    .code-block {
-        background: #0E1829;
-        border: 1px solid #1E2D40;
-        border-radius: 8px;
-        overflow: hidden;
-    }
-    .code-block pre {
-        margin: 0;
-        padding: 24px;
-        font-family: 'JetBrains Mono', monospace;
-        font-size: 13px;
-        line-height: 1.6;
-        color: #F1F5F9;
-        background: none;
-        border: none;
-        border-radius: 0;
-        overflow-x: auto;
-    }
-    .code-block code { background: none; border: none; padding: 0; font-family: inherit; }
-    .code-comment { color: #475569; }
-    .code-key { color: #00D4FF; }
-    .code-string { color: #22C55E; }
-    .code-bool { color: #FF5500; }
-    .ui-mockup { display: flex; flex-direction: column; gap: 16px; }
-    .ui-form-row { display: flex; flex-direction: column; gap: 6px; }
-    .ui-label { font-size: 12px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.08em; }
-    .ui-select {
-        background: #162035; border: 1px solid #1E2D40; border-radius: 6px;
-        padding: 10px 14px; font-size: 14px; color: #F1F5F9;
-    }
-    .ui-tags { display: flex; gap: 8px; flex-wrap: wrap; }
-    .ui-tag {
-        background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2);
-        color: #00D4FF; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500;
-    }
-    @media (max-width: 768px) {
-        .steps-grid { grid-template-columns: 1fr; }
-        .steps-grid::before { display: none; }
-    }
-    `],
-})
-export class HowItWorksSectionComponent {
-    readonly showCode = signal(false);
-
-    readonly steps = [
-        { num: '01', title: 'Connect your vendor', body: 'Link your AdGuard, NextDNS, or Pi-hole account. Or let us pick one for you.' },
-        { num: '02', title: 'We build your list', body: 'AI compiles, deduplicates, and maintains a filter list tailored to your setup.' },
-        { num: '03', title: 'Stay protected', body: 'Every device. Every network. One change propagates everywhere, instantly.' },
-    ];
-}
diff --git a/frontend/src/app/home/sections/nav-bar/nav-bar.component.ts b/frontend/src/app/home/sections/nav-bar/nav-bar.component.ts
deleted file mode 100644
index b14ab611..00000000
--- a/frontend/src/app/home/sections/nav-bar/nav-bar.component.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { Component, signal, HostListener } from '@angular/core';
-import { RouterLink } from '@angular/router';
-
-@Component({
-    selector: 'app-nav-bar',
-    standalone: true,
-    imports: [RouterLink],
-    template: `
-    <nav class="bloqr-nav" [class.scrolled]="scrolled()" role="navigation" aria-label="Main navigation">
-        <div class="bloqr-nav-inner">
-            <a class="bloqr-nav-brand" routerLink="/" aria-label="Bloqr home">
-                <img src="assets/logo.svg"
-                     alt="Bloqr logo" width="32" height="32" />
-                <span class="bloqr-wordmark">Bloqr</span>
-            </a>
-            <div class="bloqr-nav-links" [class.open]="menuOpen()">
-                <a href="#features" (click)="closeMenu()">Features</a>
-                <a href="#how-it-works" (click)="closeMenu()">How It Works</a>
-                <a href="#audiences" (click)="closeMenu()">Audiences</a>
-                <a href="#pricing" (click)="closeMenu()">Pricing</a>
-            </div>
-            <div class="bloqr-nav-cta">
-                <a href="#pricing" class="bloqr-btn-primary bloqr-btn-sm" (click)="closeMenu()">
-                    Get early access
-                </a>
-                <button class="hamburger" (click)="toggleMenu()"
-                        [attr.aria-expanded]="menuOpen()"
-                        aria-label="Toggle navigation menu"
-                        aria-controls="mobile-nav">
-                    <span></span><span></span><span></span>
-                </button>
-            </div>
-        </div>
-        <!-- Mobile menu -->
-        <div id="mobile-nav" class="mobile-nav" [class.open]="menuOpen()" role="region" aria-label="Mobile navigation">
-            <a href="#features" (click)="closeMenu()">Features</a>
-            <a href="#how-it-works" (click)="closeMenu()">How It Works</a>
-            <a href="#audiences" (click)="closeMenu()">Audiences</a>
-            <a href="#pricing" (click)="closeMenu()">Pricing</a>
-            <a href="#pricing" class="bloqr-btn-primary bloqr-btn-sm" (click)="closeMenu()">
-                Get early access
-            </a>
-        </div>
-    </nav>
-    `,
-    styles: [`
-    :host { display: block; }
-    .bloqr-nav {
-        position: fixed;
-        top: 0; left: 0; right: 0;
-        z-index: 50;
-        height: 64px;
-        background: rgba(7,11,20,0.85);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border-bottom: 1px solid #1E2D40;
-        transition: background 0.2s;
-    }
-    .bloqr-nav.scrolled { background: rgba(7,11,20,0.97); }
-    .bloqr-nav-inner {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 24px;
-        height: 64px;
-        display: flex;
-        align-items: center;
-        gap: 32px;
-    }
-    .bloqr-nav-brand {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        text-decoration: none;
-        flex-shrink: 0;
-    }
-    .bloqr-wordmark {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 20px;
-        font-weight: 700;
-        color: #F1F5F9;
-        letter-spacing: -0.02em;
-    }
-    .bloqr-nav-links {
-        display: flex;
-        gap: 4px;
-        flex: 1;
-    }
-    .bloqr-nav-links a {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 14px;
-        font-weight: 500;
-        color: #94A3B8;
-        text-decoration: none;
-        padding: 6px 10px;
-        border-radius: 6px;
-        transition: color 0.2s, background 0.2s;
-    }
-    .bloqr-nav-links a:hover { color: #F1F5F9; background: rgba(255,255,255,0.04); }
-    .bloqr-nav-cta {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-left: auto;
-    }
-    .bloqr-btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 6px; }
-    .hamburger {
-        display: none;
-        flex-direction: column;
-        gap: 4px;
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 8px;
-    }
-    .hamburger span {
-        display: block;
-        width: 20px;
-        height: 2px;
-        background: #94A3B8;
-        border-radius: 1px;
-        transition: background 0.2s;
-    }
-    .hamburger:hover span { background: #F1F5F9; }
-    .mobile-nav {
-        display: none;
-        flex-direction: column;
-        gap: 4px;
-        padding: 16px 24px;
-        border-top: 1px solid #1E2D40;
-        background: rgba(7,11,20,0.97);
-    }
-    .mobile-nav a {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 15px;
-        font-weight: 500;
-        color: #94A3B8;
-        text-decoration: none;
-        padding: 10px 0;
-        border-bottom: 1px solid #1E2D40;
-        display: block;
-    }
-    .mobile-nav a:last-child { border-bottom: none; margin-top: 8px; }
-    .mobile-nav a:hover { color: #F1F5F9; }
-    @media (max-width: 768px) {
-        .bloqr-nav { height: auto; min-height: 64px; }
-        .bloqr-nav-inner { height: 64px; }
-        .bloqr-nav-links { display: none; }
-        .hamburger { display: flex; }
-        .mobile-nav.open { display: flex; }
-        .bloqr-nav-cta .bloqr-btn-primary { display: none; }
-    }
-    `],
-})
-export class NavBarComponent {
-    readonly scrolled = signal(false);
-    readonly menuOpen = signal(false);
-
-    @HostListener('window:scroll')
-    onScroll(): void {
-        this.scrolled.set(window.scrollY > 10);
-    }
-
-    toggleMenu(): void {
-        this.menuOpen.update(v => !v);
-    }
-
-    closeMenu(): void {
-        this.menuOpen.set(false);
-    }
-}
diff --git a/frontend/src/app/home/sections/pricing-section/pricing-section.component.ts b/frontend/src/app/home/sections/pricing-section/pricing-section.component.ts
deleted file mode 100644
index aa0b55f9..00000000
--- a/frontend/src/app/home/sections/pricing-section/pricing-section.component.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { Component } from '@angular/core';
-
-interface PricingTier {
-    readonly id: string;
-    readonly name: string;
-    readonly price: string;
-    readonly period: string;
-    readonly features: string[];
-    readonly cta: string;
-    readonly ctaHref: string;
-    readonly highlighted: boolean;
-    readonly badge?: string;
-}
-
-@Component({
-    selector: 'app-pricing-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="pricing" aria-label="Pricing">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">PRICING</span>
-            <h2 class="bloqr-section-title">Start free. Upgrade when you're ready.</h2>
-            <p class="bloqr-section-desc">No credit card required. No contract. Cancel anytime.</p>
-            <div class="pricing-grid" role="list">
-                @for (tier of tiers; track tier.id) {
-                    <div class="pricing-card bloqr-card"
-                         [class.highlighted]="tier.highlighted"
-                         role="listitem">
-                        @if (tier.badge) {
-                            <div class="pricing-badge">{{ tier.badge }}</div>
-                        }
-                        <div class="pricing-header">
-                            <h3 class="tier-name">{{ tier.name }}</h3>
-                            <div class="tier-price">
-                                <span class="price-amount">{{ tier.price }}</span>
-                                <span class="price-period">{{ tier.period }}</span>
-                            </div>
-                        </div>
-                        <ul class="tier-features" aria-label="Features included">
-                            @for (feature of tier.features; track feature) {
-                                <li>
-                                    <span class="feature-check" aria-hidden="true">✓</span>
-                                    {{ feature }}
-                                </li>
-                            }
-                        </ul>
-                        <a [href]="tier.ctaHref" class="tier-cta"
-                           [class.bloqr-btn-primary]="tier.highlighted"
-                           [class.bloqr-btn-ghost]="!tier.highlighted">
-                            {{ tier.cta }}
-                        </a>
-                    </div>
-                }
-            </div>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .pricing-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 24px;
-        margin-top: 48px;
-        align-items: start;
-    }
-    .pricing-card {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        position: relative;
-    }
-    .pricing-card.highlighted {
-        background: linear-gradient(135deg, #0E1829, #162035);
-        border: 1px solid #FF5500 !important;
-        box-shadow: 0 0 24px rgba(255,85,0,0.15), 0 0 48px rgba(255,85,0,0.08);
-    }
-    .pricing-badge {
-        position: absolute;
-        top: -12px;
-        left: 50%;
-        transform: translateX(-50%);
-        background: #FF5500;
-        color: white;
-        font-size: 11px;
-        font-weight: 700;
-        padding: 4px 12px;
-        border-radius: 9999px;
-        letter-spacing: 0.05em;
-        text-transform: uppercase;
-        white-space: nowrap;
-    }
-    .pricing-header { display: flex; flex-direction: column; gap: 8px; }
-    .tier-name {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1rem;
-        font-weight: 700;
-        color: #F1F5F9;
-        margin: 0;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-    .tier-price { display: flex; align-items: baseline; gap: 4px; }
-    .price-amount {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 2.5rem;
-        font-weight: 800;
-        color: #F1F5F9;
-        line-height: 1;
-    }
-    .price-period { font-size: 0.875rem; color: #94A3B8; }
-    .tier-features {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        flex: 1;
-    }
-    .tier-features li {
-        display: flex;
-        gap: 8px;
-        font-size: 0.875rem;
-        color: #94A3B8;
-        align-items: flex-start;
-    }
-    .feature-check { color: #22C55E; font-weight: 700; flex-shrink: 0; }
-    .tier-cta {
-        display: block;
-        text-align: center;
-        padding: 12px 24px;
-        border-radius: 8px;
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 14px;
-        font-weight: 600;
-        text-decoration: none;
-        transition: all 0.2s;
-    }
-    @media (max-width: 768px) {
-        .pricing-grid { grid-template-columns: 1fr; }
-        .pricing-card.highlighted { margin-top: 12px; }
-    }
-    `],
-})
-export class PricingSectionComponent {
-    readonly tiers: PricingTier[] = [
-        {
-            id: 'free',
-            name: 'Free',
-            price: '$0',
-            period: '/month',
-            features: [
-                'AI-maintained flagship list',
-                '1 DNS vendor',
-                'Basic config builder',
-            ],
-            cta: 'Join the waitlist',
-            ctaHref: 'https://github.com/jaypatrick/adblock-compiler',
-            highlighted: false,
-        },
-        {
-            id: 'pro',
-            name: 'Pro',
-            price: '$9',
-            period: '/month',
-            badge: 'Most popular',
-            features: [
-                'Everything in Free',
-                'Multi-instance sync (up to 5 vendors)',
-                'Natural language rule builder',
-                'AI threat intelligence',
-            ],
-            cta: 'Get early access',
-            ctaHref: 'https://github.com/jaypatrick/adblock-compiler',
-            highlighted: true,
-        },
-        {
-            id: 'power',
-            name: 'Power',
-            price: '$19',
-            period: '/month',
-            features: [
-                'Everything in Pro',
-                'Unlimited instances',
-                'API access',
-                'CLI + CI/CD pipeline integration',
-            ],
-            cta: 'Get early access',
-            ctaHref: 'https://github.com/jaypatrick/adblock-compiler',
-            highlighted: false,
-        },
-    ];
-}
diff --git a/frontend/src/app/home/sections/problem-section/problem-section.component.ts b/frontend/src/app/home/sections/problem-section/problem-section.component.ts
deleted file mode 100644
index 9643b756..00000000
--- a/frontend/src/app/home/sections/problem-section/problem-section.component.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Component } from '@angular/core';
-
-interface ComparisonCard {
-    readonly icon: string;
-    readonly title: string;
-    readonly myth: string;
-    readonly reality: string;
-}
-
-@Component({
-    selector: 'app-problem-section',
-    standalone: true,
-    template: `
-    <section class="bloqr-section" id="problem" aria-label="The Problem">
-        <div class="bloqr-container">
-            <span class="bloqr-section-label">THE PROBLEM</span>
-            <h2 class="bloqr-section-title">You thought you were protected.</h2>
-            <div class="problem-desc">
-                <p>Most consumer VPNs are expensive proxies — not privacy tools. Your ISP still sees everything. Ads still track you. Malware still loads.</p>
-                <p>Bloqr blocks threats at the DNS level, before they reach your device. No rerouting. No trust problem relocated.</p>
-            </div>
-            <div class="comparison-grid" role="list">
-                @for (card of cards; track card.title) {
-                    <div class="comparison-card bloqr-card" role="listitem">
-                        <div class="comparison-icon">{{ card.icon }}</div>
-                        <h3>{{ card.title }}</h3>
-                        <div class="comparison-row">
-                            <div class="comparison-col myth">
-                                <span class="comparison-label">What a VPN does</span>
-                                <p>{{ card.myth }}</p>
-                            </div>
-                            <div class="comparison-col reality">
-                                <span class="comparison-label">What Bloqr does</span>
-                                <p>{{ card.reality }}</p>
-                            </div>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </section>
-    `,
-    styles: [`
-    :host { display: block; }
-    .problem-desc { max-width: 640px; margin-bottom: 48px; }
-    .problem-desc p { font-size: 1.05rem; color: #94A3B8; line-height: 1.65; margin: 0 0 16px; }
-    .comparison-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 24px;
-    }
-    .comparison-card { display: flex; flex-direction: column; gap: 12px; }
-    .comparison-icon { font-size: 28px; }
-    .comparison-card h3 {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1rem;
-        font-weight: 700;
-        color: #F1F5F9;
-        margin: 0;
-    }
-    .comparison-row { display: flex; gap: 16px; flex-direction: column; }
-    .comparison-col { flex: 1; }
-    .comparison-label {
-        font-size: 10px;
-        font-weight: 700;
-        letter-spacing: 0.15em;
-        text-transform: uppercase;
-        display: block;
-        margin-bottom: 6px;
-    }
-    .myth .comparison-label { color: #EF4444; }
-    .reality .comparison-label { color: #22C55E; }
-    .comparison-col p { font-size: 0.875rem; color: #94A3B8; line-height: 1.5; margin: 0; }
-    @media (max-width: 768px) {
-        .comparison-grid { grid-template-columns: 1fr; }
-    }
-    `],
-})
-export class ProblemSectionComponent {
-    readonly cards: ComparisonCard[] = [
-        {
-            icon: '👁️',
-            title: 'Ad Tracking',
-            myth: 'Encrypts your traffic but doesn\'t block tracking pixels, fingerprinters, or ad scripts.',
-            reality: 'Blocks ad and tracker domains at the DNS layer before any connection is made.',
-        },
-        {
-            icon: '🛡️',
-            title: 'Malware Protection',
-            myth: 'Routes traffic through a server — malware domains still resolve and load.',
-            reality: 'Known malware domains are blocked before your device ever makes a request.',
-        },
-        {
-            icon: '🔒',
-            title: 'Privacy',
-            myth: 'Relocates trust from your ISP to the VPN provider — who now sees everything.',
-            reality: 'DNS-level blocking leaves no traffic to intercept or log by any third party.',
-        },
-    ];
-}
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
index 2f306f34..a940074a 100644
--- a/frontend/src/assets/logo.svg
+++ b/frontend/src/assets/logo.svg
@@ -1,24 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Bloqr logo">
-  <defs>
-    <linearGradient id="bloqr-orange" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#FF7033"/>
-      <stop offset="100%" stop-color="#CC4400"/>
-    </linearGradient>
-    <radialGradient id="bloqr-glow" cx="50%" cy="35%" r="55%">
-      <stop offset="0%" stop-color="#FF5500" stop-opacity="0.22"/>
-      <stop offset="100%" stop-color="#FF5500" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <!-- Dark navy background -->
-  <rect width="64" height="64" rx="12" fill="#070B14"/>
-  <!-- Orange shield outline -->
-  <path d="M32 10 Q32 10 51 20 V37 Q51 51 32 58 Q13 51 13 37 V20 Z"
-        fill="#0E1829" stroke="url(#bloqr-orange)" stroke-width="2.5" stroke-linejoin="round"/>
-  <!-- Ambient glow -->
-  <path d="M32 10 Q32 10 51 20 V37 Q51 51 32 58 Q13 51 13 37 V20 Z"
-        fill="url(#bloqr-glow)"/>
-  <!-- "B" lettermark in orange -->
-  <text x="32" y="41" text-anchor="middle"
-        font-family="'Space Grotesk', 'Segoe UI', Arial, sans-serif"
-        font-size="24" font-weight="800" fill="url(#bloqr-orange)">B</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 48" fill="none">
+  <!-- Filter-list icon: 4 bars decreasing in width, bottom bar orange = "compiled output" -->
+  <g>
+    <rect x="0" y="0"  width="32" height="5" rx="2.5" fill="#F1F5F9"/>
+    <rect x="0" y="10" width="24" height="5" rx="2.5" fill="#F1F5F9" opacity="0.7"/>
+    <rect x="0" y="20" width="16" height="5" rx="2.5" fill="#F1F5F9" opacity="0.5"/>
+    <rect x="0" y="30" width="8"  height="5" rx="2.5" fill="#FF5500"/>
+    <!-- small arrow tip right of the orange bar -->
+    <path d="M11 32.5 L15 32.5 L13 30 Z" fill="#FF5500" opacity="0.6"/>
+  </g>
+  <!-- Wordmark -->
+  <text x="44" y="14" font-family="'Space Grotesk', 'JetBrains Mono', monospace" font-size="14" font-weight="700" letter-spacing="0.08em" fill="#F1F5F9">ADBLOCK</text>
+  <text x="44" y="32" font-family="'Space Grotesk', 'JetBrains Mono', monospace" font-size="14" font-weight="400" letter-spacing="0.12em" fill="#94A3B8">COMPILER</text>
+  <!-- Orange accent line under COMPILER -->
+  <rect x="44" y="36" width="56" height="2" rx="1" fill="#FF5500" opacity="0.6"/>
 </svg>